Grafiken in HTML

Bilder und Grafiken machen Webseiten anschaulicher. Mit dem HTML-Element <img> können Bilder in eine Webseite eingebunden werden. Mit CSS lassen sich Größe, Rahmen, Transparenz und Hintergrundbilder gestalten.

1. Grafiken einfügen

Mit dem Element <img> wird ein Bild eingefügt. Das Attribut src gibt den Speicherort an. Das Attribut alt enthält eine Bildbeschreibung.

HTML-Code

<img
    src="/images/landschaft.jpg"
    alt="Landschaft mit Natur"
    width="400"
>

Ergebnis

Erklärung

Der Browser lädt die Datei landschaft.jpg aus dem Ordner images. Die Bildbreite beträgt 400 Pixel. Der Alternativtext beschreibt das Bild, wenn es nicht angezeigt werden kann.

2. Grafiken skalieren

Mit width und height kann die Größe eines Bildes verändert werden. Wenn nur die Breite angegeben wird, bleibt das Seitenverhältnis normalerweise erhalten.

HTML-Code

<img src="/images/landschaft.jpg"
     alt="Kleine Landschaft" width="150">

<img src="/images/landschaft.jpg"
     alt="Große Landschaft" width="350">

Ergebnis

Kleines Bild – 150 Pixel

Großes Bild – 350 Pixel

3. Grafiken mit Rahmen

Mit der CSS-Eigenschaft border kann ein Rahmen um ein Bild erstellt werden.

HTML-Code

<img
    src="/images/landschaft.jpg"
    alt="Landschaft mit Rahmen"
    style="width: 300px;
           border: 5px solid darkblue;"
>

Ergebnis

Erklärung

Die Eigenschaft border legt die Rahmenbreite, die Rahmenart und die Rahmenfarbe fest.

4. Transparenz von Grafiken

Mit der CSS-Eigenschaft opacity kann ein Bild transparent dargestellt werden. Der Wert liegt zwischen 0 und 1.

HTML-Code

<img
    src="/images/landschaft.jpg"
    alt="Transparentes Bild"
    style="width: 300px; opacity: 0.5;"
>

Ergebnis

Erklärung

Bei opacity: 1 ist das Bild vollständig sichtbar. Bei opacity: 0.5 ist es halbtransparent. Bei opacity: 0 ist es unsichtbar.

5. Transparente Grafiken überlagern

Mit CSS können zwei Bilder übereinander positioniert werden. Das obere Bild erhält eine Transparenz.

HTML-Code

<div style="position: relative;
            width: 300px;">

    <img src="/images/landschaft.jpg"
         alt="Hintergrundbild"
         style="width: 100%;">

    <img src="/images/landschaft.jpg"
         alt="Überlagertes Bild"
         style="position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                opacity: 0.4;">

</div>

Ergebnis

Hier liegen zwei Bilder übereinander. Da beide Bilder identisch sind, ist der Überlagerungseffekt nur gering sichtbar.

6. Hintergrundbilder

Mit der CSS-Eigenschaft background-image kann eine Grafik als Hintergrund eines HTML-Elements verwendet werden.

HTML-Code

<div style="
    background-image:
        url('/images/landschaft.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
">
    <h3>Text auf einem Hintergrundbild</h3>
</div>

Ergebnis

Erklärung

background-image legt die Hintergrundgrafik fest. background-size: cover sorgt dafür, dass der Hintergrund den Bereich ausfüllt. background-position: center zentriert das Bild.

7. Bilder mit Bildunterschrift

Mit figure und figcaption kann ein Bild zusammen mit einer Bildunterschrift semantisch korrekt dargestellt werden.

HTML-Code

<figure>
    <img src="/images/landschaft.jpg"
         alt="Landschaft" width="300">

    <figcaption>
        Abbildung 1: Landschaft
    </figcaption>
</figure>

Ergebnis

8. Übersicht der wichtigsten Eigenschaften

9. Praktische Übungen

<img>

<img
    src="/images/foto.jpg"
    alt="Mein Foto"
>

alt

<img
    src="/images/foto.jpg"
    alt="Foto"
    width="300"
>

<img
    src="/images/foto.jpg"
    alt="Foto"
    style="border: 5px solid blue;"
>

opacity: 0.5;

background-image

background-position: center;

<figcaption>

<figure>
    <img
        src="/images/foto.jpg"
        alt="Foto"
        width="300"
    >

    <figcaption>
        Mein Bild
    </figcaption>
</figure>

9. Zusammenfassung

Mit HTML können Bilder auf Webseiten eingefügt werden. CSS ermöglicht die Gestaltung von Größe, Rahmen, Transparenz und Hintergrundbildern. Mit figure und figcaption lassen sich Bilder mit passenden Beschreibungen versehen.