Управление цветом шрифта

Списки

Довольно часто в тексте html-документа приходится перечислять какие-либо объекты или давать определения понятий. В таких случаях можно пользоваться средствами HTML для организации списков. В HTML имеется 3 вида списков:

1. Нумерованный список. Каждый элемент такого списка имеет номер, который браузер проставит автоматически. По умолчанию первый элемент списка имеет номер 1, второй — 2 и т.д.

Задание

1. Откройте программу Блокнот и наберите текст HTML – документа:

Простейший нумерованный список

3 вида списков в HTML:

1. Сохраните этот файл под именем Нумерованный список.htm в папке HTML.
2. Откройте сохраненный файл в окне программы Internet Explorer. Какими цифрами пронумерован список?

Кроме арабских цифр можно использовать римские, а также большие или малые латинские буквы.

Задание

1. Создайте файл, который содержит следующий текст:

Нумерация арабскими цифрами

3 вида списков в HTML:

1.Нумерованный

2.Маркированный

3.Список определений

1. Страничку назовите «Списки». Сохраните файл под именем Арабская нумерация.html.
2. Исправьте таким образом, чтобы список нумеровался римскими цифрами. Сохраните файл под именем Римская нумерация.html. Откройте сохраненный файл в окне программы Internet Explorer.
3. Исправьте таким образом, чтобы список нумеровался малыми латинскими буквами. Сохраните файл под именем Малые латинские буквы.html. Откройте сохраненный файл в окне программы Internet Explorer.
4. Исправьте таким образом, чтобы список нумеровался большими латинскими буквами. Сохраните файл под именем большие латинские буквы.html. Откройте сохраненный файл в окне программы Internet Explorer.

Задание

1. Откройте файл Арабская нумерация.html.

2. Измените его содержимое так, чтобы список начинался не с 1, а с 10.

3. Сохраните файл под тем же именем.

2. Маркированный список. Иногда нумерация бывает не важна, но выделить для читателя отдельные элементы списка необходимо. В этом случае перед каждым элементом списка ставится небольшой значок (маркер), обычно это круг, квадрат и т. п.

Задание

1. Создайте файл

Маркер — круг

В качестве маркера можно использовать:

• Круг
• Окружность
• Квадрат

2. Сохраните файл под именем Маркировка кругами.html.

3. Исправьте таким образом, чтобы список маркировался окружностями. Сохраните файл под именем Маркировка окружностями.html. Откройте сохраненный файл в окне программы Internet Explorer.

4. Исправьте таким образом, чтобы список маркировался квадратами. Сохраните файл под именем Маркировка квадратами.html. Откройте сохраненный файл в окне программы Internet Explorer.

5. Исправьте таким образом, чтобы список маркировался всеми тремя способами. Сохраните файл под именем Различные маркеры.html. Откройте сохраненный файл в окне программы Internet Explorer.

3. Списки определений. Этот вариант применяется в том случае, когда каждый элемент списка состоит из двух частей: термина (понятия и т. п.) и его определения (расшифровки).

Задание

1. Создайте список определений:

Нумерованный список

состоит из отдельных элементов, каждый из которых имеет свой номер. Номера расставляются браузером автоматически.

Маркированный список

каждый элемент такого списка выделен с помощью небольшого значка, называемого маркером. Маркеры бывают трех видов: круг, квадрат и окружность.

Список определений

каждый элемент состоит из названия термина и его определения или расшифровки.

2. Сохраните файл под именем Список определений.html.

3. Откройте сохраненный файл в окне программы Internet Explorer.

4. Многоуровневыймаркированный список. Этот вариант списка используется тогда, когда необходимо создать иерархию.

Например:

Список покупок:

§ Мясо

• 250 г. телятины
• 250 г свинины

§ Овощи

• 1 кг огурцов
• 1 кг лука

Чтобы создать такой список необходимо внутри одного тега

ввести еще один такой же тег. Программа будет выглядеть следующим образом:

Список покупок

Задание

1. Создайте многоуровневый маркированный список с текстом, приведенным в примере.

1. Сохраните его и просмотрите в окне программы Internet Explorer.
2. Исправьте сохраненный файл таким образом, чтобы список стал многоуровневым нумерованным. Сохраните его и просмотрите в окне программы Internet Explorer.

5. Используя несложный прием, в качестве вводного символа элемента списка можно использовать любую графику. С этой целью элемент

следует заменить на тег , с указанием пути к используемому в качестве вводного символа рисунку.

Например, мост через озеро

Задание

1. Создайте файл, который содержал бы следующий текст:

Компьютерное оборудование:

Монитор

Системный блок

Клавиатура

Обратите внимание, что путь к файлу должен быть прописан полностью!!!

1. Сохраните его под именем Графическая маркировка.html. Откройте сохраненный файл в окне программы Internet Explorer.

Управление цветом шрифта

Кроме размера шрифта тег позволяет задать цвет символов. Для этого используется атрибут 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.

Задание

1. Запустите стандартную программу Paint.
2. Выполните команду Палитра/Изменить палитру/Определить цвет.
3. Выберите цвет и выпишите значения красного, зеленого и синего цветов. Например, красный = 133, зеленый = 250, синий =151.
4. Откройте программу Инженерный Калькулятор.
5. Введите число, соответствующее красному цвету и щелкните по кнопке HEX, которая переведет это число в шестнадцатиричную систему исчисления. Запишите полученное число.
6. В соответствии с приведенным примером получим: красный = 85, зеленый = FA, синий =97, тогда выбранный нами цвет будет иметь следующий числовой код: 85FA97.
7. Откройте файл Список определений.html и задайте для строки «нумерованный список» тот цвет, который у вас получился при расчете.
8. Рассчитайте числовой код еще для 2 цветов и задайте цвет для строк Маркированный список, Список определений
9. Сохраните файл под именем Раскрашенный список.html

Контрольное задание

1. Оформите страничку, так как показано на рисунке.

Цвет и размер текста в html тег font html как поменять шрифт, Видео курс по HTML, Урок 32

Похожие статьи.

• Особые типы подчеркивания шрифта

• Тема 3. управление файловой системой

• Основные элементы управления в интерфейсе программных продуктов

• Предикат отсечения и управление логическим выводом в программах