ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

             รายการแบบไม่มีลำดับ (Unordered List) และรายการแบบมีลำดับ เป็นรายการเบื้องต้นที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นหัวข้อประเด็นสั้น  ๆ  การประยุกต์ใชเป็นแหล่งเชื่อมโยงไปยังข้อมูลต่อไป หรือประยุกต์ใช้เป็นเมนู จำเป็นต้องมีแท็กสำหรับแสดงข้อมูลรายการ  (List Item)  คือ  แท็ก  <li>  โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ  คือ  แท็ก  <ul>  ทั้งสองแท็กที่กล่าวมาเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด (open tag)  และแท็กปิด  (close tag) สามารถกำหนดรูปแบบสัญลักษณ์ของรายการแบบไม่มีลำดับ เช่น แบบวงกลมทึบ วงกลมโปร่ง และสี่เหลี่ยมทึบ และมีลำดับ เช่น  เป็นตัวอักษรพิมพ์เล็ก พิมพ์ใหญ่ แบบตัวเลขโรมันพิมพ์เล็ก แบบตัวเลขโรมันพิมพ์ใหญ่   

  

arrow2 การสร้างรายการแบบไม่มีลำดับในเอกสารภาษา HTML

             รายการแบบไม่มีลำดับ  (Unordered List)  เป็นรายการที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นหัวข้อประเด็นสั้น  ๆ  การประยุกต์ใชเป็นแหล่งเชื่อมโยงไปยังข้อมูลต่อไป หรือประยุกต์ใช้เป็นเมนู จำเป็นต้องมีแท็กสำหรับแสดงข้อมูลรายการ  (List Item)  คือ  แท็ก  <li>  โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ  คือ  แท็ก  <ul>  ทั้งสองแท็กที่กล่าวมาเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด (open tag)  และแท็กปิด  (close tag) การกำหนดเครื่องหมายนำหน้าหัวข้อสามารถกำหนดเครื่องหมายนำหน้าหัวข้อ  (Bullet) ในแท็ก  <ul>  โดยใชแอตทริบิวต์  type  หากไม่มีการกำหนดลักษณะของหัวข้อ  (Bullet)  จะแสดงเครื่องหมายเป็นวงกลมทึบเป็นค่าเริ่มต้น  และสามารถกำหนดชนิดเครื่องหมายอื่น  ๆ  ได้ตามตาราง

 

arrow3 รูปแบบสัญลักษณ์ที่ใช้กำหนดรายการแบบไม่มีลำดับ arrow3

รูปแบบสัญลักษณ์ ลักษณะ

disc

วงกลมทึบ

circle วงกลมโปร่งใส
square

สี่เหลี่ยมทึบ

 

รูปแบบการใช้งาน

 <ul type= “สัญญลักษณ์”>
<li>รายการข้อมูลที่ 1</li>
<li>รายการข้อมูลที่ 2</li>
</ul>

ตัวอย่าง

 <ul type= “disc”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<u>กำหนดรายการแบบ <b>disc</b></u>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
</ul>
<ul type= “circle”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<u>กำหนดรายการแบบ <b>circle</b></u>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
</ul>
<ul type= “square”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<u>กำหนดรายการแบบ <b>square</b></u>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
</ul>
<ul>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<u>ไม่มีการกำหนดรูปแบบรายการ (type)</u>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
</ul>

    list unorder 

arrow2 การสร้างรายการแบบมีลำดับในเอกสารภาษา HTML

             รายการแบบมีลำดับ  (Ordered List)  เป็นการนำเสนอข้อมูลแบบมีลำดับขั้นตอนอย่างชัดเจนสามารถประยุกต์ใช้ในเรื่องการนำเสนอข้อมูลเกี่ยวกับรายการข้อมูลที่มีการจัดลำดับความสำคัญไว้ใช้แท็ก <ol>​​​​​  โดยมีแท็ก  ​​​​​​​​<li>  กำหนดระหว่างแท็ก  <ol>  ทั้งสองแท็กเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  โดยสามารถกำหนดชนิดของตัวจัดลำดับได้ด้วยแอตทริบิวต์ type  หากผู้ใช้ไม่ได้กำหนดรูปแบบการแสดงผลรายการแบบมีลำดับนั้น  บราวเซอร์จะกำหนดให้รายการเป็นตัวเลขให้ทันที

             

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

รูปแบบ ลักษณะ

type= “A”

แสดงเป็นตัวอักษรพิมพ์ใหญ่  คือ  A, B, C, ...

type= “a” แสดงเป็นตัวอักษรพิมพ์เล็ก  คือ  a, b, c, ...
type= “I”

แสดงตัวเลขโรมันตัวพิมพ์ใหญ่  คือ  I, II, III, ...

type= “i”

แสดงตัวเลขโรมันตัวพิมพ์เล็ก คือ i, ii, iii, ...

type= “1”

แสดงตัวเลข  คือ  1, 2, 3, ... (ค่าปกติ)

 

รูปแบบการใช้งาน

 <ol type= “รูปแบบ”>
<li>รายการข้อมูลที่ 1</li>
<li>รายการข้อมูลที่ 2</li>
</ol>

ตัวอย่าง

 <ol type= “A”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
<li>คอมพิวเตอร์จำนวน 50 ชุด</li>
</ol>
<ol type= “a”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
<li>คอมพิวเตอร์จำนวน 50 ชุด</li>
</ol>
<ol type= “I”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
<li>คอมพิวเตอร์จำนวน 50 ชุด</li>
</ol>
<ol type= “i”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
<li>คอมพิวเตอร์จำนวน 50 ชุด</li>
</ol>
<ol type= “1”>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
<li>คอมพิวเตอร์จำนวน 50 ชุด</li>
</ol>
<ol>
<h4>รายการอุปกรณ์คอมพิวเตอร์ห้องคอมพิวเตอร์ 3</h4>
<u>ไม่มีการกำหนดรูปแบบรายการ (type)</u>
<li>โต๊ะคอมพิวเตอร์จำนวน 50 ตัว</li>
<li>เก้าอี้พลาสติกจำนวน 50 ตัว</li>
<li>คอมพิวเตอร์จำนวน 50 ชุด</li>
</ol>

      list order