Um eine Bildergalerie in HTML zu erstellen, folge einfach dieser Schritt-für-Schritt-Anleitung:
Schritt 1: Erstelle die HTML-Grundstruktur
Öffne deinen bevorzugten Texteditor und erstelle ein neues HTML-Dokument. Beginne mit der Grundstruktur, indem du die HTML-, Head- und Body-Tags hinzufügst.
Schritt 2: Füge CSS-Stile hinzu
Um deine Bildergalerie zu gestalten, benötigst du einige CSS-Stile.
Füge innerhalb des Head-Tags einen Link zu einer CSS-Datei oder füge die CSS-Stile direkt zwischen den Style-Tags hinzu. Hier ist ein Beispiel, wie du den CSS-Stil für die Bildergalerie festlegen kannst:
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 200px;
height: 150px;
object-fit: cover;
margin: 5px;
}
</style>
Dieser Stil definiert, dass die Bildergalerie als Flexbox angezeigt wird und jedes Bild eine feste Breite und Höhe hat. Außerdem wird ein Rand von 5 Pixeln um jedes Bild hinzugefügt.
Schritt 3: Füge die Bildergalerie hinzu
Innerhalb des Body-Tags füge einen neuen Bereich hinzu, in dem die Bildergalerie platziert werden soll. Verwende dazu ein Div-Element mit einer Klasse „gallery“, wie im Beispiel unten:
<body>
<div class="gallery">
<!-- Hier kommen die Bilder hin -->
</div>
</body>
Schritt 4: Füge die Bilder hinzu
Innerhalb des Div-Elements mit der Klasse „gallery“ kannst du nun die Bilder hinzufügen. Verwende dazu IMG-Tags mit den entsprechenden Bild-Quellen:
<body>
<div class="gallery">
<img src="bild1.jpg" alt="Bild 1">
<img src="bild2.jpg" alt="Bild 2">
<img src="bild3.jpg" alt="Bild 3">
</div>
</body>
Schritt 5: Speichere und öffne die Galerie
Speichere die HTML-Datei mit einem aussagekräftigen Namen, wie z.B. „bildergalerie.html“. Öffne die Datei in deinem Webbrowser, und voilà, deine Bildergalerie ist fertig!
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 200px;
height: 150px;
object-fit: cover;
margin: 5px;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmU5ZnQzN2Y4OGp5MWNibXFiZDN1M3A4N3R1Mmo3YzZndzQ5NWUydSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Uc68u1ZYfU8SZQ5DWK/giphy.gif" alt="Bild 1">
<img src="https://media.giphy.com/media/fNxOuEFtjYt1ih0crz/giphy.gif" alt="Bild 2">
<img src="https://media.giphy.com/media/4mWXWqjMW74eRUoYtY/giphy.gif" alt="Bild 3">
</div>
</body>
</html>
Bildergalerie
Das war’s! Du hast erfolgreich eine Bildergalerie in HTML erstellt. Du kannst weitere Bilder hinzufügen, indem du einfach weitere IMG-Tags innerhalb des Div-Elements mit der Klasse „gallery“ einfügst. Viel Spaß beim Erstellen deiner eigenen Bildergalerie!
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite