Лаб. работа "Основы HTML и CSS"

Цель работы

Освоение основ HTML и CSS для создания простых веб-страниц.

Задания

HTML

1. Изучите теоретическую информацию по HTML и CSS.
2. Создайте файл с расширением “.html”.
3. Используя HTML, создайте простую веб-страницу со следующим содержанием:
   • Заголовок страницы.
   • Навигационное меню с несколькими пунктами (например, “Главная”, “О нас”, “Контакты”).
   • Разделы с основной информацией (например, “О нас”, “Наши услуги”, “Контактная информация”).
   • Подвал страницы с информацией об авторских правах и, возможно, контактной информацией.
4. Используйте структурированный HTML-код с соответствующими тегами для каждой части страницы (например, <header>, <nav>, <section>, <footer>).
5. Примените базовые стили CSS для улучшения внешнего вида страницы.
6. Убедитесь, что страница корректно отображается в веб-браузере.

Дополнительные задания:

1. Добавьте изображения или другие медиафайлы на страницу.

CSS

1. Создайте файл с расширением “.css” для добавления стилей к вашей веб-странице.

2. Используя CSS, выполните следующие задачи:

   • Измените цвет фона страницы.
   • Измените цвет текста для всех элементов на странице.
   • Установите определенные шрифты и размеры шрифтов для заголовков (<h1>, <h2>, <h3> и т. д.) и текстовых блоков (<p>).
   • Установите размеры и цвет рамок для изображений (<img>).
   • Создайте стили для ссылок (<a>), включая цвет, подчеркивание и эффект при наведении.
   • Используйте селекторы классов и идентификаторов для стилизации определенных элементов на странице.
   • Примените адаптивные стили с помощью медиа-запросов для определения различных стилей в зависимости от размера экрана устройства.

3. Убедитесь, что стили корректно применяются к вашей веб-странице и улучшают ее внешний вид.

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

Дополнительные задания:

1. Используйте CSS-анимации для добавления анимированных эффектов к элементам вашей страницы.
2. Создайте сложные макеты с помощью Flexbox или Grid Layout

Таблицы

1. Используя HTML, создайте таблицу с информацией о студентах, включающую следующие столбцы:
   • Имя студента
   • Фамилия студента
   • Возраст студента
   • Средний балл студента
2. Заполните таблицу данными для нескольких студентов (минимум 5 записей).
3. Используйте атрибуты border, cellpadding, cellspacing для стилизации таблицы.
4. Добавьте заголовки для каждого столбца таблицы.
5. Используйте атрибуты colspan и rowspan для объединения ячеек в таблице (например, для создания объединенной ячейки с названием “Студенты”).
6. Примените стили CSS для улучшения внешнего вида таблицы (опционально).
7. Убедитесь, что таблица корректно отображается в веб-браузере.

Дополнительные задания:

1. Добавьте ссылки или изображения в ячейки таблицы.
2. Создайте таблицу с заголовками в строках (<th>), а не в колонках (<td>).
3. Используйте атрибуты thead, tbody, tfoot для логического разделения таблицы.

Формы

1. Используя HTML, создайте форму для регистрации пользователя со следующими полями:
   • Имя пользователя (текстовое поле)
   • Фамилия пользователя (текстовое поле)
   • Email (текстовое поле)
   • Пароль (поле для ввода пароля)
   • Подтверждение пароля (поле для повторного ввода пароля)
   • Пол (выпадающий список или радиокнопки)
   • Дата рождения (поле для выбора даты)
   • Согласие на обработку персональных данных (флажок)
   • Кнопка “Отправить” для отправки формы
2. Добавьте атрибуты placeholder, required и другие соответствующие атрибуты для улучшения пользовательского опыта и валидации данных.
3. При необходимости, используйте атрибуты pattern и title для добавления пользовательской валидации (например, для проверки правильности ввода email).
4. Убедитесь, что форма корректно отображается в веб-браузере и элементы формы выглядят привлекательно.
5. При необходимости, примените стили CSS для улучшения внешнего вида формы.

Дополнительные задания:

1. Используйте HTML5 атрибуты для более современного и удобного интерфейса (например, type="email", type="date", type="password").
2. Создайте другие типы форм (например, форма обратной связи, форма заказа товара и т. д.).