Создание страниц. Главная страница сайта

Создание страниц. Главная страница сайта

Coursme
15 мин.
31 янв. 2024

В этом уроке мы пошагово создадим главную страницу для нашего веб-сайта "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>&copy; 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-код и стили. Это позволит легко разрабатывать и поддерживать каждую страницу проекта, обеспечивая ясность и читаемость кода

Назад
Следующий урок
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Статьи и курсы
Меню