HTML-вирівнювання по ширині сторінки: поради та рекомендації

При виконанні верстки сайту необхідно розташувати всі елементи таким чином, щоб вони складали цілісну структуру і були зручні для сприйняття кінцевим користувачем. Виконати засобами мови веб-розмітки 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. Який із способів вибрати? Це слід вирішувати залежно від того, які цілі і завдання, поставлені під час верстки сайту.