Kennen, können, beherrschen lernen was gebraucht wird

Transkript

1 Inhaltsverzeichnis Inhaltsverzeichnis... 1 Einbinden von Grafiken... 2 Grafiken in den Text einbinden... 2 Grafikverweise... 2 Verweise auf Bilder in Unterverzeichnissen... 2 Verweise auf Bilder im darüber liegenden Verzeichnis... 3 Alternativer Text... 3 Größenangaben... 3 Grafiken umranden... 4 Grafiken als Dateihintergrund... 4 Grafiken und Text... 5 Beschriftung einer Grafik... 5 Abstand zwischen Grafik und Text festlegen... 5 Grafikformate im Überblick... 6 Abbildungsverzeichnis... 7 Index (Stichwortverzeichnis... 7 Seite 1

2 Einbinden von Grafiken Kennen, können, beherrschen lernen was gebraucht wird Grafiken in den Text einbinden Abbildung 1 - Der Tag <img> <img src= Bild > Mit dem Tag <img> wird eine Grafik in das HTML-Dokument eingefügt. Mit dem Attribut src (src = Quelle) geben Sie den Namen der Datei an, die in das Dokument eingebunden werden soll.die Grafik wird an der Stelle eingebunden, an der der Tag steht. Das Beispiel zeigt, wie die Grafik rauchen.jpg in die Datei eingefügt wird. Das Einfügen der Grafik funktioniert nur, wenn sich beide Dateien in einem Ordner befinden. Findet der Browser die Grafikdatei nicht, wird eine Fehlergrafik eingeblendet. Abbildung 2 - Bilder einfügen (1) Grafikverweise Befindet sich die Grafik in einem anderen Ordner als die Webseite, muss auf den Zielordner verwiesen werden. Das Verzeichnis in dem die Webseite gespeichert wurde ist das Hauptverzeichnis. In diesem Verzeichnis befinden sich die Daten für die Webseite. In diesem Verzeichnis befinden sich die Grafiken für die Webseite. In diesem Verzeichnis befindet sich die Webseite. Verweise auf Bilder in Unterverzeichnissen Abbildung 3 - Verweis auf ein Unterverzeichnis Der Browser sucht, ausgehend vom aktuellen Verzeichnis Dateien im Unterverzeichnis Clipart nach der Datei rauchen.jpg. Seite 2

3 Verweise auf Bilder im darüber liegenden Verzeichnis Abbildung 4 - Verweis eine Ebene nach oben Der Browser springt ein Verzeichnis nach oben../, in das Verzeichnis clipart und lädt die Datei rauchen.jpg. Abbildung 5 - Verweis zwei Ebenen nach oben Der Browser springt zwei Verzeichnisse nach oben../../, in das Verzeichnis clipart und lädt die Datei rauchen.jpg. Alternativer Text Mit dem Attribut alt können Sie einen erläuternden Text der Grafik hinzufügen. Dieser Text erscheint auf dem Bildschirm, wenn die Grafik nicht angezeigt werden kann. Wenn Sie mit dem Mauszeiger auf die Grafik zeigen, wird dieser Text ebenfalls angezeigt. Der erläuternde Text muss zwingend in Anführungszeichen gesetzt werden. Abbildung 6 - alternativer Text Größenangaben Beim Einbinden einer Grafik sollten Sie die Größenangaben für die Grafik definieren, damit der Browser immer weiß, in welcher Größe er die Grafik auf der Seite darstellen soll. Dies hat den Vorteil, dass der Browser den benötigten Speicherplatz bereits reservieren kann. Das verkürzt die Zeit zum Laden der Webseite. Abbildung 7 - Größenangaben Geben Sie die Breite der Grafik und die Höhe der Grafik in Prozent oder Pixel an. Zur Feststellung der exakten Größe einer Grafik, benutzen Sie ein Grafikprogramm, dieses gibt Ihnen die exakten Maße an. Seite 3

4 Grafiken umranden Grafiken wirken in der Bildschirmanzeige oft ausgefranzt, Sie können diesen Effekt vermeiden, in dem Sie die Grafik mit einem Rahmen versehen. Mit dem Attribut border (Rand) definieren Sie wie dick die Umrandung der Grafik sein soll. Wird das Attribut nicht angegeben oder wird es auf 0 gesetzt, wird die Grafik nicht umrandet. Abbildung 8 - Grafik umranden Grafiken als Dateihintergrund Um eine Grafik als Dateihintergrund zu nutzen, müssen Sie im Tag body mit dem Attribut background eine Hintergrundgrafik definieren. Damit sich der Hintergrund beim Scrollen nicht bewegt, nutzen Sie das Attribut bgproperties (funktioniert nur im Internet Explorer) Bei der Verwendung einer Grafik als Hintergrund müssen Sie folgendes beachten: Schaffen Sie einen starken Kontrast zwischen Hintergrund und Text. für einen dunklen Hintergrund wählen Sie einen hellen Text und umgekehrt. Verwenden Sie unauffällige Grafiken, die nicht vom eigentlichen ablenken. Abbildung 9 - Hintergrundgrafiken Seite 4

5 Grafiken und Text Beschriftung einer Grafik Kennen, können, beherrschen lernen was gebraucht wird Abbildung 10 - Eine Grafik beschriften Um eine Grafik im Text zu positionieren, nutzen Sie das Attribut align Folgende Werte können für das Attribut genutzt werden: top (oben) middle (mittig) bottom (unten) Erstellen Sie kurze Beschriftungen für die Grafik. Bei allen Attributsangaben wird die erste Zeile wie angegeben dargestellt. Ist der Text zu lang für die Zeile bricht der Browser den Text um, und die nächste Zeile wird unterhalb des Bildes angezeigt. Abstand zwischen Grafik und Text festlegen Zum definieren des Textflusses um eine Grafik besitzt das Attribut align noch zwei weitere Werte. Zum Umfließen einer Grafik mit Text wird das Attribut align mit den Werten left (links) right (rechts) definiert. Fehlt diese Attributsangabe, wird der Text unterhalb der Grafik angezeigt. Mit den Werten vspace hspace wird der Abstand zwischen Text und Grafik festgelegt. Abbildung 11 - Abstand zwischen Grafik und Text definieren Seite 5

6 Grafikformate im Überblick Viele Computernutzer gehen täglich mit Grafiken und Fotos um, ohne sich sich Gedanken darüber zu machen, welche Grafikformate zur Speicherung der Grafiken und Bilder eingesetzt werden. Hier finden Sie eine Übersicht über die gängigsten Grafikformate und deren Dateiendungen inklusive einer Kurzbeschreibung. Abbildung 12 - Grafikformate im Überblick Auf den ersten Blick werden Sie kaum einen Unterschied in der Darstellung der oben gezeigten Fotos erkennen. Um welche Grafikformate es sich handelt, erschließt sich ohnehin erst, wenn Sie mit Rechtsklick auf eines der Bilder klicken und beispielsweise "Bild in neuem Fenster öffnen" auswählen. Dann wird oben in der Adresszeile Ihres Browsers der Dateinahme inklusve der Dateiendung (= Grafikformat) angezeigt. Bei den oben abgebildeten Fotos wurden (von links nach rechts) die Formate *.jpg, *.gif und *.png eingesetzt. Bei diesen drei Formaten handelt es sich um Formate, die häufig im Web eingesetzt werden, da sie die Bilder komprimieren und relativ kleine Dateien erzeugen (im obigen Beispiel: *.jpeg = 37 KB, *.gif = 25 KB und *.png = 49 KB bei vergleichbaren Kompressionsraten). Das Ausgangsbild im Format 1280 x 960 Pixel ist übrigens 360 KB groß. Die Liste enthält die am meisten genutzten Grafikformate. JPG: Abkürzung für JPEG (Joint Photographic Experts Group) *.jpg JPG ist sehr weit verbreitet und wird vor allem als Dateiformat für fotoähnliche Bilder genutzt. Die Kompression ist verlustbehaftet. Für Text, große einfarbige Flächen und harte Farbübergänge ist JPG weniger geeignet. GIF: Abkürzung für Graphics Interchange Format *.gif GIF ist ebenfalls weit verbreitet und wird vor allem als Dateiformat für Grafiken genutzt. Die Kompression ist verlustbehaftet. Da GIF nur 256 Farben kennt, ist es für Farbfotos weniger geeignet. Dafür erlaubt GIF die Darstellung einfacher Animationen und Transparenzen. PNG: Abkürzung für Portable Network Graphics *.png PNG ist ein relativ junges Format und wurde bis vor nicht all zu langer Zeit nicht von allen Anwendungen unterstützt. Die Kompression ist verlustfrei. PNG unterstützt Transparenz und eignet sich für Grafiken und Fotos. TIFF: Abkürzung für Tagged Image File Format *.tif TIFF ist ein recht vielseitiges Format, welches qulitativ sehr hochwertige Ergebnisse liefert. Die Kompression ist meist verlustfrei. Tiff wird häufig in der Druckvorstufe verwendet. Im Web taucht es seltener auf, da TIFF-Dateien recht groß sind. BMP: Abkürzung für Windows Bitmap *.bmp BMP ist eines der bekanntesten Grafikformate, das im Web allerdings kaum Verwendung findet. Die Kompression ist verlustfrei. Allerdings ist die Komprimierung so schwach, dass BMP-Dateien sehr groß sind. Seite 6

7 SWF: Abkürzung für Shockwave Flash *.swf SWF ist ein Vektorgrafikformat, das Animationen, Ton und Videos enthalten kann. SWF- Dateien (Flash) können über das Internet gestreamt werden. Flash ist heute im Web eines der am weitesten verbreiteten Formate und wird von zahlreichen Video-Anbietern genutzt. SVG: Abkürzung für Scalable Vector Graphics *.svg SVG ist ebenfalls ein Vektorgrafikformat, das speziell für die Nutzung im Web entwickelt wurde. Es eignet sich für die Beschreibung/Darstellung von Grafikelementen und wird inzwischen von den meisten Browsern direkt unterstützt. Quelle: lehrerfortbildung-bw.de Abbildungsverzeichnis Abbildung 1 - Der Tag <img>... 2 Abbildung 3 - Verweis auf ein Unterverzeichnis... 2 Abbildung 2 - Bilder einfügen (1)... 2 Abbildung 4 - Verweis eine Ebene nach oben... 3 Abbildung 5 - Verweis zwei Ebenen nach oben... 3 Abbildung 7 - Größenangaben... 3 Abbildung 6 - alternativer Text... 3 Abbildung 8 - Grafik umranden... 4 Abbildung 9 - Hintergrundgrafiken... 4 Abbildung 10 - Eine Grafik beschriften... 5 Abbildung 11 - Abstand zwischen Grafik und Text definieren... 5 Abbildung 12 - Grafikformate im Überblick... 6 Index (Stichwortverzeichnis align 5 Alternativer Text 1, 3 Attribut 2, 3, 4, 5 Beschriftung 1, 5 Beschriftungen 5 Bitmap 6 Browser 2, 3, 5 Dateihintergrund 1, 4 Ebene 3, 7 Ebenen 3, 7 Grafik und Text 1, 5, 7 Grafiken 1, 2, 4, 5, 6 hspace 5 Internet 4, 7 Kontrast 4 Tag 2, 4, 7 vspace 5 Seite 7