Nilalaman

• Mga hakbang
• Paraan 1 ng 1: Pagsulat ng isang Pahina ng HTML
• Mga Tip
• Mga babala
• Ano'ng kailangan mo

Ang HTML (Hypertext Markup Language) ay ang pangunahing wika ng programa para sa pagbuo ng mga web page. Nilikha bilang isang simple at maginhawang wika ng programa. Karamihan sa mga pahina sa Internet ay binuo gamit ang isa sa mga anyo ng wikang ito (ColdFusion, XML, XSLT). Matapos basahin ang artikulong ito, maaari mong ipagpatuloy ang iyong pagsasanay gamit ang iba pang mga mapagkukunan sa Internet. Subukang maghanap sa internet ng iba pang mga artikulo na nauugnay sa paksang ito.

Mga hakbang

Paraan 1 ng 1: Pagsulat ng isang Pahina ng HTML

1. 1 Bago mo simulang pamilyar ang iyong sarili sa isa sa mga hakbang na ipinakita dito, tingnan ang seksyong "Ano ang Kakailanganin Mo".
2. 2 Ano ang dapat mong malaman bago mo simulang maunawaan ang isyung ito:
3. 3 Ang mga pangunahing kaalaman. Narinig mo na ba ang tungkol sa tag? Ang tag ay napapaligiran ng mga anggulo na bracket, na may salitang nasa loob. Ang end tag ay nakasulat sa parehong form, ngunit may pagdaragdag ng isang slash pagkatapos ng unang anggulo na bracket. Ang isang katangian ay isang opsyonal na salita sa isang tag na ginagamit upang magdagdag ng mga detalye sa isang tag.
4. 4 Ang simula ng dokumento. Sa anumang text editor na iyong ginagamit, i-paste ang sumusunod:
   html> ulo> pamagat> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   Dapat na sarado ang tag na may parehong tag, ngunit may isang slash pagkatapos ng unang anggulo na bracket. Mayroong mga pagbubukod tulad ng mga tag META o DOCTYPE.
5. 5 DOCTYPE
   • Karaniwan, ang karamihan sa mga web page ay itinakda DOCTYPE ”. Nakakatulong ito na matukoy ang pag-encode pati na rin kung paano ito malalaman ng mga web browser. Karamihan sa mga pahina ay gagana nang wala ito, "ngunit kinakailangan ito kung nais mong tumugma (Kinokontrol nila ang mga uri ng pag-encode sa Internet at kung paano ito ginagamit)... Ang DOCTYPE para sa HTML 4.01 ay ipinakita sa ibaba :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Ito ang isa ng pinakakaraniwan Ginamit ang DOCTYPE sa mga pahina sa buong internet.Una, itinuturo nito ang uri ng pahina na naglalarawan ng 'html', pagkatapos ay itinatampok nito ang uri ng pag-encode, at sa wakas, ang lokasyon ng DOCTYPE, na bilang isang resulta, ay naglalarawan sa pahina para sa web browser.
   • Mayroong iba't ibang mga uri ng HTML (iba't ibang mga bersyon na binuo sa paglipas ng mga taon), halimbawa gamit ang mga bagong tag, o tukoy na mga tag. Ang ilang mga tag ay hindi na ginagamit (ang iba pang mga mas kapaki-pakinabang na mga tag ay ginagamit sa halip).
   • b> at ako> - ito ang kasalukuyang ipinapataw sa mga tag, dahil ginagamit ang mga ito upang ibahin ang anyo ang teksto, ngunit hindi mga pagtutukoy, bilang isang resulta, iba pang mga tag ang dumating upang mapalitan ang mga ito. Tag malakas> ay isang kapalit para sa b>, at em>, kapalit ng ako>.
   • Mahalaga na ang mga nakaraang tag ay pinalitan ng mga tag na higit pa sa pag-format. Kung isinalin ang teksto, hindi lamang ang pag-format, ngunit ang kahulugan din nito ay mananatiling pareho. Tama ito sa semantikal.
   • Sa XHTML bersyon 2.0, ang b> at ako> hindi nagamit, tulad ng sa HTML bersyon 3+.
6. 6 HTML na "Rule ng Encapsulation".
   • Tingnan natin ang mas mahahalagang mga tag na kasalukuyang ginagamit. Sa panahon ng paglikha ng pahina, isang simpleng istraktura ang ginagamit. Kung binuksan ang isang tag, pagkatapos bilang isang resulta, dapat itong sarado... Nalalapat ito sa buong istraktura. Narito ang isang wastong halimbawa ng istraktura ng layout ng XHTML:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • ulo>
   • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
   • pamagat> Kamusta Mundo! / pamagat>
   • / ulo>
   • katawan>
   • h1> Hello World! / h1>
   • / katawan>
   • / html>
   • Sample code na naglalabas ng isang mensahe Kamusta mundo... Ito ay tinatawag na pagsubok Kamusta mundo.
7. 7 Heading
   • Ang pamagat ng web page ay ang nilalaman sa pagitan ng tag ulo>... Ang nilalamang ito ay hindi maaaring matingnan ng gumagamit (ang pamagat lamang na ipinapakita sa pamagat ng pahina). Impormasyon sa pagitan ng mga tag ulo>, maaaring mapaloob ang iba pang mga tag, tulad ng:
     
     
     • Ginagamit ang tag na META para sa impormasyon na kapaki-pakinabang sa mga search engine at iba pang mga utility.
     • Ang tag ng LINK na lumilikha ng isang link sa pagitan ng mga dokumento, halimbawa para sa Mga Estilo (CSS).
     • Ang tag ng SCRIPT, kasama dito ang halos anumang pag-coding sa web, na may kakayahang malayuan na ma-access (mula sa ibang dokumento).
     • Ang STYLE tag, na mahalagang isang istilo na maaaring mailapat sa isang pahina.
     • Ang TITLE tag ay ang pamagat na lilitaw bilang pamagat ng isang pahina sa iyong web browser.
   • Tingnan natin ang isang demo ng ilan sa mga ito sa isang halimbawa ng header na kinuha mula sa website na ito (pinaikling ito):
     • ulo>
     • pamagat> ... / pamagat>
     • pangalan ng meta = "paglalarawan" nilalaman = "..." />
     • link rel = "styleheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
     • style type = "text / css" media = "lahat"> ... / style>
     • script type = "text / javascript" src = "..."> / script>
     • / ulo>
       
       Kung sakaling hindi mo napansin, ang mga indibidwal na mga tag ay nai-highlight, na tinanggal ang aktwal na impormasyon. Ang halimbawa ay sa halip maikli, ipinapakita ang halos bawat tag na matatagpuan sa ulo>maliban sa komento sa HTML (Pag-uusapan natin ito sa simpleng mga tag).
8. 8 Mga simpleng tag saanman
   • Magpatuloy tayo at makita ang iba pang mga tag. Mag-ingat sa iyong pag-tag at alalahanin ang panuntunan sa hinlalaki, "Encapsulation."
     
     
     • malakas> Binibigyang diin ang mahalagang teksto.
     • maliit> Ginagawang mas maliit ang teksto. Ang laki ng font ay sinusukat sa karaniwang mga yunit mula 1 hanggang 7, 3 ang default na laki ng teksto. ...
     • pre> Tumutukoy ng isang bloke ng mayamang teksto. Bilang ito ay tama, ang naturang teksto ay nai-type sa isang font ng parehong laki at sa lahat ng mga puwang sa pagitan ng mga salita.
     • em> Nagpapakita ng teksto bilang isang parirala.
     • del> Inaatake ang teksto.
     • ins> Tinutukoy ang teksto na naipasok sa dokumento.
     • h1> Isa sa maraming mga heading ng tag. Ang mga tag ng ganitong uri ay nagsisimula sa 'h', na may pagkakaiba sa bilang. Tiyaking isara ang tag sa parehong numero.
     • p> Tumutukoy ng isang talata.
     • ! --- ... ---> Hindi tulad ng ibang mga tag, ang komento ay dapat nasa loob mismo ng tag. Makikita lamang ang impormasyong ito kapag tiningnan ang code.
     • blockquote> Nagpapakita ng isang quote, maaaring magamit sa cite> tag.
     • Ang ilang mga halimbawa sa itaas ay hindi isang kumpletong listahan ng mga mayroon nang mga tag. Upang malaman ang tungkol sa iba, bisitahin.
9. 9 Lumilikha ng isang malinaw na istraktura
   • Ang mga pahina ay idinisenyo upang maghawak ng data sa mga simpleng hanay ng mga tag upang maaari naming mai-parse ang impormasyon sa mga talata. Kinikilala ng computer ang data; hindi nito alam ang tungkol sa konteksto o koneksyon sa konsepto. Kailangan naming lumikha ng mga pahina ng HTML na madaling gamitin sa computer. Nakamit ito sa pamamagitan ng paggamit ng div tag. Nakakatulong ito upang lumikha ng isang malaking bilang ng mga pahina. Maaari itong istilo ng CSS at mas madali kaysa sa paglikha ng malalaking mga talahanayan ng code para sa layout.
     • div> Ang tag na ito ay espesyal dahil maaari itong istilo at gumamit ng magkakahiwalay na mga bloke ng impormasyon na maaaring maunawaan ng parehong gumagamit at computer.
   • Tingnan natin ang isang simpleng layout ng HTML na gumagamit ng isang div tag.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • ulo>
     • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
     • pamagat> Kamusta Mundo! / pamagat>
     • / ulo>
     • katawan>
     • h1> Hello World! / h1>
     • div id = "contentOne">
     • p> Ito ay ilang teksto sa div # contentOne. / p>
     • div>
     • p> Isang talata sa isang sub-seksyon ng div # contentOne / p>
     • / div>
     • / div>
     • / katawan>
     • / html>
   • Ang paggamit ng mga div> tag ay makakatulong sa paghahanap at pagbabago ng mga istilo habang nagtatrabaho sa CSS at Javascript. Gumagamit ang HTML ng iba't ibang pag-encode upang gumana sa mga estilo ng CSS at Javascript upang lumikha ng isang mas mahusay at mas tumutugon na karanasan ng gumagamit.

Mga Tip

• Matapos basahin ang artikulong ito, huwag tumigil at isipin na natutunan mo ang lahat ng kailangan mong malaman. Palaging may matutunan, lalo na sa teknolohiyang ito.
• Alamin, maunawaan, at magsulat ng code.
• Tandaan na ang ilang mga tag ay ginagamit lamang>. Ang para at br ay ilang halimbawa. Ang iba pang mga tag ay binuksan na may> kailangang isara pa. Halimbawa, "div> / div>".
• Inaasahan ng mga tao ang mga bagong tuklas, kaya't muling likhain, disenyo, o code.
• Kapag marami kang natutunan, subukang alamin ang pagprogram ng server.
• Alamin na gumana sa CSS pati na rin sa Javascript.

Mga babala

• Tandaan, ang HTML ay tungkol sa pag-edit ng nilalaman. Nangangahulugan ito na ang HTML ay ginagamit lamang upang mag-imbak ng nilalaman sa isang kinikilalang format. Ang iba pang mga pagbabago ay dapat gawin gamit ang iba pang mga teknolohiya, tulad ng CSS. Nangangahulugan din ito ng paggawa ng "Semantically correctkahit hindi aminin ng iba. Ang ibang mga wika sa pagprograma ay tumutulong sa pagbuo ng mga web page (CSS, Javascript, at XML). Ang HTML ay isang tagabuo ng nilalaman.

Ano'ng kailangan mo

• Isang text editor na sumusuporta sa pag-encode ng ANSI
• Isang web browser tulad ng Internet Explorer o Mozilla Firefox
• (Opsyonal) wysiwyg o wykiwyg editor ng HTML tulad ng Adobe Dreamweaver, Aptana Studio, o Microsoft Expression Web