HTML/Tutorials/Einstieg/Hypertext und Multimedia

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Herr Meier möchte, dass seine Kunden wissen, was er anzubieten hat. Wie kann man diesen Eindruck besser vermitteln als mit Bildern, einer Galerie und einem Film aus seiner Werkstatt?

In diesem Kapitel zeigen wir, wie Herr Meier eine zweite Seite erstellt, diese verlinkt und Bilder und Videos einbindet.

Auf Seiten verlinken

Wissen Sie noch, wofür das Akronym HTML steht?

Ja, das war Hypertext Markup Language. Mit Hypertext können Sie nun auf andere Seiten oder Dokumente verlinken und mehrere Einzelseiten zu einem Webauftritt (englisch web site) verbinden.

Für einen Link benötigen wir zwei Informationen:

  • Der Text (z. B. Bilder von unseren Produkten), den der Anwender sehen soll
  • Die Seite, auf der man beim Anklicken des Verweises landen soll.
Beispiel für einen Verweis 
 <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML Startseite</a>

Das a-Element (von englisch: anchor, Verbindung, Verknüpfung) liefert nun einen Verweis auf die Zieldatei, die nach dem Klicken angezeigt wird.

Innerhalb der spitzen Klammern des Start-Tags gibt es ein href-Attribut (englisch: hyper reference = Hyper[text]-Referenz). Als Wert erhält es die URL, die „Adresse“ der Datei, zu der man beim Anklicken gelangen soll.

Damit nicht die gesamte URL sichtbar ist, kann innerhalb der a-Tags ein kürzerer Linktext oder sogar ein Bild notiert werden.

Weiter geht's mit dem Menü

Die Schreinerei Meier soll neben der index.html aus dem 1. Kapitel weitere (Unter)-Seiten erhalten. Um von der Startseite zu den Unterseiten und zurück zu gelangen, benötigen wir eine Navigation, auch Menü genannt!

Aufgabe:
  1. Erstellen Sie ein zweites HTML-Dokument mit dem Namen inhalt.html.
    Erstellen Sie dazu eine neue Datei in Ihrem Editor und speichern Sie sie unter diesem Namen ab. Alternativ können Sie die vorhandene index.html Datei kopieren und die Kopie umbenennen.
    Sie können diese Datei mit eigenen Inhalten füllen oder vorerst bis auf Titel und Überschrift leer lassen.
  2. Verlinken sie von der Startseite (index.html) auf die neue Seite, indem Sie …
    • eine Liste erstellen
    • die mit Links zu den anderen Seiten der Schreinerei gefüllt wird.
Beispiel für ein Menü (ungeordnete Liste mit Verweisen) 
<ul>
  <li><a tabindex="0" aria-current="page">Startseite</a></li>
  <li><a href="inhalt.html">Bilder von unseren Produkten</a></li>
  <li><a href="preise.html">Unsere Preise</a></li>
  <li><a href="kontakt.html">Kontakt und Impressum</a></li>
</ul>

Das ganze Menü besteht in unserem Fall aus einer ungeordneten Liste. Damit unsere Liste nicht allzu karg aussieht, und damit wir die Dateien jetzt nicht ständig ändern müssen, bauen wir auch schon Verweise auf weitere HTML-Seiten (die wir später erstellen, bzw. mit Inhalten füllen wollen) ein.

Wie Sie sehen können, haben der zweite bis vierte Link die oben erwähnten href-Attribute mit den jeweiligen URLs. Der erste Eintrag ist zwar ein Verweis, hat aber anstelle des href-Attributs ein aria-current-Attribut mit dem Wert page. WAI-ARIA ist ein W3C-Standard zur Verbesserung der Zugänglichkeit von Webseiten für Menschen mit Beeinträchtigungen, vor allem beim Sehen. Mit aria-current="page" wird ein Screenreader veranlasst, diesen Link als Repräsentation der aktuellen Seite vorzutragen. Weitere Anwendungen von aria-current finden Sie im verlinkten Artikel.

Das dient dazu, dass das Menü einen einheitlichen Aufbau hat. Denn wir müssen das Menü nun ja auf allen Seiten einfügen, die zu unserem Webangebot gehören. Schließlich will der Anwender ja auf allen Seiten ein Menü haben, um auf unseren Seiten hin- und herspringen zu können. Auf den anderen Seiten muss dort, wo jetzt nur der leere Link „Startseite“ steht, ein Verweis auf index.html eingebaut werden (mehr dazu später).

Wenn wir solche „Leereinträge“ jedes Mal weglassen würden, dann wäre das Menü auf jeder Seite anders aufgebaut, und das wäre für den Benutzer ziemlich verwirrend.

Hier haben wir die Startseite index.html einmal mit einem solchen Menü versehen:

Startseite der Schreinerei Meier mit einem Menü ansehen …
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schreinerei Meier, Dingenskirchen</title>
  </head>
  
  <body>
    <h1>Schreinerei Meier, ihre Werkstatt für gutes Wohnen</h1>
    <nav>
    <ul>
      <li><a tabindex="0" aria-current="page">Startseite</a></li>
      <li><a href="inhalt.html">Bilder von unseren Produkten</a></li>
      <li><a href="preise.html">Unsere Preise</a></li>
      <li><a href="kontakt.html">Kontakt und Impressum</a></li>
    </ul>
    </nav>

    ...
</body>
</html>
Hier weicht der HTML-Code im Frickl vom Tutorial ab. Im Beispiel-Frickl benötigt man für die URL noch die Angabe eines Namensraums und die Seitennamen erhalten einen Großbuchstaben am Anfang. Aus inhalt.html wird so
./Beispiel:Inhalt.html

Das Menü haben wir außerhalb des normalen Textflusses ganz nach oben gesetzt, damit man es sofort sieht. Es ist innerhalb eines nav-Elements platziert, damit es gleich als (Haupt-)Menü erkannt wird. Wenn Sie die bisherigen Dateien auf Ihrer Festplatte abgespeichert haben, probieren Sie das neue Menü ruhig einmal aus. Wenn Sie mehr als einen Versuch durchführen, werden Sie vielleicht auch bemerken, dass sich die Farbe des Verweistextes ändert. Der Browser merkt sich nämlich in gewissem Rahmen, welche Verweise Sie bereits besucht haben und kennzeichnet bereits „besuchte“ Verweise gewöhnlich in einer anderen Farbe als die noch nicht besuchten Verweise.

Beobachten Sie auch, was passiert, wenn Sie auf die Datei kontakt.html klicken, die ja noch fehlt. (Im SELF-Wiki ist sie bereits angelegt!)

Aufgabe:
  1. Öffnen Sie nun die zweite Seite inhalt.html im Editor.
  2. Legen Sie dort eine weitere Navigation an.
    1. Tipp: Kopieren Sie die Navigation der Startseite index.html in die neue Seite.
    2. Stellen Sie sicher, dass nicht auf die jeweils aktuelle Seite verlinkt wird.

Sie können Verweise auf andere HTML-Dokumente, aber auch auf Bilder; Videos und Pdf-Dokumente setzen. Dann wird die verlinkte Datei vom Browser geöffnet, wenn der Typ bekannt ist.

Bilder einbinden

Nun wollen wir Bilder so in eine Webseite so einbinden, dass sie innerhalb des Dokuments angezeigt werden. Dafür verwenden wir die neue Seite inhalt.html, die ja bis auf die Navigation noch leer ist.


Beispielgrafik Kommode Beispielgrafik Kommode Beispielgrafik Aktenschrank Beispielgrafik Tisch Beispielgrafik Schrank Bed-modern.svg Beispielgrafik Stuhl Beispielgrafik Schreibtisch


Aufgabe:

Laden Sie die zip-Datei mit allen Grafiken unter

src.selfhtml.org/kurse/html-einstieg-bilder.zip

herunter.

Diese müssen Sie dann auf Ihrem Computer entpacken und den Ordner /img in den Ordner der index.html kopieren.

Achtung!

Nutzen Sie nicht die Funktion "Bild speichern unter" oder "Grafik speichern unter".
Die Mediawiki-Software ersetzt SVGs durch eine png-Vorschau. Dadurch würden diese Bilder als PNG-Datei gespeichert und die Dateiendungen müssten im Folgenden entsprechend angepasst werden.
Alternative könnten Sie diese Bilder herunterladen, wenn Sie mit der rechten Maustaste auf die Grafik klicken und nun die Funktion wählen, um die verlinkte Datei zu speichern ("Link speichern unter...", "Ziel speichern unter..."). Ihr Browser sollte Ihnen nun eine SVG-Datei zum Speichern anbieten.


Einbindung einer Grafik 
  <img src="name.svg" alt="alternative Bildbeschreibung">

Wenn wir den HTML-Code oben anschauen, fällt auf, dass das img-Element (von englisch: image, Bild) nur einen Tag besitzt. Genau genommen hat es auch keinen Inhalt, sondern ist nur ein Platzhalter für die Grafik.

Anders als ein Word-Dokument, in dem neben dem Text an sich auch die Bilder selbst gespeichert werden (und die Datei-Größen entsprechend aufblähen), gibt das img-Element nur einen Verweis auf die an anderer Stelle gespeicherte Grafik-Datei.

Das img-Tag enthält zwei Attribute:

  • das src-Attribut (englisch: source = Quelle). Als Wert erhält es die URL, die „Adresse“ der Datei, die angezeigt soll.
  • das alt-Attribut liefert einen Alternativtext, falls die Grafik nicht geladen oder angezeigt werden kann.

(Weitere Informationen zu Attributen erhalten Sie übrigens im Artikel Element, Tag und Attribut.)

Empfehlung: Mit einem Validierungs-Stylesheet können Sie während der Entwicklung Ihrer Webseite überprüfen, ob alle Grafiken ein alt-Attribut besitzen.
(Mehr über die Formatierung mit Stylesheets erfahren Sie im nächsten Kapitel.)

Referenzieren in HTML

Verweise und das img-Element arbeiten mit URLs (engl. Uniform Resource Locator). Dies sind vereinfacht Internetadressen. Externe URLs erkennt man am https://....

Anfangs können alle Bilder und Unterseiten im gleichen Ordner bleiben. Die URL besteht so nur aus dem Dateinamen.

Langfristig ist es besser Bilder und andere Dateien in eigene Ordner zu sortieren und auf diese zu verlinken.

Für unsere Zwecke ist es sinnvoll, „relative“ Pfadangaben zu verwenden. Das heißt, wir gehen von unserer jetzigen Position aus (in unserem Fall: der Order home, aus dem die HTML-Datei inhalt.html geladen wurde) und beschreiben den Weg vom Ort dieser HTML-Datei zur Zieldatei chair.svg:

Pfadangaben für Bilder

Der Pfeil in der obigen Abbildung zeigt an, welchen „Pfad“ der Browser gehen muss, um zur „Zieldatei“ zu gelangen. Unglücklicherweise können wir nicht einfach den direkten Weg nehmen - irgendwie schräg durch alle Ebenen - wie der Pfeil oben, sondern müssen dem Browser Schritt für Schritt sagen, wo er lang gehen soll, um zum Ziel zu kommen.

Um also von der jetzigen Position, dem html Ordner, zum Ziel zu kommen, müssen wir Folgendes tun:

  1. Wir müssen in das Verzeichnis img hinein, also ist der erste Bestandteil der Pfadangabe img. (Das geht ohne weitere Angaben, weil die Datei inhalt.html, von der aus wir losgehen, im gleichen Verzeichnis liegt wie das Unterverzeichnis img.)
  2. Wir fügen den Schrägstrich an (/), mit dem man die Bestandteile der Pfadangabe trennt.
  3. Zum guten Schluss kommt der Dateiname chair.svg.

Aus diesen drei Schritten ergibt sich der Pfad img/chair.svg zur Grafik im Bilderordner.

Inhalt.html mit Bildern ansehen …
  <img src="img/cabinet.svg" alt="Kommode" >
  <img src="img/dresser.svg" alt="Kommode mit Schubladen" >
  <img src="img/filing-cabinet.svg" alt="Aktenschrank" >
  <img src="img/table.svg" alt="Schreibtisch" >    
  <img src="img/cupboard.svg" alt="Schrank">
  <img src="img/bed-modern.svg" alt="Modernes Bett">
  <img src="img/chair.svg" alt="Schaukelstuhl" >
  <img src="img/desk.svg" alt="Schreibtisch">
Beachten Sie: Auch hier weicht der HTML-Code im Tutorial vom Beispiel-Frickl ab.

In Mediawiki werden Bilder automatisch in verschiedenen Ordnern gespeichert. Anstelle img/cabinet.svg muss

/images/0/0f/Cabinet.svg notiert werden.

Verzeichnisangaben in HTML-Dateien sollten immer „relativ“ sein, so, wie wir es Ihnen gerade gezeigt haben. Beachten Sie, dass in diesen Pfadangaben keine Laufwerksbezeichnungen (unter Windows z. B. C:\) oder Verzeichnisse außerhalb unseres Projekts vorkommen. Relative Pfadangaben haben den Vorteil, dass Sie Ihr Projekt als Ganzes beliebig auf Ihrer Festplatte, auf andere Laufwerke und vor allem auf einen Internetserver verschieben oder kopieren können, und die Pfadangaben trotzdem noch funktionieren.

Übrigens: Wenn Sie es wirklich ernst damit meinen, Ihre Dateien ins Internet zu stellen (also so, dass diese unter einer Adresse wie etwa www.example.com erreichbar sind), dann ist es auch ratsam, die Verzeichnisstruktur so vorausschauend zu organisieren, dass Sie sie später nicht ständig ändern müssen. Viele nicht funktionierende Verweise (englisch: broken links), über die Sie sich vielleicht auch schon geärgert haben, sind durch solche nachträglichen Umstrukturierungen zustande gekommen.

Näheres hierzu erfahren Sie unter Dateiorganisation.

Breite und Höhe des Bildes

Rastergrafiken, Videos und andere eingebundene Dateien haben im Allgemeinen eine intrinsische Größe, die die Außmaße des Bilds festlegt. Das img-Element räumt dem Element den nötigen Platz ein. Sie können den Browser bei der Darstellung der Bilder unterstützen, indem Sie Angaben zur Breite (width) und Höhe (height) der Grafikdatei in CSS-Pixel machen. Diese helfen

  1. das Bild zu skalieren
  2. den Platz beim Laden der Seite schon zu reservieren, bis auch Bilder und andere Medien geladen werden.

Im oberen Beispiel sind alle Bilder gleich groß, obwohl der Kleiderschrank mehr als doppelt so groß angezeigt werden soll.

Bilder mit Größenangaben ansehen …
  <img src="img/cabinet.svg" alt="Kommode" width="200" height="200">
  <img src="img/dresser.svg" alt="Kommode mit Schubladen" width="200" height="200">
  <img src="img/filing-cabinet.svg" alt="Aktenschrank" width="200" height="200">
  <img src="img/table.svg" alt="Schreibtisch" width="200" height="200">    
  <img src="img/cupboard.svg" alt="Schrank" width="500" height="500">
Beachten Sie: Größenangaben sollten nicht zur Verzerrung von Grafiken missbraucht werden. Dies können Sie mit der transform-Eigenschaft erreichen.
Empfehlung: Im Normalfall unterlassen Sie Breiten-und Höhenangaben und regeln das über CSS (Mehr dazu im Kapitel 3 (Gestaltung mit CSS)). Dabei können Sie für unterschiedliche Geräte auch verschiedene Größen festlegen.

Ein Film

Ähnlich wie das img-Element funktioniert auch das Einbinden von Videos. Sie können diesen Film auf Ihrer Seite inhalt.html hinzufügen, eine eigene Seite anlegen, oder dieses Kapitel nur durchlesen.

Einbindung eines Videos - Einfache Form 
<video src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Carpentry.ogv" controls>
  Dieser Film zeigt eine Szene aus unserer Schreinerei.<br>
  Ihr Browser kann dieses Video nicht wiedergeben. Sie können es unter <a href="#">Link-Addresse</a> abrufen.
</video>

Genau wie das img-Element gibt es ein src-Attribut für die Quelle des Videos. Ein alt-Attribut gibt es dagegen nicht, das wurde beim video-Element anders gelöst. Hier schreiben Sie den Ersatztext einfach zwischen <video> und </video>. Wenn der Browser das <video> Element nicht kennt, zeigt er diesen Text.

Hinzu kommt ein weiteres Attribut: controls. Dieses Attribut erzeugt die Bedienelemente für die Videowiedergabe. Ohne dieses Attribut müssten Sie mit Hilfe von JavaScript die Videosteuerung selbst übernehmen.

An dieser Stelle ist leider ein Exkurs zu Audio- und Videoformaten notwendig. Bei Bildern ist es relativ einfach, alle Browser verstehen heute JPG, GIF und PNG-Grafiken, und etliche Formate mehr. Bei Videos ist die Vielfalt an möglichen Codierungen und Speicherformaten beachtlich, und einige davon dürfen von Softwareherstellern nur gegen Zahlung von Lizenzgebühren verwendet werden. Die HTML 5 Spezifikation für das <video> Element hat deshalb ursprünglich das Speicherformat Ogg mit dem freien Video-Codec Theora als Mindeststandard festlegen wollen, dieser Passus wurde aber wieder gestrichen weil die Patentlage bei Theora nicht ganz klar war.

Unser Beispielvideo ist mit Ogg/Theora erstellt, und es scheint, als ob Google seine Ankündigung von 2011 umgesetzt hätte: Chrome spielt es nicht ab. Eine Lösung besteht darin, ein Videoformat zu wählen, das alle Browser unterstützen. Daran arbeiten wir bei Selfhtml noch.

Eine andere Lösung besteht darin, das Video in mehreren Formaten parallel anzubieten. Für Chrome benötigen wir beispielsweise eine WebM-Datei, die den VP8 oder VP9 Codec nutzt. Wikimedoa Commons bietet das Video auch in diesen Formaten an.

Um mehrere Videoformate parallel anbieten zu können, verfügt das video Element über eine erweiterte Schreibweise. An Stelle eines src-Attributs werden mehrere source-Elemente als Kind-Elemente des video-Elements notiert, jedes mit einem src-Attribut und einem type-Attribut, das dem Browser sagt, welches Videoformat er hier zu erwarten hat. Dadurch kann der Browser ein passendes Videoformat auswählen, ohne jede Videodatei abrufen zu müssen.

Einbindung eines Videos in mehreren Formaten ansehen …
<video controls width="640" height="480">
  <source src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Carpentry.og" type="video/ogg">
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/e/e1/Carpentry.ogv/Carpentry.ogv.480p.vp9.webm" type="video/webm">
  Dieser Film zeigt eine Szene aus unserer Schreinerei.<br>
  Ihr Browser kann dieses Video nicht wiedergeben. Sie können es unter <a href="#">Link-Addresse</a> abrufen.
</video>
Beachten Sie: Das Einbinden von Grafiken und Videos anderer Webseiten gilt als verpönt und kann urheberrechtliche Konsequenzen nach sich ziehen. Wikimedia Commons gestattet den Gebrauch von dort gespeicherten Medien in anderen Wikimedia-Projekten dagegen ausdrücklich.

Sind Sie inzwischen eigentlich gelangweilt vom Aussehen unserer Webseiten? Dann sollten wir sie endlich hübscher machen! Auf der nächsten Seite legen wir damit los.

Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Einstieg/Hypertext_und_Multimedia&oldid=97180“