Помогите мне. Я ничего не понимаю в курсе (((((( (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!! |
Списки HTML
Введение
Списки используются для объединения в группу связанных объектов информации, чтобы облегчить их ассоциирование друг с другом и чтение. В современной разработке Web списки являются основополагающими элементами, часто используемыми для навигации, а также обычного контента.
Списки хорошо подходят со структурной точки зрения, так как они помогают создать хорошо структурированный, более доступный, и простой в обслуживании документ. Они полезны также с чисто практических соображений — они предоставляют дополнительные элементы для соединения со стилями CSS для целого множества стилей оформления.
В этой лекции будут рассмотрены различные типы списков, доступных в HTML, когда и как их нужно использовать, и как применять некоторые базовые стили. Лекция имеет следующее содержание (кстати — список):
- Три типа списков
- Неупорядоченные списки
-
Упорядоченные списки
- Разметка упорядоченного списка
- Начало упорядоченных списков с числа, отличного от 1
- Списки определений
- Выбор типа списка
- Различие между списками HTML и текстом
- Вложенные списки
- Пошаговый пример
- Разметка основной страницы
- Добавление некоторых стилей
- Страница рецептов
- Разметка страницы рецептов
- Оформление страницы рецептов
- Заключение
- Дополнительное чтение
- Контрольные вопросы
Три типа списков
В HTML имеется три типа списков:
- Неупорядоченный список - используется для объединения в группу множества связанных объектов без определенного порядка.
- Упорядоченный список - используется для объединения в группу множества связанных объектов в определенном порядке.
- Список определений - используется для вывода пар имя/значение, таких как термины и их определения, или время и события.
Каждый из них имеет определенное назначение - они не являются взаимозаменяемыми!
Неупорядоченные списки
Неупорядоченные списки, или маркированные списки, используются, когда множество объектов может быть размещено в любом порядке. Примером является список покупок:
- молоко
- хлеб
- сливочное масло
- кофейные зерна
Однако все эти объекты являются частью одного списка, можно разместить объекты в любом порядке и список будет по-прежнему иметь смысл:
- хлеб
- кофейные зерна
- молоко
- сливочное масло
Можно использовать CSS для изменения маркера на один из нескольких используемых по умолчанию стилей, использовать свое собственное изображение, или даже вывести список без маркеров - мы посмотрим, как сделать это, немного позже в этой лекции, и расширим немного дальше в будущей лекции.
Разметка неупорядоченного списка
Неупорядоченные списки используют одну пару тегов <ul></ul>, охватывающих множество пар тегов <li></li>:
<ul> <li>хлеб </li> <li>кофе в зернах </li> <li>молоко </li> <li>масло </li> </ul>
Упорядоченные списки
Упорядоченные списки, или нумерованные списки, используются для вывода списка объектов, которые необходимо разместить в определенном порядке. Примером могут быть кулинарные инструкции по приготовлению, которые должны быть выполнены в определенном порядке рецепта:
- Собрать ингредиенты
- Смешать ингредиенты
- Поместить ингредиенты в форму для выпечки
- Выпекать в духовке в течение часа
- Вынуть из духовки
- Дать постоять десять минут
- Подать
Если список позиций переставить в другом порядке, то информация больше не будет иметь смысл:
- Собрать ингредиенты
- Выпекать в духовке в течение часа
- Вынуть из духовки
- Подать
- Поместить ингредиенты в форму для выпечки
- Дать постоять десять минут
- Смешать ингредиенты
Упорядоченные списки могут выводиться с помощью одной из нескольких цифровых или алфавитных систем — то есть с буквами или числами. По умолчанию в большинстве браузеров используются десятичные числа, но имеется большее количество возможностей.
- Буквы
- Буквы ascii нижнего регистра (a, b, c…)
- Буквы ascii верхнего регистра (A, B, C…)
- Классические греческие буквы нижнего регистра: ( , , …)
- Числа
Здесь также можно использовать CSS для изменения стиля списков.
Разметка упорядоченного списка
Упорядоченные списки используют одну пару тегов <ol></ol>, охватывающих множество пар тегов <li></li>:
<ol> <li>Собрать ингредиенты</li> <li>Смешать ингредиенты</li> <li>Поместить ингредиенты в форму для выпечки </li> <li>Выпекать в духовке в течение часа </li> <li>Вынуть из духовки</li> <li>Дать постоять десять минут </li> <li>Подать</li> </ol>
Начало упорядоченных списков с числа, отличного от 1
Можно создать упорядоченный список, нумерация которого начинается с числа отличного от 1 (или i, или I, и т.д.). Это делается с помощью атрибута start, который получает числовое значение, даже если используется CSS для изменения нумерации списка на алфавитную или римскую с помощью свойства list-style-type. Это будет полезно, если имеется единый список объектов, но вы хотите разбить список некоторыми примечаниями, или некоторой другой подходящей информацией. Например, можно было бы сделать это с предыдущим примером:
<ol> <li>Собрать ингредиенты </li> <li>Смешать ингредиенты </li> <li>Поместить ингредиенты в форму для выпечки </li> </ol> <p class="note">Прежде чем поместить ингредиенты в форму для выпечки, нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, чтобы быть готовым к следующему шагу </p> <ol start="4"> <li> Выпекать в духовке в течение часа </li> <li> Вынуть из духовки </li> <li> Дать постоять десять минут </li> <li> Подать </li> </ol>
Это приводит к следующему результату:
- Собрать ингредиенты
- Смешать ингредиенты
- Поместить ингредиенты в форму для выпечкиПрежде чем поместить ингредиенты в форму для выпечки, нагрейте духовку до 180 градусов по Цельсию /350 градусов по Фаренгейту, чтобы быть готовым к следующему шагу
- Выпекать в духовке в течение часа
- Вынуть из духовки
- Дать постоять десять минут
- Подать