Englishภาษา HTML เบื้องต้น
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาพื้นฐานที่ใช้สร้างโครงสร้างและเนื้อหาของเว็บเพจ เปรียบเสมือนโครงกระดูกและเนื้อหนังที่ทำให้เว็บเพจมีชีวิตชีวา บทความนี้มุ่งเน้นนำเสนอพื้นฐานของ HTML ในรูปแบบที่เข้าใจง่าย เหมาะสำหรับผู้เริ่มต้น
โครงสร้างพื้นฐานของ HTML
เอกสาร HTML เปรียบเสมือนหนังสือ ประกอบไปด้วย 2 องค์ประกอบหลัก ดังนี้
- ส่วนหัว (Head): เปรียบเสมือนปกหนังสือ ประกอบไปด้วยข้อมูลเกี่ยวกับเว็บเพจ เช่น ชื่อเรื่อง คำอธิบาย และข้อมูลเมตา เช่น ภาษาที่ใช้
- ส่วนเนื้อหา (Body): เปรียบเสมือนเนื้อหาในหนังสือ ประกอบไปด้วยเนื้อหาหลักของเว็บเพจ เช่น ข้อความ รูปภาพ วิดีโอ และลิงก์
ตัวอย่างโค้ด HTML
- HTML
- <!DOCTYPE html>
- <html lang=”th”>
- <head>
- <meta charset=”UTF-8″>
- <title>บทความ HTML เบื้องต้น</title>
- </head>
- <body>
- <h1>บทความ HTML เบื้องต้น</h1>
- <p>
- HyperText Markup Language (HTML) เป็นภาษาที่ใช้สร้างโครงสร้างและเนื้อหาของเว็บเพจ
- </p>
- <p>
- บทความนี้มุ่งหวังที่จะนำเสนอความรู้พื้นฐานเกี่ยวกับ HTML
- </p>
- </body>
- </html>
Tag HTML ทั่วไป
- DOCTYPE html: ประกาศประเภทของเอกสารว่าเป็น HTML
- html: แท็กเริ่มต้นและสิ้นสุดของเอกสาร HTML
- head: แท็กสำหรับข้อมูลเกี่ยวกับเว็บเพจ
- title: แท็กสำหรับชื่อเรื่องของเว็บเพจ
- meta: แท็กสำหรับข้อมูลเมตา เช่น charset
- body: แท็กสำหรับเนื้อหาหลักของเว็บเพจ
- h1: แท็กสำหรับหัวเรื่องระดับ 1
- p: แท็กสำหรับย่อหน้า
- a: แท็กสำหรับลิงก์
การจัดรูปแบบข้อความ
สามารถใช้ Tag HTML เพิ่มเติมเพื่อจัดรูปแบบข้อความ ดังนี้
- b: แท็กสำหรับข้อความตัวหนา เปรียบเสมือนการเน้นข้อความด้วยตัวอักษรหนา
- i: แท็กสำหรับข้อความตัวเอียง เปรียบเสมือนการเน้นข้อความด้วยตัวอักษรเอียง
- u: แท็กสำหรับข้อความขีดเส้นใต้ เปรียบเสมือนการเน้นข้อความด้วยขีดเส้นใต้
- br: แท็กสำหรับขึ้นบรรทัดใหม่ เปรียบเสมือนการขึ้นบรรทัดใหม่ในบทความ
การแทรกภาพ
สามารถใช้ Tag HTML img เพื่อแทรกภาพลงในเว็บเพจ
HTML
<img src=”image.jpg” alt=”ภาพตัวอย่าง”>
การสร้างลิงก์
สามารถใช้ Tag HTML a เพื่อสร้างลิงก์ไปยังเว็บเพจอื่น
HTML
<a href=”https://www.example.com”>เว็บไซต์ตัวอย่าง</a>
สรุป HTML เป็นภาษาพื้นฐานที่ใช้สร้างเว็บเพจ บทความนี้ได้นำเสนอโครงสร้างพื้นฐานของ HTML Tag ทั่วไป และวิธีการจัดรูปแบบข้อความ แทรกภาพ และสร้างลิงก์
