HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาพิเศษที่ใช้สร้างเว็บเพจ เมื่อคุณเข้าชมเว็บไซต์ คอมพิวเตอร์จะอ่าน HTML เพื่อแสดงคำ รูปภาพ และลิงก์ต่างๆ ให้นึกถึง HTML ว่าเป็นส่วนประกอบสำคัญของเว็บไซต์ เช่นเดียวกับที่คุณใช้ชิ้นส่วนเลโก้สร้างบ้านหรือรถยนต์ เราก็ใช้แท็ก HTML เพื่อสร้างเว็บเพจเช่นกัน
HTML คือโค้ดที่บอกคอมพิวเตอร์ถึงวิธีการแสดงข้อความ รูปภาพ วิดีโอ และลิงก์บนเว็บเพจ เปรียบเสมือนการให้คำแนะนำกับเพื่อนที่กำลังวาดรูปให้คุณ HTML ใช้คำภายในวงเล็บเหลี่ยม ซึ่งเรียกว่า แท็ก เพื่อกำหนดจุดเริ่มต้นและจุดสิ้นสุดของบางส่วนของเว็บเพจ
ทุกเว็บไซต์ที่คุณเข้าชมล้วนใช้ HTML ในรูปแบบใดรูปแบบหนึ่ง หากไม่มี HTML คุณจะไม่มีหน้าเว็บให้ดู HTML ช่วยในการจัดระเบียบเนื้อหาและบอกคอมพิวเตอร์ว่าจะแสดงหน้าเว็บอย่างไร HTML เป็นสิ่งแรกที่เราเรียนรู้ในการพัฒนาเว็บ เพราะมันทำให้อินเทอร์เน็ตทำงานได้!
เอกสาร HTML มีโครงสร้างพิเศษ เริ่มต้นด้วยการประกาศที่เรียกว่า <code><!DOCTYPE html></code> ซึ่งบอกคอมพิวเตอร์ว่าหน้าเว็บนั้นใช้ HTML จากนั้นเอกสารจะถูกแบ่งออกเป็นสองส่วนหลัก ได้แก่ ส่วนหัว (head) และส่วนเนื้อหา (body)
เอกสาร HTML ที่เรียบง่ายมากมีลักษณะดังนี้:
<รหัส><!DOCTYPE html>
<html>
<หัวเรื่อง>
<title>หน้าเว็บแรกของฉัน</title>
</หัว>
<เนื้อหา>
<p>สวัสดีโลก!</p>
</body>
</html> </รหัส>
ในตัวอย่างนี้ ส่วน <head> ระบุชื่อของหน้า และส่วน <body> เป็นส่วนที่คุณใส่เนื้อหาที่ปรากฏบนหน้าจอ
HTML ใช้แท็กเพื่อระบุส่วนต่างๆ ของหน้าเว็บ แท็ก คือคำที่อยู่ในวงเล็บเหลี่ยม ตัวอย่างเช่น <code><p></code> จะบอกคอมพิวเตอร์ว่าสิ่งที่ตามมาคือย่อหน้า เมื่อเขียนย่อหน้าเสร็จแล้ว ให้ใช้แท็กปิด <code></p></code> เพื่อระบุจุดสิ้นสุด
องค์ประกอบ ใน HTML ประกอบด้วยแท็กเปิด เนื้อหา และแท็กปิด ตัวอย่างเช่น:
<code><p>นี่คือย่อหน้า</p></code>
แต่ละแท็กจะสั่งให้เว็บเบราว์เซอร์แสดงเนื้อหาอย่างไร
ใน HTML มีแท็กอยู่มากมาย แท็กที่นิยมใช้กันมากที่สุด ได้แก่:
แอตทริบิวต์จะให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML โดยจะเพิ่มลงในแท็กเปิดภายในวงเล็บเหลี่ยมของแท็ก แอตทริบิวต์ที่พบบ่อยที่สุดคือ src และ alt ที่ใช้ร่วมกับแท็ก image
ตัวอย่างเช่น หากต้องการเพิ่มรูปภาพ คุณอาจเขียนดังนี้:
<code><img src="picture.jpg" alt="รูปภาพสวยดี"></code>
ที่นี่ src จะบอกเบราว์เซอร์ว่าไฟล์รูปภาพอยู่ที่ใด และ alt จะให้คำอธิบายของรูปภาพหากไม่สามารถแสดงได้
เอกสาร HTML แบ่งออกเป็นสองส่วน:
ลิงก์ช่วยให้คุณสามารถข้ามจากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้ ใน HTML เราสร้างลิงก์โดยใช้แท็ก <a> แอตทริบิวต์ href ภายในแท็กจะบอกเบราว์เซอร์ถึงปลายทางของลิงก์
ตัวอย่างเช่น:
<code><a href="https://www.example.com">เยี่ยมชม Example.com</a></code>
เมื่อคุณคลิกลิงก์นี้เบราว์เซอร์ของคุณจะเปิดเว็บไซต์ example.com
รูปภาพทำให้เว็บเพจดูสดใสและน่าสนใจยิ่งขึ้น หากต้องการเพิ่มรูปภาพ ให้ใช้แท็ก <img> โปรดจำไว้ว่าแท็ก <img> ไม่มีแท็กปิด
วิธีการเพิ่มรูปภาพมีดังนี้:
<code><img src="sunflower.jpg" alt="ดอกทานตะวันสีสดใส"></code>
โค้ดนี้สั่งให้เบราว์เซอร์แสดงภาพดอกทานตะวัน แอตทริบิวต์ src จะชี้ไปยังตำแหน่งของภาพ และแอตทริบิวต์ alt จะให้คำอธิบายของภาพ
รายการช่วยจัดระเบียบข้อมูลให้อยู่ในรูปแบบที่เป็นระเบียบ รายการใน HTML มีสองประเภทหลัก:
นี่คือตัวอย่างของรายการที่ไม่ได้เรียงลำดับ:
<รหัส><ul>
<li>แอปเปิ้ล</li>
<li>กล้วย</li>
<li>เชอร์รี่</li>
</ul> </รหัส>
และนี่คือตัวอย่างของรายการสั่งซื้อ:
<รหัส><ol>
<li>อันดับแรก</li>
<li>ที่สอง</li>
<li>ที่สาม</li>
</ol> </รหัส>
ตารางช่วยแสดงข้อมูลเป็นแถวและคอลัมน์ มีประโยชน์เมื่อคุณต้องการเปรียบเทียบข้อมูลหรือแสดงรายการในตาราง
นี่คือตัวอย่างง่ายๆ ของตาราง HTML:
<code><table border="1">
<tr>
<th>ชื่อ</th>
อายุ
</tr>
<tr>
<td>อลิซ</td>
<td>10</td>
</tr>
</ตาราง> </รหัส>
ในตารางนี้ <tr> กำหนดแถวตาราง <th> ใช้สำหรับส่วนหัวตาราง (ข้อความตัวหนา) และ <td> ใช้สำหรับข้อมูลตาราง (เซลล์)
HTML ยังช่วยให้คุณเพิ่มมัลติมีเดีย เช่น เสียงและวิดีโอได้ด้วยแท็ก <audio> คุณสามารถใส่ไฟล์เสียงได้ และแท็ก <video> คุณยังสามารถฝังโปรแกรมเล่นวิดีโอลงในหน้าเว็บของคุณได้
นี่คือตัวอย่างของโค้ดฝังวิดีโอ:
<code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</วิดีโอ> </รหัส>
โค้ดนี้สร้างเครื่องเล่นวิดีโอพร้อมปุ่มสำหรับเล่น หยุดชั่วคราว หรือเปลี่ยนระดับเสียง แอตทริบิวต์ controls จะสั่งให้เบราว์เซอร์แสดงปุ่มเหล่านี้
ทุกเว็บไซต์บนอินเทอร์เน็ตสร้างขึ้นด้วย HTML ลองนึกภาพว่าคุณกำลังเยี่ยมชมเว็บไซต์ของโรงเรียน เว็บไซต์เกมสนุกๆ หรืออ่านเรื่องราวออนไลน์ HTML ทำงานอยู่เบื้องหลังเพื่อจัดเรียงข้อความ รูปภาพ และเนื้อหาอื่นๆ เพื่อให้คุณมองเห็นได้ชัดเจน
ตัวอย่างเช่น เมื่อคุณเห็นภาพตัวการ์ตูนที่คุณชื่นชอบออนไลน์หรือคลิกลิงก์เพื่ออ่านเพิ่มเติมเกี่ยวกับหัวข้อสนุกๆ HTML จะช่วยทำให้สิ่งนั้นทำงานได้
ลองมาดูโปรเจกต์ง่ายๆ กัน ลองนึกภาพว่าคุณต้องการสร้างเว็บเพจเล็กๆ เกี่ยวกับสัตว์ตัวโปรดของคุณ เช่น แมว คุณสามารถใส่ชื่อเรื่อง ย่อหน้าเกี่ยวกับแมว รูปภาพ หรือแม้แต่ลิงก์ไปยังเว็บไซต์ที่มีเกร็ดความรู้เกี่ยวกับแมวสนุกๆ ก็ได้
รหัส HTML ของคุณอาจมีลักษณะดังนี้:
<รหัส><!DOCTYPE html>
<html>
<หัวเรื่อง>
<title>สัตว์ที่ฉันชอบ</title>
</หัว>
<เนื้อหา>
<h1>เรื่องราวเกี่ยวกับแมว</h1>
<p>แมวเป็นสัตว์ที่ขี้เล่นและอ่อนโยน พวกมันชอบนอนและส่งเสียงคราง หลายคนชอบเลี้ยงแมวเป็นสัตว์เลี้ยง</p>
<img src="cat.jpg" alt="แมวน่ารัก">
<a href="https://www.catfacts.com">เรียนรู้เพิ่มเติมเกี่ยวกับแมว</a>
</body>
</html> </รหัส>
โครงการนี้ใช้หัวข้อ ย่อหน้า รูปภาพ และลิงก์ แสดงให้เห็นถึงวิธีการใช้ HTML เพื่อสร้างเว็บเพจที่สมบูรณ์ซึ่งมีหลายส่วน
ในขณะที่ HTML สร้างโครงสร้างของหน้าเว็บ ยังมีเครื่องมืออื่นๆ ที่ทำให้เว็บไซต์ดูและทำงานในรูปแบบที่สนุกสนาน
แม้ว่าในปัจจุบันเราจะเรียนรู้เกี่ยวกับ HTML แล้ว แต่การรู้เกี่ยวกับ CSS และ JavaScript ก็ช่วยให้เราเข้าใจได้ว่าเว็บไซต์สร้างขึ้นมาได้อย่างไร
ขณะที่คุณสำรวจ HTML คุณจะพบแท็กอื่นๆ อีกมากมาย ต่อไปนี้คือข้อมูลเพิ่มเติมที่ควรรู้:
แท็กเหล่านี้ช่วยให้คุณควบคุมวิธีการแสดงเนื้อหาบนเว็บเพจได้มากขึ้น
HTML มีการเปลี่ยนแปลงมากมายนับตั้งแต่ถูกสร้างขึ้นครั้งแรก มีการเพิ่มแท็กและฟีเจอร์ใหม่ๆ มากมายเมื่อเวลาผ่านไป HTML เวอร์ชันใหม่แต่ละเวอร์ชันช่วยให้การสร้างเว็บไซต์ที่ซับซ้อนและสวยงามเป็นเรื่องง่ายขึ้น ปัจจุบัน HTML ทำงานร่วมกับ CSS และ JavaScript เพื่อสร้างเว็บไซต์ที่ทันสมัย ใช้งานง่าย และดูดี
วิวัฒนาการนี้หมายความว่า HTML เป็นภาษาที่เรียนรู้ได้ง่ายและทรงพลังเพียงพอสำหรับการสร้างทุกอย่างตั้งแต่หน้าเว็บที่เรียบง่ายไปจนถึงแอปพลิเคชันเว็บที่ซับซ้อน
แม้ว่าการเรียนรู้ HTML จะเป็นเรื่องสนุก แต่การรักษาความปลอดภัยบนอินเทอร์เน็ตก็เป็นสิ่งสำคัญเสมอ เมื่อคุณเข้าชมเว็บไซต์หรือสำรวจเนื้อหาออนไลน์ อย่าลืมขอความช่วยเหลือจากผู้ใหญ่เสมอหากคุณไม่แน่ใจในบางสิ่ง ความปลอดภัยของคุณต้องมาก่อน และการเรียนรู้ HTML ควรเป็นประสบการณ์ที่สนุกสนานและปลอดภัยเสมอ
มาดูคำศัพท์สำคัญๆ ที่คุณได้เรียนรู้ในวันนี้กัน:
HTML ถูกใช้ในสถานการณ์จริงมากมาย ต่อไปนี้คือตัวอย่างบางส่วน:
ตัวอย่างเหล่านี้แสดงให้เห็นว่า HTML เป็นเครื่องมือที่มีประโยชน์อย่างมากในหลายส่วนของชีวิตประจำวัน
วันนี้เราได้เรียนรู้ว่า HTML ย่อมาจาก Hypertext Markup Language ซึ่งเป็นภาษาพื้นฐานที่ใช้ในการสร้างเว็บเพจ ประเด็นสำคัญที่ควรจำมีดังนี้
HTML คือรากฐานของทุกเว็บไซต์ที่คุณเห็นบนอินเทอร์เน็ต ด้วยองค์ประกอบพื้นฐานง่ายๆ เช่น แท็กและแอตทริบิวต์ คุณสามารถสร้างหน้าเว็บที่สนุกสนานและโต้ตอบได้ เมื่อคุณเรียนรู้ต่อไป คุณจะเห็นว่า HTML ช่วยทำให้หน้าเว็บมีชีวิตชีวาขึ้นได้อย่างไร ทำให้อินเทอร์เน็ตเป็นพื้นที่ที่มีประโยชน์และน่าตื่นเต้นสำหรับการสำรวจ
