При оформянето на площадката всички елементи трябва да бъдат подредени по такъв начин, че да образуват цялостна структура и да са удобни за възприемане от крайния потребител. Изпълнявайте HTML оформления на езика за маркиране - най-лесният начин да направите сайта лесен и четлив.

Изравняване на елементи на страницата

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


Например, заглавките в текста не могат да бъдат маркирани само с удебелен шрифт, но и поставени в средата, а блокът на менюто, изместен на ляво или дясно поле, ще помогне за точното определяне на основните връзки. Най-лесният начин да направите изравняване по ширина е чрез използване на HTML тагове или CSS инструменти.

Подравняване чрез HTML

Има четири основни начина за подреждане на текст и елементи на уеб страница:

наляво - текстът ще бъде разположен на левия край;

вдясно -е отговорен за изравняване на десния ръб;

център - текстът или елементите ще бъдат показани в центъра;

Оправдайте - подравнете в HTML по ръбовете, по ширината на страницата със същите вдлъбнатини по двата края.

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


По-долу ще намерите пример за код, който ще покаже примери на основни методи за форматиране за ширината в HTML. Поставянето на текста съответства на атрибута align, който работи с такива маркери като ,,

и други. Синтаксисът ще изглежда по следния начин:

Първото заглавие в примера е центрирано центрирано

Подравняване на субтитрите в десния край

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

Следващият субтитър е отляво

Копирайте горния пример в бележника и го запишете като HTML файл. Като я отворите във всеки браузър, на практика ще видите как се работи.

Може да се приложи не само към текста, но и към изображенията, след което кодът ще изглежда така:

В този пример подравняването е центрирано в HTML. Опитайте да експериментирате и преместите изображението надясно или наляво, като използвате подходящите стойности на атрибутите.подравняване.

Подравняване на CSS

Позиционирайте съответно елементите на уеб страницата не само с HTML, но и с CSS инструменти. За да изпълните тази задача, се използва свойство на стил, например text-align. Той се записва или в рамките на етикета директно в тялото на HTML документа или се поставя в отделен стил на файла с разширение .css, което след това се свързва към страницата.

Първият вариант е по-добре да се използва на страници, които са лошо заредени със стилове. Ако броят на CSS кода е много голям, се препоръчва да се създаде отделен документ, който съдържа стилова таблица.

Синтаксисът за подравняване на текстови елементи ще изглежда така.

p {
 text-align: center; /* Подравняване на център * /
}
h1 {
 text-align: right; /* Дясно подравняване * /
}
h2 {
 изравняване на текст: наляво; /* Left alignment * /
}
 

Можете да отбележите, че стойностите на това свойство ще бъдат подобни на тези, които са зададени при подравняване в центъра в HTML. Същото се отнася и за местоположението на текста на десния и левия ръб или на цялата ширина на страницата.

Създайте текстов документ и копирайте там кода. В този пример основните абзаци, затворени в маркера

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

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

Разширени техники за форматиране

В допълнение към горните методи за подравняване по ширина в HTML, има и други етикети, които ви позволяват да подредите текста по правилния начин.

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

Увеличен ляв край 

 

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

Увеличен ляв абзац

Когато се използва този метод, можете независимо да напишете стойност, която съответства на ширината на вдлъбнатината. Опитайте този метод и променете размера на вдлъбнатината на всеки друг, за да разберете принципа на действие. Друг интересен етикет, който може да се използва за форматиране на текст, но внашето време почти напълно е загубило значението си - това е. Неговата задача е да деактивира автоматичния линеен транспорт, дори ако тази линия е по-голяма от ширината на прозореца на браузъра.

Заключение

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