Inhaltsverzeichnis
Einbinden von Grafik
Der große Vorteil von Mosaic war, dass dort Bilder und Grafiken im Fließtext eingebunden werden konnten. Auch wir wollen nun Grafiken in unsere Seite einbauen.
Wie man Grafiken einbindet, ausrichtet und sonst noch verarbeitet wird unter folgendem Link schön aufgelistet:
(bitte Aufgaben ansehen und Relevantes dazu erst durchlesen!)
Ebenfalls gut zu gebrauchen ist die Kurzreferenz zu Grafiken bei SelfHTML.
Fragen
- Das <img>-Tag lebt von seinen Attributen. Gib bitte an, wofür folgende Attribute verwendet werden:
- src
- alt
- width
- height
- border (in XHTML nicht mehr erlaubt)
- align (in XHTML nicht mehr erlaubt)
- hspace und vspace (in XHTML nicht mehr erlaubt)
- Erstelle eine Datei "grafik.html", in der du eine Grafik einbindest und einen beschreibenden Text rechts davon platzierst (so wie im Informationsteil ganz oben auf dieser Seite).
Beim Drüberfahren mit dem Mauscursor soll eine kleine Beschreibung zum Bild erfolgen (siehe Bild oben) - Was passiert, wenn bei einem Bild die Angaben zur Höhe und Breite nicht gemacht wurden?
- Du hast ein Bild der Größe 100px x 200px (Breite x Höhe). Allerdings gibst du beim Attribut für die Breite 150px an. Wie wird das Bild dargestellt? Welche Größe hat es?
- Man kann auch Bilder als Verweise verwenden. Dazu muss man das <img>-Tag mit dem <a>-Tag kombinieren. Wie sieht dazu der HTML-Code aus?
- Zusatzaufgabe:
Bei SelfHTML gibt es ein Kapitel zu Verweis-sensitiven Grafiken (Image Maps). Das sind Grafiken, bei denen unterschiedliche Bereiche mit unterschiedlichen Verweisen belegt sind.
Schau dir dort das Beispiel an und erstelle eine Image-Map zu folgendem Bild, in dem du bestimmte Bereiche unterscheidest:
Die Koordinaten kannst du besser bestimmen, wenn du das Bild in "Paint" (Start → Programme → Zubehör) oder einem ähnlichen Grafikprogramm öffnest; dort werden die Koordinaten in der Statuszeile angezeigt.- Hausmeister-Haus
- Lehrer-Parkplatz
- Aula
- Turnhalle
- Varielhaus
Tipps
