HTML เบื้องต้น : ลักษณะและโครงสร้างของภาษา HTML ตอนที่ 2

struct

สวัสดีครับ ผมนายนานต์นานต์คนเดิม วันนี้เรามาทำความรู้จักกับโครงสร้างของเอกสาร HTML กันดีกว่า
โครงสร้างของภาษา HTML แบ่งออกได้เป็น 4 ส่วนดังนี้


<html>
<head>
<title>  หัวข้อเว็บ   </title>
</head>

<body>
เนื้อหาของเว็บ
</body>

</html>

ดูรายละเอียดกันนะครับ
แท็ก <html>…</html> เป็นแท็กแรกที่ต้องมีในการเขียนภาษา HTML มีเพื่อบ่งบอกว่าเอกสารที่เราสร้างเป็นภาษา HTML ครับ เราจะเขียนแท็กนี้ไว้ต้นเอกสารและท้ายเอกสาร
แท็ก <head>…</head> เป็นแท็กที่กำหนดส่วนหัวของเอกสารครับ
แท็ก <title>…</title> เป็นแท็กที่กำหนดชื่อให้เว็บเพจ ข้อความในแท็กนี้จะปรากฏบน title bar ของ browser ที่เราใช้ครับ แท็กนี้จะอยู่ในแท็ก <head>…</head> อีกที
แท็ก <body>…</body> เป็นแท็กที่กำหนดส่วนเนื้อหาของเว็บครับ

ทดลองลงมือเขียนจริงๆกันเลยดีกว่า จะได้เข้าใจกันมากขึ้น

โปรแกรมที่เราจะใช้สร้างเอกสาร HTML นั้นเราเรียกว่า Text Editor ครับเอาไว้ใช้สร้างและแก้ไขข้อความ ที่ใช้กันอยู่ก็มีหลายโปรแกรมครับเช่น Dream weaver , Edit plus (อันนี้ดีนะครับตอนเขียนโค้ดจะแยกสีแต่ละโค้ดให้ดูด้วย) แต่ผมขอใช้โปรแกรมNotepadแล้วกันเพราะเป็นโปรแกรมขนาดเล็ก ไม่ใช้ทรัพยากรมากและน่าจะมีอยู่ในคอมพิวเตอร์ที่ลงวินโดวส์ทุกเครื่อง

เปิดโปรแกรม Notepad ขึ้นมาครับ (ใครที่ไม่รู้ว่าเข้าตรงไหน เข้าที่ Start >programs>Accessories>Notepad ครับ หรือเข้า Run พิมพ์ว่า Notepad กด Enter ก็ได้เหมือนกันครับ)

เสร็จแล้วพิมพ์โครงสร้างภาษา HTML ที่ผมเสนอไว้ข้างบนลงไป (ใครจะก๊อปมาเลยก็ได้ไม่ว่า แต่ขอแนะนำให้เขียนเองดีกว่าครับจะได้จำได้) เปลี่ยนเนื้อหาด้านในนิดหน่อยดีกว่า ลองเขียนอะไรก็ได้ครับตามใจในส่วนของ <title>…</title> กับ <body>…</body>

html01
เสร็จแล้วบันทึกครับ เลือก File>Save หรือจะกด Ctrl+S ก็ได้ครับ

html02
จะมีขึ้นมาให้เราเลือกที่เก็บ แล้วตั้งชื่อไฟล์ ก็เลือกที่เก็บตามใจชอบครับ ตั้งชื่อไฟล์แล้วต่อด้วย.html กด save เราก็จะได้เอกสาร HTML

html03

แล้ว ลองเปิดดูด้วย browser ได้เลย (บางคนรูปไอค่อนอาจจะไม่เหมือนของผมไม่ต้องตกใจนะ เพราะผมใช้ FireFox เป็น Browser)

html04
ดูการแสดงผลที่ได้นะครับ สังเกตุว่าข้อความที่เราเขียนในแท็ก <title>…</title> จะปรากฏที่ title bar

html05
ลองแก้ไขข้อความเล่นๆดูไปพลางๆก่อนได้ครับ ครั้งหน้าเรามาดูแท็กที่ใช้จัดการกับหน้าเอกสาร HTML กัน