Абзацы в html и атрибут выравнивания. Выравнивание элементов в HTML

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

Текст…

. Когда мы выводим 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.

Атрибут ALT

Атрибут SRC

Атрибуты и их аргументы

Тег изображения имеет один обязательный атрибут SRC и необязательные: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Указывает файл изображения и путь к нему; изображение должно быть загружено в браузер и размещено в том месте документа, где расположен тег изображения.

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

Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента - ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста.

ALIGN="middle" выравнивает центр изображения по базовой линии строки окружающего текста.

ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста.

Кроме основных значений атрибута ALIGN="ключевое слово" существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее.

Дополнительные возможные значения аргумента - ["left" | "right" | "top" | "texttop" | "middle" |"absmiddle" | "baseline" | "bottom" | "absbottom" ].

ALIGN="left" определяет огибаемое текстом изображение. Изображение располагается вдоль левой границы документа, а последующие строки текста огибают его справа.

ALIGN="right" определяет огибаемое текстом изображение. Изображение располагается вдоль правой границы документа, а последующие строки текста огибают его слева.

ALIGN="top" выравнивает верх изображения по верхнему краю самого высокого элемента в строке окружающего текста точно так же, как при использовании стандартного набора атрибутов.

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

ALIGN="middle" выравнивает центр изображения по базовой линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="absmiddle" выравнивает центр изображения по центру строки окружающего текста.

ALIGN="baseline" выравнивает нижний край изображения по базовой линии строки окружающего текста, то есть производит такое же действие, как и ALIGN="bottom".

ALIGN="bottom" выравнивает нижний край изображения по базовой линии строки окружающего текста точно так же, как при использовании стандартного набора атрибутов.

ALIGN="absbottom" выравнивает нижний край изображения по нижнему краю строки окружающего текста.

Описание

Выравнивание блока текста по краю.

Вместо этого атрибута необходимо использовать стили

Синтаксис

Значения

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

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

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

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
1	1	1	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

... vertical-align : value ; ...

• baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя)
• bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
• middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
• sub - отображение происходит под строкой (выглядит как подстрочный индекс)
• super - отображение происходит над строкой (как верхний индекс)
• text-bottom - выравнивание нижней границы элемента по нижнему краю строки
• text-top - выравнивание верхняя границы элемента по верхнему краю строки
• top - выравнивание верхняя края элемента по верху самого высокого элемента строки
• inherit - наследует значение родителя
• значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
• проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

• baseline (для строчных элементов)
• middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге

используют атрибут valign .

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

• baseline - выравнивание по базовой линии первой текстовой строки
• bottom - выравнивание по нижнему краю ячейки таблицы
• middle - выравнивание по середине ячейки
• top - выравнивание верхнему краю ячейки

Например:

или

Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Примечание

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign ="VALUE "

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Выравнивание содержимого контейнера