Страница с товарами
Страница с товарами
В этом уроке мы создадим страницу с товарами для вашего виртуального магазина, посвященного снегу! Мы погрузимся в мир веб-разработки, фокусируясь на создании страницы, которая представляет ваш ассортимент товаров в стиле "Snow Shop".
Что делает страницу с товарами интересной
В первую очередь, это не просто сборник изображений и цен. Это виртуальный витринный зал, где каждый товар является героем своего рода. Мы научимся создавать красочные карточки товаров, которые не только привлекут внимание, но и эффективно передадут особенности и преимущества каждого продукта.
Как и в предыдущих уроках, мы закрепим такие важные моменты, как: Структурирование контента - как правильно организовать информацию о товарах, чтобы страница была легко воспринимаемой.
Использование тегов HTML - как создавать карточки товаров, вставлять изображения, добавлять текстовые описания и цены.
Оформление с помощью CSS - как применять стили для создания приятного и привлекательного внешнего вида страницы. На этом мы не будем делать акцент в этом уроке, у нас есть целый курс, посвященный CSS (https://coursme.com/css ), где мы подробно обсудим этот аспект.
Что происходит на страничке
Как и на придыдущих страничках у нас есть шапка страницы, которая содержит название "Товары" и навигационное меню с ссылками на главную страницу, страницу "О нас", страницу "Товары" и страницу "Контакты". Это обеспечивает простую навигацию по сайту.
В разделе "Наш ассортимент" представлены три товара с соответствующими изображениями, названиями, описаниями и ценами. Каждый товар имеет кнопку "Добавить в корзину"(сейчса она не работает, но в других наших курсах бы будем разбирать этот момент) для того, чтобы пользователи могли легко выбирать и заказывать интересующие их товары
Страница завершается подвалом, в котором указан год (2024) и название магазина "Snow Shop", а также забавное уточнение: "Все права НЕ защищены", что добавляет немного юмора к общему впечатлению от сайта.
<!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 */
body {
font-family: 'Arial', sans-serif; /* Установка семейства шрифтов и стилей по умолчанию */
margin: 0;
padding: 0;
background-color: #ffffff; /* Установка цвета фона */
}
/* Стили для элемента header */
header {
background-color: #707070; /* Установка цвета фона */
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;
background-color: white; /* Установка цвета фона */
}
/* Стили для каждой статьи (товара) в разделе */
article {
margin-bottom: 20px; /* Установка нижнего отступа для каждой статьи */
border: 1px solid #ddd; /* Добавление рамки и установка цвета рамки */
padding: 10px;
background-color: white; /* Установка цвета фона */
}
article img {
width: 50%; /* Установка ширины изображений для статей */
height: auto; /* Сохранение пропорций изображений */
border: 1px solid #ddd; /* Добавление рамки к изображениям */
}
/* Стили для элемента footer */
footer {
background-color: #707070; /* Установка цвета фона */
color: white; /* Установка цвета текста */
text-align: center;
padding: 10px;
position: fixed; /* Фиксирование подвала внизу видимой области */
bottom: 0;
width: 100%; /* Установка ширины в 100% от видимой области */
}
</style>
</head>
<body>
<!-- Секция заголовка с названием и навигационным меню -->
<header>
<h1>Товары</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>
<p>Цена: 6000 руб.</p>
<button>Добавить в корзину</button>
</article>
<!-- Вторая статья (товар) -->
<article>
<img src="фото/winter-jacket.jpg" alt="Зимняя куртка">
<h3>Зимняя куртка</h3>
<p>Теплая куртка в +5 для НЕ комфортного пребывания на морозе</p>
<p>Цена: 3899 руб.</p>
<button>Добавить в корзину</button>
</article>
<!-- Третья статья (товар) -->
<article>
<img src="фото/snow-goggles.jpg" alt="Снежные очки">
<h3>Снежные очки</h3>
<p>НЕ защитит глаза от яркого света и ветра во время катания на лыжах, но выглядит круто</p>
<p>Цена: 200 руб.</p>
<button>Добавить в корзину</button>
</article>
</section>
<!-- Секция подвала с авторским уведомлением -->
<footer>
<p>© 2024 Snow Shop. Все права НЕ защищены.</p>
</footer>
</body>
</html>
Вот так выглядит наша страница “Товары”:
Давайте разберем код страницы
Внимание! В самом коде есть небольшие комментарии, которые помогают понять, что происходит в коде.
Как я упоминал ранее, мы избегем повторений, так как уже рассмотрели аналогичные моменты в предыдущих уроках. Здесь мы затронем лишь ключевые аспекты.
Секция с товарами
<section>: Обертка для секции с товарами, устанавливает максимальную ширину и центрирует содержимое.<article>: Каждый товар представлен в блоке статьи с изображением, названием, описанием и кнопкой "Добавить в корзину".Этот код создает страницу с товарами. Каждый товар представлен в виде отдельного блока <article>, содержащего изображение, название, описание, цену и кнопку "Добавить в корзину". Изображения, как и ранее, предполагается находятся в папке "фото".
Заключение
Поздравляю! Теперь у вас есть навыки создания страницы с товарами для вашего виртуального магазина. Запомните, что креативность и хорошее визуальное оформление могут сделать ваш веб-сайт более привлекательным для посетителей. Применяйте эти знания и экспериментируйте с дизайном, чтобы создать уникальный и запоминающийся опыт для вашей аудитории.
Будьте первым