วันจันทร์ที่ 13 สิงหาคม พ.ศ. 2555

การตกแต่งตัวอักษร

การตกแต่งข้อความ
แท็กที่ใช้ตกแต่งข้อความเพื่อเน้นคำ หรือข้อความสั้นๆ หรือให้ดูสวยงาม มาตรฐาน HTML 4.0 มีแท็กสำหรับใช้ตกแต่งข้อความมากมาย ทำได้แทบจะครบทุกรูปแบบ และสามารถแบ่งออกเป็น 2 กลุ่มใหญ่ คือ
  • Logical Format - เป็นแท็กที่มีชื่อที่สื่อความหมาย ซึ่งเบราเซอร์แต่ละยี่ห้อจะแปลแท็กเหล่านี้ต่างกัน และให้ผลเป็นเว็บเพจที่มีหน้าตาต่างกัน แต่ก็แตกต่างกันไม่มากนัก โดยยังคงให้ผลใกล้เคียงกับชื่อของแท็กนั้นๆ เช่น <EM> หมายถึงข้อความที่ต้องการเน้นเป็นพิเศษ ซึ่งเว็บเบราเซอร์อาจจะแสดงเป็นตัวหนา หรือตัวเอียงก็ได้ ขึ้นกับเบราเซอร์แต่ละตัว และการกำหนดสไตล์ชีท
  • Fixical Format - แท็กที่กำหนดลักษณะตายตัว ทุกเบราเซอร์จะแปลความหมายแท็กเหล่านี้เหมือนกันหมด เว็บเพจที่ได้จึงเหมือนกัน เช่น <B> หมายถึงข้อความแบบตัวหนา
การกำหนดสีของตัวอักษร
การกำหนดสีของตัวอักษรนั้น จะทำการเขียนในส่วนของคำสั่ง <BODY> โดยเราจะใช้แอตทริบิวต์ Text มาเป็นตัวกำหนดจะต่างจากคำสั่ง <font color>ที่การสั่งแบบนี้จะกำหนดทั้งหน้าเว็บไซด์โดยกำหนดภายในTAX ของ   <body>
<BODY TEXT="#RGB หรือ กำหนดชื่อสีที่ต้องการ">
การกำหนดตัวอักษรให้มีความหนา
<B>..........</B>
ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น
<HTML>
<HEAD>
             <TITLE>การกำหนดตัวหนา</TITLE>
</HEAD>
<BODY> 
     ตัวอักษรปรกติ COMPUTER
     ตัวอักษรหนา <B>COMPUTER</B>
</BODY>
</HTML>
การกำหนดตัวอักษรให้ขีดเส้นใต้
<U>..........</U>
ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทั้งนี้เพื่อเน้นข้อความในประโยคนั้น
<HTML>
<HEAD>
             <TITLE>การกำหนดการขีดเส้นใต้</TITLE>
</HEAD>
<BODY> 
     ตัวอักษรปกติ COMPUTER
     ตัวอักษรที่ขีดเส้นใต้ <U>COMPUTER</U>
</BODY>
</HTML>
หมายเหตุ แท็กนี้ไม่นิยมใช้เนื่องจากอาจก่อให้เกิดความสับสนกับข้อความที่เป็นจุดลิงก์ได้
การกำหนดตัวอักษรให้มีการเอน
<I>..........</I>
ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น
<HTML>
<HEAD>
             <TITLE>การกำหนดอักษรเอน</TITLE>
</HEAD>
<BODY> 
     ตัวอักษรปกติ COMPUTER
     ตัวอักษรเอน <i>COMPUTER</i>
</BODY>
</HTML>
การกำหนดตัวอักษรกระพริบ
<BLINK>..........</BLINK>
ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป
<HTML>
<HEAD>
             <TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY text="red"> 
     <Blink>COMPUTER</Blink>
     แสดงผลได้เฉพาะบน Netscape
</BODY>
</HTML>
หมายเหตุ  ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้
การกำหนดรูปแบบของตัวอักษร
<FONT FACE="font name หรือ typeface">..........</FONT>
เป็นการกำหนดฟอนต์ของตัวอักษรในเว็บเพจ ซึ่งเราสามารถกำหนดได้ด้วยคุณสมบัติที่ชื่อว่า FACE และตามด้วยชื่อฟอนต์ที่เราต้องการ เอกสารเว็บอนุญาตให้กำหนดฟอนต์ ได้หลายฟอนต์ โดยเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ
  • ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi
  • ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif
<HTML>
<HEAD>
             <TITLE>FONT FACE </TITLE>
</HEAD>
<BODY> 
     ชนิดของฟอนต์ปกติ<BR>
     <FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif</Font>
</BODY>
</HTML>
ผลลัพธ์
ชนิดของฟอนต์ปกติ
ฟอนต์ชื่อ MS Sans Serif
การกำหนดขนาดของตัวอักษร
<FONT SIZE="ค่ากำหนดขนาดของตัวอักษร">..........</FONT>
การกำหนดขนาดของตัวอักษรในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้อยู่ 2 รูปแบบคือ
  • กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 โดยค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร และค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร
<HTML>
<HEAD>
             <TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red"> 
     <FONT SIZE="1">Computer</Font>
     <FONT SIZE="2">Computer</Font>
     <FONT SIZE="3">Computer</Font>
     <FONT SIZE="4">Computer</Font>
     <FONT SIZE="5">Computer</Font>
     <FONT SIZE="6">Computer</Font>
     <FONT SIZE="7">Computer</Font>
</BODY>
</HTML>
  • กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังีน้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4
<HTML>
<HEAD>
             <TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red"> 
     <FONT SIZE="+4">Computer</Font>
     <FONT SIZE="+3">Computer</Font>
     <FONT SIZE="+2">Computer</Font>
     <FONT SIZE="+1">Computer</Font>
     Computer
     <FONT SIZE="-1">Computer</Font>
     <FONT SIZE="-2">Computer</Font>
</BODY>
</HTML>
คำสั่งลดขนาดตัวอักษรลง 1 ระดับ
<SMALL>..........</SMALL>
คำสั่ง < SMALL > เป็นคำสั่งที่สามารถลดขนาดของตัวอักษรลง 1 ระดับจากขนาดของอักษรปัจจุบันได้ทันที โดยไม่ต้องไประบุด้วยคำสั่ง < font size >
<HTML>
<HEAD>
             <TITLE>SMALL </TITLE>
</HEAD>
<BODY> 
     <FONT SIZE="4" color="green" >Computer</Font>     <Small>Computer</Smaii>
     <FONT SIZE="4" color="green">Computer</Font>
</BODY>
</HTML>
คำสั่งเพิ่มขนาดของตัวอักษร 1 ระดับ
<BIG>..........</BIG>
คำสั่ง <BIG> เป็นคำสั่งที่สามารถเพิ่มขนาดของตัวอักษรขึ้น 1 ระดับจากตัวอักษรปัจจุบันได้ทันที โดยไม่ต้องใช้คำสั่ง <font size>
<HTML>
<HEAD>
             <TITLE>BIG </TITLE>
</HEAD>
<BODY> 
     <FONT SIZE="2" color="green" >Computer</Font>
     <Big>Computer</Big>
     <FONT SIZE="2" color="green">Computer</Font>
</BODY>
</HTML>


การกำหนดแบบตัวอักษร (Font)
ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE> การกำหนด Font ที่จะใช้ในเว็บเพจ </TITLE>
</HEAD>
<BODY>
   <FONT FACE="AngsanaUPC">
    นี่คือ Font แบบ AngsanaUPC <BR>
   </FONT>
   <FONT FACE="JasmineUPC">
   นี่คือ Font แบบ JasmineUPC<BR>
   </FONT>
   <FONT FACE="IrisUPC">
   นี่คือ Font แบบ IrisUPC <BR>
   </FONT>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
นี่คือ Font แบบ AngsanaUPC
นี่คือ Font แบบ JasmineUPC
นี่คือ Font แบบ IrisUPC 

อธิบายคำสั่ง 

<FONT FACE="ชื่อฟ้อนต์ที่ใช้">เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT>เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ


การกำหนดลักษณะและแบบของตัวอักษร
        เป็นการกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษร
เป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทาง
วิทยาศาสตร์ เป็นต้น

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การกำหนดรูปแบบของตัวอักษร</TITLE>
</HEAD>
<BODY>
    การกำหนดรูปแบบตัวอักษรแบบต่าง ๆ <P>
    <B> การกำหนดตัวอักษรแบบตัวหนา</B><P>
    <I> การกำหนดตัวอักษรแบบตัวเอียง</I><P>
    <S> การกำหนดตัวอักษรแบบตัวขีดฆ่า</S><P>
    <U> การกำหนดตัวอักษรแบบขีดเส้นใต้</U><P>
    ข้อความแบบฟังก์ชั่นทางคณิตศาสตร Super Script E=MC<SUP>2</SUP><P>
    ข้อความแบบสูตรทางวิทยาศาสตร์ Sub Script H<SUB>2</SUB>O<P>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
การกำหนดรูปแบบตัวอักษรแบบต่าง ๆ
การกำหนดตัวอักษรแบบตัวหนา
การกำหนดตัวอักษรแบบตัวเอียง
การกำหนดรูปแบบตัวอักษรแบบขีดฆ่า
การกำหนดรูปแบบตัวอักษรแบบขีดเส้นใต้
ข้อความแบบฟังก์ชั่นทางคณิตศาสตร์ Super Script E=MC2
ข้อความแบบสูตรทางวิทยาศาสตร์ Sub Script H2O
อธิบายคำสั่ง
<B>...</B>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
<I>...</I>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S>...</S>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U>...</U>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<SUP>...</SUP>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
<SUB>...</SUB>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script


การกำหนดขนาดตัวอักษร            ถ้าไม่กำหนดขนาดให้เมื่อนำเอกสาร HTML ไปแสดงบนบราวเซอร์ ขนาดของตัวอักษรจะถูกกำหนดเป็นค่าพื้นฐาน     หากต้องการกำหนดเอง   ก็สามารถทำได้โดยขนาดของตัวอักษรจะมี 7 ขนาด คือ 1 – 7 โดยจะเรียงจากเล็กไปใหญ่

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
    <TITLE>การกำหนดขนาดตัวอักษร </TITLE>
</HEAD>
<BODY>
    <FONT SIZE=6>
    นี่คือขนาดตัวอักษร = 6 <BR>
    </FONT>
    <FONT SIZE=5>
    นี่คือขนาดตัวอักษร = 5 <BR>
    </FONT>
    <FONT SIZE=4>
    นี่คือขนาดตัวอักษร =4 <BR>
    </FONT>
   <FONT SIZE=2>
    นี่คือขนาดตัวอักษร =2 <BR>
    </FONT>
</BODY>
</HTML>
ผลลัพธ์ที่ได้ 
นี่คือขนาดตัวอักษร = 6
นี่คือขนาดตัวอักษร = 5
นี่คือขนาดตัวอักษร = 4
นี่คือขนาดตัวอักษร = 2
อธิบายคำสั่ง
<FONT SIZE=ขนาดตัวอักษร>
เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษร
สามารถกำหนดได้ตั้งแต่ 1 - 7
</FONT>
เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
การกำหนดตัวอักษรเป็นหัวเรื่อง
การกำหนดตัวอักษรเป็นหัวเรื่อง กำหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 7 โดยเรียงจากใหญ่ไปเล็ก
รูปแบบคำสั่ง  HTML ในการกำหนดตัวอักษรเป็นหัวเรื่อง <hn>ข้อความ</hn>
<HTML>
<HEAD>
    <TITLE> การกำหนดตัวอักษรเป็นหัวเรื่อง</TITLE>
</HEAD>
<BODY>
            <h1>การกำหนดตัวอักษรเป็นหัวเรื่อง H1 ขนาด 1 </h1>
            <h2>การกำหนดตัวอักษรเป็นหัวเรื่อง H2 ขนาด 2</h2>
            <h3>การกำหนดตัวอักษรเป็นหัวเรื่อง H3 ขนาด 3</h3>
            <h4>การกำหนดตัวอักษรเป็นหัวเรื่อง H4 ขนาด 4</h4>
            <h5>การกำหนดตัวอักษรเป็นหัวเรื่อง H5 ขนาด 5</h5>
            <h6>การกำหนดตัวอักษรเป็นหัวเรื่อง H6 ขนาด 6</h6>
            <h7>การกำหนดตัวอักษรเป็นหัวเรื่อง H7 ขนาด 7</h7>
</BODY>
</HTML>

ผลลัพธ์ที่ได้




http://www.nr.ac.th/learning/htmlforweb/learning2.html
http://school.obec.go.th/krurenu/web1.html
http://school.obec.go.th/krurenu/html/p2-2.html
http://school.obec.go.th/krurenu/html/p2-3.html
http://school.obec.go.th/krurenu/html/p2-4.html
เมื่อวันที่ 13 สิงหาคม 2555
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันจันทร์ที่ 9 กรกฎาคม พ.ศ. 2555

HTML TAG พื้นฐาน


HTML TAG พื้นฐาน

 HTML ย่อมาจาก ใช้โปรแกรมอะไรสร้างและเปิดดูเอกสาร  


HTML ย่อมาจาก
     HTML ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ     การสร้างไฟล์   HTML  เราสามารถสร้างจาก Text  Editor เช่นจาก Notepad หรือ  Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่  " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่  " " จะ กลายเป็นไฟล์   .TXT แทน  ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html   
เช่น Notepad เป็นต้น โดยวิธีการเขียน ก็เหมือนกันการพิมพ์เอกสารทั่ว ๆ ไป เพียงแต่เวลาที่เราทำการเซพ (Save) ไฟล์ให้เราทำการ Save เก็บไว้เป็นไฟล์นามสกุลเป็น .htm หรือ .html สามารถ—แสดงผลออกทางโปรแกรมประเภท browser (เช่น Internet Explorer, Netscape Navigator และ Opera เป็นต้น)





ตัวอย่างเช่น

เช่น  NotePad, EditPlus หรือโปรแกรม Dreamweaver 



โปรแกรม Note pad


โปรแกรมเท็กเอดิเตอร์ (Text Editor) คืออะไร

คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือ เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver 


องค์ประกอบของเอกสาร html


การเขียนโฮมเพจด้วยภาษา HTML  นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้

     
        1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
      

      2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML 




รูปแบบโดยส่วนมากของ HTML มีลักษณะดังนี้


-<html>      คือ  คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section) 


-   <head>    คือ<HEAD>..........</HEAD>
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

-   <title>       คือ <TITLE>..........</TITLE >
       ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะ พิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุม ถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)

-   <boby>     คือ<BODY>..........</BODY>
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>



<HEAD>....</HEAD>  เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ

<TITLE>....</TITLE>   ใช้บอกชื่อของเว็บเพจ

<BODY>....</BODY>  เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหาทั้งหมดอาจรวมถึงรูปภาพตารางการเชื่อมโยง


                       

                                   

-   <BR>       คือ   การขึ้นบัรรทัดใหม่ แทนการกด Enter 1 ครั้ง

ตัวอย่าง 






-   <p>          คือ   ใช้สำหรับการจัดย่อหน้าตัวอักษร  


ตัวอย่าง 



 แหล่งที่มา 

-http://pirun.ku.ac.th/~agrtnk/web/units/unit1/unit1-3.htm  
             วันที่ 7 ก.ค. 2555





เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)