HTML - Web Slide Desk

Einführung in die Web Slide Deck

Hallo da draußen, angehende Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von HTML und erstellen unsere eigene Web-Präsentation. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, Sie durch diesen Prozess zu führen, selbst wenn Sie noch nie eine Zeile Code geschrieben haben. Also, schnallen Sie sich an und tauchen wir ein!

HTML - Web slide Desk

Was ist eine Web Slide Deck?

Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was wir erstellen. Eine Web-Präsentation ist im Grunde eine Präsentation, die in einem Webbrowser läuft. Es ist wie PowerPoint, aber cooler, weil Sie es von Grund auf mit HTML erstellen! Das bedeutet, Sie können darauf jederzeit und überall zugreifen, solange Sie eine Internetverbindung haben.

Einrichten unserer HTML-Dokument

Lassen Sie uns mit der grundlegenden Struktur unseres HTML-Dokuments beginnen. Machen Sie sich keine Sorgen, wenn das initially abschreckend aussieht – wir werden es Schritt für Schritt auseinandernehmen.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein cooler Web-Präsentations-Deck</title>
<style>
/* Später fügen wir hier etwas CSS hinzu */
</style>
</head>
<body>
<!-- Unsere Slides werden hier hin -->
</body>
</html>

Lassen Sie uns das auseinandernehmen:

<!DOCTYPE html> teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt.
<html lang="de"> ist das Wurzelelement unserer HTML-Seite, mit "de" für die deutsche Sprache.
Der <head>-Bereich enthält Metainformationen über das Dokument.
<meta charset="UTF-8"> gibt die Zeichencodierung für das Dokument an.
<meta name="viewport"...> stellt sicher, dass es korrekt auf mobilen Geräten dargestellt wird.
<title> setzt den Titel unserer Webseite.
Der <style>-Tag ist där, wo wir später unser CSS hinzufügen.
Das <body> ist där, wo die sichtbaren Inhalte unserer Präsentation hin gehören.

Erstellen unserer ersten Slide

Nun erstellen wir unsere erste Slide. Wir verwenden <section>-Tags, um jede Slide zu definieren.

<body>
<div class="slideshow-container">
<section class="slide">
<h1>Willkommen in meinem Web-Präsentations-Deck!</h1>
<p>Erstellt von [Dein Name]</p>
</section>
</div>
</body>

Hier haben wir:

Ein <div> mit der Klasse "slideshow-container" hinzugefügt, um alle unsere Slides zu halten.
Eine <section> mit der Klasse "slide" für unsere erste Slide erstellt.
Eine Überschrift <h1> und einen Absatz <p> zu unserer Slide hinzugefügt.

Hinzufügen weiterer Slides

Fügen wir ein paar weitere Slides zu unserem Deck hinzu:

<div class="slideshow-container">
<section class="slide">
<h1>Willkommen in meinem Web-Präsentations-Deck!</h1>
<p>Erstellt von [Dein Name]</p>
</section>

<section class="slide">
<h2>Was wir behandeln werden</h2>
<ul>
<li>HTML Grundlagen</li>
<li>CSS Styling</li>
<li>Einfaches JavaScript</li>
</ul>
</section>

<section class="slide">
<h2>Dankeschön!</h2>
<p>Fragezeichen?</p>
</section>
</div>

Wir haben zwei weitere Slides hinzugefügt, jeweils mit unterschiedlichen Inhaltsstrukturen. Die zweite Slide verwendet eine ungeordnete Liste <ul> für Aufzählungspunkte.

Styling unserer Slides mit CSS

Nun fügen wir unseren Slides etwas Stil hinzu. Wir platzieren dies im <style>-Tag in unserem <head>-Bereich:

<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>

Lassen Sie uns dieses CSS auseinandernehmen:

Wir setzen body und html auf volle Höhe und entfernen Standardränder.
Die .slideshow-container verwendet Flexbox für die Layoutgestaltung und scroll-snap-type für sanftes Sliden.
Jede .slide wird auf volle Breite und Höhe gesetzt, mit zentriertem Inhalt.
Wir verwenden scroll-snap-align, um sicherzustellen, dass Slides an Ort und Stelle snapen.
Verschiedene Hintergrundfarben werden für jede Slide mit :nth-child gesetzt.

Hinzufügen von Navigation Buttons

Um unser Slide Deck benutzerfreundlicher zu gestalten, fügen wir einige Navigation Buttons hinzu:

<body>
<div class="slideshow-container">
<!-- ... Slides hier ... -->
</div>
<button class="prev" onclick="changeSlide(-1)">❮ Zurück</button>
<button class="next" onclick="changeSlide(1)">Weiter ❯</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>

Wir haben hinzugefügt:

"Zurück" und "Weiter" Buttons mit onclick Ereignissen.
Eine changeSlide Funktion in JavaScript, um die Navigation zu handhaben.

Lassen Sie uns diese Buttons stylen:

<style>
/* ... vorherige Stile ... */
.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>

Letzte Touches

Um unsere Navigation flüssig zu gestalten, müssen wir unseren Slides IDs hinzufügen:

<section id="slide1" class="slide">
<h1>Willkommen in meinem Web-Präsentations-Deck!</h1>
<p>Erstellt von [Dein Name]</p>
</section>

<section id="slide2" class="slide">
<h2>Was wir behandeln werden</h2>
<ul>
<li>HTML Grundlagen</li>
<li>CSS Styling</li>
<li>Einfaches JavaScript</li>
</ul>
</section>

<section id="slide3" class="slide">
<h2>Dankeschön!</h2>
<p>Fragezeichen?</p>
</section>

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben gerade Ihr eigenes Web-Präsentations-Deck mit HTML, CSS und einem Hauch von JavaScript erstellt. Dies ist erst der Anfang – Sie können jetzt mit verschiedenen Stilen experimentieren, interaktive Elemente hinzufügen oder sogar Animationen einbinden.

Denken Sie daran, Webentwicklung dreht sich alles um Übung und Kreativität. Haben Sie keine Angst, den Code zu verändern und zu sehen, was passiert. Wer weiß? Vielleicht entdecken Sie etwas Erstaunliches!

Fröhliches Coden, zukünftige Web-Zauberer!

Methoden-Tabelle

Methode	Beschreibung
`document.querySelectorAll()`	Wählt alle Elemente aus, die einem CSS-Selektor entsprechen
`document.querySelector()`	Wählt das erste Element aus, das einem CSS-Selektor entspricht
`Array.from()`	Erzeugt eine neue Array-Instanz aus einem array-ähnlichen Objekt
`indexOf()`	Gibt den ersten Index zurück, an dem ein gegebenes Element im Array gefunden werden kann
`location.hash`	Holt oder setzt den Teil der URL, der nach dem # Symbol folgt

Credits: Image by storyset