HTML บทนำ

HTML คืออะไร ?

  • HTML ย่อมาจาก Hyper Text Markup Language
  • HTML คือ ภาษาที่ใช้ในการสร้างหน้าเว็บเพจหรือเว็บไซต์
  • HTML อธิบายโครงสร้างของเว็บเพจ
  • HTML ประกอบไปด้วยชุดของ elements
  • องค์ประกอบ HTML บอกเบราว์เซอร์ถึงวิธีการแสดงผลเนื้อหา
  • HTML element ติดป้ายบอกถึงแต่ละส่วนของเนื้อหา “นี่คือหัวเรื่อง”, “นี่คือย่อหน้า”, “นี่คือลิงก์” เป็นต้น

ตัวอย่างเอกสาร HTML

<code><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

อธิบายตัวอย่าง

  • <!DOCTYPE html> กำหนดประเภทเอกสารเป็น HTML5
  • <html>เป็น Tag นอกสุดเพื่อบอกว่านี่คือหน้าเว็บ HTML
  • <head> ภายใน Tag head เป็นข้อมูลเกี่ยวกับหน้าเว็บ ที่จะไม่แสดงผลบนเบราว์เซอร์
  • <title> ระบุหัวข้อของเว็บไซต์
  • <body> ใส่เนื้อหา เพื่อแสดงผลบนหน้าเว็บไซต์
  • <h1> กำหนดหัวข้อ
  • <p> กำหนดข้อความย่อหน้า

HTML Element คืออะไร ?

HTML element คือถูกกำหนดโดย tag เริ่มต้น เนื้อหาบางส่วน และ tag ปิดท้าย :

<tagname> เนื้อหาอยู่ที่นี่… </tagname>

HTML element คือทุกอย่างตั้งแต่ tag เริ่มต้นจนถึง tag ปิดท้าย :

<h1>My First Heading</h1>

<p>My first paragraph.</p>

tag เริ่มต้นเนื้อหา Elementtag ปิด
<h1>My First Heading
</h1>
<p>
My first paragraph.
</p>
<br>ไม่มีไม่มี

หมายเหตุ: element บางตัวไม่มีการปิด Tag ซึ่งเรียกว่า Empty Element เช่น <br> (คำสั่งเว้นบรรทัด)

เว็บเบราว์เซอร์ ( Web browser )

จุดประสงค์ของเว็บเบราว์เซอร์ (Chrome, Edge, Firefox, Safari) คือการอ่านเอกสาร HTML และแสดงผลอย่างถูกต้อง

เบราว์เซอร์ไม่แสดง tag HTML แต่ใช้เพื่อกำหนดวิธีแสดงเอกสาร:

html page

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

ด้านล่างนี้คือตัวอย่างการแสดงภาพโครงสร้างหน้า HTML:

html page structure

หมายเหตุ:เนื้อหาภายในส่วน <body> (พื้นที่สีขาวด้านบน) จะแสดงในเบราว์เซอร์ 
เนื้อหาภายในองค์ประกอบ <title> จะแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า

เวอร์ชันของ HTML

เวอร์ชั่นปี ค.ศ.
HTML
1991
HTML 2.0
1995
HTML 3.21997
HTML 4.01
1999
XHTML
2000
HTML52014
HTML 5.12016