Vajalikud tööriistad
HTML -i joondamise mõiste väljatöötamiseks peame mainima mõningaid vajalikke tööriistu, mis on vajalikud HTML -koodi käitamiseks. Üks on tekstiredaktor ja teine brauser. Tekstiredaktor võib olla märkmik, ülev, märkmik ++ või mõni muu, mis võib aidata. Selles juhendis oleme kasutanud märkmikku, Windowsi vaikerakendust ja Google Chrome'i brauserina.
HTML -vormingus
Joondamise mõistmiseks peame esmalt omama HTML-i põhitõdesid. Oleme esitanud näidiskoodi ekraanipildi.
< html >
< pea >...</ pea >
< keha >….</ keha >
</ html >
HTML koosneb kahest põhiosast. Üks on pea ja teine on keha. Kõik sildid on kirjutatud nurksulgudes. Peaosa käsitleb html -lehe nimetamist pealkirja märgendi abil. Ja kasutage ka stiili avaldust peas. Teisest küljest tegeleb keha kõigi teiste teksti, piltide või videote jms siltidega, teisisõnu, kõik, mida soovite oma html -lehele lisada, kirjutatakse html -i kehaosasse.
Üks asi, mida pean siin esile tooma, on sildi avamine ja sulgemine. Iga kirjutatud silt peab olema suletud. Näiteks HTML -il on algusmärgis ja lõpumärgend on. Seega täheldatakse, et lõpusildil on kaldkriips, millele järgneb sildi nimi. Sarnaselt järgivad sama lähenemist ka kõik teised sildid. Seejärel salvestatakse iga tekstiredaktor koos html -laiendiga. Näiteks oleme kasutanud faili nimega example.html. Siis näete, et märkmikuikoon on muutunud brauseri ikooniks.
Kuna joondamine on stiili sisu. Html -stiili on kolme tüüpi. Sidus stiil, sisemine ja väline stiil. Tekstisisene tähendab märgendit. Sisemine on kirjutatud pea sisse. Samal ajal kirjutatakse väline stiil eraldi CSS -faili.
Tekstisisene stiil
Näide 1
Nüüd on aeg siin mõnda näidet arutada. Mõelge ülaltoodud pildile. Sellesse märkmiku faili oleme kirjutanud lihtsa teksti. Kui käivitame selle brauserina, näitab see brauseris allpool toodud väljundit.
Kui tahame, et seda teksti kuvataks keskel, muudame silti.
See silt on inline -silt. Kirjutame selle sildi, kui tutvustame lõigu märgendit html -i kehasse. Pärast teksti sulgege lõigu silt. Salvestage ja seejärel avage fail brauseris.
Lõik on joondatud keskele, nagu see kuvatakse brauseris. Selles näites kasutatud silti kasutatakse mis tahes joondamiseks, st vasakule, paremale ja keskele. Kuid kui soovite teksti joondada ainult keskel, kasutatakse selleks kindlat märgendit.
< Keskus > …… ..</ Keskus >Kesksilti kasutatakse enne ja pärast teksti. See näitab ka sama tulemust nagu eelmine näide.
Näide 2
See on näide pealkirja joondamisest html -teksti lõigu asemel. Selle pealkirja joondamise süntaks on sama. Seda saab teha nii märgendi kaudu kui ka sisemise stiiliga või lisades joondamismärgendi pealkirja sildi sisse.
Väljund kuvatakse brauseris. Pealkirja silt on teisendanud lihtteksti pealkirjaks ja märgend on selle keskele joondanud.
Näide 3
Joondage tekst keskele
Mõelge näiteks, kus brauseris kuvatakse lõik. Peame selle keskele joondama.
Avame selle faili märkmikus ja joondame selle sildi abil keskasendisse.
< lk stiil =tekst-joondama: keskel;>Pärast selle märgendi lisamist lõigumärgendisse salvestage fail ja käivitage see brauseris. Näete, et lõik on nüüd joondatud keskele. Vaadake allolevat pilti.
Joondage tekst paremale
Teksti paremale kallutamine sarnaneb selle asetamisega lehe keskele. Lihtsalt kesksõna asendatakse lõigumärgendis paremaga.
< lk stiil =tekst-joondama: õige;> ...........</ lk >Muudatusi saab näha alloleva pildi kaudu.
Salvestage ja värskendage veebileht brauseris. Nüüd on tekst teisaldatud lehe paremasse serva.
Teksti sisemine stiil
Näide1
Nagu eespool kirjeldatud, on sisemine css (kaskaadlaadileht) või sisemine stiil CSS -i tüüp, mis on määratletud lehe html -i peaosas. See toimib sarnaselt sisemiste siltidega.
Mõelge ülaltoodud lehele; see sisaldab pealkirju ja lõiku. Meil on nõue näha teksti keskel. Tekstisisene joondamine nõuab siltide käsitsi kirjutamist igas lõigus. Kuid sisemist stiili saab automaatselt rakendada iga teksti lõigu jaoks, mainides stiili avalduses p. Seejärel ei ole vaja lõigumärgendi sisse kirjutada ühtegi silti. Nüüd jälgige koodi ja see töötab.
< stiil >P{Tekst-joondama: Keskus}
</ stiil >
See silt on kirjutatud peaosa stiilimärgi sisse. Nüüd käivitage kood brauseris.
Kui käivitate lehe brauseris, näete, et kõik lõigud on joondatud lehe keskele. Seda märgendit lisatakse igale tekstilõigule.
Näide 2
Selles näites, nagu lõik, joondame kõik teksti pealkirjad paremale küljele. Sel eesmärgil mainime pealkirju stiili avalduses pea sees.
H2, h3{
Tekst-joondama: õige
}
Pärast faili salvestamist käivitage brauseris märkmiku fail. Näete, et pealkirjad on joondatud HTML -lehe paremas servas.
Näide 3
Sisemises stiilis võib tekkida olukord, kus peate joondama ainult mõne teksti lõigu teksti, samas kui teised jäävad samaks. Seetõttu kasutame klassi mõistet. Tutvustame klassi stiilimärgi sees täpse meetodiga. Lõigumärgendisse, mille soovite joondada, on vaja lisada klassi nimi.
< stiil >.Keskus{
Tekst-joondama: Keskus}
</ stiil >
klassi =keskus> ……</ lk >
Oleme lisanud klassi esimesse kolme lõiku. Nüüd käivitage kood. Väljundist näete, et kolm esimest lõiku on joondatud keskele, teised aga mitte.
Järeldus
Selles artiklis selgitati, et joondamist saab teha sisemiste ja sisemärgendite abil erineval viisil.