Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Практические задания по 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 – «Создание формы с использованием тега

»

  • Задание № 6.4 – «Создание формы с использованием таблиц»
  • Задание № 6.5 – «Создание формы с использованием тега

    »

  • Задание № 6.6 – «Создание формы с использованием cписка определений»
  • Задание № 6.7 – «Создание формы с использованием нумерованного списка»
  • Задание № 6.8 – «Создание формы с использованием с размещением флажков/переключателей по горизонтали»
  • Задание № 6.9 – «Создание формы с использованием с размещением флажков/переключателей в списке»
  • Задание № 6.10 – «Создание формы с использованием сетки переключателей»
  • Задание № 6.11 – «Создание html-документа с несколькими формами»
  • Практическая работа № 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
    • Картинки в таблице
    • Объединение колонок
    • Объединение строк
    • Ячейка заголовка
    • Тело таблицы
    • Подвал таблицы
    • Ширина таблицы
    • Выравнивание заголовка таблицы
    • Выравнивание таблицы
    • Цвет фона таблицы
    • Зебра в таблице
    • Поля в ячейках
    • Расстояние между ячеек
    • Рамка вокруг таблицы
    • Рамка вокруг ячеек
    • Линии в таблице
    • Горизонтальное выравнивание в ячейках

    Текст

    • Элемент
  • Переносы строк
  • Абзацы
  • Заголовок первого уровня
  • TEX
  • Заголовки
  • Площадь круга
  • Озон
  • Важный текст
  • Элемент
  • Рыжая лиса
  • Шрифт на веб-странице
  • Шрифт иллюстрации
  • Шрифт заголовка
  • Свой шрифт
  • Размер текста в пикселях
  • Размер заголовка в em
  • Размер заголовка в rem
  • Цвет основного текста
  • Цвет заголовка
  • Выворотка заголовка
  • Курсивный текст
  • Жирный текст
  • Нормальная жирность заголовка
  • Выступающий инициал
  • Трансформация

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

    Формы

    • Атрибут method
    • Создание формы
    • Атрибут action
    • Текстовое поле
    • Длина текста
    • Ширина поля
    • Подсказка
    • Блокировка поля
    • Обязательное поле
    • Вывод текста
    • Элемент
    • Поле для пароля
    • Многострочный текст
    • Размеры
  • Элемент
  • Отправка формы
  • Картинка в
  • Очистка формы
  • Переключатели
  • Выбор переключателя
  • Флажки
  • Выбор флажка
  • Поле со списком
  • Раскрывающийся список
  • Блокировка списка
  • Список множественного выбора
  • Блокировка пункта списка
  • Выбор пунктов списка
  • Поиск по сайту
  • Читать еще:  Как снизить пинг в css
    Ссылка на основную публикацию
    Adblock
    detector