HTML File Format

Ano ang HTML file?

Ang HTML (Hyper Text Markup Language) ay ang extension para sa mga web page na ginawa para ipakita sa mga browser. Kilala bilang wika ng web, ang HTML ay umunlad na may mga kinakailangan ng mga bagong kinakailangan sa impormasyon na ipapakita bilang bahagi ng mga web page. Ang pinakabagong variant ay kilala bilang HTML 5 na nagbibigay ng maraming flexibility para sa pagtatrabaho sa wika. Ang mga HTML na pahina ay maaaring natanggap mula sa server, kung saan naka-host ang mga ito, o maaaring i-load din mula sa lokal na sistema. Ang bawat pahina ng HTML ay binubuo ng mga elemento ng HTML tulad ng mga form, teksto, mga larawan, mga animation, mga link, atbp. Ang mga elementong ito ay kinakatawan ng mga tag at ilang iba pa kung saan ang bawat tag ay may simula at wakas. Maaari rin itong mag-embed ng mga application na nakasulat sa mga wika ng scripting gaya ng JavaScript at Style Sheets (CSS) para sa pangkalahatang representasyon ng layout.

Maikling Kasaysayan

Mula nang mabuo ito at lumabas sa unang papel, ang mga detalye ng HTML ay pinananatili ng World Wide Web Consortium (W3C) mula noong 1996. Noong 2000, naging internasyonal din itong pamantayan (ISO/IEC 15445:2000). Noong 1999, nai-publish ang HTML 4.01. Noong 2004, nagsimulang magtrabaho ang Web Hypertext Application Technology Working Group (WHATWG) sa bersyon ng HTML5 na naging joint deliverable sa W3C noong 2008. Nakumpleto at na-standardize ito noong 28 Okt 2014.

HTML File Format Structure

Ang isang HTML 4 na dokumento ay binubuo ng tatlong bahagi:

isang linyang naglalaman ng impormasyon ng bersyon ng HTML
isang deklaratibong seksyon ng header
isang katawan, na naglalaman ng aktwal na nilalaman ng dokumento. Ang katawan ay maaaring ipatupad ng elemento ng BODY o ng elemento ng FRAMESET upang maglaman ng katawan sa mga frame

Ang bawat seksyon ay maaaring pangunahan o sundan ng mga puting espasyo, bagong linya, tab at komento. Ang isang halimbawa ng isang simpleng HTML na dokumento ay tulad ng ipinapakita sa ibaba:

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

Impormasyon sa Bersyon

Ang unang linya ng code, <!DOCTYPE html>, ay tinatawag na doctype declaration at nagsasabi sa browser kung saang bersyon ng HTML nakasulat ang page. Depende sa bersyon ng HTML, mayroong ilang iba’t ibang doctype declaration na nagpapangalan sa document type definition (DTD) na ginagamit para sa dokumento. Ang bawat DTD ay naiiba sa iba sa mga elementong sinusuportahan nito at nagkakaiba gaya ng sumusunod:

HTML 4.01 Strict - kasama ang lahat ng elemento at attribute na hindi deprecated o hindi lumalabas sa mga frameset na dokumento
HTML 4.01 Transitional - kasama ang lahat sa mahigpit na DTD at hindi na ginagamit na mga elemento at katangian (karamihan ay may kinalaman sa visual na presentasyon
HTML 4.01 Frameset - kabilang ang lahat sa transitional DTD plus frames din

Para sa HTML5, ang impormasyon ng bersyon ay tulad ng nabanggit sa ibaba.

<!DOCTYPE html>

Impormasyon ng HTML Header

Ang header ng isang HTML na dokumento ay maaaring magsama ng ilang elemento ng HTML na hindi nai-render ng browser. Ang mga naturang elemento ay maaaring metadata na naglalarawan ng impormasyon tungkol sa page o may kasamang mga seksyon na ginagamit upang kumuha ng impormasyon mula sa mga panlabas na mapagkukunan tulad ng CSS stylesheet o JavaScript file. Ang header ng isang page ay kinakatawan ng head tag.

Para sa pagtatakda ng pamagat ng pahina, ang title na elemento ay ang tanging kinakailangan sa loob ng mga tag na . Ang parehong ay ginagamit ng mga Search engine upang matukoy ang pamagat ng isang pahina.

Impormasyon sa Katawan ng HTML

Ito ang pangunahing seksyon sa file na naglalaman ng lahat ng nilalaman ng file na na-render ng mga browser. Ang katawan ng Html ay maaaring maglaman ng mga markup na maaaring sumangguni sa iba’t ibang mga bloke ng gusali sa hugis ng mga tag. Maaari itong maglaman ng ilang iba’t ibang uri ng impormasyon tulad ng teksto, mga larawan, mga kulay, mga graphics, atbp. Bilang karagdagan, ang mga elemento ng audio at video ay maaari ding i-embed sa html body para sa pag-render ng mga browser. Sa pagkakaroon ng modernong application ng mga style sheet para sa visual na representasyon, ang mga katangian ng presentasyon ng BODY gaya ng kulay ng background, kulay ng link, kulay ng text, atbp. ay hindi na ginagamit. Kaya, ang parehong mga epekto ay maaaring makamit gamit ang mga stylesheet tulad ng ipinapakita sa ibaba:

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

Ang mga inline na style sheet ay madaling i-embed at para sa mabilis na paggamit sa mga visual effect, ang mga panlabas na style sheet ay ginagawang mas maginhawang mag-deploy nang isang beses at ma-access sa maraming lugar.

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

Mga Elemento ng HTML

Gaya ng nabanggit kanina, ang mga nilalaman sa loob ng HTML Body ay kinakatawan ng mga tag, na kilala rin bilang Html Elements. Ang bawat tag ay maaaring magkaroon ng karagdagang impormasyon sa anyo ng mga attribute na nakasulat bilang <tag attribute1#“value1” attribute2#“value2”>, bagama’t hindi kinakailangang magkaroon ng mga attribute sa bawat tag. Kung ang mga katangian ay hindi binanggit, ang mga default na halaga ay ginagamit sa bawat kaso. Ang sumusunod ay ilan sa mga halimbawa ng Element:

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

Headings

<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

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

Mga Sanggunian

The Global Structure of HTML document