1. สามารถอธิบายความหมายของ HTML 2. สามารถอธิบายถึงโครงสรางของภาษา HTML 3. สามารถสรางเอกสาร HTML 4. สามารถเรียกดูเอกสาร HTML ทางโปรแกรมเว็บบราวเซอร เนื้อหา 1. รูจักกับภาษา HTML (HTML Introduction) 2. องคประกอบของ HTML (HTML Elements) 3. พื้นฐาน HTML Tags 4. HTML Character Entities 5. HTML Links 6. HTML Frames 7. HTML Tables 8. HTML Lists 9. HTML Images 10. HTML Backgrounds 11. HTML Colors 12. HTML Fonts กิจกรรมการเรียนการสอน 1. อธิบาย พรอมยกตัวอยางประกอบ 2. ศึกษาจากเอกสารประกอบการสอน 3. แนะนําแหลงศึกษาคนควาเพิ่มเติม 4. ทําแบบฝกหัดทายบทเรียน
3. HTML 1. รูจักกับภาษา HTML (HTML Introduction) HTML ยอมาจาก HyperText Markup Language เปนหนึ่งในภาษาคอมพิวเตอร ที่มี ลักษณะเปนภาษาในเชิงการบรรยายเอกสารไฮเปอรมีเดีย (Hypermedia Document Description Language) เพื่อเผยแพรเอกสารในระบบเครือขาย WWW (World Wide Web) มีโครงสรางภาษา โดยใชตัวกํากับ (Markup Tags) เพื่อทําหนาที่ควบคุมการแสดงผลขอมูล รูปภาพ และวัตถุอื่น ๆ ผานทางโปรแกรมเว็บบราวเซอร ซึ่งในแตละ Tag จะมีสวนขยาย (Attribute) เพื่อควบคุมการ แสดงผล ซึ่งเปนภาษาที่ถูกพัฒนาขึ้นโดย World Wide Web Consortium (W3C) ซึ่งมีแมแบบคือ ภาษา SGML (Standard Generalized Markup Language) การสรางไฟล HTML จะตองอาศัยโปรแกรมที่มีคุณสมบัติเปนเท็กซเอดิเตอร (Text Editor) โดยใชสําหรับเขียนคําสั่งตาง ๆ ที่ตองการแสดงผลทางจอภาพ และเก็บเปนไฟล โดยมี นามสกุล .html หรือ .htm 1.1 เริ่มตนเขียนภาษา HTML การเริ่มตนเขียนภาษา HTML สามารถทําไดโดยงาย ถาใชระบบปฏิบัติการวินโดวส (Windows) ใหเปดโปรแกรม Notepad พิมพคําสั่งตามตัวอยางตอไปนี้ <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> บันทึกไฟล โดยตั้งชื่อ ”mypage.htm” หรือ ”mypage.html” เปดโปรแกรมเว็บบราวเซอร เลือก ”Open” ในเมนู File และคนหาไฟลที่ตองการ โปรแกรมเว็บบราวเซอรจะแสดงผลจากคําสั่งออกทางจอภาพ
4. แรกในเอกสาร HTML คือ <html> ซึ่งเปน Tag ที่บอกใหเว็บบราวเซอรรูวาเปน จุดเริ่มตนของเอกสาร HTML และ Tag สุดทายในเอกสาร ก็คือ </html> ซึ่งเปน Tag ที่บอกเว็บ บราวเซอรวานี่คือจุดสิ้นสุดของเอกสาร HTML ตัวอักษรระหวาง <head> และ </head> เปน Tag สวนหัวเอกสารที่ใชบอกขอมูล ตาง ๆ (Header Information) จะไมแสดงขอมูลที่อยูภายใน Tag นี้ออกทางจอภาพ ตัวอักษรที่อยูระหวาง <title> เปน Tag ที่แสดงชื่อของเอกสาร ซึ่ง Tag <title> จะแสดง ขอมูลในเว็บบราวเซอรตรง Title bar ตัวอักษรที่อยูระหวาง <body> จะเปน Tag ที่ใชแสดงตัวอักษรภายในเว็บบราวเซอร ตัวอักษรระหวาง <b> และ </b> จะทําใหตัวอักษรที่แสดงเปนตัวหนา 1.2 ควรเลือกระหวาง HTM และ HTML เมื่อทําการบันทึกเอกสาร HTML สามารถทําการเลือกบันทึกไดทั้ง .htm หรือ .html ใน ตัวอยางนี้ไดใชการบันทึกแบบ .htm ซึ่งควรที่จะทําการบันทึกเปนนามสกุล .htm ใหติดเปนนิสัย เนื่องจากในอดีตที่ผานมายังมีบางโปรแกรมที่อนุญาตใหเปดไดเฉพาะสามตัวอักษร หมายความวา จะทําใหเปดไดเฉพาะเอกสาร .htm เทานั้น แตในซอฟตแวรเวอรชันใหม เราก็สามารถที่จะทําการ บันทึกเอกสารใหเปน .html ไดเชนกัน 1.3 HTML Editors ปจจุบันนี้สามารถที่จะทําการสรางเอกสาร HTML ไดอยางงายดาย โดยใช WYSIWYG (what you see is what you get) ซึ่งผลลัพธของโปรแกรมที่เห็นจะเหมือนกับหนาจอที่ไดทําการ สรางขึ้นมา เชนโปรแกรม FrontPage, Adobe Photoshop, Macromedia Dreamweaver แตถาตองการที่จะเพิ่มทักษะความสามารถในการพัฒนาเว็บ ก็ควรที่จะทําการเรียนรูคําสั่ง และสรางเอกสาร HTML ดวยตัวเอง 2. องคประกอบของ HTML (HTML Elements) เอกสาร HTML ก็คือไฟลเอกสาร (Text File) ที่สรางขึ้นโดยมีองคประกอบของ HTML ซึ่ง องคประกอบของ HTML ก็คือ Tag ตาง ๆ นั่นเอง 2.1 HTML Tags HTML Tags จะประกอบดวยเครื่องหมาย < และ > โดยปกติทั่วไปแลว HTML Tag จะตองมีหนึ่งคูกัน เชน <b> และ </b> โดยจะมี Tag เริ่มตน (Start Tag) และ Tag สิ้นสุด (End Tag) ซึ่งตัวอักษรที่อยูระหวาง Tag เริ่มตน และ Tag สิ้นสุด จะเรียกวาองคประกอบ โดยทั่วไป แลว HTML Tag สามารถเขียนได 2 รูปแบบ (Not Case Sensitive) เชน <b> จะมีความหมาย เหมือนกับ <B>
5. HTML Elements จากตัวอยางตอไปนี้ <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> HTML Element ก็คือ <b> This text is bold </b> HTML Element เริ่มตนที่ Tag เริ่มตน ก็คือ: <b> ภายใน HTML Element จะมีสวนประกอบ ก็คือ: This text is bold HTML Element สิ้นสุดที่ Tag สิ้นสุด ก็คือ: </b> จุดประสงคของ Tag <b> ก็คือการกําหนดใหแสดงตัวอักษรเปนตัวหนา 2.3 ทําไมถึงตองใช Tag ที่เปนตัวอักษรพิมพเล็ก (Lowercase) กอนหนานี้ไดกลาวถึง HTML Tag วาสามารถเขียนได 2 รูปแบบ: <B> จะมีความหมาย เชนเดียวกับ <b> แตจากตัวอยางที่ผานมาไดใช Tag ที่เปนตัวอักษรพิมพเล็ก เนื่องจากวาใน อนาคตขางหนาภาษา HTML จะถูกกําหนดใหใช Tag ที่เปนตัวอักษรพิมพเล็ก โดยที่ World Wide Web Consortium (W3c) ไดมีขอกําหนดใหใช Tag ที่เปนตัวอักษรพิมพเล็กใน HTML 4 และ XHTML 2.4 Tag Attributes Tag สามารถที่จะกําหนดใหมีคุณสมบัติ (Attribute) เพิ่มเติม ซึ่งคุณสมบัติตาง ๆ เหลานั้น สามารถเพิ่มเติมไดในสวนของ HTML Element Tag ที่ใชในการกําหนดองคประกอบของตัวเอกสาร HTML: <body> สามารถที่จะเพิ่มเติม คุณสมบัติ bgcolor ซึ่งคําสั่ง bgcolor จะทําใหเว็บบราวเซอรเปลี่ยนสีพื้นหลังของเอกสาร HTML เชน <body bgcolor = ”red”> หมายถึงการกําหนดพื้นหลังของเอกสาร HTML ใหเปนสีแดง Tag ที่ใชสรางตาราง: <table> สามารถทําการปรับเปลี่ยนคุณสมบัติของเสนขอบ (Border) ไดโดยใชคําสั่ง <table border = ”0”> หมายถึงกําหนดใหตารางนั้นไมมีเสนขอบ
6. จะตองประกอบดวย ชื่อ และคา: name = ”value” โดยทั่วไปแลว Attribute จะ เพิ่มลงในสวนของ Tag เริ่มตนของ HTML Element 3. พื้นฐาน HTML Tags วิธีการที่จะเรียนรูภาษา HTML ที่ดีที่สุดก็คือการลงมือปฏิบัติ 3.1 Headings Heading เปนการกําหนดหัวขอ โดยใช Tag <h1> ถึง <h6> โดยที่ <h1> เปนการกําหนด หัวขอที่มีขนาดใหญที่สุด <h6> เปนการกําหนดหัวขอที่มีขนาดเล็กที่สุด <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> โดยทั่วไปแลว HTML จะทําการเพิ่มบรรทัดวางกอน และหลัง Heading เสมอ 3.2 Paragraphs Paragraphs เปนการกําหนดยอหนา โดยใช Tag <p> <p>This is a paragraph</p> <p>This is another paragraph</p> โดยทั่วไปแลว HTML จะทําการเพิ่มบรรทัดวางกอน และหลัง Paragraph เสมอ 3.3 Line Breaks Tag <br> ใชสําหรับตองการขึ้นบรรทัดใหม แตไมไดเปนการเริ่ม paragraph ใหม <p>This is a paragraph <br> with line breaks</p> Tag <br> จะมีไม Tag ปด 3.4 Comments in HTML Comment ใชสําหรับแทรกคําแนะนําลงในเอกสาร HTML แต comment จะไมถูกนําไป แสดงในเว็บบราวเซอร สามารถใช comment ในการอธิบาย code ซึ่งจะชวยใหเราสามารถเขาใจ และสามารถแกไข code ไดภายหลัง <! This is a comment >
169; 4.2 Non-breaking Space โดยทั่วไปแลว HTML จะไมสามารถทําการเพิ่มชองวาง (Space) ระหวางตัวอักษรไดเกิน กวา 1 ตัวอักษร ดังนั้นถาตองการที่จะเพิ่มชองวางเกินกวา 1 ตัวอักษรใน HTML จะตองใช Character Entity คือ หรือ Character Number คือ &
160; 4.3 Character Entities ที่ถูกเรียกใชบอย Result Description Entity Name Entity Number non-breaking space &
FFFFFF rgb(255,255,255) 12. HTML Fonts การกําหนดตัวอักษรใน HTML ใช Tag <font> ดังตัวอยางตอไปนี้ <p> <font size="2" face="Verdana"> This is a paragraph. </font> </p> <p> <font size="3" face="Times"> This is another paragraph. </font> </p>
