History

softchris a7d39944e9 🌐 Update translations via Co-op Translator		1 month ago
..
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

Unescape Escape

โครงการ Terrarium ตอนที่ 1: แนะนำ HTML

ภาพวาดโดย Tomomi Imura

HTML หรือ HyperText Markup Language เป็นพื้นฐานของทุกเว็บไซต์ที่คุณเคยเยี่ยมชม ลองนึกถึง HTML ว่าเป็นโครงกระดูกที่ให้โครงสร้างแก่หน้าเว็บ – มันกำหนดว่าคอนเทนต์จะอยู่ที่ไหน จัดระเบียบอย่างไร และแต่ละส่วนมีความหมายอย่างไร ในขณะที่ CSS จะช่วยตกแต่ง HTML ด้วยสีและการจัดวาง และ JavaScript จะเพิ่มความมีชีวิตชีวาด้วยการโต้ตอบ HTML เป็นโครงสร้างสำคัญที่ทำให้ทุกอย่างเป็นไปได้

ในบทเรียนนี้ คุณจะสร้างโครงสร้าง HTML สำหรับอินเทอร์เฟซ terrarium เสมือนจริง โครงการที่ลงมือทำนี้จะช่วยให้คุณเรียนรู้แนวคิดพื้นฐานของ HTML ในขณะที่สร้างสิ่งที่น่าสนใจทางสายตา คุณจะได้เรียนรู้วิธีจัดระเบียบคอนเทนต์โดยใช้องค์ประกอบเชิงความหมาย ทำงานกับภาพ และสร้างพื้นฐานสำหรับแอปพลิเคชันเว็บที่มีการโต้ตอบ

เมื่อจบบทเรียนนี้ คุณจะมีหน้า HTML ที่แสดงภาพต้นไม้ในคอลัมน์ที่จัดระเบียบ พร้อมสำหรับการตกแต่งในบทเรียนถัดไป ไม่ต้องกังวลหากมันดูเรียบง่ายในตอนแรก – นั่นคือสิ่งที่ HTML ควรทำก่อนที่ CSS จะเพิ่มความสวยงาม

แบบทดสอบก่อนเรียน

📺 ดูและเรียนรู้: ดูวิดีโอแนะนำที่มีประโยชน์นี้

การตั้งค่าโครงการของคุณ

ก่อนที่เราจะเริ่มเขียนโค้ด HTML มาเตรียมพื้นที่ทำงานสำหรับโครงการ terrarium ของคุณ การสร้างโครงสร้างไฟล์ที่จัดระเบียบตั้งแต่เริ่มต้นเป็นนิสัยที่สำคัญที่จะช่วยคุณได้ตลอดการเดินทางในสายงานพัฒนาเว็บ

งาน: สร้างโครงสร้างโครงการของคุณ

คุณจะสร้างโฟลเดอร์เฉพาะสำหรับโครงการ terrarium และเพิ่มไฟล์ HTML แรกของคุณ มีสองวิธีที่คุณสามารถใช้ได้:

ตัวเลือกที่ 1: ใช้ Visual Studio Code

เปิด Visual Studio Code
คลิก "File" → "Open Folder" หรือใช้ Ctrl+K, Ctrl+O (Windows/Linux) หรือ Cmd+K, Cmd+O (Mac)
สร้างโฟลเดอร์ใหม่ชื่อ terrarium และเลือกมัน
ในแถบ Explorer คลิกไอคอน "New File"
ตั้งชื่อไฟล์ของคุณว่า index.html

ตัวเลือกที่ 2: ใช้คำสั่ง Terminal

mkdir terrarium
cd terrarium
touch index.html
code index.html

สิ่งที่คำสั่งเหล่านี้ทำ:

สร้าง ไดเรกทอรีใหม่ชื่อ terrarium สำหรับโครงการของคุณ
เข้าสู่ไดเรกทอรี terrarium
สร้างไฟล์ index.html ว่างเปล่า
เปิดไฟล์ใน Visual Studio Code เพื่อแก้ไข

💡 เคล็ดลับมือโปร: ชื่อไฟล์ index.html มีความพิเศษในงานพัฒนาเว็บ เมื่อมีคนเยี่ยมชมเว็บไซต์ เบราว์เซอร์จะค้นหา index.html โดยอัตโนมัติเป็นหน้าเริ่มต้นที่จะแสดง ซึ่งหมายความว่า URL เช่น https://mysite.com/projects/ จะให้บริการไฟล์ index.html จากโฟลเดอร์ projects โดยไม่จำเป็นต้องระบุชื่อไฟล์ใน URL

ทำความเข้าใจโครงสร้างเอกสาร HTML

เอกสาร HTML ทุกฉบับมีโครงสร้างเฉพาะที่เบราว์เซอร์ต้องการเพื่อแสดงผลอย่างถูกต้อง ลองนึกถึงโครงสร้างนี้เหมือนจดหมายทางการ – มันมีองค์ประกอบที่จำเป็นในลำดับที่เฉพาะเจาะจงที่ช่วยให้ผู้รับ (ในกรณีนี้คือเบราว์เซอร์) ประมวลผลคอนเทนต์ได้อย่างเหมาะสม

มาเริ่มต้นด้วยการเพิ่มพื้นฐานที่จำเป็นที่เอกสาร HTML ทุกฉบับต้องมี

การประกาศ DOCTYPE และองค์ประกอบราก

สองบรรทัดแรกของไฟล์ HTML ใด ๆ ทำหน้าที่เป็น "การแนะนำ" เอกสารให้กับเบราว์เซอร์:

<!DOCTYPE html>
<html></html>

ทำความเข้าใจว่ารหัสนี้ทำอะไร:

ประกาศประเภทเอกสารเป็น HTML5 โดยใช้ <!DOCTYPE html>
สร้างองค์ประกอบราก <html> ที่จะมีคอนเทนต์ทั้งหมดของหน้า
กำหนดมาตรฐานเว็บสมัยใหม่สำหรับการแสดงผลเบราว์เซอร์ที่เหมาะสม
รับรองการแสดงผลที่สม่ำเสมอในเบราว์เซอร์และอุปกรณ์ต่าง ๆ

💡 เคล็ดลับ VS Code: วางเมาส์เหนือแท็ก HTML ใด ๆ ใน VS Code เพื่อดูข้อมูลที่เป็นประโยชน์จาก MDN Web Docs รวมถึงตัวอย่างการใช้งานและรายละเอียดความเข้ากันได้ของเบราว์เซอร์

📚 เรียนรู้เพิ่มเติม: การประกาศ DOCTYPE ป้องกันเบราว์เซอร์จากการเข้าสู่ "quirks mode" ซึ่งเคยใช้เพื่อสนับสนุนเว็บไซต์เก่ามาก ๆ การพัฒนาเว็บสมัยใหม่ใช้การประกาศ <!DOCTYPE html> ที่เรียบง่ายเพื่อรับรอง การแสดงผลที่สอดคล้องกับมาตรฐาน

การเพิ่มข้อมูลเมตาที่จำเป็นของเอกสาร

ส่วน <head> ของเอกสาร HTML มีข้อมูลสำคัญที่เบราว์เซอร์และเครื่องมือค้นหาต้องการ แต่ผู้เยี่ยมชมจะไม่เห็นโดยตรงบนหน้า ลองนึกถึงมันว่าเป็นข้อมูล "เบื้องหลัง" ที่ช่วยให้หน้าเว็บของคุณทำงานได้อย่างถูกต้องและปรากฏอย่างเหมาะสมในอุปกรณ์และแพลตฟอร์มต่าง ๆ

ข้อมูลเมตานี้บอกเบราว์เซอร์ว่าจะแสดงผลหน้าเว็บของคุณอย่างไร ใช้การเข้ารหัสตัวอักษรแบบใด และจัดการกับขนาดหน้าจออย่างไร – ทั้งหมดนี้จำเป็นสำหรับการสร้างหน้าเว็บที่เป็นมืออาชีพและเข้าถึงได้

งาน: เพิ่มส่วนหัวของเอกสาร

แทรกส่วน <head> นี้ระหว่างแท็ก <html> เปิดและปิดของคุณ:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

แยกย่อยสิ่งที่แต่ละองค์ประกอบทำ:

ตั้งค่าชื่อหน้าที่ปรากฏในแท็บเบราว์เซอร์และผลการค้นหา
ระบุการเข้ารหัสตัวอักษร UTF-8 เพื่อแสดงข้อความอย่างถูกต้องทั่วโลก
รับรองความเข้ากันได้กับเวอร์ชันสมัยใหม่ของ Internet Explorer
กำหนดค่าการออกแบบที่ตอบสนองโดยตั้งค่ามุมมองให้ตรงกับความกว้างของอุปกรณ์
ควบคุมระดับการซูมเริ่มต้นเพื่อแสดงคอนเทนต์ในขนาดธรรมชาติ

🤔 ลองคิดดู: จะเกิดอะไรขึ้นหากคุณตั้งค่าแท็กเมตา viewport แบบนี้: <meta name="viewport" content="width=600">? สิ่งนี้จะบังคับให้หน้าเว็บมีความกว้าง 600 พิกเซลเสมอ ซึ่งจะทำลายการออกแบบที่ตอบสนอง! เรียนรู้เพิ่มเติมเกี่ยวกับ การกำหนดค่ามุมมองที่เหมาะสม

การสร้างเนื้อหาเอกสาร

องค์ประกอบ <body> มีคอนเทนต์ที่มองเห็นได้ทั้งหมดของหน้าเว็บของคุณ – ทุกสิ่งที่ผู้ใช้จะเห็นและโต้ตอบ ในขณะที่ส่วน <head> ให้คำแนะนำแก่เบราว์เซอร์ ส่วน <body> มีคอนเทนต์จริง: ข้อความ รูปภาพ ปุ่ม และองค์ประกอบอื่น ๆ ที่สร้างอินเทอร์เฟซผู้ใช้ของคุณ

มาเพิ่มโครงสร้างของส่วน body และทำความเข้าใจว่าแท็ก HTML ทำงานร่วมกันอย่างไรเพื่อสร้างคอนเทนต์ที่มีความหมาย

ทำความเข้าใจโครงสร้างแท็ก HTML

HTML ใช้แท็กคู่เพื่อกำหนดองค์ประกอบ แท็กส่วนใหญ่มีแท็กเปิด เช่น <p> และแท็กปิด เช่น </p> โดยมีคอนเทนต์อยู่ระหว่าง: <p>Hello, world!</p> สิ่งนี้สร้างองค์ประกอบย่อหน้าที่มีข้อความ "Hello, world!"

งาน: เพิ่มองค์ประกอบ Body

อัปเดตไฟล์ HTML ของคุณเพื่อรวมองค์ประกอบ <body>:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

นี่คือสิ่งที่โครงสร้างทั้งหมดนี้ให้:

กำหนดกรอบเอกสาร HTML5 พื้นฐาน
รวมข้อมูลเมตาที่จำเป็นสำหรับการแสดงผลเบราว์เซอร์ที่เหมาะสม
สร้าง body ว่างเปล่าพร้อมสำหรับคอนเทนต์ที่มองเห็นได้ของคุณ
ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการพัฒนาเว็บสมัยใหม่

ตอนนี้คุณพร้อมที่จะเพิ่มองค์ประกอบที่มองเห็นได้ของ terrarium แล้ว เราจะใช้องค์ประกอบ <div> เป็นตัวจัดระเบียบส่วนต่าง ๆ ของคอนเทนต์ และองค์ประกอบ <img> เพื่อแสดงภาพต้นไม้

การทำงานกับภาพและตัวจัดระเบียบเลย์เอาต์

ภาพมีความพิเศษใน HTML เพราะใช้แท็ก "ปิดตัวเอง" ต่างจากองค์ประกอบ เช่น <p></p> ที่ครอบคลุมคอนเทนต์ แท็ก <img> มีข้อมูลทั้งหมดที่ต้องการภายในแท็กเองโดยใช้แอตทริบิวต์ เช่น src สำหรับเส้นทางไฟล์ภาพ และ alt สำหรับการเข้าถึง

ก่อนเพิ่มภาพลงใน HTML ของคุณ คุณจะต้องจัดระเบียบไฟล์โครงการของคุณอย่างเหมาะสมโดยการสร้างโฟลเดอร์ภาพและเพิ่มกราฟิกต้นไม้

ขั้นแรก ตั้งค่าไฟล์ภาพของคุณ:

สร้างโฟลเดอร์ชื่อ images ภายในโฟลเดอร์โครงการ terrarium ของคุณ
ดาวน์โหลดภาพต้นไม้จาก โฟลเดอร์โซลูชัน (รวมทั้งหมด 14 ภาพ)
คัดลอกภาพต้นไม้ทั้งหมดลงในโฟลเดอร์ images ใหม่ของคุณ

งาน: สร้างเลย์เอาต์การแสดงผลต้นไม้

ตอนนี้เพิ่มภาพต้นไม้ที่จัดระเบียบในสองคอลัมน์ระหว่างแท็ก <body></body> ของคุณ:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.th.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.th.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.th.png" />
		</div>
	</div>
</div>

ทีละขั้นตอน นี่คือสิ่งที่เกิดขึ้นในโค้ดนี้:

สร้างตัวจัดระเบียบหน้าเว็บหลักด้วย id="page" เพื่อเก็บคอนเทนต์ทั้งหมด
กำหนดตัวจัดระเบียบคอลัมน์สองคอลัมน์: left-container และ right-container
จัดระเบียบต้นไม้ 7 ต้นในคอลัมน์ซ้ายและ 7 ต้นในคอลัมน์ขวา
ครอบคลุมภาพต้นไม้แต่ละภาพใน div plant-holder เพื่อการจัดตำแหน่งเฉพาะ
ใช้ชื่อคลาสที่สม่ำเสมอสำหรับการตกแต่ง CSS ในบทเรียนถัดไป
กำหนด ID เฉพาะให้กับภาพต้นไม้แต่ละภาพสำหรับการโต้ตอบ JavaScript ในภายหลัง
รวมเส้นทางไฟล์ที่เหมาะสมที่ชี้ไปยังโฟลเดอร์ภาพ

🤔 ลองพิจารณา: สังเกตว่าภาพทั้งหมดในปัจจุบันมีข้อความ alt เดียวกันว่า "plant" ซึ่งไม่เหมาะสำหรับการเข้าถึง ผู้ใช้เครื่องอ่านหน้าจอจะได้ยินคำว่า "plant" ซ้ำ ๆ 14 ครั้งโดยไม่รู้ว่าภาพแต่ละภาพแสดงต้นไม้ชนิดใด คุณคิดว่าข้อความ alt ที่อธิบายได้ดีกว่าสำหรับแต่ละภาพคืออะไร?

📝 ประเภทองค์ประกอบ HTML: องค์ประกอบ <div> เป็น "block-level" และใช้ความกว้างเต็ม ในขณะที่องค์ประกอบ <span> เป็น "inline" และใช้ความกว้างที่จำเป็นเท่านั้น คุณคิดว่าจะเกิดอะไรขึ้นหากคุณเปลี่ยนแท็ก <div> ทั้งหมดเป็นแท็ก <span>?

เมื่อเพิ่มมาร์กอัปนี้แล้ว ต้นไม้จะปรากฏบนหน้าจอ แม้ว่ามันจะยังดูไม่สวยงาม – นั่นคือสิ่งที่ CSS จะช่วยในบทเรียนถัดไป! ตอนนี้คุณมีพื้นฐาน HTML ที่มั่นคงที่จัดระเบียบคอนเทนต์ของคุณอย่างเหมาะสมและปฏิบัติตามแนวทางการเข้าถึงที่ดีที่สุด

การใช้ HTML เชิงความหมายเพื่อการเข้าถึง

HTML เชิงความหมายหมายถึงการเลือกใช้องค์ประกอบ HTML ตามความหมายและวัตถุประสงค์ ไม่ใช่แค่ลักษณะการแสดงผล เมื่อคุณใช้มาร์กอัปเชิงความหมาย คุณกำลังสื่อสารโครงสร้างและความหมายของคอนเทนต์ของคุณไปยังเบราว์เซอร์ เครื่องมือค้นหา และเทคโนโลยีช่วยเหลือ เช่น เครื่องอ่านหน้าจอ

วิธีนี้ทำให้เว็บไซต์ของคุณเข้าถึงได้มากขึ้นสำหรับผู้ใช้ที่มีความบกพร่อง และช่วยให้เครื่องมือค้นหาเข้าใจคอนเทนต์ของคุณได้ดีขึ้น เป็นหลักการพื้นฐานของการพัฒนาเว็บสมัยใหม่ที่สร้างประสบการณ์ที่ดีขึ้นสำหรับทุกคน

การเพิ่มชื่อหน้าเชิงความหมาย

มาเพิ่มหัวข้อที่เหมาะสมให้กับหน้า terrarium ของคุณ แทรกบรรทัดนี้หลังแท็ก <body> เปิดของคุณ:

<h1>My Terrarium</h1>

ทำไมมาร์กอัปเชิงความหมายถึงสำคัญ:

ช่วยเครื่องอ่านหน้าจอในการนำทางและเข้าใจโครงสร้างหน้า
ปรับปรุงการเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO) โดยการชี้แจงลำดับชั้นของคอนเทนต์
เพิ่มการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางสายตาหรือความแตกต่างทางปัญญา
สร้างประสบการณ์ผู้ใช้ที่ดีขึ้นในทุกอุปกรณ์และแพลตฟอร์ม
ปฏิบัติตามมาตรฐานเว็บและแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนามืออาชีพ

ตัวอย่างการเลือกเชิงความหมาย vs. ไม่เชิงความหมาย:

วัตถุประสงค์	✅ ตัวเลือกเชิงความหมาย	❌ ตัวเลือกไม่เชิงความหมาย
หัวข้อหลัก	`<h1>Title</h1>`	`<div class="big-text">Title</div>`
การนำทาง	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
ปุ่ม	`<button>Click me</button>`	`<span onclick="...">Click me</span>`
คอนเทนต์บทความ	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 ดูการทำงาน: ดู วิธีที่เครื่องอ่านหน้าจอโต้ตอบกับหน้าเว็บ เพื่อเข้าใจว่าทำไมมาร์กอัปเชิงความหมายถึงสำคัญสำหรับการเข้าถึง สังเกตว่าโครงสร้าง HTML ที่เหมาะสมช่วยให้ผู้ใช้นำทางได้อย่างมีประสิทธิภาพ

การสร้างตัวจัดระเบียบ Terrarium

ตอนนี้มาเพิ่มโครงสร้าง HTML สำหรับ terrarium เอง – ภาชนะแก้วที่ต้นไม้จะถูกวางในที่สุด ส่วนนี้แสดงให้เห็นถึงแนวคิดสำคัญ: HTML ให้โครงสร้าง แต่หากไม่มีการตกแต่ง CSS องค์ประกอบเหล่านี้จะยังไม่ปรากฏให้เห็น

มาร์กอัป terrarium ใช้ชื่อคลาสที่อธิบายได้ซึ่งจะทำให้การตกแต่ง CSS เป็นเรื่องง่ายและดูแลรักษาได้ในบทเรียนถัดไป

งาน: เพิ่มโครงสร้าง Terrarium

แทรกมาร์กอัปนี้เหนือแท็ก </div> สุดท้าย (ก่อนแท็กปิดของตัวจัดระเบียบหน้า):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

ทำความเข้าใจโครงสร้าง terrarium นี้:

สร้างตัวจัดระเบียบ terrarium หลักพร้อม ID เฉพาะสำหรับการตกแต่ง
กำหนดองค์ประกอบแยกสำหรับแต่ละส่วนประกอบภาพ (ด้านบน ผนัง ดิน ด้านล่าง)
รวมองค์ประกอบที่ซ้อนกันสำหรับเอฟเฟกต์การสะท้อนแก้ว (องค์ประกอบ glossy)
ใช้ชื่อคลาสที่อธิบายได้ชัดเจนที่ระบุว คำสั่ง: สร้างส่วน HTML แบบ semantic ที่มีหัวข้อหลัก "คู่มือการดูแลพืช" และมีสามหัวข้อย่อยคือ "การรดน้ำ", "ความต้องการแสง", และ "การดูแลดิน" โดยแต่ละหัวข้อย่อยมีย่อหน้าที่ให้ข้อมูลเกี่ยวกับการดูแลพืช ใช้แท็ก HTML แบบ semantic เช่น <section>, <h2>, <h3>, และ <p> เพื่อจัดโครงสร้างเนื้อหาให้เหมาะสม

เรียนรู้เพิ่มเติมเกี่ยวกับ agent mode ที่นี่

ท้าทายประวัติศาสตร์ HTML

เรียนรู้เกี่ยวกับวิวัฒนาการของเว็บ

HTML ได้พัฒนาไปอย่างมากตั้งแต่ Tim Berners-Lee สร้างเว็บเบราว์เซอร์ตัวแรกที่ CERN ในปี 1990 แท็กเก่าบางตัว เช่น <marquee> ถูกยกเลิกไปแล้วเนื่องจากไม่เหมาะสมกับมาตรฐานการเข้าถึงและหลักการออกแบบที่ตอบสนองในยุคปัจจุบัน

ลองทำการทดลองนี้:

ลองใส่หัวข้อ <h1> ของคุณในแท็ก <marquee> ชั่วคราว: <marquee><h1>My Terrarium</h1></marquee>
เปิดหน้าเว็บของคุณในเบราว์เซอร์และสังเกตผลการเลื่อน
พิจารณาว่าทำไมแท็กนี้ถึงถูกยกเลิก (คำใบ้: คิดถึงประสบการณ์ผู้ใช้และการเข้าถึง)
ลบแท็ก <marquee> และกลับไปใช้การมาร์กอัปแบบ semantic

คำถามสะท้อนความคิด:

หัวข้อที่เลื่อนอาจส่งผลต่อผู้ใช้ที่มีความบกพร่องทางสายตาหรือความไวต่อการเคลื่อนไหวอย่างไร?
เทคนิค CSS สมัยใหม่ใดที่สามารถสร้างเอฟเฟกต์ภาพที่คล้ายกันได้โดยเข้าถึงได้มากกว่า?
ทำไมการใช้มาตรฐานเว็บปัจจุบันแทนองค์ประกอบที่ถูกยกเลิกจึงสำคัญ?

สำรวจเพิ่มเติมเกี่ยวกับ องค์ประกอบ HTML ที่ล้าสมัยและถูกยกเลิก เพื่อทำความเข้าใจว่ามาตรฐานเว็บพัฒนาไปอย่างไรเพื่อปรับปรุงประสบการณ์ผู้ใช้

แบบทดสอบหลังการบรรยาย

ทบทวนและศึกษาด้วยตนเอง

เพิ่มพูนความรู้เกี่ยวกับ HTML ของคุณ

HTML เป็นพื้นฐานของเว็บมานานกว่า 30 ปี โดยพัฒนาจากภาษามาร์กอัปเอกสารธรรมดาไปสู่แพลตฟอร์มที่ซับซ้อนสำหรับการสร้างแอปพลิเคชันแบบโต้ตอบ การเข้าใจวิวัฒนาการนี้ช่วยให้คุณชื่นชมมาตรฐานเว็บสมัยใหม่และตัดสินใจพัฒนาได้ดีขึ้น

เส้นทางการเรียนรู้ที่แนะนำ:

ประวัติและวิวัฒนาการของ HTML
- ศึกษาไทม์ไลน์ตั้งแต่ HTML 1.0 ถึง HTML5
- สำรวจว่าทำไมแท็กบางตัวถึงถูกยกเลิก (การเข้าถึง, ความเหมาะสมกับมือถือ, การบำรุงรักษา)
- ตรวจสอบคุณสมบัติ HTML ใหม่และข้อเสนอที่กำลังเกิดขึ้น
เจาะลึก HTML แบบ semantic
- ศึกษารายการองค์ประกอบ semantic ของ HTML5
- ฝึกการระบุว่าเมื่อใดควรใช้ <article>, <section>, <aside>, และ <main>
- เรียนรู้เกี่ยวกับแอตทริบิวต์ ARIA เพื่อเพิ่มการเข้าถึง
การพัฒนาเว็บสมัยใหม่
- สำรวจ การสร้างเว็บไซต์ที่ตอบสนอง บน Microsoft Learn
- ทำความเข้าใจว่า HTML ผสานรวมกับ CSS และ JavaScript อย่างไร
- เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและแนวทางปฏิบัติที่ดีที่สุดสำหรับ SEO