HTML คืออะไร?

HTML คืออะไร?

ยินดีต้อนรับสู่บทเรียน HTML สำหรับผู้เริ่มต้น! ในบทแรกนี้ เราจะมาทำความเข้าใจกันว่า HTML คืออะไร และมีบทบาทสำคัญอย่างไรในการสร้างเว็บไซต์ที่คุณใช้งานกันอยู่ทุกวัน

HTML คือภาษา Markup

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

ลองนึกภาพว่าคุณกำลังเขียนหนังสือ HTML ก็เหมือนกับเครื่องหมายวรรคตอนและรูปแบบการจัดหน้ากระดาษที่ช่วยให้ผู้อ่านเข้าใจเนื้อหาได้ง่ายขึ้น ในทำนองเดียวกัน HTML ช่วยให้เว็บเบราว์เซอร์เข้าใจโครงสร้างและแสดงเนื้อหาบนหน้าเว็บได้อย่างถูกต้อง

HyperText ในชื่อ HTML หมายถึงข้อความที่สามารถเชื่อมโยงไปยังส่วนอื่นๆ ของเอกสาร หรือไปยังเอกสารอื่นๆ ได้ ซึ่งก็คือลิงก์ที่เราใช้กันอยู่ทั่วไปบนอินเทอร์เน็ต

ใช้สร้างโครงสร้างเนื้อหา

หน้าที่หลักของ HTML คือการกำหนดโครงสร้างของเนื้อหาบนหน้าเว็บ โดยการใช้แท็กต่างๆ เพื่อระบุว่าส่วนไหนเป็นหัวข้อ ส่วนไหนเป็นย่อหน้า ส่วนไหนเป็นรูปภาพ และอื่นๆ อีกมากมาย โครงสร้างนี้มีความสำคัญอย่างยิ่งต่อ SEO (Search Engine Optimization) เนื่องจากช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาของหน้าเว็บและจัดอันดับได้อย่างถูกต้อง

ตัวอย่าง:

<h1>หัวข้อหลักของหน้าเว็บ</h1>
<p>ย่อหน้าแรกของเนื้อหา...</p>
<p>ย่อหน้าต่อไป...</p>
<img src="image.jpg" alt="คำอธิบายรูปภาพ">

ในตัวอย่างนี้:

• <h1> คือแท็กสำหรับหัวข้อระดับ 1 (หัวข้อหลัก)
• <p> คือแท็กสำหรับย่อหน้า
• <img> คือแท็กสำหรับรูปภาพ

แต่ละแท็กจะมี แท็กเปิด (opening tag) เช่น <h1> และ แท็กปิด (closing tag) เช่น </h1> ข้อความที่อยู่ระหว่างแท็กเปิดและแท็กปิดคือเนื้อหาขององค์ประกอบนั้นๆ (ยกเว้นบางแท็กที่ไม่มีแท็กปิด เช่น <img>)

ทำงานร่วมกับ CSS และ JavaScript

HTML เป็นเพียงส่วนหนึ่งของสามองค์ประกอบหลักที่ใช้ในการสร้างเว็บไซต์:

1. HTML: กำหนดโครงสร้างและเนื้อหาของหน้าเว็บ
2. CSS: กำหนดรูปแบบการแสดงผลของหน้าเว็บ (เช่น สี ขนาดตัวอักษร การจัดวาง)
3. JavaScript: เพิ่มลูกเล่นและการทำงานแบบไดนามิกให้กับหน้าเว็บ (เช่น การตอบสนองต่อการคลิก การเปลี่ยนเนื้อหา)

HTML ทำหน้าที่เป็นกระดูกสันหลังของเว็บไซต์ CSS เปรียบเสมือนเสื้อผ้าที่ทำให้เว็บไซต์ดูสวยงาม และ JavaScript คือสมองที่ทำให้เว็บไซต์ฉลาดและตอบสนองต่อผู้ใช้งาน

ความสัมพันธ์ระหว่าง HTML, CSS และ JavaScript:

• HTML สร้างโครงสร้างพื้นฐานของหน้าเว็บ
• CSS ตกแต่งและปรับแต่งรูปลักษณ์ขององค์ประกอบ HTML
• JavaScript เพิ่มการทำงานแบบโต้ตอบและการเปลี่ยนแปลงเนื้อหาแบบไดนามิก

ตัวอย่าง:

สมมติว่าเรามีปุ่ม HTML:

<button id="myButton">คลิกฉัน!</button>

เราสามารถใช้ CSS เพื่อเปลี่ยนสีพื้นหลังและสีตัวอักษรของปุ่ม:

#myButton {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

และเราสามารถใช้ JavaScript เพื่อแสดงข้อความเมื่อผู้ใช้คลิกปุ่ม:

document.getElementById("myButton").addEventListener("click", function() {
  alert("คุณคลิกปุ่ม!");
});

จากตัวอย่างนี้ คุณจะเห็นว่า HTML, CSS และ JavaScript ทำงานร่วมกันเพื่อให้ได้ผลลัพธ์ที่ต้องการ

สรุป

ในบทนี้ เราได้เรียนรู้ว่า HTML คืออะไร มีบทบาทอย่างไรในการสร้างเว็บไซต์ และทำงานร่วมกับ CSS และ JavaScript อย่างไร ในบทต่อๆ ไป เราจะเจาะลึกรายละเอียดเกี่ยวกับแท็ก HTML ต่างๆ และวิธีการใช้งานเพื่อสร้างโครงสร้างของหน้าเว็บ

สิ่งที่ควรจำ:

• HTML คือภาษา Markup ที่ใช้สร้างโครงสร้างของหน้าเว็บ
• HTML ใช้แท็กเพื่อระบุองค์ประกอบต่างๆ บนหน้าเว็บ
• HTML ทำงานร่วมกับ CSS และ JavaScript เพื่อสร้างเว็บไซต์ที่สวยงามและใช้งานได้

เตรียมตัวให้พร้อมสำหรับบทต่อไปที่เราจะเริ่มสำรวจโครงสร้างพื้นฐานของ HTML กัน!