HTML - Веб-слайды

Введение в веб-слайды

Здравствуйте,future web developers! Сегодня мы отправимся в увлекательное путешествие в мир HTML и создадим собственные веб-слайды. Как ваш добрый сосед по компьютеру, я с радостью провожу вас через этот процесс, даже если вы никогда не писали ни строчки кода. Так что пристегнитесь и lets dive in!

HTML - Web slide Desk

Что такое веб-слайды?

Прежде чем мы начнем программировать, давайте поймем, что мы создаем. Веб-слайды - это, по сути, презентация, которая работает в веб-браузере. Это как PowerPoint, но cooler, потому что вы создаете его с нуля с помощью 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>My Awesome Web Slide Deck</title>
<style>
/* Мы добавим здесь немного CSS позже */
</style>
</head>
<body>
<!-- Наши слайдыойдут сюда -->
</body>
</html>

Давайте разберем это:

<!DOCTYPE html> говорит браузеру, что это HTML5-документ.
<html lang="en"> является корневым элементом нашей HTML-страницы, с "en" для указания языка English.
Раздел <head> содержит метаданные о документе.
<meta charset="UTF-8"> указывает кодировку для документа.
<meta name="viewport"...> обеспечивает правильное рендеринг на мобильных устройствах.
<title> устанавливает заголовок нашей веб-страницы.
Тег <style> - это место, где мы добавим наш CSS позже.
<body> - это место, где будет видимое содержимое наших слайдов.

Создание первого слайда

Теперь давайте создадим наш первый слайд. Мы будем использовать теги <section> для определения каждого слайда.

<body>
<div class="slideshow-container">
<section class="slide">
<h1>Welcome to My Web Slide Deck!</h1>
<p>Создано [Ваше имя]</p>
</section>
</div>
</body>

Здесь мы:

Добавили <div> с классом "slideshow-container" для хранения всех наших слайдов.
Создали <section> с классом "slide" для нашего первого слайда.
Добавили заголовок <h1> и абзац <p> на наш слайд.

Добавление больше слайдов

Давайте добавим еще несколько слайдов в наш набор:

<div class="slideshow-container">
<section class="slide">
<h1>Welcome to My Web Slide Deck!</h1>
<p>Создано [Ваше имя]</p>
</section>

<section class="slide">
<h2>What We'll Cover</h2>
<ul>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>Simple JavaScript</li>
</ul>
</section>

<section class="slide">
<h2>Thank You!</h2>
<p>Any questions?</p>
</section>
</div>

Мы добавили два дополнительных слайда, каждый с различной структурой содержимого. Второй слайд использует unordered list <ul> для отображения маркеров.

Стилизация наших слайдов с помощью CSS

Теперь давайте добавим немного стиля нашим слайдам. Мы поместим это в тег <style> в нашем разделе <head>:

<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.slideshow-container {
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.slide {
min-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
scroll-snap-align: start;
padding: 20px;
box-sizing: border-box;
}
.slide:nth-child(1) { background-color: #f4f4f4; }
.slide:nth-child(2) { background-color: #e8e8e8; }
.slide:nth-child(3) { background-color: #dcdcdc; }
</style>

Давайте разберем этот CSS:

Мы установили body и html на полную высоту и удалили стандартные отступы.
.slideshow-container использует flexbox для макета и scroll-snap-type для плавного скольжения.
Каждая .slide установлена на полную ширину и высоту с выровненным содержимым.
Мы используем scroll-snap-align для обеспеченияfixации слайдов при прокрутке.
Разные цвета фона установлены для каждого слайда с помощью :nth-child.

Добавление навигационных кнопок

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

<body>
<div class="slideshow-container">
<!-- ... слайды здесь ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ Prev</button>
<button class="next" onclick="changeSlide(1)">Next ❯</button>

<script>
function changeSlide(n) {
const slides = document.querySelectorAll('.slide');
const currentSlide = document.querySelector('.slide:target') || slides[0];
let index = Array.from(slides).indexOf(currentSlide);
index = (index + n + slides.length) % slides.length;
location.hash = '#' + slides[index].id;
}
</script>
</body>

Мы добавили:

Кнопки "Prev" и "Next" с onclick событиями.
Функцию changeSlide на JavaScript для обработки навигации.

Давайте стилизуем эти кнопки:

<style>
/* ... предыдущие стили ... */
.prev, .next {
position: fixed;
top: 50%;
padding: 10px;
color: white;
background-color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

Финальные штрихи

Чтобы сделать нашу навигацию более плавной, нам нужно добавить ID нашим слайдам:

<section id="slide1" class="slide">
<h1>Welcome to My Web Slide Deck!</h1>
<p>Создано [Ваше имя]</p>
</section>

<section id="slide2" class="slide">
<h2>What We'll Cover</h2>
<ul>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>Simple JavaScript</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>Thank You!</h2>
<p>Any questions?</p>
</section>

Заключение

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

Помните, веб-разработка - это все о практике и creativity. Не бойтесь править код и смотреть, что произойдет. Кто знает? Вы можете открыть что-то удивительное!

Счастливого кодирования, future web wizards!

Таблица методов

Method	Описание
`document.querySelectorAll()`	Выбирает все элементы, соответствующие CSS-селектору
`document.querySelector()`	Выбирает первый элемент, соответствующий CSS-селектору
`Array.from()`	Создает новый экземпляр Array из объектно-подобного объекта
`indexOf()`	Возвращает первый индекс, в котором можно найти данный элемент в массиве
`location.hash`	Получает/устанавливает часть URL, которая следует после符号 #

Credits: Image by storyset