Deine erste Homepage
Kapitel 10
Bilder einbinden
Anmerkung:
Diese Lektion kannst du auch überspringen und bei Bedarf später studieren.
Vertiefungskapitel:
Zu dieser Lektion gibt es ein Vertiefungskapitel
In diesem Vertiefungskapitel lernen wir, wie man eine größere Version eines Bildes zeigen kann.
Bilder in die Homepage einzubinden, ist nicht schwer, aber einige Besonderheiten gilt es zu beachten:
Anforderungen an Bilddateien zur Verwendung auf deiner Homepage
Bilddateien sind groß! Digitale Fotos sind in der Regel mehrere MB (Megabyte) groß. Das ist für deine Homepage viel zu viel. Weil diese Datenmenge bei jedem Aufruf deiner Homepage übertragen werden muss. Dies ist auch der Grund, warum nur bestimmte, komprimierte Dateiformate von Browsern angezeigt werden. Im wesentlichen sind dies die Formate .jpg bzw. .jpeg (dieses Format erzeugen die meisten digitalen Kameras), sowie .gif und .png.
Auch komprimierte Bilddateien sind in der Regel noch zu groß.
Vor allem, wenn du einfach die Fotos nimmst, die deine Digicam erzeugt.
Sie sind in zweierlei Hinsicht zu groß: Sowohl die Abmessungen, d. h. die Höhe und Breite des Bildes,
als auch die Dateigröße - weil digitale Fotos, die auf deiner Festplatte liegen, in der Regel nicht sehr stark komprimiert sind.
Darüber hinaus muss das Bild natürlich von den Abmessungen her auf deine Seite passen. (Das CSS auf dieser Seite erlaubt maximal 480 px Breite.)
Das Bild vorbereiten
Deshalb ist es unumgänglich, dass du mit einer Software zur Bildbearbeitung deine Fotos erst auf die benötigte Größe bringst - Abmessungen und Dateigröße, sprich Komprimierung.
Ein sehr empfehlenswertes kostenloses Programm für diesen Zweck ist Irfanview.
Irfanview kann mit der Tastatur bedient werden, und es kann auf deutschsprachige Menüs eingestellt werden (Options - Change Language ...)
Eine deutschsprachige Hilfedatei für Irfanview
Nimm eines deiner Fotos, und bringe es mit Irfanview oder einem anderen Bildbearbeitungsprogramm auf eine Abmessung von sagen wir 400 px Breite und 300 px Höhe.
Speichere es ab als .jpg.
Als guten Kompromiss zwischen Dateigröße und angezeigter Qualität wählst du zum Abspeichern eine Komprimierung/Qualität von ca. 85%.
Für den Dateinamen gelten wieder die gleichen Regeln wie bei den Dateinamen für deine HTML-Dateien.
Du erinnerst dich ja sicher noch an Kapitel 1 - keine Sonderzeichen, keine Leerzeichen, am besten nur Kleinbuchstaben usw.
Sprechende Dateinamen erleichtern dir die Arbeit; also nicht DEC100356.jpg, sondern z. B. ferrari.jpg.
Das Bild auf den Server hochladen
Das so bearbeitete Bild muss jetzt auf deinen Server hochgeladen werden, damit es auf der Homepage angezeigt wird.
Empfehlenswert ist es, Ordnung zu schaffen, und für deine Bilder einen eigenen Unterordner auf dem Server einzurichten. Jedes FTP-Programm kann das. Selbst der Windows-Datei-Explorer, wenn du den Trick aus Kapitel 2 einsetzt.
Wir nennen diesen Unterordner einfach img.
Unterordner heißt: Ein Unterordner relativ zum Ordner, in dem deine HTML-Dateien auf dem Server liegen.
Einbinden des Bildes in deine Seite
Die Syntax hierfür lautet:
<img src="img/ferrari.jpg" alt="mein Auto - ein roter Ferrari" title="Mein Auto - der Ferrari" width="400" height="300" />
Ausführliche Erklärungen zu dieser Syntax gibt es bei Selfhtml
Anmerkung:
Wenn du deine Seite vor dem Hochladen erst einmal lokal kontrollieren willst, dann muss das Bild natürlich auch lokal im Unterverzeichnis /img liegen.
Anmerkung 2:
Die "abgekürzte" Schreibweise "img/ferrari.jpg" nennt man relative Adressierung. Mit "img/" wird ein Unterverzeichnis angegeben, relativ zum Verzeichnis, in dem die aufrufenden Datei (diese Datei) auf dem Server liegt.
Anmerkung 3:
Hast du bemerkt, dass das <img>-Tag ein self closing tag ist?
Was haben wir in dieser Lektion gelernt?
Bilder einbinden ist gar nicht schwer.