Mach doch mal einen konkreten Vorschlag.
Gerne.
<img src="../img/bett.jpg" alt="Bett">
Kürzel | bedeutet |
---|---|
img | (engl. image = „Bild“), eine rechteckige Fläche |
src | (engl. source = „Quelle“), URL der Bilddatei, die der Browser laden und anzeigen soll |
alt | (engl. alternative = „Alternativtext“) wird angezeigt, falls die Datei nicht verfügbar ist. Wird von Screenreadern vorgelesen |
Basis-Eigenschaften:
img wird im Fließtext wie ein Zeichen behandelt, kann also mitten im Text stehen und belegt die Breite und Höhe in Pixel, die in der Bilddatei vorgesehen ist.
Tipp:
Ein unbearbeitetes Bild von der Kamera kann größer sein als die Sichtfläche (Viewport) des Browsers und benötigt eine (unnötig) lange Ladezeit. Mit einem Grafik-Programm (z.B. kostenloses GIMP) kann das Bild und damit die Dateigröße vor dem Hochladen auf das gewünschte Maß verkleinert werden.
freiwillige CSS-Eigenschaften:
`<img src="../img/bett.jpg" alt="Bett" style="height:8em;opacity:.8;width:10em;">``
Kürzel | bedeutet |
---|---|
height | anzuzeigende Höhe des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn width fehlt, wird es proportional zu height errechnet |
opacity | Deckkraft 0 .. 1 |
width | anzuzeigende Breite des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn height fehlt, wird es proportional zu width errechnet |
Einbindung in HTML:
<!DOCTYPE html>
<html lang="de">
<head>
...
</head>
<body>
<h1>Wir tischlern nicht nur, wir stühlen und betteln auch</h1>
<p>Unser Renner:</p>
<p><img src="../img/bett.jpg" alt="Bett"><br>
Hundebett statt -körbchen</p>
</body>
</html>
Linuchs