Bilder einfügen (img-Tag)
Falls über diesem Text keine PDF-Präsentation zu sehen ist, wurde diese von Ihrem Browser direkt runtergeladen (wenn Sie z.B. mit Safari@Mac surfen). Sie könnnen zum Download auch hier klicken: Direktdownload PDF-Präsentation
Bilder einfügen – Hinweise
- Beachten Sie die Regeln zur Benennung von Dateien und Verzeichnissen im Web!
- 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.
- 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 beliebiges HTML-Dokument. Speichern Sie es in ein beliebiges Verzeichnis. Speichern Sie eine beliebige Bilddatei in das gleiche Verzeichnis. Versehen Sie die HTML-Datei mit einem img-Tag, durch den das Bild bei Aufruf der HTML-Datei im Browser angezeigt wird.
HTML_6-3: 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>
Aufgaben zur Übungsfirma
Alle Aufgaben zur Übungsfirma 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.
***** Übungsfirma: Die Web-Visitenkarte mit Bild *****
Ihre Chefin sitzt vor der Datei index.html, auf der die Kontaktdaten der Firma Lernglück ausgegeben werden. "Das ist nicht so hübsch", murmelt sie, "nicht so hübsch". Sie richtet ihren Blick auf Sie: "Ah, da sind Sie ja! Können Sie die Seite nicht etwas verschönern - vielleicht mit einem oder mehreren Bildern?"
Klar können Sie das. Setzen Sie sich an Ihren Arbeitsplatz und sorgen Sie dafür, dass die Chefin ihr Bild bekommt.
OUTPUT:
- Verzeichnis 'firma_visitenkarte' mit Inhalt
-- HTML-Datei namens index.html
-- Bild(ern) in eigenem Verzeichnis 'bilder'