Практика
Здесь приведены задачи по HTML и CSS, которые выполняются прямо в браузере, с автоматической проверкой результатов.
Аудио и видео
Изображения
Многоколоночная вёрстка
Основы CSS
Переходы и анимация
Разделы веб-страницы
Списки
- Маркированный список
- Нумерованный список
- Римские числа
- Буквенная нумерация
- Обратный список
- Список с 11
- Список описаний
- Атрибут value
- Вложенный список
- Квадратные маркеры
- Прячем маркеры
- Символ в качестве маркера
- Рисунок в качестве маркера
- Горизонтальный список
- Римская нумерация
- Греческая нумерация
- Расстояние от маркера до текста
- Цвет списка
- Цвет маркеров
- Отступы в списке
Ссылки
- Создание ссылки
- Ссылка на Google
- Ссылка для скачивания
- Атрибут target
- Ссылка на email
- Создание якоря
- Ссылка на телефон
- Ссылка на якорь
- Картинка как ссылка
- Убираем подчёркивание
- Цвет ссылок
- Цвет фона у ссылок
- Активная ссылка
- Посещённая ссылка
- Стиль ссылки при наведении
- Ссылки без подчёркивания
- Пунктирное подчёркивание ссылок
- Двойное подчёркивание ссылок
- Рамка вокруг ссылки
Таблицы
- Создание таблицы
- Строки таблицы
- Картинки в таблице
- Заголовок таблицы
- Таблица 2х2
- Объединение строк
- Объединение колонок
- Ячейка заголовка
- Тело таблицы
- Подвал таблицы
- Ширина таблицы
- Выравнивание заголовка таблицы
- Выравнивание таблицы
- Цвет фона таблицы
- Зебра в таблице
- Поля в ячейках
- Расстояние между ячеек
- Рамка вокруг таблицы
- Рамка вокруг ячеек
- Линии в таблице
- Горизонтальное выравнивание в ячейках
Текст
- Элемент <pre>
- Переносы строк
- Абзацы
- Заголовок первого уровня
- TEX
- Заголовки
- Площадь круга
- Озон
- Важный текст
- Элемент <mark>
- Рыжая лиса
- Шрифт на веб-странице
- Шрифт иллюстрации
- Шрифт заголовка
- Свой шрифт
- Размер текста в пикселях
- Размер заголовка в em
- Размер заголовка в rem
- Цвет основного текста
- Цвет заголовка
- Выворотка заголовка
- Курсивный текст
- Жирный текст
- Нормальная жирность заголовка
- Выступающий инициал
Трансформация
- Поворот на 90°
- Отражение по горизонтали
- Поворот на -90°
- Отражение по вертикали
- Отражение картинки
- Сдвигаем вниз
- Сдвигаем вверх
- Наклон картинки
- Точка трансформации
- Перспектива
- Масштабирование кнопки
- Поворот на 360° при наведении
- Сдвиг при наведении
- Масштабирование картинки при наведении
- Масштабирование картинки при наведении 2
Фон
Формы
- Создание формы
- Атрибут method
- Атрибут action
- Текстовое поле
- Ширина поля
- Длина текста
- Подсказка
- Блокировка поля
- Обязательное поле
- Элемент <datalist>
- Вывод текста
- Поле для пароля
- Размеры <textarea>
- Элемент <button>
- Многострочный текст
- Отправка формы
- Картинка в <button>
- Очистка формы
- Переключатели
- Флажки
- Выбор переключателя
- Выбор флажка
- Поле со списком
- Раскрывающийся список
- Блокировка списка
- Список множественного выбора
- Блокировка пункта списка
- Поиск по сайту
- Выбор пунктов списка
Фреймы
Элементы HTML
- Привет, мир!
- Открывающие и закрывающие теги
- Открывающие теги
- Закрывающие теги
- Вложение элементов
- Добавление комментария
- Доктайп
- Кодировка документа
- Структура HTML-кода
- Добавление элемента
- Содержимое элемента
- Атрибут lang
- Выделение текста
- Обязательный атрибут
- Порядок тегов
- Ошибки в абзацах
- Пересечение тегов
- Последовательность элементов
- Закрывающие теги списка
- Закрывающие теги таблицы
- Лишние атрибуты
- Обязательные элементы