Kailangan ng mga tool
Upang dagdagan ng paliwanag ang konsepto ng pagkakahanay sa HTML, kailangan naming banggitin ang ilang mga kinakailangang tool na kinakailangan upang patakbuhin ang HTML code. Ang isa ay isang text editor, at ang pangalawa ay isang browser. Ang isang text editor marahil isang notepad, sublime, notepad ++, o anumang iba pang maaaring makatulong. Sa gabay na ito, gumamit kami ng notepad, isang default na application sa windows, at Google Chrome bilang isang browser.
Format ng HTML
Upang maunawaan ang pagkakahanay, kailangan muna naming magkaroon ng ilang kaalaman tungkol sa mga pangunahing kaalaman sa HTML. Ipinakita namin ang screenshot ng isang sample code.
< html >
< ulo >...</ ulo >
< katawan >....</ katawan >
</ html >
Ang HTML ay may dalawang pangunahing bahagi. Ang isa ay ang ulo, at ang isa pa ay ang katawan. Ang lahat ng mga tag ay nakasulat sa mga anggulong bracket. Ang bahagi ng ulo ay nakikipag-usap sa pagbibigay ng pangalan sa pahina ng html sa pamamagitan ng paggamit ng tag ng pamagat. At gayundin, gamitin ang pahayag ng estilo sa loob ng ulo. Sa kabilang banda, nakikipag-usap ang katawan sa lahat ng iba pang mga tag ng teksto, larawan o video, atbp. Sa madaling salita, ang anumang nais mong idagdag sa iyong pahina ng html ay nakasulat sa bahagi ng katawan ng html.
Ang isang bagay na kailangan kong i-highlight dito ay ang pagbubukas at pagsasara ng tag. Ang bawat tag na nakasulat ay dapat na sarado. Halimbawa, ang html ay may panimulang tag at ang nagtatapos na tag ay. Kaya't sinusunod na ang nagtatapos na tag ay may isang slash na sinusundan ng pangalan ng tag. Katulad nito, lahat ng iba pang mga tag ay sumusunod din sa parehong diskarte. Ang bawat editor ng teksto pagkatapos ay nai-save na may extension ng html. Halimbawa, gumamit kami ng isang file na may halimbawa ng pangalan.html. Pagkatapos ay makikita mo na ang icon ng notepad ay nagbago sa icon ng browser.
Tulad ng pagkakahanay ay nilalaman ng estilo. Ang istilo sa html ay may tatlong uri. Isang istilong in-line, panloob at panlabas na estilo. Inline ay nagpapahiwatig sa tag. Ang panloob ay nakasulat sa loob ng ulo. Sa parehong oras, ang panlabas na istilo ay nakasulat sa isang hiwalay na CSS file.
Inline na istilo ng teksto
Halimbawa 1
Ngayon ay oras na upang talakayin ang isang halimbawa dito. Isaalang-alang ang imaheng ipinakita sa itaas. Sa file ng notepad na iyon, nagsulat kami ng isang simpleng teksto. Kapag pinatakbo namin ito bilang isang browser, ipapakita nito ang output na ibinigay sa ibaba sa browser.
Kung nais naming maipakita ang text na ito sa gitna, babaguhin namin ang tag.
Ang tag na ito ay isang inline na tag. Isusulat namin ang tag na ito kapag ipakilala namin ang tag ng talata sa html na katawan. Matapos ang teksto, pagkatapos isara ang tag ng talata. I-save at pagkatapos buksan ang file sa browser.
Ang talata ay nakahanay sa gitna, tulad ng ipinakita sa browser. Ang ginamit na tag sa halimbawang ito ay ginagamit para sa anumang pagkakahanay, ibig sabihin, para sa kaliwa, kanan, at gitna. Ngunit kung nais mong ihanay ang teksto sa gitna lamang, ginagamit ang isang tukoy na tag para sa hangaring ito.
< gitna > …… ..</ gitna >Ginamit ang tag ng gitna bago at pagkatapos ng teksto. Ipapakita rin nito ang parehong resulta tulad ng nakaraang halimbawa.
Halimbawa 2
Ito ay isang halimbawa ng pagkakahanay ng heading sa halip na isang talata sa teksto ng html. Ang syntax para sa pagkakahanay ng heading na ito ay pareho. Maaari itong magawa sa parehong tag o sa pamamagitan ng inline na istilo o pagdaragdag ng align ng tag sa loob ng heading ng heading.
Ang output ay ipinapakita sa browser. Ang heading ng heading ay na-convert ang simpleng teksto sa isang heading, at nakahanay ito ng tag sa gitna.
Halimbawa 3
Ihanay ang teksto sa gitna
Isaalang-alang ang isang halimbawa kung saan mayroong isang talata na ipinakita sa browser. Kailangan nating ihanay ito sa gitna.
Bubuksan namin ang file na ito sa notepad at pagkatapos ay ihanay ito sa gitnang posisyon sa pamamagitan ng paggamit ng tag.
< p style =text-ihanay: gitna;>Matapos idagdag ang tag na ito sa tag ng talata, mangyaring i-save ang file at patakbuhin ito sa browser. Makikita mo na ang talata ay nakasentro na ngayon na nakahanay. Tingnan ang imahe sa ibaba.
Ihanay ang teksto sa kanan
Upang maisandal ang teksto sa kanan ay katulad ng pagposisyon nito sa gitna ng pahina. Ang gitnang salita lamang ay pinalitan ng tama sa tag ng talata.
< p style =text-ihanay: kanan;> ……… ..</ p >Ang mga pagbabago ay makikita sa pamamagitan ng larawang nadugtong sa ibaba.
I-save at i-refresh ang web page sa browser. Ang teksto ay inililipat ngayon sa kanang bahagi ng pahina.
Panloob na estilo ng teksto
Halimbawa1
Tulad ng inilarawan sa itaas na ang panloob na css (cascading style sheet) o panloob na estilo ay isang uri ng css na tinukoy sa punong bahagi ng html ng pahina. Gumagana ito katulad sa ginagawa ng panloob na mga tag.
Isaalang-alang ang pahina na ipinakita sa itaas; naglalaman ito ng mga heading at talata dito. Mayroon kaming isang kinakailangan upang makita ang teksto sa gitna. Ang pagkakahanay sa linya ay nangangailangan ng manu-manong pagsulat ng mga tag sa loob ng bawat talata. Ngunit ang panloob na estilo ay maaaring awtomatikong mailapat sa bawat talata ng teksto sa pamamagitan ng pagbanggit ng p sa pahayag ng estilo. Hindi na kailangang magsulat ng anumang tag sa loob ng tag ng talata. Sundin ngayon ang code, at gumagana ito.
< style >P{Text-ihanay: gitna}
</ style >
Ang tag na ito ay nakasulat sa loob ng istilo ng tag sa bahagi ng ulo. Patakbuhin ngayon ang code sa browser.
Kapag naipatupad mo ang pahina sa browser, makikita mo na ang lahat ng mga talata ay nakahanay sa gitna ng pahina. Ang tag na ito ay inilalapat sa bawat talata na naroroon sa teksto.
Halimbawa 2
Sa halimbawang ito, tulad ng isang talata, isasaayos namin ang lahat ng mga heading sa teksto sa kanang bahagi. Para sa hangaring ito, babanggitin namin ang mga heading sa istilong pahayag sa loob ng ulo.
H2, h3{
Text-ihanay: tama
}
Ngayon pagkatapos i-save ang file, patakbuhin ang file ng notepad sa browser. Makikita mo na ang mga heading ay nakahanay sa kanang bahagi ng pahina ng HTML.
Halimbawa 3
Sa panloob na estilo, maaaring may isang sitwasyon kung saan kailangan mong ihanay ang teksto ng ilang mga talata lamang sa teksto habang ang iba ay mananatiling pareho. Samakatuwid, ginagamit namin ang konsepto ng klase. Ipinakikilala namin ang klase sa isang paraan ng tuldok sa loob ng style tag. Kinakailangan na idagdag ang pangalan ng klase sa loob ng talata na tag na nais mong ihanay.
< style >.gitna{
Text-ihanay: gitna}
</ style >
klase =center> ……</ p >
Idinagdag namin ang klase sa unang tatlong talata. Patakbuhin ngayon ang code. Maaari mong makita sa output na ang unang tatlong talata ay nakahanay sa gitna, habang ang iba ay hindi.
Konklusyon
Ipinaliwanag ng artikulong ito na ang pagkakahanay ay maaaring gawin sa iba't ibang paraan sa pamamagitan ng mga inline at panloob na tag.