Introduction to HTML

เรียน HTML เบื้องต้น

HTML ย่อมาจาก HyperText Markup Language ซึ่งใช้สำหรับสร้างโครงสร้างของเว็บไซต์

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

ตัวอย่างโครงสร้างพื้นฐานที่สำคัญใน HTML:


            <!DOCTYPE html>

            <html>

              <head>

                <title>หน้าเว็บตัวอย่าง</title>

              </head>

              <body>

                <h1>ยินดีต้อนรับ</h1>

                <p>เนื้อหาของเว็บไซต์</p>

              </body>

            </html>

2. การแสดงข้อความ

HTML มีแท็กสำหรับจัดการข้อความ เช่น:


            <h1>หัวข้อหลัก</h1>

            <p>ข้อความย่อหน้า</p>

            <strong>ข้อความเน้น</strong>

            <em>ข้อความเอียง</em>

3. การแสดงลิงก์

ลิงก์ถูกสร้างด้วยแท็ก <a>:


            <a href="https://www.google.com" target="_blank">ไปที่ Google</a>

4. การแสดงรูปภาพ

ใช้แท็ก <img> เพื่อแสดงรูปภาพ:


            <img src="https://via.placeholder.com/150" alt="ตัวอย่างรูปภาพ" width="150">

5. การสร้างรายการ

ตัวอย่างรายการแบบไม่เรียงลำดับและเรียงลำดับ:


            <ul>

              <li>รายการที่ 1</li>

              <li>รายการที่ 2</li>

            </ul>

            

            <ol>

              <li>ข้อที่ 1</li>

              <li>ข้อที่ 2</li>

            </ol>

6. การสร้างตาราง

ตัวอย่างตารางใน HTML:


            <table border="1">

              <tr>

                <th>หัวข้อ 1</th>

                <th>หัวข้อ 2</th>

              </tr>

              <tr>

                <td>ข้อมูล 1</td>

                <td>ข้อมูล 2</td>

              </tr>

            </table>

7. การสร้างฟอร์ม

ตัวอย่างฟอร์มรับข้อมูลผู้ใช้:


            <form action="#" method="POST">

              <label for="name">ชื่อ:</label>

              <input type="text" id="name" name="name" placeholder="ใส่ชื่อของคุณ">

              <button type="submit">ส่งข้อมูล</button>

            </form>

8. การเพิ่มสไตล์

การเพิ่ม CSS เพื่อเปลี่ยนสีพื้นหลัง:


            <style>

              body { background-color: lightblue; }

            </style>

คำอธิบายโครงสร้าง HTML

1. <!DOCTYPE html>

แท็กนี้ระบุว่าเอกสารเป็น HTML5 ช่วยให้เบราว์เซอร์แปลผลเนื้อหา HTML ได้ถูกต้อง


            <!DOCTYPE html>

2. <html> ... </html>

แท็ก <html> เป็นแท็กหลักที่ครอบโครงสร้างทั้งหมดของเอกสาร HTML


            <html>

              ...

            </html>

3. <head> ... </head>

ส่วนนี้ใช้สำหรับข้อมูลเมตา เช่น การตั้งค่าตัวอักษร, ชื่อหน้า, และไฟล์ CSS/JS


            <head>

              <meta charset="UTF-8">

              <meta name="viewport" content="width=device-width, initial-scale=1.0">

              <title>ชื่อหน้าเว็บ</title>

            </head>

4. <body> ... </body>

ส่วนนี้คือเนื้อหาหลักที่แสดงบนหน้าเว็บ เช่น ข้อความ รูปภาพ ลิงก์ และอื่นๆ


            <body>

              <h1>ยินดีต้อนรับ</h1>

              <p>นี่คือเนื้อหา</p>

            </body>

5. <meta charset="UTF-8">

กำหนดการเข้ารหัสตัวอักษรให้เป็น UTF-8 เพื่อรองรับภาษาไทยและภาษาอื่นๆ


            <meta charset="UTF-8">

6. <meta name="viewport">

ตั้งค่าหน้าจอให้เหมาะกับทุกอุปกรณ์ โดยใช้ width=device-width และ initial-scale=1.0


            <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <title> ... </title>

แสดงชื่อหน้าในแท็บของเบราว์เซอร์


            <title>ชื่อหน้าเว็บ</title>

8. <style> ... </style>

ใช้สำหรับกำหนด CSS ภายในเอกสาร


            <style>

              body { font-family: Arial, sans-serif; }

            </style>

9. </html>

ปิดแท็ก <html> เพื่อสิ้นสุดเอกสาร


            </html>

1. <!DOCTYPE html>

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

**ตัวอย่าง:**


            <!DOCTYPE html>

หากคุณไม่ระบุ <!DOCTYPE html> บางครั้งเบราว์เซอร์อาจเข้าสู่โหมดแสดงผลที่ผิดปกติ (quirks mode)

2. <html> ... </html>

แท็ก <html> เป็นโครงหลักของเอกสาร HTML ที่ใช้ครอบทุกส่วนในเอกสาร และสามารถระบุภาษาของเอกสารได้โดยใช้แอตทริบิวต์ lang (ในตัวอย่างนี้คือ lang="en")

**ตัวอย่าง:**


            <html lang="en">

              ... (เนื้อหาของเอกสาร) ...

            </html>

คำแนะนำ: ควรระบุภาษาเอกสารเสมอเพื่อให้เบราว์เซอร์และเครื่องมือช่วยเหลือ (เช่น Screen Readers) ทำงานได้อย่างถูกต้อง

3. <head> ... </head>

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

**ตัวอย่าง:**


            <head>

              <meta charset="UTF-8">

              <meta name="viewport" content="width=device-width, initial-scale=1.0">

              <title>ชื่อเว็บไซต์</title>

            </head>

4. <meta charset="UTF-8">

ใช้กำหนดการเข้ารหัสตัวอักษรในเอกสารเป็น UTF-8 ซึ่งรองรับการแสดงผลภาษาไทยและภาษาอื่นๆ ทั่วโลก การใช้การตั้งค่านี้ช่วยป้องกันปัญหาการแสดงผลตัวอักษรผิดเพี้ยน

**ตัวอย่าง:**


            <meta charset="UTF-8">

**คำแนะนำ:** ควรใส่แท็กนี้เสมอในส่วน <head> ของเอกสาร HTML

5. <meta name="viewport">

ใช้กำหนดวิธีการแสดงผลของเอกสารในอุปกรณ์พกพา เช่น สมาร์ทโฟน การตั้งค่า width=device-width หมายถึงกำหนดความกว้างของหน้าจอให้เท่ากับความกว้างของอุปกรณ์ และ initial-scale=1.0 หมายถึงกำหนดการซูมเริ่มต้นเป็น 100%

**ตัวอย่าง:**


            <meta name="viewport" content="width=device-width, initial-scale=1.0">

6. <title> ... </title>

ใช้กำหนดชื่อหน้าที่จะแสดงบนแท็บของเบราว์เซอร์หรือในหน้าผลการค้นหา

**ตัวอย่าง:**


            <title>เว็บไซต์ของฉัน</title>

7. <body> ... </body>

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

**ตัวอย่าง:**


            <body>

              <h1>ยินดีต้อนรับ</h1>

              <p>นี่คือเนื้อหาเว็บไซต์</p>

            </body>

8. </html>

ใช้ปิดแท็ก <html> เพื่อสิ้นสุดเอกสาร HTML

**ตัวอย่าง:**


            </html>

สรุป

การทำความเข้าใจโครงสร้าง HTML ตั้งแต่ <!DOCTYPE> ถึง </html> เป็นพื้นฐานสำคัญในการสร้างเว็บไซต์ โครงสร้างที่ชัดเจนและถูกต้องช่วยให้เบราว์เซอร์แสดงผลเว็บไซต์ได้อย่างมีประสิทธิภาพ