บทที่ 1 : โครงสร้างของเอกสาร HTML

ความรู้เบื้องต้นกับ HTML

                        HTML หรือ Hypertext Markup Language เป็นภาษาที่ใช้ในการเขียนเว็บเพจในการทีจะสร้างเว็บเพจหนึ่ง ๆ นั้น นักเรียนจำเป็นจะต้องมีความรู้ความเข้าใจเบื้องต้น ในการสร้างเอกสาร HTML อันดับแรก นักเรียนจะต้องมาทำความรู้จักกับเครื่องมือในการสร้างรหัส HTMLก่อนเพื่อที่จะทำให้งานสร้างเว็บเพจของนักเรียนง่าย
และ รวดเร็วขึ้น

โปรแกรม Text Editor

                        เป็นโปรแกรมที่ทำหน้าที่ในการสร้างและแก้ไขข้อความ ภาษาที่ใช้ในการเขียนโครงสร้างภาษา HTML และมีความรวดเร็ว สะดวก ยกตัวอย่างอาทิ เช่น โปรแกรม EditPlus แต่อย่างไรก็ตาม ส่วนใหญ่มักนิยมใช้โปรแกรม Notepad




Tag ที่เป็นสาระสำคัญและหัวใจของเอกสาร HTML

                        เป็น tag ที่บอกให้ Browser ได้ทราบว่าข้อความนี้เป็นข้อความ
ในรูปแบบของภาษา HTML ซึ่งเราจำเป็นต้องเริ่มเขียน HTML tag ที่จุดเริ่มต้น
ของเอกสารและจุดสิ้นสุดของเอกสาร html

                                                <HTML>    
                                                </HTML>

                          Head tags เป็น tag เริ่มต้นและสิ้นสุดในส่วนหัวของเอกสาร HTML เพื่อที่จะแสดงหัวเรื่องของเอกสาร

                                                <HTML>
                                                <HEAD>
                                                </HEAD>
                                                </HTML>


Title tags เป็น tag ที่ใช้แสดงหัวเรื่องหรือชื่อของเอกสาร ณ ตำแหน่ง
ส่วนบนสุดของ Browser

                                                <HTML>
                                                <HEAD>
                                                <TITLE></TITLE>
                                                </HEAD>
                                                </HTML>


Body tags หมายถึง ส่วนเนื้อหาของเอกสารที่เราจะต้องใส่เนื้อหาที่ต้องการแสดงบนเว็บเพจลงไป

                                                <HTML>
                                                <HEAD>
                                                <TITLE></TITLE>
                                                </HEAD>
                                                <BODY>
                                                </BODY>
                                                </HTML>

ตัวอย่าง

                                                <HTML>
                                                <HEAD>
                                                <TITLE>My first webpage</TITLE>
                                                </HEAD>
                                                <BODY>
                                                </BODY>
                                                </HTML>

ให้นักเรียนทดลองพิมพ์ภาษา HTML (Hypert ext Markup Language)
ลงบนโปรแกรม Text Editor

แล้ว Save เป็น HTML File ( *.html) ดังรูป

การแสดงผลลัพธ์บน Web Browser (Internet Explorer)


 
จัดทำโดย : นายถาวร เขียนเสมอ, โรงเรียนสัตหีบวิทยาคม จ.ชลบุรี
นางขวัญใจ เขียนเสมอ, โรงเรียนสัตหีบวิทยาคม จ.ชลบุรี