1.8 Erste HTML5 Webseite
Okay, los geht's! Sie haben sich jetzt genügend Wissen angeeignet, um Ihre erste HTML5 Webseite zu erstellen. Sie haben bereits gelernt:
- Wie ein HTML5 Grundgerüst aufgebaut ist und aus welchen Bereichen es besteht
- Wie Elemente notiert und verschachtelt werden
1.8.1 Ergänzungen im Kopfbereich
Wir erweitern zunächst die Elemente im Kopfbereich. Als Grundlage dient uns unser HTML5 Grundgerüst. Die einzelnen Bereiche werden jetzt mit Inhalt gefüllt.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="author" content="Dein Name"> <meta name="keywords" content="Schlagwörter"> <meta name="description" content="Kurze Beschreibung"> <title>Startseite</title> </head> <body> ... </body> </html>
Wie bereits erwähnt, beherbergt der Kopfbereich Informationen zum Dokument. Lassen Sie uns das Listing genauer betrachten.
Die Metatags
- Zeichensatz
-
Mit dieser Angabe können Sie den verwendeten Zeichensatz, zur korrekten Interpretation des Dokuments durch den Browser, bekannt geben. Beachten Sie die Schreibweise, bei diesem Metatag gibt es kein
name="..." content="..."!<meta charset="utf-8">Syntax Wir verwenden den Zeichensatz
utf-8! Der Zeichenzatz beinhaltet alle benötigten Zeichen und stellt somit Sonderzeichen (ä, ü, ö, ß) problemlos dar. - Autor
-
Mit diesem Metatag können Sie den Namen des Autors der Seite angeben.
<meta name="author" content="Dein Name">
Syntax - Schlüsselwörter
-
Die Schlüsselwörter (Stichwörter) dienen dem Nutzer bei der Suche nach bestimmten Themen im Internet. Die Stichwörter werden bei der Suche durch Suchmaschinen bevorzugt behandelt. Geben Sie aussagekräftige Stichwörter an und achten Sie darauf, das die angegebenen Stichwörter öfters im Inhalt der entsprechenden Seite auftreten!
<meta name="keywords" content="Schlagwörter">
Syntax Mittlerweile wird dieses <meta> Tag von nahezu allen Suchmaschinen ignoriert. Konzentrieren Sie sich lieber auf eine aussagekräftige Beschreibung der Seite!
- Beschreibung
-
Die Beschreibung der Seite wird von den meisten Suchmaschinen, zusammen mit dem Suchergebnis angezeigt. So kann der Nutzer im Vorfeld erkennen ob das Ergebnis seinen Erwartungen entspricht und ob es sich lohnt die Seite zu besuchen.
<meta name="description" content="Kurze Beschreibung">
Syntax
Ausführliche Beschreibung: Übersicht der Elemente - <meta>
Der Titel
- Seitentitel
-
Mit diesem Element kann dem Dokument ein Titel zugewiesen werden.
<title>Startseite</title>Syntax
Ausführliche Beschreibung: Übersicht der Elemente - <title>
1.8.2 Ergänzungen im Bodybereich
Bei den Elementen im Bodybereich, handelt es sich um Elemente deren Inhalt auf der Seite dargestellt wird. Wir
betrachten zunächst eine Überschrift, welche durch das <h1> Element und einen Textabsatz,
welcher durch das <p> Element dargestellt wird.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="author" content="Dein Name"> <meta name="keywords" content="Schlagwörter"> <meta name="description" content="Kurze Beschreibung"> <title>Startseite</title> </head> <body> <h1>Die Startseite</h1> <p> Lassen Sie uns gemeinsam unsere erste Webseite in einem Browser betrachten! </p> </body> </html>
Öffnen Sie Ihren Editor und erstellen Sie über File >> New File eine neue Datei. Notieren Sie den
Quellcode aus Listing 1.8.2 und speichern Sie die Datei unter dem Namen index.html!
Schritt für Schritt Anleitung
1. Öffnen Sie Ihren Editor ...
Wenn Sie in Kapitel 1.2 Technische Grundlagen & Anforderungen bereits ein Arbeitsverzeichnis festgelegt haben, sollte dies nach dem Öffnen des Editors angezeigt werden. Ansonsten holen Sie diesen Schritt jetzt nach!
Sie sehen auf der linken Seite das Arbeitsverzeichnis, dies enthält noch keine Datein. Lediglich der Unterordner
./images wird angezeigt.
2. Erstellen Sie eine neue Datei und notieren Sie den Quellcode aus dem Listing 1.8.2 ...
Nachdem Sie die Datei mit der Endung .html abgespeichert haben, wird der Quellcode farbig
hervorgehoben. Bei weiteren Änderungen genießen Sie die Vorteile des Editors beim Bearbeiten der Datei. Es macht also Sinn,
die Datei direkt nach dem Anlegen mit der gewünschten Endung abzuspeichern und dann mit der Arbeit fortzufahren!
1.8.3 Ansicht im Browser
Sehen wir uns zunächst einmal die Auswirkungen der neuen Elemente an. Es folgt die Darstellung des Listings, nach der Interpretation durch einen Browser.
Öffnen Sie Ihren Browser. Laden Sie über Datei >> Datei öffnen... die erstellte Seite index.html!
Prima, wir haben soeben unsere erste Webseite erstellt...
Die genutzten HTML5 Elemente
- <h1>
-
Das
<h1>Element(heading)ist zur Darstellung einer Überschrift der ersten Ordnung gedacht. Das Element dient der Strukturierung von Texten und legt die Hierarchieverhältnisse in Ihrem Dokument fest.<h1>Die Startseite</h1>Syntax: Überschrift Ausführliche Beschreibung: Übersicht der Elemente - <h1> bis <h6>
- <p>
-
Das
<p>Element(paragraph)ist zur Darstellung von Textabsätzen gedacht.<p>Lassen Sie uns gemeinsam unsere erste Webseite in einem Browser betrachten!</p>Syntax: Textabsatz Ausführliche Beschreibung: Übersicht der Elemente - <p>
1.8.4 Zur Erinnerung: Dateinamen und Verzeichnisse
Sie sollten sich im Vorfeld Gedanken über die Verzeichnisstruktur machen. Je nach geplanten Projekt benötigen Sie mehrere Verzeichnisse. Verschachteln Sie Ihre Verzeichnisse nicht zu tief. Mehr als fünf Unterverzeichnisse sollten Sie nicht anlegen! Wählen Sie selbsterklärende Namen! Die Nutzer bekommen dadurch eine zusätzliche Orientierungshilfe in der URL-Anzeige des Browsers. Außerdem lieben die Robots der Suchmaschinen dieses Vorgehen. Gleiches zählt auch für die Vergabe von Dateinamen!
Speichern Sie Ihre Startseite unter dem Namen index.html ab. Wenn Sie Ihre Dokumente online stellen, wird
bei der Angabe der URL in einem Browser automatisch diese Datei geöffnet!
1.8.5 Analyse
Im Browser sehen Sie die Elemente aus dem Bodybereich, bzw. deren Inhalt. Die Darstellung der Elemente erfolgt untereinander. Die Elemente werden in der Reihenfolge, so wie sie im Quellcode notiert sind, zur Ansicht gebracht.
Sie sehen die Überschrift, diese ist am oberen linken Rand der Seite positioniert, gefolgt von dem Textabsatz, welcher unterhalb der Überschrift ebenso am linken Rand der Seite positioniert ist. Außerdem sehen Sie, dass die Elemente in unterschiedlichen Schriftgrößen dargestellt werden.
Beide Elemente besitzen bestimmte Eigenschaften, die ihnen sagen, wo sie positioniert sind und wie sie dargestellt werden. Diese Eigenschaften stammen aus der sog. Standard-CSS-Datei des Browsers. In unserem Beispiel sorgen die Eigenschaften aus der Standard-CSS-Datei für den Abstand der Elemente zum linken Seitenrand, für die vertikalen Abstände sowie für die Form und Farbe der Elemente. Soweit zu den offensichtlichen Eigenschaften.
Es gibt aber auch noch Eigenschaften die nicht auf den ersten Blick zu sehen sind. An eine dieser Eigenschaften sollten Sie sich schnell gewöhnen. HTML5 Elemente werden in sog. Boxen dargestellt. Bestimmte Boxen nehmen dabei die gesamte Breite des übergeordneten Bereichs ein und werden automatisch untereinander angeordnet. Zum visuellen Verständnis können die Entwicklertools der Browser genutz werden.
Die Entwicklertools
Die Entwicklertools bieten eine umfangreiche Sammlung von Tools zur Analyse von
Internetseiten. Gewöhnen Sie sich frühzeitig die Arbeit mit diesem Hilfsmittel an.
Beim Chromium Browser genügt ein Rechtsklick und die Auswahl von Untersuchen.
Mit Hilfe der Entwicklertools lassen sich die Elemente mit einer farbigen Kontur versehen. Die Abmessungen und Abstände der Boxen lassen sich auf diese Weise gut darstellen und analysieren. Markieren Sie dazu im oberen Fenster einfach das zu untersuchende Element.
Wenn zum Beispiel das <h1> Element markiert wird, wird die Box in dem sich der Inhalt befindet, vollständig und farblich
gekennzeichnet dargestellt. Zusätzlich erhalten Sie im unteren Bereich Informationen über die CSS Eigenschaften des Elements.
Block- vs. Inlineelemente
Eine grobe Einteilung der Elemente in verschiedene Kategorien bietet die Unterscheidung zwischen Block- und Inlineelementen. Beide Elemente werden in den bereits erwähnten Boxen dargestellt. Die Boxen besitzen allerdings verschiedene Grundeigenschaften.
Die Boxen der sog. Blockelemente nehmen die gesamte Breite des umgebenen Elements ein. Die Höhe passt sich automatisch dem Inhalt an. Die Eigenschaften der Blockelemente können mit CSS angepasst werden. Einem Blockelement folgt ein Zeilenumbruch.
Bei den Boxen der sog. Inlineelemente passt sich die Breite und die Höhe automatisch dem Inhalt an. Einem Inlineelement folgt kein Zeilenumbruch. Inlineelemente können also direkt in anderen Elementen genutzt werden ohne an deren Struktur etwas zu ändern. Die Elemente tauchen mitten im Textfluß auf und sind nur so breit wie ihr Inhalt! Die Eigenschaften der Inlineelemente können mit CSS angepasst werden.
Weitere Kategorien
Die Unterscheidung der Elemente in Block- und Inlineelemente bezieht sich auf die CSS Eigenschaft display: block;
beziehungsweise display: inline; und ist vor allem bei der Arbeit mit CSS eine Hilfe. Für die Arbeit mit HTML5
gibt es weitere Einteilungskategorien. Diese beziehen sich auf den semantischen Zweck und geben die erlaubten Inhalte vor!
Somit gehören alle Elemente einer oder mehreren der folgenden Kategorien an:
- Metadaten (
metadata) - Fluss-Elemente (
flow elements) - Überschriften (
headings) - Elemente zur Aufteilung (
sectioning elements) - Stil-Elemente (
phrasing elements) - Elemente zur Einbindung von Ressourcen (
embedded elements) - Interaktive Elemente (
interactive elements)
Je nach Zugehörigkeit einer Kategorie dürfen die Elemente nur bestimmte Elemente anderer Kategorien beinhalten. Mehr dazu erfahren Sie auf der Seite HTML5 - Übersicht der Elemente!
1.8.6 Validation
Auf der Internetseite https://validator.w3.org/ können Sie Ihren HTML5 Code validieren lassen. Der Validator überprüft den HTML5 Code auf eine
fehlerfrei Umsetzung der HTML5 Regeln.
