Создание страниц. Главная страница сайта
Создание страниц. Главная страница сайта
В этом уроке мы пошагово создадим главную страницу для нашего веб-сайта "Snow Shop". Начнем с организации файлов, создадим главную страницу и детально рассмотрим ее структуру и стили.
Создайте отдельные файлы для каждой страницы вашего сайта внутри папки "SnowShop". В моем случае сайт будет состоять из четырех страниц, каждая из которых будет заполнена уникальной информацией. С этого урока мы будем подробно рассматривать содержимое каждой страницы.
Давайте назовем эти файлы:
- index.html (главная страница)
- about.html (страница "О нас")
- products.html (страница с товарами)
- contact.html (страница с формой отправки данных)
Также не забудьте создать отдельную папку "фото", где будут храниться все изображения
Таким образом, вы структурируете ваш проект, обеспечивая легкость и ясность в разработке и поддержке каждой страницы.
Откроем файл index.html в Visual Studio Code и приступим к работе. Код ниже представляет собой базовую структуру HTML-страницы с заголовком, навигацией, секцией популярных товаров и подвалом.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Мета-информация о кодировке и параметрах отображения -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Заголовок веб-страницы -->
<title>Snow Shop - Главная</title>
<!-- Внутренние стили CSS для веб-страницы -->
<style>
/* Общие стили для улучшения внешнего вида */
body {
font-family: 'Arial', sans-serif; /* Установка семейства шрифтов и стилей по умолчанию */
margin: 0;
padding: 0;
background-color: #f4f4f4; /* Установка цвета фона */
}
/* Стили для элемента header */
header {
background-color: #6d6d6d; /* Установка цвета фона */
color: white; /* Установка цвета текста */
padding: 10px;
text-align: center;
}
/* Стили для навигационного меню */
nav ul {
list-style-type: none; /* Убрать маркеры списка */
margin: 0;
padding: 0;
}
nav li {
display: inline; /* Отображение пунктов списка горизонтально */
margin-right: 15px; /* Установка правого отступа для пунктов списка */
}
/* Стили для основного раздела веб-страницы */
section {
max-width: 800px; /* Установка максимальной ширины раздела */
margin: auto; /* Центрирование раздела на странице */
padding: 20px;
}
/* Стили для каждой статьи (товара) в разделе */
article {
margin-bottom: 20px; /* Установка нижнего отступа для каждой статьи */
border: 1px solid #ddd; /* Добавление рамки и установка цвета рамки */
padding: 10px;
background-color: white; /* Установка цвета фона */
}
article img {
width: 50%; /* Установка ширины изображения на 50% родительского контейнера */
height: auto; /* Поддерживаем пропорции изображения */
border: 1px solid #ddd; /* Добавление рамки к изображениям */
}
/* Стили для элемента footer */
footer {
background-color: #333; /* Установка цвета фона */
color: white; /* Установка цвета текста */
text-align: center;
padding: 10px;
position: fixed; /* Фиксирование подвала внизу видимой области */
bottom: 0;
width: 100%; /* Установка ширины в 100% от видимой области */
}
</style>
</head>
<body>
<!-- Секция заголовка с названием и навигационным меню -->
<header>
<h1>Добро пожаловать в Snow Shop!</h1>
<!-- Навигационное меню с ссылками на различные страницы -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
<li><a href="products.html">Товары</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
</header>
<!-- Основной раздел с контентом, включающим заголовок и три статьи (товара) -->
<section>
<h2>Популярные товары</h2>
<!-- Первая статья (товар) -->
<article>
<img src="фото/snowboard.jpg" alt="Сноуборд">
<h3>Сноуборд</h3>
<p>Отличный способ сломать ноги!</p>
</article>
<!-- Вторая статья (товар) -->
<article>
<img src="Фото/winter-jacket.jpg" alt="Зимняя куртка">
<h3>Зимняя куртка</h3>
<p>Теплая куртка в +5 для НЕ комфортного пребывания на морозе.</p>
</article>
<!-- Третья статья (товар) -->
<article>
<img src="фото/snow-goggles.jpg" alt="Снежные очки">
<h3>Снежные очки</h3>
<p>НЕ защитит глаза от яркого света и ветра во время катания на лыжах, но выглядит круто</p>
</article>
</section>
<!-- Секция подвала с авторским уведомлением -->
<footer>
<p>© 2024 Snow Shop. Все права НЕ защищены.</p>
</footer>
</body>
</html>
Вот так выглядит наша главная страница index.html:
После сохранения внесенных изменений, откройте файл в вашем веб-браузере, чтобы увидеть результат.
Разбор структуры и стилей внутри HTML-кода
В этом коде мы детально разберем весь HTML. В последующем мы будем опускать эти моменты, чтобы избежать повторений .
Внимание! В самом коде есть небольшие комментарии, которые помогают понять, что происходит в коде.
Общая структура
<!DOCTYPE html>: Объявляет тип документа HTML5.<head>: Содержит метаинформацию о документе (кодировка, viewport, заголовок страницы).<title>: Устанавливает заголовок страницы, отображаемый во вкладке браузера.<body>: Содержит основное содержимое страницы.
Заголовок и навигация
<header>: Группирует в себе заголовок страницы и навигацию.
<h1>: Заголовок первого уровня, используется для названия магазина.
<nav>: Обозначает блок с навигацией.
<ul>: Создает неупорядоченный список.
<li>: Элемент списка.
<a>: Гиперссылка, используется для создания переходов между страницами.
Секция популярных товаров
<section>: Группирует контент внутри основной части страницы.<h2>: Заголовок второго уровня, указывает на секцию с популярными товарами.<article>: Определяет независимый, самодостаточный контент (в данном случае, информацию о товарах).<img>: Тег для вставки изображения. src указывает путь к файлу изображения, alt – альтернативный текст для случая, если изображение не загрузится.
Подвал
<footer>: Обозначает нижнюю часть страницы.<p>: Абзац текста. Здесь используется для текста с копирайтом и указания года.
CSS-часть (вставлена в <style> внутри <head>)
Стили для <body>
font-family: Устанавливает семейство шрифта.margin, padding: Устанавливают отступы и поля для элемента <body>.background-color: Задает цвет фона.
Стили для <header>
background-color, color, padding, text-align: Стили для придания хорошего внешнего вида верхней части страницы.
Стили для <nav>, <ul>, <li>, <a>
list-style-type: Убирает маркеры перед элементами списка.display, margin-right: Устанавливают блочное отображение и отступы для элементов навигации.
Стили для <section> и <article>
max-width, margin, padding: Устанавливают максимальную ширину, отступы и поля для блока с популярными товарами.border, background-color: Добавляют границу и фон для каждого товара.img: Устанавливает стили для изображений товаров, делая их адаптивными.
Стили для <footer>
background-color, color, text-align, padding, position, bottom, width: Устанавливают стили для придания хорошего внешнего вида подвалу.
Обратите внимание, что стили добавлены внутри тега <style> в <head>. В реальных проектах часто применяют внешние CSS-файлы, но в данном примере стили встроены для простоты.
Заключение
В данном уроке мы успешно создали основу для главной страницы веб-сайта "Snow Shop", структурировав файлы, организовав папки и подробно разобрав HTML-код и стили. Это позволит легко разрабатывать и поддерживать каждую страницу проекта, обеспечивая ясность и читаемость кода
Будьте первым