Folien



(letzte Synchronisation der PDF-Präsentation: 02.03.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Bilder einfügen – Hinweise

  1. Beachten Sie die Regeln zur Benennung von Dateien und Verzeichnissen im Web!
  2. Achten Sie darauf, dass die Bilddateien nicht zu groß sind. Ein mit einer Digitalkamera aufgenommenes Bild hat u.U. 2MB, das ist für eine Webseite viel zu groß. Kleiner bekommen Sie es, wenn Sie es z.B. mit irfanview öffnen, evtl. verkleinern und als .jpg oder .gif speichern.
  3. Beachten Sie, dass unterschiedliche Besucher Ihrer Site mit unterschiedlichen Fenstergrößen surfen.

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.


***** Ü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 &quot;bild_test&quot; 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 &quot;bildert&quot; liegen drei Bilder, nämlich diese:</p> <p><!-- Bild 1 --></p> <p><!-- Bild 2 --></p> <p><!-- Bild 3 --></p>