Ang HTML ay nangangahulugang Hypertext Markup Language . Ito ay isang espesyal na wika na ginagamit upang bumuo ng mga web page. Kapag bumisita ka sa isang website, binabasa ng computer ang HTML upang ipakita sa iyo ang mga salita, larawan, at link. Isipin ang HTML bilang mga bloke ng gusali ng isang website. Tulad ng paggamit mo ng mga piraso ng Lego upang makagawa ng bahay o kotse, gumagamit kami ng mga HTML tag upang bumuo ng isang web page.
Ang HTML ay ang code na nagsasabi sa isang computer kung paano magpakita ng text, mga larawan, mga video, at mga link sa isang web page. Ito ay tulad ng pagbibigay ng mga tagubilin sa isang kaibigan na gumuhit ng larawan para sa iyo. Gumagamit ang HTML ng mga salita sa loob ng mga angle bracket, na tinatawag na mga tag , upang markahan ang simula at dulo ng isang bahagi ng web page.
Ang bawat website na binibisita mo ay gumagamit ng HTML sa ilang paraan. Kung walang HTML, walang mga web page na makikita mo. Tumutulong ang HTML na ayusin ang nilalaman at sinasabi sa computer kung paano ipapakita ang pahina. Ito ang pinakaunang bagay na natutunan ng isang tao sa pagbuo ng web dahil pinapagana nito ang internet!
Ang isang HTML na dokumento ay may espesyal na istraktura. Nagsisimula ito sa isang deklarasyon na tinatawag na <code><!DOCTYPE html></code> na nagsasabi sa computer na gumagamit ng HTML ang page. Pagkatapos ang dokumento ay nahahati sa dalawang pangunahing bahagi: ang ulo at ang katawan.
Ang isang napakasimpleng HTML na dokumento ay ganito ang hitsura:
<code><!DOCTYPE html>
<html>
<ulo>
<title>Aking Unang Web Page</title>
</head>
<katawan>
<p>Kumusta, mundo!</p>
</body>
</html> </code>
Sa halimbawang ito, ibinibigay ng seksyong <head> ang pamagat ng pahina, at ang seksyong <body> ay kung saan mo ilalagay ang nilalamang lalabas sa screen.
Gumagamit ang HTML ng mga tag upang markahan ang iba't ibang bahagi ng web page. Ang tag ay isang salita sa loob ng mga angle bracket. Halimbawa, sinasabi ng <code><p></code> sa computer na ang sumusunod ay isang talata. Kapag natapos mo na ang talata, gagamitin mo ang pansarang tag, <code></p></code>, upang isaad ang wakas.
Ang isang elemento sa HTML ay binubuo ng isang pambungad na tag, ilang nilalaman, at isang pansarang tag. Halimbawa:
<code><p>Ito ay isang talata.</p></code>
Ang bawat tag ay nagtuturo sa web browser kung paano ipakita ang nilalaman.
Mayroong maraming mga tag sa HTML. Ang ilan sa mga pinakakaraniwan ay:
Ang mga katangian ay nagbibigay ng karagdagang impormasyon tungkol sa isang elemento ng HTML. Idinaragdag ang mga ito sa pambungad na tag sa loob ng mga anggulong bracket ng tag. Ang pinakakaraniwang katangian ay src at alt na ginagamit sa tag ng larawan.
Halimbawa, upang magdagdag ng larawan, maaari mong isulat ang:
<code><img src="picture.jpg" alt="Isang magandang larawan"></code>
Dito, sinasabi ng src sa browser kung nasaan ang file ng imahe, at ang alt ay nagbibigay ng paglalarawan ng imahe kung hindi ito maipakita.
Ang HTML na dokumento ay nahahati sa dalawang bahagi:
Binibigyang-daan ka ng mga link na lumipat mula sa isang pahina patungo sa isa pa. Sa HTML, gumagawa kami ng mga link gamit ang tag na <a> . Ang attribute na href sa loob ng tag ay nagsasabi sa browser ng patutunguhan ng link.
Halimbawa:
<code><a href="https://www.example.com">Bisitahin ang Example.com</a></code>
Kapag nag-click ka sa link na ito, bubuksan ng iyong browser ang website example.com .
Ang mga imahe ay nagpapasaya sa isang web page at ginagawa itong mas kawili-wili. Upang magdagdag ng larawan, gamitin mo ang tag na <img> . Tandaan, ang <img> tag ay walang pansarang tag.
Narito kung paano ka magdagdag ng larawan:
<code><img src="sunflower.jpg" alt="Isang maliwanag na sunflower"></code>
Sinasabi ng code na ito sa browser na magpakita ng larawan ng isang sunflower. Ang src attribute ay tumuturo sa lokasyon ng larawan, at ang alt attribute ay nagbibigay ng paglalarawan ng larawan.
Ang mga listahan ay nag-aayos ng impormasyon sa isang maayos na format. Mayroong dalawang pangunahing uri ng mga listahan sa HTML:
Narito ang isang halimbawa ng isang hindi nakaayos na listahan:
<code><ul>
<li>Mansanas</li>
<li>Saging</li>
<li>Cherry</li>
</ul> </code>
At narito ang isang halimbawa ng isang ordered list:
<code><ol>
<li>Una</li>
<li>Pangalawa</li>
<li>Pangatlo</li>
</ol> </code>
Tumutulong ang mga talahanayan sa pagpapakita ng impormasyon sa mga row at column. Kapaki-pakinabang ang mga ito kapag kailangan mong maghambing ng data o maglista ng mga item sa isang grid.
Narito ang isang simpleng halimbawa ng isang HTML table:
<code><table border="1">
<tr>
<th>Pangalan</th>
<th>Edad</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</table> </code>
Sa talahanayang ito, ang <tr> ay tumutukoy sa isang hilera ng talahanayan, ang <th> ay ginagamit para sa header ng talahanayan (bold na teksto), at <td> ay ginagamit para sa data ng talahanayan (ang mga cell).
Hinahayaan ka rin ng HTML na magdagdag ng multimedia tulad ng tunog at video. Gamit ang tag na <audio> , maaari mong isama ang mga sound file. Gamit ang tag na <video> , maaari kang mag-embed ng mga video player sa iyong web page.
Narito ang isang halimbawa ng isang video embed code:
<code><video width="320" height="240" na mga kontrol>
<source src="movie.mp4" type="video/mp4">
</video> </code>
Lumilikha ang code na ito ng video player na may mga button para i-play, i-pause, o baguhin ang volume. Ang katangian ng mga kontrol ay nagsasabi sa browser na ipakita ang mga button na ito.
Ang bawat website sa internet ay binuo gamit ang HTML. Isipin na binibisita mo ang website ng iyong paaralan, isang nakakatuwang site ng laro, o nagbabasa ng isang online na kuwento. Ang HTML ay gumagana sa likod ng mga eksena upang ayusin ang teksto, mga larawan, at iba pang nilalaman upang makita mo ang mga ito nang malinaw.
Halimbawa, kapag nakakita ka ng larawan ng iyong paboritong cartoon character online o nag-click sa isang link para magbasa pa tungkol sa isang nakakatuwang paksa, nandiyan ang HTML para magawa iyon.
Tingnan natin ang isang simpleng proyekto. Isipin na gusto mong gumawa ng isang maliit na web page tungkol sa iyong paboritong hayop, tulad ng isang pusa. Maaari kang magsama ng pamagat, isang talata tungkol sa mga pusa, isang larawan, at kahit isang link sa isang website na may mga nakakatuwang katotohanan ng pusa.
Maaaring ganito ang hitsura ng iyong HTML code:
<code><!DOCTYPE html>
<html>
<ulo>
<title>Aking Paboritong Hayop</title>
</head>
<katawan>
<h1>Lahat Tungkol sa Mga Pusa</h1>
<p>Ang mga pusa ay mapaglaro at malambot. Mahilig silang matulog at magpurr. Maraming tao ang gustong magkaroon ng mga pusa bilang mga alagang hayop.</p>
<img src="cat.jpg" alt="Isang cute na pusa">
<a href="https://www.catfacts.com">Matuto nang higit pa tungkol sa mga pusa</a>
</body>
</html> </code>
Gumagamit ang proyektong ito ng mga heading, talata, larawan, at link. Ipinapakita nito kung paano ginagamit ang HTML upang bumuo ng isang kumpletong web page na may maraming bahagi.
Habang binubuo ng HTML ang istraktura ng isang web page, may iba pang mga tool na ginagawang hitsura at pagkilos ang mga website sa mga nakakatuwang paraan.
Kahit na ngayon ay natututo kami tungkol sa HTML, ang kaalaman tungkol sa CSS at JavaScript ay nakakatulong sa amin na maunawaan kung paano ginagawa ang mga website.
Habang ginagalugad mo ang HTML, makakakita ka ng maraming iba pang mga tag. Narito ang ilan pang dapat malaman:
Ang mga tag na ito ay nagbibigay sa iyo ng higit na kontrol sa kung paano lumalabas ang iyong nilalaman sa isang web page.
Malaki ang pagbabago ng HTML simula noong una itong nilikha. Maraming bagong tag at feature ang naidagdag sa paglipas ng panahon. Ang bawat bagong bersyon ng HTML ay nagpapadali sa paggawa ng kumplikado at magagandang website. Ngayon, gumagana ang HTML kasama ang CSS at JavaScript upang bumuo ng mga modernong website na nakakatuwang gamitin at maganda ang hitsura.
Ang ebolusyon na ito ay nangangahulugan na ang HTML ay parehong madaling matutunan at sapat na makapangyarihan para sa paglikha ng lahat mula sa mga simpleng web page hanggang sa mga kumplikadong web application.
Habang ang pag-aaral ng HTML ay masaya, palaging mahalaga na manatiling ligtas sa internet. Kapag bumisita ka sa mga website o nag-explore ng online na content, tandaan na laging humingi ng tulong sa isang nasa hustong gulang kung hindi ka sigurado sa isang bagay. Unahin ang iyong kaligtasan, at ang pag-aaral ng HTML ay dapat palaging isang masaya at secure na karanasan.
Tingnan natin ang ilang mahahalagang termino na natutunan mo ngayon:
Ginagamit ang HTML sa maraming mga setting ng real-world. Narito ang ilang halimbawa:
Ang mga halimbawang ito ay nagpapakita kung paano ang HTML ay isang napaka-kapaki-pakinabang na tool sa maraming bahagi ng pang-araw-araw na buhay.
Ngayon, nalaman namin na ang HTML ay maikli para sa Hypertext Markup Language . Ito ang pangunahing wika na ginagamit upang lumikha ng mga web page. Narito ang mga pangunahing punto na dapat tandaan:
Ang HTML ay ang pundasyon ng bawat website na makikita mo sa internet. Gamit ang mga simpleng building block tulad ng mga tag at attribute, maaari kang lumikha ng masaya at interactive na mga page. Habang patuloy kang natututo, makikita mo kung paano nakakatulong ang HTML na bigyang-buhay ang mga web page, na ginagawang kapaki-pakinabang at kapana-panabik na lugar ang internet upang galugarin.
