HTML หรือ HyperText Markup Language เป็นภาษาที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML เป็นภาษาพื้นฐานที่สำคัญที่สุดในการพัฒนาเว็บไซต์ ทำให้เราสามารถแสดงเนื้อหาข้อความ รูปภาพ ลิงก์ และสื่อต่างๆ บนเว็บเบราว์เซอร์ได้อย่างถูกต้องและเป็นระเบียบ
ในบทความนี้เรา KNmasters จะมาทำความรู้จักกับ HTML ว่าคืออะไร? มีส่วนประกอบอะไรบ้าง? และทำงานอย่างไร?
หัวข้อ
HTML คืออะไร?
HyperText Markup Language หรือ HTML คือภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML ถูกพัฒนาโดย Tim Berners-Lee ในปี ค.ศ.1991 เพื่อใช้ในการแชร์ข้อมูลระหว่างนักวิจัยผ่านอินเทอร์เน็ต และได้พัฒนามาอย่างต่อเนื่องจนถึงปัจจุบัน HTML ใช้แท็ก (Tags) ในการระบุส่วนต่างๆ ของเนื้อหา เช่น หัวข้อ ย่อหน้า ลิงก์ รูปภาพ และสื่อต่างๆ
ส่วนประกอบของ HTML
HTML ประกอบด้วยส่วนประกอบหลักดังนี้
- แท็ก (Tags) : แท็กเป็นเครื่องหมายที่ใช้ในการระบุส่วนต่างๆ ของเนื้อหา แท็กมักจะประกอบด้วยชื่อแท็กในวงเล็บเหลี่ยม เช่น
<html>,<head>,<body>,<h1>,<p> - องค์ประกอบ (Elements) : องค์ประกอบประกอบด้วยแท็กเปิดและแท็กปิดที่ครอบคลุมเนื้อหาหรือข้อความ ตัวอย่างเช่น
<p>นี่คือย่อหน้า</p> - แอตทริบิวต์ (Attributes) : แอตทริบิวต์เป็นข้อมูลเพิ่มเติมที่ใช้ในการระบุคุณสมบัติของแท็ก เช่น
id,class,src,hrefแอตทริบิวต์จะอยู่ภายในแท็กเปิด ตัวอย่างเช่น<a href="https://www.example.com">ลิงก์ไปยัง Example</a>
โครงสร้างพื้นฐานของ HTML
โครงสร้างพื้นฐานของเอกสาร HTML ประกอบด้วยส่วนประกอบหลักดังนี้
<!DOCTYPE html>- ประกาศชนิดของเอกสาร HTML
<html>- แท็กหลักที่ครอบคลุมเอกสาร HTML ทั้งหมด
<head>- ส่วนที่ใช้ในการกำหนดข้อมูลเกี่ยวกับเอกสาร เช่น เมตาดาต้า ลิงก์ไปยังไฟล์ CSS และสคริปต์
<title>- กำหนดชื่อเรื่องของเอกสารที่จะปรากฏในแท็บของเว็บเบราว์เซอร์
<body>- ส่วนที่ใช้ในการแสดงเนื้อหาหลักของเอกสาร เช่น ข้อความ รูปภาพ ลิงก์ และสื่อต่างๆ
ตัวอย่างโครงสร้างพื้นฐานของเอกสาร HTML
<!DOCTYPE html>
<html>
<head>
<title>นี่คือชื่อเรื่องของเอกสาร</title>
</head>
<body>
<h1>นี่คือหัวข้อหลัก</h1>
<p>นี่คือย่อหน้าแรกของเนื้อหา</p>
<a href="https://www.example.com">ลิงก์ไปยัง Example</a>
</body>
</html>แท็ก HTML ที่สำคัญ
นี่คือบางส่วนของแท็ก HTML ที่สำคัญและใช้งานบ่อย
<h1>ถึง<h6>- แท็กหัวข้อ ใช้ในการกำหนดหัวข้อของเนื้อหา โดย
<h1>เป็นหัวข้อที่สำคัญที่สุดและ<h6>เป็นหัวข้อที่สำคัญน้อยที่สุด
- แท็กหัวข้อ ใช้ในการกำหนดหัวข้อของเนื้อหา โดย
<p>- แท็กย่อหน้า ใช้ในการกำหนดย่อหน้าของเนื้อหา
<a>- แท็กลิงก์ ใช้ในการสร้างลิงก์ไปยังหน้าเว็บหรือที่อยู่อื่นๆ แอตทริบิวต์
hrefใช้ในการระบุที่อยู่ของลิงก์
- แท็กลิงก์ ใช้ในการสร้างลิงก์ไปยังหน้าเว็บหรือที่อยู่อื่นๆ แอตทริบิวต์
<img>- แท็กรูปภาพ ใช้ในการแสดงรูปภาพ แอตทริบิวต์
srcใช้ในการระบุที่อยู่ของไฟล์รูปภาพ และแอตทริบิวต์altใช้ในการกำหนดข้อความแสดงแทนรูปภาพ
- แท็กรูปภาพ ใช้ในการแสดงรูปภาพ แอตทริบิวต์
<ul>,<ol>,<li>- แท็กรายการไม่เรียงลำดับ (
<ul>) และรายการเรียงลำดับ (<ol>) ใช้ในการสร้างรายการ โดย<li>ใช้ในการกำหนดแต่ละรายการในรายการ
- แท็กรายการไม่เรียงลำดับ (
<div>และ<span>- แท็ก
<div>ใช้ในการจัดกลุ่มเนื้อหาบล็อก และแท็ก<span>ใช้ในการจัดกลุ่มเนื้อหาภายในบรรทัด
- แท็ก
การใช้งาน CSS และ JavaScript ร่วมกับ HTML
HTML สามารถใช้งานร่วมกับ CSS (Cascading Style Sheets) และ JavaScript เพื่อเพิ่มความสวยงามและความสามารถในการโต้ตอบของเว็บเพจได้
1. CSS
CSS ใช้ในการกำหนดรูปแบบการแสดงผลของเนื้อหา HTML เช่น สี ขนาด ฟอนต์ และการจัดวาง ตัวอย่างการใช้งาน CSS ในเอกสาร HTML
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>2. JavaScript
JavaScript ใช้ในการเพิ่มความสามารถในการโต้ตอบของเว็บเพจ เช่น การตรวจสอบข้อมูลแบบฟอร์ม การเปลี่ยนแปลงเนื้อหาแบบไดนามิก และการโต้ตอบกับผู้ใช้ ตัวอย่างการใช้งาน JavaScript ในเอกสาร HTML
<script>
function showAlert() {
alert("Hello, World!");
}
</script>
<button onclick="showAlert()">Click me</button>สรุป
HTML (HyperText Markup Language) เป็นภาษามาร์กอัปที่ใช้ในการสร้างและจัดโครงสร้างเนื้อหาบนเว็บเพจ HTML ประกอบด้วยแท็ก องค์ประกอบ และแอตทริบิวต์ที่ใช้ในการกำหนดส่วนต่างๆ ของเนื้อหา HTML เป็นภาษาพื้นฐานที่สำคัญที่สุดในการพัฒนาเว็บไซต์ และสามารถใช้งานร่วมกับ CSS และ JavaScript เพื่อเพิ่มความสวยงามและความสามารถในการโต้ตอบของเว็บเพจได้ การเข้าใจและใช้งาน HTML อย่างถูกต้องเป็นสิ่งสำคัญสำหรับนักพัฒนาเว็บทุกคน
แหล่งอ้างอิง
อย่ารอช้า! ให้ KNmasters ดูแลธุรกิจของคุณวันนี้!
หากคุณต้องการข้อมูลเพิ่มเติมหรืออยากเริ่มใช้บริการกับ KNmasters เราพร้อมช่วยให้ธุรกิจของคุณเติบโตด้วยกลยุทธ์การตลาดออนไลน์ครบวงจร
- Facebook: KNmasters
- LINE: KNmasters
- Youtube: KNmasters
- Instagram: knmasters.official
- Tiktok: KNmasters.official
- Twitter: KNmasters Official
- เว็บไซต์: www.knmasters.com
- แผนที่: KNmasters
