StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
07.09.2015
14:28
7282
пока нет
Создание списков на 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
- текст №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
- текст №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
- текст №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
- текст №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.
Удачи!