Лабораторная работа: Верстка содержимого сайта

Цель:
Научиться применять навыки верстки для создания структурированной, адаптивной и эстетичной веб-страницы, используя HTML и CSS.

Критерии оценивания:

• Применяет навыки верстки для создания структуры сайта.
• Использует CSS для стилизации элементов.
• Создает адаптивный макет, корректно отображаемый на разных устройствах.

Ход работы:

1. Подготовительный этап

• Ознакомьтесь с основами HTML и CSS.
• Убедитесь, что умеете работать с основными свойствами CSS:
  • Шрифты: font-family, font-size, color.
  • Отступы: margin, padding.
  • Размеры: width, height.
  • Расположение элементов: display, flexbox, grid.
• Подготовьте текстовый редактор (например, Visual Studio Code) и браузер для тестирования.

2. Создание HTML-документа

• Создайте новый файл с расширением .html.
• Добавьте базовую структуру HTML:

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Верстка содержимого сайта</title>

<link rel=»stylesheet» href=»styles.css»>

</head>

<body>

<!— Основной контент —>

</body>

</html>

3. Добавление содержимого HTML

• Создайте структуру страницы:

<header>

<h1>Мой первый сайт</h1>

<nav>

<ul>

<li><a href=»#about»>Обо мне</a></li>

<li><a href=»#portfolio»>Портфолио</a></li>

<li><a href=»#contact»>Контакты</a></li>

</ul>

</nav>

</header>

<main>

<section id=»about»>

<h2>Обо мне</h2>

<p>Привет! Меня зовут Алекс, я веб-разработчик. Люблю создавать красивые и удобные сайты.</p>

</section>

<section id=»portfolio»>

<h2>Мои проекты</h2>

<div class=»projects»>

<div class=»project»>

<h3>Проект 1</h3>

<p>Описание проекта 1</p>

</div>

<div class=»project»>

<h3>Проект 2</h3>

<p>Описание проекта 2</p>

</div>

</div>

</section>

</main>

<footer>

<p>&copy; 2024 Мой сайт</p>

</footer>

4. Добавление CSS для стилизации

• Создайте файл styles.css и подключите его к HTML-документу.
• Добавьте стили для основных элементов:

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;

background-color: #f9f9f9;

}

header {

background: #333;

color: #fff;

padding: 1rem 0;

text-align: center;

}

nav ul {

list-style: none;

padding: 0;

}

nav ul li {

display: inline;

margin: 0 10px;

}

nav ul li a {

color: #fff;

text-decoration: none;

}

main {

padding: 2rem;

}

.projects {

display: flex;

gap: 20px;

}

.project {

background: #fff;

padding: 1rem;

border: 1px solid #ddd;

border-radius: 5px;

flex: 1;

}

footer {

background: #333;

color: #fff;

text-align: center;

padding: 1rem 0;

}

5. Добавление адаптивности

• Сделайте сайт адаптивным с помощью медиа-запросов:

@media (max-width: 768px) {

.projects {

flex-direction: column;

}

}

6. Проверка работы

• Сохраните все файлы и откройте HTML-документ в браузере.
• Проверьте корректность отображения на разных устройствах или в инструментах разработчика (DevTools).

7. Оформление отчета

• Включите:
  • Полный HTML и CSS-код.
  • Скриншот результата в браузере.
  • Краткое описание шагов, выполненных в работе.

Пример задания:
Создайте веб-страницу для персонального портфолио, включающую:

• Заголовок и меню навигации.
• Раздел с кратким описанием себя.
• Блок с проектами (два-три проекта).
• Нижний колонтитул с копирайтом.

Советы:

• Используйте Flexbox для упрощения расположения элементов.
• Убедитесь, что шрифты и цвета обеспечивают хорошую читаемость.
• Проверяйте адаптивность на мобильных устройствах.

Ожидаемый результат:

• Готовый веб-документ с контентом, оформленным с помощью HTML и CSS.
• Эстетичная, структурированная и адаптивная веб-страница.