{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.
| Vorwissen: | HTML-Grundlagen, wie sie in Lernen Sie HTML kennen abgedeckt werden. HTML Textformatierung, wie in Einfache Textformatierung in HTML abgedeckt wird. Wie Links funktionieren, wie im Artikel Links erstellen beschrieben wird. |
|---|---|
| Ziel: | Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft. |
Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:
Eine „typische Webseite“ könnte wie folgt strukturiert werden:
Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen.
Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?
Hinweis: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa 285 Millionen Menschen, während die Gesamtpopulation bei 7 Billionen Menschen liegt.
Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche Funktion sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden.
Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:
Das Beispiel oben basiert auf dem folgenden Code (Man kann dieses Beispiel auch auf GitHub finden). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titel der Webseite</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Hier kommt der Hauptinhalt unserer Webseite -->
<main>
<!-- Es enthält einen Artikel -->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h3>subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>
<!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen-->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.
Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer HTML Elemente Referenz finden.
<main> sollte nur einmal pro Webseite genutzt werden und sollte direkt im {{HTMLElement('body')}} stehen und nicht innerhalb anderer Elemente.<article>, aber eher für das Gruppieren von Bereichen mit bestimmter Funktionalität (z.B. eine Minikarte oder einige Artikel-Überschriften und Zusammenfassungen). Es ist gute Praxis, jede section mit einer Überschrift zu starten. Man kann <article>s in mehrere <section>s aufteilen und umgekehrt, es geht beides.Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.
{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:
<p>Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte <span class="editor-hinweis">[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]</span>.</p>
In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.
{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:
<div class="einkaufswagen">
<h2>Einkaufswagen</h2>
<ul>
<li>
<p><a href=""><strong>Silber Ohrringe</strong></a>: $99.95.</p>
<img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe">
</li>
<li>
...
</li>
</ul>
<p>Kosten gesamt: $237.89</p>
</div>
Dies ist nicht wirklich Inhalt für <aside>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <section> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <div> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.
Warnung: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.
Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:
<br> stellt einen Zeilenumbruch innerhalb eines Absatzes(
) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:
<p>There once was a girl called Nell<br> Who loved to write HTML<br> But her structure was bad, her semantics were sad<br> and her markup didn't read very well.</p>
Ohne die <br> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn HTML ignoriert Whitespace. Mit den
Elementen im Code wird der Absatz wie folgt dargestellt:
There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.
<hr> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:
<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p> <hr> <p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>
Würde wie folgt aussehen:
Die Katze lief aus dem Haus, um die Sonne zu genießen.
Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.
Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!
Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?
Hinweis: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.
Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}