5 Mga Hakbang sa Pag-unawa sa Pangunahing HTML Code

Ang HTML ay isang mahalagang bahagi ng web na alam natin ito. At habang ang ilang mga taga-disenyo ng web ay lumilikha ng mga pahina sa pamamagitan ng manu-manong pagta-type ng HTML, madaling gamitin pa rin na malaman ng kaunti tungkol dito.

Titingnan namin ang ilang mga pangunahing kaalaman sa wika, kasama ang kung ano talaga ang HTML, ilang pangunahing konsepto, at kung paano ito nakikipag-ugnay sa ibang mga wika. Isipin ito bilang isang kurso sa pag-crash ng 'HTML for dummies'.

Mga Pangunahing Kaalaman sa HTML: Ano ang HTML?

Ang HTML ay nangangahulugang Hyper Text Markup Language . At habang minsan ay pinagsama ito sa mga wika ng pagprograma, hindi ito tumpak.

Bilang isang wika ng markup , Hinahayaan ka lamang ng HTML na lumikha ng layout ng pagpapakita ng mga pahina. Isang totoo wika ng programa , tulad ng Java o C ++, naglalaman ng lohika at mga utos na isinasagawa.

Habang simple ito, ang HTML ay nasa likod ng bawat pahina sa web. Responsable para sa kung anong teksto ang nagpapakita bilang naka-bold, pagdaragdag ng mga imahe, at pag-link sa iba pang mga pahina. Mayroon kaming isang FAQ sa HTML na higit na nagpapaliwanag.

Maaari kang mag-right click sa karamihan ng mga webpage sa iyong browser at pumili Tingnan ang mapagkukunan ng pahina o katulad na makita ang HTML sa likuran nila. Malamang maglalaman din ito ng maraming code na hindi HTML, ngunit maaari mo itong ayusin.

Kahit na mayroon kang zero na karanasan sa markup o mga wika sa pagprograma, ang pag-aaral ng kaunti tungkol sa HTML ay gagawing mas may kaalamang gumagamit sa web sa iyo. Maglakad tayo sa limang pangunahing mga hakbang upang matulungan kang maunawaan kung paano gumagana ang HTML. Magbibigay kami ng mga halimbawa.

Hakbang 1: Pag-unawa sa Konsepto ng Mga Tag

Gumagamit ang HTML ng isang sistema ng mga tag upang mai-kategorya ang iba`t ibang mga elemento ng dokumento.

Karamihan sa mga tag ay magkakasama upang balutin ang apektadong teksto sa loob nito. Narito ang isang simpleng halimbawa (ang

gumagawa ng text si tag matapang ; tatalakayin natin ito nang kaunti pa.)

This is some bold text .
Pansinin kung paano nagsisimula ang tag na pagsasara sa isang forward slash (/). Nangangahulugan ito ng isang tag na nagsasara, na mahalaga. Kung hindi mo isara ang isang tag, lahat mula sa simula hanggang sa ay magkakaroon ng katangiang iyon.
kung paano ilipat ang mga naka-install na programa sa isa pang drive

Gayunpaman, hindi lahat ng mga tag ay may isang pares. Ang ilang mga elemento ng HTML, tinawag walang laman na mga elemento , walang nilalaman at umiiral nang mag-isa. Ang isang halimbawa ay ang
tag, na kung saan ay isang linya ng linya. Maaari mong 'isara' ang mga naturang tag sa pamamagitan ng pagdaragdag ng isang slash (tulad ng
) ngunit hindi ito mahigpit na kinakailangan.

Hakbang 2: Ang Skeleton HTML Layout

Ang isang tamang dokumento ng HTML ay dapat na may ilang mga tinukoy na mga tag upang mailatag ito nang tama. Ito ang mga mahahalagang bahagi:

Ang bawat dokumento sa HTML ay dapat magsimula sa upang ideklara ang kanyang sarili bilang tulad. Sa gayon, ang tag ng pagsasara nito, , ay ang huling item sa isang HTML file.

Susunod, ang Kasama sa seksyon ang impormasyon tulad ng pamagat ng pahina, iba't ibang mga script na tumatakbo sa pahina, at mga katulad. Tulad ng iminumungkahi ng pangalan, karaniwang ito ay darating pagkatapos mismo ng paunang tag Ang end user ay hindi nakakakita ng marami sa nilalaman sa mga tag na ito.

Panghuli, ang Hawak ng tag ang teksto ng pahina na nakikita ng mambabasa (kasama ang higit pa). Makakakita ka rito ng mga larawan, link, at marami pa.

Dahil ang
binubuo ng seksyon ang karamihan ng isang dokumento ng HTML, ang natitirang bahagi ng aming walkthrough ay tumitingin sa mga elemento na nauugnay dito.

Hakbang 3: Pangunahing Mga HTML na Tag para sa Pag-format

Susunod, tingnan natin ang ilang mga karaniwang tag na bumubuo sa mga dokumentong HTML. Siyempre, hindi posible na masakop ang bawat elemento, kaya susuriin namin ang ilan sa pinakamahalaga. Nakatakip kami marami pang halimbawa ng HTML kung ang mga ito ay hindi nasiyahan ka.

Kung ang mga tag na ito ay tila medyo batayan, tandaan na ang HTML ay nilikha hanggang noong 1993. Ang web ay batay sa teksto batay pa sa mga unang yugto nito.

Simpleng Pag-format ng Teksto
Sinusuportahan ng HTML ang mga pangunahing istilo ng teksto tulad ng makikita mo sa Microsoft Word:

tag gumawa ng teksto matapang .

ang mga tag (na nangangahulugang 'diin') ay italiko text

Sinusuportahan din ng HTML ang mas matanda

tag para sa naka-bold at

para sa mga italic. Gayunpaman, mas mabuti na gamitin ang mga nasa itaas.

Sa maikling salita,

at

ipakita kung paano dapat maunawaan ang isang bagay, habang sasabihin lamang sa iyo ng mga huling tag kung paano ito dapat magmukhang. Ang mga dating tag na ito ay mas naa-access para sa mga mambabasa ng screen na ginamit ng may kapansanan sa paningin.

Talata at Ibang Mga Dibisyon
HTML's

hinahayaan ka ng tag na tukuyin ang isang seksyon ng dokumento. Karaniwan, ipinapares ito sa CSS (tingnan sa ibaba) upang mai-format ang isang seksyon sa isang tiyak na paraan.

Ang
Hinahayaan ka ng tag na hatiin ang teksto sa mga talata. Awtomatikong maglalagay ang mga browser ng ilang puwang bago at pagkatapos ng mga ito, pinapayagan kang natural na maghiwalay ng teksto.

Maaari kang magdagdag ng mga header sa iyong dokumento at gawing mas madaling sundin ang paggamit ng
sa pamamagitan ng
mga tag Ang H1 ang pinakamahalagang header, habang ang H6 ay hindi gaanong mahalaga. Halos bawat artikulo ng MakeUseOf ay gumagamit ng mga header ng H2 at H3 upang ayusin ang impormasyon.

Pagpindot Pasok upang magdagdag ng mga line break sa iyong dokumento sa HTML ay hindi talaga ipapakita ang mga ito. Sa halip, maaari mong gamitin

upang magdagdag ng linya ng pahinga.

Narito ang isang halimbawa na gumagamit ng lahat ng ito:

Example Heading This is one paragraph. This is a second paragraph split between two lines.
Hakbang 4: Pagpasok ng Mga Larawan

Ang mga imahe ay isang mahalagang bahagi ng karamihan sa mga webpage. Maaari mong idagdag ang mga ito nang madali sa HTML, at magtakda pa ng iba't ibang mga pag-aari para sa kanila.

Nagpasok ka ng isang imahe gamit ang

tag Pinagsasama ito sa
monitor flashing sa at off windows 10
src
Hinahayaan ka ng katangiang tukuyin kung saan mo nais mag-load mula sa imahe.

Isa pang mahalagang katangian ng

ang mga tag ay
alt
. Pinapayagan ka ng Alt text na ilarawan ang imahe para sa mga mambabasa ng screen o kung sakaling hindi maayos na mai-load ang imahe. Maaari mong i-mouse ang isang imahe upang makita ang alt text nito.

Gamitin ang
width
at
height
mga elemento upang tukuyin ang bilang ng mga pixel na lumilitaw ang imahe.

Pagsamahin ang lahat, at ganito ang isang tag ng imahe:

Hakbang 5: Pagdaragdag ng Mga Link

Ang World Wide Web ay hindi magiging isang web nang walang mga link sa ibang mga pahina. Gamit ang

tag, maaari kang mag-link sa iba pang mga pahina sa anumang teksto.

Sa loob ng

tag, ang
href
Sinasabi ng katangian kung saan ka nagli-link. Ang simpleng pag-paste lamang ng URL ay gagana nang maayos. Maaari mong gamitin ang
title
elemento upang magdagdag ng kaunting teksto na lilitaw kapag may nag-hover sa link.

Ang isang pangunahing link ay ganito:

Visit Google
Ang

ang tag ay maraming iba pang posibleng mga elemento, ngunit hindi kami makikisawsaw dito.

Paano Kumokonekta ang HTML Sa CSS at JavaScript

Tiningnan namin ang pangunahing kaalaman ng HTML at kung paano ito nagtatatag ng isang webpage. Ngunit tulad ng naiisip mo, ang HTML lamang ay hindi pinutol ito para sa modernong web. Ang mga simpleng HTML webpage ay karaniwan sa mga 'Web 1.0' na araw, kung saan ang karamihan sa mga website ay hindi hihigit sa static na teksto.

Ngunit ngayon, marami pa tayong iba. Ang CSS (Cascading Style Sheets) ay isang wikang ginamit upang ilarawan kung paano ang hitsura ng teksto na iyong inihanda sa HTML. Tandaan ang

tag tinalakay natin? Sa loob nito (at iba pang mga tag), maaari mong tukuyin ang isang
class
katangian Pagkatapos, sa iyong kasamang CSS na dokumento, maaari kang sumulat ng mga tagubilin para sa kung paano iyan
class
dapat tumingin.

Maaari mong tukuyin ang mga elementong ito ng istilo na naka-linya sa iyong HTML code, ngunit ito ay itinuturing na hindi magandang kasanayan dahil mas mahirap itong panatilihin. Dagdagan ang nalalaman sa ang mga simpleng halimbawang CSS na ito . Suriin din kung paano i-optimize ang iyong mga CSS file .

JavaScript

Nakita namin na tinutukoy ng HTML ang nilalaman at tinutukoy ng CSS ang hitsura. Ang JavaScript, ang pangwakas na miyembro ng trio na mahalaga sa web, ay nagbibigay-daan sa mga web page na tumugon sa mga pagkilos ng mga tao nang hindi naglo-load ng isang bagong pahina sa bawat oras.

Halimbawa, pinapayagan ng JavaScript ang isang website na babalaan ka na ang password na iyong ipinasok ay hindi nakakatugon sa mga kinakailangan nito bago mo subukang isumite ito. Maaaring gumamit ang isang web designer ng JavaScript upang mag-ikot sa mga imahe sa isang slideshow o i-prompt ang gumagamit para sa pag-input.

Ito ay ilan lamang sa mga halimbawa ng elementarya. Ang JavaScript ay isang wika ng scripting na may kakayahang gumawa ng maraming buo, at medyo mas kumplikado kaysa sa HTML at CSS. Tingnan mo ang aming pangkalahatang ideya ng JavaScript para sa higit pa.

Ang pagtingin sa kumpletong saklaw ng disenyo ng web ay lampas sa saklaw ng artikulong ito, ngunit sapat na upang sabihin na nakikipag-ugnay ang HTML sa iba pang mga wika upang likhain ang mga webpage na alam natin ngayon.

Ang Ebolusyon ng HTML

Mahalagang tandaan na ang HTML ay hindi static. Ang HTML ay dumaan sa maraming mga pagbabago, ang pinakabagong pagiging HTML 5. Kapansin-pansin, sinusuportahan ng pamantayang ito ang katutubong pag-embed ng video sa halip na umasa sa pagmamay-ari na mga format tulad ng Adobe Flash.

Ang mga bagong pag-ulit ng HTML ay nagdedeklara din ng ilang mga archaic na tag na hindi na ginagamit sa pana-panahon. Kasama dito ang mga kakila-kilabot na mga tag tulad
at
(na scroll at flash text ayon sa pagkakabanggit) na karaniwang nakikita sa disenyo ng website noong 1990. Kaya tandaan na ang mga pamantayan ay nagbabago sa paglipas ng panahon.

Malayong Daan ang Malalaking Kaalaman ng HTML

Namin ang isang maikling paglilibot kung paano gumagana ang isang dokumento ng HTML. Ngayon alam mo na ang mga batayan ng kung paano nakaayos ang mga webpage. Kahit na hindi ka magpatuloy upang bumuo ng mga webpage, medyo may kamalayan ka tungkol sa web na ginagamit mo araw-araw.
kung paano ayusin ang mga pahina sa salita

Upang matuto nang higit pa, i-upgrade ang iyong mga kasanayan sa pagbuo ng web gamit ang mahahalagang tool at pagkatapos ay mag-check out ang aming gabay sa kung paano idisenyo ang iyong unang website .

Credit sa Larawan: Belyaevskiy / Mga deposito
Magbahagi Magbahagi Mag-tweet Email 5 Mga Tip upang Supercharge ang Iyong Mga VirtualBox Linux Machine
Pagod na sa hindi magandang pagganap na inaalok ng mga virtual machine? Narito kung ano ang dapat mong gawin upang mapalakas ang pagganap ng VirtualBox.
Basahin Susunod Mga Kaugnay na Paksa

Programming

HTML

Pag-unlad sa Web

JavaScript

Mga Tool sa Webmaster

Programming

HTML5

Tungkol sa May-akda Ben Stegner(1735 Mga Artikulo Na-publish)
Si Ben ay isang Deputy Editor at ang Onboarding Manager sa MakeUseOf. Iniwan niya ang kanyang trabaho sa IT upang sumulat ng buong oras sa 2016 at hindi na lumingon. Sinasaklaw niya ang mga tech tutorial, rekomendasyon sa video game, at higit pa bilang isang propesyonal na manunulat nang higit sa pitong taon.
Higit pa Mula kay Ben Stegner
Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe