การกำหนดรูปแบบเครื่องหมายหัวข้อและรายการ     

จะช่วยให้การแสดงผลของข้อมูลในหน้าเอกสารดูเข้าใจง่ายยิ่งขึ้น  มีการแบ่งข้อมูลออกเป็นหมวดหมู่ดูสะอาดตา  โดยการแสดงรายการให้เป็นไปตามลำดับความสำคัญ จะทำให้เอกสารเป็นระเบียบสวยงาม  อ่านได้ง่าย

1. การแสดงรายการแบบมีลำดับ (Order List หรือ Number List)

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

<OL TYPE=n START=n2>………หัวข้อเรื่อง……..
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
</OL>

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

–          I , i เป็นการแสดงผลแบบโรมัน

–          A , a เป็นการแสดงผลแบบภาษาอังกฤษ

–          1 เป็นการแสดงผลลำดับรายการปกติ (Default)

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

ตัวอย่างที่ 1 แสดงวิธีการแสดงรายการแบบมีลำดับ (Order List หรือ Number List)

 

ผลลัพธ์

 

ตัวอย่างที่ 2 การใช้คำสั่ง OL ร่วมกับคำสั่ง START

 

ผลลัพธ์

 

 

 

 

 

 

ตัวอย่างที่ 3 การใช้คำสั่ง OL แบบเลือก Type

 

ผลลัพธ์

 

 

2. คำสั่งสำหรับแสดงผลรายการแบบไม่มีลำดับ (Bulleted/Unordered List)

คำสั่ง <UL> การแสดงรายการแบบไม่มีเลขลำดับ (Unorder หรือ Bullet List)  เป็นคำสั่งที่ใช้แสดงรายการโดยใช้เครื่องหมายเป็นตัวแสดงนำหน้าข้อความโดยไม่จำเป็นต้องเรียงตามลำดับก่อน-หลัง เพราะเป็นการเรียงหัวข้อแบบไม่มีตัวเลขระบุไว้ มีรูปแบบการใช้งาน ดังนี้

  <UL>………….หัวข้อเรื่อง…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
</UL>

ตัวอย่างแสดงวิธีการแสดงรายการแบบไม่มีลำดับ

 

ผลลัพธ์

 

     

 

 

 

 

 

 

 

 

 

 

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

<UL TPYE = n>………….หัวข้อเรื่อง…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
                               <LI> ข้อความ…………….
</UL>

 * n หมายถึง ชนิดของเครื่องหมายมีอยู่ 3 แบบ ดังนี้

          DISC   จะมีสัญลักษณ์เป็นวงกลมทึบ (ค่าปกติ)
          CIRCLE  จะมีสัญลักษณ์เป็นวงกลมโปร่ง
          SQUARE จะมีสัญลักษณ์เป็นสี่เหลี่ยมทึบ

3. การแสดงผลรายการแบบหัวข้อย่อย (Definition List)

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

    <DL>………หัวข้อเรื่อง……..
                <DT> หัวข้อ……   <DD> คำอธิบาย…..
                <DT> หัวข้อ……   <DD> คำอธิบาย…..
                <DT> หัวข้อ……   <DD> คำอธิบาย…..
                ………………………………………………
         </DL>

 

ตัวอย่างการใช้คำสั่ง DL

 

                                                   ผลลัพธ์

 

4. การใช้คำสั่งการแสดงรายการแบบไดเรกทอรี (Directory List)

 ใช้สำหรับแสดงหัวข้อสั้น ๆ ที่มีความยาวไม่เกิน 20 ตัวอักษร ไม่มีการเรียงลำดับของรายการและไม่มีตัวเลขลำดับนำหน้าข้อความ มีรูปแบบการใช้งาน ดังนี้

         <DIR>………….หัวข้อเรื่อง…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

          </DIR>

  

ตัวอย่างการใช้คำสั่งแสดงรายการแบบ DIRECTORY LIST

 

 

5. การใช้คำสั่งการแสดงรายการแบบเมนูลิงค์ (Menu List)

 คำสั่ง <MENU> การแสดงรายการแบบเมนูลิงค์ (Menu LIst) ใช้สำหรับแสดงหัวข้อรายการแบบสั้น ๆ เหมือนกับคำสั่ง DIR แล้วแต่ผู้เขียนโปรแกรมจว่าจะถนัดใช้คำสั่งใดมากกว่ากัน เพราะการแสดงผลบนเบราว์เซอร์จะไม่มีการเรียงลำดับของรายการและไม่มีตัวเลขลำดับนำหน้า  ข้อความีรูปแบบการใช้งานดังนี้

           <MENU>………….หัวข้อเรื่อง…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

                                <LI> ข้อความ…………….

          </MENU>

                                     ตัวอย่างการใช้คำสั่งแสดงรายการแบบ Menu List

   

 

6. การแสดงผลรายการหลายรูปแบบซ้อนกัน (Combining List Types)

 การแสดงรายการด้วยคำสั่งหลายคำสั่ง หรือหลายคำสั่งซ้อนกัน จะขึ้นอยู่กับเราว่า จะเลือกใช้คำสั่งใดบ้างเพื่อให้แสดงข้อมูลตามรูปแบบที่เราต้องการ คำสั่งที่เราสามารถจะเลือกใช้ในการแสดงผลข้อมูลคือ

1. Ordered Lists ได้แก่คำสั่ง <OL>
2. Unordered Lists ได้แก่คำสั่ง <UL> หรือ <MENU> หรือ <DIR> เป็นต้น
3. Definition Lists ได้แก่คำสั่ง <DL>

                               

 

 ตัวอย่างการใช้คำสั่งรายการหลายรูปแบบซ้อนกัน

 

 

 

 

7. รายการแบบที่อยู่ 

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

 บทที่ 5 การกำหนดหัวข้อและเลขลำดับ

คำสั่ง (TAG)

คำอธิบาย (คำสั่งเหล่านี้อยู่ภายใต้คำสั่ง BODY)

การแสดงรายการแบบมีลำดับ

(Order List หรือ Number List)

<OL type=n start=ค่าเริ่มต้น>หัวข้อเรื่อง

   <LI> หัวเรื่อง

   <LI> หัวเรื่อง

</OL>

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

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

   I , i เป็นการแสดงผลแบบโรมัน

   A , a เป็นการแสดงผลแบบภาษาอังกฤษ

   1 เป็นการแสดงผลลำดับรายการปกติ (Default)

start= การเริ่มของค่าของการแสดงรายการ(เป็นตัวเลข)

คำสั่งสำหรับแสดงผลรายการแบบไม่มีลำดับ (Bulleted/Unordered List)

<UL>…หัวข้อเรื่อง…

      <LI> ข้อความ…………….
      <LI> ข้อความ…………….

</UL>

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

ถ้าต้องการเปลี่ยนสัญลักษณ์ให้กำหนด <UL type=n>

 * n หมายถึง ชนิดของเครื่องหมายมีอยู่ 3 แบบ ดังนี้

          DISC   จะมีสัญลักษณ์เป็นวงกลมทึบ (ค่าปกติ)
          CIRCLE  จะมีสัญลักษณ์เป็นวงกลมโปร่ง
          SQUARE จะมีสัญลักษณ์เป็นสี่เหลี่ยมทึบ

คำสั่งการแสดงผลรายการแบบหัวข้อย่อย 

(Definition List)

<DL>………หัวข้อเรื่อง……..
    <DT> หัวข้อ……   <DD> คำอธิบาย…..
    <DT> หัวข้อ……   <DD> คำอธิบาย…..
    <DT> หัวข้อ……   <DD> คำอธิบาย…..
</DL>

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

1) <DL> และ</DL> เพื่อบอกว่ารายการย่อยมีลักษณะเป็น แบบใช้นิยาม

2) <DT> นั้นใช้บอกส่วนที่เป็นเรื่องของแต่ละรายการย่อย

3) <DD> ใช้บอกส่วนที่เป็นรายละเอียดในรายการย่อยนั้น

การใช้คำสั่งการแสดงรายการแบบไดเรกทอรี (Directory List)

<DIR>………….หัวข้อเรื่อง…………….

     <LI> ข้อความ…………….

     <LI> ข้อความ…………….

     <LI> ข้อความ…………….

</DIR>

 

 ใช้สำหรับแสดงหัวข้อสั้น ๆ ที่มีความยาวไม่เกิน 20 ตัวอักษร ไม่มีการเรียงลำดับของรายการและไม่มีตัวเลขลำดับนำหน้าข้อความ มีรูปแบบการใช้งาน

 

 

การใช้คำสั่งการแสดงรายการแบบเมนูลิงค์ (Menu List)

<MENU>………….หัวข้อเรื่อง…………….

    <LI> ข้อความ…………….

    <LI> ข้อความ…………….

    <LI> ข้อความ…………….

</MENU>

คำสั่ง <MENU> การแสดงรายการแบบเมนูลิงค์ (Menu LIst) ใช้สำหรับแสดงหัวข้อรายการแบบสั้น ๆ เหมือนกับคำสั่ง DIR แล้วแต่ผู้เขียนโปรแกรมจว่าจะถนัดใช้คำสั่งใดมากกว่ากัน เพราะการแสดงผลบนเบราว์เซอร์จะไม่มีการเรียงลำดับของรายการและไม่มีตัวเลขลำดับนำหน้า

รายการแบบที่อยู่ 

<ADDRESS>…</ADDRESS>

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