HTML คืออะไร? ทำไมทุกเว็บไซต์ต้องมี HTML

ดัชนี

• 1. อะไรคือ HTML
• 2. div, class, id, ul, li ใน HTML
• 3. div คืออะไร
• 4. class คืออะไร
• 5. id คืออะไร
• 6. ul คืออะไร
• 7. li คืออะไร
• 8. a คืออะไร
• 9. ตัวอย่าง HTML พร้อมตกแต่ง
• 10. ท้ายสุด

อะไรคือ HTML

HTML ย่อมาจาก HyperText Markup Language มันคือโครงสร้างของเว็บ เอาไว้กำหนดว่าหน้าเว็บของเรามีอะไรบ้าง ไม่ใช่ภาษาสำหรับคำนวณ แต่เป็นภาษาที่ช่วยจัดโครงสร้างเนื้อหาสำหรับเว็บเบราว์เซอร์ หัวข้อใหญ่ หัวข้อย่อย บทความ รูปภาพ ปุ่ม กำหนดแล้วใช้ CSS ตกแต่ง หรือถ้าอยากมีการโต้ตอบก็ใช้ JS มาทำต่อ แต่ก็เริ่มต้นจาก HTML และตัว HTML เองก็บอกว่าอะไรอยู่ตรงไหน และมีหน้าที่อะไร หัวข้อใหญ่ ย่อหน้า ลิงก์ ปุ่มส่งฟอร์ม

• HyperText = ข้อความที่เชื่อมโยงกันได้ (กดลิงก์ไปหน้าต่าง ๆ ได้)
• Markup = การ "ทำเครื่องหมาย" ให้รู้ว่า อันนี้คือหัวข้อ, อันนี้คือย่อหน้า ฯลฯ
• Language = ภาษา (แต่เป็นภาษาที่บอกโครงสร้างนะ ไม่ใช่ภาษาคำนวณเหมือนโปรแกรมมิ่ง)

ตัวอย่าง HTML เบื้องต้น

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

เหมาะกับคนทั่วไปยังไง?

สามารถนำไปสร้างเว็บไซต์ส่วนตัวง่าย ๆ ได้เอง

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

เสริมความรู้และแก้ไขเว็บที่มีเทมเพลตอยู่แล้วได้

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

เรียนรู้เพื่อไปต่อยอดอย่างอื่น

สามารถเรียนรู้เพื่อไปต่อยอดขายเว็บจริงจังก็ต้องรู้ HTML เป็นพื้นฐาน แล้วไปต่อยอด CSS, JS และ PHP, ฯลฯ

ตัวอย่างสถานการณ์จริงๆ

• เปิดเพจร้านกาแฟ → ทำเว็บเมนูออนไลน์ง่าย ๆ
• รับงานเขียนบทความ → ทำเว็บรวมผลงานส่งลูกค้า
• ขายของแฮนด์เมด → ทำเว็บโชว์สินค้า
• สมัครงาน → แนบลิงก์เว็บไซต์พอร์ตตัวเองที่ทำด้วย HTML

div, class, id, ul, li h1-h5 ใน HTML

ใช้บ่อยมากควรรู้จักและนำไปใช้ได้จริงใช้ได้เสมอๆในระบบ HTML ที่เราจะแสดงตัวอย่างและอธิบายรูปแบบที่จะแสดงออกไป ในการสร้างและการนำไปใช้

• โค้ดที่จะกล่าวถึงในการใช้งานรูปแบบที่แตกต่างและหน้าที่ที่ต่างกัน
  • <div> คืออะไร?
  • class คืออะไร?
  • id คืออะไร?
  • ul คืออะไร?
  • li คืออะไร?
  • h1-h5 คืออะไร?

<div> คืออะไร?

div ย่อมาจาก division = การแบ่งกล่อง ให้มองเว็บทั้งเว็บเป็น 1 กล่อง และที่เหลือที่ถูกสร้างด้วย <div> เองก็คือกล่องที่อยู่ในกล่อง และเอาไว้ครอบ กลุ่มเนื้อหา เช่น ย่อหน้า, รูป, ปุ่ม ฯลฯ ให้เป็น "กลุ่มเดียวกัน" เพื่อทำให้ตัวเว็บไซต์เองมีความเป็นระบบเบียบและตกแต่งง่ายด้วย CSS

ตัวอย่าง <div> 1 ชั้น

โค้ดตัวอย่าง <div> 1 ชั้น

CSS ที่ต้องทำให้ สัมพันธ์กัน

ตัวอย่าง <div> 3 ชั้น ซ้อนกัน

โค้ดตัวอย่าง <div> 3 ชั้น

CSS ที่ต้องทำให้ สัมพันธ์กัน

class คืออะไร?

ใช้ "ตั้งชื่อกลุ่ม" หรือแท็กอื่นๆ นิยมใช้เป็นกลุ่ม เช่น .card, .menu, .product-block เพื่อช่วยให้เว็บขยายง่าย และแก้ไขรวดเร็ว ในหนึ่งชุดการเขียนโค้ดมีหลายอันได้ ซ้ำได้ เมื่อเปลี่ยนสี ด้วย CSS จะเปลี่ยนพร้อมกันหมดเลย มีรูปแบบการใช่งานที่หลากหลาย ตัวอย่างเช่นเมื่อต้องการสร้างเว็บหลายๆชุดพร้อมกัน เพื่อให้ผู้อ่านใช้งานสะดวกขึ้น

• ประโยชน์ของ class ในอนาคต:
  • เวลาเว็บใหญ่ขึ้น เช่น 100 กล่องสินค้า → เปลี่ยนดีไซน์แค่ครั้งเดียวทุกกล่อง
  • JavaScript ก็สามารถ "หากล่องที่มี class เดียวกัน" แล้วทำงานได้ เช่น สร้าง animation ทีเดียวหมด
  • Framework ใหญ่ ๆ เช่น Bootstrap, Tailwind ก็ใช้ class เป็นหลักหมด

ตัวอย่าง <div class=" " >

โค้ดตัวอย่าง <div class=" " >

CSS ที่ต้องทำให้ สัมพันธ์กัน

id คืออะไร และใช้อย่างไร?

id = ย่อมาจาก identifier → หมายถึง "ตัวระบุเฉพาะ" ใช้ในการตั้งชื่อเฉพาะเจาะจงสำหรับแท็กเดียว ในหน้าเว็บ 1 เว็บห้ามมี id ซ้ำกันเด็ดขาด ควรมีแค่หนึ่งเดียวในแต่ละหน้า เพราะ JavaScript และ CSS จะอ้างอิงตัวแรกที่เจอเท่านั้นใช้ในการตกแต่งเฉพาะจุดด้วย CSS หรือการส่งข้อมูลผ่าน id จาก JS

• การใช้งาน:
  • CSS แบบเฉพาะจุด เช่น เปลี่ยนพื้นหลังแค่กล่องเดียว
  • เชื่อมกับเมนูนำทาง เช่น กดปุ่มแล้วเลื่อนไปที่ id นั้น
  • เรียกใช้งานใน JavaScript เช่น ดึงข้อมูล, เปลี่ยนสี, แสดง/ซ่อน id นั้น ๆ

ตัวอย่าง < id >

โค้ดตัวอย่าง < id > 3 ชั้น

CSS ที่ต้องทำให้ สัมพันธ์กัน

ตัวอย่าง < id > ใช้กับ JavaScript ทดสอบการเลื่อน

โค้ดตัวอย่าง < id > ใช้กับ JavaScript ทดสอบการเลื่อน

โค้ดตัวอย่าง JavaScript ทดสอบการเลื่อน

<ul> คืออะไร และใช้อย่างไร?

Unordered List คือ รายการที่ไม่เรียงลำดับ" (ไม่มีเลข 1. 2. 3.) ใช้สร้างลิสต์ข้อมูล ที่ไม่มีความจำเป็นต้องเรียงลำดับ. เช่น รายการสินค้า เมนูเว็บ คุณสมบัติสินค้า และอื่นๆ

<li> คืออะไร และใช้อย่างไร?

<li> ย่อมาจาก List Item คือ แต่ละข้อในรายการ" (ไม่มีเลข 1. 2. 3.) <li> ต้องอยู่ใน <ul> หรือ <ol> เท่านั้น

ตัวอย่างการใช้งานในช่วงต้นของบล็อกนำไปเป็นหัวข้อที่นำเสนอ

จะเป็นการโครงสร้างด้วย ul และ li และ a ใช้สำหรับการลิงก์ภายในหน้าเว็บไปในส่วนต่างๆ

โค้ดตัวอย่าง <ul> และ <li>

<a> คืออะไร และใช้อย่างไร?

<a> ย่อมากจาก anchor แปลว่า สมอเรือ ใช้เชื่อมไปยังจุดอื่นๆเช่นลิงก์ไปเว็บอื่น หรือลิงก์ไปในหน้าเดียวกัน เช่น ไปยังเว็บ WebDevOhm หรือ CSS ก็ได้เช่นกัน

ตัวอย่างการใช้งานลิงก์ไปยังเว็บอื่นๆ <a>

• สามารถชมเทมเพลตทั้งหมดทั้ง php และ html ที่วางขายใน themeforest(เร็วๆนี้)
• สามารถชมบริการทั้งหมดของเรา
• สามารถชมเช่ากับเราสิไม่ต้องสร้างเองมี โดเมนและโฮตส์ให้
• สามารถชมซื้อขาดไปใช้งานต่อก็ได้เป็นโค้ด php นะครับ ส่วน htmlบนthemeforest(เร็วๆนี้)จะมาเร็วๆนี้แน่นอน
• สามารถชมสั่งทำระบบเฉพาะทางเราก็รับทำขึ้นอยู่กับเสกลที่จะทำนะครับ
• สามารถชมความรู้กับเราต่อก็ได้เลยครับชาอุ่น ๆ ข้างกาย รับความรู้กับเราต่อฟรี ๆ
• ท่านใดอยากซัพพอร์ต โอนที่เบอร์หรือติดต่อทางemail เพื่อขอรหัสธนาคารได้ครับทางทีมของเรายินดีรับเป็นกาแฟร้อนหรือชาอุ่นๆให้ได้รับบทความดีๆแบบนี้อีกครับ

โค้ดตัวอย่าง <a>

การนำไปใช้งาน

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

โครงสร้างหลักๆที่ใช้งานโดยรวมทั้งเนื้อหา การทำ SEO การทำโลโก้ในแท็ป การเรียก cssมาใช้งานและอื่นๆในส่วน <head> ที่มีการเก็บการเชื่อมโยงไปหน้าอื่นไว้ header การเก็บเนื้อหาต่างๆด้วย <main></main> ที่มีการใช้ section ด้านใน และการใส่ลิงก์ส่งท้ายด้วย <footer>