Выравнивание текста | htmlbook.ru

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.

Табл. 1. Способы выравнивания текста
Выравнивание по левому краю Выравнивание по правому краю Выравнивание по центру Выравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.

Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align, как показано в табл. 2.

Табл. 2. Выравнивание текста с помощью параметра align
Код HTML Описание
<p>Текст</p> Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
<p align=»center»>Текст</p> Выравнивание по центру.
<p align=»left»>Текст</p> Выравнивание по левому краю.
<p align=»right»>Текст</p> Выравнивание по правому краю.
<p align=»justify»>Текст</p> Выравнивание по ширине.
<nobr>Текст</nobr> Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст<wbr> Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>.
<div align=»center»>Текст</div> Выравнивание по центру.
<div align=»left»>Текст</div> Выравнивание по левому краю.
<div align=»right»>Текст</div> Выравнивание по правому краю.
<div align=»justify»>Текст</div> Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.

Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h2>. В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h2 align="center">Как поймать льва?</h2> 
  <p align="right"><strong>Метод перебора</strong></p> 
  <p>Делим пустыню на ряд элементарных участков, размер которых совпадает 
  с габаритными размерами льва, но при этом меньше размера клетки. Далее простым 
  перебором определяем участок, в котором находится лев, что автоматически приводит 
  к его поимке.</p>
  <p align="right"><strong>Метод дихотомии</strong></p>
  <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. 
  Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем 
  до тех пор, пока лев не окажется пойман.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Выравнивание текста по правому и левому краю

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.

htmlbook.ru

Как сделать в HTML выравнивание по ширине?

Приветствую вас, дорогие коллеги!

Сегодня я хотела бы с вами поделиться одним полезным приемом работы с HTML, который в отдельных случаях в процессе заполнения страниц сайта поможет сэкономить время.

В этой статье мы познакомимся с атрибутом align и вы узнаете как можно при верстке страницы сделать в HTML выравнивание по ширине, по центру или по правому краю, не задавая классы и не используя CSS-стили.

Как вы, наверное, уже знаете, при верстке страницы весть текст по умолчанию выравнивается по левому краю, то есть по умолчанию атрибуту align имеет значение «left».

Если же вам нужно задать в HTML выравнивание по ширине, по центру или по правому краю то вы должны указать атрибут align в теге <p> , <div>, <h2> и так далее со значением, соответствующим направлению выравнивания текста.

Атрибут align может принимать следующие значения выравнивания:

  • left – по левому краю, задается по умолчанию.
  • right – по правому краю
  • center – по центру
  • justify – по ширине.

Пример использования:

<h2 align=»right» >Текст по правому краю</h2>

<h2 align=»right» >Текст по правому краю</h2>

При использования атрибута align= «justify» для выравнивания по ширине небольшого количества текста, возможно возникновение больших пробелов. Связано это с тем, что в данном случае браузер растягивает строку текста на всю ширину блока, от крайней точки слева до крайней точки справа, и при этом браузер автоматически подгоняет расстояние между словами.

Вот как это будет выглядеть в HTML:

<p align=»justify» >HTML выравнивание по ширине</p>

<p align=»justify» >HTML выравнивание по ширине</p>

В данном случае текст будет растянут по ширине блока в котором он находится:

Для данного фрагмента текста было использовано HTML выравнивание по ширине с помощью атрибута

align

Этот способ использования HTML выравнивания по ширине очень удобен при верстке страницы, в том случае, если вам нужно выделить какой-то определенный участок текста и присваивать этому элементу отдельный класс, а потом ещё писать CSS-стили нет особого смысла. Если же вам нужно выровнять весть текст на странице, то, конечно же, задавать для каждого абзаца или заголовка атрибут align не стоит. В этом случае намного проще и быстрее задать оформление текста CSS-стилями.

А на сегодня у меня все. Надеюсь, данная статья будет для вас полезной. Не забывайте подписаться на мою рассылку, и оставить комментарий под статьей.

Успехов вам в работе и до встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Выравнивание текста | htmlbook.ru

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы, что не очень красиво.

Для установки выравнивания текста обычно используется тег параграфа <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align. Он может принимать следующие значения:

  • left — выравнивание по левому краю, задается по умолчанию;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.

Атрибут align можно применять как для текста, так и для заголовков (пример 7.4).

Пример 7.4. Способы выравнивания текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h2 align="center">Как поймать льва?</h2>
  <h3 align="right">Метод перебора</h3>
  <p align="justify">Делим пустыню на ряд элементарных участков, размер 
   которых совпадает с габаритными размерами льва, но при этом меньше размера 
   клетки. Далее простым перебором определяем участок, в котором находится лев,
   что автоматически приводит к его поимке.</p>
  <h3 align="right">Метод дихотомии</h3>
  <p align="justify">Делим пустыню на две половины. В одной части - лев, в 
   другой его нет. Берем ту половину, в которой находится лев, и снова делим 
   ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p>
 </body>
</html>

Результат данного примера показан на рис. 7.4.

Рис. 7.4. Вид текста при его выравнивании

htmlbook.ru

Выравнивание элементов в HTML

Вы здесь: Главная — HTML — HTML Основы — Выравнивание элементов в HTML

Выравнивание элементов в HTML

До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.

Выравнивание элементов — это самые основы HTML, которые просто необходимо знать при создании интернет сайтов. Первое, что необходимо сделать — это набрать HTML-код простейшей страницы.

Ещё когда-то давно появился тег <center> я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру.

<center>
  <h2>Заголовок 1-го уровня, выравненный по центру</h2>
</center>

Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега <br>:

<center>
  <h2>Заголовок 1-го уровня, выравненный по центру</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</center>

Это был тег <center>, который уже устарел, вдобавок, вопреки Вашим ожиданиям тегов <left> и <right> просто не существует. Допустим, по левому краю выравнивается по умолчанию, по центру выравнивается с помощью тега <center>, но как же быть с правым?

Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега <div>. То есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. А уже у этого тега есть атрибут «align«, значение которого и определяет положение данного контейнера. Бывают три значения: «left«, «center«, «right«. По умолчанию, стоит «left«, впрочем, думаю, что Вас это не удивляет.

Давайте сейчас напишем тот же HTML-код, но с использованием контейнеров, вдобавок, давайте выравняем не по центру, а по правому краю.

<div align = "right">
  <h2>Заголовок 1-го уровня, выравненный по правому краю</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>

Как видите, всё работает. Советую Вам также поменять значения атрибута «align«, чтобы посмотреть на другие виды выравнивания содержимого контейнеров.

Другой способ выравнивания элементов HTML — это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей.

А пока Ваша страница должна выглядеть так:

<html>
<head>
</head>
<body>
<center>
  <h2>Заголовок 1-го уровня, выравненный по центру</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</center>
<div align = "right">
  <h2>Заголовок 1-го уровня, выравненный по правому краю</h2>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>
</body>
</html>

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

  • Выравнивание элементов в HTML Создано 28.04.2010 17:08:49
  • Выравнивание элементов в HTML Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

HTML-выравнивание по ширине страницы: советы и рекомендации

При выполнении верстки сайта необходимо расположить все элементы таким образом, чтобы они составляли целостную структуру и были удобны для восприятия конечным пользователем. Выполнить средствами языка веб-разметки HTML выравнивание по ширине — самый простой способ сделать сайт удобным и читабельным.

Код, программирование

Выравнивание элементов страницы

Инструмент выравнивания в языке HTML позволяет задавать расположение текста или блочных элементов на странице относительно правого и левого краев экрана. Таким образом создается целостная структура сайта, в которой все блоки расположены так, чтобы пользователь мог комфортно воспринимать информацию на странице.

Если текст на странице написан без форматирования, он воспринимается гораздо хуже и вызывает у посетителя сайта желание закрыть страницу без дальнейшего прочтения. Поэтому первым делом необходимо разделить информацию на логические блоки, а затем распределить их так, чтобы создать целостную и удобную для восприятия картину.

Например, заголовки в тексте можно не только выделить жирным или увеличенным шрифтом, но и разместить посередине, а блок меню, сдвинутый к левому или правому краю, поможет аккуратно выделить основные ссылки.

Самый простой способ выполнить выравнивание по ширине — HTML-теги или средства CSS.

Html и Css, плоское изображение, логотип

Выравнивание при помощи HTML

Существует четыре основных способа расположить текст и элементы на веб-странице:

  • left — текст будет расположен по левому краю;
  • right — отвечает за выравнивание по правому краю;
  • center — текст или элементы будут отображаться по центру;
  • justify — выравнивание в HTML по краям, по всей ширине страницы с одинаковыми отступами по обоим краям.

По умолчанию, если никакие элементы форматирования не задействованы, информационный блок будет располагаться с выравниванием по левой стороне, тогда справа длина строк будет отличаться.

Ниже будет рассмотрен пример кода, в котором будут отображены примеры использования основных способов форматирования для выравнивания по ширине в HTML.

За расположение текста отвечает атрибут align, который работает с такими тегами как <div>, <p>, <h2> и другими.

Синтаксис будет выглядеть следующим образом:

 <body>
  <h2 align="center">Первый заголовок в примере выравнивается по центру</h2>
  <h3 align="right">Выравнивание подзаголовка по правому краю</h3>
  <p align="justify">Для длинного элемента текста, который состоит из нескольких предложений, подойдет вариант с выравниванием по ширине. 
Это улучшает читаемость текста. </p>
  <h3 align="left">Следующий подзаголовок расположен слева</h3>
 </body>

Скопируйте приведенный выше пример в блокнот и сохраните в виде HTML-файла. Открыв его в любом браузере, вы на практическом примере поймете, как работает выравнивание.

Его можно применять не только к тексту, но и к изображениям, тогда код будет выглядеть так:

 <img src="kartinka.jpg" align="center">

В этом примере выполнено выравнивание по центру в HTML. Попробуйте поэкспериментировать и перенести картинку вправо или влево с использованием соответствующих значений атрибута align.

HTML-книга и компьютер

Выравнивание при помощи CSS

Расположить элементы веб-страницы соответствующим образом можно не только с помощью HTML, но и средствами CSS. Для выполнения этой задачи используется такое свойство стиля, как text-align. Его прописывают либо в рамках тега <style> прямо в теле HTML-документа либо выносят в отдельный файл стилей с расширением .css, который затем подключают к странице.

Первый вариант лучше использовать на страницах, которые слабо загружены стилями. Если же количество CSS-кода очень велико, то рекомендовано создавать отдельный документ, содержащий таблицы стилей.

Синтаксис выравнивания текстовых элементов будет выглядеть следующим образом.

 <style>
   p {
    text-align: center; /* Выравнивание по центру */
   }
   h2 {
    text-align: right; /* Выравнивание по правому краю*/
}
   h3 {
    text-align: left; /* Выравнивание по левому краю*/
}
  </style>

Можно обратить внимание, что значения для данного свойства будут аналогичными тем, что задаются при выравнивании по центру в HTML. То же самое касается и расположения текста по правому и левому краю или на всю ширину страницы.

Создайте текстовый документ и скопируйте туда этот код. В данном примере основные абзацы, заключенные в тег <p> будут расположены посередине страницы, заголовки первого уровня отобразятся справа, а подзаголовки второго уровня — слева.

Среди современных веб-разработчиков и профессионалов верстки использование таблиц стилей считается более предпочтительным для оптимизации интернет-страницы.

Html и Css логотип

Дополнительные способы форматирования

Кроме указанных выше способов выполнения выравнивания по ширине в HTML существуют другие теги, при помощи которых можно расположить текст нужным образом.

Например, тег <blocqkuote> позволяет сделать отступ от левой части страницы больше. Для того чтобы понять, как это работает, скопируйте следующий пример.

<body>
<p><blockquote>Увеличенный отступ слева</blockquote></p>
</body>

Существует аналогичный способ сделать большой отступ слева с заданным значением при помощи CSS. Для этого используется следующее свойство стиля.

<p>Увеличенный отступ слева</p>

При использовании этого метода можно самостоятельно прописать значение, которое будет отвечать за ширину отступа. Опробуйте данный способ и поменяйте размер отступа на любой другой, чтобы понять принцип действия.

Еще один интересный тег, который может быть использован для форматирования текста, но в наше время практически полностью утратил свое значение — это <nobr>.

Его задача заключается в том, чтобы отключать автоматический перенос строки, даже если эта строка по ширине превышает само окно браузера.

Заключение

Итак, в статье были рассмотрены основные способы выравнивания текста и других структурных элементов веб-страницы с помощью средств HTML и CSS. Какой из способов выбрать? Это следует решать в зависимости от того, какие цели и задачи поставлены во время верстки сайта.

fb.ru

Выравнивание текста. Как в HTML сделать выравнивание текста по центру, ширине, краям страницы

Довольно часто людям просто лень или некогда изучать интерфейс программы Microsoft Word, поэтому и возникают вопросы вроде «Как выровнять текст в Ворде?» — что ж, давайте разбираться. Когда Вы набираете текст в данной программе, он в автоматическом режиме выравнивается по левому краю. Можно ли сместить его в центр? Или на правую сторону? Конечно же, да. Более того, Вы можете в центре страницы разместить заголовок (шапку документа), а сам текст выровнять по левому краю.

Учимся выравнивать текст в MS Word

В разделе «Главная» располагаются специальные кнопки, некоторые из которых отвечают за выравнивание текста по центру, левому и правому краям, а также по ширине документа.

К ним мы ещё вернёмся несколько позже, давайте для начала разберёмся с тем, как не стоит выравнивать текст.

Некорректное выравнивание текста в Ворде

Неопытные пользователи довольно часто начинают выравнивать текст так, как им нужно, подручными средствами – то есть, ставят лишние пробелы или тапают по кнопке «Tab». Такое выравнивание считается ошибочным, потому как расстояние от левой границы рассчитывается на глаз, что весьма неудобно при дальнейшем наборе текста или его редактировании. Более того, на глаз практически нереально сделать необходимый отступ, из-за чего некоторые документы могут не принять. В частности, это касается дипломов – ни один преподаватель не примет текст, напечатанный таким образом – нужно строго соблюсти все требования вплоть до отступов и выравнивания. К тому же, сам способ нельзя назвать удобным – приходится слишком много тапать по кнопкам проблем и Tab.

Одно дело, если это касается диплома. А что, если это и вовсе официальный документ? При таком подходе можно запросто потерять деловую репутацию. Именно поэтому для выравнивания текста следует использовать стандартные средства MS Word — кнопки, находящиеся в разделе «Главная».

Для проверки правильности оформления документа также есть специальная кнопка, нажав на неё, Вы увидите скрытые знаки, именно поэтому лучше изначально грамотно подойти к вопросу оформления текста.

После нажатия в тексте появятся непонятные знаки, множество точек и стрелок.

Точки – это пробелы, поставленные Вами. Стрелки – нажатия клавиши Tab, остальное для нас на данном этапе не имеет никакого практического значения. Таким образом, если Вы поставили слишком много пробелов подряд, чтобы выровнять текст так, как Вам нужно, при нажатии кнопки «Отобразить все знаки», Ваша оплошность тут же станет заметной – множество точек и стрелочек.

Для возвращения документа к прежнему виду следует ещё раз кликнуть по этой же кнопке.

Выравниваем текст стандартными средствами Microsoft Word

Итак, возвращаемся к тем самым четырём кнопочкам, представленным ранее.
  • Первая отвечает за выравнивание по левому краю, то есть, текст будет “примагничен” к левому краю;
  • Вторая отвечает за выравнивание по центру;
  • Третья отвечает за выравнивание по правому краю;
  • Четвёртая выравнивает его по ширине документа, то есть, распределяет текст равномерно между левым и правым краями, благодаря чему удаётся достичь чёткости и ровности краёв.

    Как видите, всё предельно просто. Спешим Вас обрадовать, текст заново писать не придётся – выровнять его можно и после того, как он был напечатан. Выделяете необходимый участок с помощью мыши и кликаете по одной из кнопок.

  • В случае HTML-документов теги работают больше на разметку контента, чем на указание того, как он должен быть представлен. Больший контроль над представлением достигается с помощью стилей. В этой статье я рассмотрю те стили, которые связаны с форматированием абзаца в HTML .

    Тег

    В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

    Выравнивание абзаца

    Можно выровнять абзац, используя атрибут align со следующими значениями:

    text-align: l

    thesaker.ru

    Выравнивание текста в HTML

    Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом. Пришло время разобраться с тем, как выравнивать текст на странице HTML. Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег <center></center>. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать. Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами <center></center>:

    
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Выравнивание элементов в HTML</title>
    </head>
    <body>
      <p>Текст с левой стороны</p>
      <center>
    	<p>Центральный текст</p>
      </center>
    </body>
    </html>
    

    После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы.
    Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег <center> — значит должны быть и теги <left>, и <right>. Заключив содержимое в теги <left></left> вы увидите, что текст действительно расположился слева. Но это будет не из-за того, что вы поставили тег <left>, а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега <left> он просто его пропустил. Тегов <left> и <right> не существует.

    Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера <div>, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях.
    Элемент <div> является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры <div>. У тега <div> есть атрибут align, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left, center, right. Давайте напишем код, где расположим элементы в различных частях браузера:

    
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>Выравнивание элементов в HTML</title>
    </head>
    <body>
    <div>Текст, расположенный слева</div>
    <div align="center">Текст, расположенный по центру</div>
    <div align="right">Текст, расположенный справа</div>
    </body>
    </html>
    

    В данной статье вы научились выравнивать текст на html-странице.

    Домашнее задание: выведите в правой части браузера 1 заголовок первого уровня и 1 заголовок второго уровня.

    На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


    Следующая статья >

    alekseygulynin.ru