ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
เรื่อง การสร้างลำดับรายการ 412 443 Web page Design and Development
ภาษา HTML เรื่อง การสร้างลำดับรายการ Web page Design and Development อาจารย์จุฑาทิพย์ ไชยกำบัง กลุ่มวิชาการจัดการสารสนเทศและการสื่อสาร คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวิทยาลัยขอนแก่น
2
412 443 Web page design and development
การสร้างลำดับรายการ การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists) การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists) การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists) Web page design and development
3
การสร้างลำดับรายการแบบเรียงตามลำดับ (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,… Web page design and development
4
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists)
การใช้แอททริบิวส์ Type สร้างลำดับรายการแบบเรียงตามลำดับ พิมพ์ <OL> เพื่อบอกให้โปรแกรมรู้ว่าเป็นแบบเรียงลำดับรายการ ใส่แอททริบิวส์ Type ตามด้วยค่าของแอททริบิวส์ เช่น <OL TYPE = 1> จะได้ลำดับรายการเป็นตัวเลข พิมพ์ <LI> เพื่อบอกให้โปรแกรมรู้ว่าเป็นหัวข้อ แล้วตามด้วยข้อความที่ต้องการให้อยู่ลำดับรายการ ปิดคำสั่งด้วย </OL> Web page design and development
5
การสร้างลำดับรายการแบบเรียงตามลำดับ (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> <LI> <LI> <LI> </OL> </BODY> </HTML> Website I. II. III. IV. Web page design and development
6
การสร้างลำดับรายการแบบเรียงตามลำดับ (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> <LI> <LI> <LI> </OL> </BODY> </HTML> Website III. IV. V. VI. Web page design and development
7
การสร้างลำดับรายการแบบเรียงตามลำดับ (Ordered Lists)
สรุปคำสั่ง <OL TYPE = START = …. > <LI VALUE = ….>หัวข้อ <LI VALUE = …. >หัวข้อ <LI>หัวข้อ </OL> Web page design and development
8
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists)
เป็นการสร้างลำดับรายการโดยใช้สัญลักษณ์แทนตัวเลข หรือตัวอักษร สามารถกำหนดรูปแบบต่างๆได้โดยใช้แอททริบิวส์ TYPE สร้างลำดับรายการให้มีรูปแบบแตกต่างกัน ซึ่งแบ่งออกเป็น 3 รูปแบบ คือ วงกลม (circle) วงกลมทึบ (disc) สี่เหลี่ยม (square) Web page design and development
9
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists)
วิธีการสร้าง พิมพ์ <UL> เพื่อบอกให้โปรแกรมรู้ว่าเป็นแบบไม่เรียงตามลำดับ ใส่แอททริบิวส์ Type ตามด้วยค่าของแอททริบิวส์ เช่น <OL TYPE = circle> จะได้ลำดับรายการเป็นวงกลม พิมพ์ <LI> เพื่อบอกให้โปรแกรมรู้ว่าเป็นหัวข้อ แล้วตามด้วยข้อความที่ต้องการให้อยู่ลำดับรายการ ปิดคำสั่งด้วย </UL> โดยปกติ ถ้าไม่ใส่แอททริบิวส์ TYPE เว็บบราวเซอร์จะแสดงสัญลักษณ์เป็นแบบวงกลมทึบ (disc) ซึ่งเป็นค่ามาตรฐาน Web page design and development
10
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists)
<HTML> <HEAD> <TITLE>Unordered Lists</TITLE> </HEAD> <BODY> <H3>Website</H3> <UL type = circle> <LI > <LI type = square> <LI > <LI type = disc> </UL></BODY> </HTML> Website Web page design and development
11
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (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> Web page design and development
12
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists)
ผลการรัน Web page design and development
13
การสร้างลำดับรายการแบบไม่เรียงตามลำดับ (Unordered Lists)
สรุปคำสั่ง <UL TYPE = ... > <LI TYPE = ... >หัวข้อ <LI>หัวข้อ </UL> Web page design and development
14
การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists)
การแสดงรายการแบบคำอธิบายคำจำกัดความ มักใช้กับรายการประเภทที่ต้องอธิบายความหมายหรือคำแปล ประกอบด้วย 2 ส่วน คือ ส่วนที่เป็นคำศัพท์ และส่วนที่เป็นคำแปล มีขั้นตอนดังต่อไปนี้ พิมพ์ <DL> เพื่อบอกให้โปรแกรมรู้ว่าเป็นแบบอธิบายคำจำกัดความ พิมพ์ <DT> แล้วตามด้วยคำศัพท์ที่ต้องการให้อยู่ในลำดับรายการ พิมพ์ <DD> แล้วตามด้วยคำแปล ซึ่งข้อความที่เป็นส่วนของคำแปลนี้จะถูกย่อหน้าเข้ามา ใช้คำสั่ง <DT> คู่กับ <DD> ไปเรื่อยๆจนกว่าจะครบทุกลำดับ เสร็จแล้วปิดคำสั่งด้วย </DL> Web page design and development
15
การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (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. Web page design and development
16
การสร้างลำดับรายการแบบอธิบายคำจำกัดความ (Definition Lists)
สรุปคำสั่ง <DL> <DT>คำศัพท์ <DD>คำแปล </DL> Web page design and development
งานนำเสนอที่คล้ายกัน
