HTML-вирівнювання по ширині сторінки: поради та рекомендації
Вирівнювання елементів сторінки
Інструмент вирівнювання в мові HTML дозволяє задавати розташування тексту або блокових елементів на сторінці щодо правого і лівого країв екрану. Таким чином створюється цілісна структура сайту, в якій усі блоки розташовані так, щоб користувач міг комфортно сприймати інформацію на сторінці. Якщо текст на сторінці написаний без форматування, він сприймається набагато гірше і викликає у відвідувача сайту бажання закрити сторінку без подальшого прочитання. Тому насамперед необхідно розділити інформацію на логічні блоки, а потім розподілити їх так, щоб створити цілісну і зручну для сприйняття картину.Наприклад, заголовки в тексті можна не тільки виділити жирним або збільшеним шрифтом, але і розмістити посередині, а блок меню, зрушений до лівого або правого краю, допоможе акуратно виділити основні посилання. Найпростіший спосіб виконати вирівнювання по ширині — HTML-теги або засоби CSS.
Вирівнювання за допомогою HTML
Існує чотири основних способи розташувати текст і елементи на веб-сторінці: left — текст буде розташований по лівому краю; right — відповідає за вирівнювання по правому краю; center — текст або елементи будуть відображатися по центру; justify — вирівнювання в HTML по краях, по всій ширині сторінки з однаковими відступами по обох краях. За замовчуванням, якщо ніякі елементи форматування не задіяні, інформаційний блок буде розташовуватися з вирівнюванням по лівій стороні, тоді праворуч довжина рядків буде відрізнятися.Нижче буде розглянуто приклад коду, в якому будуть відображені приклади основних способів форматування для вирівнювання по ширині в HTML. За розміщення тексту відповідає атрибут align, який працює з такими тегами як , ,
та іншими. Синтаксис буде виглядати наступним чином:
Перший заголовок у прикладі вирівнюється по центру
Вирівнювання підзаголовку по правому краю
Для довгого елемента тексту, який складається з декількох речень, підійде варіант з вирівнюванням по ширині.
Це покращує читаність тексту.
Наступний підзаголовок розташований зліва
Скопіюйте приведений вище приклад в блокнот і збережіть у вигляді HTML-файлу. Відкривши його в будь-якому браузері, ви на практичному прикладі зрозумієте, як працює вирівнювання.
Його можна застосовувати не тільки до тексту, але і до зображень, тоді код буде виглядати так:
У цьому прикладі виконано вирівнювання по центру в HTML. Спробуйте поекспериментувати і перенести картинку вправо або вліво з використанням відповідних значень атрибута align.
<script type="text/jаvascript">
var blockSettings2 = {blockId:"R-A-271049-5",renderTo:"yandex_rtb_R-A-70350-39",async:!0};
if(document.cookie.indexOf("abmatch=") >= 0) blockSettings2.statId = 70350;
!function(a,b,c,d,e){a[c]=a[c]||[],a[c].push(function(){Ya.Context.AdvManager.render(blockSettings2)}),e=b.getElementsByTagName("script")[0],d=b.createElement("script"),d.type="text/jаvascript",d.src="//an.yandex.ru/system/context.js",d.async=!0e.parentNode.insertBefore(d,e)}(this,this.document,"yandexContextAsyncCallbacks");
Вирівнювання за допомогою CSS
Розташувати елементи веб-сторінки відповідним чином можна не тільки за допомогою HTML, але і засобами CSS. Для виконання цього завдання використовується така властивість стилю, як text-align. Його прописують або в рамках тегу прямо в тілі HTML-документа або виносять в окремий файл стилів з розширенням .css, який потім підключають до сторінки.
Перший варіант краще використовувати на сторінках, які слабко завантажені стилями. Якщо ж кількість CSS-коду дуже велике, то рекомендовано створювати окремий документ, що містить таблиці стилів.
Синтаксис вирівнювання текстових елементів буде виглядати наступним чином.
p {
text-align: center; /* Вирівнювання по центру */
}
h1 {
text-align: right; /* Вирівнювання по правому краю*/
}
h2 {
text-align: left; /* Вирівнювання по лівому краю*/
}
Можна звернути увагу, що значення цієї властивості будуть аналогічними тим, що задаються при вирівнюванні по центру в HTML. Те ж саме стосується і розташування тексту по правому і лівому краю або на всю ширину сторінки.
Створіть текстовий документ і скопіюйте туди цей код. В даному прикладі основні абзаци, укладені в тег
будуть розташовані посередині сторінки, заголовки першого рівня відобразяться праворуч, а підзаголовки другого рівня — зліва.
<script type="text/jаvascript">
var blockSettings3 = {blockId:"R-A-271049-6",renderTo:"yandex_rtb_R-A-70350-44",async:!0};
if(document.cookie.indexOf("abmatch=") >= 0) blockSettings3.statId = 70350;
!function(a,b,c,d,e){a[c]=a[c]||[],a[c].push(function(){Ya.Context.AdvManager.render(blockSettings3)}),e=b.getElementsByTagName("script")[0],d=b.createElement("script"),d.type="text/jаvascript",d.src="//an.yandex.ru/system/context.js",d.async=!0e.parentNode.insertBefore(d,e)}(this,this.document,"yandexContextAsyncCallbacks");
Серед сучасних веб-розробників і професіоналів верстки використання таблиць стилів вважається кращим для оптимізації інтернет-сторінки.
Додаткові способи форматування
Крім зазначених вище способів виконання вирівнювання по ширині в HTML існують інші позначки, за допомогою яких можна розташувати текст потрібним чином.
Наприклад, тег дозволяє зробити відступ від лівої частини сторінки більше. Для того щоб зрозуміти, як це працює, скопіюйте наступний приклад.
Збільшений відступ зліва
Існує аналогічний спосіб зробити великий відступ зліва з заданим значенням за допомогою CSS. Для цього використовується наступна властивість стилю.
Збільшений відступ зліва
При використанні цього методу можна самостійно прописати значення, яке буде відповідати за ширину відступу. Випробуйте цей спосіб і поміняйте розмір відступу на будь-який інший, щоб зрозуміти принцип дії. Ще один цікавий тег, який може бути використаний для форматування тексту, але в наш час практично повністю втратив своє значення — це . Його завдання полягає в тому, щоб вимкнути автоматичний перенос рядка, навіть якщо ця рядок за шириною перевищує саме вікно браузера.
Висновок
Отже, у статті були розглянуті основні способи вирівнювання тексту і інших структурних елементів веб-сторінки за допомогою засобів HTML і CSS. Який із способів вибрати? Це слід вирішувати залежно від того, які цілі і завдання, поставлені під час верстки сайту.
