 |
|
Grafiken einfügen
Jetzt lernen wir, wie man Grafiken in eine HTML-Seite einbindet. Dazu legen wir erstmal ein Unterverzeichnis an, in welches die Grafiken gespeichert werden. Unterverzeichnisse sind nicht zwingend notwendig - sorgen jedoch bei Projekten mit vielen Grafiken und Seiten für den nötigen Überblick.
Das Unterverzeichnis soll schlicht und einfach "bilder" heissen. Dazu klicken wir mit rechts auf "Projekt Tutorial" im linken oberen Fenster
und wählen "Verzeichnis anlegen". Als Name geben wir "bilder" ein. Mit "OK" bestätigen.
Das neue Verzeichnis erscheint nun unter "Projekt Tutorial".
Jetzt benötigen wir noch eine Grafik. Damit wir ein einheitliches Ergebnis bekommen, speichere bitte folgendes Bild unter dem Namen "strand" in den neuen Bilder-Ordner. (Rechtsklick - Bild/Grafik speichern unter...)
Bevor wir jetzt die Grafik in unser HTML-Dokument einfügen, fügen wir noch 2 Leerzeilen unter unseren Text ein. Also 3 mal <br>. Eins für den Zeilenumbruch und 2 für die Leerzeilen.
Jetzt setzen wir den Cursor hinter das letzte <br> und klicken im linken oberen Fenster auf unser neues Bilderverzeichnis. Im Fenster links unten erscheint jetzt die Grafik "strand.jpg". Diese klicken wir einmal an, und der HTML-Text für das Bild wird hinzugefügt.
HTML-Text:
Kurze Erklärung zum Img-Tag:
Der Editor fügt zum eigentlichen img-tag automatisch weitere Angaben ein.
width="163" = Breite des Bilder in Pixel
height="122" = Höhe des Bildes in Pixel
border="0" = Rahmen des Bilder (in diesem Fall keiner)
alt="" = Alternativtext
Grafik zentrieren
Um das Bild zu zentrieren, markieren wir den gesamten img-Tag (mitsamt den Klammern < > ).
Jetzt klicken wir wieder auf das Zentrieren-Symbol unter der Karte "Text"
HTML-Text:
Als letztes in dieser Kategorie geben wir dem Bild einen Rahmen und setzen einen Alternativtext ein. Dazu verändern wir einfach den Wert bei "border" auf 2. Das Bild bekommt einen Rahmen von 2 Pixel.
Den Alternativtext schreiben wir zwischen die Anführungszeichen bei "alt". Als Alternativtext wählen wir das Wort "Strand". Wenn man jetzt in der Vorschau mit der Mouse auf das Bild zeigt, erscheint dort das Wort "Strand".
Alternativtext ist zwar nicht zwingend notwendig, sollte aber trotzdem bei jedem Bild angegeben werden. Es gibt Surfer, die für schnellere Ladezeiten die Grafikanzeige ausschalten. Sie sehen dann nur ein leeres Feld ohne Bild. Wenn bei dem Bild Alternativtext angegeben wurde, erscheint dieser in dem leeren Feld, und der Surfer weiss, was ihn dort für ein Bild erwartet hätte.
Wichtig ist das vor allem, wenn das Bild mit einer anderen Seite verlinkt wurde (zum Beispiel bei Buttons). Ohne Alternativtext wüsste der Surfer nicht, wo ihn der Link hinführt.
Hier der HTML-Text mit Border- und Alternativangaben.
Hinweis: Web-Grafiken dürfen nur die Formate jpg, gif oder png haben. Alle anderen Grafikformate würde viel zu lange Ladezeiten verursachen.
|
|
|
