HTML H yper T ext M arkup L anguage

HTMLHyperTextMarkup Language วิชา การเขียนโปรแกรมบนเว็บ (Web Programming)

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

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

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

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

องค์ประกอบของ HTML Tag เปิด content element Tag ปิด <html> <head> <title>NPRU Travel</title> </head> <body> <p align="center"> มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา </p> </body> </html>

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

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

โครงสร้างของเอกสาร HTML Tag head แท็กMeta Element Tag HTML Tag body <html> <head> <meta name = "keywords" content = “ราชมงคลล้านนา,เทคโน"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>RMUTL University</title> </head> <body> <p align="center">มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา </p> </body> </html>

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

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

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

ส่วนหัวเรื่องเอกสารเว็บ (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>

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

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

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

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

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

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

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

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

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

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

สำหรับ <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 กำหนดรูปภาพที่จะใช้เป็นฉากหลัง ส่วนเนื้อหาของโปรแกรม

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่างรูปแบบคำสั่ง 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

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

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

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

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

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

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

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

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

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

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>

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

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

HTML H yper T ext M arkup L anguage