***** Übungen: HTML - Bilder einfügen *****
HTML_6-1: img-Tags berichtigen
Einige der folgenden img-Tags enthalten einen Fehler. Welche sind es? Berichtigen Sie die Fehler.
1. <imgsrc="http://www.xy.cc/bild.gif" alt="Alternativtext">
2. <img src = "http://www.xy.cc" alt="Alternativtext">
3. <imgsrc = http://www.xy.cc">
4. <img src="http://www.xy.cc/bilder/neu/pix.gif">
5. <img src="http://www.ass.cc/bilder/zähne zeigen.jpg" alt="Zahn">
6. <img src="zahn.gif">
7. <img src="bilder/zahn.gif" alt="Zahn, Schwarzweißzeichnung (Scan aus der Mitteltäler Zeitung, 07.03.2009, Ausgabe 7, S. 13)">
HTML_6-2: Bild in einem HTML-Dokument anzeigen.
Erstellen Sie ein HTML-Dokument, mit dem eine Webseite erzeugt wird, die ungefähr so aussieht wie auf diesem Bildschirmfoto:
02html/html06_blumenshop/html06_blumen_shop_nachbauen.jpg
Verwenden Sie im gleichen Verzeichnis das Bild html06_bild_sonnenblume.jpg
HTML_6-3: img-Tags einfügen
Sie haben eine Webseite zu Ihrem Dänemark-Urlaub erstellt, den Code finden Sie unten oder hier:
02html/html06_bilder_einfache_uebung/index.html
- Sie haben vergessen einen Titel zu geben. Reparieren Sie das.
- Mit den Überschriften stimmt auch etwas nicht. Richten Sie das.
- Fügen Sie die im Verzeichnis /html06_bilder_einfache_uebung/ liegenden Bilder an den richtigen Stellen ein. Vergessen Sie nicht die alt-Tags. Es sind sechs Bilder (baum.jpg, kaffee.jpg, pferd.jpg, regenbogen.jpg, schwan.jpg, strand.jpg).
HTML-Code
<!DOCTYPE html>
<html>
<head>
<title>Unbenanntes Dokument</title>
</head>
<body>
<h3>Meine Urlaubserlebnisse</h3>
<h2>Erste Etappe: Ostfriesland</h2>
<p>In Ostfriesland haben wir einen sehr schönen <strong>Regenbogen</strong> gesehen. Zum Glück hatte Egon die Kamera dabei.</p>
<h2>Zweite Etappe: Dänemark</h2>
<p>In Dänemark haben wir viele Tiere gesehen.</p>
<h3>Die Tierwelt Dänemarks</h3>
<p>In Dänemark gibt es viele <strong>Schwäne</strong>, die man mit speziellem Schwanenfutter füttern darf.</p>
<p>Die <strong>Pferde</strong>, die am Ufer stehen, sind auch sehr hübsch anzusehen.</p>
<h1>Die Pflanzenwelt Dänemarks</h1>
<p>Wir haben so schöne <strong>Bäume</strong> gesehen, dass ich aus dem Fotografieren nicht herauskam.</p>
<h4>Dritte Etappe: Grönland</h4>
<p>Auf Grönland gibt es sagenhafte <strong>Strände</strong>!</p>
<p>Und den besten <strong>Kaffee</strong> der Welt haben wir dort auch getrunken.</p>
</body>
</html>
HTML_6-4: img-Tags einfügen
• Legen Sie ein Verzeichnis namens datum_bild_test an.
• Erstellen Sie eine HTML-Datei mit dem <title> Bilder: Test in diesem Verzeichnis. Diese Datei heißt bild_test.html.
• Erstellen Sie im Verzeichnis bild_test ein weiteres Verzeichnis mit dem Namen bilder. Legen Sie drei beliebige Bilder in dieses Verzeichnis.
• Legen Sie ein weiteres Bild in das Verzeichnis bild_test.
• Kopieren Sie den folgenden HTML-Code in den body Ihres HTML-Dokuments und ersetzen Sie die Kommentare durch entsprechende img-Tags. Überprüfen Sie, ob das Dokument mit allen vier Bildern im Browser richtig angezeigt wird.
HTML-Code
<h1>Bild im Verzeichnis bild_test</h1>
<p>Im Verzeichnis "bild_test" liegt ein Bild, nämlich dieses:</p>
<p><!-- Hier das Bild im Verzeichnis bild_test anzeigen --></p>
<h1>Bilder im Unterverzeichnis bilder</h1>
<p>Im Unterverzeichnis "bildert" liegen drei Bilder, nämlich diese:</p>
<p><!-- Bild 1 --></p>
<p><!-- Bild 2 --></p>
<p><!-- Bild 3 --></p>
