เริ่มต้นเขียน HTML: โครงสร้างพื้นฐานและแท็กที่จำเป็น

เริ่มต้นเขียน HTML: โครงสร้างพื้นฐานและแท็กที่จำเป็น

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

ไม่ต้องกังวลนะครับ ถึงแม้ว่าคุณจะไม่มีพื้นฐานมาก่อนเลย ผมจะค่อยๆ อธิบายไปทีละขั้นตอน รับรองว่าคุณจะสามารถสร้างเว็บไซต์ง่ายๆ ได้อย่างแน่นอน!

HTML คืออะไร?

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

เครื่องมือที่ต้องใช้

ก่อนที่เราจะเริ่มเขียน HTML เราต้องมีเครื่องมือที่จำเป็นก่อนครับ ซึ่งก็คือ:

• Text Editor: โปรแกรมสำหรับเขียนโค้ด HTML ตัวอย่างเช่น VS Code (Visual Studio Code), Sublime Text, Notepad++ หรือแม้แต่ Notepad ที่มาพร้อมกับ Windows ก็ได้ครับ
• Web Browser: โปรแกรมสำหรับเปิดและแสดงผลหน้าเว็บไซต์ที่เราเขียน ตัวอย่างเช่น Google Chrome, Mozilla Firefox, Safari หรือ Microsoft Edge

ในบทเรียนนี้ ผมจะใช้ VS Code เป็น Text Editor นะครับ เพราะเป็นโปรแกรมที่ใช้งานง่ายและมีฟังก์ชันอำนวยความสะดวกมากมาย แต่คุณสามารถเลือกใช้โปรแกรมที่คุณถนัดได้เลยครับ

สร้างไฟล์ HTML แรกของเรา

เปิดโปรแกรม Text Editor ของคุณขึ้นมา แล้วสร้างไฟล์ใหม่ครับ จากนั้นให้บันทึกไฟล์เป็นชื่ออะไรก็ได้ แต่ต้องมีนามสกุล .html เสมอ ตัวอย่างเช่น index.html หรือ mywebsite.html

ทีนี้เราก็พร้อมที่จะเขียนโค้ด HTML แล้วครับ!

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

ทุกไฟล์ HTML จะต้องมีโครงสร้างพื้นฐานที่จำเป็นดังนี้ครับ:

<!DOCTYPE html>
<html>
<head>
  <title>ชื่อเว็บไซต์ของคุณ</title>
</head>
<body>
  <!-- เนื้อหาเว็บไซต์ของคุณจะอยู่ตรงนี้ -->
</body>
</html>

มาดูกันทีละส่วนนะครับ:

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

ลองคัดลอกโค้ดข้างบนไปใส่ในไฟล์ .html ที่เราสร้างไว้ แล้วบันทึก จากนั้นลองเปิดไฟล์นั้นด้วย Browser ของคุณ คุณจะเห็นหน้าเว็บเปล่าๆ ที่มีชื่อเว็บไซต์ที่คุณตั้งไว้บน Tab ครับ

แท็ก HTML ที่จำเป็น

ทีนี้เราจะมาเรียนรู้แท็ก HTML ที่ใช้บ่อยๆ และจำเป็นสำหรับการสร้างเว็บไซต์กันครับ

หัวข้อ (Headings): <h1> ถึง <h6>

แท็ก <h1> ถึง <h6> ใช้สำหรับสร้างหัวข้อ (heading) ในหน้าเว็บ โดย <h1> คือหัวข้อหลัก (largest heading) และ <h6> คือหัวข้อย่อย (smallest heading)

<h1>หัวข้อหลักของเว็บไซต์</h1>
<h2>หัวข้อรอง</h2>
<h3>หัวข้อย่อย</h3>

ย่อหน้า (Paragraph): <p>

แท็ก <p> ใช้สำหรับสร้างย่อหน้า (paragraph) ในหน้าเว็บ

<p>นี่คือย่อหน้าแรกของเว็บไซต์</p>
<p>และนี่คือย่อหน้าที่สอง</p>

ลิงก์ (Link): <a>

แท็ก <a> (anchor) ใช้สำหรับสร้างลิงก์ (link) ไปยังหน้าเว็บอื่น หรือไปยังส่วนต่างๆ ในหน้าเว็บเดียวกัน

<a href="https://www.google.com">ไปยัง Google</a>

href คือ Attribute (คุณสมบัติ) ของแท็ก <a> ที่ใช้กำหนด URL (ที่อยู่) ของหน้าเว็บที่เราต้องการลิงก์ไป

รูปภาพ (Image): <img>

แท็ก <img> ใช้สำหรับแทรกรูปภาพ (image) ลงในหน้าเว็บ

<img src="image.jpg" alt="รูปภาพ">

src คือ Attribute ที่ใช้กำหนด URL ของรูปภาพ และ alt คือ Attribute ที่ใช้กำหนดข้อความสำรอง (alternative text) ที่จะแสดงเมื่อรูปภาพไม่สามารถโหลดได้

Meta Data: <meta>

แท็ก <meta> ใช้สำหรับใส่ข้อมูลเกี่ยวกับเว็บไซต์ที่ไม่แสดงผลบนหน้าเว็บโดยตรง แต่มีประโยชน์สำหรับ Browser และ Search Engine เช่น การกำหนด character set หรือ keyword ที่เกี่ยวข้องกับเว็บไซต์

<meta charset="UTF-8">
<meta name="description" content="คำอธิบายเว็บไซต์ของคุณ">
<meta name="keywords" content="คำหลัก, ที่เกี่ยวข้อง, กับเว็บไซต์">

charset="UTF-8" กำหนด character set เป็น UTF-8 ซึ่งรองรับภาษาไทยและภาษาอื่นๆ ทั่วโลก

เชื่อมต่อ CSS: <link>

แท็ก <link> ใช้สำหรับเชื่อมต่อไฟล์ CSS (Cascading Style Sheets) เพื่อใช้ในการตกแต่งหน้าเว็บ (เราจะเรียนรู้เรื่อง CSS ในบทต่อไป)

<link rel="stylesheet" href="style.css">

rel="stylesheet" บอก Browser ว่าไฟล์ที่เราเชื่อมต่อเป็นไฟล์ CSS และ href คือ Attribute ที่ใช้กำหนด URL ของไฟล์ CSS

ตัวอย่างเว็บไซต์ง่ายๆ

ลองนำแท็ก HTML ที่เราเรียนรู้มาสร้างเว็บไซต์ง่ายๆ กันครับ

<!DOCTYPE html>
<html>
<head>
  <title>เว็บไซต์ของฉัน</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน!</h1>
  <p>เว็บไซต์นี้สร้างขึ้นเพื่อการเรียนรู้ HTML</p>
  <p>คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ HTML ได้ที่ <a href="https://www.w3schools.com/html/">W3Schools</a></p>
  <img src="myimage.jpg" alt="รูปภาพเว็บไซต์ของฉัน">
</body>
</html>

อย่าลืมสร้างไฟล์รูปภาพชื่อ myimage.jpg (หรือเปลี่ยนชื่อในโค้ด) แล้ววางไว้ในโฟลเดอร์เดียวกับไฟล์ HTML นะครับ

บันทึกไฟล์แล้วเปิดด้วย Browser คุณจะเห็นเว็บไซต์ง่ายๆ ที่มีหัวข้อ เนื้อหา ลิงก์ และรูปภาพ!

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ HTML, โครงสร้างพื้นฐานของ HTML และแท็ก HTML ที่จำเป็นสำหรับการสร้างเว็บไซต์ หวังว่าคุณจะสนุกกับการเขียน HTML นะครับ!

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