Tarvittavat työkalut
Jotta voimme kehittää HTML -kohdistuksen käsitettä, meidän on mainittava joitain HTML -koodin suorittamiseen tarvittavia työkaluja. Toinen on tekstieditori ja toinen selain. Tekstieditori voi olla muistilehtiö, ylevä, muistilehtiö ++ tai mikä tahansa muu, joka voi auttaa. Tässä oppaassa olemme käyttäneet muistilehtiöä, Windowsin oletussovellusta ja Google Chromea selaimena.
HTML -muodossa
Ymmärtääksemme yhdenmukaistamisen meidän on ensin saatava jonkin verran tietoa HTML-perusteista. Olemme esittäneet kuvakaappauksen esimerkkikoodista.
< html >
< pää >...</ pää >
< vartalo >….</ vartalo >
</ html >
HTML: ssä on kaksi pääosaa. Toinen on pää ja toinen ruumis. Kaikki tunnisteet on kirjoitettu kulmasulkeisiin. Pääosassa käsitellään html -sivun nimeämistä otsikkotunnisteen avulla. Käytä myös pään sisällä olevaa tyylilausumaa. Toisaalta runko käsittelee kaikkia muita tekstin, kuvien tai videoiden jne. Tunnisteita, toisin sanoen, mitä haluat lisätä html -sivullesi, kirjoitetaan html: n runko -osaan.
Yksi asia, joka minun on korostettava tässä, on tagin avaaminen ja sulkeminen. Jokainen kirjoitettu tunniste on suljettava. Esimerkiksi Html: ssä on aloitustagi ja päätelause on. Joten on havaittu, että päättyvässä tunnisteessa on vinoviiva, jota seuraa tagin nimi. Samoin kaikki muut tunnisteet noudattavat samaa lähestymistapaa. Jokainen tekstieditori tallennetaan sitten html -laajennuksella. Olemme esimerkiksi käyttäneet tiedostoa nimeltä example.html. Sitten näet, että muistikirjan kuvake on muuttunut selainkuvakkeeksi.
Koska kohdistaminen on tyylin sisältö. Html -tyyli on kolme tyyppiä. In-line-tyyli, sisäinen ja ulkoinen muotoilu. Inline tarkoittaa tagissa. Sisäinen on kirjoitettu pään sisään. Samaan aikaan ulkoinen tyyli kirjoitetaan erilliseen CSS -tiedostoon.
Tekstin upotusmuotoilu
Esimerkki 1
Nyt on aika keskustella esimerkistä täällä. Harkitse yllä olevaa kuvaa. Muistio -tiedostoon olemme kirjoittaneet yksinkertaisen tekstin. Kun suoritamme sitä selaimena, se näyttää alla olevan tuloksen selaimessa.
Jos haluamme, että tämä teksti näytetään keskellä, muutamme tunnistetta.
Tämä tagi on sisäinen tunniste. Kirjoitamme tämän tagin, kun tuomme kappaletunnisteen html -runkoon. Sulje kappaletunniste tekstin jälkeen. Tallenna ja avaa tiedosto selaimessa.
Kappale on kohdistettu keskelle, koska se näkyy selaimessa. Tässä esimerkissä käytettyä tunnistetta käytetään mihin tahansa kohdistukseen, ts. Vasemmalle, oikealle ja keskelle. Mutta jos haluat kohdistaa tekstin vain keskelle, tähän tarkoitukseen käytetään tiettyä tunnistetta.
< keskusta > …… ..</ keskusta >Keskitunnistetta käytetään ennen ja jälkeen tekstin. Tämä näyttää myös saman tuloksen kuin edellinen esimerkki.
Esimerkki 2
Tämä on esimerkki otsikon kohdistamisesta html -tekstin kappaleen sijasta. Tämän otsikon kohdistuksen syntaksi on sama. Tämä voidaan tehdä sekä tunnisteella että upotetulla tyylillä tai lisäämällä kohdistustunniste otsikkotunnisteen sisälle.
Tulos näkyy selaimessa. Otsikkotunniste on muuttanut tekstin otsikoksi, ja tunniste on kohdistanut sen keskelle.
Esimerkki 3
Tasaa teksti keskelle
Harkitse esimerkkiä, jossa selaimessa on kappale. Meidän on kohdistettava tämä keskelle.
Avaamme tämän tiedoston muistilehtiöön ja kohdistamme sen sitten keskiasentoon käyttämällä tunnistetta.
< s tyyli =teksti-kohdistaa: keskellä;>Kun olet lisännyt tämän tunnisteen kappaletunnisteeseen, tallenna tiedosto ja suorita se selaimessa. Näet, että kappale on nyt kohdistettu keskelle. Katso alla oleva kuva.
Tasaa teksti oikealle
Tekstin kallistaminen oikealle on samanlainen kuin sen sijoittaminen sivun keskelle. Vain keskisana korvataan oikealla kappaleetunnisteessa.
< s tyyli =teksti-kohdistaa: oikein;> ...........</ s >Muutokset näkyvät alla olevan kuvan kautta.
Tallenna ja päivitä verkkosivu selaimessa. Teksti on nyt siirretty sivun oikealle puolelle.
Tekstin sisäinen muotoilu
Esimerkki 1
Kuten edellä on kuvattu, sisäinen css (CSS -tyylitaulukko) tai sisäinen muotoilu on CSS -tyyppi, joka on määritetty sivun html -pääosassa. Se toimii samalla tavalla kuin sisäiset tunnisteet.
Harkitse yllä olevaa sivua; se sisältää otsikot ja kappaleet. Meillä on vaatimus nähdä teksti keskellä. Sisäinen linjaus edellyttää tunnisteiden kirjoittamista manuaalisesti jokaiseen kappaleeseen. Sisäistä muotoilua voidaan kuitenkin soveltaa automaattisesti jokaiseen tekstin kohtaan mainitsemalla tyylilausekkeessa p. Tällöin kappaletunnisteen sisälle ei tarvitse kirjoittaa mitään tagia. Tarkkaile nyt koodia ja se toimii.
< tyyli >P{Teksti-kohdistaa: keskusta}
</ tyyli >
Tämä tagi on kirjoitettu pääosan tyylitagiin. Suorita nyt koodi selaimessa.
Kun suoritat sivun selaimessa, näet, että kaikki kappaleet on kohdistettu sivun keskelle. Tätä tunnistetta käytetään kaikissa tekstin kappaleissa.
Esimerkki 2
Tässä esimerkissä, kuten kappaleessa, kohdistamme kaikki tekstin otsikot oikealle puolelle. Tätä tarkoitusta varten mainitsemme otsikot tyylilauseessa pään sisällä.
H2, h3{
Teksti-kohdistaa: oikein
}
Kun olet tallentanut tiedoston, suorita muistilehtiö tiedosto selaimessa. Näet, että otsikot on kohdistettu HTML -sivun oikealle puolelle.
Esimerkki 3
Sisäisessä tyylissä voi olla tilanne, jossa sinun on tasattava vain joidenkin tekstin kappaleiden teksti, kun taas toiset pysyvät samana. Käytämme siis luokan käsitettä. Esittelemme luokan piste -menetelmällä tyylitagin sisällä. On tarpeen lisätä luokan nimi kappaletunnisteeseen, jonka haluat tasata.
< tyyli >.keskusta{
Teksti-kohdistaa: keskusta}
</ tyyli >
luokka =keskusta> ……</ s >
Olemme lisänneet luokan kolmeen ensimmäiseen kappaleeseen. Suorita nyt koodi. Tuloksesta näkyy, että kolme ensimmäistä kappaletta on kohdistettu keskelle, kun taas toiset eivät.
Johtopäätös
Tässä artikkelissa selitettiin, että kohdistaminen voidaan tehdä eri tavoin sisäisten ja sisäisten tunnisteiden avulla.