1. บทที่ 2 HTML HyperTextMarkup Language วิชา การเขียนโปรแกรมบนเว็บ (Web Programming) อาจารย์เพียรทิพย์ ศรีสุธรรม

2. ความหมายของ HTML • HTMLหรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ • แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย • HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C

3. องค์ประกอบของ HTML • Tagเป็นสัญลักษณ์ที่บอกให้ Browser แสดงผลในรูปแบบใด • ชื่อ Tag จะอยู่ในครื่องหมาย < > เช่น <body> • แบ่งเป็น 2 ประเภทคือ • Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <P>, <BR> เป็นต้น • Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย Slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น • <B>…</B> • <BLINK>…</BLINK> เป็นต้น

4. องค์ประกอบของ HTML • Attributeเป็นส่วนขยายความสามารถของ Tag นั้นๆ จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น • Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป มีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น • โดยจะเขียนไว้ใน Tag เปิด เช่น <h1 align = “right”>, align = “right” คือ Attribute • เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ <P> ประกอบด้วย ALIGN="Left/Right/Center/Justify" ซึ่งสามารถเขียนได้ดังนี้          <P ALIGN="Left">...</P>          หรือ          <P ALIGN="Right">...</P>

5. องค์ประกอบของ HTML • Contentคือเนื้อหาที่ต้องการให้แสดงบนหน้าเว็บ • เช่น <h1>My homepage</h1>, My homepage คือ Content • Elementคือชุดของ Tag เริ่มตั้งแต่เครื่องหมาย Tag เปิด ไปจนกระทั้ง Tag ปิด ซึ่งรวมทั้ง Attribute และ Content ด้วย

6. องค์ประกอบของ HTML Tag เปิด content element Tag ปิด <html> <head> <title>NPRU Travel</title> </head> <body> <h1 align="center"> เว็บไซต์เพื่อการท่องเที่ยวนครปฐม </h1> </body> </html>

7. กฎการเขียนเอกสาร HTML การเขียน HTML ต้องคำนึงถึงไวยากรณ์ (Syntax) ดังต่อไปนี้ Tag ต้องล้อมรอบด้วยเครื่องหมายนี้ < > ในวงเล็บ <Tag> Tag จะต้องพิมพ์ติดกับ < มิฉะนั้น Web browser จะไม่สามารถแปลภาษาได้ Tag ใช้ตัวพิมพ์เล็กหรือใหญ่ก็ได้ ความหมายเดียวกัน เช่น <title>, <Title>, <TITLE> มีความหมายเท่ากัน Tag ส่วนใหญ่จะมาเป็นคู่ มี tag เปิด และ tag ปิด เช่น <h1>ยินดีต้อนรับ</h1> ยกเว้น บาง tag ที่ยอมให้มี tag เปิดได้อย่างเดียว เช่น <br> Tag ปิด ต้องมีเครื่องหมาย / (Slash) นำหน้าเช่น </table> ในการพิมพ์เอกสาร HTML สามารถพิมพ์แยกบรรทัดหรือเคาะช่องว่าง หรือพิมพ์ติดกันก็ได้

8. กฎการเขียนเอกสาร HTML มีการเขียนเป็นแบบ LiFo (Last in – First out) Tag ที่เปิดก่อนต้องปิดทีหลัง เช่น

9. โครงสร้างของเอกสาร HTML Tag head แท็กMeta Element Tag HTML Tag body <html> <head> <meta name = "keywords" content = "Thailand, Travel"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>NPRU Travel</title> </head> <body> <h2 align="center"> เว็บไซต์เพื่อการท่องเที่ยว จังหวัดนครปฐม </h2> </body> </html>

10. โครงสร้างของเอกสาร HTML <HTML>..... </HTML> เป็น Tag ที่ใช้เพื่อกำหนดว่าเอกสารนี้มีการใช้ภาษา HTML เป็น Markup Language <HEAD>.....</HEAD>เป็น Tag ที่ใช้กำหนดส่วนหัวของเอกสาร HEAD ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้รายละเอียดเกี่ยวกับเอกสารฉบับนี้ ข้อมูลตรงส่วนนี้จะไม่ปรากฏอยู่บนหน้าจอ <BODY>.....</BODY> เป็น Tag ที่บอกถึงลักษณะต่างๆ ของเอกสารฉบับนี้ ซึ่งใน BODY จะมี Attribute ต่างๆเช่น BGCOLOR แทนสีพื้นหลัง TEXT แทนสีของตัวหนังสือ ข้อความที่อยู่ภายใต้ Tag <BODY> จะเป็นข้อความที่แสดงในหน้าเว็บเพจ

11. โครงสร้างของเอกสาร HTML <TITLE>..... </TITLE> เป็นการระบุข้อความที่ต้องการให้เป็นชื่อของเอกสาร โดย TITLE เป็น ส่วนหนึ่งของ HEAD และจะต้องปิด Tag ให้เรียบร้อยมิฉะนั้นจะเกิดข้อผิดพลาดได้ ผลลัพธ์ของ Tag นี้ คือ ข้อความที่อยู่ระหว่าง <TITLE>..... </TITLE> จะแสดงใน Title bar ของWindows

12. โครงสร้างเอกสาร HTML • ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows • สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>…</HTML>

13. ส่วนหัวเรื่องเอกสารเว็บ (Head Section) • Head Sectionเป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆเช่นชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญคือ <HEAD> <TITLE>ข้อความอธิบายชื่อเรื่อง</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ"> <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2, …"> </HEAD>

14. ส่วนหัวเรื่องเอกสารเว็บ (Head Section) • ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี และควรใช้เฉพาะภาษาอังกฤษที่มีความหมายครอบคลุมถึงเนื้อหาของเอกสารเว็บ หรือมีลักษณะเป็นคำสำคัญในการค้นหา (Keyword) • การแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กำกับด้วย Tag TITLE ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window นั่นเอง) • Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการทำคลังบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย • การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ โปรแกรมเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง

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

16. ส่วนเนื้อหาเอกสารเว็บ (Body Section) ต่อ.. • ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้ • กลุ่มคำสั่งเกี่ยวกับการจัดการพารากราฟ • กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร • กลุ่มคำสั่งการทำเอกสารแบบรายการ (List) • กลุ่มคำสั่งเกี่ยวกับการทำลิงค์ • กลุ่มคำสั่งจัดการรูปภาพ • กลุ่มคำสั่งจัดการตาราง (Table) • กลุ่มคำสั่งควบคุมเฟรม • กลุ่มคำสั่งอื่นๆ

17. การสร้างเอกสาร HTML - วิธีการสร้าง การสร้าง HTML Document นั้นสามารถสร้างได้หลายวิธี เช่น 1. ใช้โปรแกรม Text Editor อย่างเช่น Notepad , Editplus ที่รับข้อมูลของ Text เป็นรหัส ASCII สร้างเอกสาร HTML ขึ้นมาแล้ว save file ด้วยนามสกุล .html 2. ใช้โปรแกรมสร้างเว็บสำเร็จรูป (Web Authoring Tools) สร้างขึ้นมา โดยโปรแกรมเหล่านี้จะมีองค์ประกอบต่างๆ ของ Web Page มาให้แล้ว ผู้ใช้เพียงแค่เลือกใช้งานเท่านั้น เช่น Dream Weaver , Frontpage , Go Live

18. การสร้างเอกสาร HTML - วิธีการสร้าง 3. ใช้โปรแกรมอย่าง เช่น Microsoft Office สร้างเอกสาร แล้วทำการ Save File ให้เป็น HTML Document ก็ได้ การแสดง HTML Document นั้นไม่จำเป็นที่จะต้องมี คำสั่ง HTML ในเอกสารนั้นเลยก็ได้ มีเพียงข้อความแล้ว save file ให้เป็น .HTML แค่นั้นก็สามารถใช้งานได้แล้ว เพียงแต่ว่ารูปแบบการแสดงอาจจะไม่ถูกต้องตามที่ต้องการ

19. การสร้างเอกสาร HTML - วิธีการสร้าง ตัวอย่างการใช้ Notepad สร้างเอกสาร HTML ขึ้นมาโดยยังไม่มีคำสั่ง HTML

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

21. ส่วนหัวของโปรแกรม • <HEAD>..........</HEAD> • คำสั่ง <HEAD> เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่องของไฟล์ HTML และภายในคำสั่ง <HEAD>...</HEAD> จะมีคำสั่งย่อยอีกคำสั่งหนึ่งคือ <TITLE>........</TITLE>

22. กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์ • <TITLE>..........</TITLE > • คำสั่ง <TITLE> เป็นคำสั่งที่แสดงชื่อของเอกสาร หรือชื่อเรื่องของไฟล์ HTML ซึ่งข้อความภายในคำสั่งจะปรากฎหรือแสดงผลในส่วนของไตเติลบาร์ (Title Bar) ของโปรแกรมเว็บเบราเซอร์ แต่จะไม่แสดงในส่วนของการแสดงผลในโปรแกรมเว็บเบราเซอร์

23. ส่วนเนื้อหาของโปรแกรมส่วนเนื้อหาของโปรแกรม • <BODY>..........</BODY> • คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บเบราเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ

24. สำหรับ <BODY> จะมี Attribute อยู่หลายๆ ตัว ซึ่งจะมีรายละเอียดดังนี้ <BODY TEXT="BLACK" BGCOLOR ="YELLOW" LINK="BLUE" VLINK="BLUE" ALINK="WHITE" BACKGROUND="IMAGE_NAME"> ความหมายของ Attribute ต่างๆ เป็นดังนี้ text ใช้สำหรับกำหนดสีของข้อความทั่วไป bgcolor กำหนดสีพื้น แต่ถ้ามีการกำหนดภาพ Background เอาไว้ด้วยจะไม่มีผลอะไร link กำหนดสีของข้อความที่มีการเชื่อมโยงไปยัง page อื่น (ก่อนเชื่อม) vlink กำหนดสีของข้อความที่มีการเชื่อมโยงไปยัง page อื่นที่เคยไปมาแล้ว (หลังเชื่อม) alink กำหนดสีของข้อความที่มีการเชื่อมโยงไปยัง page อื่นในขณะที่กำลังกดปุ่มบนเมาส์ค้างอยู่ (ขณะเลือก) background กำหนดรูปภาพที่จะใช้เป็นฉากหลัง ส่วนเนื้อหาของโปรแกรม

25. การกำหนดสีของพื้นหลังของตัวอักษรการกำหนดสีของพื้นหลังของตัวอักษร จะทำการเขียนในส่วนของคำสั่ง <BODY> โดยเราจะใช้แอตทริบิวต์มาเป็นตัวกำหนด การกำหนดสีของพื้นหลัง - การกำหนดสีพื้นหลังนั้น เราสามารถมีรูปแบบการกำหนดสีพื้นหลังได้อยู่ 2 รูปแบบ ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น • <HTML><HEAD>   <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD> <BODY BGCOLOR="yellow"> การกำหนดสีพื้นหลังโดยการกำหนดสี </BODY></HTML>

26. การกำหนดสีของพื้นหลังของตัวอักษร แบบที่ 2 การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG • <HTML><HEAD>   <TITLE>การกำหนดสีพื้นหลังโดยการกำหนดสี</TITLE> </HEAD><BODY BGCOLOR="#FF66FF"> การกำหนดสีพื้นหลังโดยใช้หลัก "#RBG"</BODY></HTML>

27. การกำหนดสีของตัวอักษรการกำหนดสีของตัวอักษร รูปแบบ :: <BODY TEXT="#RGB หรือกำหนดชื่อสีที่ต้องการ"> • <HTML><HEAD>   <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD><BODY BGCOLOR="yellow" text="blue" > การกำหนดสีตัวอักษร</BODY></HTML>

28. การกำหนดสีของตัวอักษรการกำหนดสีของตัวอักษร การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG • <HTML><HEAD>    <TITLE>การกำหนดสีตัวอักษร</TITLE> </HEAD><BODY BGCOLOR="yellow" text="#FF0066" > การกำหนดสีตัวอักษร</BODY></HTML>

29. การแบ่งย่อหน้าและการจัดตำแหน่ง – ย่อหน้า / เว้นบรรทัด <P> เป็นตัวจัดให้ข้อความที่ตามหลังมาขึ้นย่อหน้า (Paragraph) ใหม่ <BR> เพื่อให้ข้อความขึ้นบรรทัดใหม่ ( Tag <BR> ไม่จำเป็นต้องมี Tag ปิดก็ได้ ) ความแตกต่างของ <P>และ <BR> คือ ถ้าหากเราต้องการขึ้นย่อหน้าใหม่ จะใช้ Tag<P> การขึ้นบรรทัดใหม่นั้นก็เว้นระยะระหว่างย่อหน้าเดิมกับย่อหน้าใหม่เพิ่มขึ้น แต่ถ้าหากจบบรรทัดต้องการจะขึ้นบรรทัดใหม่ โดยข้อความยังเป็นใจความต่อเนื่องกันอยู่ก็สามารถใช้ <BR> แทนได้

30. การแบ่งย่อหน้าและการจัดตำแหน่ง – การจัดตำแหน่ง • จัดชิดซ้ายโดยทั่วไปตัวอักษรหรือประโยคจะถูกจัดชิดซ้ายโดยอัตโนมัติอยู่แล้ว แต่ถ้าต้องการระบุจริงๆ ก็ทำได้ด้วยการใช้ TAG div โดยระบุ Attribute align ให้เป็น left ลองดูตัวอย่าง <div align="left">ข้อความ</div> • ผลที่ได้คือ ข้อความนี้ถูกจัดชิดซ้าย

31. การแบ่งย่อหน้าและการจัดตำแหน่ง – การจัดตำแหน่ง จัดกลางหน้าใช้คำสั่งง่ายๆ ข้างล่างนี้ <div align=“center”></div> หรือ <center>ข้อความ</center> ก็ได้ ผลที่ได้คือ ข้อความนี้ถูกจัดกลางหน้า จัดชิดขวาใช้คำสั่งคล้ายกับการจัดชิดซ้าย ดังนี้ <div align="right">ข้อความ</div> ผลที่ได้คือ ข้อความนี้ถูกจัดชิดขวา

32. แบ่งข้อความหน้าจอ เส้นคั่นที่ไม่ใช่การขีดเส้นใต้ตัวอักษร Horizontal Rule <HR> ตัวอย่าง <body>It has been<hr>Information technology</body> ผลลัพธ์คือ It has been Information technology การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น

34. การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น ความยาวของการคั่น <HR WIDTH = NUMBER/PERCENT> กำหนดได้ 2 รูปแบบ ที่ Attribute Width 1. กำหนดตามจำนวนจุดของพิกเซลล์บนจอภาพ 2. กำหนดเป็นเปอร์เซ็นความยาว เปรียบเทียบกับหน้าจอ <hr width = 150> และ <hr width = 75%> จาก 100%

35. การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น ความหนาของเส้นคั่น <HR SIZE = NUMBER> กำหนดขนาดความหนา (สูง) ของเส้นจะใช้ Attribute Size ไม่ต้องกำหนดเป็น % <hr size = 3> จะหนากว่า <hr size = 6> ตัวเลขเพิ่มขึ้น ขนาดความหนา(สูง)จะสูงขึ้น

36. การวางตำแหน่งเส้นคั่นการวางตำแหน่งเส้นคั่น บ่อยครั้งที่เส้นแบ่งข้อความไม่ยาวเต็มจอ และจะปรากฎตรงกลางจอภาพเสมอ ถ้าต้องการเปลี่ยนไปชิดริม ให้เพิ่ม Attribute Align = Left หรือ Align = Right ลงในคำสั่ง <HR> หรือต้องการให้อยู่ตรงกลางเหมือนเดิม ก็กำหนด Align = Center <hr size=n width=n align="left,right or center" noshade> การแบ่งย่อหน้าและการจัดตำแหน่ง – การขีดเส้นคั่น

37. คำสั่งการเว้นวรรค &nbsp; (None Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม &nbsp; นี้เป็นหนึ่งในจำนวนรหัสใช้แทนอักษรพิเศษ ในภาษา HTML ซึ่งใช้ประโยชน์สำหรับแทนตัวอักษรที่มีความหมายพิเศษ เช่น <, > อักษรพวกนี้จะไม่สามารถเขียนลงไปตรงๆ เพื่อให้ Browser แสดง ทั้งนี้เพราะ Browser จะตีความเอาว่าเป็น Tags ซึ่งอาจทำให้การแปลผิดพลาดได้ ตัวอย่าง รหัสใช้แทนอักษรพิเศษอื่นๆ เช่น &lt; ใช้แทนตัว < ( less than ) &gt; ใช้แทนตัว > ( greater than ) &amp; ใช้แทนตัว & ( ampersand ) 37

38. การกำหนดขนาดของตัวอักษรในแต่ละ Section (Headline) ใช้ <Hn> และ </Hn> โดย n แทนตัวเลข 1 – 6 1 คือขนาดใหญ่สุด และ 6 คือขนาดเล็กสุด รูปแบบคำสั่ง <Hn> … Heading Text … </Hn> การกำหนดรูปแบบอักษร – หัวข้อ

39. ตัวอย่างรูปแบบคำสั่ง HEADER <H1>COMPUTER</H1> <H2>COMPUTER</H2> <H3>COMPUTER</H3> <H4>COMPUTER</H4> <H5>COMPUTER</H5> <H6>COMPUTER</H6> การกำหนดรูปแบบอักษร – หัวข้อ COMPUTER COMPUTER COMPUTER COMPUTER COMPUTER COMPUTER

40. การกำหนดขนาดของตัวอักษรการกำหนดขนาดของตัวอักษร รูปแบบ <FONT SIZE = N> … </FONT> N = ขนาดของตัวอักษรมีค่าตั้งแต่ 1 ถึง 7 1 คือขนาดเล็กสุด และ 7 คือขนาด ใหญ่ สุด การกำหนดรูปแบบอักษร – <FONT>

41. การกำหนดรูปแบบอักษรด้วย Face Attribute Face ช่วยในการระบุรูปแบบตัวอักษรที่ต้องการลงไปได้เลย เช่น AngsanaUPC , MS Sans Serif , CordiaUPC วิธีการกำหนดเป็นดังนี้ <font face=“ชื่อ Font”>ข้อความ</font> ถ้าต้องการแสดงผลเป็นภาษาไทยอย่างถูกต้อง ควรเลือกใช้แบบอักษรที่ลงท้ายด้วย UPC ซึ่งเป็นแบบอักษรที่สนับสนุนภาษาไทย การกำหนดรูปแบบอักษร – <FONT> • ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi • ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif

42. กำหนดสีเฉพาะให้กับตัวอักษรด้วย color Here is RED color Here is GREEN color Here is BLUE color วิธีการกำหนดเป็นดังนี้ <font color="สีที่ต้องการ">ข้อความ</font> การกำหนดรูปแบบอักษร – <FONT>

43. รวมเข้าด้วยกัน การกำหนดรูปแบบด้วย TAG Font นั้น สามารถนำเอา Attribute ทั้งหมด มากำหนดรวมกันได้ ตัวอย่าง <font face=“Angsana New" size=2 color="#FF00FF">Hey</font> <font face="Cordia New"><font size=5>What’s</font> <font size=3><font color="FF0000">Up</font></font></font> การกำหนดรูปแบบอักษร – <FONT>

44. นอกจากการกำหนดรูปแบบอักษรโดยการใช้ <FONT> แล้ว ยังสามารถกำหนดรูปแบบอักษรอื่นๆ ได้อีก เพื่อให้ตัวอักษรเป็นไปตามแบบที่เราต้องการ โดยการใช้ Tag ต่างๆ ดังนี้ <B>…</B> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวหนา <I>…</I> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวเอียง <U>…</U> ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวขีดเส้นใต้ <SUP>…</SUP>ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวยก <SUB>…</SUB>ข้อความที่อยู่ระหว่าง Tag นี้ จะแสดงผลลัพธ์เป็นตัวห้อย การกำหนดรูปแบบอักษร – อื่นๆ

45. List ในการสร้างเอกสาร HTML นั้นข้อมูลบางอย่างต้องมีการแสดงในรูปแบบของรายการ ไม่ว่าจะเป็นรายการที่ไม่เรียงลำดับ หรือว่ารายการที่ต้องมีลำดับก่อนหลัง ถ้าหากว่าใช้ TAG ทั่วๆ ไปในการสร้างรายการ (LIST) ก็สามารถทำได้เช่นกัน เพียงแต่ว่ารูปแบบของ Bullet หรือตัวเลข อาจจะถูกจำกัดหรือว่าใช้ได้น้อยแบบ HTML จึงมี Tag ที่สามารถใช้ในการแสดงรายการรวมถึงการจัดการและควบคุมรูปแบบของรายการที่นำเสนอได้ โดยมี List 3 ประเภท คือ Unordered List, Ordered List, Definition List

46. List– Unordered List เป็นการแสดงรายการแบบที่ไม่ได้เรียงลำดับ มีการแสดงรูปแบบย่อหน้าโดยมี Bullet นำหน้า รูปแบบ Tag ที่ใช้ คือ <UL> <LI>….</LI> <LI>….</LI> </UL> โดยที่ <LI> เป็น TAG ที่ใช้ สำหรับแสดงรายการแต่ละรายการ

47. List– Unordered List ตัวอย่างเช่น <UL>My Unordered List <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL> • ผลลัพธ์ที่ได้คือ • My Unordered List • Item 1 • Item 2 • Item 3

48. List– Unordered List การใช้ Bullet ให้กับรายการที่ไม่มีลำดับ สามารถกำหนด Bullet รูปแบบอื่นๆ ได้อีก ดังนี้ Type = Circle Type = Square Type = Disc เพิ่ม Attribute TYPE เข้าไป โดยถ้าต้องการให้ทุกรายการของ List เป็น Bullet ตามที่ต้องการก็ให้ใส่ TYPE ไว้ที่ <UL TYPE=“….”> แต่ถ้าต้องการเฉพาะ List ตัวใดตัวหนึ่ง ก็ให้ใส่ไว้ที่ <LI TYPE=“….”>

49. List– Unordered List • ผลลัพธ์ที่ได้คือ • My Unordered List • Item 1 • Item 2 • Item 3 • ตัวอย่างเช่น • <UL TYPE =“SQUARE”> • My Unordered List • <LI>Item 1</LI> • <LI>Item 2</LI> • <LI>Item 3</LI> • </UL>

50. List– Ordered List เป็นการแสดงรายการแบบที่เรียงลำดับ ลำดับของรายการมีความสำคัญ มีการแสดงรูปแบบย่อหน้าโดยมีหมายเลขเรียงลำดับจาก 1,2,3, ..... รูปแบบ Tag ที่ใช้ คือ <OL> <LI>….</LI> <LI>….</LI> </OL>