แบบทดสอบ Online

สถิติผู้เข้าชม

506779
TodayToday154
YesterdayYesterday290
This WeekThis Week2138
This MonthThis Month4837
All DaysAll Days506779

ROBOT TEAM


warayuphat panumphan 'Kru Pu', Powered by Joomla!
09 การใช้ลิสต์ (List) PDF Print E-mail
Written by Administrator   
Wednesday, 19 December 2018 01:58

การใช้ลิสต์ (List) ในการสร้างรายการแบบต่าง ๆ

การนำเสนอข้อมูลต่าง ๆ ในเว็บเพจให้น่าสนใจ คือ แยกข้อมูลออกเป็นประเด็น โดยการจัดเป็นรายการ หรือที่เราเรียกว่า List  ซึ่ง มีอยู่ด้วยการหลายแบบ แต่ที่นิยมใช้งานในปัจจุบันและพบบ่อยที่สุดมี 2 แบบ คือ
1.การสร้างรายการ (List) แบบไม่มีลำดับ (Unordered List) โดยใช้แท็ก <ul> ร่วมกับแท็ก <li>
2.การสร้างรายการ (List) แบบมีลำดับ (Order List) โดยใช้แท็ก <ol> ร่วมกับแท็ก <li>
ดังต่อไปนี้

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

disc หมายถึง วงกลมทึบ
circle หมายถึง วงกลมโปร่งใส
square หมายถึง สีเหลี่ยมทึบ

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

ตัวอย่าง

<html>
<head>
<title>การสร้างรายการ (List)</title>
</head>
<body>
การเขียนเว็บเพจ<br>
<hr>
<ul>
<li>รายการที่1</li>
<li>รายการที่2</li>
<li>รายการที่3</li>
<li> รายการที่4</li>
</ul>

</body>
</html>

 

จากตัวอย่างจะเห็นว่ามีการกำหนดให้เครื่องหมายหน้ัาหัวข้อเป็น "square"
คือเป็นสี่เหลี่ยมทึบ แต่ในรายการที่ 3 กำหนดให้เครื่องหมายหน้าหัวข้อเป็น
"circle" คือ วงกลมโปร่งใส่เป็นการสร้างรายการ (List) แบบมีลำดับ  
คือมีสัญลักษณ์แสดงลำดับหน้ารายการที่ต้องการ
สัญลักษณ์ แสดงลำดับมี 6 แบบคือ

type="a" คือแสดงลำััดับจาก a..z
type="A" คือแสดงลำดับจาก A..Z
type="i" หมายถึงแสดงลำัดับเป็น
เลขโรมันตัวพิมพ์เล็ก
type="I" หมายถึงแสดงลำดับเป็น
เลขโรมันตัวพิมพ์ใหญ่
type="1" หมายถึงแสดงลำดับเป็น
1,2,3,4..

 

<html>
<head>
<title>การสร้างรายการ (List)</title>
</head>
<body>
การเขียนเว็บเพจ<br>
<hr>
<ul type="square" >
<li>รายการที่1</li>
<li>รายการที่2</li>
<li type="circle" >รายการที่3</li>
<li> รายการที่4</li>
</ul>
</body>
</html>

 

<html>
<head>
<title>List แบบลำดับ </title>
</head>
<body>การเขียนเว็บเพจ<br>
<hr>
<ol type="A">
รายการแบบแสดงลำดับ
<li>รายการที่1</li>
<li>รายการที่2</li>
<li>รายการที่3</li>
<li>รายการที่4</li>
</ol>

</body>
</html>

 

ถ้าหากต้องการระบุค่าเริ่มต้นในรายการ  สามารถทำได้โดย   ใช้
แอททริบิวต์ในแท็ก <ol> ดังนี้

<ol type="1" start="7">

ตัวเลขที่จะแสดงในลำดับแรก คือเลข 7 เพราะเรากำหนดลำดับ
เป็นตัวเลข คือ type="1"

ถ้าต้องการระบุลำดับหน้ารายการใดรายการหนึ่ง   สามารถทำได้โดย
การใช้แอททริบิวต์ value ใน แท็ก <il> ดังนี้

<li value="15"> หมายความว่า
หน้ารายการนี้จะแสดงเป็นเลข 15
ดังตัวอย่างตามกรอบด้านขวา

 

<html>
<head>
<title>List แบบลำดับ </title>
</head>
<body>การเขียนเว็บเพจ<br>
<hr>
<ol type="1" start="7">
รายการแบบแสดงลำดับ
<li>รายการที่1</li>
<li>รายการที่2</li>
<li>รายการที่3</li>
<li value="15" >รายการที่4</li>
</ol>

</body>
</html>

 

<html>
<head>
<title>List แบบซ้อนกัน </title>
</head>
<body>การเขียนเว็บเพจ<br>
<hr>
<ol type="1">
<li>ทุเรียนพันธ์ใดเป็นที่นิยมมากที่สุด</li>
<ol type="a">
<li>ชะนี</li>
<li>หมอนทอง</li>
<li>กระดุม</li>
<li>รวงทอง</li>
</ol>

<li>หนังสือยอดนิยมได้แก่</li>
<ol type="i">
<li>คอมพิวเตอร์</li>
<li>นวนิยาย</li>
<li>ประวัติศาสตร์</li>
<li>วารสาร</li>
</ol>

</ol>

</body>
</html>

 

Poll กรุณาตอบคำถามค่ะ

คุณเขียนโปรแกรมบ่อยแค่ไหน
 

Poll สื่อการสอน

สื่อแบบไหน ที่คุณชอบ
 

จำนวนผู้ชมที่ online ขณะนี้

We have 48 guests online

analogclock

search engine

Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner
Banner