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

HTML (HyperText Markup Language) ทำความรู้จักกับโครงสร้างของเว็บไซต์
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1

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

HTML คืออะไร?

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

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

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

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

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

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

  1. <!DOCTYPE html>
    • ประกาศชนิดของเอกสาร HTML
  2. <html>
    • แท็กหลักที่ครอบคลุมเอกสาร HTML ทั้งหมด
  3. <head>
    • ส่วนที่ใช้ในการกำหนดข้อมูลเกี่ยวกับเอกสาร เช่น เมตาดาต้า ลิงก์ไปยังไฟล์ CSS และสคริปต์
  4. <title>
    • กำหนดชื่อเรื่องของเอกสารที่จะปรากฏในแท็บของเว็บเบราว์เซอร์
  5. <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 ที่สำคัญและใช้งานบ่อย

  1. <h1> ถึง <h6>
    • แท็กหัวข้อ ใช้ในการกำหนดหัวข้อของเนื้อหา โดย <h1> เป็นหัวข้อที่สำคัญที่สุดและ <h6> เป็นหัวข้อที่สำคัญน้อยที่สุด
  2. <p>
    • แท็กย่อหน้า ใช้ในการกำหนดย่อหน้าของเนื้อหา
  3. <a>
    • แท็กลิงก์ ใช้ในการสร้างลิงก์ไปยังหน้าเว็บหรือที่อยู่อื่นๆ แอตทริบิวต์ href ใช้ในการระบุที่อยู่ของลิงก์
  4. <img>
    • แท็กรูปภาพ ใช้ในการแสดงรูปภาพ แอตทริบิวต์ src ใช้ในการระบุที่อยู่ของไฟล์รูปภาพ และแอตทริบิวต์ alt ใช้ในการกำหนดข้อความแสดงแทนรูปภาพ
  5. <ul>, <ol>, <li>
    • แท็กรายการไม่เรียงลำดับ (<ul>) และรายการเรียงลำดับ (<ol>) ใช้ในการสร้างรายการ โดย <li> ใช้ในการกำหนดแต่ละรายการในรายการ
  6. <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 อย่างถูกต้องเป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บทุกคน

ติดต่อเรา

top-view-creative-team-discussing-business-graphs-drawn-marker-pens-Website-scaled-1
URL Rating (UR) เป็นเครื่องมือที่สำคัญในการประเมินความสามารถของแต่ละหน้าเว็บในการจัดอันดับในผลการค้น...
top-view-creative-team-discussing-business-graphs-drawn-marker-pens-Website-scaled-1
ในโลกของ SEO และการตลาดดิจิทัล Domain Rating (DR) เป็นหนึ่งในตัวชี้วัดที่สำคัญสำหรับการประเมินความแข...
top-view-creative-team-discussing-business-graphs-drawn-marker-pens-Website-scaled-1
Domain Authority (DA) คือการวัดที่สำคัญในการประเมินความสามารถของเว็บไซต์ในการจัดอันดับในผลการค้นหาขอ...
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1
การตรวจสอบ Backlink ของเว็บไซต์เป็นขั้นตอนที่สำคัญในการปรับปรุง SEO (Search Engine Optimization) ของ...
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1
ในยุคดิจิทัลที่ข้อมูลมีความสำคัญและการสื่อสารเป็นสิ่งที่จำเป็น การจัดเตรียมข้อมูลที่ช่วยตอบคำถามของผ...
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1
การเพิ่มประสิทธิภาพในการค้นหา (SEO) ของเว็บไซต์เป็นเรื่องที่สำคัญสำหรับการดึงดูดทราฟิกและเพิ่มความน่...
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1
การทำ Local SEO เป็นกลยุทธ์ที่มีความสำคัญสำหรับธุรกิจขนาดเล็กที่ต้องการดึงดูดลูกค้าในพื้นที่ท้องถิ่น...
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1
ในกระบวนการออกแบบและพัฒนาเว็บไซต์หรือแอปพลิเคชัน การสร้าง Mockup เป็นขั้นตอนสำคัญที่ช่วยให้ทีมงานและ...
meeting-business-people-group-corporate-discussion-investment-investment-concept-conference-room-Website-scaled-1
Local SEO หรือการปรับแต่ง SEO สำหรับการค้นหาท้องถิ่น เป็นกระบวนการในการเพิ่มประสิทธิภาพเว็บไซต์ของคุ...