Всем хорошего вечера! Сегодня подготовил для вас полезную статью по теме что такое маркированный список в html, как его сделать и почему нужно его использовать в работе по созданию сайтов.
Прежде всего, хочу всех поздравить с Новогодними и Рождественскими праздниками, хорошо, если они у кого-то удались.
Всем желаю лошадиного терпения, здоровья и выносливости. Ну да ладно, отвлеклись немного. Итак, приступим.
Содержание
Во – первых, все наши документы в интернете и весь интернет — это в целом один большой каталог, в котором собрано большое количество самых разнообразных страниц. И вот пришли на помощь к нам любимые всем поисковики и начали тут разделять и властвовать, что в принципе хорошо.
Меньше плохих сайтов, больше хороших, качественных и полезных. Вы спросите, а причем тут вообще html списки и все эти «словобуквы» выше? Отвечу просто, они нужны для лучшего восприятия информации как человеками, так и роботами, которые любят, чтоб все было структурно, лаконично, грамотно и правильно.
Таким образом, сайты будут лучше ранжироваться в поисковых системах. Я вам говорил ранее, что все технические основы я буду объяснять также с позиции продвижения сайтов.
И тут самое время упомянуть про списки. Их существует 3 вида: маркированные, нумерованные и в виде определений. Я решил не объединять их всех в этой статье, позже объясню почему.
Итак, первый вид обозначается следующим образом
1 |
<ul></ul> |
Теги эти парные, соответственно не забывайте их закрывать. UL переводится как UNORDERED LIST (неупорядоченный список)
Он отображается в браузере благодаря тегам li (list), которые тоже парные и являются элементами списка. В итоге наша конструкция будет выглядеть вот так
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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> |
В браузере мы увидим вот это
Как мы заметили, то маркированный список отображается в виде черных точек. Он может быть разных стилей и задаются они прямо внутри контейнера UL . Мы можем придать ему разную форму, например: диск, квадрат или изображение (галочка, либо буллет (в переводе пуля))
Сделаем список в виде квадрата. За это отвечает атрибут
1 |
<ul type="square"> |
Код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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> |
Получаем:
Следующий тип — круг (незакрашенный диск). За него отвечает атрибут
1 |
<ul type="circle"> |
Код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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> |
На выходе имеем следующий результат:
Теперь разберем тот случай, когда мы хотим, чтобы наш список был в виде красивой галочки или «пули» (буллита). Мне понравилась следующая стрелочка
У себя на компьютере я подготовил уменьшенный ее вариант 15×15 пикселей. Разместим ее, чтобы наш список отображался с ней. Здесь мы будем пользоваться элементами стиля css и вставим внутрь тега Ul следующую конструкцию
1 |
<ul style=”list-style-image:url(‘https://smarticle.ru/wp-content/uploads/2013/10/strelka.png’);”> |
List-style-type это тип нашего стиля, url и ссылка – это источник откуда будет браться стиль. В нашем случае это картинка со стрелкой, которую я закачал к себе на сервер. Вы можете скопировать эту ссылку и прямо у себя в браузере увидеть итог. Не забывайте ставить одинарные кавычки и точку с запятой в конце и конечно закрывать все теги. Тогда все будет хорошо.
Код для вставки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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('https://smarticle.ru/wp-content/uploads/2013/10/strelka.png');"> <li>Декабрь</li> <li>Январь</li> <li>Февраль</li> </ul> </body> </html> |
В браузере получится вот так:
Очень красиво и стильно. Можно использовать в продающих текстах например на указание списка выгод и преимуществ. Если стрелка вам приглянулась, то скачать вы ее можете прямо из вложения в коде выше.
И наконец разберем тот случай, когда мы хотим использовать список html без маркеров, т.е оставить просто текст.
Здесь работает вот этот атрибут:
1 |
<ul type="none"> т.е у нашего списка нет стиля |
Полный код элемента:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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> |
Должно получиться вот так:
На этом наш урок закончен.
Предлагаю вашему вниманию видео шпаргалку, которую я записал для большей наглядности и усвояемости материала. Не забываем делиться со всеми друзьями полезными урокам на этом сайте через социальные сервисы. Всем удачи и берегите себя.
[sociallocker id=»3259″][/sociallocker]