HTML Grundkurs

Grundaufbau

  • Notwendigkeiten
  • Aufbau
  • Der Head
  • Der Body
  • Schrift
  • Links
  • Textpositionierung
  • Tabellen
  • Formulare
  • Bilder

    Zusätzliches
  • Spezielles Text
  • Spezielles Bilder

    Hilfen

  • Uploaden
  • Hilfen
  • gif und jpg


    Eine Homepage ist keine Homepage, wenn nicht irgendwo eine kleine Grafik oder ein Bild auftaucht. (Und sei es nur ein Foto des Besitzers.) ;-)
    Im Zusammenhang mit Grafiken wirst du auf zwei gebräuchliche Formate stossen:

    1. gif
    2. jpg (auch: jpeg)
    gifs werden normalerweise vor allem für Buttons und kleine sowie animierte Grafiken verwendet.
    jpg sind grössere Bilder, oft Fotos, die auch mehr Farben haben als gifs.
    Im Quellcode werden beide gleich eingesetzt.

    Das wollen wir erreichen:
    Folgendes gif soll eingesetzt werden: Ein gif Name: gif-grafik.gif

    Folgendes jpg soll eingesetzt werden: Ein jpg Name: jpg-grafik.jpg

    Tag:
    <IMG SRC="gif-grafik.gif">
    <IMG SRC="jpg-grafik.jpg">

    So sieht es aus:

     

    Um sicher zu gehen, dass eine Grafik nicht verzogen wird, machen wir noch zusätzliche Angaben im <IMG>: WIDTH und HEIGHT (= Breite und Höhe).
    Die Breite und Höhe eines Bildes nachsehen kann man in jedem Grafikprogramm. Sie werden normalerweise in Pixel angegeben.
    Die Grössenangabe erlaubt dem Browser auch, die Seite schneller zu laden. Er weiss schon, wie viel Platz er für die Grafiken reservieren muss und kann so den Rest zuerst laden, damit die BesucherInnen schon mal was zu sehen bekommen.
    Das Beispiel-gif hat eine Breite von 100 Pixel und eine Höhe von 68 Pixel.

    Tag:
    <IMG SRC="gif-grafik.gif" WIDTH="100" HEIGHT="68">

    So sieht es aus:
    Ohne oder falsche Grössenangabe:
    Mit korrekter Grössenangabe:
    Falsche Grössenangabe Richtige Grössenangabe

    wieder hoch
     
    erstellt von Nicole Wellinger -