ในบทเรียนนี้ คุณจะได้เรียนเกี่ยวกับคำสั่งพื้นฐานของ HTML ซึ่งอาจจะมีหลายๆ Tag ที่คุณยังไม่เคยรู้มาก่อน ก็ไม่ต้องกลัวไปนะคะ เพราะเรามีคำอธิบายและบอกความหมายของ Tag ต่างๆ ให้นะคะ
HTML Documents
- การเขียนโปรแกรมด้วย HTML จะต้องเริ่มต้นด้วย
<!DOCTYPE html>เสมอ - ภายในคำสั่งจะเริ่มต้นด้วย
<html>และปิดด้วย</html>เสมอ - ส่วนของเนื้อหา หรือการแสดงผลของหน้าเว็บจะเริ่มด้วย
<body>และจบด้วย</body>เสมอ
ตัวอย่างการเขียนโปรแกรมด้วย HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE> Declaration
การประกาศด้วย
<!DOCTYPE> จะเป็นการบอกเว็บเบราว์เซอร์ให้ทราบว่าเอกสารที่กำลังเปิดนั้นเป็น HTML ประเภทไหน ซึ่งจะช่วยให้เว็บเบราว์เซอร์แสดงผลหน้าเพจนั้นได้อย่างถูกต้อง
ซึ่ง
<!DOCTYPE> จะถูกใช้แค่เพียงครั้งเดียว โดยจะวางไว้บนสุดของหน้าเพจ ก่อน Tag HTML โดยจะเขียนด้วยตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ก็ได้ <!DOCTYPE> สำหรับ HTML5 คือ
<!DOCTYPE html>
HTML Headings
Heading เป็น Tag ที่ใช้กำหนดหัวข้อต่างๆ ว่าข้อความไหนเป็นหัวข้อหลัก หรือข้อความใดเป็นหัวข้อรองในหน้าเพจนั้นๆ โดยมีขนาดตั้งแต่
<h1> ไปจนถึง <h6>
ซึ่ง
<h1> จะเป็นหัวข้อหลัก ที่มีความสำคัญที่สุด (ควรใช้เพียงแค่ตำแหน่งเดียวเท่านั้น) ส่วน <h6> จะเป็นหัวข้อรอง ที่มีความสำคัญน้อยที่สุด ตัวอย่างการใช้งาน Heading
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML Paragraphs
<p> ใช้สำหรับสร้างย่อหน้าใหม่ โดยเบราว์เซอร์จะเว้นบรรทัดก่อนและหลังย่อหน้าให้อัตโนมัติ แต่การจัดรูปแบบเพิ่มเติม เช่น ระยะห่างหรือการจัดแนว ต้องใช้ CSS มาช่วยกำหนด
ตัวอย่างการใช้คำสั่ง <p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
เป็นการเชื่อมโยงหน้าเว็บของเราไปยังที่ต่างๆ ที่เรียกว่า Hyperlinks หรือทำการเชื่อมโยง (Link) ภายในหน้าเว็บเดียวกัน โดยใช้ Tag <a> โดย a คือ Anchor ซึ่งหมายถึงจุดเชื่อมโยง
<a href="https://hostatom.com">This is a link</a>
ซึ่งเมื่อคลิกที่ ข้อความ “This is a link” ก็จะเข้าสู่หน้าเว็บของ hostatom ทันที
ส่วน href (ย่อมาจาก Hypertext Reference) เป็นการอ้างอิงถึงหน้าเว็บที่จะลิงก์ไป รายละเอียดเพิ่มเติมจะกล่าวในบทต่อไป
HTML Images
เป็นคำสั่งใส่ภาพใน HTML โดยจะใช้ tag
<img> โดยมีรูปแบบการเขียนคือ
<img src="URL ของภาพ" alt="ข้อความอธิบายภาพสำรอง" width="ความกว้างของภาพ" height="ความสูงของภาพ">
<img src="images/hostatom-w-logo.png" alt="hostatom.com" width="204" height="46">
วิธีดู HTML Source
วิธีที่ 1 ดูโค้ด HTML Source
คลิกขวาที่หน้าเว็บเพจที่ต้องการดูโค้ด HTML หากเป็นเบราว์เซอร์ Chrome ให้เลือก “View Page Source” หากเป็นเบราว์เซอร์ Microsoft Edge ให้เลือก “View Source” ระบบจะเปิดหน้าต่างใหม่ขึ้นมา ซึ่งภายหน้านั้นจะมีโค้ด HTML
วิธีที่ 2 ดู HTML Element
คลิกขวาที่ในส่วนที่ต้องการดูของหน้าเว็บนั้นแล้วเลือก “Inspect” หรือ “Inspect Element” ซึ่งจะเห็นโค้ดทั้งที่เป็น CSS และ HTML โดยในส่วนนี้คุณสามารแก้ไขโค้ด และดูการแสดงผลหลังการแก้ไขได้ในทันที