При выполнении верстки сайта необходимо расположить все элементы таким образом, чтобы они составляли целостную структуру и были удобны для восприятия конечным пользователем. Выполнить средствами языка веб-разметки HTML выравнивание по ширине — самый простой способ сделать сайт удобным и читабельным.
Выравнивание элементов страницы
Инструмент выравнивания в языке HTML позволяет задавать расположение текста или блочных элементов на странице относительно правого и левого краев экрана. Таким образом создается целостная структура сайта, в которой все блоки расположены так, чтобы пользователь мог комфортно воспринимать информацию на странице.
Вам будет интересно:Как написать Hello, World на Python: советы и рекомендации
Если текст на странице написан без форматирования, он воспринимается гораздо хуже и вызывает у посетителя сайта желание закрыть страницу без дальнейшего прочтения. Поэтому первым делом необходимо разделить информацию на логические блоки, а затем распределить их так, чтобы создать целостную и удобную для восприятия картину.
Например, заголовки в тексте можно не только выделить жирным или увеличенным шрифтом, но и разместить посередине, а блок меню, сдвинутый к левому или правому краю, поможет аккуратно выделить основные ссылки.
Самый простой способ выполнить выравнивание по ширине — HTML-теги или средства CSS.
Выравнивание при помощи HTML
Существует четыре основных способа расположить текст и элементы на веб-странице:
- left — текст будет расположен по левому краю;
- right — отвечает за выравнивание по правому краю;
- center — текст или элементы будут отображаться по центру;
- justify — выравнивание в HTML по краям, по всей ширине страницы с одинаковыми отступами по обоим краям.
По умолчанию, если никакие элементы форматирования не задействованы, информационный блок будет располагаться с выравниванием по левой стороне, тогда справа длина строк будет отличаться.
Ниже будет рассмотрен пример кода, в котором будут отображены примеры использования основных способов форматирования для выравнивания по ширине в HTML.
За расположение текста отвечает атрибут align, который работает с такими тегами как
,
и другими.
Синтаксис будет выглядеть следующим образом:
Первый заголовок в примере выравнивается по центру
Выравнивание подзаголовка по правому краю
Для длинного элемента текста, который состоит из нескольких предложений, подойдет вариант с выравниванием по ширине. Это улучшает читаемость текста.
Следующий подзаголовок расположен слева
Скопируйте приведенный выше пример в блокнот и сохраните в виде HTML-файла. Открыв его в любом браузере, вы на практическом примере поймете, как работает выравнивание.
Его можно применять не только к тексту, но и к изображениям, тогда код будет выглядеть так:
В этом примере выполнено выравнивание по центру в HTML. Попробуйте поэкспериментировать и перенести картинку вправо или влево с использованием соответствующих значений атрибута align.
Выравнивание при помощи CSS
Расположить элементы веб-страницы соответствующим образом можно не только с помощью HTML, но и средствами CSS. Для выполнения этой задачи используется такое свойство стиля, как text-align. Его прописывают либо в рамках тега
Можно обратить внимание, что значения для данного свойства будут аналогичными тем, что задаются при выравнивании по центру в HTML. То же самое касается и расположения текста по правому и левому краю или на всю ширину страницы.
Создайте текстовый документ и скопируйте туда этот код. В данном примере основные абзацы, заключенные в тег
будут расположены посередине страницы, заголовки первого уровня отобразятся справа, а подзаголовки второго уровня — слева.
Среди современных веб-разработчиков и профессионалов верстки использование таблиц стилей считается более предпочтительным для оптимизации интернет-страницы.
Дополнительные способы форматирования
Кроме указанных выше способов выполнения выравнивания по ширине в HTML существуют другие теги, при помощи которых можно расположить текст нужным образом.
Например, тег
Увеличенный отступ слева
Существует аналогичный способ сделать большой отступ слева с заданным значением при помощи CSS. Для этого используется следующее свойство стиля.
Увеличенный отступ слева
При использовании этого метода можно самостоятельно прописать значение, которое будет отвечать за ширину отступа. Опробуйте данный способ и поменяйте размер отступа на любой другой, чтобы понять принцип действия.
Еще один интересный тег, который может быть использован для форматирования текста, но в наше время практически полностью утратил свое значение — это
Его задача заключается в том, чтобы отключать автоматический перенос строки, даже если эта строка по ширине превышает само окно браузера.
Заключение
Итак, в статье были рассмотрены основные способы выравнивания текста и других структурных элементов веб-страницы с помощью средств HTML и CSS. Какой из способов выбрать? Это следует решать в зависимости от того, какие цели и задачи поставлены во время верстки сайта.