Атрибут align и его значения. Абзацы в html и атрибут выравнивания. RGB – код зеленого цвета записывается как

по краю.

Синтаксис

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Значение по умолчанию

HTML 4.01 IE Cr Op Sa Fx

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

Рис. 1. Выравнивание элементов с помощью атрибута align

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

Итак, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

• text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.
• text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).
• text-align:right - Каждая строка прижимается к правой стороне.
• text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify , то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

Заголовок по центру.

Параграф по центру.

Результат в браузере

Заголовок по центру.

Текст параграфа прижимается вправо.

Параграф по центру.

Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline). Почему? А помните мы недавно выяснили, что ширина встроенного элемента равна его содержимому? Соответственно получается, что этому самому содержимому просто некуда будет выравниваться и браузер элементарно проигнорирует ваши «художества». :)

Домашнее задание.

1. Создайте заголовок статьи, двух ее разделов и одного подраздела в первом разделе. И пусть заголовок статьи располагается по центру страницы.
2. Установите для всей страницы шрифт Arial, а для всех заголовков - Times и пусть они будут написаны курсивом.
3. Цвет текста заголовка статьи поставьте #FF6600, разделов #6600FF, а подраздела оставьте неизменным.
4. Напишите под каждым заголовком по одному параграфу, причем текст каждого из них должен занимать не меньше трех строк при просмотре в браузере.
5. Выровняйте второй параграф по центру, третий - по правой стороне, а четвертый по обоим.

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

Текст…

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

Для примера возьмем страницу с таким кодом:

Первый абзац: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Второй абзац: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.

Давайте посмотрим, как выглядит это дело в браузере:

Наверняка вы заметили, что в коде страницы есть тег strong, этот тег делает текст жирным.

Атрибуты тегов

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

Атрибут указывается внутри скобки открывающего тега и имеет следующий синтаксис: имя_атрибута="значение"

Атрибут выравнивания

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

Содержимое параграфа.

У этого атрибута есть 4 значения:

1. Left – Выравнивает контент по левому краю. Это значение стоит по умолчанию. То есть если для абзаца не указываем атрибут align , то контент внутри абзаца по умолчанию, выровняется по левому краю. Это можно заметит в предыдущем примере.

2. Right – Выравнивает контент по правому краю.

Текст…

Вот как это выглядит в браузере:

3.Center - Выравнивает контент по центру страницы.

Текст…

4.Justify – Выравнивает контент по ширине страницы.

Текст…

Итоги урока:
Мы сегодня узнали, что такое абзац в html. Абзацы используются очень часто в html. Также узнали, что такое атрибут тега. И выучили атрибут выравнивания align. Который может принять одно из следующих значений: left (значение по умолчанию), right, center, justify.