Потребни алати
Да бисмо разрадили концепт поравнања у ХТМЛ -у, морамо споменути неке потребне алате потребне за покретање ХТМЛ кода. Један је уређивач текста, а други прегледач. Уређивач текста може бити бележница, узвишена, бележница ++ или било која друга која би вам могла помоћи. У овом водичу смо користили нотепад, подразумевану апликацију у Виндовсима и Гоогле Цхроме као прегледач.
ХТМЛ формат
Да бисмо разумели поравнање, прво морамо имати знање о основама ХТМЛ-а. Представили смо снимак екрана узорка кода.
< хтмл >
< глава >...</ глава >
< тело >….</ тело >
</ хтмл >
ХТМЛ има два главна дела. Једно је глава, а друго тело. Све ознаке су написане у угластим заградама. Главни део се бави именовањем хтмл странице помоћу ознаке наслова. И такође, користите изјаву о стилу унутар главе. С друге стране, тело се бави свим осталим ознакама текста, слика или видео записа итд. Другим речима, све што желите да додате на своју хтмл страницу написано је у делу тела хтмл -а.
Једна ствар коју овде морам да истакнем је отварање и затварање ознака. Свака написана ознака мора бити затворена. На пример, ХТМЛ има почетну ознаку, а крајња ознаку је. Тако се примећује да завршна ознака има косу црту иза које следи назив ознаке. Слично, све остале ознаке такође следе исти приступ. Сваки уређивач текста се затим чува са екстензијом хтмл. На пример, користили смо датотеку са именом екампле.хтмл. Тада ћете видети да се икона бележнице променила у икону прегледача.
Пошто је поравнање садржај стила. Стил у хтмл -у има три типа. У линијском стилу, унутрашњи и спољашњи стил. Инлине подразумева у ознаци. Унутрашње је написано унутар главе. Истовремено, спољни стил је написан у посебној ЦСС датотеци.
Уграђени стил текста
Пример 1
Сада је време да овде размотримо пример. Размотрите горњу слику. У тој датотеци бележнице написали смо једноставан текст. Када га покренемо као прегледач, он ће приказати доле дати резултат у прегледачу.
Ако желимо да се овај текст приказује у центру, променићемо ознаку.
Ова ознака је инлине ознака. Ову ознаку ћемо написати када унесемо ознаку пасуса у хтмл тело. Након текста затворите ознаку пасуса. Сачувајте, а затим отворите датотеку у прегледачу.
Одломак је поравнат у центру, онако како је приказан у прегледачу. Ознака која се користи у овом примеру користи се за било које поравнање, тј. За лево, десно и центар. Али ако желите да поравнате текст само у центру, онда се у ту сврху користи одређена ознака.
< центар > …… ..</ центар >Средишња ознака се користи пре и после текста. Ово ће такође показати исти резултат као и претходни пример.
Пример 2
Ово је пример поравнавања наслова уместо пасуса у ХТМЛ тексту. Синтакса за ово поравнање наслова је иста. То се може урадити и помоћу ознаке или путем уграђеног стила или додавањем ознаке за поравнање унутар ознаке заглавља.
Резултат се приказује у прегледачу. Ознака заглавља је претворила обичан текст у наслов, а ознака га је поравнала у средини.
Пример 3
Поравнајте текст у средини
Размотримо пример у коме се у прегледачу приказује пасус. Морамо ово поравнати у центру.
Отворит ћемо ову датотеку у биљежници, а затим је поравнати у средишњем положају помоћу ознаке.
< п стил =текст-поравнајте: центар;>Након додавања ове ознаке у ознаку пасуса, сачувајте датотеку и покрените је у прегледачу. Видећете да је одломак сада центриран. Погледајте слику испод.
Поравнајте текст удесно
Нагињање текста удесно слично је постављању у средиште странице. Само средишња реч је замењена правом у ознаци пасуса.
< п стил =текст-поравнајте: десно;> ……… ..</ п >Промене се могу видети кроз доњу слику.
Сачувајте и освежите веб страницу у прегледачу. Текст је сада премештен на десну страну странице.
Унутрашњи стил текста
Пример 1
Као што је горе описано, унутрашњи цсс (каскадни стилски лист) или унутрашњи стил је тип цсс -а који је дефинисан у заглављу хтмл странице. Ради слично као и интерне ознаке.
Размотрите горе приказану страницу; садржи наслове и параграф у њему. Имамо захтев да видимо текст у центру. Инлине поравнање захтева ручно писање ознака унутар сваког пасуса. Али унутрашњи стил се може аутоматски применити на сваки одломак текста помињањем п у изјави о стилу. Тада нема потребе да уписујете било коју ознаку унутар ознаке пасуса. Сада посматрајте код и он ради.
< стил >П{Текст-поравнајте: центар}
</ стил >
Ова ознака је написана унутар ознаке стила у делу главе. Сада покрените код у прегледачу.
Када покренете страницу у прегледачу, видећете да су сви пасуси поравнати у центру странице. Ова ознака се примењује на сваки пасус присутан у тексту.
Пример 2
У овом примеру, баш као и пасус, поравнаћемо све наслове у тексту са десне стране. У ту сврху поменућемо наслове у изјави о стилу унутар главе.
Х2, х3{
Текст-поравнајте: јел тако
}
Сада након чувања датотеке, покрените датотеку бележнице у прегледачу. Видећете да су наслови поравнати са десне стране ХТМЛ странице.
Пример 3
У унутрашњем обликовању може доћи до ситуације да морате поравнати текст само неких одломака у тексту, док други остају исти. Дакле, користимо концепт класе. Представљамо класу методом тачке унутар ознаке стила. Потребно је додати назив класе унутар ознаке пасуса коју желите да поравнате.
< стил >.центар{
Текст-поравнајте: центар}
</ стил >
класа =центар> ……</ п >
Додали смо разред у прва три пасуса. Сада покрените код. У излазу можете видети да су прва три параграфа поравната у центру, док други нису.
Закључак
У овом чланку је објашњено да се поравнање може извршити на различите начине путем уграђених и унутрашњих ознака.