บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

บทนำ 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 ถูกกำหนดโดยแท็กเริ่มต้น เนื้อหาบางส่วน และแท็กปิดท้าย:

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

องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นจนถึงแท็กสิ้นสุด:

< h1 >หัวเรื่องแรกของฉัน < /h1 >
< p >ย่อหน้าแรกของฉัน < /p >
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:

<html>
<head>
<title>ชื่อเพจ</title>
</head>
<body>
<h1>นี่คือหัวเรื่อง</h1>
<p>นี่คือย่อหน้า</p>
<p>นี่เป็นอีกย่อหน้าหนึ่ง</p>
</body>
</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 ล่าสุด