Benodigde gereedschappen
Om het concept van uitlijning in HTML nader uit te werken, moeten we enkele noodzakelijke hulpmiddelen noemen die nodig zijn om de HTML-code uit te voeren. De ene is een teksteditor en de tweede is een browser. Een teksteditor misschien een kladblok, subliem, kladblok ++ of iets anders dat zou kunnen helpen. In deze handleiding hebben we Kladblok, een standaardtoepassing in Windows, en Google Chrome als browser gebruikt.
HTML-indeling
Om de uitlijning te begrijpen, moeten we eerst enige kennis hebben van de basisprincipes van HTML. We hebben de schermafbeelding van een voorbeeldcode gepresenteerd.
< html >
< hoofd >...</ hoofd >
< lichaam >….</ lichaam >
</ html >
HTML heeft twee hoofdonderdelen. De ene is het hoofd en de andere is het lichaam. Alle tags zijn tussen haakjes geschreven. Het hoofdgedeelte behandelt de naamgeving van de html-pagina met behulp van de tag of title. En gebruik ook de stijlverklaring in het hoofd. Aan de andere kant behandelt de body alle andere tags van tekst, afbeeldingen of video's, enz. Met andere woorden, alles wat u aan uw html-pagina wilt toevoegen, wordt in het body-gedeelte van html geschreven.
Een ding dat ik hier moet benadrukken, is het openen en sluiten van de tag. Elke tag die wordt geschreven, moet worden gesloten. Html heeft bijvoorbeeld een starttag van en de eindtag is . Er wordt dus opgemerkt dat de eindtag een schuine streep heeft gevolgd door de tagnaam. Op dezelfde manier volgen alle andere tags dezelfde aanpak. Elke teksteditor wordt vervolgens opgeslagen met de extensie html. We hebben bijvoorbeeld een bestand gebruikt met de naam voorbeeld.html. Vervolgens ziet u dat het kladblokpictogram is veranderd in het browserpictogram.
Omdat uitlijning inhoud van styling is. Stijl in html is van drie soorten. Een in-line stijl, interne en externe styling. Inline impliceert in de tag. Intern is in het hoofd geschreven. Tegelijkertijd wordt de externe stijl in een apart CSS-bestand geschreven.
Inline opmaak van tekst
voorbeeld 1
Nu is het tijd om hier een voorbeeld te bespreken. Beschouw de afbeelding hierboven weergegeven. In dat bestand van Kladblok hebben we een simpele tekst geschreven. Wanneer we het als browser uitvoeren, wordt de onderstaande uitvoer in de browser weergegeven.
Als we willen dat deze tekst in het midden wordt weergegeven, passen we de tag aan.
Deze tag is een inline-tag. We zullen deze tag schrijven wanneer we de alinea-tag in de html-body zullen introduceren. Sluit na de tekst de alineatag. Sla het bestand op en open het vervolgens in de browser.
De alinea wordt uitgelijnd in het midden, zoals deze wordt weergegeven in de browser. De tag die in dit voorbeeld wordt gebruikt, wordt gebruikt voor elke uitlijning, d.w.z. voor links, rechts en midden. Maar als u de tekst alleen in het midden wilt uitlijnen, wordt hiervoor een specifieke tag gebruikt.
< centrum > …… ..</ centrum >De middelste tag wordt voor en na de tekst gebruikt. Dit geeft ook hetzelfde resultaat als het vorige voorbeeld.
Voorbeeld 2
Dit is een voorbeeld van het uitlijnen van de kop in plaats van een alinea in de html-tekst. De syntaxis voor deze uitlijning van de kop is hetzelfde. Dit kan zowel via de tag als door inline styling of het toevoegen van de align-tag in de heading-tag.
De uitvoer wordt weergegeven in de browser. De koptag heeft de platte tekst omgezet in een kop en de tag heeft deze in het midden uitgelijnd.
Voorbeeld 3
Lijn de tekst in het midden uit
Beschouw een voorbeeld waarin er een alinea wordt weergegeven in de browser. We moeten dit in het midden afstemmen.
We openen dit bestand in het kladblok en lijn het vervolgens uit in de middenpositie met behulp van de tag.
< P stijl =tekst-uitlijnen: midden ;>Nadat u deze tag in de alinea-tag hebt toegevoegd, slaat u het bestand op en voert u het uit in de browser. U zult zien dat de alinea nu gecentreerd is uitgelijnd. Zie de afbeelding hieronder.
Lijn de tekst naar rechts uit
De tekst naar rechts laten leunen is vergelijkbaar met het in het midden van de pagina plaatsen. Alleen het middelste woord wordt vervangen door rechts in de alinea-tag.
< P stijl =tekst-uitlijnen: juist ;>…………..</ P >De wijzigingen zijn te zien via de onderstaande afbeelding.
Bewaar en ververs de webpagina in de browser. De tekst wordt nu naar de rechterkant van de pagina verplaatst.
Interne opmaak van tekst
Voorbeeld 1
Zoals hierboven beschreven, is interne css (cascading stylesheet) of interne styling een type css dat is gedefinieerd in het hoofdgedeelte van html van de pagina. Het werkt op dezelfde manier als interne tags.
Overweeg de hierboven getoonde pagina; het bevat de kopjes en alinea erin. We hebben een vereiste om de tekst in het midden te zien. Inline-uitlijning vereist het handmatig schrijven van tags in elke alinea. Maar interne styling kan automatisch worden toegepast op elke alinea van de tekst door p te vermelden in de stijlverklaring. Het is dan niet nodig om een tag in de alinea-tag te schrijven. Bekijk nu de code en het werkt.
< stijl >P{Tekst-uitlijnen: centrum}
</ stijl >
Deze tag is geschreven in de stijltag in het kopgedeelte. Voer nu de code uit in de browser.
Wanneer u de pagina in de browser uitvoert, ziet u dat alle alinea's in het midden van de pagina zijn uitgelijnd. Deze tag wordt toegepast op elke alinea in de tekst.
Voorbeeld 2
In dit voorbeeld zullen we, net als een alinea, alle koppen in de tekst aan de rechterkant uitlijnen. Voor dit doel zullen we koppen in de stijlverklaring in de kop vermelden.
H2, h3{
Tekst-uitlijnen: Rechtsaf
}
Nadat u het bestand hebt opgeslagen, voert u het kladblokbestand in de browser uit. U zult zien dat de koppen aan de rechterkant van de HTML-pagina zijn uitgelijnd.
Voorbeeld 3
Bij interne opmaak kan er een situatie zijn waarin u de tekst van slechts enkele alinea's in de tekst moet uitlijnen, terwijl andere hetzelfde blijven. Daarom gebruiken we het begrip klasse. We introduceren de klasse met een puntmethode in de stijltag. Het is noodzakelijk om de naam van de klasse toe te voegen aan de alinea-tag die u wilt laten uitlijnen.
< stijl >.centrum{
Tekst-uitlijnen: centrum}
</ stijl >
klas =centrum>……</ P >
We hebben de klasse toegevoegd in de eerste drie alinea's. Voer nu de code uit. U kunt in de uitvoer zien dat de eerste drie alinea's in het midden zijn uitgelijnd, terwijl andere dat niet zijn.
Conclusie
In dit artikel werd uitgelegd dat uitlijning op verschillende manieren kan worden gedaan door middel van inline en interne tags.