Урок 3. Нумерованные и маркированные списки на HTML

Привет :)
Вчера мы учили форматировать текст, ну а сегодня я покажу как создавать списки на html. Берем нашу заготовочку и делаем небольшой список. Например список покупок на завтра. Значит завтра мне нужно в магазин и я хочу купить колбасу, сыр, хлеб, кетчуп и майонез. Составим список в html.

<!doctype html>
<html>
<head>
<title>Список покупок на завтра!</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Не забыть купить!!!</h1>
- колбаса
- сыр
- хлеб
- кетчуп
- майонез
</body>
</html>

Составили список, а теперь сохраняем и смотрим в браузере!

Все в одной строчке. Почему же? Потому что мы не указали что это список! Давайте сделаем это :)
Рассмотрим два виды списков, а именно нумерованные и маркированные.

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

Маркированный список обозначается открываемым и закрываемым тегами ul. Выглядит вот так:

<ul></ul>

ОБРАТИТЕ ВНИМАНИЕ!!! Это обозначение самого списка! А вот элементы списка мы будем обозначать тегами li. Давайте я наконец составлю список и мы посмотрим как он должен выглядеть.

<!doctype html>
<html>
<head>
<title>Список покупок на завтра!</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Не забыть купить!!!</h1>
<ul>
   <li>колбаса</li>
   <li>сыр</li>
   <li>хлеб</li>
   <li>кетчуп</li>
   <li>майонез</li>
</ul>
</body>
</html>

Собственно так должен выглядеть маркированный список! Но мы не проверили его в браузере. Давайте посмотрим!

Всё отлично! У нас появился список с маркерами (в следующих уроках я покажу как убрать маркеры и форматировать список).

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

С нумерованным списком всё очень просто. Просто меняем теги ul на теги ol :)
Вот таким образом:

<!doctype html>
<html>
<head>
<title>Список покупок на завтра!</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Не забыть купить!!!</h1>
<ol>
   <li>колбаса</li>
   <li>сыр</li>
   <li>хлеб</li>
   <li>кетчуп</li>
   <li>майонез</li>
</ol>
</body>
</html>

Теперь сохраняем и смотрим что поменялось!

Мы видим что со списками всё очень просто и двигаемся к следующему уроку :)
Если есть вопросы, задавайте в комментарии! Всегда рад помочь!!!

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>