Как да подравните текста в HTML

Необходими инструменти

За да разработим по -подробно концепцията за подравняване в HTML, трябва да споменем някои необходими инструменти, необходими за изпълнението на HTML кода. Единият е текстов редактор, а вторият е браузър. Текстов редактор може би бележник, възвишен, бележник ++ или друг, който може да помогне. В това ръководство използвахме бележник, приложение по подразбиране в Windows и Google Chrome като браузър.

HTML формат

За да разберем подравняването, първо трябва да имаме известно ноу-хау по основите на HTML. Представихме екранна снимка на примерен код.

HTML има две основни части. Едната е главата, а другата е тялото. Всички тагове са написани в ъглови скоби. Главната част се занимава с именуване на html страницата чрез използване на етикета на заглавието. И също така използвайте изявлението за стил вътре в главата. От друга страна, тялото се занимава с всички останали тагове текст, изображения или видеоклипове и т.н. с други думи, всичко, което искате да добавите към вашата html страница, е написано в основната част на html.

Едно нещо, което трябва да подчертая тук, е отварянето и затварянето на маркера. Всеки написан маркер трябва да бъде затворен. Например, Html има начален таг, а крайният е. Следователно се забелязва, че крайният маркер има наклонена черта, последвана от името на етикета. По същия начин всички други тагове също следват същия подход. След това всеки текстов редактор се записва с разширението на html. Например, използвахме файл с името example.html. След това ще видите, че иконата на бележника се е променила в иконата на браузъра.

Тъй като подравняването е съдържание на стила. Стилът в html е от три типа. Вграден стил, вътрешен и външен стил. Вграденото предполага в маркера. Вътрешно е написано вътре в главата. В същото време външният стил се записва в отделен CSS файл.

Вграден стил на текст

Пример 1

Сега е време да обсъдим пример тук. Помислете за изображението, показано по -горе. В този файл с бележник написахме прост текст. Когато го стартираме като браузър, той ще показва резултата, даден по -долу в браузъра.

Ако искаме този текст да се показва в центъра, ще променим маркера.

Този маркер е вграден маркер. Ще напишем този маркер, когато въведем етикета на абзаца в html тялото. След текста, след това затворете маркера на абзаца. Запазете и след това отворете файла в браузъра.

Абзацът е подравнен в центъра, тъй като се показва в браузъра. Етикетът, използван в този пример, се използва за всяко подравняване, т.е.за ляво, дясно и в центъра. Но ако искате да подравните текста само в центъра, тогава за тази цел се използва специфичен маркер.

Централният маркер се използва преди и след текста. Това също ще покаже същия резултат като предишния пример.

Пример 2

Това е пример за подравняване на заглавието вместо на абзац в html текста. Синтаксисът за това подравняване на заглавието е същият. Това може да стане както чрез маркера, така и чрез вграден стил или добавяне на етикета за подравняване вътре в заглавния маркер.

Изходът се показва в браузъра. Етикетът за заглавие е преобразувал обикновения текст в заглавие и маркерът го е подравнил в центъра.

Пример 3

Подравнете текста в центъра

Помислете за пример, в който в браузъра е показан параграф. Трябва да подравним това в центъра.

Ще отворим този файл в бележника и след това ще го подравним в централната позиция, като използваме маркера.

След като добавите този маркер в етикета на абзаца, моля, запазете файла и го стартирайте в браузъра. Ще видите, че абзацът сега е центриран. Вижте изображението по -долу.

Подравнете текста вдясно

Навеждането на текста вдясно е подобно на позиционирането му в центъра на страницата. Само централната дума се заменя с дясно в етикета на абзаца.

Промените могат да се видят чрез изображението, приложено по -долу.

Запазете и опреснете уеб страницата в браузъра. Сега текстът се премества в дясната страна на страницата.

Вътрешен стил на текст

Пример 1

Както е описано по -горе, вътрешният css (каскаден стилов лист) или вътрешният стил е вид css, който е дефиниран в заглавната част на html на страницата. Работи подобно на вътрешните тагове.

Помислете за страницата, показана по -горе; той съдържа заглавията и абзаца в него. Имаме изискване да видим текста в центъра. Вграденото подравняване изисква ръчно изписване на тагове във всеки параграф. Но вътрешният стил може автоматично да се приложи към всеки параграф от текста, като се спомене p в изявлението за стил. Тогава няма нужда да пишете никакъв таг в маркера на абзаца. Сега наблюдавайте кода и той работи.

Този етикет е написан в стила на етикета в главата. Сега стартирайте кода в браузъра.

Когато изпълните страницата в браузъра, ще видите, че всички абзаци са подравнени в центъра на страницата. Този етикет се прилага към всеки параграф, присъстващ в текста.

Пример 2

В този пример, точно като абзац, ще подравним всички заглавия в текста от дясната страна. За тази цел ще споменем заглавия в изявлението за стил вътре в главата.

След като запазите файла, стартирайте файла на бележника в браузъра. Ще видите, че заглавията са подравнени от дясната страна на HTML страницата.

Пример 3

При вътрешното оформяне може да възникне ситуация, при която трябва да подравните текста само на някои абзаци в текста, докато други остават същите. Следователно ние използваме концепцията за класа. Въвеждаме класа с метод на точка вътре в етикета на стила. Необходимо е да добавите името на класа в етикета на абзаца, който искате да подравните.

клас =център> ......</ стр >

Добавихме класа в първите три абзаца. Сега стартирайте кода. Можете да видите в изхода, че първите три абзаца са подравнени в центъра, докато други не.

Заключение

Тази статия обяснява, че подравняването може да се извърши по различни начини чрез вградени и вътрешни тагове.