เรื่อง การสร้างลำดับรายการ Web page Design and Development

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
การใส่หมายเลขหน้าข้อความ ปรับแต่งเอกสารด้วยการใส่ หมายเลขหน้าข้อความ
Advertisements

แนวทางการสนับสนุนการพัฒนา ที่ปรึกษาด้านนโยบายและแผน
ฐานข้อมูลสิทธิบัตรทั่วโลก (ไทย)
การเขียนโปรแกรมด้วยคำสั่งเบื้องต้น
Chapter 8 : Logic Modeling & Data Modeling
Chapter 11 : System Implementation
รายวิชา ง40206 โครงสร้างข้อมูลและขั้นตอนวิธี
การจำลองความคิด รายวิชา ง40102 หลักการแก้ปัญหาและการโปรแกรม
กิจกรรมที่ 4 ข้อมูล จุดประสงค์
HTML Language ภาษา HTML คืออะไร ? HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการพัฒนา web page เพื่อให้โปรแกรม web brower ต่างๆ (Internet Explorer,
การกำหนดรายการหัวข้อ
แผนการสอน วิชา Database Design and Development
Lecture 10 : Database Documentation
Create Table in MS Access
User Defined Simple Data Type
Script Programming& Internet Programming
Utility (โปรแกรมอรรถประโยชน์)
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา
Week 6 ประกาศค่าตัวแปร.
การพัฒนาการใช้งานในระบบเว็บ
PHP LANGUAGE.
PHP LANGUAGE.
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
Lecture 8 Database Output (Form and Report Design)
วิชา การออกแบบและพัฒนาซอฟต์แวร์
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
การสร้างเอกสารเว็บเพจ
การจำลองความคิด
โครงสร้าง HTML โครงสร้างพื้นฐาน HTML คำสั่งขึ้นบรรทัดใหม่ <BR>
SCC : Suthida Chaichomchuen
การเขียนโปรแกรมคอมพิวเตอร์และอัลกอริธึม
เกียรติพงษ์ ยอดเยี่ยมแกร
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
Jatuphum Juanchaiyaphum
Electronic Commerce เว็บฟอร์ม (Web Form).
ไวยากรณ์ของภาษาการทำโปรแกรม (1) (Syntax of programming languages)
การออกแบบและพัฒนาเว็บไซต์
การเขียนโปรแกรมภาษาซี
ตัวแปรกับชนิดของข้อมูล
ผศ. พิเชษฐ์ ศิริรัตนไพศาลกุล
คำสั่งภาษา HTML เบื้องต้น
รายวิชา เทคโนโลยีสารสนเทศ และการสื่อสาร. โครงสร้างภาษา HTML หัวข้อเรื่อง เว็บไซต์
ProQuest Nursing & Allied Health Source
Computer Programming for Engineers
ระบบคอมพิวเตอร์และการประมวลผล
2 /* ข้อความนี้เป็นเพียงคำอธิบาย ไม่มีผลต่อขั้นตอนการ ทำงานของโปรแกรม */ /* A simple program to display a line of text */ #include void main ( ) { printf.
การสร้างตาราง,ฟอร์มและการส่งค่า Get and Post คอลโทรลต่าง ๆ
การพัฒนาระบบสารสนเทศงานวิจัย ในคณะทันตแพทยศาสตร์ มหาวิทยาลัยเชียงใหม่
การทำ Link E-book.
WorkShop I (10 points) ค้นหาข้อมูลบน Internet ทำเป็นชิ้นงานส่งมา ทาง – เลขที่ 1-5 ความสัมพันธ์ของข้อมูลและสารสนเทศ – เลขที่ 6-10 กระบวนการผลิตสารสนเทศ.
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
สาขาวิชาเทคโนโลยี สารสนเทศ คณะเทคโนโลยีสารสนเทศ และการสื่อสาร.
หลักการเขียนโปรแกรม ( )
เพื่อให้ผู้เรียนได้เข้าใจถึงประวัติ ความเป็นมาของการเขียนเว็บเพจ ด้วยภาษา HTML อีกทั้งยัง สามารถสร้างเว็บขึ้นมาได้อีกด้วย รวมไปถึงการเผยแพร่ในที่ สาธารณะ.
การแก้ปัญหาโปรแกรม (Flowchart)
บทที่ 1 ระบบคอมพิวเตอร์.
โครงสร้างข้อมูลแบบลิงก์ลิสต์
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
การสร้าง website ด้วยโปรแกรมโปรแกรม Dreamweaver CS4 ตอนที่ 1
เสริมเว็บให้ดูสวย.
ซอฟต์แวร์ (Softwarre)
การกำหนดสัญลักษณ์และเลขลำดับ
stack #1 ผู้สอน อาจารย์ ยืนยง กันทะเนตร
โครงสร้างข้อมูลแบบ สแตก (stack)
เริ่มใช้งาน Microsoft Office
ซอฟต์แวร์ (software) จัดทำโดย นาย ยุทธพงศ์ คำยอง
Mr. Winai Purikasem. Introduction  Hypertext model  Use of hypertext in World Wide Web (WWW)  WWW client-server model  Use of TCP/IP protocols in.
โครงสร้างของภาษา HTML
อาการของมะเร็งเต้านม ที่กลับเป็นซ้ำ และ หรือ แพร่กระจาย
จงลุกขึ้น ... ฉายแสง ภารกิจที่ท้าทาย ผู้วินิจฉัย 6: 12.
ใบสำเนางานนำเสนอ:

เรื่อง การสร้างลำดับรายการ 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