Презентация на тему "HTML списки"
Cкачать презентацию: Презентация на тему "HTML списки"
Презентация по слайдам:
Слайд #1
HTML списки
Ефременко Мария Александровна
Слайд #2
Списки представляют собой упорядоченный набор значений, который помогает нам систематизировать важную информацию, делая ее более доступной для понимания.
Язык гипертекстовой разметки HTML позволяет составлять списки по следующим правилам:
Нумерованный (упорядоченный) список
Маркированный (неупорядоченный) список
Список описаний
Слайд #3
Нумерованный список
Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского orderedlist - упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).
Слайд #4
Давайте рассмотрим примеры использования:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования тега<ol></title>
</head>
<body>
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
</body>
</html>
Выглядеть на странице это будет соответственно так:
Слайд #5
Чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.
Например:
<ol start = "101"> <!--список начнётся с номера 101-->
Выглядеть на странице это будет соответственно так:
101. Первый пункт
102. Второй пункт
103. Третий пункт
Ещё один интересный атрибут - type, который позволяет задать буквенную нумерацию ("A" – большие, "a" – строчные), либо нумерацию из римских цифр ("I" – в верхнем регистре, "i" – в нижнем регистре).
Рассмотрим пример в котором представлены все возможные значения атрибута type :
Слайд #6
<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута type HTML тега <оl></title>
</head>
<body>
<ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
Слайд #7
<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
</body>
</html>
Слайд #8
Результат нашего примера:
Еще один нюанс: при использовании атрибута start с буквами (type = "A" и type = "a"), число, указанное в значении атрибута является порядковым номером буквы в алфавите.
Например, start = "4", будет соответствовать букве "D" и список начнётся именно с неё.
Слайд #9
Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Вложенные списки</title>
</head>
<body>
<ol>
<li>Первый пункт
<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>
</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>
Слайд #10
Атрибут reversed элемента позволяет задать порядок в нумерованном (упорядоченном) списке по убыванию. Синтаксис: <ol reversed>
Пример использования
<!DOCTYPE html>
<html>
<head>
<title> Название документа </title>
</head>
<body>
<p>Нумерованный(упорядоченный) список по умолчанию:</p>
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
<p>Нумерованный(упорядоченный) список с атрибутом reversed:</p>
<ol reversed>
<li>Первыйпункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</оl>
</body>
</html>
Слайд #11
Слайд #12
Маркированный список
Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li>.
По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.
<!DOCTYPE html>
<html>
<head>
<title>Пример использования элемента <ul></title>
</head>
<body>
<ul>
<li>Светлое</li>
<li>Тёмное</li>
<li>Пятница</li>
</ul>
</body>
</html>
Слайд #13
Для изменения типа маркера (стиля) можно воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера.
Возможные значения свойства:
Слайд #14
Пример использования стилей CSS внутри маркированного списка:
<!DOCTYPE html>
<html>
<head>
<title>Пример изменения типа маркера маркированного списка</title>
</head>
<body>
<ul style = "list-style-type:none"> <!—маркер отсутствует -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul style = "list-style-type:disc"> <!-- маленький черный круг -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
Слайд #15
<ul style = "list-style-type:circle"> <!—круг пустой внутри -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<ul style = "list-style-type:square"> <!—маркер в форме квадрата -->
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
Слайд #16
Результат нашего примера:
Допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка <li>), при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:
Слайд #17
Список описаний(определений)
Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.
Тэг <dl> (HTML Description List Element) определяет список, тэг <dt> (HTML Definition Term Element) определяет его имя, а тег <dd> (HTML Description Element) описывает его значение.
<!DOCTYPE html>
<html>
<head>
<title>HTML список определений</title>
</head>
<body>
<dl>
<dt>Жамевю</dt>
<dd>состояние, противоположное дежавю, внезапно наступающее ощущение того, что хорошо знакомое место или человек кажутся совершенно неизвестными или необычным.</dd>
<dt>Фасцинация</dt>
<dd>повышение эффективности воспринимаемого материала через использование сопутствующих (фоновых) воздействий.</dd>
</dl>
</body>
</html>
Слайд #18
Значение списка описаний (элемент <dd>) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям.
Также допускается формировать списки описаний, вложенные в другие списки описаний (внутри элемента значения списка <dd>) .
Слайд #19
Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее.
