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

Веб-технологии и программирование
Практика
Автор

Бизюк Андрей

Дата публикации

29 февраля 2024 г.

Цель работы

Освоение основ 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. Создайте другие типы форм (например, форма обратной связи, форма заказа товара и т. д.).
Наверх