Задания для тренировки html

HTML Упражнения

Вы можете проверить свои навыки HTML с помощью упражнений SchoolsW3.

Упражнения

Мы собрали разные HTML упражнения с ответами для каждой HTML главы.

Попробуйте решить упражнения, отредактируя код. Посмотрите «подсказку», если вы забыли или незнаете ответ.

Подсчет баллов

Вы получите 1 балл за каждый правильный ответ. Общие баллы отображаются в левой панели.

HTML Упражнения

SchoolsW3 Сертификат

Идеальное решение для профессионалов, которым необходимо совмещать работу, семью, дом и карьеру.

Уже выдано более 10 000 сертификатов!

HTML Сертификат документы на ваши знания HTML.

CSS Сертификат документы на ваши знания CSS.

JavaScript Сертификат документы на ваши знания JavaScript и HTML DOM.

jQuery Сертификат документы на ваши знания jQuery.

PHP Сертификат документы на ваши знания PHP и SQL (MySQL).

XML Сертификат документы на ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документы на ваши знания Bootstrap фреймворк.

Упражнения

Тесты

КАК СДЕЛАТЬ

ПОДЕЛИТЬСЯ

СЕРТИФИКАТЫ

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:

Ваше предложение:

Спасибо, за вашу помощь!

Ваше сообщение было отправлено в SchoolsW3.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание. Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого. Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности. Авторское право 1999 — 2021 Все права защищены.
Работает на W3.CSS.

Источник

Тренажёры

Начните проходить интерактивные задания прямо сейчас.

Если вы совсем новичок и хотите узнать, что такое HTML, CSS, JavaScript и PHP — этот тренажёр для вас.

Знакомство с веб-разработкой

На практике знакомимся с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.

Тренажёр обновлён 23 июня 2021

Если вы хотите разобраться с основами HTML, CSS, JavaScript и PHP — вам сюда.

Знакомство с HTML и CSS

Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.

Тренажёр обновлён 21 мая 2021

Знакомство с JavaScript

Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы.

Тренажёр обновлён 3 февраля 2021

Знакомство с PHP

Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.

Тренажёр обновлён 23 июня 2021

И ещё море крутых тренажёров для новичков и для опытных

Чтобы увидеть все тренажёры, нужно зарегистрироваться.

Практикум

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

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

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Источник

Практика

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

Аудио и видео

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

Изображения

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

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

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

Основы CSS

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

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

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

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

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

Списки

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

Ссылки

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

Таблицы

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

Текст

Абзацы

Переносы строк

Заголовок первого уровня

Заголовки

TEX

Озон

Площадь круга

Важный текст

Элемент

Рыжая лиса

Шрифт на веб-странице

Шрифт иллюстрации

Шрифт заголовка

Свой шрифт

Размер текста в пикселях

Размер заголовка в em

Размер заголовка в rem

Цвет основного текста

Цвет заголовка

Выворотка заголовка

Курсивный текст

Жирный текст

Нормальная жирность заголовка

Выступающий инициал

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

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

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

Формы

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

Элемент

Многострочный текст

Отправка формы

Картинка в

Очистка формы

Переключатели

Выбор переключателя

Флажки

Поле со списком

Выбор флажка

Раскрывающийся список

Блокировка списка

Блокировка пункта списка

Список множественного выбора

Поиск по сайту

Выбор пунктов списка

Источник

Знакомство с HTML и CSS

Тренажёр обновлён 21 мая 2021

Теория

Обязательный для прохождения материал, теория, задания и испытания.

5 частей , 83 задания , 5 испытаний

Практика

Необязательные, но очень полезные задания. Доступны только по подписке.

16 заданий 1 испытание

Часть 1: Структура HTML-документа

Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.

Часть 1: Структура HTML-документа

Как спроектировать сайт-портфолио

Из чего состоит сайт-портфолио и как правильно спроектировать структуру страницы.

19 заданий 1 испытание

Часть 2: Разметка текста

Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.

Часть 2: Разметка текста

Как оформить сайт-портфолио

Подключаем базовые стили к сайту-портфолио, дорабатываем разметку.

Как опубликовать свой сайт на GitHub Pages

Разберёмся, как можно опубликовать сайт и привязать собственный домен на GitHub Pages.

15 заданий 1 испытание

Часть 3: Ссылки и изображения

Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.

Часть 3: Ссылки и изображения

Навык: создание семантической разметки по макету

Это задача на проектирование информационной архитектуры страниц.

В качестве входных данных верстальщик получает от дизайнера графический макет и опираясь на него должен сделать разметку страницы. Разметка должна быть семантичной, выразительной, включать в себя все содержательные сущности, размеченные подходящими тегами, и не включать декоративные сущности.

Как добавить на сайт-портфолио ссылки и изображения

Скачиваем картинки для сайта, подключаем их и прописываем ссылки на странице.

15 заданий 1 испытание

Часть 4: Основы CSS

Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.

Источник

Знакомство с HTML и CSS

Тренажёр обновлён 21 мая 2021

Теория

Обязательный для прохождения материал, теория, задания и испытания.

5 частей , 83 задания , 5 испытаний

Практика

Необязательные, но очень полезные задания. Доступны только по подписке.

16 заданий 1 испытание

Часть 1: Структура HTML-документа

Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.

Часть 1: Структура HTML-документа

Как спроектировать сайт-портфолио

Из чего состоит сайт-портфолио и как правильно спроектировать структуру страницы.

19 заданий 1 испытание

Часть 2: Разметка текста

Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.

Часть 2: Разметка текста

Как оформить сайт-портфолио

Подключаем базовые стили к сайту-портфолио, дорабатываем разметку.

Как опубликовать свой сайт на GitHub Pages

Разберёмся, как можно опубликовать сайт и привязать собственный домен на GitHub Pages.

15 заданий 1 испытание

Часть 3: Ссылки и изображения

Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.

Часть 3: Ссылки и изображения

Навык: создание семантической разметки по макету

Это задача на проектирование информационной архитектуры страниц.

В качестве входных данных верстальщик получает от дизайнера графический макет и опираясь на него должен сделать разметку страницы. Разметка должна быть семантичной, выразительной, включать в себя все содержательные сущности, размеченные подходящими тегами, и не включать декоративные сущности.

Как добавить на сайт-портфолио ссылки и изображения

Скачиваем картинки для сайта, подключаем их и прописываем ссылки на странице.

15 заданий 1 испытание

Часть 4: Основы CSS

Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.

Источник