Tag: html

XHTML (Extensible Hypertext Markup Language)

Die Extensible Hypertext Markup Language (Abkürzung: XHTML) löst als Standard des W3C HTML als Textauszeichnungssprache für Webseiten im World Wide Web ab. Im Gegensatz zu seinem Vorläufer HTML, welcher mittels SGML definiert wurde, verwendet XHTML die stren-gere und einfacher zu parsende SGML-Teilmenge XML als Sprachgrundlage. XHTML-Dokumente entsprechen also den Syntaxregeln von XML.

Meta-Tags

Meta-Tags sind HTML-Elemente auf einer Webseite, welche Metadaten über die betreffende Webseite enthalten. Es existieren verschiedene Metdaten-Schemata, teils von Institutionen oder Gremien erarbeitet (z. B. Dublin Core), teils aber auch wild gewachsene Arten wie Einträge der Erzeuger-Software (z. B. Hersteller und Version).
Die wenigsten dieser Metainformationen werden von User-Agents (z. B. Browsern oder Such-robotern) interpretiert, sodass sie dem Leser einer Webseite für gewöhnlich verborgen bleiben. Die Beachtung durch den User-Agent ist, wie bei allen HTML-Elementen, von den Fähig-keiten und der Konfiguration desselben anhängig. Meta-Tags sollen vor allem die Durchsuchbarkeit des World Wide Webs bzw. einer einzelnen Webpräsenz verbessern. Beispiels-weise Suchroboter der Suchmaschinen können Meta-Tags auswerten. Außerdem lassen sich mithilfe von Meta-Tags spezielle Anweisungen zur Steuerung der Suchroboter notieren. Einst galten Meta-Tags als Geheimwaffe, um bei einer Suchmaschine möglichst weit oben gelistet zu werden (siehe Ranking). Meta-Tags wurden daher lange missbraucht, um irreführende Metainformationen anzugeben. Mittlerweile legen die Suchmaschinen wieder mehr Wert auf den eigentlichen Textinhalt einer Webseite, den auch der Leser im Browser wahrnimmt. Die Meta-Tags stehen im Kopf-Bereich eines HTML-Dokuments, also im head-Element.

Doctype

Zu einem vollständigen HTML-Dokument gehört eine so genannte Dokumenttyp-Deklaration, englisch Document Type Declaration bzw. Doctype Declaration. Darin wird auf eine Docu-ment Type Definition (DTD) verwiesen. Sie gibt an, nach welcher (X)HTML-Version das Do-kument erstellt wurde, und legt somit fest, welche HTML-Elemente und Attribute in dem Dokument vorkommen dürfen. Ohne diese Angabe ist ein HTML-Dokument unvollständig und daher nicht „valide“.

XHTML-Designvorlage der TYPO3 Präsenz


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
<title>nordEnergie AG</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css/ne_01.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div><a name="nach_oben"></a></div>
<div class="border_top"></div>

<div class="border_middle"> <!-- ANFANG border_middle -->


<!-- ANFANG Head -->
<div id="head">

<div id="head-logo"><img src="img/logo_ne.gif" alt="Logo nordEnergie" /></div>
<div id="head-slogan">Energie und Meer</div>
<div id="metanavi"> </div>

</div>
<!-- ENDE Head -->

<!-- ANFANG main -->
<div id="main">

<div id="main_top">
<div class="lightblue_top_container"> </div>
<div class="lightblue_top_border">Wir machen Bremerhaven zur
Solarstadt des Nordens. Machen sie mit, profitieren sie mit!
</div>
</div>

<!-- ANFANG container_navigation -->
<div id="container_navigation">
<div id="mainnavi"> </div>
</div>
<!-- ENDE container_navigation -->

<!-- ANFANG container_content -->
<div id="container_content">

<div id="headerimage"> </div>

<div id="main_content">
<div id="locator"> </div>
<div id="hr"> </div>
<div id="content"> </div>
</div>
</div>
<!-- ENDE container_content -->

<div id="main_bottom">
<div class="lightblue_bottom_container"> </div>
<div class="lightblue_bottom_border"> </div>
</div>


</div>
<!-- ENDE main -->

<div class="footer"> </div>

</div>
<!-- ENDE border_middle -->

<div class="border_bottom"></div>

</body>
</html>

Erstellen der Designvorlage

Als Designvorlage kann eine normale HTML- bzw. XHTML-Seite dienen. TYPO3 verwendet dann diese ohne spezielle Präparationen versehene Vorlage, um nach ihrer Gestaltung die kompletten Seiten für das Frontend dynamisch zu generieren. Das manuelle Erstellen von Webseiten wird dadurch überflüssig und komplett durch das System abgewickelt. Dabei werden zuvor definierte Bereiche in der Vorlage mit Inhalten aus den Zellen der zu Grunde liegenden Datenbank passend ersetzt.

Als Format für die Vorlagendatei wird XHTML gewählt. Außerdem soll der Aufbau des Layouts komplett tabellenlos durch Einsatz von entsprechenden CSS-Definitionen angelegt werden.

Der exakte Doctype der Seiten wird „XHTML 1.0 Strict“ lauten, wobei es sich um eine offi-zielle Empfehlung des W3-Konsortiums handelt, die nach und nach den letzten veröffentlichten HTML 4.01-Standard ersetzen wird. XHTML ist XML-kompatibel und wurde im Januar 2000 definiert. Der Hintergedanke bei XHTML ist, dass durch Standardisierung eine medienneutrale Beschreibung von Dokumenten ermöglicht wird. So könnten XML-basierende Formate bspw. für das Web, für den Printbereich oder für mobile Endgeräte verwendet werden. Der Inhalt ist im Idealfall unabhängig vom Ausgabemedium.

Außerdem sind in XHTML definierte Internetseiten schlanker, werden schneller geladen, strukturell flexibler änderbar und bedeuten einen großen Schritt in Richtung barrierefreies Internet. Zusätzlich unterstützt werden diese Vorteile durch den Einsatz von Cascading Style Sheets und den Verzicht auf HTML-Tabellen als Mittel zur Definition des Layouts. Tabellen sind in ihrem Ursprung nicht für die Nutzung als Gestaltungsraster ausgelegt gewesen, um Internetseiten eine Struktur zu verleihen, sondern sollen als Hilfsmittel zur geordneten Darstellung von Textinformation eingesetzt werden. Die Verwendung als Gestaltungsmittel vermischt das Layout mit den Inhalten und vergrößert die Dateigröße der Seiten unnötig. Bei jedem Seitenaufruf müssen die Layoutinformationen neu geladen werden. Dies strapaziert die Bandbreite und erhöht die Ladezeiten. Ein Style Sheet mit den Angaben zum Aufbau wird lediglich einmal in den Browsercache zwischengespeichert und dann von dort aus geladen. Das reduziert das Datenvolumen merklich und führt langfristig betrachtet zu geringeren Kosten für das Webhosting. Das Einhalten moderner Webstandards bringt also, wie aus dieser Kurzbetrachtung hervorgeht, eine Vielzahl an Vorteilen mit sich.

Da das Stichwort Barrierefreiheit gefallen ist, soll in wenigen Worten der Hintergrund geklärt werden. Mit Barrierefreiheit wird der ungehinderte Zugang zu Informationen im World Wide Web besonders für körperlich eingeschränkte Internetuser bezeichnet. Im Bundesbehindertengleichstellungsgesetz (BGG) ist der exakte Begriff definiert, wobei hier der Paragraf 11 „Barrierefreie Informationstechnik“ besonders interessant ist. Die genauen Richtlinien sind in Deutschland in der „Barrierefreie Informationstechnik-Verordnung (BITV)“ festgelegt. Öffentliche Einrichtungen müssen bis spätestens Ende 2005 durch die „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem BBG“ ihr Informationsangebot problemlos barrierefrei nutzbar machen. Durch die für die nordEnergie-Präsenz getroffenen technologischen Entscheidungen ist der Auftritt aus rein technischer Sicht für die Barrierefreiheit bereits optimal vorbereitet und entspricht modernsten Standards.

Der komplette Quellcode der für TYPO3 umgesetzten XHTML-Designvorlage samt Style Sheet kann im Anhang eingesehen werden. Das entwickelte Design- und Layoutkonzept wird übereinstimmend durch diese beiden Elemente abgebildet. Die Meta-Tags zur Suchmaschinen-Optimierung sind zu diesem Zeitpunkt uninteressant und werden nach späterer Definition eigenständig durch das CMS hinzugefügt.