พื้นฐานของ HTML
ในบทความนี้ เราจะอธิบายเกี่ยวกับพื้นฐานของ HTML
นี่อธิบายแท็กหลัก เช่น การประกาศ DOCTYPE, <html>, <head> และแท็ก <body> นอกจากนี้ยังอธิบายแท็ก, แอตทริบิวต์, และอักขระพิเศษ
YouTube Video
พื้นฐานของ HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>ที่จุดเริ่มต้นของไฟล์ เราประกาศว่านี่คือเอกสาร HTML5 ซึ่งบ่งบอกว่ามันปฏิบัติตามกฎของ HTML5
-
<html>แท็ก
<html>เป็นองค์ประกอบนอกสุดในเอกสาร HTML ที่ครอบคลุมเนื้อหาทั้งหมด แต่ละไฟล์ HTML จะมีเพียงหนึ่งแท็ก<html>และแท็กอื่น ๆ ทั้งหมดจะถูกซ้อนอยู่ในแท็กนี้lang="en"ภายในแท็ก<html>เป็น attribute ที่แจ้งให้เบราว์เซอร์ทราบว่าเอกสารถูกเขียนเป็นภาษาอังกฤษ สิ่งนี้ช่วยแจ้งให้โปรแกรมผู้อ่านหน้าจอและเครื่องมือค้นหาทราบถึงภาษาของเอกสาร -
<head>แท็ก
<head>กำหนดข้อมูลเมตา (ข้อมูล) สำหรับหน้าเว็บ ซึ่งรวมถึงชื่อหน้า การเข้ารหัสตัวอักษร และการตั้งค่าการออกแบบที่ตอบสนอง การออกแบบที่ตอบสนองหมายถึงวิธีการที่ออกแบบสำหรับเว็บไซต์หรือแอปเพื่อปรับและแสดงผลได้ดีบนอุปกรณ์และขนาดหน้าจอที่หลากหลาย. สิ่งนี้ช่วยให้ผู้ใช้สามารถดูเนื้อหาได้สะดวกบนอุปกรณ์ต่าง ๆ เช่น สมาร์ทโฟน, แท็บเล็ต, และเดสก์ท็อป.<meta charset="UTF-8">กำหนดการเข้ารหัสอักขระของเอกสารเป็น UTF-8<meta name="viewport" content="width=device-width, initial-scale=1.0">เป็นการตั้งค่าที่ปรับการแสดงผลให้เหมาะสมกับอุปกรณ์มือถือ หน้าจะปรับให้พอดีกับความกว้างของหน้าจออุปกรณ์<title>แทนชื่อหน้าที่แสดงในแท็บเบราว์เซอร์ ในตัวอย่างนี้ ตั้งชื่อว่า 'พื้นฐานของ HTML' -
<body>แท็ก
<body>ประกอบด้วยส่วนที่แสดงเนื้อหาแก่ผู้ใช้ ภายในแท็กนี้ จะเขียนข้อความ รูปภาพ ลิงก์ เป็นต้น -
<main>แท็ก
<main>แทนเนื้อหาหลักของหน้าเว็บ ซึ่งรวมถึงหัวข้อและย่อหน้า -
<h1>แท็ก
<h1>แทนหัวข้อที่สำคัญที่สุดบนหน้าเว็บ โดยทั่วไปจะใช้แท็ก<main>และ<h1>เพียงครั้งเดียวในเอกสาร -
<p>แท็ก
<p>แทนย่อหน้า -
<!-- Comment -->คุณสามารถเขียนคอมเมนต์ใน HTML ในรูปแบบนี้ เนื่องจาก HTML ฝั่งลูกค้าสามารถถูกตรวจสอบโดยใครก็ตาม อย่าใส่ข้อมูลสำคัญ เช่น รหัสผ่านหรือ API keys ในคอมเมนต์
HTML มีแท็กมากมาย แต่ให้ใส่ใจไปที่ประเด็นต่อไปนี้ ไฟล์ HTML ประกอบด้วยคำประกาศ DOCTYPE และแท็ก <html> หนึ่งแท็ก แท็ก <html> ประกอบไปด้วยแท็ก <head> หนึ่งแท็กและแท็ก <body> หนึ่งแท็ก ใน HTML แท็กทั้งหมดจะถูกบรรจุภายในแท็ก <html> แสดงโครงสร้างของข้อความผ่านความสัมพันธ์ระหว่างแท็กแม่ ลูก และพี่น้อง คล้ายกับโครงสร้างต้นไม้ เมื่อเขียน HTML ควรเน้นไปที่โครงสร้างของเอกสารด้วย
แท็กและแอตทริบิวต์
ต่อไปเรามาดูแท็กและแอตทริบิวต์ของ HTML กัน
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->แท็กจะถูกล้อมรอบด้วยวงเล็บมุม (<, >) และโดยทั่วไปจะประกอบด้วยคู่ของแท็กเปิดและแท็กปิด อย่างไรก็ตาม ยังมีแท็กเดี่ยว เช่น แท็ก <meta> และแท็ก <img> ซึ่งไม่สามารถมีเนื้อหา แท็กเดี่ยวไม่จำเป็นต้องมีแท็กปิด
แท็กสามารถมีแอตทริบิวต์ซึ่งให้ข้อมูลเพิ่มเติมกับแท็ก แอตทริบิวต์จะเขียนภายในแท็กเปิดในรูปแบบ attributeName="value"
ที่นี่ <div> หมายถึงแท็ก และ <div>Content</div> หมายถึงองค์ประกอบ
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>แอตทริบิวต์ทั่วไปใน HTML รวมถึง id, class, และ style แอตทริบิวต์ id ใช้เพื่อให้ตัวระบุที่ไม่ซ้ำกันกับแต่ละองค์ประกอบ และสามารถมีองค์ประกอบที่มี id เดียวกันได้เพียงหนึ่งเดียวในหน้า มันมีประโยชน์เมื่อทำการจัดการองค์ประกอบที่เฉพาะเจาะจงด้วย JavaScript หรือ CSS แอตทริบิวต์ class ช่วยให้คุณสามารถกลุ่มองค์ประกอบหลายๆ ตัวให้กับ CSS หรือ JavaScript ได้ด้วยการกำหนดชื่อคลาส คุณสามารถกำหนดคลาสเดียวกันให้กับองค์ประกอบหลายๆ ตัว ซึ่งช่วยให้สามารถแชร์รูปแบบได้ แอตทริบิวต์ style ใช้เพื่อระบุรูปแบบ CSS แบบอินไลน์ให้กับองค์ประกอบ ปกติแล้ว สไตล์จะถูกกำหนดในไฟล์สไตล์ภายนอกหรือภายในแท็ก <style> แต่แอตทริบิวต์นี้ใช้เมื่อคุณต้องการระบุสไตล์โดยตรงให้กับองค์ประกอบเฉพาะ
อักขระพิเศษใน HTML
ต่อไปเรามาดูตัวอักษรพิเศษใน HTML กัน
ใน HTML จะมีตัวอักษรพิเศษที่ใช้แสดงสัญลักษณ์และอักขระเฉพาะบางตัว ตัวอักษรพิเศษเหล่านี้เรียกว่าเอนทิตี อักขระพิเศษเริ่มต้นด้วย & (แอมเพอร์แซนด์) ตามด้วยชื่อหรือเลข และจบด้วย ; (เซมิโคลอน)
อักขระพิเศษใน HTML
นี่คืออักขระพิเศษทั่วไปบางส่วน
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
ตัวอย่างการใช้อักขระพิเศษใน HTML
โดยเฉพาะวงเล็บมุม (<, >) และเครื่องหมายคำพูดคู่ที่จำเป็นต้องใช้ให้ถูกต้องใน HTML
เครื่องหมายวงเล็บมุม (<, >) และเครื่องหมายคำพูดคู่ควรแสดงเป็นอักขระพิเศษใน HTML ดังที่แสดงด้านล่าง
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
เวอร์ชันของ HTML
มาดูเวอร์ชันของ HTML กันที่นี่
เวอร์ชันของ HTML ได้พัฒนาขึ้นเพื่อกำหนดโครงสร้างและฟังก์ชันของหน้าเว็บ นี่คือเวอร์ชันหลัก ๆ:
-
HTML 1.0 (1993)
เวอร์ชัน HTML แรกมีเพียงฟีเจอร์พื้นฐานของการจัดรูปแบบเท่านั้น มันได้กำหนดองค์ประกอบเช่น ลิงก์ หัวเรื่อง ย่อหน้า และรายการ
-
HTML 2.0 (1995)
เป็นเวอร์ชันมาตรฐานแรกที่เพิ่มองค์ประกอบมากขึ้น รวมถึงการรองรับฟอร์มและตาราง
-
HTML 3.2 (1997)
เพิ่มคุณสมบัติเลย์เอาต์เพิ่มเติม ให้สามารถฝังองค์ประกอบสไตล์และสคริปต์ได้ นอกจากนี้ ยังมีการใช้เลย์เอาต์โดยใช้แท็ก
<table>ซึ่งเป็นที่แพร่หลาย -
HTML 4.01 (1999)
การแยกโครงสร้างและการนำเสนอมีการพัฒนาขึ้น และได้มีการแนะนำ CSS แนะนำให้สร้างเว็บไซต์ที่สอดคล้องกับมาตรฐาน ยิ่งไปกว่านั้น การทำให้เป็นสากลและการเข้าถึงเอกสารได้ถูกปรับปรุงให้ดีขึ้น
-
HTML5 (2014)
เวอร์ชันหลักล่าสุดที่เปิดตัวการรองรับวิดีโอและเสียง แคนวาส พื้นที่จัดเก็บในเครื่อง ระบบระบุตำแหน่งทางภูมิศาสตร์ และ API ใหม่ ๆ อื่น ๆ รองรับการใช้งานบนมือถือ ทำให้สามารถพัฒนาแอปพลิเคชันเว็บที่โต้ตอบได้มากขึ้น
HTML5.2 เป็นเวอร์ชันของ HTML ที่แนะนำในปี 2017 และเป็นเวอร์ชันที่ปรับปรุงจาก HTML5 นับตั้งแต่ HTML5.2 ได้รับการอัปเดตอย่างต่อเนื่องเป็น HTML Living Standard แทนที่จะมีหมายเลขเวอร์ชันที่ตายตัว
HTML ได้พัฒนาผ่านเวอร์ชันเหล่านี้ไปเป็นเทคโนโลยีเว็บที่ยืดหยุ่นและทรงพลังยิ่งขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย