Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером,
даже если вы впервые слышите это слово



Создаем нумерованный список в html на живом примере



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

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

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

  1. Заходим в программу
  2. Открывем меню «Файл».
  3. Нажимаем «Сохранить».

Что-то типа того. Ну да ладно. Давайте лучше посмотрим как это всё делается в html.

<OL><LI>

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

Как вы уже поняли, нумерованный список заключается в парный тег <ol></ol>, что означает Ordered list, то есть упорядоченный список.

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

<ol>  <li>Помыть посуду</li>  <li>Вынести мусор</li>  <li>Захватить мир</li>  </ol>

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

Атрибуты

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

type

Атрибут type, как и в предыдущем примере, служит для изменения типа маркера. Только если там мы меняли точки, то здесь цифры. Давайте посмотрим, как это происходит.

<ol type="A"> — список идет не по цифрам, а по заглавным (Прописным) буквам латинского алфавита по порядку.

<ol type="a"> — То же самое, только все пункты будут обозначаться маленькими (строчными) буквами латинского алфавита.

<ol type="I"> — Нумерация будет вестись римскими цифрами

<ol type="i"> — Нумерация будет вестись строчными римскими цифрами

Давайте сделаем четыре одинаковых списка, но с разными значениями атрибута type и сохраним этот документ.

Смотрим, что у нас получилось в итоговом варианте. Ну что? По моему всё круто. Как и должно было быть).

start

Атрибут start позволяет задать нам начало нумерации. Да, бывают такие случаи, когда вам не нужно вести список с самого начала или где-то был обрыв и нам нужно продолжить с определенного места. Тогда вам этот атрибут может очень пригодиться. Тем более он действует на все значения атрибута type.

<ol start="5"> — Все начнется сразу с пятого пункта

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

Вот так всё должно получиться. Вроде всё просто. Правильно я говорю?)

Конечно есть и еще некоторые атрибуты, но я уверяю, они вам не понадобятся. А вообще я надеюсь, что вам статья понравилась и была понятна. Хотя если вдруг что-то непонятно, то обязательно спрашивайте, не стесняйтесь).

Кроме того вообще хотел бы порекомендовать вам один замечательный видеокурс по верстке сайтов на HTML5 и CSS3 с полного нуля до профи. Этот курс действительно замечательный и великолепно построен. Здесь рассматривается несколько примеров верстки рзличных типов сайтов и объясняется всё буквально на пальцах. В общем вещь стоящая и я вам ее очень рекомендую.

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

С уважением, Дмитрий Костин.

 



Этот блог читают уже более 4000 человек, которые решили покончить с компьютерной неграмотностью. Присоединяйся
Комментариев 4
  • Спасибо за статью, вроде как получилось реализовать у меня на своем сайте такой список.

    Андрей
    17 июня 2016 в 12:27
  • Все очень подробно описано, думаю если начнешь делать уже ни каких вопросов не возникнет!!

    Ольга
    18 июня 2016 в 10:52
    • Спасибо вам за отзыв)

      Дмитрий
      18 июня 2016 в 11:48
  • Дмитрий, сам по себе html завлекателен, от него трудно оторваться, если начнешь заниматься. И чем больше пишешь «на коленке» в блокноте. тем быстрее все усваиваешь. Я в свое время изучала курс жени Попова, у меня была куча сайтов индекс html под разными номерами. И все дело в том, что здесь ничего сложного нет. Вставляла таблицы — это вообще потрясно, раскрашивала их в разные цвета — изучала курс Володи Бывалова. У нас погода... зашибись: был ливень с градом, потом жара понеслась, сегодня вообще под +40. Уже вечер, температура начала снижаться потихоньку, но мает только так.

    Надежда
    20 июня 2016 в 21:40
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:


Блог Дмитрия Костина
© 2015-2017 Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово