Урок 5: Делаем маркированный список в HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Код:

Получаем:

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

Код:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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