Выпуск №4. Списки в HTML: ul, ol, dl

html cписки

Доброго времени суток, подписчики.

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

А поговорим мы сегодня про теги списков в HTML: ul, ol, dl.

В html поддерживается 3 вида списков: маркированные, нумерованные, список определений.

Начнем с маркированного списка.

ul — HTML-тег маркированного списка

Маркированный список создается с помощью закрывающегося тега <ul></ul>.

Внутри этого тега располагаются теги <li>, которые содержат каждый конкретный пункт списка.

Тег <li> закрывающийся тег, но может и не закрываться.

Пример можете посмотреть в файле lesson4.html, находящийся в архиве: Архив 4 урока

<ul>
<strong>Виды спорта</strong>
<li>Хоккей
<li>Футбол</li>
<li>Баскетбол
</ul>

Параметры тега <ul>:

<ul

compact — компактное представление списка;

type= disc — маркер — закрашенный кружок;

circle — маркер — не закрашенный кружок;

square - маркер — квадратик;

>

Параметр type можно также указывать для тега <li>, но действия только для конкретного пункта меню.

Допускается использование тега <img src…> вместо тега <li>. Смотрите результат в примере lesson4.html.

Настоятельно рекомендую Вам самим попрактиковаться.

<ul>
<strong>Виды спорта</strong>
<img src="galochka.jpg">Хоккей
<li>Футбол</li>
<li>Баскетбол
</ul>

ol — HTML-тег нумерованного списка

Нумерованный список создается при помощи тега <ol></ol>.

Внутри него располагаются теги <li>. Обязательных параметров у этих тегов нет.

Параметры тега<ol>:

<ol

compact — компактное представление списка;

type= A вид маркера — прописные латинские буквы;

I вид маркера — большие римские цифры;

i вид маркера — маленькие римские цифры;

1 вид маркера — арабские цифры (по умолчанию);

start=цифра - начальный номер нумерации;

>

Параметр тега <li> в нумерованном списке:

<li

type — можно указывать те же значения, что и для тега <ol>, только они действовать будут на 1 пункт списка;

value — конкретное значение нумерации ( все последующие отсчитываются от данного);

>

Пример:

<ol>
<strong>Виды спорта</strong>
<li type="i">Хоккей
<li type="I">Футбол</li>
<li>Баскетбол
</ol>
<ol start="8">
<strong>Виды спорта</strong>
<li >Хоккей
<li>Футбол</li>
<li>Баскетбол
</ol>

dl — HTML-тег списка определений

Список определений создается при помощи тега <dl></dl>. Внутри тега располагаются пары тегов <dt>(терин) и <dd> (определение), которые содержат конкретный термин и его определение соответственно. Параметров у тегов нет.

Пример:

<dl>
<dt>Солнце
<dd>Это звезда
</dl>

На сегодня, выпуск посвящённый HTML-тегам списков и определений, я заканчиваю.

Прошу Вас самостоятельно потренироваться, опираясь на файл lesson4.html.

Ссылка на скачивание файла : Архив 4 урока

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (41)

  1. elena

    Спасибо, Андрей! Все очень интересно, но, к сожалению, я мало что понимаю. Я когда-то, очень давно, как говорили раньше «на заре Советской власти» занималась программированием, но со временем отстала и теперь понимаю, что отстала безнадежно, но у меня растут два внука — вот им то Ваши уроки очень даже пригодятся, но и я не теряю надежды усвоить Ваши уроки (всю жизнь училась, так что этот навык не утрачен да и не может быть утрачен). Еще раз огромное спасибо. Бабаушка Лена (меня все так зовут).

  2. design

    Век живи, век учись! Всегда нужно, спасибо, Андрюха!!!!!!

  3. elena

    Спасибо, Андрей! Я стала боьше понимать… Но еще, на мой взгляд, недостаточно, чтобы выходить в сеть. С уважением, Елена Киселева,

  4. Александер

    интересно чем дальше тем интереснее спасибо

  5. Елена

    Андрей Спасибо большое!!! HTML списки получились маркированные, нумерованные! Все понятно!!! Прекрасный урок!СПАСИБО!!!

  6. Александр

    Для Елены первой!
    Чем старше за… Тем чаще начинаем жизнь сначала. Мне тоже за… Мои друзья все уже деды. Однако, благодаря Андрею и его курсу, я стал «крутой» дед в азах знаний самостоятельного сайтостроения. Я тоже раньше читал слово Браузер созвучно револьверу Маузер. Но теперь я знаю, что это встроенная программа… Александр Сергеевич.
    Андрею – персональное спасибо и низкий поклон.

  7. Наталия

    Экстрим для мозга блондинок!)))))))

  8. Виктор

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

    • Евгений Пархоменко

      Виктор, если Вы всё сделали правильно, то у Вас всё должно получиться.

      … здесь текст документа…

      Далее,необходимо правильно сохранить документ.
      В блокноте выбираете — файл- сохранить как — в строке имя файла пишете index.html (index.html — это главная страница сайта, которую будет выдавать поисковая машина) — сохранить. Дальше, создайте папку WEB, куда и поместите свой документ, а для изображений создайте папку images.

      Удачи!

  9. Евгений

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

  10. robert

    Здравствуйте Андрей ! все уроки отличные , данное время я пользуюсь редактором Notepad++.
    При набирании тегов в редакторе Notepad++ и после перехода на руский , чтобы набрать русский текст, выдает совсем непонятное, как исправить незнаю, может вы знаете. Как проверить в браузере то что написал !

    • RohViktor

      Андрей! Ответь же человеку!

    • Артур Степанян

      Ух, Роберт, ну ты задал здесь жару!

      Ясное дело, что не боги горшки обжигают! Главное, что ты что-то начал делать. Не останавливайся на достигнутом. Пробуй, ошибайся, набивай себе шишки. Не ошибается только тот, кто ничего не делает.

      Сходу никто тебе не ответит на этот вопрос. Это касается азов работы на компе. Слишком много причин могут вызвать эту ситуацию. Но в любом случает тереби Андрея! Так ему и надо! :)

      ЗЫ от меня слабенький совет. Посмотри, где найдёшь переход на кодировки. Поиграйся с ними, может быть кириллица и появится?

    • Andrey

      Notepad++
      Меню — Settings — Preference — New Document — (Format = Windows, Encoding = ANSI, Default Language = HTML)

  11. kattt

    Спасибо! Может и я свой стандартный юкозовский сайт сделаю интересным)

    • Андрей

      Что касается ЮКОЗОВСКИХ сайтов, то там у них несколько своеобразный код, в котором, как выражаются сами программисты: «черт-ногу сломит» :)
      Хотя, безусловно, с помощью html можно сделать сайт красивее и красочнее…

  12. mag

    Все четко и ясно. Спасибо.

  13. Tanuxa

    Спасибо, за урок!!! Всё понятно, вопросов никаких! :)
    Всё сделала и притом очень тщательно! :)

  14. Saul

    Здравствуйте Андрей ! все уроки отличные, только имеются некоторые вопросы.
    Например где то вычитал, что в тэге нежелательно использовать параметры compact и type.
    Ещё имею одно дополнение к тэгу , конструкцию использовать
    когда во всем списке используется нестандартный символ напр: □

    С уважением Saul

    P. S. извините за ошибки в письме

  15. Saul

    Здравствуйте Андрей ! все уроки отличные, только имеются некоторые вопросы.
    Например где то вычитал, что в тэге <ul> нежелательно использовать параметры compact и type.
    Ещё имею одно дополнение к тэгу , конструкцию <ul style=»list-style: none»> использовать
    когда во всем списке используется нестандартный символ напр: □

    С уважением Saul

    P. S. извините за ошибки в письме

    P. S. S. плохо записал тэги

  16. Валентин

    Привет, Андрей! Списки я знаю как делать,но всё равно новенькое у тебя увидел,- это окрашивание квадратиков и кружочков, списки можно перечислять не только арабскими цифрами, но и римскими, и буквами,причём можно заглавными и прописными,можно латиницей и кириллицей,

  17. сергей

    Спасибо!Это потруднее,для моего возраста, но интереснее.Мозги еще работают.

  18. Галина

    Большое спасибо за уроки. Я думала, что только я такая …, ну вообщем пока еще не все понятно, т.к. я то же за…, т.е. из прошлого века. Но надеюсь, что и до меня дойдет, еще не все потеряно, буду стараться.

  19. Илья

    Ошибка в тексте:

    «Внутри тега располагаются пары тегов (терин) и (определение)…»
    вместо
    «…(термин)…».

  20. nikolay

    Спасибо.

  21. Татьяна

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

  22. Диана

    Очередной урок пройден без вопросов. Материал изложен доступно.Всё получается. Мне очень помогает Ваш файл к каждому уроку, так как можно видеть, в чем сама допускаю ошибки. Спасибо, Андрей!

  23. Наиль

    Андрей вы сказали вопросы кидать на почту, а не задавать в комментариях…, Я отправил вопрос, вторые сутки НЕТ ОТВЕТА,—-(это что прикол своеобразный???)

  24. Станислав

    Спасибо за урок!

  25. Veter3472

    Молодец, уважаю

  26. Людмила

    спасибо за урок

  27. Роза

    Всё понятно. Спасибо за урок.

  28. виктор

    очень интересный материал, жду с нетерпением новый и большое Вам спасибо!

  29. светлана

    Благодарю все просто и понятно.Особенно,когда тебе показывают на примере.Супер.

  30. Elena

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

  31. Елена

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

  32. Любовь Островская

    На этом уроке застряла, сами списки получились, но значки не отобразились, искать ошибку надо

  33. Anatoliy

    Да в уроке ошибка! Неправильная работа картинок!

  34. Andrey

    В тексте очепятка :) (терин)

Добавить комментарий

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

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

Я не робот.

Spam Protection by WP-SpamFree