HTML (HyperText Markup Language) คือภาษาที่ใช้ในการสร้างโครงสร้างพื้นฐานของเว็บเพจ เปรียบเสมือนโครงกระดูกที่รองรับเนื้อหาต่างๆ บนเว็บไซต์ ทำให้เว็บเบราว์เซอร์สามารถตีความและแสดงผลข้อมูลเหล่านั้นออกมาเป็นหน้าเว็บที่เราเห็นได้
HTML ทำงานอย่างไร?
- แท็ก (Tag) HTML ใช้แท็กในการกำหนดโครงสร้างของเอกสาร แท็กจะอยู่ในรูปของคำสั่งที่อยู่ระหว่างวงเล็บเหลี่ยม เช่น
<html>
,<head>
,<body>
,<h1>
,<p>
,<a>
, ฯลฯ แต่ละแท็กจะมีหน้าที่แตกต่างกันไป - องค์ประกอบ (Element) แท็กจะรวมกันเป็นองค์ประกอบ (Element) ซึ่งประกอบด้วยแท็กเปิด (เปิดด้วยวงเล็บเหลี่ยม) และแท็กปิด (ปิดด้วยวงเล็บเหลี่ยมและสแลช) เช่น
<p>นี่คือย่อหน้า</p>
- แอตทริบิวต์ (Attribute) แท็กบางตัวจะมีแอตทริบิวต์ที่ใช้ในการกำหนดคุณสมบัติเพิ่มเติม เช่น
<a href="https://www.example.com">ไปที่เว็บไซต์</a>
แอตทริบิวต์href
ใช้สำหรับกำหนด URL ของลิงก์
โครงสร้างพื้นฐานของ HTML
<!DOCTYPE html>
<html>
<head>
<title>หน้าเว็บของฉัน</title>
</head>
<body>
<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
<p>นี่คือตัวอย่างย่อหน้า</p>
</body>
</html>
- <!DOCTYPE html> บรรทัดแรกใช้เพื่อบอกเว็บเบราว์เซอร์ว่าเอกสารนี้เป็นเอกสาร HTML5
- <html></html> แท็กหลักที่ห่อรอบเนื้อหาทั้งหมดของเอกสาร HTML
- <head></head> ส่วนหัวของเอกสาร ใช้สำหรับใส่ข้อมูลที่ไม่แสดงผลบนหน้าเว็บ เช่น ชื่อเว็บไซต์, คำอธิบาย, สไตล์ชีท (CSS)
- <body></body> ส่วนเนื้อหาหลักของเอกสาร ใช้สำหรับใส่เนื้อหาที่ต้องการแสดงผลบนหน้าเว็บ
ตัวอย่างแท็ก HTML ที่สำคัญ
- <h1> – <h6> แท็กสำหรับหัวข้อ โดย h1 มีขนาดใหญ่ที่สุด
- <p> แท็กสำหรับย่อหน้า
- <a> แท็กสำหรับสร้างลิงก์
- <img> แท็กสำหรับใส่รูปภาพ
- <ul> แท็กสำหรับสร้างรายการที่ไม่มีหมายเลข
- <ol> แท็กสำหรับสร้างรายการที่มีหมายเลข
- <table> แท็กสำหรับสร้างตาราง
ทำไมต้องเรียนรู้ HTML?
- สร้างเว็บไซต์เอง คุณสามารถสร้างเว็บไซต์ส่วนตัวหรือเว็บไซต์สำหรับธุรกิจได้อย่างอิสระ
- ปรับแต่งเว็บไซต์ สามารถปรับแต่งรูปแบบและเนื้อหาของเว็บไซต์ได้ตามต้องการ
- เข้าใจการทำงานของเว็บ การเรียนรู้ HTML จะช่วยให้คุณเข้าใจว่าเว็บไซต์ทำงานอย่างไรและมีส่วนประกอบอะไรบ้าง
- เป็นพื้นฐานสำหรับการเรียนรู้ภาษาอื่น HTML เป็นพื้นฐานสำหรับการเรียนรู้ภาษาเว็บอื่นๆ เช่น CSS และ JavaScript
HTML เป็นภาษาที่เรียนรู้ง่ายและมีประโยชน์อย่างมากสำหรับผู้ที่สนใจในการสร้างเว็บไซต์ หากต้องการเรียนรู้เพิ่มเติม สามารถค้นหาบทเรียน HTML ได้ฟรีในบล็อกของผม มีมากมาย หลากหลายตัวอย่างให้อ่าน แล้วนำไปฝึกฝน ทำความเข้าใจหลักการทำงานต่างๆ เพื่อต่อยอดเป็นสุดยอดเว็บไซต์ในอนาคตครับ