2 Moderne Seitenstruktur

Eine Webseite besteht in der Regel aus verschiedenen Bereichen, wie zum Beispiel Kopfbereich, Hauptinhalt, Fußbereich und Navigationsleiste. Mit HTML5 wurden neue Elemente eingeführt, mit deren Hilfe diese Bereiche gekennzeichnet werden können.

Element Beschreibung
<header> Fasst alle Elemente des Kopfbereichs der Webseite oder eines Abschnitts zusammen. Er kann zum Beispiel ein Logo, den Titel der Webseite oder das Navigationsmenü enthalten.
<main> Beinhaltet den Hauptinhalt der Webseite. Es darf daher pro Webseite auch nur einmal verwendet werden.
<footer> Fasst alle Elemente des Fußbereichs der Webseite oder eines Ab-schnitts zusammen. Er kann zum Beispiel Copyright-Hinweise oder Links zum Impressum bzw. zu den Kontaktdaten enthalten.
<nav> Enthält das Navigationsmenü der Webseite.
<article> Gruppiert einen eigenständigen Inhalt, der unabhängig von den übrigen Inhalten der Webseite ist und auch in einem anderen Dokument wiederverwendet werden könnte. Dies unterscheidet ihn von einem section-Element. Ein article-Element besitzt in der Regel eine Überschrift und kann eigene strukturierende Elemente wie header, footer oder section enthalten.
<section> Dient dazu Elemente, deren Inhalt zusammen einen thematischen Abschnitt bilden, als zusammengehörend zu kennzeichnen. Typischerweise besitzt jedes section-Element eine eigene Überschrift. section-Elemente können auch verschachtelt sein, um Unterabschnitte zu kennzeichnen. In einem article-Element können einzelne Abschnitte, die thematisch zusammmengehören und über eine eigene Überschrift verfügen, jeweils in ein section-Element zusammengefasst werden. Umgekehrt kann ein section-Element auch verschiedene article-Elemente enthalten. Ein Beispiel hierfür wäre ein Internetblog, der aus verschiedenen Artikeln besteht.
<div> Wird verwendet, wenn der Bereich keinem sematischen Element zugeordnet werden kann. Dies ist zum Beispiel der Fall, falls der Bereich ausschließlich aus Formatierungsgründen angelegt wird.
Abb. 2-1: Elemente zur Seitenstrukturierung
HTML
<!DOCTYPE html>

<html lang="de">

   <head>
      <meta charset="UTF-8">
      <title>Startseite der Kaufmännischen Schule Tauberbischofsheim</title>
   </head>

   <body>
      <header>
         <img src="img/logo.png">
         <h1>Kaufmännische Schule Tauberbischofsheim</h1>
         <nav>
            <ul>
               <li>
                  <a href="index.html">Startseite</a>
               </li>
               <li>
                  <a href="bildungswege.html">Bildungswege</a>
               </li>
               <li>
                  <a href="termine.html">Termine</a>
               </li>
               <li>
                  <a href="formulare.html">Formulare</a>
               </li>
            </ul>
         </nav>
      </header>

      <main>
         <h2>Herzlich Willkommen</h2>
         <img src="img/eingang.jpg">
         <p>
            Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.
         </p>
      </main>

      <footer>
         <a href="impressum.html">Impressum<a>
      </footer>
   </body>

</html>
Abb. 2-2: Zwischenstand Startseite index.html Webprojekt KSTBB
Aufgabe

Aufgabe 2-1: Impressum

Aufgabe

Erstellen Sie gemäß der Vorlage Impressum ein neues HTML-Dokument namens impressum.html. Übernehmen Sie den Kopf- und Fußbereich aus der Startseite index.html.

Lösung
Lösung
HTML
<!DOCTYPE html>

<html lang='de'>

    <head>
        <meta charset='UTF-8'>
        <title>Impressum</title>
    </head>

    <body>
        <header>
            <img src='img/logo.png'>
            <h1>Kaufmännische Schule Tauberbischofsheim</h1>
            <ul>
                <li>
                    <a href='index.html'>Startseite</a>
                </li>
                <li>
                    <a href='bildungswege.html'>Bildungswege</a>
                </li>
                <li>
                    <a href='termine.html'>Termine</a>
                </li>
                <li>
                    <a href='formulare.html'>Formulare</a>
                </li>
            </ul>
        </header>
        
        <main>
            <h2>Impressum</h2>
            <section>
                <h3>Kaufmännische Schule Tauberbischofsheim</h3>
                <section>
                    <h4>Schulleitung</h4>
                    <p>Max Mustermann</p>
                    <p>Dr.-Ulrich-Straße 1</p>
                    <p>97941 Tauberbischofsheim</p>
                    <p>Telefon: +49 (0)9341 60060</p>
                    <p>E-Mail: info@muster.de</p>
                </section>
                <section>
                    <h4>Inhaltlich verantwortlich gemäß § 55 Abs. 2 RStV:</h4>
                    <ul>
                        <li>
                            Max Mustermann, Dr.-Ulrich-Straße 1, 97941 Tauberbischofsheim
                        </li>
                        <li>
                            Rubrik Termine: Eva Muster, Dr.-Ulrich-Straße 1, 97941 Tauberbischofsheim
                        </li>
                    </ul>
                </section>
            </section>
            <p>Das Impressum gilt für: https://www.muster.de</p>
        </main>
        
        <footer>
            <a href='impressum.html'>Impressum<a>
        </footer>
    </body>

</html>
Abb. 2-3: Quellcode impressum.html
Aufgabe

Aufgabe 2-2: Bildungswege

Aufgabe

Erstellen Sie gemäß der Vorlage Bildungswege ein neues HTML-Dokument namens bildungswege.html. Übernehmen Sie den Kopf- und Fußbereich aus der Startseite index.html.

Lösung
Lösung
HTML
<!DOCTYPE html>

<html lang='de'>
    <head>
        <meta charset='UTF-8'>
        <title>Bildungswege</title>
    </head>
    
    <body>
        <header>
            <img src='img/logo.png'>
            <h1>Kaufmännische Schule Tauberbischofsheim</h1>
            <ul>
                <li>
                    <a href='index.html'>Startseite</a>
                </li>
                <li>
                    <a href='bildungswege.html'>Bildungswege</a>
                </li>
                <li>
                    <a href='termine.html'>Termine</a>
                </li>
                <li>
                    <a href='formulare.html'>Formulare</a>
                </li>
            </ul>
        </header>
        
        <main>
            <article>
                <h2>Bildungswege</h2>
                <img src='img/bildungswege.gif' alt='BildungswegeanderKaufmännischenSchuleTauberbischofsheim'>
                <section>
                    <h3>Kaufmännische Berufsschule</h3>
                    <p>
                        In der Kaufmännischen Berufsschule bilden wir im dualen Verbund mit den Ausbildungsbetrieben Bank-, Industrie-, Großhandels-, Büro-, Bürokommunikations- und Werbekaufleute sowie Verwaltungsfachangestellte (ÖV) aus.
                    </p>
                </section>
                <section>
                    <h3>Berufsfachschule Wirtschaft</h3>
                    <p>
                        Die zweijährige Berufsfachschule Wirtschaft (Wirtschaftsschule) führt zur Fachschulreife, d. h. zur Mittleren Reife.
                    </p>
                </section>
                <section>
                    <h3>Kaufmännisches Berufskolleg I</h3>
                    <p>
                        Das einjährige Kaufmännische Berufskolleg I bereitet Schüler und Schülerinnen mit Mittlerer Reife für das BKII vor. Es bietet Schülern mit kaufmännischem Berufsziel verbesserte Bewerbungsvoraussetzungen, weil ihnen intensive Fachkenntnisse und Grundfertigkeiten zur die späteren beruflichen Verwendung vermittelt werden.
                    </p>
                </section>
                <section>
                    <h3>Kaufmännisches Berufskolleg II</h3>
                    <p>
                        Das einjährige Kaufmännische Berufskolleg II ermöglicht den Schülern und Schülerinnen mit der Fachhochschulreife das Studium an Fachhochschulen und schafft mit der Prüfung zum "Staatlich geprüften Wirtschaftsassistenten" gute Voraussetzungen für Bewerbungen, insbesondere im kaufmännischen Bereich.
                    </p>
                </section>
                <section>
                    <h3>Wirtschaftsgymnasium</h3>
                    <p>
                        Im Wirtschaftsgymnasium können Schüler und Schülerinnen nach 3 Jahren Vollzeitunterricht die Allgemeine Hochschulreife erwerben und damit an allen Hochschulen im In- und Ausland in allen Fachbereichen studieren. Dieses Abitur bietet ebenso eine hervorragende Grundlage für Bewerbungen, besonders für die Ausbildungen in kaufmännischen Berufsfeldern.
                    </p>
                </section>
            </article>
        </main>
        
        <footer>
            <a href='impressum.html'>Impressum</a>
        </footer>
    </body>
</html>
Abb. 2-3: Quellcode bildungswege.html