Chapter 3

HTML web page Structure

โครงสร้างหน้า HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>หัวข้อเรื่องของเว็บเพจ ที่จะแสดงใน title bar ด้านบน</title>
</head>
<body>
      ส่วนเนื้อหา ประกอบด้วยข้อความ ตาราง รูป และวัตถุอื่นๆ
</body>
</html>

คลิกที่นี่ เพื่อดูผลลัพธ์

1  ส่วนประกาศ DOCTYPE

<!DOCTYPE> ควรจะใส่ีในเอกสารทุกๆ หน้า โดยวางไว้บรรทัดแรกเสมอ เพื่อบอกให้เว็บเบราเซอร์์ทราบว่า เราใช้คำสั่ง HTML รุ่นใด และบอกชนิดของเอกสาร (Document Type Definition : DTD) ที่ใช้ ซึ่งจะช่วยให้เว็บเบราเซอร์แปลเอกสารได้อย่างถูกต้อง

บอกรุ่นของ HTML ที่ใช้
- สำหรับ HTML รุ่นดั้งเดิม
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 1//EN">
- สำหรับ HTML 2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
- สำหรับ HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
- สำหรับ HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

บอก Document Type ของเอกสาร (DTD)
1. HTML 4.01 Strict  
การเลือก doctype ชนิดนี้ จะำไม่สามารถใช้ Tag และ Attribute เก่า ที่ W3C ย้ายไปไว้ในส่วน Style Sheet ได้ (เช่น tag <font>) และในการตกแต่งเอกสารจะใช้ CSS

This DTD contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed.

เมื่อจะให้เอกสาร HTML เป็นเอกสารชนิดนี้ให้ใช้การประกาศดังนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


2. HTML 4.01 Transitional
การเลือก doctype ชนิดนี้ จะค่อนข้างยืดหยุ่น เรายังสามารถใช้ Tag และ Attribute เก่า ที่ W3C ย้ายไปไว้ในส่วน Style Sheet ได้ ซึ่งเหมาะกับเบราเซอร์์ ที่ไม่สนับสนุน CSS  

This DTD contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed.

เมื่อจะให้เอกสาร HTML เป็นเอกสารชนิดนี้ให้ใช้การประกาศดังนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


3. HTML 4.01 Frameset (เรื่อง Frame อยู่บทที่ 16 ค่ะ)
เลือกใช้ doctype ชนิดนี้ เมื่อเราจะใช้งาน Framset (เป็นการระบุว่าเอกสาร HTML นั้นใช้เฟรมในการสร้างหน้าเว็บเพจแทนการใช้ tag <body>)

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

เมื่อจะให้เอกสาร HTML เป็นเอกสารชนิดนี้ให้ใช้การประกาศดังนี้
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2. <html>...</html>

ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ ส่วนภายใน Element <html> ประกอบด้วยส่วนของ  <head>...</head> และ <body>...</body>

3. <head>...</head>

ใช้กำหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ ซึ่งคำสั่งที่อยู่ในส่วนนี้จะไมได้่แสดงผลให้เห็นในหน้า่เว็บเพจ เช่น กําหนดหัวข้อเรื่องของเว็บเพจ ที่จะแสดงให้เห็นใน title bar ด้านบนของเว็บเบราเซอร์์ โดยใช้ Element <title>...</title>     กำหนด keyword สำหรับการใช้งานของ Search Engine, กำหนดสไตล์ CSS  และ Script ต่างๆ  (จะพูดถึงอย่างละเอียดในบทต่อไป)

4. <body>...</body>

เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด มีส่วนประกอบ ได้แก่ ข้อความ ตาราง ลิสต์ รูป ภาพ ลิงค์ เป็นต้น

comment <!-- ... -->

Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่าง เช่น ใช้เพื่อเตือนความจำ กำกับ code แต่ละส่วนที่เราเขียนว่าเพื่อทำอะไร ทำให้อ่านและแก้ไข code ภายหลังได้ง่าย   ข้อความใน tag comment จะไม่ถูกเว็บเบราเซอร์์แสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อมีการ view source code เท่านั้น

Example
<!-- ตรงนี้คือเมนู -->
Chapter1<br />
Chapter2<br />
Chapter3<br />
Output
Chapter1
Chapter2
Chapter3



« Chapter 2
Chapter 4 »