HTML Syntax

HTML Syntax

Ang grammar na sinusunod ng HTML

1. File type
2. Syntax

File type

Para makagawa ng isang webpage, kailangan lang nating gumawa ng isang ordinary text file. Pero sa halip na .txt ang gamitin nating filename extension, papalitan natin ito ng .html.

Syntax

Ganito ang hitsura ng HTML:

<p>

Sa example na ito, ang ibig sabihin ng p ay “paragraph”. Para magawa ang HTML na ito, nagta-type tayo ng less-than symbol (<), na susundan naman ng letter, word, o abbreviation, at pagkatapos ay greater-than symbol (>). Ang tawag sa mabubuo natin ay HTML tag. Ganito ang hitsura ng lahat ng HTML markup. Simple lang ang syntax ng HTML. Mas mahirap alamin kung anong HTML tag ang gagamitin.

May dalawang uri ng tags, ang opening tags at closing tags. Ang halimbawa natin kaninang <p> ay isang opening tag. Ganito naman ang hitsura ng closing tag:

</p>

Magkamukha lang ang opening at closing tags, except may slash ang closing tags pagkatapos ng less-than symbol (<).

Para makapag-markup ng isang paragraph, ilalagay natin ang paragraph sa pagitan ng opening tag at closing tag:

<p>This is a paragraph.</p>

Laging magkasama ang opening at closing tags. Kapag nabuo sila kasama ng content, ang tawag dito ay element.

Pero hindi lahat ng element ay may closing tag, gaya ng makikita natin sa susunod na lessons. Pero karamihan ng HTML elements ay may closing tag. Tumingin pa tayo ng mga halimbawa:

<p>This is a paragraph.</p>
<h1>This is a headline.</h1>
<article>This is an article.</article>

Marami tayong titingnang HTML elements throughout this course. Pag-aaralan natin kung kailan dapat gagamitin ang bawat isa sa kanila. Kaya ‘wag mo munang alalahanin iyan. Mag-focus muna tayo sa basic mechanics ng HTML.

Ang trabaho ng markup ay magpakita ng purpose at meaning. Binibigyan nito ang computers ng mas maraming details tungkol sa kung ano ang ibig sabihin ng content o user interface para sa ating mga tao. Nagbibigay ang HTML ng connection sa pagitan ng mundo ng mga tao at ng computers. Tumingin tayo sa isa pang example.

<p>This is a paragraph. May text dito na <em>naka-emphasize</em> para sa malaman ng reader na mahalaga ito.</p>

Nakabalot sa <p></p> tags ang buong paragraph. Sa loob naman ng paragraph, may isa pang salita (naka-emphasize) na nilagay natin sa loob ng opening at closing em tags. Matututuhan mo kung para saan ang em tag sa susunod na mga lesson. For now, pansinin na puwedeng magkaroon ng HTML element sa loob ng isa pang HTML element. Ang tawag dito ay nesting. At gaya ng makikita mo pa sa mga susunod na lessons, ang buong HTML page ay tadtad ng mga HTML elements na naka-nest sa isa’t isa.

Kung may background ka sa Computer Science, mare-recognize mo na mula sa pattern na ito, puwede tayong makabuo ng isang structure na kung tawagin ay document tree. Para sa mga walang background sa Computer Science, ang document tree ay kagaya ng isang family tree, kung saan may parent, children, at siblings. Nakikita ng browser ang document tree na ito at gumagawa ito ng isang malaking “family tree” base sa kung sino ang related sa aling element, at paano. Ito ang tinatawag na Document Object Model.

Ang Document Object Model (DOM) Tree ay isang hierarchy, isang structure ng HTML elements na kadalasan nang ginagamit para i-connect ang HTML sa CSS at JavaScript.

Kadalasan nang mae-encounter mo ang DOM tree kapag nagsusulat ka na ng CSS or JavaScript.

Gagamitin naman ng browser ang DOM tree para buuin ang tinatawag na accessibility tree. Pag-uusapan natin ang accessibility sa isang lesson sa course na ito. Nakakaapekto ang pinipili mong HTML element na gagamitin sa Web sites mo sa experience ng users mo sa paggamit ng Web site mo, kasama na ang mga users na may iba’t ibang disabilities. Lahat ng iyan ay magsisimula sa nesting ng HTML elements. Ang susunod na example ay isang HTML markup na may nesting na madalas mong magagamit in the future:

<article>
  <h1>This is a headline.</h1>
  <p>What you are reading is the first paragraph.</p>
  <p>That paragraph will be followed by this, the second one.</p>
  <p>This is a paragraph. May text dito na <em>naka-emphasize</em> para sa malaman ng reader na mahalaga ito.</p>
</article>

```

Pansinin na sa structure na ito, malalaman ng browser na ang article na ito ay may isang headline at tatlong paragraphs, ang huli ay may naka-emphasize na text. Idi-display pa rin ng browser ang lahat ng iba pang content o element pagkatapos ng closing </article> tag sa kaparehong HTML page. Pero mauunwaan ng browser na hindi na iyon part ng <article> na ito. Mahalaga kung saan natin binubuksan at sinasara ang mga HTML element, at kung paano tayo nagne-nest ng mga tags. Ginagamit natin ito para ipaalam ang meaning ng content at interfaces. Saan magsisimula ang paragraph? Saan iyon matatapos? Isa sa pinakamadalas na nangyayari sa HTML ay ang makalimutan nating maglagay ng closing tag para sa mga element. Kaya huwag kalimutan: maglagay ng closing tag.