Die Struktur jeder Seite ist gleich aufgebaut. Sie wurde so gestaltet, dass verschiedene Designs auf der Basis von CSS erstellt werden können, ohne dass dazu der HTML-Quellcode geändert werden muss. Gleichzeitig ist die Reihenfolge der verschiedenen Elemente innerhalb der Seiten so aufgebaut sein, dass die Benutzer die Inhalte mit unterschiedlichen Browsern gleichermaßen abrufen können. Auch bei Browsern mit eingeschränkter optischer Darstellung (Small Screen Devices, Screenreader, Handys und andere) ist eine gleichwertige Darstellung möglich.

Struktureller Aufbau und Reihenfolge der HTML-Anweisungen

Eine HTML-Datei besteht aus folgenden Bereichen:

Metaangaben

Die Metaangaben befinden sich im <head>-Teil einer Webseite. Diese Metaangaben dienen dazu, technische Informationen über die Seite zu liefern. Hierzu gehören der Titel der Seite, aber auch optionale Schlüsselworte, eine Kurzbeschreibung und Informationen zur Einbindung von CSS und JavaScript.

Innerhalb des Vorlagenkatalogs wird lediglich der Titel der Seite zwischen den HTML-Tags vorgeschrieben. Beispiel:

<title>FAU-Vorlagenkatalog: Struktur</title>

Danach folgt die Einbindung der Datei /ssi/head.shtml mit Hilfe einer SSI-Anweisung: 

<!--#include virtual="/ssi/kopf.shtml" -->

In dieser Datei sind solche Angaben definiert, die bei jeder Seite gleich bleiben. Dazu zählen Angaben zur Sprache der Seite, Angaben zu verwendeten Stylesheets, JavaScripten und eine Reihe von Linkmarken.

Zusatzangaben über die Schlüsselworte oder die Kurzbeschreibung sind optional und müssten manuell hinzugefügt werden. Dazu kann folgender HTML-Code verwendet werden:

Optionale Metaangabe für die Inhaltsbeschreibung

<meta name="Description" content="Hier findet sich eine kurze Inhaltsbeschreibung auf einer Zeile mit nicht mehr als 256 Zeichen" />

Optionale Metaangabe für die Schlüsslworte

<meta name="Keywords" content="schluesselworte, durch, komma, getrennt" />

Nach oben

Inhaltsstruktur im <body>-Bereich

Die wesentlichen Inhaltsbereiche unterhalb der Metaangaben einer Seite werden im HTML innerhalb des Erstreckungsbereiches des <body>-Tags definiert.
Die Struktur und Abfolge der darin enthaltenen Bereiche ist fest vorgegeben. Die Schemagrafik zeigt diese Struktur deutlicher:

HTML-Struktur von Webseiten gemäß des Web-Baukastens ab 10/2010

Bild in Originalgröße aufrufen: Originalbild in 1200px

Die einzelnen Teile der Struktur werden in den folgenden Kapiteln beschrieben.

Kopfteil

Der Kopfteil einer Seite erfüllt ähnliche Funktionen wie die Metaangaben: Es werden auch hier Informationen über das Dokument angegeben. Im Gegensatz zu den Metaangaben werden diese Informationen jedoch dem Benutzer in einer grafischen oder textlichen Repräsentation gezeigt.

Folgende Informationen sind im Kopfteil enthalten:

  • Das Logo oder die Bezeichnung des Webauftritts,
  • der Titel der aktuellen Seite innerhalb einer <h1>-Überschrift und
  • Informationen, die auf jeder Seite gleich bleiben und aus der Datei /ssi/kopf.shtml über eine SSI-Anweisung eingebunden werden.

Im HTML-Quellcode sieht dies wie folgt aus: 

		<div id="kopf">   
		  	<div id="logo">
				<p><a href="/">Projekt Vorlagenkatalog</a></p>     
			</div>
			<div id="titel">	 	
        		<h1>Struktur</h1> 
			</div>       
		 	<!--#include virtual="/ssi/kopf.shtml" -->             
		</div>
      	<hr id="nachkopf" />

Mit der Datei /ssi/kopf.shtml werden auch Sprungmarken zur Navigation innerhalb der aktuellen Seite, die Breadcrumb-Leiste und eine übergeordnete Navigation eingebaut.

Nach oben

Menübereich (Bereichsmenü)

Der Menübereich besteht aus zwei Teilen: dem eigentlichen Menü und einer Datei für kurze Zusatzinformationen, die nach dem Menü eingebaut wird: 

      <div id="menu">	  
        <div id="bereichsmenu">
         	<h2><a name="bereichsmenumarke" id="bereichsmenumarke">Bereichsmenu</a></h2>      
		  <!--#include virtual="/cgi-bin/navigation/navigation.pl" -->		  
        </div>
        <!--#include virtual="/ssi/kurzinfo.shtml" -->		
      </div

Das Menü wird durch die interaktive Anwendung Hauptnavigation erstellt. In der Datei /ssi/kurzinfo.shtml können zusätzliche Kurzinformationen eingebaut werden. In der Standardvorlage findet sich dort auch eine Einbindung des Logos der Universität.

Nach oben

Inhaltsbereich

Der eigentliche Inhalt einer Seite wird im Inhaltsbereich geschrieben. Bei einer leeren Inhaltsseite kann der dazugehörige HTML-Quellcode wie folgt ausssehen: 

      <div id="content">       
       <a name="contentmarke" id="contentmarke"></a>
		<!-- Inhaltsinfo*************************************************************** -->
		<!-- ************************************************************************** -->       		
		<!--#include virtual="/ssi/inhaltsinfo.shtml" -->		

		<p>
		
		Hier könnte ein Text stehen.
		
		</p>
		
      <hr id="vorfooter" />
      </div><!-- /content -->

Um es den Betreibern zu ermöglichen, gleichbleibende Informationen oder Hinweise auf allen Webseiten zu publizieren, beginnt der Inhaltsbereich mit der Einbindung der Datei /ssi/inhaltsinfo.shtml. In der Regel ist die Datei jedoch leer.

Nach oben

Fußteil

Aufgabe des Fußteils einer Webseite ist die Angabe von Zusatzinformationen über den Inhalt der aktuellen Seite, über die Einbindung des technischen Menüs und der optionalen Einbindungen von zusätzlichen Informationen: 

      <div id="footer">
         <h2><a name="footermarke" id="footermarke">Informationen zur Seite</a></h2>
         <p class="last_modified">Letzte Änderung: <!--#config timefmt="%d.%m.%Y um %H:%M Uhr"--><!--#echo var="LAST_MODIFIED"--></p>			
		 <div id="footerinfos">
			<!--#include virtual="/ssi/footerinfos.shtml" -->
			<!--#include virtual="/ssi/zusatzinfo.shtml" -->		
		 </div> <!-- /footerinfos -->	
      </div>   <!-- / footer -->

In der Regel sollten Autoren nur den Absatz unter der ersten <h2>-Überschrift ändern. Es empfiehlt sich jedoch, diese Angaben automatisiert durch ein geeignetes Redaktions- oder Content-Managementsystem vornehmen zu lassen.

Danach folgt die Einbindung des technischen Menüs mit Hilfe der Include-Anweisung <!--#include virtual="/ssi/footerinfos.shtml" -->. Dieses kann entweder dynamisch über die Anwendung Inhaltsübersicht oder statisch in HTML-Form erstellt werden. In der ausgelieferten Vorlage finden sich in dem Verzeichnis /websource/ssi/ zwei Dateien footerinfos.shtml und footerinfos-dynamic-tecmenu.shtml, die entsprechende Inhalte aufweisen. Wenn das dynamische Menu verwendet werden soll, ist der Inhalt der Datei footerinfos-dynamic-tecmenu.shtml in die Datei footerinfos.shtml zu kopieren.

Der Abschluss bildet die Einbindung der Datei /ssi/zusatzinfo.shtml. In dieser Datei können optionale zusätzliche Informationen oder die Ausgaben weiterer Anwendungen (zum Beispiel der Styleswitcher) eingebunden werden.

Nach oben