Little Boxes – der HTML-Crashkurs

Das img-Element als Wegbeschreibung zu einer Grafik

Testen Sie unsere 1893 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Im Quelltext einer Webseite steht lediglich eine Wegbeschreibung zur Grafik, die mit dem img-Element angegeben wird. Webseite und Grafik bleiben also, anders als auf Papierseiten, getrennt und werden erst im Browserfenster zusammen dargestellt.

Transkript

Auch wenn das Web aus Hypertext besteht, so ist es doch natürlich möglich, hier Graphiken einzubinden und in diesem Film möchte ich Ihnen zeigen, wie Sie hier die Überschrift Little Boxes durch eine Logographik ersetzen. Dazu benötigen Sie natürlich erstmal die Logographik und am einfachsten ist es, die direkt aus dem Web zu holen. Surfen Sie einfach zu little-boxes.de. Links oben sitzt das Logo. Dann klicke ich hier im Firefox mit Rechts darauf. Da sehen Sie verschiedne Befehle hier. Graphik anzeigen, Graphik speichern Unter einem anderen Browser heißen die ähnlich, aber es gibt sie auch in der Art. Graphik speichern unter würde die Graphik einfach sofort speichern. Ich gehe hier mal den Umweg über Graphikinfo anzeigen. Hier sehen Sie jetzt alle Graphiken, und alle Medien auf der Seite. Das ist die ausgewählte little-boxes-logo.gif. Das ist eine Graphik eingebunden, 1 KB, 222 Pixel breit und 32 Pixel hoch. So sieht sie aus. Also keinen grauen Rahmen drum rum hier. Und hier kann ich sofort speichern unter... Da möchte ich auf dem Desktop in den Ordner littleboxes. Da bin ich schon. little-boxes-logo.gif Den Namen müssen Sie sich merken, den brauchen wir gleich zum Einbinden. So. Dann schaue ich jetzt einmal kurz nach. Hier im Ordner littleboxes ist das Logo vorhanden. Hier unten kann man sich das auch anschauen, da stehen alle Informationen, die wir benötigen. Sie könnten die Graphik jetzt noch umbenennen. Nach dem Einbinden sollte man das nicht mehr tun, dann muss man das an mehreren Stellen ändern. Die Graphik ist vorhanden. Jetzt muss sie hier nur noch eingebaut werden. Dazu gehe ich in den Editor, in den Quelltext, und suche die Stelle hier Little Boxes und entferne erst einmal den Text, denn dort soll jetzt die Graphik erscheinen. Die Graphik wird eingebunden mit dem Element img. So, und der hat kein /img hinten dran, der hat nur einen Anfangstag, ein sogenanntes leeres Element. Dafür hat es aber jede Menge Attribute. Das wichtigste dabei src=" ". Das ist source, die Quelle für die Graphik. Dort geben Sie die Fahrtangabe zur Graphik an. Wir binden also nicht wirklich die Graphik ein, sondern nur eine Wegbeschreibung, wo diese Graphik zu finden ist. Wenn hier nur ein Dateiname steht little-boxes-logo.gif, dann bedeutet das, dass diese Graphik im selben Ordner gespeichert ist wie die Datei, in der sie eingebunden ist. Das ist am einfachsten, ansonsten müsste man hier relative Fahrtangaben mit dazu schreiben. Wenn die Graphik also im Unterordner bilder liegt, dann müsste man hier schreiben bilder/little-boxes-logo.gif. So, wenn ich hier im Editor darüberfahre, dann zeigt er mir auch gleich die Graphik an und sagt mir, wie groß sie ist, das brauchen wir gleich auch noch. Aber weiter geht es jetzt mal mit einer Alternative alt=" " Und das ist der alternative Text. Das ist ein Attribut, das ist Pflicht beim Einbinden einer Graphik. Und dieser Text wird angezeigt, wenn die Graphik nicht dargestellt wird oder noch nicht dargestellt wird bei einer langsamen Internetverbindung. Das heißt, was ich hier reinschreibe, muss Sinn ergeben, wenn die Graphik nicht zu sehen ist. In diesem Falle schreibe ich nicht hin logo, weil dann würde da einfach nur "Logo" stehen, sondern ich schreibe hin Little Boxes, das, was im Logo steht. Dann brauchen wir noch zwei Angaben, die zu Tippfehlern einladen. width, deswegen übernehme ich das hier gleich mal so und height w-i-d-t-h und h-e-i-g-h-t. So, und dort tragen Sie in Pixeln die Größe der Graphik ein. Die haben wir eben schon gesehen, ich zeig's hier noch mal. 222 und 32. 222 und 32. Dadurch weiß der Browser, bereits bevor er die Graphik holt, wie groß sie dargestellt werden soll, und kann den Platz reservieren. Damit haben wir das Wichtigste zum Einbinden einer Graphik bereits eingebaut. So, gespeichert ist. Ich Browser, rüber in den Browser und lade neu und wups, eine Graphik. Ein Blick in den Quelltext. Seitenquelltext anzeigen Sie sehen hier, das ist identisch mit dem, was wir im Editor haben. Es wird also nicht die Graphik auf der Seite eingebunden, sondern im Web bleiben, Webseite index.html und Graphikdatei, zwei getrennte Dateien, die kommen nicht zusammen, sondern es gibt hier im Quelltext nur eine Wegbeschreibung, wo der Browser die Graphik finden kann. Der braust also erst los und holt den Quelltext und bekommt dann im Qutelltext die Mitteilung, dass eine Graphik eingebunden werden soll, und braust dann wieder los, holt die Graphik und baut sie ein. So, und das zeige ich noch einmal mit der Web Developer-Symbolleiste. In der Abteilung Bilder kann man Alt-Attribute anzeigen oder noch interessanter Bilder mit alt-Attributen ersetzen. Das ist kein alt tag, wenn Sie das irgendwo lesen. Bild mit alt-Attribut ersetzen. So, jetzt wird das Bild ersetzt durch den Text von alt. Das passiert also, wenn ein Benutzer die Bilder ausstellt oder bei einer langsamen Inernetverbindung erscheint der Text, bis die Graphik da ist. Und das ergibt Sinn. Little Boxes steht hier. Es wird in diesem Browser sogar fett hervorgehoben, weil es von h1 umgeben ist. Und selbst wenn die Graphik nicht da ist, ergibt diese Seite so Sinn. Wenn Sie jezt als alt-Text Logo hingeschrieben hätten, dann würde hier jetzt "Logo* stehen. Das ist nicht ganz so sinnvoll. Die Graphik ist damit eingebunden und hat alle benötigten Attribute. Somit sind wir fertig.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Auf Anhieb verstanden
Martina M.

Ein sehr schöner Kurs, auch ohne jegliches Vorwissen. Alles einfach und deutlich - mit Humor - erklärt. Viele gute Tipps. Danke schön :-)

 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 5 min (41 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!