HTML คืออะไร?
HTML ย่อมาจากH yper T ext M arkup L anguage
HTML เป็น ภาษา มาร์กอัปมาตรฐานสำหรับหน้าเว็บ
องค์ประกอบ HTML เป็นส่วนประกอบสำคัญของหน้า HTML
องค์ประกอบ HTML แสดงโดย<> tags
องค์ประกอบ HTML
องค์ประกอบ HTML คือ แท็ก เริ่มต้นและแท็ ก สิ้นสุด ที่ มีเนื้อหาอยู่ระหว่าง:
<h1>นี่คือหัวเรื่อง</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
แอตทริบิวต์ HTML
- องค์ประกอบ HTML สามารถมีแอตทริบิวต์
- แอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- แอตทริบิวต์มาในคู่ชื่อ/ค่าเช่นcharset="utf-8"
เอกสาร HTML อย่างง่าย
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
ตัวอย่างที่อธิบาย
องค์ประกอบ HTML เป็นส่วนประกอบสำคัญของหน้า HTML
- การ
<!DOCTYPE html>ประกาศกำหนดเอกสารนี้เป็น HTML5 - องค์ประกอบ
<html>นี้เป็นองค์ประกอบรากของหน้า HTML - แอตทริบิวต์
langกำหนดภาษาของเอกสาร - องค์ประกอบ
<meta>ประกอบด้วยข้อมูลเมตาเกี่ยวกับเอกสาร - แอตทริบิวต์
charsetกำหนดชุดอักขระที่ใช้ในเอกสาร - องค์ประกอบ
<title>ระบุชื่อเรื่องสำหรับเอกสาร - องค์ประกอบ
<body>ประกอบด้วยเนื้อหาของหน้าที่มองเห็นได้ - องค์ประกอบ
<h1>กำหนดหัวเรื่องขนาดใหญ่ - องค์ประกอบ
<p>กำหนดย่อหน้า
เอกสาร HTML
เอกสาร HTML ทั้งหมดต้องขึ้นต้นด้วยการประกาศประเภทเอกสาร<!DOCTYPE html>:
เอกสาร HTML เองเริ่มต้นด้วย<html>และลงท้ายด้วย</html>.
ส่วนที่มองเห็นได้ของเอกสาร HTML อยู่ระหว่าง<body>และ</body>
โครงสร้างเอกสาร HTML
ด้านล่างนี้คือการแสดงภาพของเอกสาร HTML (หน้า HTML):
หมายเหตุ:เฉพาะเนื้อหาภายในส่วน <body> (พื้นที่สีขาวด้านบน) เท่านั้นที่จะแสดงในเบราว์เซอร์
ส่วนหัว HTML
ส่วนหัว HTML ถูกกำหนดด้วยแท็<h1>ก<h6>
<h1>กำหนดหัวเรื่องที่สำคัญที่สุด <h6>กำหนดหัวเรื่องที่สำคัญน้อยที่สุด:
ตัวอย่าง
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
ย่อหน้า HTML
ย่อหน้า HTML ถูกกำหนดด้วย<p>แท็ก:
ตัวอย่าง
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
ลิงค์ HTML
ลิงก์ HTML ถูกกำหนดด้วย<a>แท็ก:
ตัวอย่าง
<a href="https://www.w3schools.com">This is a link</a>
ปลายทางของลิงก์ระบุไว้ในhrefแอตทริบิวต์
รูปภาพ HTML
ภาพ HTML ถูกกำหนดด้วย<img>แท็ก
ไฟล์ต้นฉบับ ( src) ข้อความแสดงแทน ( alt),
widthและheightจัดเตรียมเป็นแอตทริบิวต์:
ตัวอย่าง
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
ปุ่ม HTML
ปุ่ม HTML ถูกกำหนดด้วย<button>แท็ก:
ตัวอย่าง
<button>Click me</button>
รายการ HTML
รายการ HTML ถูกกำหนดด้วย แท็ก (รายการที่ <ul>ไม่เรียงลำดับ/สัญลักษณ์แสดงหัวข้อย่อย) หรือ
<ol>(รายการลำดับ/หมายเลข) ตามด้วย<li>
แท็ก (รายการในรายการ):
ตัวอย่าง
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ตาราง HTML
ตาราง HTML ถูกกำหนดด้วย<table>แท็ก
แถวของตารางถูกกำหนดด้วย<tr>แท็ก
ส่วนหัวของตารางถูกกำหนดด้วย<th>แท็ก (ตัวหนาและกึ่งกลางตามค่าเริ่มต้น)
เซลล์ตาราง (ข้อมูล) ถูกกำหนดด้วย<td>แท็ก
ตัวอย่าง
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
การเขียนโปรแกรม HTML
องค์ประกอบ HTML ทุกองค์ประกอบสามารถมีแอตทริบิวต์ได้
สำหรับการพัฒนาเว็บและการเขียนโปรแกรม คุณลักษณะที่สำคัญที่สุดคือid และคลาส คุณลักษณะเหล่านี้มักใช้เพื่อจัดการกับการจัดการหน้าเว็บตามโปรแกรม
| คุณลักษณะ | ตัวอย่าง |
|---|---|
| id | <table id ="table01" |
| ระดับ | <p class = "ปกติ"> |
| สไตล์ | <p style ="font-size:16px"> |
| ข้อมูล- | <div data -id="500"> |
| เมื่อคลิก | <input onclick ="myFunction()"> |
| onmouseover | <a onmouseover ="this.setAttribute('style','color:red')"> |
บทช่วยสอน HTML แบบเต็ม
นี่เป็นคำอธิบายสั้นๆ ของ HTML
สำหรับบทช่วยสอน HTML แบบเต็ม ให้ไปที่W3Schools HTML Tutorial
สำหรับการอ้างอิงแท็ก HTML แบบเต็ม ให้ไปที่W3Schools Tag Reference