- โครงสร้างของเอกสาร HTML
- แท็ก (Tags) HTML องค์ประกอบ (Elements) และแอตทริบิวต์ (Attributes)
แท็ก (Tags) HTML
องค์ประกอบ (Elements) HTML
แอตทริบิวต์ (Attributes) HTML - หัวเรื่อง (Headings) ย่อหน้า (Paragraphs) และการจัดรูปแบบ (Formatting)
- ลิงค์ (Links) และรูปภาพ (Images)
HTML ซึ่งเป็นตัวย่อของ HyperText Markup Language เป็นรากฐานที่สำคัญของการทำเว็บและทำแอพ เป็นภาษามาร์กอัปมาตรฐานที่กำหนดโครงสร้างของเว็บเพจและเว็บแอปพลิเคชัน ทำให้เป็นหนึ่งในเครื่องมือหลักที่นักพัฒนาควรเรียนรู้ แม้ว่าคุณจะตั้งเป้าหมายที่จะเชี่ยวชาญด้านการทำแอพ แต่ความเข้าใจใน HTML ก็มีค่ายิ่ง คุณสามารถใช้ HTML ภายในแพลตฟอร์มต่างๆ เช่น PhoneGap หรือ Apache Cordova เพื่อทำแอพมือถือแบบไฮบริด
มาเจาะลึกพื้นฐานของ HTML เพื่อทำความเข้าใจโครงสร้าง ความสำคัญของแท็ก องค์ประกอบ คุณลักษณะ และการใช้หัวเรื่อง ย่อหน้า การจัดรูปแบบ ลิงก์ และรูปภาพ
1. โครงสร้างของเอกสาร HTML
<!DOCTYPE html> เอกสาร HTML ทุกฉบับเริ่ม ต้นด้วยการประกาศประเภทเอกสาร โค้ดบรรทัดนี้บอกเว็บเบราว์เซอร์ว่าเอกสารนี้เป็นเอกสาร HTML5 เอกสาร HTML นั้นขึ้นต้นด้วย <html> และลงท้ายด้วย </html>. ส่วนที่มองเห็นได้ของเอกสาร HTML จะอยู่ระหว่าง <body> และ </body> และส่วนหัวซึ่งมีข้อมูลเมตาหรือข้อมูลที่มองไม่เห็นบนเว็บเพจจะอยู่ระหว่าง <head> และ </head> โครงสร้างพื้นฐานของเอกสาร HTML มีลักษณะดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>2. แท็ก (Tags) HTML องค์ประกอบ (Elements) และแอตทริบิวต์ (Attributes)
แท็ก (Tags) HTML
ใน HTML แท็กจะใช้เพื่อสร้างองค์ประกอบ HTML แท็กมักจะมาเป็นคู่: แท็กเปิดและแท็กปิด ไวยากรณ์สำหรับแท็กเปิดคือ <tagname> และไวยากรณ์สำหรับแท็กปิด </tagname> คือ ตัวอย่างเช่น ในการ กำหนดย่อหน้า คุณใช้แท็กเปิด <p> และแท็กปิด </p>
องค์ประกอบ (Elements) HTML
องค์ประกอบ HTML คือทุกอย่างตั้งแต่แท็กเริ่มต้นไปจนถึงแท็กสิ้นสุด ตัวอย่างแท็กย่อหน้า <p>My first paragraph.</p> คือองค์ประกอบย่อหน้า ซึ่งรวมถึงแท็กเปิด แท็กปิด และเนื้อหาที่อยู่ระหว่างนั้น
แอตทริบิวต์ (Attributes) HTML
องค์ประกอบ HTML สามารถมีแอตทริบิวต์ซึ่งให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ แอตทริบิวต์จะถูกระบุในแท็กเริ่มต้นเสมอ และมักจะมาในคู่ชื่อ / ค่า name="value" เช่น ตัวอย่างเช่น แท็กสมอ <a> สำหรับสร้างลิงก์มีแอตทริบิวต์ href ซึ่งระบุปลายทางของลิงก์ มันใช้แบบนี้: <a href="https://www.example.com">Visit Example.com</a>.
3. หัวเรื่อง (Headings) ย่อหน้า (Paragraphs) และการจัดรูปแบบ (Formatting)
ส่วนหัวของ HTML ถูกกำหนดด้วย แท็ก <h1>to <h6>โดย <h1> กำหนดส่วนหัวที่สำคัญที่สุด และ <h6> กำหนดส่วนหัวที่สำคัญน้อยที่สุด ตัวอย่างเช่น:
<h1>My First Heading</h1>
<h2>My Second Heading</h2>ย่อหน้า HTML ถูกกำหนดด้วยแท็ก <p>:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>HTML มีแท็กหลายแท็กสำหรับจัดรูปแบบข้อความ ซึ่งคล้ายกับวิธีที่คุณทำในโปรแกรมประมวลผลคำ ซึ่งรวมถึงแต่ไม่จำกัดเพียง:
<b>สำหรับข้อความตัวหนา<strong>สำหรับข้อความที่สำคัญ<i>สำหรับข้อความตัวเอียง<em>สำหรับเน้นข้อความ<mark>สำหรับข้อความที่ทำเครื่องหมาย/เน้น<small>สำหรับข้อความขนาดเล็ก<del>สำหรับข้อความที่ถูกลบ<ins>สำหรับข้อความที่แทรก<sub>สำหรับข้อความตัวห้อย<sup>สำหรับข้อความตัวยก
4. ลิงค์ (Links) และรูปภาพ (Images)
องค์ประกอบจุดยึด <a> ใช้เพื่อสร้างการเชื่อมโยงหลายมิติใน HTML ดังที่ได้กล่าวไว้ก่อนหน้านี้แอตทริบิวต์ href ใช้เพื่อระบุปลายทางของลิงก์:
<a href="https://www.example.com">This is a link</a>รูปภาพ HTML ถูกกำหนดด้วยแท็ก <img> ไฟล์ต้นฉบับ ( src) ข้อความแสดงแทน ( alt) ความกว้าง และความสูงมีให้เป็นแอตทริบิวต์:
<img src="image.jpg" alt="My test image" width="500" height="600">แอตทริบิวต์ alt เป็นส่วนสำคัญของการเข้าถึงเว็บ เนื่องจากเป็นคำอธิบายของรูปภาพสำหรับผู้ที่มองไม่เห็น
การทำความเข้าใจพื้นฐานของ HTML เป็นพื้นฐานสำหรับการทำเว็บและทำแอพ ด้วย HTML คุณสามารถสร้างและจัดโครงสร้างส่วน ย่อหน้า หัวเรื่อง ลิงก์ และเครื่องหมายคำพูดสำหรับเว็บเพจและแอปพลิเคชัน รูปภาพและกราฟิก องค์ประกอบมัลติมีเดีย เช่น เสียงและวิดีโอ และองค์ประกอบรูปแบบ เช่น การป้อนข้อความ ปุ่มตัวเลือก ช่องทำเครื่องหมาย และรายการแบบเลื่อนลง สามารถรวมเข้ากับ HTML ได้
การเรียนรู้ด้าน HTML ที่เป็นพื้นฐานเหล่านี้จะช่วยให้คุณทำเว็บไซต์และแอปพลิเคชันที่ซับซ้อนและโต้ตอบได้มากขึ้น โดยใช้ประโยชน์จากเทคโนโลยีเพิ่มเติม เช่น CSS และ JavaScript โปรดจำไว้ว่าการเรียนรู้ HTML เป็นเพียงจุดเริ่มต้นของการเดินทางของคุณในการทำเว็บและทำแอพ อดทน ฝึกฝนอย่างสม่ำเสมอ และเมื่อเวลาผ่านไป คุณจะได้รับทักษะที่จำเป็นในการสร้างหน้าเว็บและแอปพลิเคชันแบบไดนามิกและตอบสนอง