HTML Basic Examples

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

ในบทเรียนนี้ คุณจะได้เรียนเกี่ยวกับคำสั่งพื้นฐานของ 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-basic-examples

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>
html-basic-examples

ซึ่งเมื่อคลิกที่ ข้อความ “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 โดยในส่วนนี้คุณสามารแก้ไขโค้ด และดูการแสดงผลหลังการแก้ไขได้ในทันที

< บทเรียนก่อนหน้า
บทเรียนถัดไป >