รูปแบบไฟล์ HTM

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

ไฟล์ที่มีนามสกุล .htm เป็นตัวแทนของ Hypertext Markup Language สำหรับสร้างเว็บเพจสำหรับแสดงผลในเว็บเบราว์เซอร์ เช่น Google Chrome, Internet Explorer, Firefox และอื่นๆ อีกมากมาย กำหนดมาร์กอัปสำหรับสร้างเพจแบบสแตติกเพื่อเผยแพร่บนเวิลด์ไวด์เว็บ (WWW) เพื่อให้ผู้อื่นเข้าถึงได้ มาร์กอัปเหล่านี้บอกเบราว์เซอร์ถึงวิธีแสดงเนื้อหาของหน้าเว็บ หน้าดังกล่าวสามารถมีข้อความธรรมดา รูปภาพ ไฮเปอร์ลิงก์ไปยังหน้าอื่น วิดีโอ และข้อมูลสื่ออื่นๆ เมื่อมีการเผยแพร่หน้าเว็บ คุณสามารถดูรหัสมาร์กอัปที่อยู่เบื้องหลังได้โดยดูแหล่งที่มาของหน้าเว็บ เบราว์เซอร์สมัยใหม่อนุญาตให้ตรวจสอบแต่ละส่วนของหน้าเว็บที่มีรายละเอียดย่อยหรือองค์ประกอบมาร์กอัปแต่ละรายการในซอร์ส HTM

ประวัติโดยย่อของ HTM

นับตั้งแต่ก่อตั้งและเปิดตัวครั้งแรก ข้อมูลจำเพาะของ 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>

ข้อมูลเวอร์ชัน

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

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

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

<!DOCTYPE html>

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

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

ข้อมูลร่างกาย

นี่คือส่วนหลักในไฟล์ที่มีเนื้อหาทั้งหมดของไฟล์ที่แสดงผลโดยเบราว์เซอร์ เนื้อความ 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 Elements แต่ละแท็กสามารถมีข้อมูลเพิ่มเติมในรูปแบบของแอตทริบิวต์ที่เขียนเป็น

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

อ้างอิง

• โครงสร้างส่วนกลางของเอกสาร HTML