Разделение на абзацы. Списки

Тег <P> позволяет произвести разделение текста на абзацы. Веб-браузеры отделяют абзацы друг от друга пустой строкой. Закрывающий тег </P> не обязателен.

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

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовки</title>
</head>

<body>
<p align="center">Абзац с выравниванием по центру</p>
<p align="left">Абзац с выравниванием по левому краю</p>
<p align="right">Абзац с выравниванием по правому краю</p>
<p align="justify">Абзац с выравниванием по ширине</p>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Cписки

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

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

Маркированный список помещают внутри пары тегов <UL> и </UL>. Перед каждым пунктом списка необходимо поместить одиночный тег <LI>.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Маркированные списки</title>
</head>

<body>
<ul>
<li>Первый пункт
<li>Второй пункт
</ul>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Тег <UL> имеет параметр type, позволяющий задать значок, которым помечаются строки списка. Параметр может принимать следующие значения:

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Маркированные списки</title>
</head>

<body>
<ul type="disc">
<li>Первый пункт
<li>Второй пункт
</ul>

<ul type="circle">
<li>Первый пункт
<li>Второй пункт
</ul>

<ul type="square">
<li>Первый пункт
<li>Второй пункт
</ul>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

Нумерованный список помещается в теги <OL> и </OL>. Перед каждым пунктом списка необходимо поместить одиночный тег <LI>.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нумерованный список</title>
</head>

<body>
<ol>
<li>Первый пункт
<li>Второй пункт
</ol>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Тег <OL> имеет два параметра:

 Тег <LI> также имеет параметр value, который позволяет изменять номер данного элемента списка.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нумерованный список</title>
</head>

<body>
<ol type="1">
<li>Первый пункт
<li value="5">Второй пункт
<li>Третий пункт
</ol>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

Для получения более сложной структуры можно вложить один список в другой.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нумерованный список</title>
</head>

<body>
<ol type="1">
<li>Первый пункт
<ol type="a">
<li>Второй пункт
<ul>
<li>Третий пункт
</ul>
</ol>
</ol>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.




  • Другие |

Похожие материалы по теме: Списки в HTML

назадвверхвперед
Rambler's Top100