Pag-aaral ng HTML

Video.: Grammar websites para sa pag-aaral mo ng English! || Pinay English Teacher

Nilalaman

Upang humakbang
Bahagi 1 ng 2: Pag-aaral ng mga pangunahing kaalaman sa HTML
Bahagi 2 ng 2: Pag-aaral ng advanced na HTML
Mga Tip
Mga babala
Mga kailangan

Ang HTML ay ang pagpapaikli para sa Hyper Text Markup Language, ito ang code o wika na ginagamit para sa paglikha ng mga website. Maaaring magmukhang kumplikado kung hindi mo pa nai-program dati, ngunit upang subukan ito ang kailangan mo ay isang simpleng programa sa pagpoproseso ng salita at isang browser ng internet. Maaari mong makilala ang ilang HTML mula sa mga forum, mga online profile, o mga artikulo ng wikiHow. Ang HTML ay isang kapaki-pakinabang na mapagkukunan para sa sinumang gumagamit ng Internet, at ang pag-aaral ng HTML ay maaaring tumagal ng mas kaunting oras kaysa sa maaari mong asahan.

Upang humakbang

Bahagi 1 ng 2: Pag-aaral ng mga pangunahing kaalaman sa HTML

Magbukas ng isang dokumentong HTML. Karamihan sa mga programa sa pagpoproseso ng salita, kabilang ang Notepad o Word for Windows at Text Editor para sa Mac, ay maaaring magamit upang lumikha ng mga dokumentong HTML. Magbukas ng isang bagong dokumento at piliin ang File → I-save Bilang mula sa tuktok na menu upang mai-save ang iyong dokumento bilang isang web page, o baguhin ang extension ng file mula sa ".doc", ".rtf" o anupaman sa ".html" o ".htm ".
- Maaari mo na ngayong makita ang isang babala na nagsasaad na ang iyong dokumento ay binago mula sa Rich Text Format (RTF) sa format na "simpleng teksto", at ang ilang mga pagpipilian sa pag-format at mga imahe ay hindi nai-save nang maayos. Maaari mong balewalain ang babalang ito; Ang mga dokumento ng HTML ay hindi gumagamit ng mga pagpipiliang ito.
- .html at .htm file ay pareho. Pareho itong gumagana.
Tingnan ang iyong dokumento sa isang browser. I-save ang iyong blangko na dokumento, isara ito, at pagkatapos ay i-double click ang dokumento sa lokasyon kung saan ito nai-save upang buksan ito muli. Ang iyong dokumento ay dapat buksan na ngayon ng iyong browser bilang isang blangkong web page. Kung hindi iyon gagana, i-drag ang icon ng file sa address bar ng iyong browser. Sa paglaon, kung ie-edit mo ang iyong dokumento sa HTML kasunod ng mga hakbang sa artikulong ito, patuloy kang babalik sa browser upang suriin kung ano ang hitsura ng mga pagbabago sa code.
- Tandaan: ang iyong webpage ay hindi pa online. Ang pahina ay hindi naa-access sa iba at hindi mo kailangan ng isang gumaganang koneksyon sa internet upang subukan ito. Ginagamit mo lang ang iyong browser upang "basahin" ang dokumento ng HTML na para bang isang website.
Maunawaan kung ano ang mga "tag". Ang mga tag ay hindi nakikita sa huling web page, tulad ng normal na text na makakaya. Sinasabi ng mga tag sa iyong browser kung paano ipakita ang pahina at ang nilalaman sa pahina. Naglalaman ang tag ng panimulang tagubilin. Halimbawa, masasabi nito sa browser na ipakita ang teksto nang naka-bold. Kailangan ang end tag upang sabihin sa browser kung saan nalalapat ang mga tagubilin: sa halimbawang ito, ang lahat ng teksto sa pagitan ng simula at pagtatapos na tag ay naka-bold. Ang mga end tag ay inilalagay din sa loob ng panaklong, ngunit ang isang slash ay sumusunod sa unang panaklong.
- Sumulat ng mga panimulang tag sa mga braket: ito ang araw ng pagsisimula>
- Sumulat ng mga end tag sa panaklong, ngunit maglagay ng isang slash pagkatapos ng unang panaklong: /ito ang pansarang tag>)
- Basahin sa paglaon sa artikulo kung paano magsulat ng mga tag na may pag-andar. Sa hakbang na ito, kailangan mo lamang tandaan kung aling paraan upang magsulat ng mga tag:> at />.
- Sa ibang mga kurso sa HTML, ang mga tag ay tinukoy din bilang "mga elemento" at ang teksto sa pagitan ng pagbubukas at pagsasara ng mga tag ay tinukoy din bilang "nilalaman ng elemento".
Isulat ang iyong unang tag na html>. Ang bawat dokumentong HTML ay nagsisimula sa a html>tag at nagtatapos sa a / html>tag Sinasabi nito sa browser na ang lahat sa pagitan ng mga tag na ito ay nakasulat sa HTML. Idagdag ang mga tag na ito sa iyong dokumento:
- Sumulat html> sa tuktok ng iyong dokumento.
- Pindutin ang ipasok o bumalik ng maraming beses upang bigyan ang iyong sarili ng ilang puwang, pagkatapos magsulat / html>
- Naaalala kita lahat ng bagay sa artikulong ito sa pagitan ng dalawang tag na ito.
Gawin ang ulo> bahagi ng iyong dokumento. Sa pagitan ng mga tag na html> at / html> sumulat ka ng a ulo>simulan ang tag at a / ulo>-end tag. Gumawa muli ng ilang puwang sa pagitan ng mga tag na ito. Anumang nakasulat sa pagitan ng mga tag na ito ay hindi makikita sa mismong web page. Subukan ang mga sumusunod na hakbang at tingnan kung maaari mong makita kung saan nagpapakita ang impormasyon:
- Sumulat sa pagitan ng mga tag ng ulo> at / ulo>: pamagat> at / pamagat>
- Sa pagitan ng pamagat ng mga tag> at / pamagat> isinulat mo: Paano matutunan ang HTML (na may mga larawan) - wikiHow.
- I-save ang dokumento at buksan ito sa isang browser (o i-save ang dokumento at i-refresh ang pahina sa browser kung ang pahina ay bukas pa rin). Nakikita mo ba ang iyong isinulat lamang sa tuktok ng pahina, sa itaas ng address bar?
Lumikha ng isang seksyon> katawan. Lahat ng iba pa sa dokumento ng nagsisimula na ito ay inilalagay sa seksyon ng katawan>, at ipinapakita ito sa web page. Pagkatapos ang tag / ulo>, ngunit sa harap ng ang tag / html> sumulat ka katawan> at / katawan>. Lahat ng tinatalakay pa namin sa artikulong ito, inilalagay namin sa pagitan ng mga body tag. Dapat mayroon ka na ngayong isang dokumento na ganito (wala ang mga bala):
- html>
- ulo>
- pamagat> alamin ang HTML - wikiHow / pamagat>
- / ulo>
- katawan>
- / katawan>
- / html>
Magdagdag ng teksto sa iba't ibang mga estilo. Ngayon ay nagsimula ka nang magsulat ng isang bagay na talagang makikita sa browser! Lahat ng iyong isusulat sa loob ng mga body tag ay makikita sa browser pagkatapos mong mai-save ang mga pagbabago at i-refresh ang pahina sa loob ng browser. Sumulat hindi isang bagay na may mga palatandaan at >sapagkat bibigyan ng kahulugan ng iyong browser iyon bilang tagubilin sa HTML sa halip na simpleng teksto. Sumulat halimbawa Kumusta mundo! (Ingles para sa "Kamusta mundo!", Ito ang pandaigdigang pamantayang teksto bilang unang halimbawa sa anumang kurso sa pagprograma sa isang partikular na wika ng programa) o iba pa, at ilagay ang mga sumusunod na tag bago at pagkatapos ng teksto at tingnan kung ano ang nangyayari:
- em> Hello mundo! / em> mukhang naka-italic na teksto: Kumusta mundo!
- malakas> Kamusta mundo! / malakas> mukhang matapang na teksto: Kumusta mundo!
- s> Kamusta mundo! / s> mukhang strikethrough text: ~~Kumusta mundo!~~
- sup> Kamusta mundo! / sup> parang superscript:
- sub> Kamusta mundo! / sub> parang caption: _{Kumusta mundo!}
- Subukan ang mga kumbinasyon: Paano nakikita em> malakas> Kamusta mundo! / malakas> / em> labas?
Hatiin ang iyong teksto sa mga talata. Kung maglalagay ka ng iba't ibang mga linya ng teksto sa iyong dokumento, makikita mo na ang lahat ng mga linya ay inilalagay nang sunud-sunod. Kailangan mong mag-program ng mga bagong linya at mga blangko na linya mismo.
- p> Ito ay isang hiwalay na seksyon./p>
- Ang pangungusap na ito ay nasa unang linya at ang pangungusap na ito sa susunod.
  Ito ang unang tag na natagpuan namin na hindi nangangailangan ng isang end tag! Tinatawag namin ang naturang isang tag walang laman na tag.
- Lumikha ng mga header upang linawin ang mga pangalan ng mga seksyon:
  h1> header / h1>: ang pinakamalaking posibleng header
  h2> header / h2> (ang 2 antas ng header)
  h3> header / h3> (ang 3 antas ng header)
  h4> header / h4> (ang 4 na antas ng header)
  h5> header / h5> (ang pinakamaliit na posibleng header)
Alamin kung paano gumawa ng mga listahan. Mayroong maraming mga paraan upang lumikha ng mga listahan sa isang web page. Subukan ang mga sumusunod na pamamaraan upang malaman kung ano ang pinakagusto mo. Tandaan na ang isang pares ng mga tag ay inilalagay sa paligid ng buong listahan (tulad ng mga ul> at / ul> na mga tag para sa mga hindi nakaayos na listahan) at na isang magkakaibang pares ng mga tag ang inilalagay sa paligid ng bawat item sa loob ng listahan, tulad ng li> at / li> .
- Gamitin ang sumusunod na code upang lumikha ng mga naka-bulletin na listahan:
  ul> li> Isang item / li> li> Isa pang item / li> li> Isa pang item / li> / ul>
- O ang code na ito upang lumikha ng mga may bilang na listahan:
  ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
- O ang code na ito upang lumikha ng isang tinatawag na listahan ng kahulugan:
  dl> dt> Kape / dt> dd> - Mainit na inumin / dd> dt> Gatas / dt> dd> - Malamig na inumin / dd> / dl>
Gawing mas kaakit-akit ang iyong pahina gamit ang mga bagong linya, pahalang na linya at larawan. Ngayon ay oras na upang simulang magdagdag ng iba pang mga bagay sa iyong pahina. Subukan ang mga sumusunod na tag (ang imahe ay dapat na nai-post sa online upang maaari mong gamitin ang isang link sa imahe):
- Magpasok ng isang linya: br> o hr>
- Ipasok ang mga imahe: img src = "the_url_of_your_image">
Ipasok ang mga link sa iba pang mga lugar sa pahina. Maaari mo ring gamitin ang code na ito upang mag-link sa iba pang mga pahina at website, ngunit dahil wala ka pang isang website, mag-focus kami sa "mga angkla", na mga tukoy na lugar sa pahina kung saan maaari kang mag-link:
- Una, lumikha ng isang anchor na may isang> tag sa puntong sa pahina na nais mong mai-link. Bigyan ang iyong anchor ng isang malinaw na pangalan na madaling tandaan:
  
  isang pangalan = "Mga Tip"> Ito ang teksto sa paligid kung saan mo inilalagay ang iyong anchor./a>
- Gamitin ang tag href> upang mag-link sa iyong anchor o sa ibang webpage:
  
  isang href = "url ng webpage o pangalan ng anchor sa pahinang ito"> Isulat ang teksto o imaheng ipinakita bilang link dito./a>
- Upang mag-link sa isang anchor sa isa pang pahina, idagdag ang # character pagkatapos ng url, na susundan ng pangalan ng iyong anchor. Halimbawa http://www.wikihow.com/HTML-leren#Tips ay magdadala sa iyo diretso sa seksyong "Mga Tip" sa pahinang ito.

Bahagi 2 ng 2: Pag-aaral ng advanced na HTML

Alamin ang tungkol sa mga katangian. Ang mga katangian ay inilalagay sa loob ng tag at ginagamit upang makagawa ng mga karagdagang pagsasaayos sa "nilalaman ng elemento" sa pagitan ng simula at pagtatapos na tag. Hindi sila tumayo nang mag-isa. Ang mga ito ay nakasulat sa sumusunod na paraan: pangalan = "halaga". pangalan kumakatawan sa pangalan ng katangiang (halimbawa, "kulay") at halaga inilalarawan ang partikular na kaso na ito (hal. "pula").
- Kung tiningnan mong mabuti ang nakaraang bahagi ng artikulong ito, nakatagpo ka na ng mga katangian. Ang img> tag ay gumagamit ng katangian src, ang isang angkla ay gumagamit ng katangian pangalan at mga link ay gumagamit ng katangian href. Masasabi mong lahat sila ay may sukat ___='___’ sumunod.
Eksperimento sa mga talahanayan ng HTML. Upang makagawa ng isang talahanayan o grap kailangan mo ng maraming mga tag:
- Magsimula sa mga tag ng talahanayan ("talahanayan" sa Ingles) sa paligid ng buong talahanayan:mesa> / mesa>
- Ilagay ang mga tag sa paligid ng nilalaman ng bawat hilera: tr>
- Ilagay ang mga header ng haligi sa unang hilera: ika>
- Ilagay ang mga cell sa magkakasunod na mga hilera: td>
- Ito ay isang halimbawa kung paano magkakasama ang lahat ng ito:
  
  talahanayan> tr> ika> Hanay 1: Buwan / ika> ika> Hanay 2: Natipid na pera / ika> / tr> tr> td> Enero / td> td> € 100 / td> / tr> / talahanayan>
Alamin ang iba pang mga tag na ginamit sa seksyon ng ulo. Natutunan mo na ang ulo ng tag>, na inilalagay mo sa simula ng bawat dokumento. Bilang karagdagan sa pamagat> tag, maaaring may iba pang mga tag sa seksyon ng ulo:
- Ginagamit ang mga meta tag upang lumikha metadata tungkol sa isang web page. Ang data na ito ay ginagamit ng mga search engine upang maikategorya ang mga web page. Upang makita ang iyong pahina sa mga search engine maaari kang maglagay ng isa o higit pang mga meta tag (hindi kinakailangan ang mga end tag), ang bawat tag ay dapat maglaman ng eksaktong isang pangalan ng katangian at katangian ng nilalaman, halimbawa: meta name = "paglalarawan" nilalaman = "ilagay dito paglalarawan ">; o meta name = "keyword" na nilalaman = "sumulat ng isang listahan ng mga keyword dito, palaging pinaghihiwalay ng isang kuwit">
- ang link> mga tag ay ginagamit upang mai-link ang iba pang mga file sa pahina. Karaniwang ginagamit upang maiugnay ang mga sheet ng istilo ng CSS sa mga pahina ng HTML, ang mga pahinang ito ay itinatayo ng iba't ibang uri ng code at ginagamit upang matukoy ang pangkalahatang istilo ng isang pahina.
- ginamit ang mga script> tag upang maiugnay ang mga javascript file sa pahina ng HTML. Pinapayagan ng Javascript na magbago ang pahina kung may nagawa ang gumagamit sa pahina.
Maglaro kasama ang HTML mula sa mga mayroon nang mga pahina. Ang pagtingin sa source code ng mga web page ay isang mahusay na paraan upang mapalawak ang iyong kaalaman sa HTML. Mag-right click sa pahina at piliin ang "Tingnan ang mapagkukunan", "Ipakita ang mapagkukunan ng pahina" o katulad. Alamin kung ano ang ginagawa ng isang partikular na tag na hindi mo alam o maghanap sa online para sa sagot.
- Hindi mo mai-e-edit ang mga website ng ibang tao, ngunit maaari mong kopyahin ang HTML code sa iyong sariling dokumento at maglaro kasama nito upang makita kung ano ang ginagawa ng iba't ibang mga pagsasaayos. Tandaan: dahil maraming mga website ang gumagamit ng mga style sheet ng CSS, maaaring hindi mo makita ang maraming mga kulay o iba pang mga istilo.
Alamin ang tungkol sa HTML sa pamamagitan ng pagbabasa ng higit pang mga malalim na artikulo. Maraming mapagkukunan sa internet upang makabisado ang mas maraming mga HTML tag tulad ng W3Schools o Codecademy. Marami ding mga aklat na HTML na magagamit, ngunit tiyaking gumagamit ka ng isang kamakailang edisyon dahil ang pamantayan ng HTML ay nagbabago paminsan-minsan. Kapag na-master mo ang HTML sa isang mahusay na antas, maaari kang lumipat sa CSS para sa higit na kontrol sa disenyo at istilo ng iyong web page. Pagkatapos nito, ang susunod na hakbang ay karaniwang javascript.

Mga Tip

Maaari itong maging kapaki-pakinabang upang makahanap ng isang simpleng web page sa Internet at pagkatapos ay magsimulang magulo kasama ng code. Subukang ilipat ang ilang teksto, baguhin ang font, baguhin ang mga imahe, kahit anong gusto mo!
Maaari kang gumamit ng isang kuwaderno upang isulat ang code, nang sa gayon ay may maibalik ka sa iyo kung hindi mo ito naaalala sandali. Maaari mo ring mai-print ang pahinang ito at panatilihin ito para sa sanggunian.
Ang XML at RSS ay lalong ginagamit sa mga website sa kasalukuyan. Ang code ay maaaring magmukhang hindi maa-access sa mata ng tao, lalo na kung tiningnan sa source code, ngunit ang pagpapaandar ay maaaring maging kapaki-pakinabang.
Ang mga tag na ginamit sa loob ng HTML ay hindi sensitibo sa kaso, ngunit ang default ay ang paggamit ng mga maliliit na titik (tulad ng ginagawa namin sa artikulong ito). Ang mga maliliit na titik para sa mga tag ay lubos na inirerekomenda, para din sa pagiging tugma sa XHTML.

Mga babala

Ang ilang mga tag ay hindi na ginagamit at napalitan ng iba pang mga tag na gumagawa ng pareho, ngunit madalas na nag-aalok ng mas maraming mga pagpipilian.
Kung nais mong tiyakin na ang iyong pahina ay sumusunod sa pamantayan ng HTML, pumunta sa website ng W3 upang subukan ang iyong code laban sa kasalukuyang pamantayan. Maraming mga tag ang naging lipas na at napalitan ng mga tag na gumana nang mas mahusay sa mga modernong browser.

Mga kailangan

Isang programa sa pagpoproseso ng salita, tulad ng Notepad (Windows) o Text Editor (Mac).
isang sheet ng papel o kuwaderno (opsyonal)
Isang program na espesyal na idinisenyo para sa pagsulat ng HTML, tulad ng Notepad ++ para sa Windows o TextWrangler para sa Mac (opsyonal)