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. Какой из способов выбрать? Это следует решать в зависимости от того, какие цели и задачи поставлены во время верстки сайта.