Списки и линии в HTML

Вы сейчас здесь: Главная > Videos > Списки и линии в HTML

Посмотрев этот видеоурок, вы научитесь:

  • Создавать маркированные списки
  • Создавать нумерованные списки
  • Добавлять линии в текст

Скачать материалы:
Скачать 8-ой видеоурок по HTML Размер: 6.42 MB, скачали: 464 раз.
Скачать исходники к 8 видеоуроку по HTML Размер: 2.69 kB, скачали: 290 раз. 
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

В этом видеоуроке по языку HTML мы рассмотрим такие две темы, как «Списки» и «Линии».

Списки в HTML

Начнем со списков. Существует два типа списков:

  • Нумерованный
  • Маркированный

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

Давайте начнем разбирать маркированный список. Переходим в код. Открывает тег <ul> и закрываем тег </ul>.  Как вы видите, элементы списка отображаются в теге <li>, который не требует закрывающего тега.

 <ul >
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ul>

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

Как же сделать квадратики либо не закрашенные кружочки? Сделать это достаточно просто. Переходим в код и к тегу <li> добавляем атрибут type, что в переводе с английского  означает «тип».  Если использовать значение disk, то у нас будет закрашенный кружок, каким он и стоит по умолчанию. Если использовать значение circle, то у нас будет не закрашенный кружок. Если использовать значение square, то у нас будет квадрат.

 <ul >
 <li type="disk">Вы со мной согласны.
 <li type="circle">Вы со мной не согласны.
 <li type="square">Вы в замешательстве.
 </ul>

Сохраняем страницу, обновляем в браузере. Как мы видим, у нас есть и закрашенный кружок, и не закрашенный кружок, и квадрат. Если у нас будет много элементов в списке, то вводить для каждого атрибут type не будет удобно. Поэтому мы сейчас удалим все атрибуты и введет атрибут type в тег <ul>.

 <ul type="square">
 <li type="disk">Вы со мной согласны.
 <li type="circle">Вы со мной не согласны.
 <li type="square">Вы в замешательстве.
 </ul>

Сохраняем страничку. Обновляем. Теперь каждый элемент списка отображен рядом с квадратиком.

Теперь давайте рассмотрим нумерованный список. Он отличается от маркированного тем, что вместо тегов <ul></ul> используются теги <ol> </ol>. Атрибуты <li> существуют и там, и там. А вот атрибут type отличается. Введем те же значения в список. Атрибут type выставим «1».

 <ol type="1">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>

Переходим в браузер, проверяем. Как мы видим, список у нас пронумерован цифрами. Если же мы введем маленькую латинскую букву «a»:

 <ol type="a">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>

то в списке отображаются латинские буквы «a», «b», «c».

Если поставим большую букву «A»:

 <ol type="А">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>

То, соответственно, отображаться будут большие буквы латинского алфавита.

Также мы можем использовать римские цифры. Маленькая «i» — маленькие римские цифры

 <ol type="i">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>

Большая буква «I» — большие римские цифры.

 <ol type="I">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>

Линии в HTML

Теперь давайте поговорим о линиях. Линии обозначаются тегом <hr> и не требуют закрывающего тега.

<ul type="square">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ul>
 <hr >
 <ol type="I">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>

Сохраняем.  Проверяем в браузере. Как мы видим, на экране появилась линия.

Переходим обратно в код и зададим нашей линии атрибуты. Какие же атрибуты имеет тег <hr>?

  • Атрибут align, который мы уже проходили.
  • Атрибут size (толщина), который мы тоже уже проходили.
  • Атрибут color, о котором мы тоже ранее говорили.
  • Атрибут width (ширина линии). Значение может быть в процентах либо в пикселях.
  • Атрибут NoShade. Он означает то, что отменяется объемность линии.

Зададим все атрибуты и ширину укажем в процентах.

 <hr align="left" size="5" color="#0000FF" width="20%", NoShade>

Сохраняем. Обновляем страницу. Мы видим линию синего цвета, шириной 20%, расположенную с левого края, толщиной, равной 5 пикселей и с отмененной объемностью.

Включим объемность, убрав атрибут NoShade.

 <hr align="left" size="5" color="#0000FF" width="20%" >

Обновляем страницу. Объемность добавилась, но в нашем случае она очень плохо видна. Давайте поставим красный цвет и вместо процентов введем пиксели.

 <hr align="left" size="5" color="#СС0000" width="200" >

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

На этом мы заканчиваем данный видеоурок и подводим итог: мы рассмотрели маркированные списки, нумерованные списки и линии. Спасибо за внимание.

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

  • Составить 3 нумерованных списка
  • Составить 3 маркированных списка
  • Поэкспериментировать с линиями.

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

Похожее видео

Подпишись на info-line:

Получать новые уроки на e-mail:

7 комментариев на “Списки и линии в HTML”

  1. Надежда 18 января 2012 в 10:38 #

    Олег, как внутри элемента списка можно поместить 2 разных стиля текста (например, сначала дата обновления, потом ссылка на страницу), чтобы ячейка списка не разделилась на две?

    Ответить
    • Олег Зубцов 18 января 2012 в 11:23 #

      Как и с обычным текстом. Можно задать CSS-стили какой-то части элемента списка. 

      <ol type="1">
<li>Вы со мной согласны. <span style="color: #CCC;">12.01.2012</span></li>
<li>Вы со мной не согласны. <span style="color: #CCC;">16.01.2012</span></li>
<li>Вы в замешательстве. <span style="color: #CCC;">18.01.2012</span></li>
</ol>

      Ответить
  2. Надежда 18 января 2012 в 11:55 #

    Вот 3 варианта вставки даты (каждый вариант — 1 пункт списка):

    1 — как ты написал,

    2 — через класс в css 

    span .data { font-size: 8px;}

    и 3 — вообще без тегов: 

    	
<li>	
<span style="font-size: 9px; font-color: #000;"> 30.12.2011 </span> <a href="#">Новость1</a>
</li>
<li>
<span class="data"> 10.01.2012 </span> <a href="#">Новость2</a>
</li>
<li>
18.01.2012<a href="#">Новость3</a>
</li>

    А в итоге получается так (нужно открыть меню Обновления, чтобы увидеть результаты):

    http://adelgeim2010.narod.ru/proba3/index.html

    т.е. на 2 строчки разбивается пункт списка, и вручную вбивать каждый раз стили для даты не очень удобно.

    Хочется в 1 строчку пристроить — и дату, и саму ссылку.

    Ответить
    • Олег Зубцов 18 января 2012 в 12:49 #

      У вас есть такой стиль: 

      ul li a {
display: block;
}

      Он означает, что ссылка будет блочным элементом и занимать всю линию. Вам нужно сделать ссылку встроенным элементом. (Подробнее про блочные и встроенные элементы) 

      ul li a {
display: inline;
}

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

      вручную вбивать каждый раз стили для даты не очень удобно.

      Не труднее, чем добавлять новый пункт меню. Можете брать дату в теги <time></time> или им подобные, а в файле стилей указывать стили для этого тега.

      Ответить
      • Надежда 18 января 2012 в 13:39 #

        Попробовала display: inline; — получила разную длину пунктов меню в зависимости от длины слов, оставила block.

        Воспользовалась советом и добавила в ссылку — получилось то, что надо. =)

        Спасибо!

        Ответить
        • валерий 27 мая 2013 в 20:55 #

          Олег здравствуйте!спасибо огромное за Ваши уроки!

          При проверке на валидность выдается ошибка в которой говориться что в данном теге нельзя задавать цвет линии

          Проверка Выход: 1 ошибка

          Строка 40, столбец 47 : нет атрибут «цвет»

          Ответить
          • Олег Зубцов 14 июня 2013 в 4:54 #

            Можно код данной строки?

            Как я понимаю, Вы не задали атрибут «color» какому-либо тегу.

Оставить ответ