Paano magsulat ng isang pahina ng HTML (na may mga larawan) - Tip

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

Nilalaman

Mga hakbang
Bahagi 1: Paano ko natuklasan ang HTML
Payo
Babala
Ang iyong kailangan

Ang HTML (HyperText Markup Language) ay isang pangunahing wika para sa pagbuo ng mga web page. Nilikha ito bilang isang madali at kakayahang umangkop na wika ng pag-cod. Halos bawat web page sa Internet ay binuo na may ilang anyo ng code na ito (ColdFusion, XML, XSLT). Madaling maunawaan ang HTML, ngunit maaari mong panatilihin ang pag-aaral tungkol dito sa mahabang panahon kung interesado ka sa komprehensibong pag-andar nito. Upang magdagdag ng kulay at kasiyahan sa iyong website, maaari mong malaman ang pangunahing CSS sa sandaling masanay ka sa isang pangunahing pahina ng HTML.

Mga hakbang

Bahagi 1 ng 4: Pagbuo ng isang Dokumento

Magbukas ng isang simpleng editor ng teksto. Ang NotePad ay isang mahusay na pagpipilian at maaaring ma-download nang libre. Maaari kang magsulat ng HTML sa karamihan ng mga editor ng teksto, ngunit ang mas kumplikadong software na may mga kakayahan sa awtomatikong pag-format ay maaaring maging mahirap na ayusin ang iyong pahina ng HTML.
- Huwag gumamit ng TextEdit, tulad ng karaniwang ini-save ang file sa isang format na maaaring hindi makilala ng iyong browser bilang HTML.
- Maaari mo ring gamitin ang isang online HTML editor. Ang mga dedikadong mga programa sa pag-edit ng HTML ay hindi inirerekomenda para sa mga nagsisimula.
I-save ang isang file bilang isang web page. Piliin ang File → I-save Tulad ng sa menu sa tuktok. Baguhin ang format ng file sa "Web Page", ".html" o ".htm". I-save ang file kung saan madali mo itong mahahanap.
- Walang pagkakaiba sa pagitan ng tatlong mga pagpipilian na ito.
Buksan ang file sa isang browser. I-double click ang file, at awtomatiko itong bubuksan bilang isang blangkong web page sa iyong browser. Bilang kahalili, maaari mong buksan ang isang browser, tulad ng Firefox o Internet Explorer, at pagkatapos ay gamitin ang File → Buksan ang File upang mapili ang dokumento.
- Ang website na ito ay hindi online. Ito ay makikita lamang sa iyong computer.
I-refresh ang web page at tingnan ang mga pagbabagong nagawa. I-type ang sumusunod sa iyong blangko na dokumento: Kamusta. I-save ang dokumento. I-refresh ang blangkong web page sa iyong browser, at dapat mong makita ang salitang "Kamusta" na naka-bold na lumitaw sa tuktok ng pahina. Kailan man nais mong subukan ang iyong bagong HTML sa panahon ng tutorial na ito, i-save ang .htm na dokumento, at pagkatapos ay i-refresh ang window ng iyong browser upang makita kung paano naiipon ang HTML.
- Kung nakikita mo ang mga salitang ""at""Lumilitaw sa iyong browser, ang file ay hindi nai-compile nang tama sa HTML. Sumubok ng ibang text editor o ibang browser.
Alamin ang mga tag. Ang mga utos ng HTML ay nakasulat sa "mga tag" na nagsasabi sa browser kung paano mag-ipon at ipakita ang iyong web page. Palagi silang nakasulat sa loob ng mga solong quote
, at hindi ipinakita sa web page tulad ng paggamit mo sa kanila sa halimbawa sa itaas:
- ay isang "panimulang kard" o "pambungad na kard". Ang anumang nakasulat pagkatapos ng tag na ito ay matutukoy bilang "naka-bold" (naka-bold sa isang web page).
- ay isang "end tag" o "pagsasara ng tag", na maaari mong makilala sa pamamagitan ng simbolo / pag-sign. Nagsasaad ito ng pagtatapos ng naka-bold na teksto. Karamihan (hindi lahat) na mga tag ay nangangailangan ng isang end tag upang gumana, kaya tiyaking isama ito.
Buuin ang iyong dokumento. Tanggalin ang lahat sa iyong dokumento sa HTML. Magsimula muli sa sumusunod na teksto, eksakto tulad ng pagkakasulat nito (ibawas ang mga puntos ng bala). Sinasabi ng HTML code na ito sa browser kung anong uri ng HTML ang iyong ginagamit, at lahat ng iyong HTML ay mailalagay sa loob ng mga tag. at .
Idagdag ang ulo (ulo) at mga body tag. Ang mga dokumento ng HTML ay nahahati sa dalawang bahagi. Ang seksyon na "tuktok" ay para sa espesyal na impormasyon, tulad ng pamagat ng pahina. Naglalaman ang seksyong "katawan" ng pangunahing nilalaman ng pahina. Idagdag ang pareho ng mga seksyon na ito sa iyong dokumento, at tandaan na isama ang mga end tag. Ang bagong idinagdag na teksto ay naka-bold:
Bigyan ang iyong pahina ng isang pamagat. Karamihan sa mga kard sa seksyon ng ulo ay hindi mahalaga upang malaman sa isang nagsisimula. Madaling gamitin ang tag ng pamagat, at tutukuyin kung ano ang lalabas bilang pangalan ng window ng browser o sa tab ng browser. Ilagay ang iyong mga heading ng pagsisimula at pagtatapos ng mga tag sa loob ng mga head tag, at isulat ang anumang mga header na gusto mo sa pagitan ng mga tag na iyon:
- Ang aking unang pahina ng HTML.
anunsyo

Bahagi 2 ng 4: Pag-format ng Teksto

Magdagdag ng teksto sa iyong katawan. Para sa seksyong ito, gagana lamang kami sa mga body tag. Ang iba pang teksto ay mananatili pa rin sa iyong dokumento, ngunit makatipid kami ng puwang sa pamamagitan ng hindi ito ulitin sa tutorial na ito. Isulat ang anumang nais mo sa pagitan ng mga kard at , at lilitaw ito bilang ang unang nilalaman sa iyong pahina. Halimbawa:
- Sinundan ko ang wikiHow mga tagubilin upang magsulat ng isang pahina ng HTML.
Magdagdag ng mga heading para sa teksto. Ayusin ang iyong pahina gamit ang mga heading tag, na nagtuturo sa browser na ipakita ang teksto sa pagitan nila sa isang mas malaking sukat ng font. Ang mga tag na ito ay ginagamit din ng mga search engine at iba pang mga tool upang matukoy kung tungkol saan ang iyong website at kung paano ito organisado.

ay ang pinakamalaking heading, at maaari kang lumikha ng mas maliit na mga heading hanggang sa

. Subukan ang mga ito sa iyong pahina:
- Maligayang pagdating sa aking pahina.
- Sinundan ko ang wikiHow mga tagubilin upang magsulat ng isang pahina ng HTML.
- Ang layunin ko ngayon:
- Nakumpleto na mga layunin:
- Alamin kung paano gamitin ang mga heading.
- Hindi nakumpleto na mga layunin:
- Matuto nang higit pa sa mga tag sa pag-format ng teksto.
Matuto nang higit pa sa mga tag sa pag-format ng teksto. Nakita mo na ang "malakas" na tag, ngunit maraming iba pang mga paraan upang mai-format ang iyong teksto. Subukan ang mga tag na ito, o may maraming mga tag nang sabay-sabay para sa parehong string ng teksto. Tandaan na magdagdag ng mga nagtatapos na tag sa likuran!
- Mahalagang teksto, ipinapakita nang naka-bold sa browser.
- Binigyang diin ang teksto, ipinapakita sa mga italic sa browser.
- Medyo mas maliit ang teksto kaysa sa dati. Awtomatikong magbabago ang laki ng teksto na ito kung ginamit sa isang heading.
- ~~Ang teksto ay hindi na nauugnay, ipinapakita gamit ang isang dash ng katawan.~~
- Ang teksto ay naipasok nang huli kaysa sa iba pang mga dokumento, ipinapakita na may mga salungguhit.
Ayusin ang teksto sa iyong pahina. Maaaring napansin mo na ang pagpindot sa "ipasok" na key ay hindi sapat para sa teksto na lumabas sa isa pang linya. Matutulungan ka ng mga tag na ito na lumikha ng mga talata at mga linya ng pahinga, o ayusin ang iyong teksto sa iba pang mga paraan:
- Maikli para sa "talata," panatilihin ng tag na ito ang lahat ng teksto sa pagitan ng mga tag na ito sa isang talata, at paghiwalayin ito mula sa teksto sa itaas at sa ibaba nito.
- Ang tag na ito ay bubuo ng mga break ng linya. Huwag magdagdag ng isang end tag dito, dahil hindi ito makagambala sa anumang iba pang nilalaman. Gamitin ang tag na ito sa mga tula o linya ng address, hindi mga talata.
- ```
Kung kailangan mong ipakita ang teksto nang napaka tumpak, itinatakda ng tag na ito ang teksto sa loob nito sa isang nakapirming lapad na font (ang bawat titik ay may parehong lapad), at pinapayagan kang lumikha ng mga agwat Ang mga blangko at linya ay masisira hangga't gusto mo para sa regular na pag-edit sa halip na mga tag.
```
- Tinutukoy ng tag na ito ang uri ng teksto na naka-quote mula sa isang mapagkukunan.
  Maaari mong ilarawan ang pinagmulan mamaya sa cite card.
Magdagdag ng hindi nakikitang teksto ng caption. Ang mga tag ng komento ay hindi ipinakita sa web page. Pinapayagan ka nilang i-annotate ang iyong sarili sa dokumento ng HTML nang hindi nakakaapekto sa nilalaman. Huwag magdagdag ng isang end tag.
- Ang mga kard na nag-iisa nang hindi nagtatapos ng mga tag ay tinatawag na "walang laman na mga tag."
Pagsamahin ang mga ito nang sama-sama. Ang pinakamahusay na paraan upang maalala ang mga tag na ito ay ang paggamit ng mga ito sa iyong website. Narito ang isang halimbawa ng paggamit ng mga kard sa mga hakbang na natutunan mo sa ngayon. Subukang hulaan kung paano lalabas ang mga ito sa browser, pagkatapos kopyahin ang mga ito sa iyong dokumento at alamin.
- Ang aking unang pahina ng HTML.
- Maligayang pagdating sa aking website.
- Inaasahan kong nasiyahan ka sa pahinang ito!
  Ginawa ko ito para lamang sa iyo.
- Bahagi 1: Paano ko natuklasan ang HTML
- Natutunan ko na ang HTML sa ~~isa~~ dalawaoras, kaya ngayon dalubhasa na ako.
anunsyo

Bahagi 3 ng 4: Pagdaragdag ng Mga Link at Larawan

Alamin ang tungkol sa mga katangian. Ang mga tag ay maaaring magkaroon ng karagdagang impormasyon na nakasulat sa loob ng mga ito, na tinatawag na mga katangian. Ang mga katangiang ito ay kinakatawan ng mga karagdagang salita sa loob ng mga tag mismo, sa form pangalan ng pag-aari = "tiyak na halaga". Halimbawa, ang anumang HTML tag ay maaaring magkaroon ng katangian ng pamagat:
- Narito na ang talata sa pagpapakilala.
  Pamagatan ang talata na "Panimula," na lilitaw kapag nag-hover ka sa itaas ng talata sa web page.
Mga link sa iba pang mga website. Paggamit ng mga kard upang lumikha ng isang hyperlink sa anumang iba pang web page. Ipasok ang URL ng web page upang mag-link sa paggamit ng katangian ng href. Narito ang isang halimbawa na nagli-link sa web page na iyong binabasa:
- Ang iyong mga bisita sa iyong website ay maaaring mag-click sa teksto na ito upang sundin ang link.
Magdagdag ng isang katangian ng id sa tag. Ang isa pang katangian na maaaring magamit ng anumang HTML tag ay ang "id" na elemento. Sa anumang card, isulat id = "vidu" o gumamit ng anumang pangalan na walang mga puwang. Hindi ito gumagawa ng anumang nakikitang epekto, ngunit gagamitin namin ito sa susunod na hakbang.
- Halimbawa, idagdag ang sumusunod sa iyong dokumento:
  Ginamit ang talatang ito bilang isang halimbawa upang ilarawan kung paano gumagana ang katangiang id.
Mag-link sa isang elemento na may isang tiyak na id. Maaari na naming magamit ang hyperlink tag, , upang mai-link sa isa pang lokasyon sa parehong pahina. Sa halip na isang URL, gagamitin namin ang # simbolo, na susundan ng halagang id na nais naming mai-link. Halimbawa, Ang teksto na ito ay mai-link sa teksto na may id na "vidu."
- Ang lahat ng mga halagang HTML ay sensitibo sa kaso. Parehong magli-link ang "#VIDU" at "#vidu" sa parehong lokasyon.
- Kung ang iyong pahina ay sapat na maikli upang maipakita nang sabay-sabay ang buong pahina, marahil ay hindi mo mapansin ang anumang nangyayari kapag na-click mo ang link sa iyong browser. Baguhin ang laki ang window hanggang lumitaw ang scroll bar, at pagkatapos ay subukang muli.
Magdagdag ng mga larawan. Kard ay isang walang laman na tag, nangangahulugang walang end tag ang kinakailangan. Ang lahat ng impormasyong kailangan ng browser upang maipakita ang imahe ay idinagdag gamit ang mga katangian. Narito ang isang halimbawa upang maipakita ang wikiHow logo, na may isang paglalarawan para sa bawat katangian sa likod:
- Ari-arian src = "" sinasabi sa browser kung nasaan ang larawan. (Tandaan na ang pag-post ng isang larawan mula sa site ng ibang tao ay itinuturing na hindi naaangkop - at ang larawan ay mawawala kapag ang pahina ay hindi na aktibo.)
- Ari-arian style = "" Maaari itong gumawa ng maraming bagay, ngunit ang pinakamahalaga ay ginagamit ito upang maitakda ang lapad at taas ng isang imahe sa mga pixel. (Maaari mo ring gamitin ang magkakahiwalay na mga katangian na lapad = "" at taas = "" sa halip, ngunit maaaring humantong ito sa mga kakaibang problema sa pagbabago ng laki kung gumagamit ka ng CSS.)
- Ari-arian alt = "" ay isang maikling paglalarawan ng imahe na makikita ng gumagamit kung nabigong ma-load ang imahe. Ito ay itinuturing na isang kinakailangan, dahil ginagamit ito para sa mga mambabasa ng screen para sa mga bisita sa website na bulag.
anunsyo

Bahagi 4 ng 4: Matuto Nang Higit Pa Pagdaragdag at Pagkuha ng Iyong Website Online

Kumpirmahin ang iyong HTML. Sinusuri ng pagpapatunay ng HTML ang mga error sa iyong code. Kung ang iyong site ay hindi nagpapakita ng tama, ang pagpapatunay ay makakatulong sa iyo na makita ang error na nagdudulot ng problema. Maaari ka ring magturo sa iyo ng higit pa tungkol sa HTML sa pamamagitan ng pagtukoy na ang code ay mukhang mahusay na ipinakita, ngunit hindi na ito inirerekomenda dahil sa mga bagong pag-update sa pamantayan ng HTML. Ang paggamit ng hindi wastong HTML ay hindi magbibigay sa iyong site ng walang silbi, ngunit maaaring maging sanhi ng mga problema o ipakita na hindi matatag sa iba't ibang mga browser.
- Subukan ang isang libreng serbisyo sa pagpapatunay sa online mula sa W3C, o maghanap para sa isa pang tool sa pagpapatunay ng HTML 5 sa online.
Alamin ang higit pang mga tag at katangian. Maraming iba pang mga HTML tag at katangian, at maraming mga lugar upang matutunan ang mga ito:
- Subukan ang w3schools at HTML Dog para sa higit pang mga tutorial at kumpletong listahan ng mga tag.
- Humanap ng isang web page na nais mo sa hitsura nito, pagkatapos ay gamitin ang function na "Tingnan ang Pinagmulan ng Pahina" ng iyong browser upang makuha mo mismo ang HTML code. Kopyahin ito sa iyong dokumento at pag-aralan kung paano ito gumagana.
- Basahin ang iba pang mga artikulo at alamin ang tungkol sa kung paano lumikha ng mga talahanayan sa HTML, gumamit ng mga meta tag upang madagdagan ang iyong mga pagkakataong matagpuan ng mga search engine, o gumamit ng isang paghahati. magtakda ng isang lugar sa pahina) at span (ginamit upang tukuyin ang estilo ng elemento ng teksto) upang matulungan ang istilo sa pamamagitan ng CSS.
I-online ang iyong website. Pumili ng isang serbisyo upang mai-host ang iyong website, at pagkatapos ay maaari kang mag-upload ng maraming mga pahina ng HTML hangga't gusto mo sa iyong personal na web domain. Upang magawa ito, kakailanganin mong gumamit ng FTP upload software, ngunit maraming mga serbisyo sa pag-arkila sa web ang nag-aalok din ng serbisyong ito.
- Kapag nag-link sa mga pahina o larawan na direkta sa iyong site, kakailanganin mong gamitin ang buong address. Halimbawa, kung ang iyong domain name ay www.chuyengiahtmlsieudang.com, kung gayon ang teksto ay nasa mga tag na ito ay mai-link sa "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Magdagdag ng mga estilo sa CSS. Kung ang iyong pahina ng HTML ay mukhang medyo walang pagbabago, subukang alamin ang mga pangunahing kaalaman sa CSS upang magdagdag ng mga kulay, iba't ibang mga font, at mas mahusay na kontrol sa kung saan inilalagay ang mga elemento. Ang pag-link ng isang "styleheet" ng CSS sa isang pahina ng HTML ay magpapahintulot sa iyo na gumawa ng marahas na mga pagbabago nang mabilis, awtomatikong inaayos ang istilo ng lahat ng teksto sa loob ng isang naibigay na tag. Maaari kang maglaro sa paligid ng pangunahing layer ng pag-format dito, o sumisid sa mas detalyadong mga tutorial sa CSS Dog ng HTML Dog.
Idagdag ang JavaScript sa iyong website. Ang JavaScript ay isang wikang ginagamit sa pagprograma upang magdagdag ng maraming pag-andar sa iyong mga pahina ng HTML. Ang mga utos ng JavaScript ay naipasok sa pagitan ng mga tag ng pagsisimula at pagtatapos , at maaaring magamit upang magdagdag ng mga interactive na pindutan, kalkulahin ang mga problema sa matematika, at higit pa. Alamin ang higit pa sa mga halimbawa ng w3c. anunsyo

Payo

Ang pagdedeklara ng doctype (ginamit na Pagpapahayag ng Uri ng Dokumento) na ginamit sa tutorial na ito ay "maluwag na HTML 4.0.1 transitional" (HTML 4.0.1 hindi masikip na paglipat), isang madaling format. para magamit ng mga baguhan. Gumamit () isang kahalili sa pagkakaroon ng browser na ipagsama ito sa isang mahigpit na format na HTML 5, na kung saan ay ang inirekumenda (kahit na hindi gaanong ginagamit) na karaniwang istilo.

Babala

Ang layunin ng HTML ay upang mapanatili ang nilalaman sa isang pandaigdigang format. Wala itong kontrol sa pagtatanghal ng iyong website, tulad ng kulay ng background at eksaktong paglalagay ng mga elemento. Habang may mga tag pa rin na pinapayagan kang gawin ito, magandang ideya na gumamit ng CSS upang lumikha ng isang mas madaling makontrol at pare-parehong website.

Ang iyong kailangan

Isang simpleng text editor, tulad ng NotePad o TextEdit
Isang web browser, tulad ng Internet Explorer o Mozilla Firefox
(Opsyonal) Isang editor ng HTML tulad ng Adobe Dreamweaver, Aptana Studio, o Microsoft Expression Web