Задания html css

Сборник упражнений и задач по основам HTML

Пару слов о задачнике

Наш задачник по основам HTML содержит стандартные упражнения и задачи с решениями на закрепление теоретических основ излагаемых в учебнике.

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку ‘Результат’ .

Оглавление задачника

Синтаксис HTML

1.1. Скопируйте исходный код нашей первой веб-страницы в свой редактор и для удобства восприятия отформатируйте его. Показать решение.

Условие задачи №1.1

1.2. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.

1.3. Скопируйте исходный код нашей первой веб-страницы в свой редактор, после чего исправьте в нем все ошибки. Показать решение.

Условие задачи №1.3

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

Условие задачи №1.4

1.5. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте одиночный тег
(принудительный разрыв строки). Не забывайте про служебный тег . Показать решение.

Универсальные атрибуты html-элементов

2.1. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Сделайте так, чтобы второе предложение не отображалось в окне браузера. Используйте для этого парный тег и универсальный атрибут hidden. Показать решение.

2.2. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных на разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка «Я первый абзац», а при наведении на второй – «Я второй абзац». Используйте атрибут style, а в качестве его значения свойства CSS : «color: red» и «color: blue» . Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.

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

Условие задачи №2.3

2.4. Скрипт в исходном коде примера позволяет найти в документе элемент с требуемым id и сделать цвет его шрифта красным. Зная это, сделайте текст второго абзаца красным. Показать решение.

Условие задачи №2.4

2.5. Преобразуйте второй абзац в исходном коде примера в редактируемый элемент с проверкой орфографии. Используйте для этого универсальные атрибуты contenteditable и spellcheck. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

Условие задачи №2.5

2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Условие задачи №2.6

Мнемоники и коды Юникод в HTML

3.1. Создайте веб-страницу, содержащую абзац с предложением «Сколько будет ½+⅓ ?». Чтобы задать красный цвет шрифта для суммы, используйте тег , а также универсальный атрибут style со значением «color: red» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

3.2. Создайте веб-страницу, содержащую предложение: «Я открывающий тег «. Для знаков ‘ и ‘>’ используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег и универсальный атрибут style со значением «color: green» . Показать решение.

3.3. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику ‘&’ на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте универсальный атрибут style и значение цвета green , а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег . Показать решение.

3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Практика

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

Аудио и видео

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

Изображения

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

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

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

Основы CSS

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

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

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

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

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

Списки

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

Ссылки

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

Таблицы

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

Текст

• Элемент

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

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

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

Формы

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

htmllab

Задания по основам работы с HTML и CSS

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.

Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.

Задания по CSS-селекторам. Селекторы CSS: css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов. Задания на CSS-селекторы.

Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.

Задания по верстке форм

1. Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в панели навигации Bootstrap.
2. Сверстайте форму диспетчера на сайте
3. Подключить jQuery-плагин для выбора даты/месяца из поля
4. Создайте чекбокс по аналогии с социальной сетью.
5. Создайте форму регистрации посетителя сайта
6. Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.

Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.

Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.

Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.

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

Курс обновлён 20 марта 2020

Теория

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

6 глав , 95 заданий , 5 испытаний

Практика

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

Глава 1: Основы HTML и CSS

В этой главе мы под руководством инструктора Кекса познакомимся с основами вёрстки на примере небольшого лендинга.

Глава 1: Основы HTML и CSS

Как работать с сайтом на своём компьютере

Где взять сайт для экспериментов и как открыть его на своём компьютере. Как вносить в него правки, и проверять, что они применились.

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

Глава 2: Структура HTML-документа

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

Глава 2: Структура HTML-документа

Как выбрать доменное имя

Как придумать для вашего будущего сайта-портфолио подходящее доменное имя и проверить, что оно доступно для регистрации.

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

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

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

Глава 3: Разметка текста

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

Глава 3: Разметка текста

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

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

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

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

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

Как опубликовать сайт в интернете

Разберёмся, как можно опубликовать сайт в интернете, что такое хостинги и чем они отличаются.

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

Глава 4: Ссылки и изображения

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