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

ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

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

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

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

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

  • сenter — выравнивание по центру;
  • left — выравнивание по левому краю (по умолчанию);
  • right — выравнивание по правому краю;
  • justify — выравнивание по ширине (двум сторонам).

Пример:

<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>, позволяющий задать значок, которым помечаются строки списка. Параметр может принимать следующие значения:

  • disс — значки в форме кружков с заливкой;
  • circle — значки в форме кружков без заливки;
  • square — значки в форме квадрата с заливкой.

Пример:

<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> имеет два параметра:
  1. type —первый параметр, позволяет задать формат, которым нумеруются строки списка. Может принимать следующие значения:
    • A — пункты нумеруются прописными латинскими буквами;
    • Пример:

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

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

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

    • а — пункт нумеруется строчными латинскими буквами;
    • Пример:

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

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

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

    • I — пункт нумеруется римскими цифрами;
    • Пример:

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

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

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

    • i —пункты нумеруются строчными римскими цифрами;
    • Пример:

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

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

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

    • 1 — пункты нумеруются арабскими цифрами (по умолчанию);
    • Пример:

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

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

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

  2. start — второй параметр, задает номер с которого будет начинаться нумерация строк.
  3. Пример:

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

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

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

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

    <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>

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