คอร์ส IT พื้นฐาน HTML 009_Hello HTML - บันทึกเทคนิคของ zhaoJian

HTML คืออะไร?

เครือข่าย หรือพูดให้เฉพาะเจาะจงกว่านั้นคือ World Wide Web ประกอบด้วยเอกสารและทรัพยากรจำนวนมากที่เชื่อมโยงกัน เอกสารและทรัพยากรเหล่านี้ถูกเขียนด้วย HTML และเรียกว่าหน้าเว็บ HTML เป็นพื้นฐานของหน้าเว็บ ซึ่งกำหนดโครงสร้างและเนื้อหาของหน้าเว็บ

เมื่อคุณพิมพ์ URL ในเบราว์เซอร์ (เช่น www.zhaojian.net) เบราว์เซอร์จะส่งคำขอไปยังเซิร์ฟเวอร์ที่ให้บริการหน้าเว็บนั้น เซิร์ฟเวอร์จะตอบสนองต่อคำขอนี้และส่งหน้าเว็บที่ร้องขอ (ซึ่งก็คือ HTML บางส่วน) กลับมาที่เบราว์เซอร์ จากนั้นเบราว์เซอร์จะแยกวิเคราะห์ HTML เหล่านี้และแสดงเป็นหน้าเว็บที่คุณเห็นตามปกติ

HTML (HyperText Markup Language, ภาษามาร์กอัปไฮเปอร์เท็กซ์) เป็นภาษามาร์กอัปที่ใช้สำหรับสร้างและออกแบบโครงสร้างหน้าเว็บ HTML ประกอบด้วยองค์ประกอบ (element) ชุดหนึ่ง องค์ประกอบเหล่านี้สามารถใช้เพื่อห่อหุ้มเนื้อหาส่วนต่างๆ เพื่อให้แสดงหรือทำงานในลักษณะที่กำหนด คู่ของแท็ก (tag) สามารถเพิ่มไฮเปอร์ลิงก์ไปยังข้อความหรือรูปภาพ ตั้งค่าข้อความเป็นตัวเอียง ตัวหนา ย่อหน้า รายการ เป็นต้น

[!สรุป]

HTML ไม่ใช่ภาษาโปรแกรม แต่เป็นภาษามาร์กอัป

เอกสาร HTML ประกอบด้วย HTML แท็กและเนื้อหาข้อความ (ทำไมไม่มีรูปภาพ)

เอกสาร HTML เรียกอีกอย่างว่า หน้า web, หน้าเว็บ

องค์ประกอบ HTML ที่สมบูรณ์ (element)

ตัวอย่าง:

1
<p>hello HTML!</p>

ผลลัพธ์:

ผลลัพธ์หน้า HTML

การวิเคราะห์โครงสร้าง:

การวิเคราะห์โครงสร้างองค์ประกอบ HTML

[!สรุป]

องค์ประกอบ HTML ที่สมบูรณ์ประกอบด้วยสามส่วน: แท็กเปิด เนื้อหา และแท็กปิด

แท็กเปิด (Opening tag): ประกอบด้วยชื่อของ element (ในตัวอย่างนี้คือ p) โดยถูกห่อหุ้มด้วยวงเล็บมุมซ้ายและขวา แท็กเปิดทำเครื่องหมายตำแหน่งที่ element เริ่มต้นหรือเริ่มมีผล

เนื้อหา (Content): เนื้อหาของ element

แท็กปิด (Closing tag): คล้ายกับแท็กเปิด แต่มีเครื่องหมายทับอยู่ก่อนชื่อ element สิ่งนี้ทำเครื่องหมายการสิ้นสุดของ element การไม่รวมแท็กปิดเป็นข้อผิดพลาดทั่วไปของผู้เริ่มต้น และอาจทำให้เกิดผลลัพธ์ที่แปลกประหลาด

หน้า HTML ที่สมบูรณ์

ตัวอย่าง:

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>hello HTML</title>
6
</head>
7
<body>
8
    <p>hello HTML!</p>
9
</body>
10
</html>

ผลลัพธ์:

ผลลัพธ์หน้า HTML

การวิเคราะห์โครงสร้าง:

การวิเคราะห์โครงสร้างหน้า HTML

[!สรุป]

<!DOCTYPE html> — ประกาศประเภทเอกสาร HTML ประเภทเอกสารเป็นมรดกทางประวัติศาสตร์ ใช้เพื่อบอกเบราว์เซอร์เกี่ยวกับเวอร์ชันและประเภทของเอกสาร การประกาศ DOCTYPE โหมดเข้มงวด HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html></html> — element html เนื้อหาทั้งหมดในหน้า HTML บางครั้งเรียกว่า root element

<head></head> — element head เนื้อหาของมันไม่สามารถมองเห็นได้สำหรับผู้ใช้ ประกอบด้วยคำค้นหา (keyword) สำหรับเครื่องมือค้นหา คำอธิบายหน้า สไตล์ CSS ไฟล์ JavaScript และการประกาศการเข้ารหัสตัวอักษร เป็นต้น

<meta charset="utf-8"> — element meta ใช้เพื่อให้ข้อมูลเมตาเกี่ยวกับเอกสาร HTML แอตทริบิวต์ charset ตั้งค่าชุดตัวอักษรของเอกสารเป็น UTF-8

<title></title> — element title องค์ประกอบนี้ตั้งค่าชื่อเรื่องของหน้า แสดงบนแท็บของเบราว์เซอร์ และยังใช้เป็นข้อความคำอธิบายเมื่อบันทึกหน้าเว็บ

<body></body> — element body องค์ประกอบนี้ประกอบด้วยเนื้อหาที่คุณคาดหวังให้ผู้ใช้เห็นเมื่อเข้าชมหน้า รวมถึงข้อความ รูปภาพ วิดีโอ เกม แทร็กเสียงที่เล่นได้ หรือเนื้อหาอื่นๆ

<p></p>— element ย่อหน้า แสดงถึงย่อหน้าของข้อความ

ชื่อองค์ประกอบ	หน้าที่	ตัวอย่าง
`<!DOCTYPE html>`	กำหนดประเภทและเวอร์ชันของเอกสาร HTML	`<!DOCTYPE html>`
`<html>`	กำหนด root element ของเอกสาร HTML	`<html lang="en">`
`<head>`	ประกอบด้วยข้อมูลเมตาของเอกสาร เช่น ชื่อเรื่อง การประกาศชุดตัวอักษร ลิงก์สไตล์และสคริปต์ เป็นต้น	`<head>...</head>`
`<title>`	กำหนดชื่อเรื่องของเอกสาร แสดงในแถบชื่อเรื่องหรือแท็บของเบราว์เซอร์	`<title>My Web Page</title>`
`<meta>`	ให้ข้อมูลเมตาเกี่ยวกับเอกสาร เช่น ชุดตัวอักษร การตั้งค่า viewport คำสำคัญ เป็นต้น	`<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">`
`<link>`	อ้างอิงทรัพยากรภายนอก เช่น stylesheet และไอคอน	`<link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon">`
`<style>`	กำหนดสไตล์ภายในของเอกสาร	`<style>body { font-family: Arial, sans-serif; }</style>`
`<script>`	กำหนดหรืออ้างอิงสคริปต์ สามารถรวมอยู่ในเอกสารหรืออ้างอิงสคริปต์ภายนอก	`<script src="script.js"></script>`
`<noscript>`	กำหนดเนื้อหาที่แสดงเมื่อเบราว์เซอร์ไม่รองรับสคริปต์	`<noscript>Sorry, your browser does not support JavaScript.</noscript>`
`<base>`	ระบุ URL พื้นฐานสำหรับลิงก์สัมพัทธ์ทั้งหมดในหน้า	`<base href="https://www.zhaojian.net/">`

ลิงก์:

Visual Studio Code

ปลั๊กอิน VS Code: Remote - SSH Remote Development

เบราว์เซอร์เว็บ Google Chrome เบราว์เซอร์เว็บ Google Chrome (จีน)

Microsoft Edge

HTML คืออะไร?

องค์ประกอบ HTML ที่สมบูรณ์ (element)

การวิเคราะห์โครงสร้าง:

หน้า HTML ที่สมบูรณ์

การวิเคราะห์โครงสร้าง:

ความคิดเห็น