html tutorial - HTML Bilder - html5 tutorial

Learn html - html tutorial - html-image - html examples - html programs

sieht im Browser wie folgt aus:

“wikitechy.jpg” ist der Name der Bilddatei, die Sie auf der Seite einfügen möchten. “.jpg” ist der Dateityp des Bildes.

Wie die Endung “.htm” anzeigt, dass die Datei ein HTML-Dokument ist, zeigt “.jpg” dem Browser, dass es sich bei der Datei um ein Bild handelt.

Es gibt drei verschiedene Arten von Bildtypen, die man in eine Internetseite einbinden kann:

GIF-Bilder sind normalerweise am besten für Grafiken und Zeichnungen geeignet, während JPEG-Bilder eher für Fotografien geeignet sind. Dies hat zwei Gründe: Erstens, GIFs bestehen nur aus max.

256 Farben, während JPEGs Millionen von Farben enthalten können. Zweitens ist das GIF-Format bei der Komprimierung einfacherer Bilder besser als das JPEG-Format, welches wiederum eher für komplexe Bilder optimiert ist.

Je besser die Komprimierung, um so kleiner ist die Dateigröße der Bilddatei und desto schneller wird das Bild in Ihrer Seite geladen.

Wie Sie vielleicht aus Ihrer eigenen Erfahrung wissen, können unnötig ‘überladene’ Seiten für den Nutzer sehr ärgerlich sein.

In der Vergangenheit waren GIF und JPEG die beiden dominierenden Bildtypen. Aber seit kurzem wird das PNG-Format immer populärer (meist auf Kosten des GIFs).

Das PNG enthält in den meisten Fällen das Beste der beiden anderen Formate: Millionen von Farben und effektive Komprimierung.

Um Ihre eigenen Bilder zu erstellen, benötigen Sie ein Bildbearbeitungsprogramm. Ein Bildbearbeitungsprogramm ist eines der wichtigsten Werkzeuge um schöne Webseiten zu erstellen.

Leider ist weder im Lieferumfang von Windows, noch bei anderen Betriebssystemen, ein annehmbares Bildbearbeitungsprogramm inklusive.

Deswegen sollten Sie sich überlegen, in Bildbearbeitungssoftware zu investieren. Paint Shop Pro, PhotoShop oder Macromedia Fireworks sind drei der besten derzeit auf dem Markt befindlichen Programme.

Wie auch immer, wir hatten ja gesagt, es braucht keine teuren Programme um das Tutorial zu beenden. Für unsere Zwecke genügt es, wenn Sie sich Irfan View, ein exzellentes Bildbearbeitungsprogramm herunterladen.

Irfan View ist sogenannte Freeware und kostet aus diesem Grunde nichts.Oder Sie borgen sich Bilder von anderen Seiten, indem Sie diese downloaden.

So wird’s gemacht:

Probieren Sie dies mit dem nachfolgenden Bild aus. Speichern Sie es auf Ihren Rechner, ins gleiche Verzeichnis, wo sich auch Ihre Webdokumente befinden.

Es gibt noch ein paar Sachen mehr, die Sie über Bilder wissen sollten.

• Erstens: Sie können ganz einfach Bilder einbinden, die in anderen Ordnern oder sogar auf anderen Webseiten gespeichert sind:

Zweitens: Bilder können auch Links sein:

Das Attribut src muss immer benutzt werden, da es dem Browser die Quelle des Bildes vorgibt. Außer diesem gibt es noch einige Attribute, die sehr nützlich sein können, wenn Bilder eingebunden werden.

< li> Das alt-Attribut gibt eine alternative Beschreibung des Bildes an. Diese Beschreibung wird angezeigt, wenn – aus welchen Gründen auch immer – das Bild nicht angezeigt wird. Besonders wichtig ist alt z.B. für sehbehinderte oder blinde Internetnutzer.< li> Wenn sehr langsam geladen werden, gibt die Alternativbeschreibung normal sehenden Nutzern einen ersten Eindruck, was auf der Seite zu sehen sein soll. Aus diesen Gründen nutzen Sie bitte immer das alt-Attribut.

Einige der älteren Browser lassen den Inhalt des alt-Attributes in einem kleinen sog. Tooltip (ein kleines Fenster neben dem Mauszeiger) erscheinen, wenn man den Mauszeiger über das Bild bewegt.

Bitte beachten Sie, dass eine Beschreibung des Inhaltes die Aufgabe dieses Attributes ist und nicht Informationen zum Bild zu geben, da sehbehinderte Menschen diesen Text hören, ohne zu wissen, dass es sich um ein Bild handelt.

Das title-Attribut hingegen kann dazu benutzt werden, Informationen zum Bild zu geben:

sieht im Browser wie folgt aus:

Wenn Sie jetzt – ohne zu klicken – den Mauszeiger über das Bild halten, werden Sie diesen kleinen sog. Tooltip sehen. In diesem steht “Lernen Sie HTML mit wikitechy.com”.

Zwei weitere wichtige Attribute sind width und height:

sieht im Browser wie folgt aus:

Die Attribute width und height werden benutzt, um die Breite (engl. width) und Höhe (engl. height) eines Bildes anzugeben. Die Höhe und Breite wird in Pixeln angegeben. Pixel sind die Einheit, mit der man die Auflösung von Bildschirmen angibt.

Man könnte es auch mit “Bildpunkte” übersetzen. (Die gebräuchlichsten Bildschirmauflösungen sind 800×600 und 1024×768 Pixel.) Im Gegensatz z.B. zu Zentimetern sind Pixel eine relative Maßgröße, die von der Bildschirmauflösung des verwendeten Monitors abhängt.

So kann es sein, dass 25 Pixel bei einem Nutzer einer hohen Auflösung etwa einem Zentimeter entspricht, während es bei einer niedrigen Auflösung etwa anderthalb Zentimetern auf dem Bildschirm entspricht.

Wenn Sie width und height nicht einsetzen, wird das Bild in seiner Originalgröße eingefügt.

Mit width und height kann man die Anzeigegröße verändern:

sieht im Browser wie folgt aus:

Wie auch immer, bitte merken Sie sich, dass die wirkliche Dateigröße des Bildes erhalten bleibt.

Eine solche Verkleinerung hat somit keinen Einfluß auf die Ladegeschwindigkeit Ihrer Webseite, auch wenn das Bild kleiner aussieht. Deswegen sollten Sie nie versuchen, die Größe Ihres Bildes mit width und height zu verkleinern.

Dies sollte eher mit einem Bildbearbeitungsprogramm geschehen. Dann wird auch Ihre Seite schneller geladen werden.

Trotzdem ist es wichtig, dass Sie die Attribute width und height anwenden, weil der Browser so bemerkt, wieviel Platz das Bild benötigt, um auf der Seite dargestellt zu werden. Dies sorgt dafür, dass die Seite schneller geladen werden kann.

So, für den Moment genug von David Hasselhoff und Bildern.