Урок 5: Изучаем маркированный список в html | Бизнес блог Макса Метелева

11 января, 2014 Максим Метелев 12024 просмотров 1 комментарий

Всем хорошего вечера! Сегодня подготовил для вас полезную статью по теме что такое маркированный список в html, как его сделать и почему нужно его использовать в работе по созданию сайтов.

Прежде всего, хочу всех поздравить с Новогодними и Рождественскими праздниками, хорошо, если они у кого-то удались.

Всем желаю лошадиного терпения, здоровья и выносливости. Ну да ладно, отвлеклись немного. Итак, приступим.

Содержание

1 Маркированный список в HTML
2 Создание маркированного списка
3 Использование CSS в маркированных списках
- 3.1 Рекомендую ознакомиться с этими статьями:

Маркированный список в HTML

Во – первых, все наши документы в интернете и весь интернет — это в целом один большой каталог, в котором собрано большое количество самых разнообразных страниц. И вот пришли на помощь к нам любимые всем поисковики и начали тут разделять и властвовать, что в принципе хорошо.

Меньше плохих сайтов, больше хороших, качественных и полезных. Вы спросите, а причем тут вообще html списки и все эти «словобуквы» выше? Отвечу просто, они нужны для лучшего восприятия информации как человеками, так и роботами, которые любят, чтоб все было структурно, лаконично, грамотно и правильно.

Таким образом, сайты будут лучше ранжироваться в поисковых системах. Я вам говорил ранее, что все технические основы я буду объяснять также с позиции продвижения сайтов.

И тут самое время упомянуть про списки. Их существует 3 вида: маркированные, нумерованные и в виде определений. Я решил не объединять их всех в этой статье, позже объясню почему.

Создание маркированного списка

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

<ul></ul>

Теги эти парные, соответственно не забывайте их закрывать. UL переводится как UNORDERED LIST (неупорядоченный список)

Он отображается в браузере благодаря тегам li (list), которые тоже парные и являются элементами списка. В итоге наша конструкция будет выглядеть вот так

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Работа со списками</title>
</head>
<body>
        <ul>
                <li>Декабрь</li>
                <li>Январь</li>
                <li>Февраль</li>
        </ul>     

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Работа со списками</title>

</head>

<body>

<ul>

<li>Декабрь</li>

<li>Январь</li>

<li>Февраль</li>

</ul>

</body>

</html>

В браузере мы увидим вот это

Маркированный список в html

Как мы заметили, то маркированный список отображается в виде черных точек. Он может быть разных стилей и задаются они прямо внутри контейнера UL . Мы можем придать ему разную форму, например: диск, квадрат или изображение (галочка, либо буллет (в переводе пуля))

Сделаем список в виде квадрата. За это отвечает атрибут

<ul type="square">

1	<ul type="square">

Код:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Маркированный список в виде квадрата</title>
</head>
<body>
        <ul type="square">
                <li>Декабрь</li>
                <li>Январь</li>
                <li>Февраль</li>
        </ul>     

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Маркированный список в виде квадрата</title>

</head>

<body>

<li>Декабрь</li>

<li>Январь</li>

<li>Февраль</li>

</ul>

</body>

</html>

Получаем:

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

Следующий тип — круг (незакрашенный диск). За него отвечает атрибут

<ul type="circle">

1	<ul type="circle">

Код:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Список в виде незакрашенного диска</title>
</head>
<body>
        <ul type="circle">
                <li>Декабрь</li>
                <li>Январь</li>
                <li>Февраль</li>
        </ul>     

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Список в виде незакрашенного диска</title>

</head>

<body>

<li>Декабрь</li>

<li>Январь</li>

<li>Февраль</li>

</ul>

</body>

</html>

На выходе имеем следующий результат:

список в виде пустых дисков

Использование CSS в маркированных списках

Теперь разберем тот случай, когда мы хотим, чтобы наш список был в виде красивой галочки или «пули» (буллита). Мне понравилась следующая стрелочка

Маркированный список с буллитом стрелкой

У себя на компьютере я подготовил уменьшенный ее вариант 15×15 пикселей. Разместим ее, чтобы наш список отображался с ней. Здесь мы будем пользоваться элементами стиля css и вставим внутрь тега Ul следующую конструкцию

<ul style=”list-style-image:url(‘https://smarticle.ru/wp-content/uploads/2013/10/strelka.png’);”>

1	<ul style=”list-style-image:url(‘https://smarticle.ru/wp-content/uploads/2013/10/strelka.png’);”>

List-style-type это тип нашего стиля, url и ссылка – это источник откуда будет браться стиль. В нашем случае это картинка со стрелкой, которую я закачал к себе на сервер. Вы можете скопировать эту ссылку и прямо у себя в браузере увидеть итог. Не забывайте ставить одинарные кавычки и точку с запятой в конце и конечно закрывать все теги. Тогда все будет хорошо.

Код для вставки:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Использование стилей в маркированном списке</title>
</head>
<body>
        <ul style="list-style-image:url('/wp-content/uploads/2013/10/strelka.png');">
                <li>Декабрь</li>
                <li>Январь</li>
                <li>Февраль</li>
        </ul>     

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Использование стилей в маркированном списке</title>

</head>

<body>

<li>Декабрь</li>

<li>Январь</li>

<li>Февраль</li>

</ul>

</body>

</html>

В браузере получится вот так:

Очень красиво и стильно. Можно использовать в продающих текстах например на указание списка выгод и преимуществ. Если стрелка вам приглянулась, то скачать вы ее можете прямо из вложения в коде выше.

И наконец разберем тот случай, когда мы хотим использовать список html без маркеров, т.е оставить просто текст.

Здесь работает вот этот атрибут:

<ul type="none"> т.е у нашего списка нет стиля

1	<ul type="none"> т.е у нашего списка нет стиля

Полный код элемента:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Список без стиля</title>
</head>
<body>
        <ul type="none">
                <li>Декабрь</li>
                <li>Январь</li>
                <li>Февраль</li>
        </ul>     

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Список без стиля</title>

</head>

<body>

<li>Декабрь</li>

<li>Январь</li>

<li>Февраль</li>

</ul>

</body>

</html>

Должно получиться вот так:

Простой html список без стиля

На этом наш урок закончен.

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

[sociallocker id=»3259″][/sociallocker]