close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

Kennen, können, beherrschen – lernen was gebraucht wird www

EinbettenHerunterladen
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
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
© 13.10.2013
Seite
1
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
Einbinden von Grafiken
Grafiken in den Text einbinden
Abbildung 1 - Der Tag <img>

<img
Mit dem Tag <img> wird eine Grafik in das HTML-Dokument eingefügt.

src=“Bild“>
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,
Abbildung 2 - Bilder einfügen (1)
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.
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 .
© 13.10.2013
Seite
2
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
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
Abbildung 6 - 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.
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.
© 13.10.2013
Seite
3
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
Grafiken umranden
Grafiken wirken in der Bildschirmanzeige
oft „ausgefranzt“, Sie können diesen Effekt
vermeiden, in dem Sie die Grafik mit einem
Rahmen versehen.
Abbildung 8 - Grafik umranden
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.
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
© 13.10.2013
Seite
4
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
Grafiken und Text
Beschriftung einer Grafik
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
© 13.10.2013
Seite
5
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
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.
© 13.10.2013
Seite
6
Kennen, können, beherrschen – lernen was gebraucht wird
www.doelle-web.de
SWF: Abkürzung für Shockwave Flash *.swf
SWF ist ein Vektorgrafikformat, das Animationen, Ton und Videos enthalten kann. SWFDateien (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
© 13.10.2013
Seite
7
Document
Kategorie
Internet
Seitenansichten
1
Dateigröße
1 612 KB
Tags
1/--Seiten
melden