ไฟล์ HTML คืออะไร?

HTML (Hyper Text Markup Language) เป็นส่วนขยายสำหรับเว็บเพจที่สร้างขึ้นสำหรับแสดงผลในเบราว์เซอร์ รู้จักกันในนามภาษาของเว็บ HTML ได้รับการพัฒนาพร้อมกับข้อกำหนดของข้อกำหนดข้อมูลใหม่ที่จะแสดงเป็นส่วนหนึ่งของเว็บเพจ ตัวแปรล่าสุดเรียกว่า HTML 5 ซึ่งให้ความยืดหยุ่นอย่างมากในการทำงานกับภาษา เพจ HTML นั้นได้รับจากเซิร์ฟเวอร์ซึ่งโฮสต์ไว้ หรือสามารถโหลดจากระบบโลคัลได้เช่นกัน หน้า HTML แต่ละหน้าประกอบด้วยองค์ประกอบ HTML เช่น แบบฟอร์ม ข้อความ รูปภาพ ภาพเคลื่อนไหว ลิงก์ ฯลฯ องค์ประกอบเหล่านี้แสดงด้วยแท็กและองค์ประกอบอื่นๆ ที่แต่ละแท็กมีจุดเริ่มต้นและจุดสิ้นสุด นอกจากนี้ยังสามารถฝังแอปพลิเคชันที่เขียนด้วยภาษาสคริปต์ เช่น JavaScript และ Style Sheets (CSS) เพื่อแสดงโครงร่างโดยรวม

ประวัติย่อ

นับตั้งแต่ก่อตั้งและเปิดตัวครั้งแรก ข้อมูลจำเพาะของ HTML ได้รับการดูแลโดย World Wide Web Consortium (W3C) ตั้งแต่ปี 1996 ในปี 2000 ก็กลายเป็นมาตรฐานสากล (ISO/IEC 15445:2000) ในปี 1999 HTML 4.01 ได้รับการเผยแพร่ ในปี 2004 Web Hypertext Application Technology Working Group (WHATWG) ได้เริ่มทำงานกับเวอร์ชัน HTML5 ซึ่งกลายเป็นการส่งมอบร่วมกับ W3C ในปี 2008 เสร็จสมบูรณ์และได้มาตรฐานเมื่อวันที่ 28 ตุลาคม 2014

โครงสร้างรูปแบบไฟล์ HTML

เอกสาร HTML 4 ประกอบด้วยสามส่วน:

  1. บรรทัดที่มีข้อมูลเวอร์ชัน HTML
  2. ส่วนหัวประกาศ
  3. เนื้อความ ซึ่งมีเนื้อหาจริงของเอกสาร ร่างกายอาจถูกนำมาใช้โดยองค์ประกอบ BODY หรือองค์ประกอบ FRAMESET เพื่อบรรจุเนื้อหาในเฟรม

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Understanding HTML File Format</TITLE>
   </HEAD>
   <BODY>
      <P>Hello World!
   </BODY>
</HTML>

ข้อมูลรุ่น

โค้ดบรรทัดแรก <!DOCTYPE html> เรียกว่าการประกาศประเภทเอกสารและบอกเบราว์เซอร์ว่าหน้านี้เขียนด้วย HTML เวอร์ชันใด ขึ้นอยู่กับเวอร์ชันของ HTML มีการประกาศประเภทเอกสารที่แตกต่างกันจำนวนหนึ่งซึ่งตั้งชื่อข้อกำหนดประเภทเอกสาร (DTD) ที่ใช้สำหรับเอกสาร แต่ละ DTD แตกต่างจากองค์ประกอบอื่น ๆ ที่รองรับและแตกต่างกันดังต่อไปนี้:

  • HTML 4.01 เข้มงวด - รวมองค์ประกอบและคุณสมบัติทั้งหมดที่ยังไม่ เลิกใช้แล้ว หรือไม่ปรากฏในเอกสารชุดเฟรม
  • HTML 4.01 Transitional - รวมทุกอย่างใน DTD ที่เข้มงวด รวมถึงองค์ประกอบและแอตทริบิวต์ที่เลิกใช้แล้ว (ซึ่งส่วนใหญ่เกี่ยวข้องกับการนำเสนอด้วยภาพ
  • HTML 4.01 เฟรมเซ็ต - รวมทุกอย่างในเฟรม DTD plus ช่วงเปลี่ยนผ่านด้วย

สำหรับ HTML5 ข้อมูลเวอร์ชันมีดังต่อไปนี้

<!DOCTYPE html>

ข้อมูลส่วนหัว HTML

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

สำหรับการตั้งชื่อหน้า องค์ประกอบ ชื่อเรื่อง เป็นองค์ประกอบเดียวที่จำเป็นภายใน แท็ก เครื่องมือค้นหาใช้สิ่งเดียวกันนี้เพื่อระบุชื่อเรื่องของหน้า

ข้อมูลเนื้อหา HTML

นี่คือส่วนหลักในไฟล์ที่มีเนื้อหาทั้งหมดของไฟล์ที่แสดงผลโดยเบราว์เซอร์ เนื้อความ Html สามารถมีมาร์กอัปที่สามารถอ้างถึงแบบเอกสารสำเร็จรูปต่างๆ ในรูปของแท็ก สามารถบรรจุข้อมูลหลายประเภท เช่น ข้อความ รูปภาพ สี กราฟิก ฯลฯ นอกจากนี้ องค์ประกอบเสียงและวิดีโอยังสามารถฝังในเนื้อหา html สำหรับแสดงผลโดยเบราว์เซอร์ เนื่องจากมีแอปพลิเคชันสไตล์ชีตสมัยใหม่สำหรับการนำเสนอด้วยภาพ คุณลักษณะการนำเสนอของ BODY เช่น สีพื้นหลัง สีลิงก์ สีข้อความ ฯลฯ จึงเลิกใช้แล้ว ดังนั้น เอฟเฟกต์เดียวกันนี้สามารถทำได้โดยใช้สไตล์ชีตดังที่แสดงด้านล่าง:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Inline Style Sheets referencing</TITLE>
 <STYLE type#"text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... document body...
</BODY>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Linking to External style sheets</TITLE>
 <LINK rel#"stylesheet" type#"text/css" href#"smartstyle.css">
</HEAD>
<BODY>
  ... document body...
</BODY>
</HTML>

องค์ประกอบ HTML

ดังที่ได้กล่าวไว้ก่อนหน้านี้ เนื้อหาภายในเนื้อหา HTML จะแสดงด้วยแท็ก หรือที่เรียกว่าองค์ประกอบ Html แต่ละแท็กสามารถมีข้อมูลเพิ่มเติมในรูปแบบของแอตทริบิวต์ที่เขียนเป็น<tag attribute1#“value1” attribute2#“value2”> แม้ว่าจะไม่จำเป็นต้องมีแอตทริบิวต์กับทุกแท็ก หากไม่ได้กล่าวถึงแอตทริบิวต์ จะใช้ค่าดีฟอลต์ในแต่ละกรณี ต่อไปนี้คือตัวอย่างองค์ประกอบบางส่วน:

หัวข้อ 

<head>
  <title>The Title</title>,
</head>

หัวเรื่อง 

<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>

ย่อหน้า 

<p>Paragraph 1</p> <p>Paragraph 2</p>

อ้างอิง

See Also