การแสดงรายการ (Lists)

วิชาคอมพิวเตอร์เพื่ออาชีพ 3-4 (ม.5/2 สหศิลป์) ภาคเรียนที่ 2 ปีการศึกษา 2564

เกี่ยวกับบทเรียน

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

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

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> ข้อความ…………….

</DIR>

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

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

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

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

<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> หัวเรื่อง

</OL>

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

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

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

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

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

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

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

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

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

</UL>

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

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

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

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

(Definition List)

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

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

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

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

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

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

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

</DIR>

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

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

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

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

</MENU>

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

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