Задания на практику

1.

Задачи на практику
Преподаватель: Жарков Алексей Сергеевич

Задача 1: Моя Первая Веб-Страница
Цель: Практика базовой структуры HTML-документа, заголовков, параграфов и ссылок.
Что нужно сделать:
1.
2.
3.
4.
Создайте HTML-файл с названием index.html.
Добавьте стандартную структуру HTML5 (<!DOCTYPE html>, <html>, <head>, <body>).
В <head>:
Укажите кодировку UTF-8.
Добавьте мета-тег для адаптивного отображения на мобильных устройствах (viewport).
Задайте заголовок страницы (<title>) как "Моя Первая Страница".
В <body>:
Создайте главный заголовок (<h1>) с текстом "Добро пожаловать в мой мир!".
Добавьте два параграфа (<p>) с произвольным текстом.
В конце второго параграфа добавьте ссылку (<a>) на сайт Google (или любой другой), с текстом "Посетить
Google". Ссылка должна открываться в новой вкладке.
Ожидаемый результат: Простая HTML-страница с заголовком, двумя параграфами и работающей ссылкой.

3.

Задача 2: Список Дел с Оформлением
Цель: Практика использования списков (упорядоченных и неупорядоченных) и базового CSS для оформления текста.
Что нужно сделать:
1.
2.
3.
4.
Создайте HTML-файл todo.html.
В <body>:
Создайте заголовок <h2> "Мой Список Дел".
Создайте неупорядоченный список (<ul>) из 3-5 пунктов (например: "Купить продукты", "Закончить домашнее
задание", "Позвонить другу").
После него создайте упорядоченный список (<ol>) с 3 пунктами (например: "Утро", "День", "Вечер"), каждый из
которых будет содержать ещё один неупорядоченный список своих под-дел.
Создайте CSS-файл style.css и подключите его к todo.html.
В CSS:
Измените цвет текста всех пунктов неупорядоченного списка на синий.
Увеличьте размер шрифта пунктов упорядоченного списка.
Установите фон страницы (body) на светло-серый.
Ожидаемый результат: Страница со списками, оформленными согласно требованиям CSS.

4.

Задача 3: Карточка Продукта (Box Model)
Цель: Практика понимания блочной модели CSS (margin, padding, border) и центрирования блоков.
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл product-card.html.
В <body> создайте один <div> с классом product-card.
Внутри product-card добавьте:
Изображение (<img>) с любым placeholder-изображением (например, https://via.placeholder.com/200x150) и
атрибутом alt.
Заголовок <h3> с названием продукта.
Параграф <p> с ценой.
Создайте CSS-файл style.css и подключите его.
В CSS:
Для .product-card задайте ширину 250px.
Добавьте 20px внутреннего отступа (padding).
Добавьте 2px сплошную границу (border) любого цвета.
Установите внешние отступы (margin) так, чтобы карточка центрировалась по горизонтали.
Примените легкую тень (box-shadow) к карточке.
Ожидаемый результат: Карточка продукта, аккуратно центрированная, с внутренними отступами, рамкой и тенью.

5.

Задача 4: Горизонтальное Навигационное
Меню (Flexbox)
Цель: Практика использования Flexbox для создания горизонтальной навигации.
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл navbar.html.
В <body> создайте элемент <nav> с классом navbar.
Внутри <nav> создайте неупорядоченный список (<ul>) с 4-5 пунктами (<li>), каждый из которых содержит ссылку
(<a>) (например: "Главная", "О нас", "Услуги", "Контакты").
Создайте CSS-файл style.css и подключите его.
В CSS:
Для .navbar установите фон (например, темно-серый) и используйте display: flex; для горизонтального
расположения элементов.
Для ul внутри .navbar уберите маркеры списка и внутренние отступы.
Для li установите внешние отступы справа, чтобы создать промежутки между пунктами меню.
Для ссылок (a) установите белый цвет текста, уберите подчеркивание и добавьте внутренние отступы для
увеличения области клика.
Добавьте эффект при наведении (:hover) на ссылки (например, изменение цвета фона или текста).
Ожидаемый результат: Горизонтальное навигационное меню с активными ссылками и эффектом наведения.

6.

Задача 5: Секция с Двумя Колонками
(Flexbox)
Цель: Практика использования Flexbox для создания двухколоночного макета.
Что нужно сделать:
1.
2.
3.
4.
5.
6.
7.
Создайте HTML-файл two-columns.html.
В <body> создайте <div> с классом container.
Внутри container создайте два <div> с классами left-column и right-column.
В left-column добавьте заголовок <h2> и 2-3 параграфа текста.
В right-column добавьте заголовок <h2> и изображение (<img>).
Создайте CSS-файл style.css и подключите его.
В CSS:
Для .container установите display: flex; и промежуток 20px; (или justify-content: space-around;).
Для .left-column и .right-column установите фон разного цвета, внутренние отступы и размеры колонки (flex чтобы они равномерно делили доступное пространство или flex-basis для конкретной ширины).
Убедитесь, что содержимое колонок читаемо.
Ожидаемый результат: Две колонки контента, расположенные горизонтально и занимающие равное (или заданное)
пространство внутри контейнера.

7.

Задача 6: Семантическая Разметка
Цель: Практика использования семантических тегов HTML5 для структурирования документа.
Что нужно сделать:
1.
2.
3.
4.
Создайте HTML-файл semantic-page.html.
Разметьте страницу, используя следующие семантические теги:
<header>: Для верхнего колонтитула страницы (логотип, навигация).
<nav>: Для основной навигации.
<main>: Для основного уникального контента страницы.
<article>: Для отдельной, независимой части контента (например, новость или пост в блоге). Внутри <article>
добавьте <h1> и несколько <p>.
<aside>: Для дополнительного контента, связанного с основным, но не являющегося его частью (например,
"Похожие статьи", реклама).
<footer>: Для нижнего колонтитула страницы (копирайт, ссылки).
Создайте CSS-файл style.css и подключите его.
В CSS:
Добавьте фоновый цвет или границу к каждому семантическому тегу (header, nav, main, article, aside, footer),
чтобы визуально отделить их друг от друга.
Установите максимальную ширину для <main> (например, 960px) и отцентрируйте его по горизонтали.
Ожидаемый результат: Визуально разделенная страница, демонстрирующая правильное использование семантических
тегов.

8.

Задача 7: Простая HTML-Таблица с
Оформлением
Цель: Практика создания таблиц и их базового CSS-оформления.
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл table.html.
В <body> создайте таблицу (<table>) для отображения информации о студентах, книгах или товарах.
Таблица должна содержать:
Заголовок таблицы (<caption>).
Заголовок секции (<thead>) с как минимум 3 столбцами (<th>).
Тело таблицы (<tbody>) с как минимум 3 строками (<tr>) данных (<td>).
Создайте CSS-файл style.css и подключите его.
В CSS:
Для table установите width: 100%; и border-collapse: collapse;.
Для th и td добавьте границу (border), внутренние отступы (padding) и выравнивание текста по центру.
Для thead th установите другой фоновый цвет и цвет текста.
Добавьте эффект "зебры" для строк в tbody (например, для каждой четной или нечетной строки задайте
разный фон: (псевдокласс :nth-child(even)).
Ожидаемый результат: Аккуратно оформленная таблица с данными.

9.

Задача 8: Адаптивный Заголовок (Media
Queries)
Цель: Практика использования медиа-запросов (@media) для адаптивного дизайна.
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл responsive-heading.html.
В <body> добавьте заголовок <h1> с текстом "Адаптивный Заголовок".
Создайте CSS-файл style.css и подключите его.
В CSS:
По умолчанию (для больших экранов) установите размер шрифта 4em; и цвет текста #0056b3; для h1.
Используйте медиа-запрос (max-width: 768px) для изменения стилей h1 при ширине экрана менее 768px.
Примените размер шрифта 2.5em; и цвет текста #d9534f;.
Добавьте еще один медиа-запрос (max-width: 480px) для изменения стилей h1 при ширине экрана менее 480px.
Примените размер шрифта 1.5em; и цвет текста #5cb85c;.
Проверьте изменения, изменяя размер окна браузера.
Ожидаемый результат: Заголовок, который меняет размер и цвет в зависимости от ширины экрана.

10.

Задача 9: Простая Форма Обратной Связи
Цель: Практика создания базовой формы с различными типами input, textarea, label и button.
Что нужно сделать:
1.
2.
3.
4.
5.
Создайте HTML-файл contact-form.html.
В <body> создайте форму (<form>) с методом post и действием # (для демонстрации).
Внутри формы добавьте следующие поля, каждое с соответствующим <label> и обернутое в <div> для группировки:
Текстовое поле для имени (input type="text", name="name", required).
Поле для email (input type="email", name="email", required).
Многострочное текстовое поле для сообщения (textarea, name="message", rows="5").
Кнопку отправки (текст "Отправить").
Создайте CSS-файл style.css и подключите его.
В CSS:
Стилизуйте form (например, max-width, padding, border, box-shadow).
Для label сделайте расположения над полями.
Для input и textarea задайте ширину 100%, padding, border и border-radius.
Стилизуйте кнопку отправки (цвет фона, текста, отступы).
Ожидаемый результат: Функциональная, базовая форма обратной связи с визуально разделенными полями.

11.

Задача 10: Галерея Изображений (CSS Grid)
Цель: Практика использования CSS Grid для создания адаптивной галереи изображений.
Что нужно сделать:
1.
2.
3.
4.
5.
6.
Создайте HTML-файл gallery.html.
В <body> создайте <div> с классом gallery-container.
Внутрь gallery-container добавьте 6-9 элементов <div> с классом gallery-item.
В каждый gallery-item добавьте изображение (<img>) с placeholder-изображением (например,
https://via.placeholder.com/150x150) и alt текстом.
Создайте CSS-файл style.css и подключите его.
В CSS:
Для .gallery-container используйте display: grid;.
Установите grid-template-columns так, чтобы на больших экранах было 3 колонки.
Добавьте gap: 15px; между элементами сетки.
Для .gallery-item img сделайте width: 100%; height: auto; display: block;.
Используйте медиа-запрос (max-width: 768px) для изменения grid-template-columns на 2 колонки.
И еще один медиа-запрос (max-width: 480px) для 1 колонки.
Ожидаемый результат: Адаптивная галерея изображений, которая меняет количество колонок в зависимости от ширины
экрана.

English Русский Правила