veröffentlicht am: 14. November 2023
HTML: Bildergallerie erstellen – So gehts
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!
Gesamter Code
<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>Ergebnis
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!
Hat dir der Beitrag gefallen?
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
Whatsapp: Ton für Mitteilungen ändern – So gehts
Whatsapp: Verknüpfte Geräte löschen – So gehts
Whatsapp: Telefonnummer ändern – So gehts
Whatsapp: Nachricht löschen – So gehts
Whatsapp: Zuletzt verwendete Smileys löschen
Whatsapp: Chat exportieren – So gehts
Whatsapp: Umfrage erstellen – So gehts
Telegram: Nutzer melden – So gehts
Telegram: Keine Benachrichtigungen – iPhone
Telegram: Bedienungsanleitung – So gehts
Telegram: Gruppe erstellen – So gehts
Telegram: Zugriff auf Kamera erlauben
Telegram: Sticker erstellen – So gehts
Telegram: Zugriff auf Fotos erlauben – So gehts