ในบทเรียนนี้ คุณจะได้เรียนเกี่ยวกับคำสั่งพื้นฐานของ 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
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
HTML Paragraphs
คำสั่งจัดย่อหน้าสำหรับ HTML ก็คือ <p> ซึ่งเป็นคำสั่งให้โปรแกรมขึ้นย่อหน้าใหม่ แต่จะไม่สามารถกำหนดผลลัพธ์ให้ออกมาตามที่เราต้องการได้ ไม่ว่าจะขึ้นบรรทัดใหม่หรือจัดรูปแบบย่อหน้า เพราะรูปแบบที่กล่าวมานั้นจะถูกตัดออกหมด
ตัวอย่างการใช้คำสั่ง <p>
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
เป็นการเชื่อมโยงหน้าเว็บของเราไปยังที่ต่างๆ ที่เรียกว่า Hyperlinks หรือทำการเชื่อมโยง (Link) ภายในหน้าเว็บเดียวกัน โดยใช้ Tag <a> โดย a คือ Anchor ซึ่งหมายถึงจุดเชื่อมโยง
ตัวอย่างการใช้คำสั่ง <a>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://hostatom.com">This is a link</a>
</body>
</html>
ซึ่งเมื่อคลิกที่ ข้อความ “This is a link” ก็จะเข้าสู่หน้าเว็บของ hostatom ทันที
ส่วน href (ย่อมาจาก Hypertext Reference) เป็นการอ้างอิงถึงหน้าเว็บที่จะลิงก์ไป รายละเอียดเพิ่มเติมจะกล่าวในบทต่อไป
HTML Images
เป็นคำสั่งใส่ภาพใน HTML โดยจะใช้ tag <img> โดยมีรูปแบบการเขียนคือ <img src=”URL ของภาพ” alt=”ข้อความอธิบายภาพสำรอง” width=”ความกว้างของภาพ” height=”ความสูงของภาพ”>
ตัวอย่างการใช้คำสั่ง <img>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="https://kb.hostatom.com/wp-content/uploads/2022/10/457x455-blue-logo.png" alt="hostatom.com" width="457" height="455">
</body>
</html>
วิธีดู HTML Source
สำหรับวิธีดูโค้ด HTML มี 2 วิธี
วิธีที่ 1 ดูโค้ด HTML Source
คลิกขวาที่หน้าเว็บเพจที่ต้องการดูโค้ด HTML หากเป็นเบราว์เซอร์ Chrome ให้เลือก “View Page Source” หากเป็นเบราว์เซอร์ Microsoft Edge ให้เลือก “View Source” ระบบจะเปิดหน้าต่างใหม่ขึ้นมา ซึ่งภายหน้านั้นจะมีโค้ด HTML
วิธีที่ 2 ดู HTML Element
คลิกขวาที่ในส่วนที่ต้องการดูของหน้าเว็บนั้นแล้วเลือก “Inspect” หรือ “Inspect Element” ซึ่งจะเห็นโค้ดทั้งที่เป็น CSS และ HTML โดยในส่วนนี้คุณสามารแก้ไขโค้ด และดูการแสดงผลหลังการแก้ไขได้ในทันที