สารบัญ
Introducetion
Basic
Format
List
Picture
Link
Table
Frame
Form



การนำเสนอข้อมูลในเวปเพจควรมีความกระชับ วิธีหนึ่งที่จะช่วยได้ คือ ยก ข้อมูลเป็นประเด็น โดยจัดเป็นรายการ หรือ List
ในส่วนนี้เราจะกล่าวถึงการสร้าง List แบบไม่มีลำดับ (Unordered List) แบบ มีลำดับ (Ordered List) และ List จำกัดความ (Definition List) หลังจากนั้นจะกล่าว ถึงการสร้าง List ซ้อนกันสำหรับนำเสนอข้อมูลที่มีรายละเอียดมาก

สารบัญเรื่อง

* การสร้าง List แบบไม่มีลำดับ (Unordered List)
* การสร้าง List แบบมีลำดับ (Ordered List)
* การสร้าง List จำกัดความ (Definition List)
* การสร้าง List ซ้อนกัน


การสร้าง List แบบไม่มีลำดับ (Unordered List)
List แบบไม่มีลำดับเป็น List แบบที่ง่ายที่สุด เหมาะสำหรับนำเสนอข้อมูล ที่ไม่มีลำดับเกี่ยวข้อง เราจะพบ List ชนิดนี้ได้บ่อยในเวปเพจต่าง ๆ ที่ต้อง การนำเสนอข้อมูลอย่างกระชับเป็นหัวข้อสั้น ๆ
List แบบไม่มีลำดับรูปแบบคำสั่งดังนี้

<UL>
<LH> หัวข้อ List </LH>
<LI> ข้อมูลใน List
<LI> ข้อมูลใน List
...
</UL>

ตัวอย่าง

จากรูป แบบตัวอย่างนี้เป็นการกำหนด List แบบไม่เรียงลำดับซึ่งผลที่ได้จะมีแค่จุดดำ ๆ เท่านั้น ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ





การสร้าง List แบบมีลำดับ (Ordered List)
บางครั้งเราต้องใช้ List ที่มีการจัดลำดับเพื่อนำเสนอข้อมูล เช่น ขั้นตอนการทำงาน หรือ อัน ดับหนังสือขายดี การใช้ List แบบนี้คล้ายกับการใช้ List แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับ แต่ละสมาชิกที่อยู่ใน List ให้โดยอัตโนมัติ
List แบบมีลำดับมีรูปแบบคำสั่งดังนี้

<OL>
<LH> หัวข้อ List </LH>
<LI> ข้อมูลใน List
<LI> ข้อมูลใน List
...
</OL>

ตัวอย่าง

จากรูป แบบตัวอย่างนี้เป็นการกำหนด List แบบเรียงลำดับซึ่งผลที่ได้จะมีตัวเลขที่เรียงตามลำดับก่อนหลัง ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ


เราสามารถกำหนดให้การจัดลำดับใน List ใช้เครื่องหมายอื่น นอกจากตัวเลข เช่น I,II,III หรือ A,B,C ได้โดยการใช้

TYPE="ชนิดของ List แบบมีลำดับ"

โดยคำสั่งนี้จะแทรกอยู่ใน <OL>

ตัวอย่าง

จากรูป แบบตัวอย่างนี้เป็นการกำหนด List แบบเรียงลำดับตามลักษณะที่เรากำหนดขึ้นโดยสังเกตวิธีการกำหนดในส่วนของ <OL TYPE=ตัวที่กำหนด> ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ





การสร้าง List จำกัดความ (Definition List)
List จำกัดความมักนำมาใช้กับการจำกัดความ เช่น ในพจนานุกรม รูปแบบของ List จำกัดความ แบ่งออกได้เป็น 2 ส่วนคือ ส่วน แรก คือ คำจำกัดความ และส่วนที่สอง คือ ความหมายของคำจำกัดความ ซึ่งจะถูกพิมพ์เยื้องเข้าไปหลังคำนิยาม
List แบบไม่มีลำดับมีรูปแบบคำสั่งดังนี้

<DL>
<LH> หัวข้อ List </LH>
<DT> คำจำกัดความ
<DD> ความหมาย
<DT> คำจำกัดความ
<DD> ความหมาย
. . .
</DL>

ตัวอย่าง

จากรูป แบบตัวอย่างนี้เป็นการสร้าง List จำกัดข้อความ ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ





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

ตัวอย่าง

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





Create By Mr.Phadungsak Sangsawong | ICQ # is 36212331
Copyright 1999 A.C.T. All rights reserved.
Last Modify : 18/01/2000