
- •Язык разметки гипертекста html. Назначение html
- •Язык разметки гипертекста html
- •Краткая история html
- •Программы для просмотра электронных документов
- •Лабораторная работа № 1. Язык разметки гипертекста html. Основные понятия языка
- •Основные понятия
- •Структура документа html
- •Задания к лабораторной работе № 1 Задание 1. Создание простейшей Web-страницы.
- •Контрольные вопросы
- •Лабораторная работа № 2. Форматирование текста.
- •Форматирование абзаца
- •Форматирование шрифта
- •Физические стили
- •Размер шрифта
- •Логические стили
- •Горизонтальные линии
- •Escape последовательности (символьные объекты)
- •Контрольные вопросы
- •Лабораторная работа № 3. Управление цветом
- •Цветовая гамма html-документа
- •Сочетание цветов
- •Задания к лабораторной работе № 3 Управление цветом
- •Контрольные вопросы
- •Лабораторная работа № 4. Гиперссылки
- •Относительные адреса ссылок
- •Задания к лабораторной работе № 4 Гипертекстовые ссылки Задание к лабораторной работе №4
- •Контрольные вопросы
- •Лабораторная работа № 5. Работа со списками
- •Маркированный (ненумерованный - Unordered List) список
- •Нумерованные списки
- •Вложенный список
- •Списки определений
- •Список-меню
- •Список-указатель (список-индекс)
- •Теплым.
- •Круглым.
- •Желтым.
- •Контрольные вопросы
- •Лабораторная работа № 6. Вставка графических изображений
- •Роль графики
- •Характеристика графических стандартов
- •Вставка графических изображений
- •Использование карт изображений
- •Преимущества и недостатки карт-изображений
- •Область применения
- •Конфигурация карт-изображений
- •Типы карт-изображений
- •Серверный вариант
- •Клиентский вариант
- •Задания к лабораторной работе № 6 Вставка графических изображений
- •Примеры карт
- •Карта 2
- •Контрольные вопросы
- •Лабораторная работа № 7. Таблицы html-документов
- •Основные методы создания таблиц
- •Цветные таблицы
- •Группировка данных
- •Колонтитулы таблицы
- •Прорисовка структуры таблицы
- •Вложенные таблицы
- •Преимущества вложенных таблиц
- •Задания к лабораторной работе № 7.
- •Задание 3. Форматирование таблицы
- •Контрольные вопросы
- •Лабораторная работа № 8. Формы
- •1. Организация обратной связи
- •2. Авторизация
- •3. Проведение исследований
- •4. Пользовательский профиль
- •Структура пользовательских форм
- •Параметры текстовой строки
- •Параметры опции выбора
- •Параметры кнопки с рисунком
- •Параметры текстового поля
- •Параметры
- •Параметры текстового поля
- •Задания к лабораторной работе № 6 Формы
- •Индивидуальное задание
- •Контрольные вопросы
- •Лабораторная работа № 9. Фреймы
- •Синтаксис фреймов
- •Атрибуты:
- •Планирование фреймов и взаимодействия между фреймами
- •Зарезервированные имена фреймов
- •Бегущая строка (элемент marquee)
- •Фиксация информации на экране (элемент banner)
- •Задания к лабораторной работе № 9. Фреймы
- •Контрольные вопросы
- •Справочник
- •Приложение 1. Таблица спецсимволов
- •Литература
Задания к лабораторной работе № 3 Управление цветом
Задание 1. Оформление цветом Web-страницы
Указания к выполнению
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <title> укажите название странички «Задание 1. Оформление цветом Web-страницы.»
Оформить страницу согласно заданному варианту.
№ варианта |
Задание |
1 |
Цвет фона странички белый. Сделайте надпись чёрным цветом "Спокойной ночи". Выровняйте ее посредине страницы, размер шрифта 4. Проведите линию с выравниванием по правому краю, толщиной 2, красного цвета, длиной 10% от ширины экрана. Сделайте надпись желтого цвета "Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 3, жёлтого цвета, длиной 50 пикселей. |
2 |
Цвет фона странички жёлтый. Сделайте надпись белым цветом "Спокойной ночи". Выровняйте ее по левому краю, размер шрифта 3. Проведите линию с выравниванием по левому краю, толщиной 4, синего цвета, длиной 20% от ширины экрана. Сделайте надпись золотого цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 5, оранжевого цвета, длиной 100 пикселей. |
3 |
Цвет фона странички золотой. Сделайте надпись оранжевым цветом "Спокойной ночи". Выровняйте ее по правому краю. Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 4, оранжевого цвета, длиной 20% от ширины экрана. Сделайте надпись белого цвета "Приятных сновидений". Выровняйте ее по правому краю. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 5, красного цвета длиной 100 пикселей. |
4 |
Цвет фона странички оранжевый. Сделайте надпись красным цветом "Спокойной ночи". Выровняйте ее по середине страницы размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 5, красного цвета, длиной 100 пикселей. Сделайте надпись цвета аквамарин "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по правому краю, толщиной 6, серебристого цвета, длиной 30% от ширины экрана. |
5 |
Цвет фона странички красный. Сделайте надпись белым цветом "Спокойной ночи". Проведите линию с выравниванием по правому краю, толщиной 6, белого цвета, длиной 30% от ширины экрана. Сделайте надпись оливкового цвета "Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 7, оливкового цвета, длиной 150 пикселей.
|
6 |
Цвет фона странички зелёный. Сделайте надпись оливкового цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 7, оливкового цвета, длиной 150 пикселей. Сделайте надпись синего цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по левому краю, толщиной 8, синего цвета, длиной 40% от ширины экрана. |
7 |
Цвет фона странички оливковый. Сделайте надпись синего цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 8, синего цвета, длиной 40% от ширины экрана. Сделайте надпись фиолетового цвета "Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 2, фиолетового цвета, длиной 200 пикселей. |
8 |
Цвет фона странички аквамарин. Сделайте надпись фиолетового цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 2, фиолетового цвета, длиной 200 пикселей. Сделайте надпись серебристого цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по правому краю, толщиной 3, серебристого цвета, длиной 50% от ширины экрана, цвета. |
9 |
Цвет фона странички синий. Сделайте надпись серебристого цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по правому краю, толщиной 3, серебристого цвета, длиной 50% от ширины экрана. Сделайте надпись серого цвета "Приятных сновидений". Выровняйте ее по середине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 4, серого цвета, длиной 250 пикселей. |
10 |
Цвет фона странички фиолетовый. Сделайте надпись серого цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 4, серого цвета, длиной 250 пикселей. Сделайте надпись чёрного цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по левому краю, толщиной 5, чёрного цвета, длиной 60% от ширины экрана. |
11 |
Цвет фона странички серебристый. Сделайте надпись чёрного цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 5, чёрного цвета, длиной 60% от ширины экрана. Сделайте надпись желтого цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 6, желтого цвета, длиной 300 пикселей. |
12 |
Цвет фона странички серый. Сделайте надпись желтого цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 6, желтого цвета, длиной 300 пикселей. Сделайте надпись белого цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по правому краю, толщиной 7, белого цвета, длиной 70% от ширины экрана. |
13 |
Цвет фона странички чёрный. Сделайте надпись белого цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по правому краю, толщиной 7, белого цвета, длиной 70% от ширины экрана. Сделайте надпись красного цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 8, красного цвета, длиной 350 пикселей. |
14 |
Цвет фона странички жёлтый. Сделайте надпись красного цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по центру, толщиной 8, красного цвета, длиной 350 пикселей. Сделайте надпись золотого цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по левому краю, толщиной 9, золотого цвета, длиной 80% от ширины экрана. |
15 |
Цвет фона странички белый. Сделайте надпись золотого цвета "Спокойной ночи". Выровняйте ее посредине страницы Размер шрифта 4. Проведите линию с выравниванием по левому краю, толщиной 9, золотого цвета, длиной 80% от ширины экрана. Сделайте надпись синего цвета "Приятных сновидений". Выровняйте ее посредине страницы. Размер шрифта 7. Проведите линию с выравниванием по центру, толщиной 3, синего цвета, длиной 50 пикселей. |
Спокойной