Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Создание списков на HTML. Основы HTML для начинающих. Урок №8

07.09.2015


14:28


2837


пока нет


Создание списков на HTML. Основы HTML для начинающих. Урок №8

Создание списков на HTML. Основы HTML для начинающих. Урок №8

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

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

Чтобы создать маркированный список на HTML странице, нужно применить такие теги:

<ul>
<li>текст №1</li>
<li>текст №2</li>
</ul>

Разъяснение:

<ul></ul> - определяет маркированный список
<li></li> - определяет пункты маркированного списка.

Теперь пример:

<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul>
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>

Результат будет вот таким:

  • текст №1
  • текст №2

Получились закрашенные кружочки перед каждым элементом.

*  атрибуты маркированного списка

Теперь, если к тегу <ul> добавить атрибут «type» со значением «circle», то вместо закрашенных кружочков мы увидим не закрашенные кружочки:

<ul type="circle">

Пример:

<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul type="circle">
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>

Результат будет вот таким:

  • текст №1
  • текст №2

Если к тегу <ul> добавить атрибут «type» со значением «square», то вместо кружочков мы увидим закрашенные квадратики:

<ul type="square">

Пример:

<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul type="square">
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>

Результат будет вот таким:

  • текст №1
  • текст №2

○ Создать маркированный список  с двойным уровнем

Можно усложнить обычный маркированный список и сделать его сложным, двойным (можно и тройным и т.д.).
Итак, для создания маркированного списка с двойным уровнем нужно добавить к любому из элементов маркированного списка (<li>) новый код списка.
Смотри пример для лучшего понимания:

<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul>
<li>текст №1</li>
<li>текст №2
<ul>
<li>текст №3</li>
<li>текст №4</li>
</ul>
</li>
<li>текст №5</li>
</ul>
</body>
</html>

Обратите внимание на строку №8 и №9. Я вставил новый код списка между тегами <li></li>.

Результат будет вот таким:

  • текст №1
  • текст №2
    • текст №3
    • текст №4
  • текст №5

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

Чтобы создать нумерованный список на HTML странице, нужно применить такие теги:

<ol>
<li>текст №1</li>
<li>текст №2</li>
</ol>

Разъяснение:

<ol></ol> – определяет нумерованный список
<li></li> – определяет пункты нумерованного списка.

Теперь пример:

<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol>
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

атрибуты нумерованного списка

Если к тегу <ol> добавить атрибут «start» с любым цифровым значением, например «5», то нумерация начнется с указанного числа (по моему примеру начнется с 5):

<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol start="5">
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

Если к тегу <ol> добавить атрибут «type» со значением «A», то вместо цифр будут Большие буквы:

<ol type="A">

Пример:

<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol type="A">
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

Если к тегу <ol> добавить атрибут «type» со значением «a», то вместо цифр  или большой буквы будут маленькие буквы:

<ol type="a">

Пример:

<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol type="a">
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

Создание списка определений

Чтобы создать список определений на HTML странице, нужно применить такие теги:

<dl>
<dt>1. HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>2. CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

Разъяснение:

<dl></dl> – определяют HTML списки определений.
<dt></dt> – определяют определяемые термины.
<dd></dd> – определяют определения.

Теперь пример:

<html>
<head>
<title>Создание списка определений в HTML - StepkinBlog.ru</title>
</head>
<body>
<dl>
<dt>1. HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>2. CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
</body>
</html>

Результат будет вот таким:

1. HTML
Гипертекстовый язык разметки
2. CSS
Каскадные таблицы стилей

На сегодня это все! Подписывайтесь на обновление моего блога! Не пропустите новых уроков по основам HTML.
Удачи!



Случайные записи:

  1. Тесты CSS онлайн. Основы CSS для начинающих
  2. Коды цветов в HTML. Основы HTML для начинающих. Урок №11
  3. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  4. Основы bootstrap для начинающих. Урок №1
  5. Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245