โครงสร้างและคำสั่ง ของ HTML (1)

โครงสร้างและคำสั่ง ของ HTML

ความหมายของ HTML

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

Tag

      เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ 

          

Tag เดี่ยว

            เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น < P > , < BR > เป็นต้น

Tag เปิด/ปิด

            เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น < B >…< / B >, < BLINK >…< / BLINK > เป็นต้น 

Attributes 

      Attributes เป็นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < > ในส่วน Tag เปิดเท่านั้น Tag คำสั่ง HTML แต่ละคำสั่ง จะมี Attribute แตกต่างกันไป และมีจำนวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคั่น เช่น Attributes ของ Tag เกี่ยวกับการจัดพารากราฟ คือ

ประกอบด้วย 

ALIGN="Left/Right/Center/Justify" 

ซึ่งสามารถเขียนได้ดังนี้ 

     < P ALIGN="Left" >...< /P >

หรือ

     < P ALIGN="Right" >...< /P >

หรือ

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

ภาพที่ 1โครงสร้างไฟล์ 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 >

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

กาTag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการทำคลังบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine) และค่าอื่นๆ ของการแปลความหมาย รแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กำกับด้วย Tag TITLE ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window นั่นเอง)

การพิมพ์ชุดคำสั่ง HTML สามารถพิมพ์ได้ทั้งตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทำได้อิสระ ตัวเบราเซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง

ส่วนเนื้อหาเอกสารเว็บ (Body Section) 

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

     ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูลที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag < BODY > … < /BODY > และแบ่งกลุ่มคำสั่งได้ดังนี้ 

• กลุ่มคำสั่งเกี่ยวกับการจัดการพารากราฟ
• กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร
• กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)
• กลุ่มคำสั่งเกี่ยวกับการทำลิงค์
• กลุ่มคำสั่งจัดการรูปภาพ
• กลุ่มคำสั่งจัดการตาราง (Table)
• กลุ่มคำสั่งควบคุมเฟรม

เริ่มสร้างเว็บเพจ

     เมื่อคุณต้องการสร้างเว็บเพจชักชุดหนึ่งขึ้นมา สิ่งแรกที่คุณต้องทำก่อนคือ ร่างเนื้อหาและจัดแบ่งข้อมูลออกเป็นส่วนๆ แยกเป็นหน้าๆ โดยขนาดของแต่ละหน้าไม่ควรใหญ่มาก เพราะจะทำให้ผู้ใช้เว็บต้องใช้แถบเลื่อนเพื่อดูข้อมูลด้านล่าง ซึ่งอาจทำให้ผู้ใช้รู้สึกไม่สะดวก ข้อเสียอีกอย่างคือ ถ้าทำให้ไฟล์ HTML มีขนาดใหญ่เกินไปจะทำให้ใช้เวลาในการดาวน์โหลดไฟล์ข้ามระบบเครือข่าย และสายโทรศัพท์นานตามไปด้วย ซึ่งบางครั้งผู้ใช้อาจต้องการอ่านเนื้อหาในหน้านั้นเพียงเล็กน้อย ทางที่ดีจึงควรแบ่งเนื้อหาในแต่ละหน้าให้พอดีกันการใช้งาน

< HTML >

< HEAD >

< TITLE >...............< /TITLE >

< /HEAD >

< BODY > 

...............

............... 

< /BODY >

< /HTML >

คำสั่งในการเริ่มต้นในการสร้างเว็บเพจ

คำสั่งเริ่มต้น

     < HTML >..........< /HTML >

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

ส่วนหัวของโปรแกรม 

     < HEAD >..........< /HEAD >

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

กำหนดข้อความในส่วนหัวของโปรแกรมหรือไตเติลบาร์

     < TITLE >..........< /TITLE >

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

ส่วนเนื้อหาของโปรแกรม

    < BODY >..........< /BODY >

คำสั่งนี้เป็นส่วนที่สำคัญในการแสดงผลในเว็บบราวเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่างๆ

     

กลุ่มคำสั่งอื่นๆ

การกำหนดสีของพื้นหลังของตัวอักษร

     การกำหนดสีพื้นหลังและการกำหนดสีของตัวอักษรนั้น เราจะทำการเขียนในส่วนของคำสั่ง < BODY > โดยเราจะใช้แอตทริบิวต์มาเป็นตัวกำหนด การกำหนดสีของพื้นหลัง - การกำหนดสีพื้นหลังนั้น เราสามารถมีรูปแบบการกำหนดสีพื้นหลังได้อยู่ 2 รูปแบบ 

     

ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น

< HTML >

< HEAD >

< TITLE >การกำหนดสีพื้นหลังโดยการกำหนดสี< /TITLE > 

< /HEAD >

< BODY BGCOLOR="yellow" > 

การกำหนดสีพื้นหลังโดยการกำหนดสี 

< /BODY >

< /HTML >

การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่าหลักการผสมสีแบบ RBG

< HTML > < HEAD > < TITLE >การกำหนดสีพื้นหลังโดยการกำหนดสี< /TITLE > 

< /HEAD >

< BODY BGCOLOR="#FF66FF" > 

การกำหนดสีพื้นหลังโดยใช้หลัก " #RBG "

< /BODY >

< /HTML >

ตัวอย่างค่าสีในระบบเลขฐาน 16

ภาพที่ 1โครงสร้างไฟล์ HTML

การกำหนดสีของตัวอักษร

     การกำหนดสีพื้นหลังและการกำหนดสีของตัวอักษรนั้น เราจะทำการเขียนในส่วนของคำสั่ง < BODY > โดยเราจะใช้แอตทริบิวต์ Text มาเป็นตัวกำหนด < BODY TEXT="#RGB หรือ กำหนดชื่อสีที่ต้องการ" >

เราสามารถมีรูปแบบการกำหนดสีได้อยู่ 2 รูปแบบ

ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นต้น

< 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 >

ตัวอย่างค่าสีในระบบเลขฐาน 16

ข้อความลักษณะหัวเรื่อง (Heading) 

      < Hn >....Heading Text ... < /Hn >

ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก < Hn > โดย n คือตัวเลขแสดงขนาดของตัวอักษร ซึ่งค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6 โดยที่ n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด และ n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด

< HTML >

< HEAD >

< TITLE >การกำหนด Heading< /TITLE >

< /HEAD >

< BODY >

      Computer - Default Size

      < H1 >Computer - H1< /H1 >

      < H2 >Computer - H2< /H2 >

      < H3 >Computer - H3< /H3 >

      < H4 >Computer - H4< /H4 >

      < H5 >Computer - H5< /H5 >

      < H6 >Computer - H6< /H6 >

< /BODY >

< /HTML >

การตกแต่งข้อความ

      แท็กที่ใช้ตกแต่งข้อความเพื่อเน้นคำ หรือข้อความสั้นๆ หรือให้ดูสวยงาม มาตรฐาน HTML 4.0 มีแท็กสำหรับใช้ตกแต่งข้อความมากมาย ทำได้แทบจะครบทุกรูปแบบ และสามารถแบ่งออกเป็น 2 กลุ่มใหญ่ คือ

Logical Format - เป็นแท็กที่มีชื่อที่สื่อความหมาย ซึ่งบราวเซอร์แต่ละยี่ห้อจะแปลแท็กเหล่านี้ต่างกัน และให้ผลเป็นเว็บเพจที่มีหน้าตาต่างกัน แต่ก็แตกต่างกันไม่มากนัก โดยยังคงให้ผลใกล้เคียงกับชื่อของแท็กนั้นๆ เช่น < EM > หมายถึงข้อความที่ต้องการเน้นเป็นพิเศษ ซึ่งเว็บบราวเซอร์อาจจะแสดงเป็นตัวหนา หรือตัวเอียงก็ได้ ขึ้นกับบราวเซอร์แต่ละตัว และการกำหนดสไตล์ชีท

Fixical Format - แท็กที่กำหนดลักษณะตายตัว ทุกบราวเซอร์จะแปลความหมายแท็กเหล่านี้เหมือนกันหมด เว็บเพจที่ได้จึงเหมือนกัน เช่น < B > หมายถึงข้อความแบบตัวหนา

การกำหนดตัวอักษรให้มีความหนา

< 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 > < Font size="5" >COMPUTER< /Font >< /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 

< /HEAD >

< BODY > 

ชนิดของฟอนต์ปกติ< BR > 

< FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif< /Font >

< /BODY >

< /HTML >

การกำหนดสีของตัวอักษร

     < FONT COLOR= " #RGB หรือ กำหนดชื่อสีที่ต้องการ " >..........< /FONT >

ใช้การกำหนดให้ตัวอักษรหรือข้อความมีสีอื่นต่างจากสีตัวอักษรทั่วไป หรือต้องการเน้นสีสันเพื่อเพิ่มจุดเด่น ทำให้แปลกแตกต่างไป การระบุค่าสี สามารถใช้ได้ทั้งระบุชื่อสี หรือค่าสีในระบบเลขฐาน 16 

< HTML >

< HEAD >

< TITLE >FONT COLOR < /TITLE > 

< /HEAD >

< BODY text="yellow" > 

Computer

< FONT COLOR="Red" >Computer< /FONT >

Computer

< /BODY >

< /HTML >

การกำหนดขนาดของตัวอักษร

     < 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 >

คำสั่งที่กำหนดตัวอักษรยกระดับ

    < SUP > .......... < /SUP >

คำสั่ง < SUP > ย่อมาจาก (superscript) เป็นคำสั่งที่จะกำหนดให้ตัวอักษร หรือข้อความยกระดับสูงขึ้นกว่าระดับปกติและมีขนาดเล็ก 

< HTML >

< HEAD >

< TITLE > SUPERSCRIPT < /TITLE > 

< /HEAD >

< BODY > 

< FONT SIZE="4" color="green" > Computer < /Font >

< Sup >

Computer

< /Sup >

< FONT SIZE="4" color="green" > Computer < /Font >

< /BODY >

< /HTML >

คำสั่งที่กำหนดตัวอักษรพ่วงท้าย (ตัวห้อย)

     < SUB > .......... < /SUB >

คำสั่ง < SUB > ย่อมาจาก (subscript) เป็นคำสั่งที่จะกำหนดให้ตัวอักษร หรือข้อความพ่วงท้ายจะมีลักษณะต่ำกว่าระดับปกติและมีขนาดเล็ก 

< HTML >

< HEAD >

< TITLE > SUBSCRIPT < /TITLE > 

< /HEAD >

< BODY > 

< FONT SIZE="4" color="green" > Computer < /Font >

< Sub >

Computer

< /Sub >

< FONT SIZE="4" color="green" > Computer < /Font >

< /BODY >

< /HTML >

การกำหนดตัวอักษรเคลื่อนที่

   < MARQUEE >..........< /MARQUEE >

   คำสั่ง < MARQUEE > นั้นจะกำหนดการเคลื่อนที่ของตัวอักษร และข้อความจะทำให้เว็บเพจ ของเราเป็นที่น่าสนใจ โดยปกติการเคลื่อนที่ของตัวอักษรนั้นจะเคลื่อนที่จากขวามาซ้าย คำสั่งนี้ สามารถแสดงผลได้อย่างถูกต้องเมื่อใช้บราวเซอร์ Internet Explorer เท่านั้น 

< HTML >

< HEAD >

< TITLE > MARQUEE < /TITLE > 

< /HEAD >

< BODY > 

< Marquee > < FONT SIZE="4" color="green" > Computer < /Font >

< /Marquee>

< /BODY >

< /HTML >

การขึ้นบรรทัดใหม่

< BR >

     โดยปกติแล้ว ภาษา HTML จะไม่สามารถรับรู้ได้ว่าจะมีการขึ้นบรรทัดใหม่ ดังนั้นถ้าเราต้องการ ให้เกิดการขึ้นบรรทัดใหม่ บนเว็บเพจ เราจะต้องคำสั่ง < BR > คำสั่ง < BR > เป็นคำสั่งที่กำหนดจุดสิ้นสุดของบรรทัด (break rule) แล้วทำการขึ้นบรรทัดใหม่เพื่อแสดงข้อความส่วนที่เหลือในบรรทัดถัดไป คำสั่งนี้จึงให้ผลเสมือนการกดคีย์ ENTER บนคีย์บอร์ดนั่นเอง 

ข้อสังเกต 

คำสั่ง < BR > ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา การย่อหน้าใหม่ (Paragraph Tag)

< P >

     คำสั่ง < P > เป็นคำสั่งที่สั่งให้โปรแกรมเว็บบราวเซอร์ขึ้นย่อหน้าใหม่ (paragraph) 

ข้อสังเกต 

การจะเห็นได้ว่าการขึ้นบรรทัดใหม่ของคำสั่ง < BR > และ < P > นั้น การเว้นว่างระหว่างบรรทัดของทั้งสองมีความแตกต่างกัน โดยที่คำสั่ง < BR > ช่องว่างระหว่างบรรทัดจะน้อยกว่าคำสั่ง < P >

คำสั่ง < BR > จะเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag)

กำหนดค่าของการจัดการจัดตำแหน่งการแสดงผล

< P ALING = " LEFT / RIGHT / CENTER " >..........< /P >

เป็นคำสั่งที่ทำการจัดตำแหน่งของการแสดงผลทางจอภาพ การที่จะแสดงตำแหน่งต่างๆ นั้นจะต้องอยู่ระหว่างคำสั่ง 

< P ALING =" LEFT /RIGHT / CENTER " > 

และปิดด้วย < /P > ซึ่งการที่จะใ    ห้ข้อความหรือรูปภาพอยู่ชิดซ้าย กึ่งกลางและชิดขวานั้น จะต้องมีคุณสมบัติการจัดตำแหน่งของการแสดงผลดังนี้ 

align = "left" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย

align = "right" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางขวา

align = "center" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง

ข้อสังเกต 

ตำแหน่งการแสดงผลนั้นจะมีการแสดงผลชิดซ้ายทุกครั้งถ้าเราไม่มีการกำหนดค่าของการแสดงผล

การจัดตำแหน่งการแสดงผลข้อความหรือรูปภาพให้อยู่กึ่งกลางของจอภาพนั้น เราสามารถกำหนดด้วยคำว่า CENTER เป็นคำสั่งได้เลยโดยเราจะเขียนคำสั่งดังนี้ < CENTER >..........< /CENTER >

การแสดงข้อความตามที่จัดจัดรูปแบบไว้ในไฟล์ต้นฉบับ

     < PRE > .......... < /PRE >

เป็นการกำหนดตำแหน่งการแสดงผลตามรูปแบบที่เราได้ทำการจัดในไฟล์ต้นฉบับ โดยในคำสั่งนี้เราสามารถจัดตำแหน่งที่เราต้องการให้แสดงผล โดยเรากำหนดด้วยคำสั่ง < PRE > แล้วปิด < /PRE > จะทำให้เราสามารถกำหนดตำแหน่งการแสดงผลได้ แต่ถ้าเรากำหนดด้วย < P ALING = " LEFT / RIGHT / CENTER " > การแสดงผลก็จะอยู่แค่ชิดซ้าย กึ่งกลาง และชิดขวาเท่านั้น

คำสั่งแสดงข้อความระบุสถานที่ติดต่อโดยเฉพาะ

     < ADDRESS > .......... < /ADDRESS >

คำสั่งนี้จะเป็นการระบุสถานที่ติดต่อ, ที่อยู่อาศัย, อีกเมล์ หรืออื่นๆ (ลักษณะคล้ายข้อความที่ปรากฎบนหัวจดหมาย) กำกับไว้ในเว็บเพจ โดยปกตินิยม เขียนไว้ที่ส่วนต้นหรือส่วนท้ายของเว็บเพจ การแสดงผลนั้นจะแสดงรูปแบบตัวอักษรจะเป็นลักษณะอักษรเอน

คำสั่งกั้นระยะซ้าย/ขวา (ย่อหน้า)

     < BLOCKQUOTE > .......... < /BLOCKQUOTE >

เป็นคำสั่งที่ใช้แสดงเพิ่มค่าหน้า - หลัง ให้แตกต่างจากเนื้อความปกติ

คำสั่งเส้นคั่นทางแนวนอน

< HR> 

     เป็นคำสั่งที่แสดงเส้นขีดคั่นทางแนวนอน ( horizontal rule ) โดยอาจใช้เป็นเส้นแบ่งเนื้อหาระหว่างบท หรือเป็นเส้นขีดคั่นเพื่อความสวยงามและเป็นระเบียบของเนื้อหา เป็นการกำหนดเส้นคั่นซึ่งเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด ( Single Tag )

คำสั่งการเว้นวรรค

     &nbsp;

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

จับกลุ่มของข้อความด้วย < SPAN > และ < DIV >

< DIV STYLE= "กำหนดขนาดตัวอักษร " >........< /DIV > หรือ 

< SPAN STYLE ="กำหนดขนาดตัวอักษร" >.......< /SPAN >

สำหรับแท็ก < DIV > เป็นแท็กที่มีมาตั้งแต่ HTML เวอร์ชั่น 3.2 ส่วนแท็ก < SPAN > เป็นแท็กใหม่ที่เพิ่งมีใน HTML 4.0 โดยแท็กทั้งสองนี้เอาไว้ใช้ กำหนดรูปแบบหรือลักษณะข้อความที่อยู่ภายใต้แท็กทั้งสองนี้ โดยมากมักจะใช้ร่วมกับแอตทริบิวต์ STYLE ทำให้สามารถนำมาใช้แทนแท็ก < FONT > และ < BASEFONT > รวมทั้งแอตทริบิวต์ที่ใช้กับแท็กทั้งสองได้หมด

< DIV > มักจะใช้จัดแต่งข้อความที่เป็นย่อหน้าให้ใช้ฟอนต์หรือมีขนาดตามที่ระบุ ซึ่งบราวเซอร์จะขึ้นย่อหน้าใหม่ให้ทันทีเมื่อพบแท็กนี้ ทำให้ไม่ได้ใช้แท็ก < BR > มาช่วย

แท็ก < SPAN > ก็คล้ายกันกับแท็ก < DIV > แต่มักใช้จัดแต่ง ข้อความสั้นๆ (inline) ที่อยู่ใต้การกำหนดรูปแบบของแท็กอื่นอยู่แล้ว เพื่อให้มีรูปแบบที่ต่างไปจากรูปแบบเหล่านั้น แท็ก < INS > และ < DEL >

< DEL >........< /DEL > 

< INS cite = "ชื่อเว็บไซด์" >.......< /INS >

     นอกเหนือจากแท็กต่างๆ ที่แนะนำให้รู้จักแล้ว ยังมีแท็กสำหรับจัดกลุ่มของข้อความอีก 2 ชนิดคือ < INS > และ < DEL > ที่ได้เพิ่มเข้ามาใน HTML 4.0 โดยมีเหตุผลที่สร้าง 2 แท็กนี้ขึ้นมา ก็เพื่อรองรับการแก้ไขในกรณีที่เป็นข้อความที่สำคัญ สำหรับการใช้แท็ก < INS > นั้นจะใช้ครอบข้อความส่วนที่เพิ่มเติม ส่วน < DEL > ใช้ครอบข้อความส่วนที่ต้องการลบออก ซึ่งเมื่อปรากฎอยู่บนเว็บบราวเซอร์นั้น จะทำให้ผู้อ่านทราบได้ว่าข้อความเหล่านั้นมีการเปลี่ยนไปอย่างไร และยังสามารถใช้แอตทริบิวต์ CITE เพื่อชี้ไปยังไฟล์ข้อมูลอื่นๆ เพิ่มเติมได้ นอกจากนี้อาจใช้แอตทริบิวต์ DATETIME เพื่อบอกเวลาที่แก้ไข โดยข้อมูลของแอตทริบิวต์ทั้งสองจะไม่ปรากฎเมื่อแสดงบนเว็บบราวเซอร์

ภาพที่เหมาะสมกับการใช้งาน

     ภาพที่นำมาใช้ในการนำเสนอผ่านเครือข่ายอินเทอร์เน็ต ด้วยเอกสารเว็บ ควรใช้ภาพนามสกุล .GIF หรือ .JPG เท่านั้น โดยมีหลักการพิจารณาเลือก คือ ภาพที่มีสีน้อยๆ หรือภาพที่ต้องการทำพื้นให้โปร่งใส ควรจัดเก็บในฟอร์แมต .GIF และกำหนดค่าเพิ่มเติม (Option) เป็น Interlaced คือ ให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ในขณะที่ภาพที่ต้องการความคมชัด ความสดใส ควรจัดเก็บในฟอร์แมต .JPG และกำหนดคุณภาพ (Quality) ที่เหมาะสมกับภาพนั้นๆ ค่าแนะนำ คือ 4 - 6 หากต้องการให้ภาพแสดงหยาบๆ แล้วค่อยๆ ละเอียด ให้กำหนดค่าเพิ่มเติม (Option) เป็น Progressive ด้วย สำหรับความละเอียดของภาพ (Resolution) ควรใช้ค่า 72 dpi 

ตัวอย่าง เปิดภาพตัวอย่างของ Photoshop 5.5 ชื่อ dune.tif มาจัดเก็บใหม่ด้วยฟอร์แมต และค่าต่างๆ ได้ผลดังนี้

ต้นฉบับ .TIF 1,061 KB

.JPG ค่า Quality = 8 44 KB

.JPG ค่า Quality = 3 17 KB

.GIF 102 KB

ดังนั้นภาพนี้ ซึ่งเป็นภาพสี ที่มีความคมชัด และสดใส ควรเก็บด้วยฟอร์แมต JPG เท่านั้น สำหรับค่า Quality กำหนดได้ โดยดูความเหมาะสมของการนำไปใช้งาน โดยหากกำหนดค่า Quality ไว้ต่ำ จะทำให้คุณภาพความคมชัดของภาพลดลงไปด้วย แม้ว่าจะได้ขนาดไฟล์เล็กก็ตาม

คำสั่งการนำเสนอไฟล์รูปภาพ

     < img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" >

เราสามารถกำหนดคุณสมบัติของรูปภาพได้ โดยเราจะใส่ภายในคำสั่ง < IMG SRC > เพื่อที่จะทำให้รูปภาพสามารถใช้ร่วมกับข้อ ความหรือตัวอักษรและทำให้ เว็บเพจนั้นมีความน่าสนใจมากยิ่งขึ้น

   < img src="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" 

alt= "ข้อความอธิบาย" align="top/middle/bottom/left/right"

width="ค่าตัวเลข" height="ค่าตัวเลข" hspace="ค่าตัวเลข" 

vspace="ค่าตัวเลข" border="กำหนดเป็นตัวเลข" >

Alt= เป็นการกำหนดข้อความอธิบาย โดยจะปรากฎก็ต่อเมื่อนำเมาส์ลากมาที่รูปข้อความก็จะปรากฎ

Align = "top" เป็นการกำหนดข้อความที่อยู่ด้านบนของรูปภาพ

Align = "middle" เป็นการกำหนดข้อความที่อยู่กึ่งกลางของรูปภาพ

Align = "bottom" เป็นการกำหนดข้อความที่อยู่ด้านล่างของรูปภาพ

Align = "left" เป็นการกำหนดข้อความที่อยู่ด้านขวาของรูปภาพ

Align = "right" เป็นการกำหนดข้อความที่อยู่ด้านซ้ายของรูปภาพ

Width = การกำหนดขนาดความกว้างของรูปภาพ

Height = การกำหนดขนาดความสูงของรูปภาพ

Hspace = เป็นการกำหนดระยะเว้นขอบจากด้านซ้ายกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก  จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้

Vspace = เป็นการกำหนดระยะเว้นขอบจากด้านบนกับรูปภาพ - ในการแสดงข้อความล้อมรอบรูปนั้น เป็นวิธีที่ใช้กันมากกับรูปที่เป็นตัวสินค้าและมีคำอธิบายล้อมอยู่ข้างๆ แต่การที่ข้อความอยู่ใกล้กับรูปนั้นๆ มากไปอาจทำให้เพจนั้นดูแน่นไม่น่าอ่าน ดังนั้นแท็ก  จึงถูกออกแบบให้มีแอตทริบิวต์ VSPACE และ HSPACE เพื่อใช้กำหนดระยะห่างระหว่างรูปและข้อความที่ล้อมรูป โดยค่าที่กำหนดนั้นอาจใช้หน่วยที่เป็นพิกเซล หรือ กำหนดเป็นเปอร์เซ็นต์ของหน้าจอแทนก็ได้

Border = เป็นการกำหนดเส้นกรอบของรูปภาพ - สำหรับการใส่เส้นขอบให้กับรูปใดๆ นั้น ให้ใช้ แอตทริบิวต์ BORDER แล้วตามด้วยความหนาของเส้นขอบโดยมีหน่วยเป็นพิกเซล ซึ่งหากไม่กำหนดหรือกำหนดเป็นศูนย์ก็หมายความว่าไม่มีเส้นขอบนั่นเอง

คำสั่งที่นำรูปภาพมาเป็นพื้นหลัง

     < body background="ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg" bgproperties=fixed>

background = กำหนดรูปภาพ

bgproperties = fixed การกำหนดให้รูปภาพคงที่ จะทำให้รูปภาพไม่มีการเคลื่อนที่ตามเมื่อเลื่อนสกอรบาร์ เมื่อข้อมูลมีความยาวมากกว่า 1 หน้าจอ

การนำเสนอไฟล์วิดีโอ

     การใส่ภาพเคลื่อนไหวใน Homepage ถือว่าเป็นการสร้างความน่าสนใจในการชมเว็บไซต์นั้นมาก เพราะนอกจากมีภาพที่สามารถเคลื่อนไหวได้แล้ว ยังสามารถมีเสียงประกอบภาพได้อีกด้วย เช่นเดียวกันการชมหนังในโทรทัศน์ เพียงแต่มาปรากฎใน Homepage ไฟล์ภาพเคลื่อนไหว (Video) ที่สนับสนุนบน Homepage ได้แก่ AVI (*.avi), MPEG (*.mpg), Movie (*.mov) เป็นต้น

< IMG dynsre="ชื่อไฟล์รูปที่มีนามสกุลที่เป็น .avi" loop="จำนวนรอบในการแสดงผลหรือ infinite" >

loop เป็นการกำหนดจำนวนรอบในการแสดงผล การกำหนดการวนรอบ (loop) นั้นเราสามารถกำหนดเป็นตัวเลขแต่ถ้าเรากำหนดเป็นค่า infinite จะแสดงผลตลอดเวลา 

การนำเสนอไฟล์เสียง

     การใส่เสียงประกอบใน Homepage ถือว่าเป็นสิ่งที่สร้างความน่าสนใจอย่างหนึ่งให้กับ Homepage นั้น ซึ่

งไฟล์รูปแบบของเสียงประกอบที่สนับสนุนได้แก่ MDI (*.mdi), AU (*.au), Real Audio (*.ram) และ WAVE (*.wav) เป็นต้น

< bgsound sre="ชื่อไฟล์ที่มีนามสกุลเป็น .wav" loop="ตัวเลขในการวนรอบ" >

ภาพกับการรอคอย

     การกำหนดค่า ALT หรือ Alternate Text ก็เป็นวิธีช่วยให้นักท่องเว็บ ไม่รู้สึกเบื่อกับการรอคอยเวลาระหว่างโหลดข้อมูล เป็นที่ยอมรับกันแล้วว่า "ข้อความตัวอักษร จะโหลดได้ไวกว่าภาพ" ดังนั้นหากมีแทรกภาพในเอกสารเว็บ ควรกำหนดค่า ALT กำกับภาพทุกภาพด้วย โดยเพิ่ม Attribute ในแท็ก IMG ดังนี้ 

< IMG SRC="ภาพความละเอียดปกติ" LOWSRC="ภาพความละเอียดต่ำ" ALT="ข้อความอธิบายภาพ">

การเชื่องโยง (ลิงค์)

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

ประเภทของการเชื่อมโยง

     HTML แบ่งการเชื่อมโยงออกเป็น 2 ประเภท ดังนี้

การเชื่อมโยงภายในเว็บไซต์

การเชื่อมโยงนอกเว็บไซต์

      การเชื่อมโยงทั้ง 2 ประเภทนี้ ยังแบ่งออกได้เป็นอีก 2 ชนิด คือ การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร และการเชื่อมโยงข้อมูลต่างแฟ้มเอกสาร

การเชื่อมโยงข้อมูลแฟ้มเอกสารต่างแฟ้มเอกสาร

< a href="ไฟล์ที่จะทำการเชื่อมโยงที่มีนามสกุล .html หรือ .htm" >ข้อความ< /a >

การเชื่อมโยงข้อมูลภายในแฟ้มเอกสาร

< a href= "#ทำการตั้งชื่อตามความต้องการ" >ข้อความ< /a >

< a name="ชื่อที่ตั้งไว้เพื่อที่จะทำการเชื่อมโยงมาหา" >ข้อความ< /a >

การเชื่อมโยงนอกเว็บไซต์

     < a href= " http://URLที่ต้องการจะเชื่อมโยงไป " >ข้อความ< /a >

การเชื่อมโยงแบบอีเมล์

     ในการสร้างเว็บเพจ ถ้าเราต้องการให้ผู้เยี่ยมชมสามารถติดต่กับผู้สร้างเว็บเพจโดยที่ผู้ชมเว็บเพจไม่รู้จะติดต่อได้อย่างไร เราก็สามารถให้ผู้เยี่ยมชมสามารถติดต่อกับเราได้โดยการส่งอีเมล์

< a href= "mailto:ชื่อ E-mail address ของผู้ที่จะให้ส่ง E-mail กลับคืนมา">ข้อความ< /a >

การเชื่อมโยงแบบ Download

     ในเว็บเพจในปัจจุบันนี้มักจะนิยมนำเอาข้อมูลต่าง ๆ ลงสู่เว็บเพจ เพื่อจะทำให้เนื้อหาของเว็บเพจนั้นมีประโยชน์แก่ผู้เข้าเยี่ยมชม จึงทำให้มีการนำข้อมูลต่างที่จะทำการเผยแพร่ ไม่ว่าจะเป็น ข้อมูลที่เป็นไฟล์ Word ไฟล์ Power Point และไฟล์อื่นๆ อีกมากมาย ในการที่จะนำไฟล์ต่างๆ นี้ลงสู่เว็บเพจนั้นเราจะต้องทำการ zip ไฟล์ข้อมูลนั้น เพื่อเป็นการง่ายต่อการจะนำไฟล์ไปใช้โดยการ Download ไฟล์นั้น

< a href="ไฟล์ที่มีนามสกุล .zip" >ข้อความ< /a >

การเชื่อมโยงไฟล์ด้วยรูปภาพ

    ในการเชื่อมโยงข้อมูลโดยใช้ตัวอักษรนั้น อาจจะทำให้เว็บเพจของเรานั้นไม่น่าสนใจ เราสามารถใช้รูปภาพมาทดแทนการเชื่อมโยงข้อมูลด้วยตัวอักษร 

< a href="ไฟล์ที่มีนามสกุล .html" >< img sre = "ชื่อไฟล์รูปภาพ .gif หรือ .jpg" alt="การเชื่อมโยงโดยรูปภาพ" >< /a >

การแสดงผลแบบรายการ

     ในการแสดงข้อมูลบนเว็บเพจ นอนกจากการแสดงผลแบบปกติทั่วไปแล้ว บางครั้งเราอาจมีความจำเป็นต้องจัดรูปแบบการแดสงผลให้เป็นแบบของรายการ (Lists) คือมีการแสดงข้อมูลในลักษณะที่เป็นหัวข้อ ซึ่งอาจมีคำอธิบายหรือไม่ก็ได้

การแสดงข้อมูลแบบรายการ (Lists) จะมีรายการแบบมีลำดับ (ใช้หมายเลขกำกับ) หรือแบบไม่มีลำดับ (ใช้สัญลักษณ์กำกับ) แต่ไม่ว่าจะเลือกให้มีการแสดงผลรายการแบบใดก็ตาม ทั้ง 2 แบบ ก็มีลักษณะการทำงานที่เหมือนกัน แตกต่างกันเพียงแบบหนึ่งเป็นตัวเลขและอีกแบบหนึ่งเป็นสัญลักษณ์เท่านั้น

การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists)

การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists) จะใช้แท็ก < OL > และ < /OL > ซึ่งย่อมาจาก Ordered List คือข้อมูลรายการแบบมีหมายเลข เรียงลำดับจากน้อยไปหามากกำกับอยู่หน้าแต่ละรายการ โดยมีแท็กที่เป็นส่วนประกอบภายในอีกทีหนึ่ง คือแท็ก < LI > ที่ใช้กำหนดหัวเรื่องหรือรายละเอียดของรายการย่อย ซึ่งเมื่อรายการย่อยเหล่านี้นำไปแสดงบนบราวเซอร์ ลำดับที่ของรายการจะถูกใส่ให้กับแต่ละรายการโดยอัตโนมัติ

< ol type="A,a,I,I,1" start="ตัวเลข" >

< li >

< li value="ตัวเลขที่กำหนดค่า" >

< li >

< /ol >

type= ชนิดของการแสดงผลแบบรายการ

o I , i เป็นการแสดงผลแบบโรมัน 
o A , a เป็นการแสดงผลแบบภาษาอังกฤษ 
o 1 เป็นการแสดงผลลำดับรายการปกติ (Default) 

start= การเริ่มของค่าของการแสดงรายการ (สามารถกำหนดค่าเริ่มต้นได้)

value= การกำหนดค่าเฉพาะแต่ละค่าของการแสดงรายการ

การแสดงข้อมูลรายการแบบมีสัญลักษณ์กำกับ (Bulleted/Unordered Lists)

      วิธีการใช้แท็ก < UL > และ < /UL > หรือรายการแบบใช้สัญลักษณ์กำกับ (Unordered List) นี้มีส่วนประกอบภายในคล้าย ๆ กับการเรียงรายการแบบใช้หมายเลขกำกับ คือมีส่วนหรัวเรื่องและส่วนรายการย่อย พร้อมทั้งแอตทริบิวต์ TYPE ที่ใช้กำหนดสัญลักษณ์กำกับหน้ารายการย่อย < ul type="circle,square,disc" >

< li >

< li >

< /ul >

type= "circle" การกำหนดรายการแบบวงกลม

type= "square" การกำหนดรายการแบบสี่เหลี่ยมทึบ

type= "disc" การกำหนดรายการแบบวงกลมทึบ (เป็น Default)

การเรียงรายการแบบใช้นิยาม

     รายการย่อยแบบใช้นิยาม หรือ Definition List นี้จะคล้ายกันกับรายการย่อยแบบที่ใช้หมายเลขหรือสัญลักษณ์กำกับ ต่างกันที่ไม่สัญลักษณ์ใดๆ กำกับหน้าแต่ละรายการย่อย มีเพียงแต่รายการย่อยต่างๆ แสดงอยู่ลักษณะคล้ายกับพจนานุกรม โดยมีแท็กที่เกี่ยวข้องอยู่ 3 แท็กด้วยกัน คือ < DL > และ < /DL > เพื่อบอกว่ารายการย่อยมีลักษณะเป็น แบบใช้นิยาม ส่วนแท็ก < DT > นั้นใช้บอกส่วนที่เป็นเรื่องของแต่ละรายการย่อย และแท็ก < DD > ใช้บอกส่วนที่เป็นรายละเอียดในรายการย่อยนั้น

< DL >

< DT >ข้อความ< /DT >

< DD >ข้อความ< /DD >

< /DL >