ntpon.com

สรุป HTML พื้นฐาน (ฉบับรวม)

25 มกราคม 2565 · 34 min read

htmlfundamentals
Table of contents

บทความเก่า — เขียนไว้ตั้งแต่ต้นปี 2022 บนเว็บเดิมของผม เอามารวมเก็บไว้ที่นี่ เนื้อหาพื้นฐานยังใช้ได้ทั้งหมด

HTML เป็นพื้นฐานของการพัฒนาเว็บไซต์ เมื่อเราเรียน HTML เราจะสามารถจัดวางโครงสร้างของหน้าเว็บเพจได้

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

  • ความหมายของ HTML และการใช้งานเบื้องต้น
  • Element สำหรับปรับแต่งข้อความ
  • Path และการเชื่อมโยงเว็บไซต์
  • Media แสดงข้อมูลที่เป็นสื่อ รูปภาพ วีดีโอและเสียง
  • Table แสดงผลข้อมูลในรูปแบบตาราง
  • Form สร้างฟอร์มรับข้อมูล
  • HTML เชิงความหมาย (HTML Sematic)

HTML พื้นฐาน PART-1: ความหมายของ HTML และการใช้งานเบื้องต้น

Introduction

ลองนึกถึงเวลาเราอ่านหนังสือหรือเอกสารสิ่งพิมพ์ เราจะพบกับ โครงสร้าง ของการวางหัวข้อหลัก หัวข้อย่อยและส่วนของเนื้อหา ในเอกสารอาจมีรูปภาพประกอบ การเน้นสี ฯลฯ ในเว็บเพจเราทำแบบเดียวกัน โปรแกรมเมอร์สร้าง HTML ซึ่งเป็นตัวกำหนดโครงสร้างของ Webpage ที่แสดงบนบราวเซอร์

HTML คืออะไร

  • Hyper Text Markup Language
  • ใช้อธิบาย/กำหนด โครงสร้างของ Web page

หลักการทำงาน

  • เขียน HTML
  • บราวเซอร์แปลงรหัสที่เราเขียน
  • แสดงผล

เครื่องมือ

  • Editor : โปรแกรมสำหรับแก้ไขเอกสาร
    • Visual Studio Code
    • Notepad
    • อื่นๆ
  • Web browser : สำหรับแสดงผล Wep Page
    • Chrome
    • Firefox
    • Edge
    • อื่นๆ

เขียน Code

  • เปิดโปรแกรม Visual Studio Code
  • สร้างไฟล์ index.html

index เป็น default homepage ความหมายคือเพจแรกที่จะถูกเรียกอัตโนมัติ หากเราไม่ใส่ชื่อไฟล์, .html เป็นการบอกว่าเอกสารชิ้นนี้คือ html

<h1>HELLO HTML</h1>
  • ลากไฟล์มาแสดงบนที่บราวเซอร์เพื่อดูผลลัพท์

Tag / Element คืออะไร

  • HTML นำเสนอการจัดโครงสร้างเอกสารของเว็บไซต์ผ่าน Tag หรือบางครั้งเรียกว่า Element
  • HTML Element จะแบ่งเป็น 2 ลักษณะ
    • มี Tag เปิดและปิดเสมอ เช่น
      • <h1> ใช้สำหรับแสดงหัวเรื่อง
      • <p> ใช้สำหรับแสดงหัวเรื่อง
    • เป็น Tag เดี่ยว เช่น
      • <br> ใช้สำหรับขึ้นบรรทัดใหม่
      • <hr> ใช้สำหรับตีเส้นขึ้นบรรทัดใหม่

เลขตัวหลังของ h1 คือความสำคัญโดยสามารถเปลี่ยนเป็นเลข 1 - 6 ได้ ยิ่งเลขน้อยเป็นการบอกว่าเลขนั้นมีความสำคัญมาก

โครงสร้างและรายละเอียดภายใน

  • ภาพแสดง โครงสร้างแบบ Open Tag, Close Tag

  • ภาพแสดง โครงสร้างแบบ Self-Closing Tag

ใน xml เราสามารถเขีน self-closing แบบนี้ได้ด้วยนะครับ <br />

แนะนำตัวเป็น HTML

<h1>Hello</h1>
<hr />
<p>I am Art</p>

Attribute

Attribute ใน HTML เหมือนกับ Atttibute ที่เราพบเจอในชีวิตประจำวัน มันเป็นการอธิบายลักษณะเพิ่มเติมของบางสิ่ง เช่น แมวสีส้ม ในทำนองเดียวกัน HTML Tag บางตัวเราต้องช่วยบอกมันถึง attribute เพื่อให้ทำงานได้ถูกต้อง

รูปแบบ

ตัวอย่างการใช้ Anchor Element

  • <a> ย่อมาจาก anchor เป็นตัวช่วยเชื่อมโยงเว็บไซต์
    • href หมายถึง url ที่เราต้องการจะไป
<a href="wwww.google.com">ไป Gooogle</a>

Page Structure

เริ่มต้นการทดลองด้วยการพิมพ์ html บน vs code กันครับ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

เราจะพบกับ tag element ของ html มากมาย ซึ่งนี้คือโครงสร้างพื้นฐานของการสร้างเว็บเพจด้วย html ครับ

Page Structure คืออะไร

  • Page Structure คือโครงสร้างของเว็บไซต์
  • ในการจะสร้างเอกสารสำหรับเว็บเพจให้สมบูรณ์ เพื่อให้ตัว Search Engin เช่น Google สามารถเข้าใจและนำเว็บเราไปแสดงที่ผลการค้นหา เราต้องวางโครงสร้างตามมาตรฐานของ HTML

HTML5 และ โครงสร้างพื้นฐาน

ใน HTML5 เป็นมาตรฐานของการสร้างเว็บเพจด้วยภาษา HTML ซึ่งบราวเซอร์ปัจจุบันรองรับแล้ว โดยมีตัว Tag Element ที่เราต้องรู้จักดังนี้ครับ

  • <!DOCTYPE html>
    • ส่วนการประกาศเวอชั่นของ HTML ซึ่งรูปแบบที่เขียนเป็นการบอกว่านี้คือเอกสาร html5
<!DOCTYPE html>

  • <html>

    • บอกว่าเอกสารต่อไปนี้ทั้งหมดจะเขียนอยู่ภายใต้ html
<!DOCTYPE html>
<html></html>
  • <head>
    • กำหนดส่วนหัว ซึ่งผู้ใช้งานเว็บบราวเซอร์จะไม่เห็นโดยตรง เช่นการดาว์โหลด font การโหลด style นอกเหนือจากนี้ยังมี meta tag ซึ่งเป็นส่วนที่จะช่วยอธิบายหน้าเว็บไซต์เพิ่มเติม โดยสามารถอ่านรายละเอียดเพิ่มเติมได้ที่ท้ายบทความ
    • ในที่นี้จะใช้เพียงการบอกว่าเอกสารนี้ถูกเข้ารหัสด้วย charset UTF-8 เท่านั้นครับ
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
</html>
  • <title>
    • กำหนดส่วนชื่อ tab ของบราวเซอร์
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>เว็บ Hello</title>
  </head>
</html>
  • <body>
    • ส่วนของเนื้อหา ทุกๆสิ่งที่เขียน จะแสดงผลโดยตรงกับเว็บบราวเซอร์
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>เว็บ Hello</title>
  </head>
  <body>
    <h1>Hello</h1>
    <hr />
    <p>I am Art</p>
  </body>
</html>

แบบฝึดหัด

แบบฝึกหัดเป็นส่วนสำคัญเพราะจะช่วยเราทบทวนว่าเราจำเนื้อหาและเข้าใจสิ่งที่เรียนไปหรือไม่ครับ

  • สร้างไฟล์ html เพื่อเขียน code
  • กำหนดโครงสร้าง html5 แบบพื้นฐาน
  • สร้างหน้าเว็บเพจ โดยใช้ Tag ทั้งสองประเภท

เอกสารอ้างอิง

  • Jon Duckett (2011), HTML and CSS: Design and Build Websites.

HTML พื้นฐาน PART-2: Element สำหรับปรับแต่งข้อความ

การใส่หัวเรื่อง (Heading)

HTML มีระดับของหัวเรื่องอยู่ 6 ระดับ

  • h1 สำหรับหัวเรื่องหลัก โดยทั่วไปควรมีเพียง 1 รายการต่อ 1 หน้า
  • h2 สำหรับหัวข้อรอง

ความสำคัญของลำดับจะเรียงจะเลขน้อยไปหามาก เลขน้อยสำคัญสุดและมีขนาดใหญ่สุด

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

การใส่ข้อความ (Paragraphs)

เป็นบล็อกสำหรับใส่ข้อความ โดยใช้ในการแบ่งข้อความเป็นย่อหน้าแต่ละ Paragraphs

<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>
<p>
  This is the second paragraph. This is the second paragraph. This is the second
  paragraph. This is the second paragraph.
</p>

ปรับแต่งลักษณะข้อความ

  • <strong> สำหรับแสดงตัวตัวหนาหรือแสดงถึงข้อความที่ต้องการเน้น มันจะใช้ร่วมกันกับ p tag
<p>This is <strong> important </strong></p>
  • <em> สำหรับตัวเอียงหรือแสดงถึงข้อความที่มีการเปลี่ยนแปลงความหมาย
<p>I thinks <em> something </em></p>
  • <sup> สำหรับข้อความที่แสดงขึ้นสูงจากข้อความปกติ เช่นวันที่, เลขยกกำลัง
<p>2 <sub>0</sub> = 1</p>
  • <sub> สำหรับข้อความที่แสดงลง(ห้อยท้าย)จากของความปกติ เช่นสูตรทางวิทยาศาสตร์ เลข ฐาน
<p>0101 <sup>2</sup> = 5</p>

HTML Entities

ทดลองพิมพ์ช่องว่างสองครั้ง หรือลองกด Tap ลงใน HTML แล้วลองดูผลลัพท์ครับ

<p>Hello HTML</p>

เราจะพบว่า HTML จะบังคับให้เราแสดงผลเพียงแค่ 1 ช่องว่างเท่านั้น เหตุผลที่เป็นแบบนั้นเพราะ HTML มองช่องว่างเป็น ตัวอักขระเฉพาะ เราสามารถแก้ไขปัญหานี้ได้ด้วยการใช้ HTML Entities

HTML Entities เป็นชิ้นส่วนของข้อความ (String) ที่เริ่มต้นด้วยเครื่องหมาย ( &) และสิ้นสุดด้วยเครื่องหมายอัฒภาค ( ;) โดยจะใช้แสดงอักขระพิเศษที่สงวนไว้

ตัวอย่างแสดงช่องว่าง

<h2>Hello&nbsp;&nbsp;HTML</h2>

HTML Entities ที่ใช้บ่อย

ดูรายละเอียดแบบเต็ม

Lists

อย่างที่เคยกล่าวไว้ครับว่า HTML สามารถช่วยเราจัดการกับโครงสร้างหรือกลุ่มของบางสิ่งเพื่อแสดงผลทางเว็บเพจ ตอนนี้เราลองมาจัดการกับ รายการ (Item) กันครับ ซึ่ง HTML สามารถแบ่งกลุ่มของการจัดเรียง Item ไว้ 3 แบบ

  • รายการเรียงลำดับ (Numbered lists)
  • รายการแบบไม่เรียงลำดับ (Unordered/Bullet lists)
  • รายการแบบคำจำกัดความ (Definition lists)

รายการเรียงลำดับ (Numbered lists)

แสดงเป็นตัวเลขอยู่ข้างหน้ารายการมักจะใช้แสดงรายการที่ต้องเรียงลำดับเช่น ลำดับชื่อ, ขั้นตอนก

  • <ol> สำหรับ parent เพื่อบอกลักษณะแต่ละตัว
  • <li> เป็น children เพื่อเก็บ item แต่ละตัว
<ol>
  <li>Art</li>
  <li>Blue</li>
  <li>Boss</li>
</ol>

รายการแบบไม่เรียงลำดับ (Unordered/Bullet lists)

แสดงเป็นสัญลักษณ์อยู่ข้างหน้ารายการ มักจะใช้แสดงรายการที่ไม่ต้องเรียงลำดับเช่น ส่วนผสมอาหาร, อาหารโปรด

  • <ul> สำหรับ parent เพื่อบอกลักษณะแต่ละตัว
  • <li> เป็น children เพื่อเก็บ item แต่ละตัว
<ul>
  <li>หมูสับ</li>
  <li>ใบกระเพรา</li>
  <li>พริก</li>
</ul>

รายการคำจำกัดความ (DEFINITION LISTS)

แสดงเป็นหัวเรื่องสำหรับแสดงคำศัพท์และย่อหน้าแสดงความหมาย (คล้ายๆพจนานุกรม)

  • <dl> สำหรับ parent เพื่อบอกว่าเป็นกลุ่มของคำศัพท์
  • <dt> เป็น children เพื่อกำหนดคำศัพท์ (key)
  • <dd> เป็น children เพื่อแสดงความหมาย (value)
<dl>
  <dt>คอมพิวเตอร์</dt>
  <dd>
    เครื่องอิเล็กทรอนิกส์แบบอัตโนมัติ ทำหน้าที่รับข้อมูล
    ประมวลผลด้วยหลักการทางคณิตศาสตร์และตรรกศาสตร์ด้วยความเร็วสูง
    และแสดงผลผ่านอุปกรณ์ประกอบต่างๆ
  </dd>
  <dt>อิเล็กทรอนิกส์</dt>
  <dd>
    วิทยาศาสตร์กายภาพแขนงหนึ่งที่นำมาประยุกต์ใช้กับการศึกษาวงจรไฟฟ้าที่ใช้สารกึ่งตัวนำและอุปกรณ์อื่นๆ
    ซึ่งควบคุมการเคลื่อนที่ของอิเล็กตรอนได้
  </dd>
</dl>

แบบฝึกหัด

  • ทดลองเขียนรายการสูตรอาหารเพื่อแสดงผลลัพท์ตามตัวอย่าง
  • ทดลองเขียนข้อความ copyright เพื่อแสดงผลลัพท์ตามตัวอย่าง

เอกสารอ้างอิง

  • Jon Duckett (2011), HTML and CSS: Design and Build Websites.
  • Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, Marian Zburlea (2019), The HTML and CSS Workshop.

HTML พื้นฐาน PART-3: Path และการเชื่อมโยงเว็บไซต์

URL และการจำลองเซิฟเวอร์

URL ย่อมาจาก Uniform Resource Locator หมายถึงตัวระบุตำแหน่งที่คุณสามารถค้นหาทรัพยากรบนเว็บ ลองมาดูเว็บไซต์ของเรากันครับ ตอนนี้มันแสดง URL ในรูปแบบของ Path OS เรามาแก้ไขให้มีลักษณะเหมือนกับ Server จริงๆครับ

มีหลายวิธีในการจำลองเซิฟเวอร์ ในการศึกษาภาษา HTML และ เรื่อง Path จะใช้ extension ของ vscode ที่ชื่อ live-server ครับ

live-server

  • extension เสริมของ vscode
  • เป็นตัวช่วยจำลองเซิฟเวอร์
  • เมื่อมีการแก้ไขไฟล์จะ reload อัตโนมัติ
  • อื่นๆ

ติดตั้ง Live Server

  • เปิด tab extension

  • กลับมายังหน้า index.html หลักของเราและเริ่มต้นการทำงาน live-server

เข้าใจ URL

มาดูความหมายของแต่ละส่วนกันครับ

  • Schema คือสิ่งที่ใช้เชื่อมต่อกับเว็บไซต์ในตัวอย่างเป็นรูปแบบการส่งข้อมูลแบบ Hypertext Transfer Protocol (HTTP) ในเว็บสมัยใหม่ จะมีรูปแบบที่ปลอดภัยกว่าคือ HTTPS
  • Host จะเป็นชื่อ Domain สำหรับที่อยู่ของเว็บไซต์ ซึ่งขึ้นต้นด้วย www แต่เบื้องหลังของ Host จริงๆจะเป็นเพียงตัวเลข IP Address
  • filepath มักขึ้นด้วย / โดยจะประกอบด้วย director (โพลเดอร์) เพื่อเข้าถึงไฟล์
    • filepath จะสอดคล้องกับการวาง directory ของเรา

การเชื่อมโยงเว็บไซต์

ในเว็บไซต์หนึ่งแห่งมักจะมีหลายหน้า ดังนั้นจึงมักจะมีเมนูส่วนของเมนูเพื่อนำทางเราไปแต่ละหน้า หรือบางครั้ง เราเขียนบทความแล้วมีแหล่งอ้างอิงไปยังเว็บไซต์ภายนอก สิ่งเหล่านี้เราสามารถทำได้ด้วย Element Achor

Achor

  • มีหน้าที่ทำการ สร้างเชื่อมโยงไปยังหน้าเว็บ, email
  • กำหนด href สำหรับ ปลายทางที่ต้องการจะไป
  • กำหนด target สำหรับบริบท เมื่อเรากด
    • self: เป็นค่าเริ่มต้น เปิดทับหน้าปัจจุบัน
    • blank: เปิดหน้าต่างใหม่

การเชื่อมโยงภายในเว็บไซต์

<body>
  <p>
    ค้นหาข้อมูลไม่เจอ ลองใช้ Google
    <a href="www.google.com">คลิกเพื่อไป Google</a>.
  </p>
</body>

การเชื่อมภายในเว็บไซต์

  • ให้เราทำการสร้างไฟล์ index.html, contact.html, about.html
<body>
  <nav>
    <a href="http://localhost:3000/index.html">Home</a>
    <a href="http://localhost:3000/about.html">About</a>
    <a href="http://localhost:3000/contact.html">Contact</a>
  </nav>
</body>

การเชื่อมโยงภายในหน้าด้วย attribute id

  • กำหนด id ให้แต่ละส่วน
<div id="content">ส่วนของบทความ</div>
<div id="footer">ส่วนของ Footer</div>
  • สร้างส่วนที่จะเชื่อมโยงกับ id โดยจะใส่ # ขึ้นต้น
<nav>
  <a href="#contect">ไปยัง Content </a>
  <a href="#footer">ไปยัง Footer </a>
</nav>
<div id="content">ส่วนของบทความ</div>
<div id="footer">ส่วนของ Footer</div>

เมื่อเราไม่ได้ระบุชื่อไฟล์จะเกิดอะไรขึ้น ?

กรณีที่เราพิมพ์เพียงชื่อโพลเดอร์ Server จะทำสิ่งใดสิ่งหนึ่งต่อไปนี้ (เรียงลำดับการทำงานหรือขึ้นอยู่กับการกำหนดค่า)

  • ค้นหา index.html และแสดงผล
  • แสดงไฟล์ทั้งหมด
  • แสดงข้อความว่าไม่พบ directory

Path Directory

  • Directory เป็นเพียงชื่อโพลเดอร์ เช่นเดียวกับที่ใน computer ของเรามีโพลเดอร์ต่างๆ
  • ในเว็บไซต์ขนาดใหญ่จะมี directory แยกต่างหากสำหรับแต่ละส่วนของเว็บไซต์ และ directory สำหรับเก็บไฟล์ประเภทต่างๆเช่น (Image, Video, Font, Style)
  • ลองคิดถึงการจัดโพลเดอร์ในเครื่องของเรา เรามีโพลเดอร์แยกสำหรับแต่ละส่วน หากทุกอย่างอยู่หน้า Desktop ไฟล์ต่างๆของเราจะดูซับซ้อนและวุ่นวายมากแน่ๆ

ตัวอย่างการจัด directory

ตัวอย่างการจัด directory#2

Relative URL

ก่อนที่เราจะไปรู้จัก Relative จากความรู้ของเราตอนนี้ เราสามารถเข้าถึงไฟล์และเชื่อมโยงเว็บไซต์ได้ด้วย URL แบบเต็ม เช่น

แต่ยังมีวิธีอื่นในการเข้าถึงไฟล์ คือ URL Relative ซึ่งจะเป็นการระบุ resource ที่สัมพันธ์กับหน้าปัจจุบัน จากตัวอย่างด้านบนเราต้องการเข้าถึง ไฟล์ hello.html ถ้าเราอยู่ที่ Directory project เราสามารถเข้าถึงไฟล์อื่นๆได้ด้วยการพิมพ์

  • hello.html
  • resume.html

เร็วกว่าการเขียนแบบเต็ม

ซึ่งเป็นประโยชน์อย่างมาก อนาคตเราอาจมีการเปลี่ยนแปลง host name เราก็ไม่ต้องไปตามเปลี่ยนทุกส่วน

การเข้าถึง Directory จาก Relative

  • กรณีอยู่ directory เดียวกัน สามารถเข้าถึงไฟล์ได้เลย

    • about.html หรือ ./about.html
      • ./ มีความหมายว่า ที่อยู่ปัจจุบัน

  • กรณี file ที่เราต้องการไปอยู่ในโพลเดอร์ย่อยอีก (Subdirectory)

    • อ้างถึง directory ย่อยๆนั้นก่อน เช่นอยู่ในโพลเดอร์ projects เราจะเขียนได้แบบนี้ครับ
    • projects/hello.html หรือ ./projects/hello.html
    • ให้คิดว่าเป็นการต่อท้ายจาก director ปัจจุบัน

  • กรณี file อยู่ director หลัก หรือต้องย้อนกลับไป

    • กลับไปยัง directory ก่อนด้วย ../ หมายถึงกลับไป 1 ชั้น directory
    • เช่น ปัจจุบันเราอยู่ที่ไฟล์ /projects/index.html เราต้องการอ้างถึงไฟล์ index ที่อยู่ถอยหลังไป 1 ชั้น เราสามารถเขียนได้แบบนี้ครับ
    • ../index.html

การเข้าถึง Director จาก root

  • หากเราต้องการให้เริ่มต้นที่ director แรกเสมอ ให้เราพิมพ์ / ก่อน แล้วตามด้วย resource ที่เราต้องการ
  • มันจะทำการเริ่มที่ชื่อ host เราเสมอ

ปรับปรุงเว็บไซต์ของเรา

จากที่เราได้เรียนเรื่อง path มาเราจะมาปรับปรุงในส่วนของการเชื่อมโยงเว็บไซต์ภายในของเรากันครับ โดยในที่นี้ผมจะเลือกใช้ url แบบ relative

ในส่วนของหน้า index.html, about.html ,contact.html

<body>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
    <a href="./projects/index.html">Project</a>
  </nav>
</body>

ในส่วนของ projects/index.html, projects/hello.html เราจะเขียนให้มันย้อนกลับมาแบบนี้ครับ

<body>
  <nav>
    <a href="../index.html">Home</a>
    <a href="../about.html">About</a>
    <a href="../contact.html">Contact</a>
    <a href="index.html">Project</a>
  </nav>
</body>

เอกสารอ้างอิง

  • Jon Duckett (2011), HTML and CSS: Design and Build Websites.
  • Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park, Marian Zburlea (2019), The HTML and CSS Workshop.

HTML พื้นฐาน PART-4: Media แสดงข้อมูลที่เป็นสื่อ รูปภาพ วีดีโอและเสียง

Picture

รูปภาพเป็นส่วนสำคัญของเว็บไซต์ เรามักจะแทรกรูปภาพอยู่เสมอ เช่น Logo, ภาพพื้นหลัง ซึ่งช่วยทำให้เว็บไซต์เราดูสวยงามและเป็นเอกลักษณ์ โดยเราจะใช้ Element ที่ชื่อ img

<img>

การแทรกภาพอย่างรวดเร็วกำหนดเพียงแค่ src ก็เพียงพอที่จะแสดงผลแล้ว แต่ยังมี attribute อื่นๆที่เราสามารถเพิ่มลงไปได้ดังนี้ครับ

  • src เพื่อบอกบราวเซอร์ว่า ไฟล์ รูปภาพของเราอยู่ที่ไหน กำหนดเป็น path แบบที่เราจะได้เรียนในส่วนที่แล้ว
  • alt เป็นคำอธิบายภาพ
  • title อธิบายเพิ่มเติมเกี่ยวกับภาพ เมื่อเราเอาเมาส์วางที่รูปภาพ บราวเซอร์จะแสดงข้อความในส่วนนี้
  • width ระบุความกว้าง
  • height ระบุความสูง

ค่าที่สำคัญที่สุดคือ src หากเราไม่กำหนด ภาพจะไม่แสดง

โครงสร้างของโปรเจค

  • images
    • pic-1.jpg
    • pic-2.jpg
  • videos
    • vdo-1.mp4
  • audios
    • sound-1.mp3
  • index.html

จากโครงสร้างด้านบนเราจะใช้วิธี URL Relative ในการแทรงสื่อ

ตัวอย่างการแทรกรูปภาพ

<img src="images/pic-1.jpg" alt="แฮมเบอร์เกอร์" />

ทดลองเพิ่ม attibutes อื่นๆ

<img
  src="images/pic-1.jpg"
  alt="แฮมเบอร์เกอร์"
  title="แฮมเบอร์เกอร์"
  width="100px"
  height="100px"
/>

แทรกคำบรรยายใต้ภาพ

  • HTML5 ได้แนะนำองค์ประกอบ <figure>ใหม่เพื่อให้มีรูปภาพและคำอธิบายภาพ
  • <figure> สำหรับเป็น parent ครอบภาพและคำอธิบายภาพ
  • <figcaption> สำหรับแสดงคำอธิบายภาพ
<figure>
  <img src="images/pic-1.jpg" alt="แฮมเบอร์เกอร์" title="แฮมเบอร์เกอร์" />
  <p>
    <figcaption>แฮมเบอร์เกอร์เมนูนี้ จำหน่ายในราคาเพียง 50 บาท</figcaption>
  </p>
</figure>

ข้อคำนึงถึงเกี่ยวกับการแทรกภาพ

  • ชนิดไฟล์ที่ถูกต้อง jpg,jpeg, gif, png : หากเป็นสกุลอื่นบราวเซอร์จะไม่แสดงภาพ
  • อัตราส่วนของภาพที่เหมาะสม : อัตราส่วนที่กำหนดจะมีผลกับขนาดที่เขียน (width,height) หากกำหนดไม่สัมพันธ์กัน ภาพจะแสดงผลดูแปลก
  • ใช้ความละเอียดที่เหมาะสม : ภาพไม่ควรมีขนาดใหญ่จนเกินไปเพราะอาจทำให้ผู้ใช้ดาวโหลดภาพนาน

Video

สามารถแทรกได้ 2 แบบ

  • Host Video Services เป็นการแทรกวีดีโอโดยเรานำ video ที่ต้องการจะแสดง ไปฝากไว้กับ Host Video เช่น youtube, vimo จากนั้นผู้ให้บริการจะให้ code ส่วนแสดงผลมาใช้งาน ข้อดีคือ ตัวเล่นวีดีโอรองรับบราวเซอร์ส่วนใหญ่ มี Feature ที่หลากหลายและลดการใช้แบนด์วิดท์จำนวนมาก แต่ก็มีข้อเสียคือ วีดีโอจะต้องถูกอัพโหลดลงใน เว็บไซต์อื่นก่อน บางครั้งเราไม่ต้องการจะทำเช่นนั้น
  • ฝังลงในเว็บด้วย video element

ตัวอย่าง Host Video Services ของ Youtube

ฝังลงในเว็บไซต์ตัวเอง

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

  • H264: IE และ Safari
  • WebM: Android, Chrome, Firefox, Opera

ตัวอย่างการใช้ <video>

<video controls width="250">
  <source src="videos/flower.webm" type="video/webm" />
  <source src="videos/flower.mp4" type="video/mp4" />
  Sorry, your browser doesn't support embedded videos.
</video>

ตัวบราวเซอร์จะเลือกเล่นเฉพาะไฟล์ที่ตัวเองสามารถเล่นได้เท่านั้น หาก ไม่สามารถเล่นได้จะแสดงข้อความที่ เรากำหนดไว้

  • Sorry, your browser doesn’t support embedded videos.

รายละเอียด <video> เพิ่มเติม

<video> เป็นelement สำหรับแสดงวีดีโอ โดยจะทำงานร่วมกับ element source สำหรับการกำหนดชนิดของประเภทไฟล์

  • video

    • autoplay เล่นอัตโนมัติ

    • controls กำหนดค่าเป็น boolean (false, true) อนุญาติให้ ผู้ใช้สามารถควบคุมวีดีโอ เช่นระดับเสียง และหยุดชั่วคราว/เล่นต่อ

    • width, height กำหนดค่าเป็นพิกเซล (px) ความสูงและความกว้างของพื้นที่แสดงผลของวิดีโอ

    • loop กำหนดค่าเป็น boolean (false, true) จะเล่นวนซ้ำไปตลอด

    • muted กำหนดค่าเป็น boolean (false, true) หากตั้งค่าไว้ เสียงจะถูกปิดในตอนแรก

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

  • source

    • src สำหรับแสดงตำแหน่งไฟล์ของ video
    • type ประเภทของ video

Audio

สามารถแทรกได้ 2 แบบ

  • Host video services เช่น soundClound.com, MySpace.com
  • ใช้ <audio>

การรองรับ

  • MP3: Safari 5+, Chrome 6+, IE9
  • Ogg Vorbis: Firefox 3.6, Chome 6, Opera 1.5, IE9

ตัวอย่างการใช้ <audio>

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML5 video.
</video>

ส่วนการกำหนด attibutes อื่นๆนั้น จะเหมือนกับ element video

ศึกษา video, audio เพิ่มเติม

เอกสารอ้างอิง

  • Jon Duckett (2011), HTML and CSS: Design and Build Websites.

HTML พื้นฐาน PART-5: Table แสดงผลข้อมูลในรูปแบบตาราง

Table VS Text

ก่อนจะเริ่มเรียน Table เราลองมาดูข้อมูลทั้งสองประเภท เพื่อให้สามารถแยกข้อดีและข้อเสียของ Table ได้กันครับ

วันจันทร์เรียน ภาษาอังกฤษ,ภาษาไทย ,คณิตศาสตร์แล้วพักกลางวัน 1 ชั่วโมง แล้วเรียน บรูณาการ (ประวัติศาสตร์) บรูณาการ (สุขศึกษา & พลศึกษา)

วันอังคารเรียน คณิตศาสตร์, ภาษาไทย, วิทยาศาสตร์ แล้วพักกลางวัน 1 ชั่วโมง แล้วเรียนบรูณาการ (สังคมศึกษา)

วันพุธเรียน ภาษาไทยคณิตศาสตร์, ภาษาอังกฤษ,บรูณาการ   (สังคมศึกษา)

วันพฤหัสบดีเรียน ภาษาไทย, ภาษาอังกฤษ, คณิตศาสตร์แล้วพักกลางวัน 1 ชั่วโมง แล้วเรียน วิทยาศาสตร์  (วิทยาการคำนวณ)

วันศุกร์เรียน วิทยาศาสตร์, คณิตศาสตร์, ภาษาไทยแล้วพักกลางวัน 1 ชั่วโมง แล้วเรียน บรูณาการ    (ศิลปะ, กอท.)

จากข้อมูลต้องการจะรู้ว่า ชั่วโมงที่ 3 ของแต่ละวันมีเรียนอะไรบ้าง หากข้อมูลเป็นแบบนี้ เราจะใช้เวลาพอสมควรเลยในการอ่านเพื่อตอบคำถาม แต่ลองนำข้อมูลแบบเดิมมาเขียนเป็น Table เราจะพบว่ามันช่วยเราในการแสดงผลได้มากเลยครับ

Table

เป็นรูปแบบของการแสดงผลชนิดหนึ่งครับ ซึ่งประกอบไปด้วย แถว (row), column (หลัก)

Table แบบพื้นฐาน

ลองมาสร้าง table ด้วย html กันครับ โดยใน table จะประกอบไปด้วย element หลัก 3 ตัวนี้ครับ

  • <table> ใช้สำหรับสร้างตาราง
  • <tr> เป็นตัวย่อของคำว่า table row ทำหน้าที่เป็นแถวของตาราง
  • <td> เป็นตัวย่อของคำว่า table data ทำหน้าที่เป็น ข้อมูล/หลัก ของตาราง

การใช้งาน 3 element จะใช้งานซ้อนกันข้างในไป กล่าวคือ ใน table หนึ่งจะมี tr สำหรับแสดงแถว และใน tr จะมี td สำหรับแสดงข้อมูลในแต่ละแถว ลองดูตัวอย่างเพื่อความเข้าใจมากยิ่งขึ้นครับ

ตัวอย่าง Table

<body>
  <table>
    <tr>
      <td>ชื่อ Element</td>
      <td>ความหมาย</td>
      <td>ตัวอย่างการใช้งาน</td>
    </tr>
    <tr>
      <td>h1</td>
      <td>ทำหน้าที่แสดงหัวเรื่อง</td>
      <td>&lt;h1&gt; หัวเรื่อง &lt;/h1&gt;</td>
    </tr>
    <tr>
      <td>p</td>
      <td>สำหรับแสดงเนื้อหาข้อความ</td>
      <td>&lt;p&gt; เนื้อหาข้อความ.... &lt;/p&gt;</td>
    </tr>
  </table>
</body>

เราจะได้ตารางมาเรียบร้อยแล้วครับ หากเราต้องการเพิ่มเส้นขอบสามารถทำได้ด้วยการใช้ attribute ที่ชื่อ boder โดยจะกำหนดค่าเป็นความหนาของเส้นในแต่ละ column/data

<table border="1">
  ...
</table>

ในการทำงานจริงเรามักจะใช้ HTML เพื่อกำหนดโครงสร้างของตารางเท่านั้น ส่วนความสวยงามเช่น เส้นขอบเราจะกำหนดผ่าน css ครับ

TABLE เพิ่มเติม

นอกจาก 3 element หลักสำหรับสร้าง table แล้ว ยังมีตัวอื่นๆที่ไม่มีการแสดงผลโดยตรงต่อบรวเซอร์ แต่ช่วยในการแยกความแตกต่างของแต่ละส่วนใน Table

  • th เป็นตัวย่อของคำว่า table heading ทำหน้าที่คล้ายกับ td แต่จะใช้กำหนดเป็นหัวเรื่องของข้อมูล โดยบราวเซอร์จะเติมตัวหนาให้อัตโนมัติครับ
<table>
  <tr>
    <th>ชื่อ Element</th>
    <th>ความหมาย</th>
    <th>ตัวอย่างการใช้งาน</th>
  </tr>
  <tr>
    <td>h1</td>
    <td>ทำหน้าที่แสดงหัวเรื่อง</td>
    <td>&lt;h1&gt; หัวเรื่อง &lt;/h1&gt;</td>
  </tr>
  <tr>
    <td>p</td>
    <td>สำหรับแสดงเนื้อหาข้อความ</td>
    <td>&lt;p&gt; เนื้อหาข้อความ.... &lt;/p&gt;</td>
  </tr>
</table>
  • thead ทำหน้าที่คล้ายกับ tr แต่จะใช้กำหนดแถวของ table ในส่วนที่จะเป็นหัวเรื่อง ไม่ใช่ data
<table>
  <thead>
    <tr>
      <th>ชื่อ Element</th>
      <th>ความหมาย</th>
      <th>ตัวอย่างการใช้งาน</th>
    </tr>
  </thead>
  <tr>
    <td>h1</td>
    <td>ทำหน้าที่แสดงหัวเรื่อง</td>
    <td>&lt;h1&gt; หัวเรื่อง &lt;/h1&gt;</td>
  </tr>
  <tr>
    <td>p</td>
    <td>สำหรับแสดงเนื้อหาข้อความ</td>
    <td>&lt;p&gt; เนื้อหาข้อความ.... &lt;/p&gt;</td>
  </tr>
</table>
  • tbody สำหรับคลุมในส่วนของ data ใน table
<table border="1">
  <thead>
    <tr>
      <th>ชื่อ Element</th>
      <th>ความหมาย</th>
      <th>ตัวอย่างการใช้งาน</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>h1</td>
      <td>ทำหน้าที่แสดงหัวเรื่อง</td>
      <td>&lt;h1&gt; หัวเรื่อง &lt;/h1&gt;</td>
    </tr>
    <tr>
      <td>p</td>
      <td>สำหรับแสดงเนื้อหาข้อความ</td>
      <td>&lt;p&gt; เนื้อหาข้อความ.... &lt;/p&gt;</td>
    </tr>
  </tbody>
</table>
  • tfoot สำหรับแสดงส่วนสุดท้ายของ table อาจเป็นการสรุปผล order

ใน tr, td เราสามารถกำหนด attibutes width, height ได้ด้วย แต่ปัจจุบันเรานิยมมากำหนดใน css มากกว่าครับ

ขยาย Column (spanning column, merge column)

บางครั้งเราต้องการจะขยาย Column ของเราลงไปให้มากกว่า column อื่น ถ้าใครเคยใช้ Excel จะคุ้นกับคำว่า merge cell ใน html เราสามารถ ทำได้ด้วยการใช้ attibutes ที่ชื่อ colspan โดยจะต้องระบุจำนวนที่จะให้มันกินพื้นที่ไปด้วย

<table border="1">
  <thead>
    <tr>
      <th colspan="3">สรุป HTML Element</th>
    </tr>
    <tr>
      <th>ชื่อ Element</th>
      <th>ความหมาย</th>
      <th>ตัวอย่างการใช้งาน</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>h1</td>
      <td>ทำหน้าที่แสดงหัวเรื่อง</td>
      <td>&lt;h1&gt; หัวเรื่อง &lt;/h1&gt;</td>
    </tr>
    <tr>
      <td>p</td>
      <td>สำหรับแสดงเนื้อหาข้อความ</td>
      <td>&lt;p&gt; เนื้อหาข้อความ.... &lt;/p&gt;</td>
    </tr>
  </tbody>
</table>

ขยาย Row (Spanning Row, Merge Row)

เช่นเดียวกับตัวอย่างที่แล้วครับ หากเราต้องการ ขยายตัว data ในส่วนของแถวของเราให้มากกว่าส่วนอื่น เราสามารถทำได้ด้วย rowspan โดยจะต้องระบุ จำนวนที่จะขยายพื้นที่ไปด้วยครับ

แบบฝึกหัด

  • ทำตารางสอนด้วย table
  • ทำตารางสูตรคูณ แม่ 2-4 ด้วย table

เอกสารอ้างอิง

  • Jon Duckett (2011), HTML and CSS: Design and Build Websites.

HTML พื้นฐาน PART-6: Form สร้างฟอร์มรับข้อมูล

ฟอร์ม (FORM)

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

HTML เป็นเพียง Markup Language ทำหน้าเพียงแสดงผลข้อมูล ในด้านการประมวลผลไฟล์จะใช้ภาษา Backend เช่น PHP

Element ที่เกี่ยวข้อง

  • form
  • input
  • label
  • textarea
  • select
  • button

Form Element

<form></form> เป็น element สำหรับสร้างฟอร์ม โดยจะทำหน้าที่ควบคุม input ต่างๆภายใน ซึ่งจะ มี attibutes 2 อย่างที่จะต้องระบุ

  • action ระบุปลายทางของ URL Server ที่ต้องการจะให้ข้อมูลใน form เดินทางไป
  • method ชนิดของการส่งข้อมูล
    • GET : เป็นการส่งข้อมูลประเภทที่ unsecured data การส่งแบบนี้ข้อมูลจะปรากฏบน URL หากเราไม่ได้กำหนด method GET จะเป็นค่าเริ่มต้น
    • POST : เป็นการส่งข้อมูลประเภทที่ secured data การส่งแบบนี้ข้อมูลจะไม่ปรากฏบน URL

Method ทั้งสองต่างมีประโยชน์ทั้งคู่ แต่จะถูกใช้ในสถานการณ์ที่แตกต่างกัน

<body>
  <form action="./" method="GET"></form>
</body>

Input Element

เป็น element สำหรับรับข้อมูลจากผู้ใช้ โดยจะมี 2 attribute ที่สำคัญคือ

  • type สำหรับกำหนดชนิดข้อมูล เช่น radio buttons, checkboxes, text, password, number,date
  • name กำหนด key ที่จะใช้อ้างอิงเวลาข้อมูลถูกส่งไปยัง Server
  • placehoder กำหนดข้อความที่จะให้แสดงเพื่อบอกรายละเอียดของ input เพิ่มเติม
  • required กำหนดว่า filed นี้จะต้องระบุข้อมูล
<body>
  <form action="./">
    <div>
      <label for="username"> Username </label>
      <input
        type="text"
        name="username"
        id="username"
        placeholder="ระบุ Username"
        required
      />
    </div>
    <div>
      <label for="password"> Password </label>
      <input
        type="password"
        name="password"
        id="password"
        placeholder="ระบุ Password"
        required
      />
    </div>
  </form>
</body>

Label

เมื่อเราสร้าง Input ใดๆ เรามักจะมี ส่วนที่บอกว่า ช่อง input นี้คืออะไร โดยเราสามารถใช้ element แสดงข้อความตามที่เราได้เรียนไว้มาแสดงร่วมด้วยได้ แต่ html ได้สร้าง element ที่จะทำงานร่วมกันมาคือ label ซึ่งจะมี attribute ที่ชื่อ for สำหรับเชื่อมโยงไปยัง input โดยเราจะต้องกำหนด ID ให้กับ input ก่อน ดังตัวอย่างด้านล่างนี้ครับ

<form action="./">
  <div>
    <label for="username"> Username </label>
    <input type="text" name="username" id="username" />
  </div>
  <div>
    <label for="password"> Password </label>
    <input type="password" name="password" id="password" />
  </div>
</form>

ข้อสังเกตที่สำคัญ เมื่อเราทำการ link for กับ id แล้ว หากเราคลิกที่ label เว็บบราวเซอร์จะนำทางเราไปยัง input อัตโนมัติ

Radio Button

radio button จะเป็นรูปแบบที่อนุญาติให้ผู้ใช้เลือกค่าที่เรากำหนดไว้แล้ว เพียงค่าเดียว โดยเราสามารถใช้ input จากนั้นกำหนด type เป็น radio ก็จะสามารถใช้ได้แล้วครับ ซึ่งจะมี attributes เพิ่มขึ้นมา 2 ตัวคือ

  • checked ใช้เพื่อระบุว่า input นี้ควรถูกเลือก
  • value ใช้เพื่อกำหนดค่าของข้อมูลที่จะส่งไป

ข้อควรรู้ที่สำคัญของ type แบบ radio คือจะต้องมี name ชื่อเดียวกันสำหรับกลุ่มเดียวกัน

<form action="./">
  <div>
    Gender
    <input type="radio" value="male" id="male" name="gender" />
    <label for="male">ชาย</label>
    <input type="radio" value="female" id="female" name="gender" />
    <label for="female">หญิง</label>
  </div>
</form>

Checkbox

ใช้สำหรับรับค่าจากผู้ใช้ที่อนุญาติให้เลือกค่าได้มากกว่า 1 ค่า ลักษณะการเขียนและ attribute จะเหมือนกับ radio เลยครับ แตกต่างกันที่ type ของ input จะเป็น checkbox

<div>
  งานอดิเรก
  <input type="checkbox" value="movie" id="movie" name="favorit" />
  <label for="movie">ดูหนัง</label>
  <input type="checkbox" value="music" id="music" name="favorit" />
  <label for="music">ฟังเพลง</label>
  <input type="checkbox" value="book" id="book" name="favorit" />
  <label for="book">อ่านหนังสือ</label>
  <input type="checkbox" value="game" id="game" name="favorit" />
  <label for="game">เล่นเกม</label>
</div>

File Input

บางครั้งเราต้องการให้ผู้ใช้แนบไฟล์จากเครื่อง เราจะใช้ input โดยจะระบุ type เป็น file ซึ่งเมื่อ form ของเรามีการอัพโหลด file จะต้องการการระบุ attribute เพิ่มเติมดังนี้ครับ

<form action="./" enctype="multipart/form-data">
  <div>
    <label for="upload"> Upload</label>
    <input type="file" name="upload" id="upload" />
  </div>
</form>

Textarea Element

textarea จะใช้ในการสร้างตัวรับข้อมูลสำหรับ ข้อความหลายบรรทัด ซึ่งสามารถกำหนดได้ด้วย attribute rows

<form action="./">
  <div>
    <label for="description">Description</label>
    <textarea name="description" id="description" rows="5"></textarea>
  </div>
</form>

Select Element

select จะเป็นข้อมูลในลักษณะของ dropdown จะรับค่าจากผู้ใช้ โดยจะมี option เป็น element ลูกสำหรับสร้างตัวเลือก มีรายละเอียด attribute ดังนี้ครับ

select

  • name สำหรับกำหนดชื่อ key ที่จะส่งไปยัง server
  • multiple เมื่อกำหนดส่วนนี้จะอนุญาติให้ dropdown สามารถรับค่าได้มากกว่า 1 ค่า

option

  • value สำหรับกำหนดค่าของแต่ละตัวเลือก
<div>
  <label for="device">ใช้งานเว็บไซต์บนอุปกรณ์ใด</label>
  <select name="device" id="device">
    <option value="computer">คอมพิวเตอร์</option>
    <option value="tablet">แท็บเล็ต</option>
    <option value="phone">phone</option>
  </select>
</div>

Button Element

button เป็นอีก element ที่ทำงานร่วมกับ form โดยเราสามารถ กำหนด atttribute ได้ดังนี้ครับ

  • value สำหรับกำหนดค่า button เหมาะแก่การเอาไว้ตรวจสอบว่ามาจาก button ไหนครับ
  • type สำหรับชนิดของ button
    • submit สำหรับส่งค่า form ไปยัง server
    • reset สำหรับการล้างค่าใน form
<form action="./" enctype="multipart/form-data">
  <div>
    <button type="submit" value="submit">Submit</button>
    <button type="reset" value="Reset">Submit</button>
  </div>
</form>

เอกสารอ้างอิง

  • Jon Duckett (2011), HTML and CSS: Design and Build Websites.

HTML พื้นฐาน PART-7: HTML เชิงความหมาย (HTML Sematic)

Sematics

ในการเขียนโปรแกรม Sematics หมายถึง ความหมายของ code ตัวอย่างเช่น คำสั่งบรรทัดนี้หมายถึงอะไร element html นี้มีจุดประสงค์อะไร แทนที่หน้าตาจะเป็นอย่างไร ?

Sematics in HTML

Semaic HTML คือการที่เราใช้ tag html เพื่อสื่อความหมายของบางสิ่ง เช่น เราจะสร้างส่วนเมนู โดยทั่วไปเราสามารถใช้ div เพื่อสร้าง block ของส่วนเมนูได้ แต่ในทาง Sematic เชิงความหมายเราจะใช้ <nav> แทน

<!-- แบบนี้ไม่ใช่ Sematic HTML -->

<div id="nav">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
</div>

<!-- แบบ Sematic HTML -->
<div id="nav">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
</div>
<!-- แบบนี้ไม่ใช่ Sematic HTML -->
<div>หัวเรื่อง</div>
<!-- แบบ Sematic HTML -->
<h1>หัวเรื่อง</h1>

สามารถเข้าไปดู Sematic สำหรับข้อความได้ในบทความนี้ของเราครับ

  • HTML พื้นฐาน PART-2: Element สำหรับปรับแต่งข้อความ

ทำไมต้องเขียน HTML แบบ Sematic

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

Element สำหรับจัดวางหน้าเว็บ

  • <header> ส่วนหัวของเว็บ
  • <nav> ส่วนของเมนูหรือการนำทางภายในเว็บ
  • <article> ส่วนแสดงเนื้อหาข้อเว็บ
  • <section> กลุ่มขอหัวข้อย่อย
  • <aside> เนื้อหาอื่นๆเพิ่มเติม
  • <footer> ส่วนท้ายของเว็บ

ตัวอย่างการปรับปรุง HTML

โดยจะทำการปรับปรุงโค้ด html ด้านล่างเพื่อให้เป็น Sematic HTML ครับ

<!DOCTYPE html>
<html>
  <head>
    <title>ผัดไท</title>
  </head>
  <body>
    <h1>ผัดไท - จานเด็ด</h1>
    <img src="./images/p1.jpg" width="250" height="250" />
    <div>
      <a href="#intro">ผัดไทย</a>
      <a href="#padthai">ความหลากหลาย</a>
      <a href="#other">อ้างอิง</a>
    </div>
    <p id="intro">
      <b> ผัดไทย </b>
      (มักสะกดผิดเป็น ผัดไท) เป็นอาหารไทยที่หารับประทานได้ทั่วประเทศไทย
      โดยเฉพาะในภาคกลาง และอาจพบได้ในร้านอาหารไทยในต่างประเทศบางแห่ง
    </p>
    <div id="padthai">
      <p>ความหลากหลาย</p>
      <ul>
        <li>
          ผัดไทยทิพสมัย ประตูผี แขวงสำราญราษฎร์ เขตพระนคร ใส่กุ้งสดตัวโต
          ใช้เส้นจันท์ และห่อไข่ มีชื่อเสียงมาก
        </li>
        <li>อำเภอท่ายาง จังหวัดเพชรบุรี ปรุงรสด้วยน้ำตาลโตนด</li>
        <li>เยาวราช ใส่กุ้งต้มที่ออกรสเค็ม ขายในกระทงใบตอง</li>
        <li>
          วัดท้องคุ้ง วัดกลางพุฒนิมิต จังหวัดอ่างทอง รสหวานนำ
          กินคู่กับมะม่วงเปี้ยวหรือมะเฟืองเปรี้ยว
        </li>
      </ul>
    </div>
    <div id="other">
      <p>อ้างอิงข้อมูล</p>
      <ul>
        <li>https://th.wikipedia.org/wiki/ข้าวผัด_(ไทย)</li>
      </ul>
    </div>
    <p>สร้างเว็บไซต์โดย ntpon</p>
  </body>
</html>

Heading

เริ่มต้นส่วนที่เป็นหัวเรื่องสำคัญของหน้าเว็บเพจ เรานิยมจะใช้ <header></header> โดยมักจะทำงานร่วมกับ h1 เพื่อแสดงเป็นหัวเรื่องหลักครับ

<body>
  <header>
    <h1>ผัดไท - จานเด็ด</h1>
    <img src="./images/p1.jpg" width="250" height="250" />
  </header>
</body>

เรามักจะใช้ nav สำหรับส่วนที่เป็นการนำทางหรือเมนูภายในเว็บไซต์

<nav>
  <a href="#intro">ผัดไทย</a>
  <a href="#padthai">ความหลากหลาย</a>
  <a href="#other">อ้างอิง</a>
</nav>

Article, Section

เราจะใช้ article เพื่อคลุมในส่วนที่เป็นเนื้อหาหรือบทความของเว็บไซต์

<article>
  <p id="intro">
    <b> ผัดไทย </b>
    (มักสะกดผิดเป็น ผัดไท) เป็นอาหารไทยที่หารับประทานได้ทั่วประเทศไทย
    โดยเฉพาะในภาคกลาง และอาจพบได้ในร้านอาหารไทยในต่างประเทศบางแห่ง
  </p>
  <div id="padthai">
    <p>ความหลากหลาย</p>
    <ul>
      <li>
        ผัดไทยทิพสมัย ประตูผี แขวงสำราญราษฎร์ เขตพระนคร ใส่กุ้งสดตัวโต
        ใช้เส้นจันท์ และห่อไข่ มีชื่อเสียงมาก
      </li>
      <li>อำเภอท่ายาง จังหวัดเพชรบุรี ปรุงรสด้วยน้ำตาลโตนด</li>
      <li>เยาวราช ใส่กุ้งต้มที่ออกรสเค็ม ขายในกระทงใบตอง</li>
      <li>
        วัดท้องคุ้ง วัดกลางพุฒนิมิต จังหวัดอ่างทอง รสหวานนำ
        กินคู่กับมะม่วงเปี้ยวหรือมะเฟืองเปรี้ยว
      </li>
    </ul>
  </div>
</article>

จากนั้นจะปรับปรุงให้แต่ละส่วนแยกออกจากกันด้วย section และใช้ h2 สำหรับหัวข้อย่อย

<article>
  <section id="intro">
    <h2>ผัดไทย</h2>
    <p>
      (มักสะกดผิดเป็น ผัดไท) เป็นอาหารไทยที่หารับประทานได้ทั่วประเทศไทย
      โดยเฉพาะในภาคกลาง และอาจพบได้ในร้านอาหารไทยในต่างประเทศบางแห่ง
    </p>
  </section>
  <section id="padthai">
    <h2>ความหลากหลาย</h2>
    <ul>
      <li>
        ผัดไทยทิพสมัย ประตูผี แขวงสำราญราษฎร์ เขตพระนคร ใส่กุ้งสดตัวโต
        ใช้เส้นจันท์ และห่อไข่ มีชื่อเสียงมาก
      </li>
      <li>อำเภอท่ายาง จังหวัดเพชรบุรี ปรุงรสด้วยน้ำตาลโตนด</li>
      <li>เยาวราช ใส่กุ้งต้มที่ออกรสเค็ม ขายในกระทงใบตอง</li>
      <li>
        วัดท้องคุ้ง วัดกลางพุฒนิมิต จังหวัดอ่างทอง รสหวานนำ
        กินคู่กับมะม่วงเปี้ยวหรือมะเฟืองเปรี้ยว
      </li>
    </ul>
  </section>
</article>

Aside

aside เราจะใช้ในส่วนที่เป็นเนื้อหาอื่นๆเพิ่มเติม

<aside id="other">
  <h2>อ้างอิงข้อมูล</h2>
  <ul>
    <li>https://th.wikipedia.org/wiki/ข้าวผัด_(ไทย)</li>
  </ul>
</aside>

สำหรับ footer มักจะใช้ในการอ้างลิขสิทธิ์ของเว็บ หรือ ข้อมูลการติดต่อของเว็บ โดยจะอยู่ท้ายสุดของหน้าเว็บ

<footer>สร้างเว็บไซต์โดย ntpon</footer>

ตัวอย่าง Sematic HTML

<!DOCTYPE html>
<html>
  <head>
    <title>ผัดไท</title>
  </head>
  <body>
    <header>
      <h1>ผัดไท - จานเด็ด</h1>
      <img src="./images/p1.jpg" width="250" height="250" />
    </header>
    <nav>
      <a href="#intro">ผัดไทย</a>
      <a href="#padthai">ความหลากหลาย</a>
      <a href="#other">อ้างอิง</a>
    </nav>
    <article>
      <section id="intro">
        <h2>ผัดไทย</h2>
        <p>
          (มักสะกดผิดเป็น ผัดไท) เป็นอาหารไทยที่หารับประทานได้ทั่วประเทศไทย
          โดยเฉพาะในภาคกลาง และอาจพบได้ในร้านอาหารไทยในต่างประเทศบางแห่ง
        </p>
      </section>
      <section id="padthai">
        <h2>ความหลากหลาย</h2>
        <ul>
          <li>
            ผัดไทยทิพสมัย ประตูผี แขวงสำราญราษฎร์ เขตพระนคร ใส่กุ้งสดตัวโต
            ใช้เส้นจันท์ และห่อไข่ มีชื่อเสียงมาก
          </li>
          <li>อำเภอท่ายาง จังหวัดเพชรบุรี ปรุงรสด้วยน้ำตาลโตนด</li>
          <li>เยาวราช ใส่กุ้งต้มที่ออกรสเค็ม ขายในกระทงใบตอง</li>
          <li>
            วัดท้องคุ้ง วัดกลางพุฒนิมิต จังหวัดอ่างทอง รสหวานนำ
            กินคู่กับมะม่วงเปี้ยวหรือมะเฟืองเปรี้ยว
          </li>
        </ul>
      </section>
    </article>
    <aside id="other">
      <h2>อ้างอิงข้อมูล</h2>
      <ul>
        <li>https://th.wikipedia.org/wiki/ข้าวผัด_(ไทย)</li>
      </ul>
    </aside>
    <footer>สร้างเว็บไซต์โดย ntpon</footer>
  </body>
</html>

เอกสารอ้างอิง

← Blog · RSS