ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ ГОРОДА МОСКВЫ
ГБОУ СПО ПОЛИТЕХНИЧЕСКИЙ КОЛЛЕДЖ № 39
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
к практической работе № 31
«Использование списков в HTML- документе.
Вставка графики».
дисциплины «Информатика и ИКТ»
для групп первого курса СПО
технический профиль
Тема: Использование списков в HTML- документе. Вставка графики.
Цель занятия: научиться создавать нумерованные, маркированные, вложенные списки, размещать на web-странице изображения. Выравнивать изображения. Задавать фоновый рисунок web-страницы.
Общие сведения
Списки
В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists <UL>), нумерованный список (упорядоченный) (Ordered Lists <OL>) и список определений (<DL>).
Маркированный список
Записывается данный список при помощи тега <UL>:
<UL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Последний элемент списка</LI>
</UL>
Теги <UL> и </UL> являются своеобразным обрамлением списка. Он позволяет отделить один список от другого. Тег <LI> (List Item) обозначает каждый из пунктов списка. Конечный тег </LI> не является обязательным.
Для тега <UL> предусмотрен атрибут type, определяющий вид маркера, который браузер помещает перед каждым элементом списка. Этот атрибут может отсутствовать или принимать одно из трех значений:
Начальный тег |
|
Вид метки на экране |
<UL> |
|
Обычный диск (зависит от браузера) |
<UL type=circle> |
○ |
Окружность |
<UL type=disc> |
● |
Диск |
<UL type=square> |
▫ |
Квадрат |
Нумерованный список
Нумерованный список задается при помощи тега <OL>:
<OL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Последний элемент списка</LI>
</OL>
Конечный тег </LI> не является обязательным.
Вид номера определяется значением атрибута type в теге <OL>:
Начальный тег |
Вид номера на экране |
<OL> |
Нумерация выполняется арабскими цифрами (1, 2, 3 и т.д.) |
<OL type=1> |
Нумерация выполняется арабскими цифрами (1, 2, 3 и т.д.) |
<OL type=А> |
Нумерация выполняется прописными буквами (А, В, С и т.д.) |
<OL type=а> |
Нумерация выполняется строчными буквами (a, b, c и т.д.) |
<OL type=I> |
Нумерация выполняется большими римскими цифрами (I, II, III) |
<OL type=i> |
Нумерация выполняется малыми римскими цифрами (i, ii, iii) |
Естественную нумерацию элементов списка (с единицы) можно изменить при помощи атрибута start=n. Число n задает начальное значение нумерации. Если для нумерации используются буквы или римские цифры, то стартовое значение равно n-му элементу в системе нумерации (например, 4 означает D или IV).
Пример:
Для элемента <LI> может быть использован атрибут value, который определяет номер для текущего пункта списка:
value=номер
Соответственно, следующий пункт списка будет иметь очередной номер и т.д. При помощи атрибута value, если использовать его для первого в списке элемента <LI>, можно добиться такого же эффекта, что и при помощи атрибута start, или нарушить последовательность номеров, если переопределить другие элементы списка.
Вложенные списки
Еще один способ создания сложных списков – использование принципа вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список. Вложенный список располагается с небольшим отступом вправо относительно списка верхнего уровня. Каждый из списков может быть создан и отлажен отдельно, а затем все составляющие могут быть объединены в один большой список.
Пример:
|
|
В примере нумерованные списки размещены внутри пунктов ненумерованного списка.