Paano matutunan ang HTML

Video.: HTML Tutorial for Beginners | Basic HTML - Part 1 (Tagalog - Filipino Style)

Nilalaman

Mga hakbang
Bahagi 1 ng 2: Pag-aaral ng Mga Pangunahing Kaalaman sa HTML
Bahagi 2 ng 2: Masusing HTML
Mga Tip
Mga babala
Ano'ng kailangan mo

Maikli ang HTML para sa English Hyper Text Markup Language (Hyper Text Markup Language). Ito ang code, o wika, kung saan nilikha ang pangunahing markup ng mga site. Ang pag-aaral ay maaaring mukhang nakakatakot kung hindi mo pa nai-program, ngunit sa totoo lang ang kailangan mo upang makapagsimula ay isang pangunahing text editor at internet browser. Maaari mo ring makilala ang ilang mga halimbawa ng markup ng HTML na napag-alaman mo sa mga forum sa internet, na-pasadyang mga pasadyang pahina, o mga artikulo ng wikiHow. Ang HTML ay isang kapaki-pakinabang na tool para sa anumang gumagamit ng internet, at ang pag-aaral ng mga pangunahing kaalaman ay magtatagal ng mas kaunting oras kaysa sa iniisip mo.

Mga hakbang

Bahagi 1 ng 2: Pag-aaral ng Mga Pangunahing Kaalaman sa HTML

1 Magbukas ng isang dokumentong HTML. Karamihan sa mga editor ng teksto (Notepad o Notepad ++ para sa Windows, TextEdit para sa Mac, gedit para sa GNU / Linux) ay maaaring magamit upang makabuo ng mga HTML file. Lumikha ng isang bagong dokumento at i-save ito gamit ang File → I-save Tulad ng Format ng Pahina ng Web, o baguhin ang extension ng file sa .html o .htm sa halip na .doc, .rtf o ibang extension.
- Maaari kang makatanggap ng isang babala na ang file ay nai-save bilang "simpleng teksto" sa halip na format ng RTF, o ang pag-format at mga imahe ay hindi nai-save. Ito ay mabuti; para sa HTML hindi kinakailangan ang mga pagpipiliang ito.
2 Buksan ang nabuong file sa isang browser. I-save ang blangko na file, hanapin ito sa iyong computer at i-double click ito upang buksan ito. Ang isang blangko na pahina ay dapat buksan sa browser. Kung hindi, i-drag ang file sa address bar ng iyong browser. Habang ini-edit mo ang HTML file, maaari mong i-refresh ang pahinang ito upang makita ang mga pagbabago.
- Mangyaring tandaan na sa ganitong paraan hindi ka lumilikha ng isang website sa Internet. Ang ibang mga tao ay hindi magkakaroon ng pag-access sa pahinang ito, at hindi mo kailangan ng isang koneksyon sa internet upang subukan ang iyong lokal na pahina. Binibigyang kahulugan lamang ng browser ang HTML code, "binabasa" ito na para bang isang website.
3 Maunawaan kung ano ang mga markup tag. Hindi tulad ng regular na teksto, ang mga tag ay hindi lilitaw sa pahina. Sa halip, sinabi nila sa browser kung paano ipakita ang pahina at ang nilalaman nito. Naglalaman ang tag na "pambungad" ng mga tagubilin. Halimbawa, masasabi nito sa browser na dapat ipakita ang teksto bilang matapang... Kailangan din nito ng isang "end" na tag upang maipakita ang browser kung saan nagtatapos ang tagubilin. Sa halimbawang ito, ang teksto sa pagitan ng mga tag ng pagsisimula at pagtatapos ay ipapakita nang naka-bold. Ang mga tag ay nakasulat sa loob ng hindi pantay na mga palatandaan, ngunit ang end tag ay nagsisimula sa isang forward slash.
- Ang tag na pambungad ay nakasulat sa pagitan ng mga palatandaan ng hindi pagkakapantay-pantay: pambungad na tag>
- Sa pansarang tag, ang isang pasulong na slash ay inilalagay bago ang taglarawang tag (pangalan): /end tag>
- Basahin pa upang malaman kung paano ginagamit ang iba't ibang mga tag. Para sa hakbang na ito, kailangan mo lamang tandaan ang format ng pag-record. Ang mga tag ay nakasulat sa pagitan ng mga palatandaan ng hindi pagkakapantay-pantay:> at />
- Sa ilang mga tutorial, ang mga HTML tag ay tinawag na elemento, at ang teksto sa pagitan ng pagbubukas at pagsasara ng mga tag ay tinatawag na nilalaman ng elemento.
4 I-type ang html> tag sa editor. Ang bawat HTML file ay dapat magsimula sa isang tag html> at magtapos sa isang tag / html>... Sinasabi ng mga tag na ito sa browser na ang lahat ng nilalaman sa pagitan ng mga tag ay nasa HTML. Idagdag ang mga tag na ito sa iyong dokumento:
- Kadalasan ang mga HTML file ay nagsisimula sa linya ! DOCTYPE html>na nangangahulugang dapat kilalanin ng mga browser ang buong file bilang HTML. Hindi kinakailangan ang linyang ito, ngunit makakatulong ito sa iyo na i-troubleshoot ang mga isyu sa pagiging tugma.
- I-dial html> sa tuktok ng dokumento.
- Pindutin ang Enter o Return ng maraming beses upang lumikha ng maraming mga blangko na linya, pagkatapos ay i-type / html>
- tandaan mo, yan ang kabuuan ang code na iyong gagawin sa artikulong ito ay kailangang isulat sa pagitan ng dalawang mga tag na ito.
5 Lumikha ng isang seksyon> sa seksyon ng file. Sa pagitan ng mga tag na html> at / html>, lumikha ng isang pambungad na tag ulo> at ang pansarang tag / ulo>... Magdagdag ng ilang mga blangko na linya sa pagitan nila. Ang nilalaman na nakasulat sa pagitan ng mga tag ng ulo> at / ulo> ay hindi ipinakita sa pahina mismo. Sundin ang mga hakbang na ito at makikita mo kung para saan ang tag na ito:
- Sa pagitan ng mga head> at / head> na mga tag, isulat pamagat> at / pamagat>
- Sa pagitan ng mga pamagat> at / pamagat> mga tag, sumulat Paano matutunan ang HTML - wikiHow.
- I-save ang iyong mga pagbabago at buksan ang file sa isang browser (o i-refresh ang pahina kung ang file ay bukas na). Kita ang teksto na lilitaw sa pamagat ng pahina sa itaas ng address bar?
6 Lumikha ng isang seksyon> katawan. Ang lahat ng iba pang mga tag at teksto sa halimbawang ito ay nakasulat sa seksyon ng katawan, na ang nilalaman nito ay ipinapakita sa pahina. Pagkatapos pagsasara ng tag / ulo>, ngunit dati pa tag / html> magdagdag ng mga tag katawan> at / katawan>... Para sa natitirang artikulong ito, makipagtulungan sa seksyon ng katawan. Ang iyong file ay dapat magmukhang ganito:
html>
ulo>
pamagat> Paano Matuto ng HTML - wikiHow / pamagat>
/ ulo>
katawan>
/ katawan>
/ html>
7 Magdagdag ng teksto gamit ang iba't ibang mga estilo. Panahon na upang idagdag ang totoong nilalaman sa pahina! Anumang isulat mo sa pagitan ng mga body tag ay ipapakita sa pahina pagkatapos na ma-refresh sa browser. Huwag gamitin simbolo o >dahil susubukan ng browser na bigyang-kahulugan ang nilalaman bilang isang tag sa halip na teksto. Sumulat Kamusta! (o kung ano man ang gusto mo), pagkatapos ay subukang idagdag ang mga tag na ito sa teksto at tingnan kung ano ang nangyayari:
- em> Hello sa lahat! / em> Ginawang "italicized" ang teksto: Kamusta!
- malakas> Kamusta sa lahat! / malakas> Ginagawa ang teksto na "naka-bold": Kamusta!
- s> Kamusta sa lahat! / s> strikethrough text: ~~Kamusta!~~
- sup> Kamusta sa lahat! / sup> ipinapakita ang font bilang isang superscript:
- sub> Kamusta sa lahat! / sub> ipinapakita ang font bilang isang subscript: _Kamusta!
- Subukang magkasama ang iba't ibang mga tag. Paano ito magmumukha em> malakas> Kamusta sa lahat! / malakas> / em>?
8 Hatiin ang teksto sa mga talata. Kung susubukan mong magsulat ng maraming linya ng teksto sa isang HTML file, mapapansin mong ang mga linya ng linya ay hindi ipinakita sa browser. Upang hatiin ang teksto sa mga talata, kailangan mong magdagdag ng mga tag:
- p> Ito ay isang hiwalay na talata. / p>
- Ang pangungusap na ito ay sinusundan ng isang line break br> bago magsimula ang linyang ito.
  Ito ang unang tag na hindi nangangailangan ng isang end tag. Ang mga tag na ito ay tinatawag na "walang laman" na mga tag.
- Lumikha ng mga heading upang maipakita ang mga pamagat ng seksyon:
  h1> heading na teksto / h1>: pinakamalaking titulo
  h2> heading text / h2> (heading sa pangalawang antas)
  h3> heading na teksto / h3> (heading ng ikatlong antas)
  h4> heading na teksto / h4> (heading sa ikaapat na antas)
  h5> heading text / h5> (pinakamaliit na pamagat)
9 Alamin na lumikha ng mga listahan. Mayroong maraming mga paraan upang lumikha ng mga listahan sa isang web page. Subukan ang mga pagpipilian sa ibaba at magpasya kung alin ang mas gusto mo. Tandaan na ang isang pares ng mga tag ay kinakailangan para sa listahan bilang isang kabuuan (halimbawa, ul> at / ul> para sa isang listahan ng naka-bullet), at ang bawat item sa listahan ay na-highlight ng iba't ibang pares ng mga tag, halimbawa, li> at / li>.
- Listahan ng Bullet:
  ul> li> Unang linya / li> li> Pangalawang linya / li> li> At iba pa / li> / ul>
- Listahan ng may bilang:
  ol> li> Isa / li> li> Dalawa / li> li> Tatlo / li> / ol>
- Listahan ng kahulugan:
  dl> dt> Kape / dt> dd> - mainit na inumin / dd> dt> Lemonade / dt> dd> - malamig na inumin / dd> / dl>
10 I-layout ang pahina gamit ang putol ng linya, pahalang na mga linya, at Mga larawan. Panahon na upang magdagdag ng ibang bagay bukod sa teksto sa pahina. Subukan ang mga sumusunod na tag o sundin ang mga link para sa karagdagang impormasyon. Gumamit ng isang online hosting service upang lumikha ng isang link sa imaheng nais mong i-post:
- Pahalang na linya: hr>
- Ipasok ang larawan: img src = "link ng imahe">
11 Magdagdag ng mga link. Maaari mong gamitin ang mga tag na ito upang lumikha ng mga hyperlink sa iba pang mga pahina at site, ngunit dahil wala ka pang isang website, matututunan mo ngayon kung paano lumikha ng mga anchor na link, iyon ay, mga link sa mga tukoy na lugar sa isang pahina:
- Lumikha ng isang anchor gamit ang isang> tag kung saan mo nais na mai-link sa pahina. Bumuo ng isang malinaw at hindi malilimutang pangalan:
  
  isang pangalan = "Mga Tip"> Ang teksto na iyong nai-link. / a>
- Gamitin ang tag na href> upang lumikha ng isang kaugnay na link o link sa isang panlabas na mapagkukunan:
  
  isang href = "link sa pahina o pangalan ng angkla sa loob ng pahina"> Text o imahe na magsisilbing link. / a>
- Upang mai-link sa isang kaugnay na link sa isa pang pahina, magdagdag ng isang # sign pagkatapos ng pangunahing link at ang pangalan ng anchor. Halimbawa, https://en.wikihow.com/learn-HTML#Tips na mga link sa seksyon ng mga tip ng pahinang ito.

Bahagi 2 ng 2: Masusing HTML

1 Kilalanin ang mga katangian. Ang mga katangian ay nakasulat sa loob ng tag, na nagpapahiwatig ng karagdagang impormasyon. Ang format ng mga katangian ay ang mga sumusunod: pangalan = "halaga", saan pamagat tumutukoy sa isang katangian (halimbawa, kulay para sa isang katangian ng kulay), at ang halaga ay nagpapahiwatig ng halaga nito (halimbawa, pula para sa pula).
- Ang mga katangian ay talagang ginamit sa nakaraang seksyon sa mga pangunahing kaalaman sa HTML. Ang img> tag ay gumagamit ng katangian src, ang mga kaugnay na mga anchor ng link ay gumagamit ng katangian pangalanat ginagamit ng mga link ang katangian href... Tulad ng napansin mo na, lahat ng mga katangian ay nakasulat sa format ___='___’.
2 Eksperimento sa mga talahanayan ng HTML. Ang paglikha ng isang talahanayan ay nagsasangkot ng paggamit ng iba't ibang mga tag. Maaari kang mag-eksperimento, o basahin ang mas detalyadong mga tagubilin.
- Lumikha ng mga tag ng talahanayan:mesa> / mesa>
- Isama ang mga nilalaman ng bawat hilera sa talahanayan sa mga tag: tr>
- Ang heading ng haligi ay tinukoy ng tag: ika>
- Mga cell sa kasunod na mga linya: td>
- Isang halimbawa ng paggamit ng mga tag na ito:
  
  talahanayan> tr> ika> Hanay 1: buwan / ika> ika> Hanay 2: pagtitipid / ika> / tr> tr> td> Enero / td> td> 5000 rubles / td> / tr> / talahanayan>
3 Alamin ang mga karagdagang tag ng seksyon ng ulo. Natutunan mo na ang ulo> tag na dumarating sa simula ng bawat html file. Bukod sa pamagat> tag, may iba pang mga tag para sa seksyong ito:
- Naglalaman ang mga meta tag metadataginamit ng mga search engine upang i-index ang site. Upang gawing mas madaling hanapin ang iyong site sa mga search engine, gumamit ng isa o higit pang mga pambungad na meta> tag (hindi kinakailangan ang pagsasara ng mga tag).Gumamit ng isang katangian at isang halaga bawat tag: meta name = "paglalarawan" nilalaman = "paglalarawan ng pahina">; o meta name = "keyword" content = "pinaghiwalay na mga keyword na koma">
- Link> mga tag na tumuturo sa mga file ng third-party, tulad ng mga style sheet (CSS), na nilikha gamit ang iba't ibang uri ng pag-encode at pinapayagan kang baguhin ang pahina ng HTML gamit ang kulay, pagkakahanay ng teksto, at maraming iba pang mga tampok.
- Ang script> mga tag na ginamit upang maglakip ng mga JavaScript file sa pahina. Ang mga file na ito ay kinakailangan upang baguhin ang interactive na pahina (bilang tugon sa mga pagkilos ng gumagamit).
4 Eksperimento sa HTML code ng iba pang mga site. Ang pagtingin sa source code ng iba pang mga web page ay isang mahusay na paraan upang malaman ang HTML. Maaari kang mag-right click sa pahina at piliin ang Tingnan ang Pinagmulan o isang bagay na katulad mula sa tuktok na menu ng iyong browser. Subukang alamin kung ano ang ginagawa ng hindi pamilyar na tag, o maghanap sa Internet para sa impormasyon tungkol dito.
- Bagaman hindi mo mai-e-edit ang mga site ng ibang tao, maaari mong kopyahin ang source code sa iyong file upang mag-eksperimento sa mga tag sa paglaon. Mangyaring tandaan na ang markup ng CSS ay maaaring hindi magagamit at ang mga kulay at pag-format ay maaaring magkakaiba ang hitsura.
5 Simulang galugarin ang mas detalyadong mga gabay. Maraming mga site sa Internet na nakatuon sa mga HTML tag, tulad ng W3Schools o HTMLbook. Mayroon ding ibinebenta na mga librong papel, ngunit subukang hanapin ang pinakabagong edisyon habang nagbabago at nagbabago ang mga pamantayan. Mas mabuti pa, master CSS upang magkaroon ng higit na kontrol sa layout at hitsura ng iyong site. Matapos matuto ng CSS, karaniwang natututo ang mga taga-disenyo ng web ng JavaScript.

Mga Tip

Ang Notepad ++ ay isang mahusay na libreng programa, katulad ng regular na Notepad, ngunit maaari mong i-save at subukan ang iyong code sa iyong browser online. (Sinusuportahan din nito ang halos anumang wika - HTML, CSS, Python, JavaScript, at iba pa.)
Maghanap ng ilang simpleng pahina sa net, i-save ang code sa iyong computer at mag-eksperimento dito. Subukang ilipat ang teksto, palitan ang font, palitan ang mga imahe - anupaman!
Maaari mong itago ang isang kuwaderno kung saan nagsusulat ka ng mga tag upang palagi mong nasa kanilang kamay ang mga ito. Maaari mo ring mai-print ang pahinang ito at mag-refer dito.
Kapag nagsulat ka ng code, gawin itong maingat upang maunawaan mo ito at ng ibang mga tao. Gumamit! - Magpasok ng puna dito -> para sa mga komento sa HTML: hindi ito makikita sa pahina, ngunit makikita sa code ng code.
Ang XML at RSS ay nagkakaroon ng katanyagan. Ang code para sa mga pahinang naglalaman ng mga XML at RSS na teknolohiya ay mas mahirap para sa isang walang karanasan na gumagamit na mabasa at maunawaan, ngunit ang mga tool na ito ay lubos na kapaki-pakinabang.
Ang mga markup na tag sa HTML ay case-insensitive, ngunit inirerekumenda namin ang paggamit lamang ng mga maliliit na titik (tulad ng mga halimbawa sa artikulong ito) para sa parehong pamantayan at pagiging tugma ng XHTML.

Mga babala

Ang ilang mga tag ay nawala sa paggamit sa nakaraang ilang taon at napalitan ng mga bago na nagbibigay ng pareho o ilang karagdagang mga epekto.
Kung nais mong subukan ang iyong pahina, magtungo sa W3 site at suriin ang mga modernong kinakailangang HTML. Nagbabago ang mga pamantayan ng HTML sa paglipas ng panahon, at ang ilang mga tag ay pinalitan ng mga bago na gumana nang mas mahusay sa mga modernong browser.

Ano'ng kailangan mo

Isang text editor tulad ng Notepad (Windows) o TextEdit (Mac)
Papel / notepad (hindi kinakailangan)
HTML editor tulad ng Notepad ++ (Windows) o TextWrangler (Mac) (hindi kinakailangan)