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:

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

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

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

Bild 1 Bild 2 Bild 3

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!

Ähnliche Beiträge

bildergalerie html

Über mich