HTML (HyperText Markup Language) ทำความรู้จักกับโครงสร้างของเว็บไซต์

glowing-neon-circle-portal-with-smoke-wooden-platform (Web H)

HTML หรือ HyperText Markup Language เป็นภาษาที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML เป็นภาษาพื้นฐานที่สำคัญที่สุดในการพัฒนาเว็บไซต์ ทำให้เราสามารถแสดงเนื้อหาข้อความ รูปภาพ ลิงก์ และสื่อต่างๆ บนเว็บเบราว์เซอร์ได้อย่างถูกต้องและเป็นระเบียบ ในบทความนี้ เราจะมาทำความรู้จักกับ HTML ว่าคืออะไร? มีส่วนประกอบอะไรบ้าง และทำงานอย่างไร?

หัวข้อ

HTML คืออะไร?

HTML (HyperText Markup Language) คือภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML ถูกพัฒนาโดย Tim Berners-Lee ในปี 1991 เพื่อใช้ในการแชร์ข้อมูลระหว่างนักวิจัยผ่านอินเทอร์เน็ต และได้พัฒนามาอย่างต่อเนื่องจนถึงปัจจุบัน HTML ใช้แท็ก (Tags) ในการระบุส่วนต่างๆ ของเนื้อหา เช่น หัวข้อ ย่อหน้า ลิงก์ รูปภาพ และสื่อต่างๆ

ส่วนประกอบของ HTML

HTML ประกอบด้วยส่วนประกอบหลักดังนี้

แท็ก (Tags) : แท็กเป็นเครื่องหมายที่ใช้ในการระบุส่วนต่างๆ ของเนื้อหา แท็กมักจะประกอบด้วยชื่อแท็กในวงเล็บเหลี่ยม เช่น <html>, <head>, <body>, <h1>, <p>
องค์ประกอบ (Elements) : องค์ประกอบประกอบด้วยแท็กเปิดและแท็กปิดที่ครอบคลุมเนื้อหาหรือข้อความ ตัวอย่างเช่น <p>นี่คือย่อหน้า</p>
แอตทริบิวต์ (Attributes) : แอตทริบิวต์เป็นข้อมูลเพิ่มเติมที่ใช้ในการระบุคุณสมบัติของแท็ก เช่น id, class, src, href แอตทริบิวต์จะอยู่ภายในแท็กเปิด ตัวอย่างเช่น <a href="https://www.example.com">ลิงก์ไปยัง Example</a>

โครงสร้างพื้นฐานของ HTML

โครงสร้างพื้นฐานของเอกสาร HTML ประกอบด้วยส่วนประกอบหลักดังนี้

<!DOCTYPE html>
- ประกาศชนิดของเอกสาร HTML
<html>
- แท็กหลักที่ครอบคลุมเอกสาร HTML ทั้งหมด
<head>
- ส่วนที่ใช้ในการกำหนดข้อมูลเกี่ยวกับเอกสาร เช่น เมตาดาต้า ลิงก์ไปยังไฟล์ CSS และสคริปต์
<title>
- กำหนดชื่อเรื่องของเอกสารที่จะปรากฏในแท็บของเว็บเบราว์เซอร์
<body>
- ส่วนที่ใช้ในการแสดงเนื้อหาหลักของเอกสาร เช่น ข้อความ รูปภาพ ลิงก์ และสื่อต่างๆ

ตัวอย่างโครงสร้างพื้นฐานของเอกสาร HTML

<!DOCTYPE html>
<html>
<head>
  <title>นี่คือชื่อเรื่องของเอกสาร</title>
</head>
<body>
  <h1>นี่คือหัวข้อหลัก</h1>
  <p>นี่คือย่อหน้าแรกของเนื้อหา</p>
  <a href="https://www.example.com">ลิงก์ไปยัง Example</a>
</body>
</html>

แท็ก HTML ที่สำคัญ

นี่คือบางส่วนของแท็ก HTML ที่สำคัญและใช้งานบ่อย

<h1> ถึง <h6>
- แท็กหัวข้อ ใช้ในการกำหนดหัวข้อของเนื้อหา โดย <h1> เป็นหัวข้อที่สำคัญที่สุดและ <h6> เป็นหัวข้อที่สำคัญน้อยที่สุด
<p>
- แท็กย่อหน้า ใช้ในการกำหนดย่อหน้าของเนื้อหา
<a>
- แท็กลิงก์ ใช้ในการสร้างลิงก์ไปยังหน้าเว็บหรือที่อยู่อื่นๆ แอตทริบิวต์ href ใช้ในการระบุที่อยู่ของลิงก์
<img>
- แท็กรูปภาพ ใช้ในการแสดงรูปภาพ แอตทริบิวต์ src ใช้ในการระบุที่อยู่ของไฟล์รูปภาพ และแอตทริบิวต์ alt ใช้ในการกำหนดข้อความแสดงแทนรูปภาพ
<ul>, <ol>, <li>
- แท็กรายการไม่เรียงลำดับ (<ul>) และรายการเรียงลำดับ (<ol>) ใช้ในการสร้างรายการ โดย <li> ใช้ในการกำหนดแต่ละรายการในรายการ
<div> และ <span>
- แท็ก <div> ใช้ในการจัดกลุ่มเนื้อหาบล็อก และแท็ก <span> ใช้ในการจัดกลุ่มเนื้อหาภายในบรรทัด

การใช้งาน CSS และ JavaScript ร่วมกับ HTML

HTML สามารถใช้งานร่วมกับ CSS (Cascading Style Sheets) และ JavaScript เพื่อเพิ่มความสวยงามและความสามารถในการโต้ตอบของเว็บเพจได้:

1. CSS

CSS ใช้ในการกำหนดรูปแบบการแสดงผลของเนื้อหา HTML เช่น สี ขนาด ฟอนต์ และการจัดวาง ตัวอย่างการใช้งาน CSS ในเอกสาร HTML

<style>
  body {
    background-color: lightblue;
  }
  h1 {
    color: navy;
    text-align: center;
  }
  p {
    font-family: verdana;
    font-size: 20px;
  }
</style>

2. JavaScript

JavaScript ใช้ในการเพิ่มความสามารถในการโต้ตอบของเว็บเพจ เช่น การตรวจสอบข้อมูลแบบฟอร์ม การเปลี่ยนแปลงเนื้อหาแบบไดนามิก และการโต้ตอบกับผู้ใช้ ตัวอย่างการใช้งาน JavaScript ในเอกสาร HTML

<script>
  function showAlert() {
    alert("Hello, World!");
  }
</script>
<button onclick="showAlert()">Click me</button>

สรุป

HTML (HyperText Markup Language) เป็นภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML ประกอบด้วยแท็ก องค์ประกอบ และแอตทริบิวต์ที่ใช้ในการกำหนดส่วนต่างๆ ของเนื้อหา HTML เป็นภาษาพื้นฐานที่สำคัญที่สุดในการพัฒนาเว็บไซต์ และสามารถใช้งานร่วมกับ CSS และ JavaScript เพื่อเพิ่มความสวยงามและความสามารถในการโต้ตอบของเว็บเพจได้ การเข้าใจและใช้งาน HTML อย่างถูกต้องเป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บทุกคน