Skip to main content

แนะนำโลกของ HTML

css-responsive สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video

HTML คืออะไร ?

intro-1 HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์ที่ใช้สร้างหน้าเว็บออกมาในรูปแบบไฟล์ของ .html

จุดประสงค์ของ html เพื่อวางโครงสร้างของตัวหน้าเว็บออกมา ว่าจะให้มีลักษณะโครงหน้าตาประมาณไหน (เหมือนวางเสาหลักของบ้าน)

สร้างไฟล์ HTML

เราจะเริ่มต้นโดยการเปิด VS Code > Open folder แล้วเลือก Folder เปล่าสักอันออกมา

หลังจากนั้นให้ทุกคนสร้างไฟล์ index.html ใน folder นั้นและพิมพ์ "html:5" ออกมาเพื่อปูโครงสร้างของ html ทั้งหมดออกมา

ดูตัวอย่างตาม video ข้างล่างนี้ได้ (ถ้าทุกอย่างถูกต้อง จะได้ไฟล์ index.html พร้อมกับ โครงสร้างพื้นฐานของ html ออกมา)

intro-2

Basic Structure ของ HTML

intro-3

ปกติโครงสร้าง html ทั้งหมดจะคลุมด้วย tag ชื่อ html เอาไว้ สิ่งที่อยู่ภายใต้ tag html คือข้อมูลทั้งหมดของ file html

  • สัญลักษณ์ <!-- --> เป็นการบอกถึง comment code สิ่งที่อยู่ตรงกลางระหว่างนี้จะไม่แสดงออกไปบนหน้าจอ
<html>
<!-- สิ่งที่อยู่ภายในนี้ -->
<!-- comment code สิ่งที่อยู่ภายในนี้จะไม่แสดงออกมาให้ user เห็น -->
</html>

tag จะมีทั้ง 2 แบบคือ

  1. tag เปิดและ tag ปิด เช่น <body>เนื้อหาใน body</body>, <p>เนื้อหาใน paragraph</p>
  2. tag ที่เปิดและปิดในตัว เช่น <input type='text'>, <br>

ซึ่งการจะรู้ว่า tag นั้นเป็นแบบไหนสามารถเปิดเอกสาร html คู่กันได้ ขอแนะนำให้เปิดจาก w3school เนื่องจากได้รวบรวม html ไว้หมดแล้ว https://www.w3schools.com/css/default.asp

จากภาพด้านบน html จะประกอบไปด้วย 2 ส่วนใหญ่ๆ คือ

  1. tag head จะเป็นส่วนที่ user มองไม่เห็น ส่วนใหญ่จะใช้สำหรับกำหนด metadata (ค่าที่จะแนบเป็น config คู่กับ html), เปลี่ยน title, เปลี่ยน favicon หรือการ import script เข้ามา
<html>
<head>
<!-- ส่วนที่ user มองไม่เห็น -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> ... </body>
</html>
  1. tag body จะเป็นส่วนที่ user มองเห็นผ่าน browser ส่วนนี้จะเป็นส่วนแสดงผลหลักของ html ออกมาบนหน้าจอ
<html>
<head>...</head>
<body>
<!-- ส่วนนี้ user จะมองเห็น -->
Hello world
</body>
</html>

หากลองนำ code นี้ไปเปิดจริง (เปิดโดยการคลิกเปิดไฟล์ index.html ได้เลย มันจะนำพามาเปิดโชว์บน browser ได้)

intro-4