Komlikadong HTML | Pagdagdag ng istilo
Komlikadong HTML
| Pagdagdag ng istilo
Bersyong Orihinal: W3C Orihinal
Mayakda/Translator: Joseph Rinoza Plazo.
Ang original na texto ay kinupkop ng internasyonal na copyright. Pakituon ng pansin ang original na reperensya mula sa mga hyperlinks para sa mas malalim na pagkaunawa."This translated text may contain conversion errors. Please refer to the original document at WC3 for normative version."
Dave Raggett, revised 24 May 2005.
Ito ay maikling introduksyon sa pagsulat ng HTML. Ano ang HTML? Ito espesyal na klase ng texto dokumento na gamit ng mga naghahanap sa Web para magpresenta ng mga texto at grapika. Ang texto ay naglalaman ng mga markadong tag tulad ng <p> para ipakita ang simula ng parirala, at </p> para ipakita ang dulo ng parirala. Mga HTML dokument ay madalas tinutukoy na "Web pages". Ang tagahanap ay kumukuha sa mga pahina ng Web mula sa mga nagsisilbi sa Web na salamat sa Internet, ay malimit ay puwede saan man sa Mundo.
Maraming tao ay sumusulat pa rin ng HTML sa kamat gamit ang mga kagamitan tulad ng NotePad sa Windows, o TextEdit sa Mac. Ang gabay na ito ay iaangat ka at patatakbuhin. Kahit na di mo intensiyong magbago sa HTML nang direkta at imbes ay nagplano na gumamit ng pambago ng HTML editor ruled ng Netscape Composer, o ng W3Cs Amaya, ang gabay na ito ay papaganahin kang maintindihan ang tama para makagawa ng mahusay ng kagamitan at kung paano gawin ang HTML dokumento na magalaw sa malawak na rango ng mga panghanap. Sa iglap na ika'y komportable sa pinakabase ng paggawa sa HTML, puwede mo ring matutunan kung paano magdagdag ng haplos ng estilo gamit ang CSS, at tumuloy sa pagsubok ng mga katangiang natalakay sa aking pahina sa komplikadong HTML
p.s. magandang paraan para matuto ay tingnan kung paano ang ibang tao gumawa sa kanilang pahina ng html. Para gawin ito, piliin ang "View" sa menu at sa "Source". Sa ibang panghanap, pinipili naman ang "File" menu at ang "View Source". Subukan ito sa pahina at tingnan kung paano ko pinasok ang mga ideya na inisplika ko sa ibaba. Makikita ang sarili na tumutuklas sa malikhaing mata na sa maraming pahina'y magmumukhang kalat sa ilalim ng takip!
Para sa gumagamit ng Mac, puwede kang magpasok ng lagayan na may extensyon na ".html," kailangang siguraduhin na ang dokumento'y naiayon sa simpleng texto, puwedeng iayos ito sa "Format" menu sa opsyon na "Gawing Simple ang Texto."
Tuturuan ka ng pahinang itong:
Kung naghahanap ng iba pa, subukan ang komplikadong HTML pahina.
Kda HTML dokumento'y kailangan ng titulo. Ito ang kailangan mong ilagay:
<title>My first HTML document</title>
Baguhin ang texto sa "Una Kong HTML dokumento" para tumugma sa iyong kagustuhan. Ang titulong texto ay sinundan ng pansimulang tag <title> at nagtatapos ng katumbas na pangtapos na tag </title>. Ang titulo'y dapat ilagay sa simula ng iyong dokumento.
Para subukan ito, ilagay ang nasa itaas sa pangbago ng texto at ilagay sa lagayan bilang "test.html", pagkatapos ay tingnan ang lagayan sa panghanap sa web. Kung ang extensyon sa lagayan ay ".html" o ".htm" ay titingnan ito ng panghanap bilang HTML. Karamihan ng panghanap ay nagpapakita ng titulo sa bintanang bariles sa kapsyon. May titulo lang, ang panghanap ay magpapakita lang ng blankong pahina. Huwag mag-alala. Ang susunod na seksyon ay magtuturo kung paano magpapalabas ng maipapakitang kalamnan
Kung ginamit mo'y Microsoft Word, pamilyar ka na sa napapaloob na estilo para sa mga pang-ulo ng magkakaibang importansiya.Sa HTML may anim na antas ng pang-ulo . H1 ang pinakaimportante, H2 ng hindi masyado, hanggang pababa sa H6, ang hindi pinakaimportante.
Ganito magdagdag ng importanteng pang-ulo:
<h1>Importanteng pangulo</h1>
at ganito naman ang hindi masyadong importanteng pang-ulo:
<h2>Di masyadong importanteng pangulo</h2>
Kada parirala ay dapat isulat ng may simula na <p> tag. Ang </p> ay opsyonal, di tulad ng mga pangtapos na tag para sa elementong tulad ng pang-ulo. Para ehemplo:
<p>Ito ang unang parirala.</p> <p>Ito ang ikalawang parirala.</p>
Puwedeng magdiin ng isa o mas maraming salita gamit ang <em> tag, parang ganito:
Ito'y talagang <em>interesanteng</em> pag-uusapan
Puwedeng magamit ang mga imahen para gawing kakaiba ang Web pahina na malaking tulong na mapansin ang iyong mensahe. Ang simpleng paraan para idagdag ang imahen ay gamit ang <img> tag. Isipin natin na may imahen kang may ngalang "peter.jpg" sa parehong lalagyan /pantukoy sa iyong HTML na lagayan. Ito'y may 200 pixels ang taba at 150 pixels ang taas.
<img src="peter.jpg" width="200" height="150">
Ang src katangian ang nagpapangalan sa mga lagayan ng imahen. Ang taba at taas ay di mahigpit na kailangan pero nakakatulong mapabilis ang paglabas ng iyong Web pahina. May isang kulang! Mga taong di nakikita ang imahen ay kailangan ng mga katangian na mababasa nila sa kawalan nito.Puwedeng magdagdag ng maikling pagtatalakay na katulad nito:
<img src="peter.jpg" width="200" height="150" alt="Kaibigan kong si Pedro">
Ang alt katangian ang gamit para magbigay ng maikling pagtatalakay, sa kasong ito "kaibigan kong si Pedro". Para sa komplikadong imahen, maaaring mangailangan ng mas mahabang pagtatalakay. Iniisip na ito'y isinulat sa lagayang "peter.html", idagdag ang isa sa sumusunod gamit ang longdesc katangian:
<img src="peter.jpg" width="200" height="150" alt="Kaibigan kong si Pedro" longdesc="peter.html">
Puwedeng gumawa ng imahen sa ilang paraan, tulad ng sa digital na kamera, na kinokopya ang imahes sa, o paggawa ng isa na may likha o guhit na programa. Karamihan ng mga panghanap ay nakakaintindi ng GIF at JPEG imahen na pormat, mga bagong panghanap ay nakakaintindi ng PNG imahen na pormat. Para maiwasan ang pagtatagal habang ang imahen ay ipinapasok sa iyong panghuling-gawa, iwasang gumamit ng malalaking lagayan ang imahen.
Heneral na pagsasalita, ang JPEG ay pinakamagaling para sa mga litrato at ibang mas makinis na magkakaibang imahen, habang ang GIF at PNG ay angkop para sa mga nakikitang likha na may kasama ang mga di maumbok na lugar ng kulay, linya at texto. Lahat ng tatlong pormat ay may sumusuportang pagpipilian para sa progresibong paglikha kung saan ang bulok na bersyon ng imahen ay pinapadala muna at progresibong inaayos.
Ang lumikha saWeb para maging epektibo ay ang abilidad na magsabi ng mga pang-ugnay mula sa isang pahina at sa iba, at sumunod sa mga pang-ugnay sa isang pindot ng pindutan. Ang isang pindot ay madadala ka sa kabilang gilid ng mundo!
Mga pang-ugnay ay pinapakita na may <a> tag. Magpakita tayo ng pang-ugnay sa pahina na makikita sa lagayang "peter.html" sa parehong paglayan/direktoryo tulad sa HTML lagayan iyong binabago:
Ito ang pang-ugnay sa <a href="peter.html">Pahina ni Pedro</a>.
Ang texto sa gitna ng <a> at ng <a> ay gamit na kapsyon para sa pang-ugnay. Ito ay madalas para sa kapsyon na maging asul na nakalinyang texto.
Kung ang lagayan mong inuugnay ay magulang na lalagyan/direktoryo, kailangang ilagay ang "../" sa harap nito, kung sakali:
<a href="../mary.html">Pahina Ni Mary</a>
Kung ang kinokonektang lagayan ay nasa ilalim ng isang direktoryo, kailangang ilagay ang pangalan sa ilalim ng direktoryo na sinundan ng "/" sa harap nito, katulad ng
<a href="friends/sue.html">Pahina ni sue</a>
Ang paggamit ng relatibong daanan ay pinapayagan kang mag-ugnay ng lagayan sa pamamagitan ng pag-akyat at pagbaba sa puno ng direktoryo na kailangan, tulad sa:
<a href="../college/friends/john.html">pahina ni John</a>
Na naghahanap muna ng magulang na direktoryo ng ibang direktoryo na may ngalang "kolehiyo", at tapos sa ilalim na direktoryo na may ngalang "kaibigan" para sa lagayang may ngalang "juan.html".
Ang pangugnay sa pahina sa ibang Web lugar kailangan kang magbigay ng buong Web na adres (madalas tinatawag na URL), katulad ng pang-ugnay na www.w3.org kailngan mong isulat:
Paguugnay ito sa <a href="http://www.w3.org/">W3C</a>.
Puwedeng gawin ang imahen bilang hypertext na pang-ugnay, para ehemplo, ang susunod ay papayagan kang pindutin ang logo ng kumpanya para makapunta sa punong pahina
<a href="/"><img src="logo.gif" alt="punong pahina"></a>
Gumagamit ito ng "/" para tumukoy sa punong ugat ng direktoryo, i.e. ang punong pahina
Ang HTML ay sumusuporta sa tatlong klase ng listahan. Ang unang klase ay ang binaril na listahan, madalas tinatawag na di-hiningi na listahan. Gumagamit ito ng <ul> at <li> tag, parang tulad rito:
<ul> <li>ang unang listahan</li> <li>ang pangalawang listahan</li> <li>ang pangatlong listahan</li> </ul>
Alalahanin na palaging kailangang tapusin ang listahan ng </ul> na panghuling tag, pero ang </li> ay opsyonal at puwedeng iwanan. Ang ikalawang klase ng listahan ang may numerong listahan, madalas tinatawag na hininging listahan. Gumagamit ito ng <ol> at <li> na tag. Katulad sa
<ol> <li>ang unang listahan</li> <li>ang pangalawang listahan</li> <li>ang pangatlong listahan;/li> </ol>
Alintulad sa binaril na listahan, tapusin lagi ang listahan na may </ol> na pangtapos na tag, pero ang </li> na pangtapos na tag ay opsyonal at puwedeng iwanan.
Ang ikatlo ang huling klase ng listahan ay ang kahulugang listahan. Pinapayagan kang maglista ng mga termino at kanilang mga kahulugan. Itong klase ng listahan ay nagsisimula na may <dl> tag at nagtatapos sa </dl>. Kada termino'y nagsisimula na may <dt> tag at kada kahulugan ay nagsisimula sa <dd>. Katulad sa:
<dl> <dt>ang unang inilistang bagay</dt> <dd>depinisyon</dd> <dt>ang pangalawang inilistang bagay</dt> <dd>depinisyon</dd> <dt>ang unang inilistang bagay</dt> <dd>depinisyon</dd> </dl>
Ang mga pangtapos na tag </dt> at </dd> ay opsyonal at puwedeng iwanan. Alalahanin na ang mga listahan ay puwedeng itapon, isa pagkatapos ng isa. Tulad sa:
<ol>
<li>ang unang inilistang bagay</li>
<li>
ang pangalawang inilistang bagay
<ul>
<li>unang ipinatong na bagay</li>
<li>ikalwang ipinatong na bagay</li>
</ul>
</li>
<li>ang huling inilistang bagay</li>
</ol>
Maaaring gumamit rin ng mga parirala at mga pang-ulo etc. para sa mas mahabang na inilistang bagay.
Kung gagamitin sa web panghanap ang silipan ng pinaggalingang katangian (tingnan ang Tingnan o Lagayan na menu) makikita ang hitsura ng HTML pahina. Ang dokumento'y palaging naagsisimula sa deklarasyon ng kung anong bersyon ng HTML ang ginamit, at sinundan ng <html> tag na sinundan ng <head> at sa pinakadulo ng </html>. Ang <html> ... </html> ang kumikilos na lalagyan para sa dokumento. Ang <head> ... </head> ay naglalalman ng titulo, at impormasyon sa estilo ng pahina at mga letra, habang ang <body> ... </body> ay naglalaman ng marka kasama ang nakikitang nilalaman. Ito ang pinakabasehan na maaaring makopya at idikit sa iyong textong pambago para sa paggawa ng iyong sariling pahina:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> palitan ang titulo ng dokumento </title>
</head>
<body>
palitan ng nilalaman ng iyong dokumento
</body>
</html>
Isang maayos na paraan para kusang ayusin ang mali ng mga markdao ay ang paggamit ng HTML Tidy na naglilinis din ng markado at ginagawang mas madaling basahin at baguhin. Rinirikomenda ko na palaging patakbuhin ang Tidy sa kahit anong markadong iyong binabago. Tidy ay napakagaling para sa paglilinis ng markado sa pamamagitan ng pagpapahintulot sa mga kagamitan na may mababagal na kaugalian. Tidy ay magagamit para sa maraming rango ng sistemang pangoperasyon mula sa TidyLib Sourceforge site, at isinasama sa iba't ibang klase ng HTML pambago ng gamit.
Kung handa ka nang matuto lalo, naghanda ako ng kasamang materyal tungkol sa komplikadong HTML at pagdagdag ng haplos ng estilo.
Ang W3C Rekomendasyon para sa HTML 4.0 ay ang batasang alituntunin para sa HTML. Kaso, ito ay teknikal na alituntunin. Para sa mas kaunting teknikal na panggagalingan ng impormasyon ikaw ay puwedeng bumili ng isa sa maraming aklat sa HTML, para ehemplo "Raggett on HTML 4", na naimprenta noong 1998 ni Addison Wesley. XHTML 1.0 ay ngayong isang W3C Recomendasyon.
Sana'y suwertihin ka at magsulat ka na!