In html, บทความทั้งหมด

บทความตอนนี้ ขอแนะนำเกี่ยวกับวิธีแสดงลำดับที่เป็นตัวเลข และการแสดงหัวข้อที่ไม่มีลำดับ ใน HTML รวมถึงการใช้แท็ก <hr /> เพื่อขีดเส้นคั่น รวมถึงการใช้แท็ก <br /> เพื่อบังคับให้ขึ้นบรรทัดใหม่

การแสดงรายการ ที่แสดงลําดับเลข

บนเว็บเพจ เราอาจจําเป็นต้องแสดงรายการที่เป็นลําดับ เป็นขั้นตอน เช่น 1,2,3,4,… ซึ่งวิธี การสร้างลําดับที่เป็นตัวเลข ทําได้ดังตัวอย่างต่อไปนี้

ผลลัพธ์จากโค๊ตข้างต้นได้เป็นดังนี้

thaidemy-html-18

จากตัวอย่างการสร้างลําดับตัวเลข จะอยู่ภายในแท็ก <ol></ol> ซึ่งคําว่า ol ย่อมากจาก order list เป็นการแสดงลําดับที่มีการแสดงตัวเลข โดยแต่ละรายการจะอยู่ภายใต้แท็ก <li></li> ซึ่งถ้ามี 3 รายการก็ต้องมีแท็ก <li></li> จํานวนทั้งสิ้น 3 ชุด

ตัวเลขปกติจะเป็นตัวเลข 1,2,3 แต่เราสามารถเปลี่ยนไปใช้ตัวเลขโรมัจ I, II, III, IV, V ได้ โดยกําหนดค่าตาม type ดังตารางต่อไปนี้

type สไตล์ตัวเลข
1 arabic numbers 1, 2, 3, 4,…
a lower alphabet a, b, c, d, …
A upper alphabet A, B, C, D, …
i lower roman i, ii, iii, iv, …
I upper roman I, II, III, IV, …

ดังนั้นถ้าหากเราต้องการเลขโรมันต้องกําหนด type = i ดังตัวอย่างต่อไปนี้

ผลลัพธ์ที่ได้จะเป็นเลขโรมันตามต้องการ ดังรูป

thaidemy-html-19

การแสดงรายการ ที่ไม่มีลําดับตัวเลข

จากที่ผ่านมา เราได้สร้างรายการที่เป็นลําดับ เช่น 1,2,3,4,… แต่ถ้าไม่ต้องการลําดับตัวเลข เป็นแค่แสดงเครื่องหมายจุด หรือสี่เหลี่ยมหน้าลําดับ เราจะใช้แท็ก <ul></ul> ซึ่งแท็ก ul ย่อมาจากคําว่า UnOrder list ซึ่งภายในแท็ก <ul></ul> จะต้องมีแท็ก <li></li> เพื่อใช้แสดงรายการ ทั้งหมด ดังตัวอย่างต่อไปนี้

ผลลัพธ์จะได้เป็นรายการที่มีเครื่องหมายจุดสีดํานําหน้า ดังรูป

thaidemy-html-20

ในกรณีที่เราไม่ต้องการจุดวงกลมสีดํา แต่ต้องการเป็นจุดสี่เหลี่ยม หรือเป็นจุดวงกลมที่ไม่ทึบ จะต้องกําหนดค่า Attribute พิเศษลงไป ซึ่งในที่นี้คือ กําหนด type ดังตารางต่อไปนี้

type สไตล์เครื่องหมายหน้าข้อความ
disc วงกลม • tea
circle วงกลมทึบ ◦ coffee
square สี่เหลี่ยม ■ lemonade

ปกติหากเราไม่กําหนด type จุดจะเป็นแบบ disc ซึ่งมีลักษณะเป็นวงกลมทึบอยู่แล้ว แต่ถ้า ต้องการแบบอื่นๆ ก็ให้กําหนดลงไป ดังตัวอย่างต่อไปนี้

ผลลัพธ์จากโค๊ตข้างบน จะได้จุดเป็นรูปสี่เหลี่ยมตามรูป

thaidemy-html-21

ในการแสดงลําดับ สามารถสร้างลําดับย่อยๆ ซึ่งสามารถผสมผสานระหว่างลําดับแบบตัวเลข และไม่ใช่ตัวเลขได้ ดังตัวอย่างต่อไปนี้

ผลลัพธ์จากโค๊ตข้างต้น เราจะพบว่ามีการใช้ ลําดับ และลําดับย่อย ดังรูป

thaidemy-html-22

บังคับให้ขึ้นบรรทัดใหม่

สําหรับแท็ก <p></p> ใช้สําหรับแสดงข้อความในหนึ่งย่อหน้า ซึ่งเมื่อจบแท็ก <p> ข้อความ จะขึ้นย่อหน้าใหม่ให้อัตโนมัติ แต่ในหลายๆ แท็กไม่มีการขึ้นย่อหน้า เราต้องบังคับ ด้วยแท็ก <br /> ดังตัวอย่างต่อไปนี้

ตีเส้นคั่นด้วยแท็ก <hr />

ถ้าเราต้องการคั่นข้อมูลบนเว็บเพจ เราสามารถตีเส้นคั่นระหว่างส่วนล่างกับส่วนบนได้ โดยใช้ แท็ก <hr /> ดังตัวอย่างต่อไปนี้

ผลลัพธ์บนหน้าจอเว็บบราวเซอร์เราจะพบเส้นขวางคั่น ดังรูป

thaidemy-html-23

ติดต่อเรา

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

Not readable? Change text. captcha txt
0

Start typing and press Enter to search