Как создать галерею на веб-странице с HTML и CSS для новичков

Содержание статьи

Введение

Галерея на веб-странице — это не просто красивый элемент дизайна, это способ представить ваши изображения, проекты, продукты и истории таким образом, чтобы они привлекли и удержали внимание вашей аудитории. В этой статье мы рассмотрим, как с помощью HTML и CSS создать простую, но эффективную галерею, которая будет хорошо смотреться на любом устройстве.

HTML (HyperText Markup Language) — это каркас вашего веб-сайта, тогда как CSS (Cascading Style Sheets) используется для стилизации и визуального оформления. Мы объединим эти две технологии для создания функциональной галереи.

Основы HTML для Галереи

Создание структуры HTML

Для начала создадим простой HTML-документ, который будет служить основой для нашей галереи:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Галерея</title>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Описание изображения 1">
        <img src="image2.jpg" alt="Описание изображения 2">
        <!-- Больше изображений -->
    </div>
</body>
</html>

В этом блоке кода мы создали div с классом gallery, который будет служить контейнером для наших изображений. Каждое изображение добавляется с помощью тега img, где src указывает путь к файлу изображения, а alt содержит описание изображения, которое будет отображаться, если изображение не может быть загружено, и помогает в поисковой оптимизации и доступности.

Использование семантических тегов HTML5, таких как `figure` и `figcaption`

Семантические теги помогают улучшить структуру документа и делают его более понятным для поисковых систем и вспомогательных технологий. Для каждого изображения в галерее мы можем использовать теги figure и figcaption для группировки изображения и его описания:

<div class="gallery">
    <figure>
        <img src="image1.jpg" alt="Описание изображения 1">
        <figcaption>Описание изображения 1</figcaption>
    </figure>
    <figure>
        <img src="image2.jpg" alt="Описание изображения 2">
        <figcaption>Описание изображения 2</figcaption>
    </figure>
    <!-- Больше изображений -->
</div>

Стилизация Галереи с CSS

Основы CSS для стилизации изображений

Для начала добавим базовые стили, чтобы наши изображения выглядели аккуратно и эстетично. Включим эти стили в наш HTML-документ внутри тега <head>:

<style>
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery img {
    border: 1px solid #ccc;
    padding: 5px;
    width: calc(100% / 3 - 10px);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery figure {
    margin: 0;
    flex-basis: calc(100% / 3 - 10px);
}

.gallery figcaption {
    text-align: center;
    padding: 5px 0;
}
</style>

Здесь мы использовали Flexbox для создания трехколоночной сетки. flex-wrap: wrap; позволяет элементам переноситься на следующую строку, если не хватает места. С помощью gap мы добавляем промежуток между элементами галереи. Стиль border, padding и box-shadow придают каждому изображению аккуратные границы и легкую тень для лучшего визуального отделения от фона.

Создание сетки изображений

Мы уже начали создание сетки с помощью Flexbox, но для более сложных сеток можно использовать CSS Grid. Например, если мы хотим, чтобы одно из изображений было в два раза шире остальных:

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: auto;
}

.gallery figure {
    margin: 0;
}

Адаптивная верстка галереи

Чтобы наша галерея хорошо смотрелась на устройствах с различной шириной экрана, мы добавим медиа-запросы:

@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .gallery figure {
        flex-basis: calc(100% / 2 - 10px);
    }
}

@media (max-width: 400px) {
    .gallery {
        grid-template-columns: 1fr;
    }

    .gallery figure {
        flex-basis: 100%;
    }
}

Теперь, когда ширина экрана устройства уменьшается до 600px, сетка автоматически перестраивается для отображения двух элементов в ряд, а при 400px — каждый элемент галереи занимает всю ширину контейнера.

Расширенные Техники для Галереи

Эффекты при наведении

Эффекты при наведении могут добавить интерактивность вашей галерее, например, увеличивая изображение или меняя его прозрачность при наведении курсора. Добавим несколько простых CSS-анимаций:

.gallery img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

Здесь transition указывает, что изменение свойств transform и opacity должно происходить плавно в течение 0.3 секунд. При наведении курсора мы увеличиваем изображение (scale(1.05)) и делаем его немного прозрачным (opacity: 0.8).

Модальные окна для полноразмерного просмотра

Модальные окна позволяют пользователю увидеть изображения в полном размере без перехода на новую страницу. Для создания модального окна нам понадобится немного JavaScript, но сначала подготовим HTML и CSS:

<!-- Модальное окно -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
    <div id="caption"></div>
</div>

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

И небольшой скрипт для управления показом и скрытием модального окна:

<script>
var modal = document.getElementById("myModal");
var images = document.getElementsByClassName("gallery")[0].getElementsByTagName("img");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");

for (var i = 0; i < images.length; i++) {
    images[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
    modal.style.display = "none";
}
</script>

В этом JavaScript коде мы добавляем обработчик события onclick к каждому изображению в галерее, который открывает модальное окно и отображает кликнутое изображение. Кнопка закрытия (span с классом .close) скрывает модальное окно при нажатии.

Оптимизация Галереи (продолжение)

Ленивая загрузка изображений (продолжение)

Для улучшения производительности, особенно на страницах с большим количеством изображений, мы можем использовать ленивую загрузку. Это позволяет браузеру загружать изображения по мере прокрутки страницы, вместо того чтобы загружать их все сразу. В HTML это можно сделать, добавив атрибут loading="lazy" к тегу img:

<img src="image1.jpg" alt="Описание изображения 1" loading="lazy">

Это простое изменение подскажет современным браузерам отложить загрузку изображений, которые находятся вне видимой области экрана.

Доступность и SEO

Доступность и поисковая оптимизация (SEO) важны для того, чтобы ваша галерея была полезна и доступна всем пользователям, а также хорошо индексировалась поисковыми системами. Убедитесь, что каждое изображение в вашей галерее сопровождается атрибутом alt, содержащим описание изображения:

<img src="image1.jpg" alt="Описание изображения 1">

Помимо этого, убедитесь, что ваша галерея доступна для навигации с клавиатуры и вспомогательных технологий. Это может потребовать добавления дополнительных атрибутов ARIA и управления фокусом в вашем JavaScript-коде.

Заключение

Создание галереи с использованием HTML и CSS — это отличный способ улучшить визуальный аспект вашего сайта и представить изображения или продукты. В этой статье мы рассмотрели основы создания структуры галереи с помощью HTML, стилизации с использованием CSS, добавления интерактивности и оптимизации для производительности и доступности.

Мы надеемся, что эти знания помогут вам создать свою собственную галерею, которая будет не только красивой, но и функциональной. Не бойтесь экспериментировать и добавлять свои собственные стили и функции. Веб-разработка — это творческий процесс, и каждый проект уникален.

Дополнительные ресурсы

MDN Web Docs — обширная база знаний по HTML, CSS и JavaScript.
CSS-Tricks — советы и уловки для работы с CSS, включая гайды по Flexbox и Grid.
A11y Project — ресурс по доступности веб-сайтов с чеклистом для разработчиков.

Не забывайте тестировать вашу галерею на разных устройствах и браузерах, и помните о важности доступности и SEO. Теперь, когда вы освоили основы, вы можете начать создавать галереи, которые привлекут и удержат внимание ваших пользователей. Удачи в разработке!