เรื่อง การสร้างลำดับรายการ 412 443 Web page Design and Development ภาษา HTML เรื่อง การสร้างลำดับรายการ 412 443 Web page Design and Development อาจารย์จุฑาทิพย์ ไชยกำบัง กลุ่มวิชาการจัดการสารสนเทศและการสื่อสาร คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยขอนแก่น
412 443 Web page design and development การสร้างลำดับรายการ การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists) 412 443 Web page design and development
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) เป็นการสร้างลำดับรายการที่ใช้ตัวเลข หรือตัวอักษรในการจัดลำดับ ซึ่งสามารถใช้แอททริบิวส์ TYPE สร้างลำดับรายการให้มีรูปแบบแตกต่างกันได้ 5 รูปแบบ Type Style 1 1,2,3,…. a a,b,c,… A A,B,C,… i i,ii,iii,… I I,II,III,… 412 443 Web page design and development
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) การใช้แอททริบิวส์ Type สร้างลำดับรายการแบบเรียงตามลำดับ พิมพ์ <OL> เพื่อบอกให้โปรแกรมรู้ว่าเป็นแบบเรียงลำดับรายการ ใส่แอททริบิวส์ Type ตามด้วยค่าของแอททริบิวส์ เช่น <OL TYPE = 1> จะได้ลำดับรายการเป็นตัวเลข พิมพ์ <LI> เพื่อบอกให้โปรแกรมรู้ว่าเป็นหัวข้อ แล้วตามด้วยข้อความที่ต้องการให้อยู่ลำดับรายการ ปิดคำสั่งด้วย </OL> 412 443 Web page design and development
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <HTML> <HEAD> <TITLE>Order Lists</TITLE> </HEAD> <BODY> <H3>Website</H3> <OL type = I > <LI>www.sanook.com <LI>www.google.com <LI>www.hunsa.com <LI>www.thaiall.com </OL> </BODY> </HTML> Website I. www.sanook.com II. www.google.com III. www.hunsa.com IV. www.thaiall.com 412 443 Web page design and development
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) 1 2 3 4 5 6 7 8 9 10 11 12 13 <HTML> <HEAD> <TITLE>Order Lists</TITLE> </HEAD> <BODY> <H3>Website</H3> <OL type = I start = 3 > <LI>www.sanook.com <LI>www.google.com <LI>www.hunsa.com <LI>www.thaiall.com </OL> </BODY> </HTML> Website III. www.sanook.com IV. www.google.com V. www.hunsa.com VI. www.thaiall.com 412 443 Web page design and development
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) สรุปคำสั่ง <OL TYPE = ... START = …. > <LI VALUE = ….>หัวข้อ <LI VALUE = …. >หัวข้อ <LI>หัวข้อ ............................... </OL> 412 443 Web page design and development
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) เป็นการสร้างลำดับรายการโดยใช้สัญลักษณ์แทนตัวเลข หรือตัวอักษร สามารถกำหนดรูปแบบต่างๆได้โดยใช้แอททริบิวส์ TYPE สร้างลำดับรายการให้มีรูปแบบแตกต่างกัน ซึ่งแบ่งออกเป็น 3 รูปแบบ คือ วงกลม (circle) วงกลมทึบ (disc) สี่เหลี่ยม (square) 412 443 Web page design and development
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) วิธีการสร้าง พิมพ์ <UL> เพื่อบอกให้โปรแกรมรู้ว่าเป็นแบบไม่เรียงตามลำดับ ใส่แอททริบิวส์ Type ตามด้วยค่าของแอททริบิวส์ เช่น <OL TYPE = circle> จะได้ลำดับรายการเป็นวงกลม พิมพ์ <LI> เพื่อบอกให้โปรแกรมรู้ว่าเป็นหัวข้อ แล้วตามด้วยข้อความที่ต้องการให้อยู่ลำดับรายการ ปิดคำสั่งด้วย </UL> โดยปกติ ถ้าไม่ใส่แอททริบิวส์ TYPE เว็บบราวเซอร์จะแสดงสัญลักษณ์เป็นแบบวงกลมทึบ (disc) ซึ่งเป็นค่ามาตรฐาน 412 443 Web page design and development
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) <HTML> <HEAD> <TITLE>Unordered Lists</TITLE> </HEAD> <BODY> <H3>Website</H3> <UL type = circle> <LI >www.sanook.com <LI type = square>www.google.com <LI >www.hunsa.com <LI type = disc>www.thaiall.com </UL></BODY> </HTML> Website www.sanook.com www.google.com www.hunsa.com www.thaiall.com 412 443 Web page design and development
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) การสร้างลำดับรายการหลายๆแบบร่วมกัน <HTML><HEAD> <TITLE> Lists</TITLE> </HEAD> <BODY> <H3>Product </H3> <OL type = 1> <LI>TOYS <OL type = a> <LI>1-2 years <UL type = square> <LI>bottom <LI>bird </UL> <LI>3-4 years <LI>car <LI>star </UL> </OL> <LI>BOOKS <OL type = a> <LI>Computer <UL type = square> <LI>System Analysis <LI>Data Structure </UL> <LI>Math <LI>Math I <LI>Math II </OL> </BODY> </HTML> 412 443 Web page design and development
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) ผลการรัน 412 443 Web page design and development
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) สรุปคำสั่ง <UL TYPE = ... > <LI TYPE = ... >หัวข้อ <LI>หัวข้อ ............................... </UL> 412 443 Web page design and development
การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists) การแสดงรายการแบบคำอธิบายคำจำกัดความ มักใช้กับรายการประเภทที่ต้องอธิบายความหมายหรือคำแปล ประกอบด้วย 2 ส่วน คือ ส่วนที่เป็นคำศัพท์ และส่วนที่เป็นคำแปล มีขั้นตอนดังต่อไปนี้ พิมพ์ <DL> เพื่อบอกให้โปรแกรมรู้ว่าเป็นแบบอธิบายคำจำกัดความ พิมพ์ <DT> แล้วตามด้วยคำศัพท์ที่ต้องการให้อยู่ในลำดับรายการ พิมพ์ <DD> แล้วตามด้วยคำแปล ซึ่งข้อความที่เป็นส่วนของคำแปลนี้จะถูกย่อหน้าเข้ามา ใช้คำสั่ง <DT> คู่กับ <DD> ไปเรื่อยๆจนกว่าจะครบทุกลำดับ เสร็จแล้วปิดคำสั่งด้วย </DL> 412 443 Web page design and development
การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists) <HTML> <HEAD> <TITLE>Definition Lists</TITLE></HEAD> <BODY> <DL> <DT><H3>Client </H3> <DD>A Client is a software program on your personal computer that let you do internet stuff. <DT><H3>Server </H3> <DD>When you use your PC to connect directly to another host computer- for example, when you use a PPP connection - your PC is called a client. The other host computer is a server. </DL></BODY> </HTML> Client A Client is a software program on your personal computer that let you do internet stuff. Server When you use your PC to connect directly to another host computer- for example, when you use a PPP connection - your PC is called a client. The other host computer is a server. 412 443 Web page design and development
การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists) สรุปคำสั่ง <DL> <DT>คำศัพท์ <DD>คำแปล ............................... </DL> 412 443 Web page design and development