Лаб. работа “Основы HTML и CSS”
Веб-технологии и программирование
Практика
Цель работы
Освоение основ HTML и CSS для создания простых веб-страниц.
Задания
HTML
- Изучите теоретическую информацию по HTML и CSS.
- Создайте файл с расширением “.html”.
- Используя HTML, создайте простую веб-страницу со следующим содержанием:
- Заголовок страницы.
- Навигационное меню с несколькими пунктами (например, “Главная”, “О нас”, “Контакты”).
- Разделы с основной информацией (например, “О нас”, “Наши услуги”, “Контактная информация”).
- Подвал страницы с информацией об авторских правах и, возможно, контактной информацией.
- Используйте структурированный HTML-код с соответствующими тегами для каждой части страницы (например,
<header>
,<nav>
,<section>
,<footer>
). - Примените базовые стили CSS для улучшения внешнего вида страницы.
- Убедитесь, что страница корректно отображается в веб-браузере.
Дополнительные задания:
- Добавьте изображения или другие медиафайлы на страницу.
CSS
Создайте файл с расширением “.css” для добавления стилей к вашей веб-странице.
Используя CSS, выполните следующие задачи:
- Измените цвет фона страницы.
- Измените цвет текста для всех элементов на странице.
- Установите определенные шрифты и размеры шрифтов для заголовков (
<h1>
,<h2>
,<h3>
и т. д.) и текстовых блоков (<p>
). - Установите размеры и цвет рамок для изображений (
<img>
). - Создайте стили для ссылок (
<a>
), включая цвет, подчеркивание и эффект при наведении. - Используйте селекторы классов и идентификаторов для стилизации определенных элементов на странице.
- Примените адаптивные стили с помощью медиа-запросов для определения различных стилей в зависимости от размера экрана устройства.
Убедитесь, что стили корректно применяются к вашей веб-странице и улучшают ее внешний вид.
При необходимости, протестируйте вашу веб-страницу на разных устройствах или разрешениях экрана, чтобы убедиться, что стили отзывчивы и хорошо адаптированы под разные условия.
Дополнительные задания:
- Используйте CSS-анимации для добавления анимированных эффектов к элементам вашей страницы.
- Создайте сложные макеты с помощью Flexbox или Grid Layout
Таблицы
- Используя HTML, создайте таблицу с информацией о студентах, включающую следующие столбцы:
- Имя студента
- Фамилия студента
- Возраст студента
- Средний балл студента
- Заполните таблицу данными для нескольких студентов (минимум 5 записей).
- Используйте атрибуты
border
,cellpadding
,cellspacing
для стилизации таблицы. - Добавьте заголовки для каждого столбца таблицы.
- Используйте атрибуты
colspan
иrowspan
для объединения ячеек в таблице (например, для создания объединенной ячейки с названием “Студенты”). - Примените стили CSS для улучшения внешнего вида таблицы (опционально).
- Убедитесь, что таблица корректно отображается в веб-браузере.
Дополнительные задания:
- Добавьте ссылки или изображения в ячейки таблицы.
- Создайте таблицу с заголовками в строках (
<th>
), а не в колонках (<td>
). - Используйте атрибуты
thead
,tbody
,tfoot
для логического разделения таблицы.
Формы
- Используя HTML, создайте форму для регистрации пользователя со следующими полями:
- Имя пользователя (текстовое поле)
- Фамилия пользователя (текстовое поле)
- Email (текстовое поле)
- Пароль (поле для ввода пароля)
- Подтверждение пароля (поле для повторного ввода пароля)
- Пол (выпадающий список или радиокнопки)
- Дата рождения (поле для выбора даты)
- Согласие на обработку персональных данных (флажок)
- Кнопка “Отправить” для отправки формы
- Добавьте атрибуты
placeholder
,required
и другие соответствующие атрибуты для улучшения пользовательского опыта и валидации данных. - При необходимости, используйте атрибуты
pattern
иtitle
для добавления пользовательской валидации (например, для проверки правильности ввода email). - Убедитесь, что форма корректно отображается в веб-браузере и элементы формы выглядят привлекательно.
- При необходимости, примените стили CSS для улучшения внешнего вида формы.
Дополнительные задания:
- Используйте HTML5 атрибуты для более современного и удобного интерфейса (например,
type="email"
,type="date"
,type="password"
). - Создайте другие типы форм (например, форма обратной связи, форма заказа товара и т. д.).