Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
  Апрель 2014   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery Урок 3. Списки


Урок 3. Списки

Здравствуй, уважаемый читатель.

Сегодня мы поговорим о списках. После прохождения урока вы поймете как они устроены и где их применять.


Это третья статья, посвященная изучению html. Перед прочтением данного урока рекомендую пройти предыдущие два:
Первый урок
Второй урок

Теория и практика

Списки используются когда вам необходимо что-то перечислить в тексте. Например списки используются при создании меню на сайте. Отступы слева, справа, снизу и сверху добавляются автоматически у списков.

Код для создания стандартного списка следующий:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul>
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
</body>
</html>

А вот так это будет выглядеть в браузере:

Списки в notepad++

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

Посмотрим сейчас это на примере:

Если сделать список со значением атрибута <ul type="disc"></ul>:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul type="disc">
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
</body>
</html>

В браузере мы увидим тот же список с кружочком:

Список с type=disc в Firefox

Если сделать список со значением атрибута <ul type="circle"></ul>:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul type="circle">
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
</body>
</html>

В браузере мы увидим список с пустым кругом:

Список со значением type=circle в Firefox

Если сделать список со значением атрибута <ul type="square"></ul>:

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul type="square">
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ul>
</body>
</html>

В браузере мы увидим список с квадратом в виде маркера:

Список со значением type=square в Firefox

Мы разобрались с маркерами списка. Но также списки могут быть нумерованными. Они очень удобны когда вам необходимо пронумеровать большой список, но вручную делать это очень долго, при этом еще можно сбиться. Нумерованный список задается с помощью тега <ol></ol>.

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ol>
        <li>Банан</li>
        <li>Яблоко</li>
        <li>Персик</li>
    </ol>
</body>
</html>

Как он будет выглядеть в браузере:

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

Также приведу пример вложенного списка. Возможно вам он понравится и вы будете его использовать.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Фрукты</p>
    <ul>
        <li>Бананы
            <ul>
                <li>100 р.</li>
                <li>200 р.</li>
            </ul>
        </li>
        <li>Яблоки
            <ul>
                <li>350 р.</li>
                <li>120 р.</li>
            </ul>
        </li>
        <li>Персики
            <ul>
                <li>210 р.</li>
                <li>300 р.</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Как он будет выглядеть в браузере:

Вложенные списки в браузере

Сегодня мы рассмотрели как создаются списки и малейшие модификации связанные с ними. Попробуйте всё прописать руками. Тогда вы лучше запомните их и будете помнить где и как их применить.

Больше практикуйтесь!
В избранное