Linuchs: Einstieg in HTML-Tutorial überarbeiten?

Beitrag lesen

problematische Seite

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

0 41

Einstieg in HTML-Tutorial überarbeiten?

Matthias Scharwies
  • html
  • selfhtml-wiki
  1. 2
    Rolf B
    1. 0
      Matthias Scharwies
      1. 2
        Rolf B
        1. 0
          Matthias Scharwies
          1. 1
            Matthias Apsel
          2. 0
            Rolf B
            1. 0
              Matthias Apsel
              1. 0
                Rolf B
                1. 0
                  Matthias Apsel
                  1. 0
                    Rolf B
          3. 0

            Kapitel 2 - Textauszeichnung

            Matthias Scharwies
            1. 0
              MudGuard
              1. 0
                Matthias Scharwies
  2. 0
    JürgenB
  3. 0
    Linuchs
    1. 0
      Matthias Apsel
      1. 0
        Linuchs
    2. 0
      Matthias Scharwies
      1. 0
        Gunnar Bittersmann
        1. 0
          Matthias Scharwies
        2. 1
          Rolf B
          1. 0
            Gunnar Bittersmann
      2. 0
        Linuchs
        1. 0
          Der Martin
          • html
          • meinung
          • selfhtml-wiki
          1. 0
            Linuchs
            1. 0
              Der Martin
        2. 0
          Matthias Apsel
  4. 0

    Kapitel 6 - Gestaltung mit CSS

    Matthias Scharwies
    1. 0

      Kapitel 6 - Gestaltung mit CSS - Welche Selektoren für Tabelle und Liste??

      Matthias Scharwies
      1. 0
        Rolf B
        1. 0
          Matthias Scharwies
          1. 0
            Rolf B
            1. 0
              Matthias Scharwies
              1. 0
                Rolf B
                1. 0
                  Matthias Scharwies
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Matthias Scharwies
                  2. 0
                    Rolf B
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Rolf B