บทนำ HTML
HTML เป็นภาษามาร์กอัปมาตรฐานสำหรับการสร้างหน้าเว็บ
HTML คืออะไร?
- HTML ย่อมาจาก Hyper Text Markup Language
- HTML เป็นภาษามาร์กอัปมาตรฐานสำหรับการสร้างเว็บเพจ
- HTML อธิบายโครงสร้างของเว็บเพจ
- HTML ประกอบด้วยชุดขององค์ประกอบ
- องค์ประกอบ HTML บอกเบราว์เซอร์ถึงวิธีการแสดงเนื้อหา
- องค์ประกอบ HTML ติดป้ายกำกับชิ้นส่วนของเนื้อหา เช่น "นี่คือส่วนหัว" "นี่คือย่อหน้า" "นี่คือลิงก์" เป็นต้น
เอกสาร HTML อย่างง่าย
ตัวอย่าง
<!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>นี้เป็นองค์ประกอบรากของหน้า HTML - องค์ประกอบ
<head>ประกอบด้วยข้อมูลเมตาเกี่ยวกับหน้า HTML - องค์ประกอบ
<title>ระบุชื่อสำหรับหน้า HTML (ซึ่งแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า) - องค์ประกอบ
<body>กำหนดเนื้อหาของเอกสาร และเป็นคอนเทนเนอร์สำหรับเนื้อหาที่มองเห็นได้ทั้งหมด เช่น หัวเรื่อง ย่อหน้า รูปภาพ ไฮเปอร์ลิงก์ ตาราง รายการ ฯลฯ - องค์ประกอบ
<h1>กำหนดหัวเรื่องขนาดใหญ่ - องค์ประกอบ
<p>กำหนดย่อหน้า
องค์ประกอบ HTML คืออะไร?
องค์ประกอบ HTML ถูกกำหนดโดยแท็กเริ่มต้น เนื้อหาบางส่วน และแท็กปิดท้าย:
องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นจนถึงแท็กสิ้นสุด:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
หมายเหตุ:องค์ประกอบ HTML บางรายการไม่มีเนื้อหา (เช่น องค์ประกอบ <br>) องค์ประกอบเหล่านี้เรียกว่าองค์ประกอบที่ว่างเปล่า องค์ประกอบที่ว่างเปล่าไม่มีแท็กปิดท้าย!
เว็บเบราว์เซอร์
จุดประสงค์ของเว็บเบราว์เซอร์ (Chrome, Edge, Firefox, Safari) คือการอ่านเอกสาร HTML และแสดงผลอย่างถูกต้อง
เบราว์เซอร์ไม่แสดงแท็ก HTML แต่ใช้เพื่อกำหนดวิธีแสดงเอกสาร:
โครงสร้างหน้า HTML
ด้านล่างนี้คือการแสดงภาพโครงสร้างหน้า HTML:
หมายเหตุ:เนื้อหาภายในส่วน <body> (พื้นที่สีขาวด้านบน) จะแสดงในเบราว์เซอร์ เนื้อหาภายในองค์ประกอบ <title> จะแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า
ประวัติ HTML
ตั้งแต่วันแรกของเวิลด์ไวด์เว็บ HTML มีหลายเวอร์ชัน:
| Year | Version |
|---|---|
| 1989 | Tim Berners-Lee invented www |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendation: HTML5.1 2nd Edition |
| 2017 | W3C Recommendation: HTML5.2 |
บทช่วยสอนนี้เป็นไปตามมาตรฐาน HTML5 ล่าสุด