Nødvendig verktøy
For å utdype begrepet justering i HTML, må vi nevne noen nødvendige verktøy som kreves for å kjøre HTML -koden. Den ene er en tekstredigerer, og den andre er en nettleser. En tekstredigerer kanskje en notisblokk, sublim, notisblokk ++ eller andre som kan hjelpe. I denne guiden har vi brukt notisblokk, en standardapplikasjon i Windows og Google Chrome som en nettleser.
HTML -format
For å forstå justeringen må vi først ha litt kunnskap om grunnleggende HTML. Vi har presentert skjermdumpen av en prøvekode.
< html >
< hode >...</ hode >
< kropp >….</ kropp >
</ html >
HTML har to hoveddeler. Den ene er hodet, og den andre er kroppen. Alle tagger er skrevet i kantede parenteser. Hoveddelen handler om å navngi html -siden ved å bruke tittelkoden. Og også, bruk stilerklæringen inne i hodet. På den annen side behandler kroppen alle andre tagger med tekst, bilder eller videoer, etc. med andre ord, hva du vil legge til på html -siden din, er skrevet i brøddelen av html.
En ting jeg må markere her er taggen som åpnes og lukkes. Hver kode som skrives må lukkes. For eksempel har Html start -taggen for og slutt -taggen er. Så det er observert at sluttkoden har en skråstrek etterfulgt av tagnavnet. På samme måte følger alle andre koder også den samme tilnærmingen. Hver tekstredigerer lagres deretter med utvidelsen av html. For eksempel har vi brukt en fil med navnet example.html. Da vil du se at notisblokkikonet har endret seg til nettleserikonet.
Som justering er innholdet i styling. Stil i html er av tre typer. En in-line stil, intern og ekstern styling. Inline innebærer i taggen. Internt er skrevet inni hodet. Samtidig skrives den eksterne stilen i en egen CSS -fil.
Inline styling av tekst
Eksempel 1
Nå er det på tide å diskutere et eksempel her. Tenk på bildet som vises ovenfor. I den notisblokkfilen har vi skrevet en enkel tekst. Når vi kjører den som en nettleser, viser den utdataene som er gitt nedenfor i nettleseren.
Hvis vi vil at denne teksten skal vises i midten, vil vi endre taggen.
Denne taggen er en innebygd tag. Vi vil skrive denne taggen når vi skal introdusere avsnittstaggen i html -kroppen. Etter teksten, lukk deretter avsnittstaggen. Lagre og åpne filen i nettleseren.
Avsnittet er justert i midten, slik det vises i nettleseren. Merkelappen som brukes i dette eksemplet, brukes for enhver justering, dvs. for venstre, høyre og senter. Men hvis du bare vil justere teksten i midten, brukes en bestemt tag til dette formålet.
< senter > …… ..</ senter >Midtmerket brukes før og etter teksten. Dette vil også vise det samme resultatet som det forrige eksemplet.
Eksempel 2
Dette er et eksempel på å justere overskriften i stedet for et avsnitt i html -teksten. Syntaksen for denne justeringen av overskriften er den samme. Dette kan gjøres gjennom både taggen eller ved innebygd styling eller ved å legge til taggen inne i overskriftstaggen.
Utdataene vises i nettleseren. Overskriftstaggen har konvertert ren tekst til en overskrift, og taggen har justert den i midten.
Eksempel 3
Juster teksten i midten
Tenk på et eksempel der det vises et avsnitt i nettleseren. Vi må justere dette i midten.
Vi vil åpne denne filen i notisblokken og deretter justere den i midtposisjonen ved å bruke taggen.
< s stil =tekst-tilpasse: senter;>Etter at du har lagt til denne taggen i avsnittstaggen, må du lagre filen og kjøre den i nettleseren. Du vil se at avsnittet nå er sentrert justert. Se bildet nedenfor.
Juster teksten til høyre
Å lene teksten til høyre ligner på å plassere den i midten av siden. Bare senterordet erstattes av rett i avsnittstaggen.
< s stil =tekst-tilpasse: høyre;> ……… ..</ s >Endringene kan sees gjennom bildet som er vedlagt nedenfor.
Lagre og oppdater nettsiden i nettleseren. Teksten flyttes nå til høyre side av siden.
Intern styling av tekst
Eksempel 1
Som beskrevet ovenfor er intern css (cascading style sheet) eller intern styling en type css som er definert i hodedelen av html på siden. Det fungerer på samme måte som interne koder.
Vurder siden vist ovenfor; den inneholder overskriftene og avsnittet i den. Vi har et krav om å se teksten i midten. Inline -justering krever manuell skriving av koder inne i hvert avsnitt. Men intern styling kan brukes automatisk på hvert avsnitt i teksten ved å nevne p i stilerklæringen. Det er da ikke nødvendig å skrive noen tag inne i avsnittstaggen. Følg nå koden, og den fungerer.
< stil >P{Tekst-tilpasse: senter}
</ stil >
Denne koden er skrevet i stilkoden i hodedelen. Kjør nå koden i nettleseren.
Når du kjører siden i nettleseren, vil du se at alle avsnittene er justert i midten av siden. Denne koden brukes på hvert avsnitt som finnes i teksten.
Eksempel 2
I dette eksemplet, akkurat som et avsnitt, vil vi justere alle overskriftene i teksten til høyre side. For dette formålet vil vi nevne overskrifter i stilerklæringen inne i hodet.
H2, h3{
Tekst-tilpasse: Ikke sant
}
Etter å ha lagret filen, kjør notisblokkfilen i nettleseren. Du vil se at overskriftene er justert på høyre side av HTML -siden.
Eksempel 3
I intern styling kan det være en situasjon der du trenger å justere teksten til bare noen avsnitt i teksten mens andre forblir de samme. Derfor bruker vi begrepet klasse. Vi introduserer klassen med en prikkmetode inne i stiletiketten. Det er nødvendig å legge til navnet på klassen inne i avsnittstaggen du vil justere.
< stil >.senter{
Tekst-tilpasse: senter}
</ stil >
klasse =senter> ……</ s >
Vi har lagt til klassen i de tre første avsnittene. Kjør nå koden. Du kan se i utgangen at de tre første avsnittene er justert i midten, mens andre ikke er det.
Konklusjon
Denne artikkelen forklarte at justering kan gjøres på forskjellige måter gjennom innebygde og interne tagger.