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

Всего в html можно задать 4 типа выравнивания: по левому краю, по правому краю, по центру, по ширине. Чтобы задать тип выравнивания нужно параметру align тега <p> присвоить одно из значений:

• left (выравнивание по левому краю),

• right (выравнивание по правому краю),

• center (выравнивание по центру),

• justify (выравнивание по ширине).

Вот примеры текста с различным типом выравнивания:

по левому краю	по правому краю	по центру	по ширине
<p align="left">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>	<p align="right">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>	<p align="center">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>	<p align="justify">Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</p>
Результат в браузере
Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.	Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.

Т.к. по умолчанию задано выравнивание по левому краю, то в первом примере параметр align="left" можно не писать.

Для задания выравнивания по ширине существует еще один тег <center>:

<center>Хотя Карлсон и был лучшим в мире специалистом по паровым машинам, денатурат он наливал весьма неуклюже и даже пролил его, так что на полке образовалось целое денатуратное озеро.</center>

И в браузере текст отобразится по центру. Правда в таком случае утратится свойство параграфа: отступ сверху и снизу. Но ведь оно и не всегда требуется.

3. Списки.

• Маркированные списки

• Нумерованные списки

• Вложенные списки

• Списки определений

• Упражнение

Маркированные списки

Маркированные списки - это списки, в которых элементы списка отмечаются маркерами. Для установки маркированного списка используются теги <ul> и <li> Тег <ul> - unordered list (неупорядоченный список). Тег <li> - list item (элемент списка) Код, написанный таким образом

<ul> <li> Книги </li> <li> Электроника </li> <li> CD и DVD </li> </ul>

будет отображен на экране так:

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=... тега <ul>.

С помощью CSS можно задать в качестве маркера любое изображение. В этом случае следует помнить: при масштабировании текста при просмотре в браузере стандартные маркеры масштабируются вместе с ним, а изображения, используемые в качестве маркера, не масштабируются.

Нумерованные списки

Нумерованные (или упорядоченные) списки представляют собой списки из пронумерованных пунктов. Для установки нумерованного списка используется тег <ol> вместо <ul> Тег <ol> - ordered list (упорядоченный список). Самый простой список имеет следующий код:

<ol> <li> Выйдете на станции метро Войковская. </li> <li> Сядьте на троллейбус 57 маршрута.</li> <li> Выйдете на четвертой остановке. </li> <li> Перейдите дорогу. Я Вас буду ждать у киоска.</li> </ol>

На экране он отобразится так:

1. Выйдете на станции метро Войковская.          2. Сядьте на троллейбус 57 маршрута.          3. Выйдете на четвертой остановке.          4. Перейдите дорогу. Я Вас буду ждать у киоска.

Вид и тип нумерации зависит от параметров тега <ol>

Код HTML	Отображение на экране
<ol start="5">	Список начинающийся с пяти:     5. Желтый     6. Синий     7. Красный
<ol type="A">	Заглавные латинские буквы: Желтый Синий Красный
<ol type="a">	Прописные латинские буквы: Желтый Синий Красный
<ol type="I">	Cписок с римскими буквами: Желтый Синий Красный

Вложенные списки

Вложенный список - это список, размещенный внутри другого списка. Например, код

<ol> <li> Крупные города России:       <ul type="square">       <li> Москва       <li> Санкт-Петербург       </ul> <li> Крупные города Украины:       <ul type="square">       <li> Киев       </ul> </ol>

отобразится на экране так:  

Крупные города России: Москва Санкт-Петербург Крупные города Украины: Киев

Списки определений

Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl> ... </dl>, элемента определения термина <dt> ... </dt>, элемента определения описания <dd> ... </dd>. Код примера

<dl>       <dt>Пиксель</dt>       <dd>Элементарная цветная точка, совокупность которых образует изображение.</dd>       <dt>Экспозиция</dt>       <dd>Количественная мера световой энергии, падающая на светочувствительный элемент.</dd>       <dt>Диафрагма</dt>       <dd>Параметр, регулирующий количество света, который освещает матрицу.</dd> </dl>

отобразится в браузере так:

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