Практические задания по 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
- Текстовое поле
- Длина текста
- Ширина поля
- Подсказка
- Блокировка поля
- Обязательное поле
- Вывод текста
- Элемент
- Поле для пароля
- Многострочный текст
- Размеры