032.3 Lektion 1

Die meistverwendete Art von eingebetteten Inhalten sind Bilder, die den Text begleiten. Bilder werden separat abgelegt und in der HTML-Datei mit dem Tag <img> referenziert:

Das <img>-Tag benötigt kein schließendes Tag. Die Eigenschaft src gibt den Quellort für die Bilddatei an. In diesem Beispiel muss sich die Bilddatei logo.png im selben Verzeichnis wie die HTML-Datei befinden, sonst kann der Browser sie nicht anzeigen. Die Eigenschaft source location (src) akzeptiert relative Pfade, so dass mit der Dot- oder Punktnotation den Pfad zum Bild angeben:

Die beiden Punkte zeigen an, dass sich das Bild im übergeordneten Verzeichnis relativ zu dem Verzeichnis befindet, in dem die HTML-Datei liegt. Wird der Dateiname ../logo.png in einer HTML-Datei verwendet, deren URL http://example.com/library/periodicals/index.html lautet, fordert der Browser die Bilddatei unter der Adresse http://example.com/library/logo.png an.

Die Punktnotation gilt auch, wenn die HTML-Datei keine tatsächliche Datei im Dateisystem ist; der HTML-Browser interpretiert die URL als Pfad zu einer Datei, aber es ist die Aufgabe des HTTP-Servers zu entscheiden, ob sich dieser Pfad auf eine Datei oder auf dynamisch generierte Inhalte bezieht. Die Domäne und der richtige Pfad werden automatisch zu allen Anfragen an den Server hinzugefügt, falls die HTML-Datei von einer HTTP-Anfrage stammt. Ebenso wird der Browser das richtige Bild öffnen, wenn die HTML-Datei direkt aus dem lokalen Dateisystem geöffnet wurde.

Quellorte, die mit einem Schrägstrich / beginnen, werden als absolute Pfade behandelt. Absolute Pfade enthalten vollständige Informationen über den Speicherort des Bildes, so dass sie unabhängig vom Speicherort des HTML-Dokuments funktionieren. Wenn sich die Bilddatei auf einem anderen Server befindet, etwa bei Einsatz eines Content Delivery Network (CDN) , muss auch der Domainname angegeben werden.

Wenn er das Bild nicht laden kann, zeigt der HTML-Browser anstelle des Bildes den mit dem Attribut alt angegebenen Text an. Zum Beispiel:

Das Attribut alt ist auch für die Barrierefreiheit wichtig: Nur-Text-Browser und Bildschirmlesegeräte verwenden es als Beschreibung für das entsprechende Bild.

Audio- und Videoinhalte fügen Sie einem HTML-Dokument mehr oder weniger auf die gleiche Weise hinzu wie Bilder. Es überrascht nicht, dass das Tag zum Hinzufügen von Audio <audio> und das Tag zum Hinzufügen von Video <video> ist. Offensichtlich sind reine Textbrowser nicht in der Lage, Multimediainhalte abzuspielen, so dass die Tags <audio> und <video> ein schließendes Tag nutzen, um den Text aufzunehmen, der als Ersatz für das Element dient, das nicht angezeigt werden konnte. Zum Beispiel:

Wenn der Browser das <audio>-Tag nicht unterstützt, zeigt er stattdessen die Zeile “Unable to play recording.mp3” an. Die abschließenden </audio>- oder </video>-Tags machen es der Webseite möglich, aufwändigere alternative Inhalte als die einfache Textzeile aufzunehmen, die das Attribut alt des <img>-Tags erlaubt.

Das Attribut src für die Tags <audio> und <video> funktioniert genauso wie für das Tag <img>, akzeptiert aber auch URLs, die auf einen Live-Stream verweisen. Der Browser kümmert sich um die Pufferung, Dekodierung und Anzeige des Inhalts, wenn er empfangen wird. Das Attribut controls zeigt die Wiedergabesteuerung an. Ohne dieses Attribut ist der Besucher nicht in der Lage, die Wiedergabe anzuhalten, zurückzuspulen oder anderweitig zu steuern.

Ein HTML-Dokument kann in ein anderes HTML-Dokument verschachtelt werden, ähnlich wie das Einfügen eines Bildes in ein HTML-Dokument, jedoch unter Verwendung des Tags <iframe>:

Einfachere reine Textbrowser unterstützen das <iframe>-Tag nicht und zeigen stattdessen den eingeschlossenen Text an. Wie bei den Multimedia-Tags beschreibt das Attribut src den Quellort des verschachtelten Dokuments. Die Attribute width und height können hinzugefügt werden, um die Standardabmessungen des iframe-Elements zu ändern.

Das Attribut name ermöglicht es, auf den iframe zu verweisen und das eingebettete Dokument zu ändern. Ohne dieses Attribut kann das eingebettete Dokument nicht geändert werden. Ein anchor-Element dient dazu, ein Dokument von einer anderen Stelle innerhalb eines iframe anstelle des aktuellen Browserfensters zu laden.

Die Adresse eines HTML-Dokuments kann optional ein Fragment enthalten, das der Identifizierung einer Ressource innerhalb des Dokuments dient. Dieses Fragment, das auch als URL-Anker bezeichnet wird, ist eine Zeichenkette, die auf ein Rautenzeichen # am Ende der URL folgt. Zum Beispiel ist das Wort History der Anker in der URL "https://en.wikipedia.org/wiki/Internet#History".

Wenn die URL einen Anker enthält, blättert der Browser zu dem entsprechenden Element im Dokument, d.h. zu dem Element, dessen Attribut id dem Anker in der URL entspricht. Im Falle der angegebenen URL, https://en.wikipedia.org/wiki/Internet#History, springt der Browser direkt zum Abschnitt “History”. Bei der Untersuchung des HTML-Codes der Seite stellt sich heraus, dass der Titel des Abschnitts das entsprechende id-Attribut hat:

URL-Anker können im href-Attribut des <a>-Tags verwendet werden, entweder wenn sie auf externe Seiten zeigen oder wenn sie auf Stellen innerhalb der aktuellen Seite verweisen. Im letzteren Fall reicht es aus, mit dem Rautezeichen und dem URL-Fragment zu beginnen, wie in <a href="#History">History</a>.

Es gibt Möglichkeiten, die Reaktion des Browsers auf URL-Anker anzupassen. Sie könnten z.B. eine JavaScript-Funktion schreiben, die auf das hashchange-Fensterereignis wartet und eine benutzerdefinierte Aktion auslöst, wie z.B. eine Animation oder eine HTTP-Anfrage. Es ist jedoch zu beachten, dass das URL-Fragment niemals zusammen mit der URL an den Server gesendet wird, so dass es der HTTP-Server nicht als Bezeichner nutzen kann.