- •Оглавление
- •Введение
- •Задание
- •Лабораторная работа №3: Разрыв строки
- •Кавычки.
- •Дефис и тире.
- •Глава 4. Шрифты
- •Лабораторная работа №1: Гарнитура
- •Задание
- •Лабораторная работа №4: Другие параметры
- •Лабораторная работа №2: Параметры заголовка
- •Задание
- •Глава 7. Логическая разметка гипертекста
- •Лабораторная работа №1: Расстановка акцентов
- •Лабораторная работа №2: Цитаты
- •Лабораторная работа №3: Верхние и нижние индексы
- •Лабораторная работа №4: Дескрипторы pre и var
- •Лабораторная работа №5: Сокращения и обратный адрес.
- •Задание
- •Глава 8. Списки Лабораторная работа №1: Нумерованные списки
- •Задание
- •Лабораторная работа №2: Маркированные списки
- •Задание
- •Лабораторная работа №3: Параметры элемента списка
- •Лабораторная работа №4: Многоуровневые списки
- •Задание
- •Глава 9. Графика на Web-странице Лабораторная работа №1: Вставка графики в текст
- •Лабораторная работа №2: Размеры изображения и контекстная подсказка
- •Задание
- •Лабораторная работа №3: Обтекание графики текстом
- •Задание
- •Лабораторная работа №4: Выравнивание по вертикали
- •Задание
- •Лабораторная работа №4: Картина в рамке
- •Лабораторная работа №5: Отступы
- •Задание
- •Глава 10. Табличный дизайн Лабораторная работа №1: Пример табличного дизайна
- •Задание
- •Лабораторная работа №2: Внутренние отступы
- •Задание
- •Лабораторная работа №3: Слияние и группировка ячеек
- •Задание
- •Глава 11. Фреймы Лабораторная работа №1: Фреймовая структура
- •Лабораторная работа №2: Размеры фреймов
- •Задание
- •Лабораторная работа №3: Вложенные фреймы
- •Задание
- •Лабораторная работа №4: Обрамление и отступы
- •Задание
- •Лабораторная работа №5: Ссылки. Фрейм без фреймов
- •Задание
- •Глава 12. Формы Лабораторная работа №1: Основная схема формы
- •Лабораторная работа №2: Текстовые строки
- •Лабораторная работа №3: Кнопки
- •Лабораторная работа №4: Текстовые поля
- •Лабораторная работа №5: Списки вариантов
- •Лабораторная работа №6: Списки переключатели
- •Лабораторная работа №7: Раскрывающиеся списки
- •Задание
- •Глава 13. Структура html-документа Лабораторная работа №1: Основные параметры Web-страницы. Отступы от края окна
- •Задание
- •Лабораторная работа №2: Цвет фона и цвет текста
- •Задание
- •Глава 14. Внешние параметры Web-страницы Лабораторная работа №1: Название Web-страницы
- •Глава 15. Основные принципы каскадных таблиц стилей Лабораторная работа №1: Простейшее описание стиля.
- •Задание
- •Лабораторная работа №2: Подклассы дескрипторов
- •Задание
- •Лабораторная работа №3: Задание фона и цвета текста
- •Задание
- •Лабораторная работа №4: Отступы и рамки
- •Задание
- •Глава 16. Понятие событий Лабораторная работа №1: Виртуальные события
- •Лабораторная работа №2: События мыши
- •Лабораторная работа №3: События клавиатуры
- •Задание
- •Задание по пройденному материалу
- •Рекомендуемая литература.
Задание
Задайте фон и цвет текста.
Лабораторная работа №4: Отступы и рамки
Для задания отступов используется атрибут margin. Для того чтобы задать определённый внешний отступ, используются атрибуты margin-top, margin-right, margin-bottom, margin-left – для верхнего, правого, нижнего и левого отступов. Их значением служит число, определяющее величину отступа.
Атрибутом padding определяется величина внутреннего отступа. Величина отступов сверху, справа, снизу и слева определяется соответственно – padding- top, padding- right, padding-bottom, padding- left.
Для рамки определены три свойства: толщина, цвет и стиль линии. Как задаются толщина и цвет линии, рассматривалось ранее. Для определения стиля возможны следующие варианты:
none – рамка отсутствует;
dotted – рамка состоит из точек;
dashed – пунктирная рамка;
solid – сплошная рамка;
double – двойная рамка;
groove, ridge, inset, outset – различные варианты «трёхмерных» рамок.
В случае если свойства рамки одинаковы, их можно присвоить общему атрибуту border.
Для того чтобы описать свойства только одной из сторон рамки, к имени border добавляется название этой стороны.
Задание
Задайте различные отступы и рамки.
Глава 16. Понятие событий Лабораторная работа №1: Виртуальные события
Динамический HTML (DHTML) представляет собой сочетание обычного HTML и языка сценариев JavaScript.
Любое событие имеет «хозяина» - элемент Web-страницы, с которым это событие происходит. Таким «хозяином» может быть, например гиперссылка, а событиями – наведение на неё указателя мыши или щелчок на ней. Кроме того, каждое событие имеет зарезервированное имя, одновременно являющееся параметром дескриптора. Этот параметр определяет, какое именно событие нужно обрабатывать. Значением параметра является действие, которое нужно выполнить:
<дескриптор при событии N=«описание действия»>содержимое дескриптора</дескриптор>. Например,
«Виртуальный светофор»: когда указатель мыши попадает на ячейку таблицы, «срабатывает» код JavaScript, и ячейка окрашивается в соответствующий цвет.