Einstieg in HTML-Tutorial überarbeiten?
bearbeitet von Linuchs> 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 | 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 | Breite des Bildes in cm, em, mm, px, ... (siehe Link Längenangaben). Wenn height fehlt, wird es proportional zu width errechnet
**Einbindung in HTML:**
~~~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