In diesem zweiten Teil des Webdesign Workshops 2023 geht es an den Inhaltsbereich der Webseite. Der body-Bereich wird also mit weiteren Elementen gefüllt…
Der body-Bereich:
Der nächste Bereich ist nun der Hauptbereich der Webseite – der body-Bereich.
- <body>
Innerhalb dieses body-Bereichs werden nun entweder „div id-Bereiche“ eingefügt oder gleich die neuen semantischen HTML 5 Elemente benutzt.
- <div id=“wrapper“> <!– Anfang vom wrapper-Bereich –>
Der Wrapper-Bereich dient hier als Rahmen um alle weiteren Boxen die nachfolgend angelegt werden, um die Webseite in Bereiche einzuteilen. Natürlich wird dieses Element später wieder geschlossen.
- <header> <!–Anfang vom kopfbereich-Bereich –>
- </header> <!– Ende vom kopfbereich-Bereich –>
Der „header“ ist bereits ein neues semantisches HTML 5 Element und bildet den Kopfbereich. Nicht verwechseln mit dem Seitenkopf „head“! Nachdem header kommt der Navigationsbereich. HTML 5 bietet hierfür das Element „nav“:
- <nav> <!– Anfang vom navibereich –>
- <ul>
- <li><a href=“index.html“>Gesamtübersicht</a></li>
- <li><a href=“start.html“>Startseite</a></li>
- </ul>
- </nav> <!– Ende vom navibereich –>
Innerhalb des nav-Elements dient eine ungeordnete Liste als eigentliche Navigation für die Webseite. Das Konzept der öffnenden und schließenden Elemente (Tags genannt) ist hier gut zu erkennen Der Hauptbereich heißt in HTML 5 jetzt „main“…:
- <main> <!– Anfang vom main-Bereich –>
- </main> <!– Ende vom main-Bereich –>
Innerhalb dieses Hauptbereiches werden jetzt die Artikel eingebaut. HTML 5 bietet auch für Artikel ein semantisches Element.
- <article>
- <h1>Artikelüberschrift</h1>
- <p>
- Text des Artikels…
- </p>
- </article>
- <br />
Das article-Element wird also geöffnet. Es folgt eine Überschrift. Hier übrigens eine Überschrift ersten Grades (h1). Der Artikeltext steht dann in einem p-Element – einem Absatz. Nach dem letzten Absatz wird der Artikel geschlossen. Das break-Element sorgt nur für etwas Abstand zum nachfolgenden Artikel.
In späteren Artikeln zum Webdesign Workshop werde ich noch auf die Details eingehen die ich hier noch weggelassen habe…
Folgende Elemente werden auch noch erstellt…
- <footer> <!– Anfang vom footer-Element –>
- </footer> <!– Ende vom footer-Element –>
- </div> <!– Ende vom wrapper-Bereich –>
Für spätere Layouts ist auch schon ein Fußbereich als Platzhalter reserviert und dann wird auch der Wrapper geschlossen.
Abschließend wird noch das body-Element und das html-Element geschlossen. Das HTML 5 Grundgerüst ist damit schon fertig. Natürlich gibt es noch viele weitere HTML Elemente, doch die betrachten wir erst später, wenn es soweit ist. Der HTML 5 Quelltext kann einfach in einen Texteditor eingegeben werden und als html-Datei gespeichert werden. Dazu wird die Datei einfach mit der Endung html gespeichert.