Списки
Довольно часто в тексте html-документа приходится перечислять какие-либо объекты или давать определения понятий. В таких случаях можно пользоваться средствами HTML для организации списков. В HTML имеется 3 вида списков:
1. Нумерованный список. Каждый элемент такого списка имеет номер, который браузер проставит автоматически. По умолчанию первый элемент списка имеет номер 1, второй — 2 и т.д.
Тег <OL> (ordered list — нумерованный список) используется для вставки нумерованного списка. Перед тем как записывать очередной элемент списка, нужно вставлять непарный тег <LI> (list item — элемент списка): Общая структура списка имеет такой вид: <OL> <LI>Первый элемент <LI>Второй элемент … <LI>Последний элемент </OL> |
Задание
- Откройте программу Блокнот и наберите текст HTML – документа:
<HTML>
<HEAD>
<TITLE>Простейший нумерованный список</title>
</head>
<BODY>
<B><I>3 вида списков в HTML:</i></b>
<OL>
<LI>Нумерованный
<LI>Маркированный
<LI>Список определений
</ol>
</body>
</html>
- Сохраните этот файл под именем Нумерованный список.htm в папке HTML.
- Откройте сохраненный файл в окне программы Internet Explorer. Какими цифрами пронумерован список?
Кроме арабских цифр можно использовать римские, а также большие или малые латинские буквы.
Атрибут TYPE тега <OL> используется для указания способа нумерации. Этот атрибут может принимать одно из четырёх значений: 1 — арабские цифры, i или I — римские цифры, a — малые латинские буквы, A — большие латинские буквы. Тег <OL TYPE=a> обеспечивает нумерацию малыми латинскими буквами |
Задание
- Создайте файл, который содержит следующий текст:
Нумерация арабскими цифрами
3 вида списков в HTML:
1.Нумерованный
2.Маркированный
3.Список определений
- Страничку назовите «Списки». Сохраните файл под именем Арабская нумерация.html.
- Исправьте таким образом, чтобы список нумеровался римскими цифрами. Сохраните файл под именем Римская нумерация.html. Откройте сохраненный файл в окне программы Internet Explorer.
- Исправьте таким образом, чтобы список нумеровался малыми латинскими буквами. Сохраните файл под именем Малые латинские буквы.html. Откройте сохраненный файл в окне программы Internet Explorer.
- Исправьте таким образом, чтобы список нумеровался большими латинскими буквами. Сохраните файл под именем большие латинские буквы.html. Откройте сохраненный файл в окне программы Internet Explorer.
Атрибут START тега <OL> используется при необходимости начать нумерацию элементов списка не с 1, а с произвольного номера. <OL TYPE=1 START=5> (первый номер — 5). Этот атрибут работает только в случае нумерации арабскими цифрами. |
Задание
1. Откройте файл Арабская нумерация.html.
2. Измените его содержимое так, чтобы список начинался не с 1, а с 10.
3. Сохраните файл под тем же именем.
2. Маркированный список. Иногда нумерация бывает не важна, но выделить для читателя отдельные элементы списка необходимо. В этом случае перед каждым элементом списка ставится небольшой значок (маркер), обычно это круг, квадрат и т. п.
Тег <UL> используется для вставки маркированного списка, внутри которого также как для нумерованных списков перечисляются элементы с помощью тегов <LI>. Тип маркера указывается в атрибуте TYPE тега <UL>. Возможно 3 вида маркеров: DISC — круг, CIRCLE — окружность, SQUARE — квадрат. Пример <UL TYPE=SQUARE> - маркер – квадрат. |
Задание
1. Создайте файл
Маркер - круг
В качестве маркера можно использовать:
- Круг
- Окружность
- Квадрат
2. Сохраните файл под именем Маркировка кругами.html.
3. Исправьте таким образом, чтобы список маркировался окружностями. Сохраните файл под именем Маркировка окружностями.html. Откройте сохраненный файл в окне программы Internet Explorer.
4. Исправьте таким образом, чтобы список маркировался квадратами. Сохраните файл под именем Маркировка квадратами.html. Откройте сохраненный файл в окне программы Internet Explorer.
5. Исправьте таким образом, чтобы список маркировался всеми тремя способами. Сохраните файл под именем Различные маркеры.html. Откройте сохраненный файл в окне программы Internet Explorer.
3. Списки определений. Этот вариант применяется в том случае, когда каждый элемент списка состоит из двух частей: термина (понятия и т. п.) и его определения (расшифровки).
Для вставки списка определений используется контейнер <DL>. Каждый элемент записывается с использованием двух тегов: <DT>Термин<DD>Его определение. Пример: <DL> <DT>Нумерованный список <DD>состоит из отдельных элементов, каждый из которых имеет свой номер. </DL> |
Задание
1. Создайте список определений:
Нумерованный список
состоит из отдельных элементов, каждый из которых имеет свой номер. Номера расставляются браузером автоматически.
Маркированный список
каждый элемент такого списка выделен с помощью небольшого значка, называемого маркером. Маркеры бывают трех видов: круг, квадрат и окружность.
Список определений
каждый элемент состоит из названия термина и его определения или расшифровки.
2. Сохраните файл под именем Список определений.html.
3. Откройте сохраненный файл в окне программы Internet Explorer.
4. Многоуровневый м аркированный список. Этот вариант списка используется тогда, когда необходимо создать иерархию.
Например:
Список покупок:
§ Мясо
· 250 г. телятины
· 250 г свинины
§ Овощи
· 1 кг огурцов
· 1 кг лука
Чтобы создать такой список необходимо внутри одного тега <UL> ввести еще один такой же тег. Программа будет выглядеть следующим образом:
Список покупок<br>
<UL>
<li>Мясо
<ul>
<LI>250 г свинины
<LI>250 г телятины
</ul>
</ul>
Задание
1. Создайте многоуровневый маркированный список с текстом, приведенным в примере.
- Сохраните его и просмотрите в окне программы Internet Explorer.
- Исправьте сохраненный файл таким образом, чтобы список стал многоуровневым нумерованным. Сохраните его и просмотрите в окне программы Internet Explorer.
5. Используя несложный прием, в качестве вводного символа элемента списка можно использовать любую графику. С этой целью элемент <li> следует заменить на тег <img>, с указанием пути к используемому в качестве вводного символа рисунку.
Например, <img src=X:\Labs\alt\WEB\computer.gif> мост через озеро<br>
Задание
- Создайте файл, который содержал бы следующий текст:
Компьютерное оборудование:
Монитор
Системный блок
Клавиатура
Обратите внимание, что путь к файлу должен быть прописан полностью!!!
- Сохраните его под именем Графическая маркировка.html. Откройте сохраненный файл в окне программы Internet Explorer.
Управление цветом шрифта
Кроме размера шрифта тег <FONT> позволяет задать цвет символов. Для этого используется атрибут COLOR.
В качестве значения для атрибута COLOR можно указывать:
1. Одно из стандартных названий цвета в кавычках, а именно: BLACK, NAVY, SILVER, BLUE, MAROON, PURPLE, RED, FUCHSIA, GREEN, TEAL, LIME, AQUA, OLIVE, GRAY, YELLOW, WHITE;
2. Числовой код цвета, состоящий из интенсивностей трёх цветов: красного, зелёного и синего. Он задаётся в следующем виде: COLOR="#RRGGBB", где вместо букв RR, GG и BB нужно записывать количество красной, зелёной и синей «краски» соответственно. Эти количества записываются в виде шестнадцатеричных чисел от 00 до FF (в десятичной системе это интервал от 0 до 255). Например, если нужно получить оранжевый цвет текста, можно указать COLOR="#FF8000".
Тег <FONT> управляющий шрифтами имеет атрибут COLOR, который задает цвет символов. <FONT COLOR="#FF0000">Проба</font>, в результате цвет слова Проба будет красным. |
Задание
- Запустите стандартную программу Paint.
- Выполните команду Палитра/Изменить палитру/Определить цвет.
- Выберите цвет и выпишите значения красного, зеленого и синего цветов. Например, красный = 133, зеленый = 250, синий =151.
- Откройте программу Инженерный Калькулятор.
- Введите число, соответствующее красному цвету и щелкните по кнопке HEX, которая переведет это число в шестнадцатиричную систему исчисления. Запишите полученное число.
- В соответствии с приведенным примером получим: красный = 85, зеленый = FA, синий =97, тогда выбранный нами цвет будет иметь следующий числовой код: 85FA97.
- Откройте файл Список определений.html и задайте для строки «нумерованный список» тот цвет, который у вас получился при расчете.
- Рассчитайте числовой код еще для 2 цветов и задайте цвет для строк Маркированный список, Список определений
- Сохраните файл под именем Раскрашенный список.html
Контрольное задание
- Оформите страничку, так как показано на рисунке.
-
Сохраните файл под именем Контрольная работа2.html.