• Главная
  • Форум
    • Поиск по форуму
    • Список участников форума
  • Файлы
    • Фильмы
    • Игры
    • Программы
    • Музыка
    • Adobe
    • Вход Регистрация
    • Страница 1 из 1
    • 1
    Форум » Web-Мастеру » HTML » HTML - УРОК 7. СПИСКИ
    HTML - УРОК 7. СПИСКИ
    FragenerДата: Воскресенье, 19.02.2012, 00:25 | Сообщение # 1
    Группа: Администраторы
    Сообщений: 56
    Статус: Offline
    		Нумерованные списки

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

    Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.

    Пример кода для нумерованного списка:

    Code
    <html>

    <head>
    <title>html списки</title>
    </head>

    <body>

    <ol>
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ol>

    </body>

    </html>


    Результат:

    1.кошки
    2.собаки
    3.лошади

    Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:

    - type="A" - нумерация заглавными латинскими буквами (A, B, C).

    - type="a" - нумерация прописными латинскими буквами (a, b, c).

    - type="I" - нумерация большими римскими цифрами (I, II, III) .

    - type="i" - нумерация маленькими римскими цифрами (i, ii, iii).

    Пример кода с римскими цифрами:

    Code
    <html>

    <head>
    <title>html списки</title>
    </head>

    <body>

    <ol type="I">
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ol>

    </body>

    </html>


    Результат:

    I.кошки
    II.собаки
    III.лошади
    Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).

    Пример кода:

    Code
    <html>

    <head>
    <title>html списки</title>
    </head>

    <body>

    <ol type="I" start="3">
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ol>

    </body>

    </html>


    Результат:
    III. кошки
    IV. собаки
    V. лошади

    У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.

    Пример кода:

    Code
    <html>

    <head>
    <title>html списки</title>
    </head>

    <body>

    <ol>
    <li>красный</li>
    <li>оранжевый</li>
    <li>желтый</li>
    <br>...............
    <li value="7">фиолетовый</li>
    </ol>

    </body>

    </html>


    Результат:
    1. красный
    2. оранжевый
    3. желтый
    ...............
    7. фиолетовый

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

    В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.

    Пример кода для маркированного списка:

    Code
    <html>

    <head>
    <title>html маркированные списки</title>
    </head>

    <body>

    <ul>
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ul>

    </body>

    </html>


    Результат:

    кошки
    собаки
    лошади
    По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:

    - type="disc" - закрашенный кружочек.

    - type="circle" - пустой кружочек.

    - type="square" - закрашенный квадратик.

    Пример кода для маркированных списков:

    Code
    <html>

    <head>
    <title>html маркированные списки</title>
    </head>

    <body>

    <ul type="disc">
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ul>

    <ul type="circle">
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ul>

    <ul type="square">
    <li>кошки</li>
    <li>собаки</li>
    <li>лошади</li>
    </ul>

    </body>

    </html>


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

    Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>.

    Пример кода списка определений:

    Code
    <html>

    <head>
    <title>Списки определений</title>
    </head>

    <body>

    <dl>
    <dt>Термин 1</dt>
    <dd>Определение термина 1</dd>
    <dt>Термин 2</dt>
    <dd>Определение термина 2</dd>
    </dl>

    </body>

    </html>


    Результат:

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

    Пример кода многоуровневого списка:

    Code
    <html>

    <head>
    <title>Вложенные списки</title>
    </head>

    <body>

    <ul>
    <li>Животные
    <ol>
    <li>кошки</li>
    <li>собаки</li>
    </ol>
    </li>

    <li>Растения
    <ol>
    <li>деревья</li>
    <li>цветы</li>
    </ol>
    </li>
    </ul>

    </body>

    </html>


    Результат:

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


     
    DwightBymnДата: Среда, 05.02.2014, 20:17 | Сообщение # 2
    Группа: Гости





    		viagra pills look like <a href=http://dstvmediasales.com/sitemap.php?farm=viagra-is-it-safe>viagra is it safe</a> cock on viagra http://dstvmediasales.com/sitemap.php?farm=propecia-success-rate-hair-loss-treatment - propecia success rate hair loss treatment viagra vs viagra professional http://dstvmediasales.com/sitemap.php?farm=caverta-cialis-viagra-tadalis - caverta cialis viagra tadalis cialis by lilly
     
    DwightBymnДата: Пятница, 14.02.2014, 16:12 | Сообщение # 3
    Группа: Гости





    		generic name of zithromax <a href=http://www.rwuk.org/?product=propecia-covered-by-coverage>propecia covered by coverage</a> viagra and grapefruit interaction http://www.rwuk.org/?product=viagra-by-phone - viagra by phone viagra alternative natural http://www.rwuk.org/?product=price-of-levitra-in-canada - price of levitra in canada buy levitra fast

    Добавлено (14.02.2014, 16:12)
    ---------------------------------------------
    generic name of zithromax <a href=http://www.rwuk.org/?product=propecia-covered-by-coverage>propecia covered by coverage</a> viagra and grapefruit interaction http://www.rwuk.org/?product=viagra-by-phone - viagra by phone viagra alternative natural http://www.rwuk.org/?product=price-of-levitra-in-canada - price of levitra in canada buy levitra fast

    Добавлено (14.02.2014, 16:12)
    ---------------------------------------------
    generic name of zithromax <a href=http://www.rwuk.org/?product=propecia-covered-by-coverage>propecia covered by coverage</a> viagra and grapefruit interaction http://www.rwuk.org/?product=viagra-by-phone - viagra by phone viagra alternative natural http://www.rwuk.org/?product=price-of-levitra-in-canada - price of levitra in canada buy levitra fast

    Добавлено (14.02.2014, 16:12)
    ---------------------------------------------
    generic name of zithromax <a href=http://www.rwuk.org/?product=propecia-covered-by-coverage>propecia covered by coverage</a> viagra and grapefruit interaction http://www.rwuk.org/?product=viagra-by-phone - viagra by phone viagra alternative natural http://www.rwuk.org/?product=price-of-levitra-in-canada - price of levitra in canada buy levitra fast

     
    Форум » Web-Мастеру » HTML » HTML - УРОК 7. СПИСКИ
    • Страница 1 из 1
    • 1
    Поиск:

    Copyright InfoNation.ucoz.com 2025