Практические задания по css

Практические задания по теме «Web-дизайн и программирование»

Язык гипретекстовой разметки HTML 4.0

Практическая работа № 1 – «Разметка страницы тегами HTML»

• Задание № 1.1 – «Разметка и эскиз первой HTML-страницы»

Практическая работа № 2 – «Создание простого web-сайта»

• Задание № 2.1 – «Создание первого web-сайта с тремя html-страницами» (+ пример: стр. 1, стр. 2, стр. 3)

Практическая работа № 3 – «Разметка web-страниц с использованием таблиц»

• Задание № 3.1 – «Размещение таблиц на html-странице. Форматирование текста в таблице»
• Задание № 3.2 – «Размещение таблиц на html-странице. Форматирование ячеек таблицы»
• Задание № 3.3 – «Размещение таблиц на html-странице. Объединение ячеек таблицы»
• Задание № 3.4 – «Создание web-страницы с использованием таблиц» (+ пример 3.4)

Практическая работа № 4 – «Дополнительные элементы языка HTML для форматирования web-страниц»

• Задание № 4.1 – «Горизонтальные линии (тег )»
• Задание № 4.2 – «Escape-поcледовательности»
• Задание № 4.3 – «Физические и логические стили»

Практическая работа № 5 – «Форматирование web-страниц с использованием фреймов»

• Задание № 5.1 – «Создание простых фреймовых структур»
• Задание № 5.2 – «Создание сложных фреймовых структур»
• Задание № 5.3 – «Форматирование элементов фреймовых структур»
• Задание № 5.4 – «Создание сайта содержащего фреймовую структуру» (+ пример 5.4: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)

Практическая работа № 6 – «Отправка данных на web-сайт с использованием форм»

• Задание № 6.1 – «Создание формы с использованием тега
  »
• Задание № 6.2 – «Создание формы с использованием тега »
• Задание № 6.3 – «Создание формы с использованием тега

»

Практическая работа № 7 – «Размещение на web-странице мультимедийных объектов»

• Задание № 7.1 – «Встаивание в web-странницу модулей, содержащих flash-графику» (+ пример 7.1)
• Задание № 7.2 – «Встаивание в web-странницу модулей, содержащих avi-изображение» (+ пример 7.2)
• Задание № 7.3 – «Создание web-страниц с элементами ActiveX» (+ пример 7.3)
• Задание № 7.4 – «Создание сайта с внедрением мультимедийных модулей» (+ пример 7.4 и страница page1.php)

Практическая работа № 8 – «Форматирование web-страниц с использованием таблиц стилей. Создание каскадных листов стилей (css)»

• Задание № 8.1 – «Форматирование HTML-страницы с помощью листа стилей – тег (+ пример 8.1)
• Задание № 8.2 – «Cоздание внешнего листа стилей для форматирования HTML-страниц (+ пример 8.2)
• Задание № 8.3 – «Создание web-сайта с использованием листов стилей» (+ пример 8.3: стр. 1, стр. 2, стр. 3, стр. 4, стр. 5)
• Задание № 8.4 – «Применение визуальных фильтров для Internet Explorer» (+ пример 8.4)
• Задание № 8.5 – «Форматирование страниц с использованием CSS»

Динамический HTML (DHTML)

Практическая работа № 9 – «Объектная модель DHTML. События»

• Задание № 9.1 – События onMouseOver , onMouseOut . Объекты self и status (+ пример 9.1)
• Задание № 9.2 – Событие onDblClick (двойной щелчок). Метод alert (+ пример 9.2)
• Задание № 9.3 – Событие onHelp (+ пример 9.3)
• Задание № 9.4 – Событие onMouseMove (+ пример 9.4)
• Задание № 9.5 – События onClick , onMouseOut , onMouseOver и onMouseUp (+ пример 9.5)
• Задание № 9.6 – Использование форм и JavaScript (+ пример 9.6)
• Задание № 9.7 – Событие onChange (+ пример 9.7)

Практическая работа № 10 – «Объектная модель DHTML. Методы»

• Задание № 10.1 – Методы click и alert . Свойство returnValue ( + пример 10.1)
• Задание № 10.2 – Метод insertAdjacentHTML ( + пример 10.2)
• Задание № 10.3 – Метод insertAdjacentText ( + пример 10.3)

Практическая работа № 12 – «Объектная модель DHTML. Визуальные фильтроы в DHTML для Internet Explorer»

• Задание № 12.1 – Фильтр переходов RevealTrans . Методы Apply , Play , Stop ( + пример 12.1)

Практическая работа № 13 – «Объектная модель DHTML. Примеры программ на JavaScript. Управление окнами»

• Задание № 13.1 – Объект Window . Метод open . Событие onClick ( + пример 13.1)
• Задание № 13.2 – Объект Window . Методы open , clоse . Событие onClick ( + пример 13.2)
• Задание № 13.3 – Объект navigator . Метод appName ( + пример 13.3)
• Задание № 13.4 – Методы alert , confirm , promt ( + пример 13.4)
• Задание № 13.5 – Метод scroll ( + пример 13.5)

Практическая работа № 14 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание слайд-шоу»

• Задание № 14.1 – Коллекция тегов image . Атрибут src ( + пример 14.1)
• Задание № 14.2 – Событие onChange . Массив Array . Свойство selectedIndex ( + пример 14.2)

Практическая работа № 15 – «Объектная модель DHTML. Примеры программ на JavaScript. Работа с датой и временем»

Практическая работа № 16 – «Объектная модель DHTML. Примеры программ на JavaScript. Абсолютное и относительное позиционирование элементов»

Практическая работа № 17 – «Объектная модель DHTML. Примеры программ на JavaScript. Создание раскрывающихся меню с иерархической структурой»

Практика

Здесь приведены задачи по HTML и CSS, которые выполняются прямо в браузере, с автоматической проверкой результатов.

Аудио и видео

• Добавление аудио
• Автовоспроизведение аудио
• Зацикливание аудио
• Элемент
• Добавление видео
• Размеры видеоплеера
• Автовоспроизведение видео
• Зацикливание видео
• Обложка видео

Изображения

• Абсолютный адрес
• Относительный адрес
• Альтернативный текст
• Размеры картинки
• Ширина картинок
• Подпись под картинкой
• Элемент
• Подпись перед картинкой
• Картинки друг под другом
• Ширина картинки
• Плавающая ширина картинки
• Круглое изображение
• Выравнивание картинки
• Рамка вокруг картинок

Многоколоночная вёрстка

• Две колонки
• Три колонки
• Заголовок в колонках
• Ширина колонок
• Расстояние между колонок
• Линия между колонок
• Пунктир между колонок
• Блоки в колонках
• Изображения в колонках
• Запрет переноса в колонках

Основы CSS

• Подключение CSS-файла
• Ошибка в
• Добавление стиля
• Атрибут style
• Импорт шрифта
• Комментарии в CSS
• Селектор элемента
• Класс
• Добавление класса
• Идентификатор
• Добавление идентификатора
• Селектор атрибута

Переходы и анимация

• Плавное изменение цвета
• Масштабирование кнопки
• Поворот на 360° при наведении
• Сдвиг при наведении
• Масштабирование картинки при наведении
• Масштабирование картинки при наведении 2
• Прозрачность при наведении
• Мигающий текст
• Сердце

Разделы веб-страницы

• Шапка веб-страницы
• Подвал веб-страницы
• Элемент
• Копирайт
• Элемент
• Шапка раздела
• Навигация
• Элемент
• Создание статьи
• Дата публикации
• Комментарии

Списки

• Маркированный список
• Нумерованный список
• Римские числа
• Буквенная нумерация
• Обратный список
• Список с 11
• Список описаний
• Атрибут value
• Вложенный список
• Квадратные маркеры
• Прячем маркеры
• Символ в качестве маркера
• Рисунок в качестве маркера
• Горизонтальный список
• Римская нумерация
• Греческая нумерация
• Расстояние от маркера до текста
• Цвет списка
• Цвет маркеров
• Отступы в списке

Ссылки

• Создание ссылки
• Ссылка на Google
• Ссылка для скачивания
• Атрибут target
• Ссылка на email
• Ссылка на телефон
• Создание якоря
• Ссылка на якорь
• Картинка как ссылка
• Убираем подчёркивание
• Цвет ссылок
• Цвет фона у ссылок
• Активная ссылка
• Посещённая ссылка
• Стиль ссылки при наведении
• Ссылки без подчёркивания
• Пунктирное подчёркивание ссылок
• Двойное подчёркивание ссылок
• Рамка вокруг ссылки

Таблицы

• Создание таблицы
• Строки таблицы
• Заголовок таблицы
• Таблица 2х2
• Картинки в таблице
• Объединение колонок
• Объединение строк
• Ячейка заголовка
• Тело таблицы
• Подвал таблицы
• Ширина таблицы
• Выравнивание заголовка таблицы
• Выравнивание таблицы
• Цвет фона таблицы
• Зебра в таблице
• Поля в ячейках
• Расстояние между ячеек
• Рамка вокруг таблицы
• Рамка вокруг ячеек
• Линии в таблице
• Горизонтальное выравнивание в ячейках

Текст

• Элемент

Трансформация

• Поворот на 90°
• Отражение по горизонтали
• Поворот на -90°
• Отражение по вертикали
• Отражение картинки
• Сдвигаем вниз
• Сдвигаем вверх
• Наклон картинки
• Точка трансформации
• Перспектива
• Масштабирование кнопки
• Поворот на 360° при наведении
• Сдвиг при наведении
• Масштабирование картинки при наведении
• Масштабирование картинки при наведении 2

• Цвет по названию
• Шестнадцатеричный цвет
• Сокращённое значение цвета
• Цвет в RGB
• Фоновая картинка
• Полупрозрачный фон
• Повторение фона по горизонтали
• Повторение фона по вертикали
• Запрет повторения фона
• Положение фона
• Фиксация фона
• Масштабирование фона
• Масштабирование фона 2
• Масштабирование фона 3

Формы

• Атрибут method
• Создание формы
• Атрибут action
• Текстовое поле
• Длина текста
• Ширина поля
• Подсказка
• Блокировка поля
• Обязательное поле
• Вывод текста
• Элемент
• Поле для пароля
• Многострочный текст
• Размеры