Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (16)
Destaque
Destaque (20)
Semelhante a Html
Semelhante a Html (20)
Html
- 2. HTML ซอฟต์แวร ์ที่ต้องใช ้ โครงสร ้างของ HTML รูปแบบโครงสร ้าง HTML การสร ้างและการบันทึกเอกสาร HTML การแสดงไฟล์เอกสาร HTML ตารางแสดงตัวอย่าง Tag และคาอธิบาย Tag HTML
- 3. ซอฟต์แวร ์ที่ต้องใช้ Text Editor (Notepad,Editplus,Wordpad,etc.) Web Editor (Macromedia Dreamweaver,Microsoft Frontpage,etc.) Web Browser (Internet Explorer,Mozilla Firefox,etc.)
- 4. การสร้างและการบันทึกเอกสาร HTML เราจะใช้ Text Editor ที่ติดมากับระบบปฏิบัติการ (จะเป็น ตัวอื่นก็ได้) ในที่นี้ขอใช้โปรแกรมชื่อว่า NotePad หากต้องการบันทึกให้เป็นเอกสาร HTML ก็จะต้องกาหนด ส่วนขยาย หรือนามสกุลให้เป็น .html หรือ .htm เท่านั้น **สาคัญมาก** start>Programs>Accessories> Notepad
- 5. โครงสร้างของ HTML โครงสร ้างของภาษา HTML แบ่งเป็น 2 ส่วน ส่วนที่เป็นข้อความ จะเป็นลักษณะของ ข้อความทั่วๆ ไป ส่วนที่เป็นคาสั่ง จะเป็นส่วนที่ใช ้ในการกาหนด รูปแบบของข้อความซึ่งจะเรียกว่า Tag หรือ แท็ก โดยจะอยู่ในเครื่องหมาย < และ >
- 6. รูปแบบโครงสร้าง HTML โครงสร ้างของเอกสาร HTML จะประกอบไป ด้วย Tag เปิด และ Tag ปิดต่างๆ ดังนี้ <html> <head> … </head> <body> … </body> </html> Tag เปิด Tag ปิด จุดเริ่มต้น และสิ้นสุด ของเอกสาร HTML
- 7. รูปแบบโครงสร้าง HTML (ต่อ) <html>…</html> จะต้องมีในเอกสาร HTML เสมอ เนื่องจากเป็นการประกาศให้ ทราบว่าเป็นเอกสาร HTML Tag HTML ประกอบไปด้วย 2 ส่วน ส่วนของ HEAD เป็นส่วนของการกาหนดการทางาน และคุณสมบัติพิเศษบางอย่างของ Web Page ส่วนของ BODY เป็นส่วนที่ให้ใส่เนื้อหาและกาหนด คุณสมบัติพื้นฐานของ Web Page
- 8. Tag ที่เกี่ยวข้องในส่วนของ HEAD Tag <title> เป็น Tag สาหรับกาหนดหัวข้อ ของ Web page รูปแบบคาสั่ง <title>หัวข้อเรื่องที่แสดงบน Title</title> <html> <head> <title>สร ้าง web page ด้วย HTML</title> </head> <body> การใส่หัวข้อเรื่องให้ web page แสดงบน Title Bar </body> </html>
- 9. Tag ที่เกี่ยวข้องในส่วนของ HEAD (ต่อ) ผลจากการใส่ Tag <title>…</title>
- 11. การกาหนดสีพื้นหลัง รูปแบบของคาสั่ง HTML ในการกาหนดสีพื้น หลังของ Web Page <body bgcolor=“สีหรือรหัสสี ”>...<body> <body bgcolor=“black”>…</body>
- 12. การกาหนดสีของพื้นหลังของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็ นต้น <HTML> <HEAD> <TITLE>การกาหนดสีพื้นหลังโดยการกาหนดสี </TITLE> </HEAD> <BODY BGCOLOR="yellow"> การกาหนดสีพื้นหลังโดยการกาหนดสี </BODY> </HTML>
- 13. 2. การระบุแบบตัวเลขโดยจะใช้ค่าสีในระบบฐาน 16 หรือเรียกว่า หลักการผสมสีแบบ RBG <HTML> <HEAD> <TITLE>การกาหนดสีพื้นหลังโดยการกาหนดสี</TITLE> </HEAD> <BODY BGCOLOR="#FF66FF"> การกาหนดสีพื้นหลังโดยใช ้หลัก "#RBG" </BODY> </HTML> หมายเหตุ ตัวอย่างค่าสี RGB http://www.talesrunner.in.th/webboard/content.a spx?nForumID=1&nTopicID=58933 การกาหนดสีของพื้นหลังของตัวอักษร
- 14. Tag ที่เกี่ยวข้องในส่วนของ BODY ส่วนของ BODY เป็นส่วนที่ให้ใส่เนื้อหา และ กาหนดคุณสมบัติพื้นฐานของ Web Page <body>…</body>
- 15. ข้อความลักษณะหัวเรื่อง (Heading) <HTML> <HEAD> <TITLE>การกาหนด Heading</TITLE> </HEAD> <BODY> Computer - Default Size <H1>Computer - H1</H1> <H2>Computer - H2</H2> <H3>Computer - H3</H3> <H4>Computer - H4</H4> <H5>Computer - H5</H5> <H6>Computer - H6</H6> </BODY> </HTML>
- 16. ข้อความลักษณะหัวเรื่อง (Heading) ข้อความลักษณะหัวเรื่อง จะกากับด้วยแท็ก <Hn> โดย n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้น จะมีค่าอยู่ที่ 1 - 6 n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด สามารถเพิ่ม/ลดขนาดโดยใช ้เครื่องหมาย + หรือ - นาหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น
- 17. ผลลัพธ ์ Computer - Default Size Computer - H1 Computer - H2 Computer - H3 Computer - H4 Computer - H5 Computer - H6
- 18. การกาหนดรูปแบบของตัวอักษร (ต่อ) <HTML> <HEAD> <TITLE>FONT FACE </TITLE> </HEAD> <BODY> ชนิดของฟอนต์ปกติ<BR> <FONT FACE="MS Sans Serif"> ฟอนต์ชื่อ MS Sans Serif</Font> </BODY> </HTML>
- 19. การจัดรูปแบบตัวอักษร เอกสารที่แสดงบนบราวเซอร ์ ยังสามารถจัดรูปแบบ ของตัวอักษรได้หลายรูปแบบ เช่น <Hx>...</Hx> กาหนดขนาดของหัวเรื่อง (Heading) เมื่อ x เป็นตัวเลขที่แทนระดับของหัว เรื่องมีระดับตั้งแต่ 1 (ใหญ่สุด) – 6 (เล็กสุด) <B>...</B> ทาตัวเข้ม (Bold) <I>...</I> ทาตัวเอน (Italic) <U>...</U> ขีดเส้นใต้ข้อความ (Underline) <STRIKE>...</STRIKE> ทาข้อความกระพริบ
- 20. การกาหนดสีของตัวอักษร 1. ระบุชื่อของสีที่ต้องการ <HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR="Red">Computer</FONT> Computer </BODY> </HTML>
- 21. 2. การระบุแบบตัวเลขโดยจะใช้ค่าสีใน ระบบฐาน 16 <HTML> <HEAD> <TITLE>FONT COLOR </TITLE> </HEAD> <BODY text="yellow"> Computer <FONT COLOR ="#FF66FF"> Computer</FONT> Computer </BODY> </HTML> การกาหนดสีของตัวอักษร
- 23. การขึ้นบรรทัดใหม่ รูปแบบของคาสั่ง HTML ที่ใช ้ในการขึ้น บรรทัดใหม่ <br> ข้อความที่ต้องการนาไปขึ้นบรรทัดใหม่
- 24. การจัดข้อความให้อยู่กึ่งกลาง รูปแบบของคาสั่ง HTML ที่ใช ้ในการจัด ข้อความให้อยู่กึ่งกลางหน้ากระดาษ <center>ข้อความที่ต้องการจัดให้อยู่กึ่งกลาง</center>
- 25. การจัดย่อหน้า การจัดย่อหน้าจะช่วยให้การแบ่งเนื้อหานั้นเป็น สัดส่วนและดูง่ายขึ้น<p align =รูปแบบที่ต้องการจัด>ข้อมูลที่ต้องการจัดย่อหน้า</p> รูปแบบที่ ต้องการจัด คาอธิบาย left จัดชิดซ้าย center จัดกึ่งกลาง right จัดชิดขวา <p align = left>การจัดย่อหน้าแบบชิดซ้าย</p>
- 26. การเว้นช่องว่างในเอกสาร โดยปกติ ไม่ว่าเราจะพิมพ์ข้อมูลในเอกสาร HTML โดยการเว้นช่องว่างไว้มากกขนาดไหน ก็ตาม เมื่อนาไปแสดงบน Browser ก็จะ เปรียบเสมือนว่าเราได้เว้นช่องว่างเพียง 1 อักขระ หากต้องการให้แสดงข้อมูลที่มีการเว้นช่องว่าง ให้ตามต้องการก็ต้องใช ้คาสั่ง
- 27. คาสั่งใส่รูปภาพลงในเว็บเพจ ในการแทรกรูปภาพลงในเว็บเพจ ทาได้โดยการใช ้ Tag <IMG SRC =“ไฟล์รูปภาพ” parameter> Parameter WIDTH=number of pixel, HEIGHT=number of pixel หรือ WIDTH=number% กาหนดความสูงและความกว้างของรูปภาพด้วย จานวนจุดของ Pixelหรือกาหนดความกว้างของ รูปภาพเป็นจานวนเปอร ์เซ็นต์
- 28. ตัวอย่างการแทรกรูปภาพ <BODY> <CENTER><B>"Happy Birthday"</B> <HR> <CENTER><IMG SRC="CAKE.jpg" WIDTH=280 HIGHT=200 </BODY>
- 29. คาสั่งการเชื่อมโยง ผู้เขียน homepage สามารถระบุถึงเป้ าหมายของ การเชื่อมโยงโดยเขียนแอททริบิวท์ HREF (Hypertext Reference) เข้าไปใน Tag Anchor <A>...</A> ดังนี้ <A HREF=“เอกสารเป้ าหมาย”>ข้อความที่ เป็ นจุดเชื่อมโยง</A> ตัวอย่าง <a href=“http://www.cs.psu.ac.th/sirak/344- 482/index.html">344-482 Computer Network Systems</a>
- 30. การสร้างจุดเชื่อมโยงที่ตาแหน่งของรูปภาพ นอกจากการแทรกรูปภาพธรรมดาแล้ว ยังสามารถ กาหนดรูปภาพให้เป็ นจุดเชื่อมโยงที่เชื่อมไปยังเอกสาร เป้ าหมายใด ๆ ได้อีกด้วย <A HREF=“เอกสารเป้ าหมาย”><IMG SRC=“ไฟล์รูปภาพ” parameter> ตัวอย่าง <A HREF=“www.psu.ac.th”> <IMG SRC=“CAKE.jpg”> เมื่อมีการคลิกที่บริเวณของรูปภาพ “CAKE.jpg” จะมี การ link ไปยัง Home Page ของมหาวิทยาลัยทันที
- 32. TAG ที่ใช้ในการสร้างตาราง <table> </table> ใช ้กาหนดตาราง <tr> </tr> ใช ้ในการกาหนดแถวเริ่มต้น และ แถวสุดท้ายในตาราง <td> </td> ใช ้ในการกาหนดข้อมูลในแต่ละ คอลัมน์ในตาราง
- 33. ตัวอย่างการสร้างตาราง <table border=1> <tr> <td></td> <th>Head1 </th> <th>Head2 </th> <th>Head3 </th> </tr> <tr> <th>Name</th> <td>Sirak </td> <td>Pennee </td> <td>Somsak </td> </tr> <tr> <th>Info</th> <td>Smart </td> <td>Thin </td> <td>..... </td> </tr> </table> เราสามารถแทรก TAG อื่น ๆ ลงไปใน ตาราง เพื่อช่วยในการจัดรูปแบบเอกสารได้
- 34. การใส่ comment ในเอกสาร คือการที่เราต้องการใส่ข้อความ หรือข้อมูลไว้ ในเอกสาร แต่ไม่ต้องการให้แสดงบน Browser รูปแบบของคาสั่ง HTML ในการใส่ comment ให้กับเอกสาร <! หมายเหตุ>
- 35. สรุปตารางแสดงตัวอย่าง Tag และคาอธิบาย รูปแบบ ความหมาย <html>…</html> เป็น Tag เริ่มต้น และสิ้นสุดของเอกสาร HTML <head>…</head> เป็น Tag ที่ใช้กาหนดในส่วนที่เป็นชื่อเรื่อง <title>…</title> เป็น Tag ที่ใช้แสดงชื่อเอกสารที่ Title Bar ของ Windows ที่เปิดเอกสารอยู่ <body>…</body> เป็น Tag เริ่มต้นและสิ้นสุดของเนื้อหาในเอกสาร ซึ่ง ใน Tag <body> จะมี Tag อื่นๆ แทรกอยู่ <br> เป็น Tag สาหรับขึ้นบรรทัดใหม่ <b>…</b> เป็น Tag สาหรับกาหนดตัวอักษรให้เป็นตัวหนา <i>…</i> เป็น Tag สาหรับกาหนดตัวอักษรให้เป็นตัวเอียง <u>…</u> เป็น Tag สาหรับกาหนดให้ตัวอักษรเป็นตัวขีดเส้นใต้ <hr> เป็น Tag สาหรับกาหนดให้เขียนเส้นใน web page ในแนวนอน <a>…</a> เป็น Tag ที่กาหนดการเชื่อมโยง
- 36. สรุปตารางแสดงตัวอย่าง Tag และคาอธิบาย (ต่อ) รูปแบบ ความหมาย <img>…</img> เป็น Tag สาหรับแทรกรูปภาพ <table>…</table> เป็น Tag สาหรับสร ้างตาราง <tr>…</tr> เป็น Tag สาหรับกาหนดแถวในตาราง <td>…</td> เป็น Tag สาหรับกาหนดคอลัมน์ในแถว <form>…</form> เป็น Tag สาหรับสร ้าง Form <input>…</input> เป็น Tag สาหรับกาหนด Input ใน Form หมายเหตุ จากตารางข้างต้น เป็นเพียงบางส่วนของ Tag ที่สาคัญๆ เท่านั้น Tag อื่นๆ ยังมีอีกจานวนมาก ซึ่งยากแก่การจดจา ดังนั้น จึงได้มีการสร ้าง เครื่องมืออานวยความสะดวกในการสร ้าง web page นั่นก็คือ Web Editor นั่นเอง
- 37. การสร้างและการบันทึกเอกสาร HTML (ต่อ) วิธีการบันทึกเอกสาร HTML เลือกเมนู File>Save จะปรากฏหน้าต่าง Save As ให้เลือกตาแหน่งที่จะ จัดเก็บไฟล์ที่ Save in เลือกชนิดของไฟล์ที่ Save as type เป็น All Files ตั้งชื่อไฟล์HTML ที่ File name โดยจะต้องให้มี นามสกุลเป็น .html หรือ htm คลิ๊ก Save
- 38. การสร้างและการบันทึกเอกสาร HTML (ต่อ) ชื่อไฟล์โดยให้มี นามสกุล .html หรือ .htm ตาแหน่งที่จัดเก็บ ไฟล์ กดปุ่ม Save ชนิดของไฟล์
- 39. การแสดงไฟล์เอกสาร HTML ดับเบิ้ลคลิกที่ Web Browser ในที่นี้คือ Internet Explorer เลือก File>open คลิก Browse เพื่อค้นหาไฟล์ที่ต้องการ จากนั้นคลิกปุ่ม Open ในช่อง Open จะเจอเส้นทาง(path) ที่เก็บ ไฟล์ HTML ดังกล่าว คลิก OK
- 40. อ่านเพิ่มเติม อธิบายการใช ้งาน Tag ต่าง ๆ อย่างละเอียด http://202.29.52.57/~julalug/html/ http://www.w3.org/MarkUp/Guide/Advan ced.html บทเรียน online การสอนเขียน html http://www.thaiall.com/learn/htmsld.htm http://www.geocities.com/pentagon/2932 /midi.html