บทนำ (Introduction)


HTML คืออะไร ?

  • HTML คือ ภาษาโปรแกรมหลักที่ใช้ในการแสดงผลบนหน้าเว็บไซต์ โดยใช้ Tag เป็นตัวกำหนดการแสดงผล
  • ย่อมาจากคำว่า Hypertext Markup Language
  • HTML Tag มีไว้แบ่งองค์ประกอบต่างๆ บนหน้าเว็บไซต์ เช่น Header Sidebar Footer Body ฯลฯ
  • HTML Tag มีไว้แบ่งองค์ประกอบของเนื้อหา เช่น หัวข้อ ย่อหน้า ตาราง ตัวหนา เป็นต้น
  • Browser จะไม่แสดง HTML Tags แต่ใช้มันเพื่อประมวลหน้าตาการแสดงผล
  • มักจะใช้ร่วมกับภาษา CSS และ JavaScript

ตัวอย่าง HTML อย่าง่าย

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

อธิบายตัวอย่าง

  • <!DOCTYPE html> กำหนดประเภทเอกสารเป็น HTML5
  • <html> เป็น Tag นอกสุดเพื่อบอกว่านี่คือหน้าเว็บ HTML
  • <head> ภายใน Tag head เป็นข้อมูลเกี่ยวกับหน้าเว็บ ที่จะไม่แสดงผลบนเบราว์เซอร์
  • <title> ระบุหัวข้อของเว็บไซต์
  • <body> ใส่เนื้อหา เพื่อแสดงผลบนหน้าเว็บไซต์
  • <h1> กำหนดหัวข้อตัวหนา
  • <p> กำหนดย่อหน้า

HTML Tag

HTML Tag คือ โค้ดที่ประกอบด้วยชื่อ Tag และวงเล็บสามเหลี่ยม

<tagname>...เนื้อหา...</tagname>

อธิบายตัวอย่าง

  • HTML Tag จะมาเป็นคู่เสมอ ตัวอย่างเช่น <p> เนื้อหา </p>
  • <tagname> อันแรกคือการเปิด Tag </tagname> อันที่สองคือการปิด Tag
  • การปิด Tag เขียนเหมือนการเปิด เพียงแต่มีเครื่องหมาย / อยู่ข้างหน้าชื่อ Tag

เว็บเบราว์เซอร์ (Web Browser)

  • คือ โปรแกรมเปิดเว็บไซต์ ได้แก่ Chrome, Internet Explorer, Mozilla Firefox, Safari เป็นต้น
  • งานหลักของเว็บเบราว์เซอร์ คือ อ่านโค้ด HTML และแสดงผลออกมา
  • เบราว์เซอร์จะไม่แสดง HTML Tag แต่ใช้มันเพื่อประมวลผลว่าควรจะแสดงเนื้อหาออกมาหน้าตาอย่างไร


โครงสร้างหน้าเว็บ HTML

ตัวอย่างภาพโครงสร้างหน้าเว็บ HTML

<html>
<head>
<title>ชื่อหน้าเว็บ</title>
</head>
<body>
<h1>นี่คือหัวข้อ</h1>
<p>นี่คือย่อหน้าที่หนึ่ง</p>
<p>นี่คือย่อหน้าที่สอง</p>
</body>
</html>


การระบุ <!DOCTYPE>

  • <!DOCTYPE> คือการระบุประเภทเอกสาร และช่วยให้เบราว์เซอร์แสดงผลหน้าเว็บได้อย่างถูกต้อง
  • จะอยู่บรรทัดบนสุดของไฟล์ (ก่อนทุกๆ HTML Tag ทั้งหมด)

การระบุเอกสารว่าเป็น HTML คือ


                        
                    

เวอร์ชั่นของ HTML

เวอร์ชั่นปี ค.ศ.
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014
HTML 5.12016