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?

    bildergalerie        html   
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

Beiträge die dich Interessieren könnten 😌

Whatsapp: Ton für Mitteilungen ändern – So gehts

Der Standard-Ton für Mitteilungen kann mit der Zeit jedoch etwas langweilig werden. Wenn du also...

Whatsapp: Verknüpfte Geräte löschen – So gehts

Oftmals haben wir jedoch mehr als ein Gerät, das mit WhatsApp verbunden ist. Vielleicht hast...

Whatsapp: Telefonnummer ändern – So gehts

Sei es aufgrund eines Anbieterwechsels oder einfach nur aus privaten Gründen. Wenn du dich fragst...

Whatsapp: Nachricht löschen – So gehts

Manchmal kann es jedoch vorkommen, dass wir eine Nachricht versehentlich senden oder dass wir eine...

Whatsapp: Zuletzt verwendete Smileys löschen

Beim Verfassen von Nachrichten verwenden wir oft Emojis oder Smileys, um unsere Gefühle auszudrücken. Manchmal...

Whatsapp: Chat exportieren – So gehts

Manchmal möchten wir jedoch wichtige Chats speichern oder sichern, sei es aus sentimentalen Gründen oder...

Whatsapp: Umfrage erstellen – So gehts

Eine tolle Möglichkeit, um schnell und einfach eine Meinungsumfrage unter deinen Kontakten zu starten, ist...

Telegram: Nutzer melden – So gehts

Es ist wichtig, solche Vorfälle zu melden, um eine angenehme und respektvolle Umgebung für alle...

Telegram: Keine Benachrichtigungen – iPhone

Es kann frustrierend sein, wenn du keine Telegram-Benachrichtigungen auf deinem iPhone erhältst. Glücklicherweise gibt es...

Telegram: Bedienungsanleitung – So gehts

In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du die Telegram Bedienungsanleitung finden...

Telegram: Gruppe erstellen – So gehts

Das Erstellen einer Gruppe in Telegram kann sehr nützlich sein, wenn du mit einer größeren...

Telegram: Zugriff auf Kamera erlauben

Wenn du in Telegram den Zugriff auf deine Kamera erlauben möchtest, kannst du ganz einfach...

Telegram: Sticker erstellen – So gehts

Mit Telegramm, kannst du sogar deine eigenen individuellen Sticker erstellen. In dieser Schritt-für-Schritt Anleitung zeige...

Telegram: Zugriff auf Fotos erlauben – So gehts

Um in Telegramm den Zugriff auf Fotos zu erlauben, gibt es eine einfache Schritt-für-Schritt Anleitung...

Telegram: Zugriff auf Kontakte verweigern

Obwohl es viele Funktionen bietet, möchten einige Benutzer möglicherweise den Zugriff auf ihre Kontakte in...