При виконанні верстки сайту необхідно розташувати всі елементи таким чином, щоб вони складали цілісну структуру і були зручні для сприйняття кінцевим користувачем. Виконати засобами мови веб-розмітки HTML вирівнювання по ширині — найпростіший спосіб зробити сайт зручним і читабельним.
Вирівнювання елементів сторінки
Інструмент вирівнювання в мові HTML дозволяє задавати розташування тексту або блокових елементів на сторінці щодо правого і лівого країв екрану. Таким чином створюється цілісна структура сайту, в якій усі блоки розташовані так, щоб користувач міг комфортно сприймати інформацію на сторінці.
Якщо текст на сторінці написаний без форматування, він сприймається набагато гірше і викликає у відвідувача сайту бажання закрити сторінку без подальшого прочитання. Тому насамперед необхідно розділити інформацію на логічні блоки, а потім розподілити їх так, щоб створити цілісну і зручну для сприйняття картину.
Наприклад, заголовки в тексті можна не тільки виділити жирним або збільшеним шрифтом, але і розмістити посередині, а блок меню, зрушений до лівого або правого краю, допоможе акуратно виділити основні посилання.
Найпростіший спосіб виконати вирівнювання по ширині — HTML-теги або засоби CSS.
Вирівнювання за допомогою HTML
Існує чотири основних способи розташувати текст і елементи на веб-сторінці:
- left — текст буде розташований по лівому краю;
- right — відповідає за вирівнювання по правому краю;
- center — текст або елементи будуть відображатися по центру;
- justify — вирівнювання в HTML по краях, по всій ширині сторінки з однаковими відступами по обох краях.
За замовчуванням, якщо ніякі елементи форматування не задіяні, інформаційний блок буде розташовуватися з вирівнюванням по лівій стороні, тоді праворуч довжина рядків буде відрізнятися.
Нижче буде розглянуто приклад коду, в якому будуть відображені приклади основних способів форматування для вирівнювання по ширині в HTML.
За розміщення тексту відповідає атрибут align, який працює з такими тегами <div>, <p>, <h1> і іншими.
Синтаксис буде виглядати наступним чином:
<body>
<h1 align=”center”>заголовок Першого в прикладі вирівнюється по центру</h1>
<h2 align=”right”>Вирівнювання підзаголовку по правому краю</h2>
<p align=”justify”>Для довгого елемента тексту, який складається з декількох речень, підійде варіант з вирівнюванням по ширині.
Це покращує читаність тексту. </p>
<h2 align=”left”>Наступний підзаголовок розташований зліва</h2>
</body>
Скопіюйте приведений вище приклад в блокнот і збережіть у вигляді HTML-файлу. Відкривши його в будь-якому браузері, ви на практичному прикладі зрозумієте, як працює вирівнювання.
Його можна застосовувати не тільки до тексту, але і до зображень, тоді код буде виглядати так:
<img src=”kartinka.jpg” align=”center”>
У цьому прикладі виконано вирівнювання по центру в HTML. Спробуйте поекспериментувати і перенести картинку вправо або вліво з використанням відповідних значень атрибута align.
Вирівнювання за допомогою CSS
Розташувати елементи веб-сторінки відповідним чином можна не тільки за допомогою HTML, але і засобами CSS. Для виконання цього завдання використовується така властивість стилю, як text-align. Його прописують або в рамках тегу <style> прямо в тілі HTML-документа або виносять в окремий файл стилів з розширенням .css, який потім підключають до сторінки.
Перший варіант краще використовувати на сторінках, які слабко завантажені стилями. Якщо ж кількість CSS-коду дуже велике, то рекомендовано створювати окремий документ, що містить таблиці стилів.
Синтаксис вирівнювання текстових елементів буде виглядати наступним чином.
<style>
p {
text-align: center; /* Вирівнювання по центру */
}
h1 {
text-align: right; /* Вирівнювання по правому краю*/
}
h2 {
text-align: left; /* Вирівнювання по лівому краю*/
}
</style>
Можна звернути увагу, що значення цієї властивості будуть аналогічними тим, що задаються при вирівнюванні по центру в HTML. Те ж саме стосується і розташування тексту по правому і лівому краю або на всю ширину сторінки.
Створіть текстовий документ і скопіюйте туди цей код. В даному прикладі основні абзаци, укладені в тег <p> будуть розташовані посередині сторінки, заголовки першого рівня відобразяться праворуч, а підзаголовки другого рівня — зліва.
Серед сучасних веб-розробників і професіоналів верстки використання таблиць стилів вважається кращим для оптимізації інтернет-сторінки.
Додаткові способи форматування
Крім зазначених вище способів виконання вирівнювання по ширині в HTML існують інші позначки, за допомогою яких можна розташувати текст потрібним чином.
Наприклад, тег <blocqkuote> дозволяє зробити відступ від лівої частини сторінки більше. Для того щоб зрозуміти, як це працює, скопіюйте наступний приклад.
<body>
<p><blockquote>Збільшений відступ зліва</blockquote></p>
</body>
Існує аналогічний спосіб зробити великий відступ зліва з заданим значенням за допомогою CSS. Для цього використовується наступна властивість стилю.
<p style=”text-indent:150px”>Збільшений відступ зліва</p>
При використанні цього методу можна самостійно прописати значення, яке буде відповідати за ширину відступу. Випробуйте цей спосіб і поміняйте розмір відступу на будь-який інший, щоб зрозуміти принцип дії.
Ще один цікавий тег, який може бути використаний для форматування тексту, але в наш час практично повністю втратив своє значення — це <nobr>.
Його завдання полягає в тому, щоб вимкнути автоматичний перенос рядка, навіть якщо ця рядок за шириною перевищує саме вікно браузера.
Висновок
Отже, у статті були розглянуті основні способи вирівнювання тексту і інших структурних елементів веб-сторінки за допомогою засобів HTML і CSS. Який із способів вибрати? Це слід вирішувати залежно від того, які цілі і завдання, поставлені під час верстки сайту.
