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