SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Einstieg in HTML/Hypertext und Multimedia

Aus SELFHTML-Wiki
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

Weißt du noch, wofür das Akronym HTML steht?

Ja, das war Hypertext Markup Language. Mit Hypertext kannst du 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. Erstelle ein zweites HTML-Dokument mit dem Namen inhalt.html.
    Erstelle dazu eine neue Datei in deinem Editor und speicher sie unter diesem Namen ab. Alternativ kannst du die vorhandene index.html Datei kopieren und die Kopie umbenennen.
    Du kannst diese Datei mit eigenen Inhalten füllen oder vorerst bis auf Titel und Überschrift leer lassen.
  2. Verlinke von der Startseite (index.html) auf die neue Seite, indem Du …
    • eine Liste erstellst
    • 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 du sehen kannst, 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>

[[Beachte| 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 du die bisherigen Dateien auf deiner Festplatte abgespeichert hast, probier das neue Menü ruhig einmal aus. Wenn du mehr als einen Versuch durchführst, wirst du vielleicht auch bemerken, dass sich die Farbe des Verweistextes ändert. Der Browser merkt sich nämlich in gewissem Rahmen, welche Verweise du bereits besucht hast und kennzeichnet bereits „besuchte“ Verweise gewöhnlich in einer anderen Farbe als die noch nicht besuchten Verweise.

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

Aufgabe:
  1. Öffne nun die zweite Seite inhalt.html im Editor.
  2. Lege dort eine weitere Navigation an.
    1. Tipp: Kopier die Navigation der Startseite index.html in die neue Seite.
    2. Stell sicher, dass nicht auf die jeweils aktuelle Seite verlinkt wird.

Du kannst 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 Beispielgrafik Schreibtisch Bed-modern.svg Beispielgrafik Stuhl


Aufgabe:

Lade die zip-Datei mit allen Grafiken unter

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

herunter.

Diese musst du dann auf deinem Computer entpacken und den Ordner /img in den Ordner der index.html kopieren.

Achtung!

Nutze 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.
Alternativ könntest du diese Bilder herunterladen, wenn du mit der rechten Maustaste auf die Grafik klickst und nun die Funktion wählst, um die verlinkte Datei zu speichern ("Link speichern unter...", "Ziel speichern unter..."). Dein Browser sollte dir 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 erhältst du übrigens im Artikel Element, Tag und Attribut.)

Empfehlung: Mit einem Validierungs-Stylesheet kannst du während der Entwicklung deiner Webseite überprüfen, ob alle Grafiken ein alt-Attribut besitzen.
(Mehr über die Formatierung mit Stylesheets erfährst du 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">
Beachte: 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 dir gerade gezeigt haben. Beachte, dass in diesen Pfadangaben keine Laufwerksbezeichnungen (unter Windows z. B. C:\) oder Verzeichnisse außerhalb unseres Projekts vorkommen dürfen. Relative Pfadangaben haben den Vorteil, dass du dein Projekt als Ganzes beliebig auf deiner Festplatte, auf andere Laufwerke und vor allem auf einen Internetserver verschieben oder kopieren kannst, und die Pfadangaben trotzdem noch funktionieren.

Übrigens: Wenn du es wirklich ernst damit meinst, deine 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 du sie später nicht ständig ändern musst. Viele nicht funktionierende Verweise (englisch: broken links), über die du dich vielleicht auch schon geärgert hast, sind durch solche nachträglichen Umstrukturierungen zustande gekommen.

Näheres hierzu erfährst du 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. du kannst den Browser bei der Darstellung der Bilder unterstützen, indem du Angaben zur Breite (width) und Höhe (height) der Grafikdatei in CSS-Pixel machst. 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">
Beachte: Größenangaben sollten nicht zur Verzerrung von Grafiken missbraucht werden. Dies kannst du mit der transform-Eigenschaft erreichen.


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>
Beachte: 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=Einstieg_in_HTML/Hypertext_und_Multimedia&oldid=102545“