Verktyg krävs
För att utveckla begreppet anpassning i HTML måste vi nämna några nödvändiga verktyg som krävs för att köra HTML -koden. En är en textredigerare, och den andra är en webbläsare. En textredigerare kanske en anteckningsblock, sublim, anteckningsblock ++ eller något annat som kan hjälpa. I den här guiden har vi använt anteckningsblock, en standardapplikation i Windows och Google Chrome som webbläsare.
HTML -format
För att förstå anpassningen måste vi först ha lite kunskap om HTML-grunderna. Vi har presenterat skärmdumpen av en provkod.
< html >
< huvud >...</ huvud >
< kropp >….</ kropp >
</ html >
HTML har två huvuddelar. En är huvudet, och den andra är kroppen. Alla taggar är skrivna inom vinkelparenteser. Huvuddelen handlar om namngivning av html -sidan med taggen titel. Och använd också stiluttyget inuti huvudet. Å andra sidan behandlar kroppen alla andra taggar med text, bilder eller videor etc. med andra ord, vad du än vill lägga till på din html -sida är skrivet i html -kroppsdelen.
En sak jag behöver lyfta fram här är att taggen öppnar och stänger. Varje tagg som skrivs måste stängas. Html har till exempel starttaggen för och sluttaggen är. Så det observeras att sluttaggen har ett snedstreck följt av etikettnamnet. På samma sätt följer alla andra taggar samma metod. Varje textredigerare sparas sedan med tillägget html. Till exempel har vi använt en fil med namnet example.html. Då ser du att anteckningsblockikonen har ändrats till webbläsarikonen.
Som anpassning är innehållet i styling. Style i html är av tre typer. En in-line stil, intern och extern styling. Inline innebär i taggen. Insidan är skriven inuti huvudet. Samtidigt skrivs den externa stilen i en separat CSS -fil.
Inline styling av text
Exempel 1
Nu är det dags att diskutera ett exempel här. Tänk på bilden som visas ovan. I den anteckningsfilen har vi skrivit en enkel text. När vi kör det som en webbläsare kommer det att visa utmatningen som anges nedan i webbläsaren.
Om vi vill att den här texten ska visas i mitten ändrar vi taggen.
Denna tagg är en infogad tagg. Vi kommer att skriva den här taggen när vi kommer att introducera stycke -taggen i html -kroppen. Efter texten stänger du stycke -taggen. Spara och öppna sedan filen i webbläsaren.
Paragrafen är inriktad i mitten, eftersom den visas i webbläsaren. Taggen som används i detta exempel används för valfri inriktning, dvs för vänster, höger och mitt. Men om du bara vill justera texten i mitten används en specifik tagg för detta ändamål.
< Centrum > …… ..</ Centrum >Mitttaggen används före och efter texten. Detta visar också samma resultat som föregående exempel.
Exempel 2
Detta är ett exempel på att rikta in rubriken istället för ett stycke i HTML -texten. Syntaxen för denna inriktning av rubriken är densamma. Detta kan göras genom både taggen eller genom inline -styling eller genom att lägga till align -taggen inuti rubriktaggen.
Utdata visas i webbläsaren. Rubriktaggen har konverterat den vanliga texten till en rubrik och taggen har justerat den i mitten.
Exempel 3
Rikta in texten i mitten
Tänk på ett exempel där ett stycke visas i webbläsaren. Vi måste justera detta i mitten.
Vi öppnar den här filen i anteckningsblocket och justerar den sedan i mittläget med hjälp av taggen.
< sid stil =text-justera: center;>När du har lagt till denna tagg i stycke -taggen, vänligen spara filen och kör den i webbläsaren. Du kommer att se att stycket nu är centrerat i linje. Se bilden nedan.
Rikta in texten till höger
Att luta texten åt höger liknar att placera den i mitten av sidan. Bara mittordet ersätts med rätt i stycke -taggen.
< sid stil =text-justera: rätt;> ……… ..</ sid >Ändringarna kan ses genom bilden som bifogas nedan.
Spara och uppdatera webbsidan i webbläsaren. Texten flyttas nu till höger på sidan.
Intern styling av text
Exempel 1
Som beskrivits ovan är intern css (cascading style sheet) eller intern styling en typ av css som definieras i huvuddelen av html på sidan. Det fungerar på samma sätt som interna taggar gör.
Tänk på sidan som visas ovan; den innehåller rubrikerna och stycket i den. Vi har ett krav för att se texten i mitten. Linjejustering kräver manuell skrivning av taggar inuti varje stycke. Men intern styling kan tillämpas automatiskt på varje stycke i texten genom att nämna p i stiluttyget. Det är då inte nödvändigt att skriva någon tagg inuti stycke -taggen. Observera nu koden, och den fungerar.
< stil >P{Text-justera: Centrum}
</ stil >
Denna tagg är skriven inom stiltaggen i huvuddelen. Kör nu koden i webbläsaren.
När du kör sidan i webbläsaren ser du att alla stycken är inriktade i mitten av sidan. Denna tagg tillämpas på varje stycke som finns i texten.
Exempel 2
I det här exemplet, precis som ett stycke, kommer vi att justera alla rubriker i texten till höger sida. För detta ändamål kommer vi att nämna rubriker i stilmeddelandet inuti huvudet.
H2, h3{
Text-justera: höger
}
Nu när du har sparat filen, kör anteckningsfilen i webbläsaren. Du kommer att se att rubrikerna är inriktade på höger sida av HTML -sidan.
Exempel 3
I intern styling kan det finnas en situation där du behöver justera texten i endast vissa stycken i texten medan andra förblir desamma. Därför använder vi begreppet klass. Vi introducerar klassen med en punktmetod inuti stiltaggen. Det är nödvändigt att lägga till namnet på klassen i den stycke -tagg som du vill justera.
< stil >.Centrum{
Text-justera: Centrum}
</ stil >
klass =centrum> ……</ sid >
Vi har lagt till klassen i de tre första styckena. Kör nu koden. Du kan se i utdata att de tre första styckena är inriktade i mitten, medan andra inte är det.
Slutsats
Denna artikel förklarade att anpassning kan göras på olika sätt genom inline och interna taggar.