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