HTML/Tutorials/Einstieg/Kapitel2

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

Text-Info

Lesedauer
15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine Grundkenntnisse nötig!


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 oder mehrere Einzelseiten zu einer „Homepage“ verbinden.

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

  • Der Text (Hier klicken!), den der Anwender sehen soll
  • Die Seite, auf der man beim Anklicken des Verweises landen soll.
für einen Verweis
<a href="zieldatei.html">Hier klicken!</a>

Das a-Element (von englisch: anchor, Verbindung, Verknüpfung) liefert nun einen Verweis auf die zieldatei.html, 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.

Weiter geht's mit dem Menü

Die Schreinerei Meier soll 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.
    Entweder Sie öffnen die Datei in Ihrem Editor und speichern Sie unter einem anderen Namen ab. Alternativ können Sie die bestehende index.html kopieren und die Kopie umbenennen.
  2. Erstellen Sie eine Liste mit Links zu den anderen Seiten der Schreinerei.
  3. Suchen Sie in Wikimedia Commons nach einer Bild-Datei (z. B: https://upload.wikimedia.org/../cupboard.jpg ).
    1. Binden Sie diese mit einem Link ein.
    2. Was passiert, wenn Sie eine Bild-Datei über einen Link aufrufen?
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 wollen) ein.

Wie Sie sehen können, ist der erste Eintrag zwar ein Verweis, der aber anstelle des href-Attributs auf eine andere Seite ein ARIA-Attribut hat, das Screenreadern anzeigt, auf welcher Seite sich der Benutzer befindet.

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="preise.html">Unsere Preise</a></li>
        <li><a href="inhalt.html">Bilder von unseren Produkten</a></li>
        <li><a href="kontakt.html">Kontakt und Impressum</a></li>
      </ul>
    </nav>
<p>Willkommen bei der Schreinerei Meier im Internet!</p>
<p>Wir sind seit vielen Jahren darauf spezialisiert, alle Kundenwünsche zu erfüllen.
	In unserer Werkstatt produzieren wir selbst - mit Holz aus regionaler, nachhaltiger
	Forstwirtschaft.</p>
<h2>Unsere Leistungen:</h2>
<ul>
	<li>Möbel nach Ihren Wünschen
		<ul>
			<li>Küchenmöbel</li>
			<li>Regale und Schrankwände</li>
			<li>Badezimmermöbel</li>
		</ul>
	</li>
	<li>Haustüren</li>
	<li>Gartenzäune</li>
	<li>Reparaturen</li>
</ul>
<h2>Unsere Geschichte:</h2>
<p>Die Anfänge unserer Firma reichen bis ins Mittelalter zurück, als Horst Holzmann
	begann seine bisher für den Eigenbedarf hergestellten Möbel auch auf dem Markt der
	nächsten Stadt zu verkaufen.</p>
<p>Sein Sohn führte diese Tradition fort und nach ihm noch viele weitere Kinder und
	Kindeskinder. Heute führt Schwiegersohn Harry Meier den Betrieb in der 15. Generation
	weiter und arbeitet bereits seinen Enkel als Nachfolger ein.</p>
</body>
</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 inhalt.html klicken, die ja noch fehlt.

Bilder einbinden

Im ersten Abschnitt haben wir einen Verweis zu einem Bild gesetzt. Bei einem Klick lädt der Browser die verlinkte Datei und unsere Webseite verschwindet.

Nun wollen wir Bilder so in eine Webseite so einbinden, dass sie innerhalb des Dokuments angezeigt werden.

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

Aufgabe:
  1. Bitte sichern Sie diese Bilder vermittels eines Rechtsklicks und dann „Bild speichern unter…“ oder „Grafik speichern unter…“.
  2. Speichern Sie die Bilder dann bitte in dem Verzeichnis mit dem Namen img ab.
  3. Erstellen Sie eine neue HTML-Datei inhalt.html.

Alternativ können Sie eine zip-Datei mit allen HTML-Dokumenten, Grafiken und Stylesheets unter

https://src.selfhtml.org/designs/html-einstieg.zip

herunterladen. Diese müssen Sie dann auf Ihrem Computer entpacken.

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

Information: Ein Alternativtext zur Grafik

Das Attribut alt ist tatsächlich recht wichtig und es sollte dort auch möglichst eine kurze Beschreibung des Bildes notiert sein. Jetzt werden Sie wieder fragen, warum, denn die Grafik wird ja auf dem Monitor angezeigt. Da sind wir wieder bei der Zielgruppe:
Für unseren Schreiner ist es wichtig, möglichst alle Menschen zu erreichen, auch die, die z. B. blind sind und sich die HTML-Seiten daher nicht auf einem Monitor ausgeben, sondern sie sich von einem Computerprogramm (einem sogenannten Screenreader) vorlesen lassen oder auf einer Braillezeile mit den Fingern lesen. Diese Menschen können dann zwar das Bild nicht sehen, erfahren aber durch die Beschreibung im alt-Attribut wenigstens, was auf dem Bild zu sehen ist.

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

Information: Pfadangaben

Pfadangaben sind tatsächlich ein so vielschichtiges Thema, dass diese Dokumentation ihnen eine eigene Seite widmet: Referenzieren in HTML.

Hier das Wichtigste in Kürze:

Pfadangaben kennen Sie von Ihrem Betriebssystem. Das Verzeichnis mit Ihren persönlichen Dokumenten hat folgende Pfadangabe:

In Windows: C:\Benutzer\Ihr Name\Dokumente\ (eigentlich: C:\Users\Ihr Name\Documents),

in Mac OS X: /Users/Ihr Name/,

und in den meisten Linux-Distributionen: /home/Ihr Name/

Bei HTML ist das Prinzip ähnlich. Für unsere Zwecke brauchen wir auch nicht sämtliche Unterschiede und Details zu erforschen, sondern konzentrieren uns auf das Wesentliche:

Die Bestandteile des Pfades werden nicht wie unter Windows mit einem sogenannten "Backslash" (\) getrennt, sondern mit dem normalen Schrägstrich (/), also so, wie es auch bei anderen Betriebssystemen üblich ist.


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 index.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 index.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/chair.svg" alt="Schaukelstuhl" >
      <img src="img/desk.svg" alt="Schreibtisch">

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.

Einbindung eines Videos ansehen …
<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>
Beachten Sie: Das Einbinden von Grafiken und Videos anderer Webseiten gilt als verpönt und kann urheberrechtliche Konsequenzen nach sich ziehen.

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.