1.2.3 Создание списков
В HTML-документе существует четыре основных вида списков:
нумерованный
маркированный
вложенные списки
список определений
Фрагмент текста, представляющий список, заключается в тэги:
<OL> …. </OL> упорядоченный список (ordered list);
<UL> ….</UL> неупорядоченный список (unordered list);
< LI>….</LI> вложенные списки;
<DL>….</DL> список определений.
Список определений служит для создание списков типа «термин» - «описание». Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>.
Каждый элемент списка заключается в тэги <LI> ….</LI> (от английского list item). При выводе на экран элементы списка имеют отступ и начинаются с новой строки.
Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n>
TYPE= определяет вид нумерации, START= задаёт начальное значение первого элемента списка (независимо от типа указывается цифрой).
TYPE=A – маркеры в виде прописных латинских букв;
TYPE=a – маркеры в виде строчных латинских букв;
TYPE=I – маркеры в виде больших римских цифр;
TYPE=i – маркеры в виде маленьких римских цифр;
TYPE=1 – маркеры в виде арабских цифр (по умолчанию).
Тэг <UL> может иметь параметр:
<UL TYPE=disc|circle|square>
Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).
Тэг <LI> может иметь параметры:
<OL TYPE=disc|circle|squade>
или <OL TYPE=A|a|I|i|1 VALUE=n>
TYPE Вид маркера (см. <UL>) или счетчика (см.OL)
VALUE=n Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.
Создание документа html в текстовом редакторе Блокнот
Для того чтобы создать документ HTML в текстовом редакторе Блокнот необходимо выполнить следующие действия:
Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
Создать типовую структуру HTML - документа и ввести текст.
Рис. 1. Создание HTML - документа в текстовом редакторе Блокнот
Сохранить этот документ. При сохранении в качестве типа файла укажите «все файлы», в качестве имени файла first.html.
Закрыть блокнот. Найти файл first.html и открыть его с помощью интернет-браузера.
Рис. 2. Иллюстрация документа в интернет-браузере.
Порядок выполнения работы
Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .html в папке HTML. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.
Форматирование текста выполнить согласно номеру своего варианта.
Оформить отчет по лабораторной работе, который должен содержать: титульный лист и экранные формы, демонстрирующие выполнение работы.
Таблица 2
№ ва-ри-анта |
Форматирование текста документа |
|||
Заголовок страницы |
Цвет фона |
Кол-во абза-цев* |
Список |
|
1 |
2 |
3 |
4 |
5 |
1 |
выровнять по центру, полужирный шрифт, тип – Cooper Std Black |
аqua |
три |
маркированный, три компонента |
2 |
выровнять по центру, полужирный шрифт, тип – Cooper Std Black |
black |
три |
маркированный, три компонента |
3 |
выровнять по центру, полужирный шрифт, тип – Cooper Std Black |
blue |
четыре |
маркированный, три компонента |
4 |
выровнять по центру, жирный шрифт, тип– Times, цвет – синий |
fuchsia |
два |
маркированный, три компонента |
5 |
выровнять по центру, жирный шрифт, тип– Times, цвет – синий |
gray |
два |
маркированный, четыре компонента |
6 |
выровнять по правому краю, жирный шрифт, тип– Times, цвет – синий |
green |
два |
маркированный, четыре компонента |
Окончание таблицы 2
7 |
выровнять по центру, жирный шрифт, тип – Arial, цвет - зеленый |
lime |
четыре |
нумерованный, два компонента |
8 |
выровнять по центру, курсивный шрифт, тип – Arial, цвет - зеленый |
maroon |
три |
нумерованный, два компонента |
9 |
выровнять по центру, полужирный шрифт, тип – Arial, цвет - зеленый |
navy |
три |
нумерованный, три компонента |
10 |
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - черный |
olive |
четыре |
нумерованный, два компонента |
11 |
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - черный |
purple |
два |
нумерованный, четыре компонента |
12 |
выровнять по центру, курсивный шрифт, тип – Arial, цвет - черный |
red |
два |
нумерованный, четыре компонента |
13 |
выровнять по центру, курсивный шрифт, тип – Candara, подчеркивание |
silver |
четыре |
маркированный, два компонента |
14 |
выровнять по центру, курсивный шрифт, тип – Candara, подчеркивание |
teal |
три |
маркированный, три компонента |
15 |
выровнять по правому краю, курсивный шрифт, тип – Candara, подчеркивание |
white |
три |
маркированный, три компонента |
16 |
выровнять по правому краю, курсивный шрифт, тип – Candara, подчеркивание |
yellow |
три |
нумерованный, два компонента |
17 |
выровнять по правому краю, жирный шрифт, тип – Arial, подчеркивание |
navy |
три |
маркированный, три компонента |
18 |
выровнять по центру, курсивный шрифт, тип – Arial, цвет - красный |
olive |
два |
нумерованный, три компонента |
19 |
выровнять по центру, курсивный шрифт, тип – Cooper Std Black |
purple |
четыре |
маркированный, три компонента |
20 |
выровнять по центру, курсивный шрифт, тип – Tahoma, подчеркивание |
green |
три |
нумерованный, два компонента |
21 |
выровнять по центру, курсивный шрифт, тип – Arial, цвет - красный |
lime |
два |
маркированный, три компонента |
22 |
выровнять по центру, курсивный шрифт, тип – Cooper Std Black |
maroon |
четыре |
нумерованный, три компонента |
23 |
выровнять по центру, курсивный шрифт, тип – Latha, цвет - синий |
navy |
три |
маркированный, три компонента |
24 |
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - синий |
olive |
три |
нумерованный, два компонента |
25 |
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - синий |
purple |
три |
маркированный, три компонента |
26 |
выровнять по центру, курсивный шрифт, тип – Latha, цвет - синий |
red |
четыре |
нумерованный, три компонента |
27 |
выровнять по центру, курсивный шрифт, тип – Latha, цвет - красный |
silver |
четыре |
нумерованный, два компонента |
28 |
выровнять по центру, курсивный шрифт, тип – Latha, цвет - зеленый |
green |
четыре |
нумерованный, два компонента |
Примечания *- Цвета текста в абзацах, типы и размер шрифта должны быть различными. Выравнивание абзацев привести по разным краям документа.
Лабораторная работа №2
«Оформление HTML документа. Использование графики. Создание таблиц в HTML»
2.1 Цель работы
Изучить основные тэги, предназначенные для создания таблиц в html-документе, вставки изображений в html-документ и для их преобразования.
Оформление HTML-документа