Diesmal soll es um folgende Punkte gehen:
Es ist egal wie man es zusammenfassen will, man kann dieses Thema in der Kürze wirklich nur ankratzen. Ich gebe hiermit wirklich nur einen kleinen Leitfaden, wie man zu einer guten Webseite kommen kann.
HTML-Header:
Nach der Auswahl des Document-Type können wir nun den eigentlichen HTML-Code erzheugen. Wenn unser Dokument entsprechend der XHTML-Spezifikationen interpretiert werden muss, so muss ein XML-Namensraum eingefügt werden. Dies erfolgt gewöhnlich im anfänglichen HTML-Tag:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Anschließend kann der rest des Headers geschrieben werden, beginnend mit dem Tag: <head>
Der Header besteht aus Meta-Angaben, welche Hinweise für Webserver, Browser und vor allem Suchmaschinen enthalten können. Ebenso enthält der Kopf den Titel der Seite, welcher meist im Fensterkopf des Browser angezeigt wird und Informationen über CSS und Javascript.
Ein typischer Aufbau sieht dann wie folgt aus:
<head> <title>DIY-Academy: Garten</title> <meta name="description" content="beschreibung and description" /> <meta name="keywords" content="key,word,schluessel,wort" /> <meta name="language" content="german" /> <meta name="revisit-after" content="1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-language" content="de" /> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="javascript.js" /> </head>
Meta-Daten:
Titel:
Sollte immer angegeben werden. Für Suchmaschinen ist es hier sinnvoll jede Seite einen eigenen Titel zu geben.
Description:
Entspricht der Seitenbeschreibung und wird auch von Suchmaschinen übernommen.
Keywords:
Die Schlüsselworte in Kombination mit deren auftauchen im Inhalt bestimmt bei Suchmaschinen die Qualität eines Schlüsselworts. Hiermit kann man viel einfluss auf Suchergebnisse nehmen.
revisit-after:
Hiermit kann man einem Robot (Suchmaschine) evtl. den Befehl erteilen nach der angegebenen Häufigkeit die Seite erneut zu besuchen. (Hier Angabe in Tagen)
Content-Type:
Es sollte von vorhinein klar sein, welcher Zeichenvorrat verwendet werden soll. Für flexible mehrsprachige Seiten, sollte UTF-8 (Unicode) eingesetzt werden. Hierbei ist zu beachten, dass deutsche Umlaute nur in Form von Unicode bzw. HTML eigene Zeichen erstellt werden müssen.
Die Angaben für Stylesheets und Javascript ist auf eine externe Datei verwiesen worden. Dies hat vor allem bei der Übersicht vorteile, da man das CSS nicht auch noch mitten im HTML-Code verwalten muss.
Grundgerüst:
Obwohl der HTML-Header auch ein Teil des gesamten Grundgerüst darstellt, so unterscheide ich doch diesen Teil, da ich das erstellen eines Seiten-Layouts für das Grundgerüst halte.
Hierbei empfinde ich es als wichtig das wir den HTML-Standards entsprechend ein Layout aufbauen und einen übersichtlichen Code erzeugen.
Zunächst sollte man wissen, welche Form von Seitenlayout man haben möchte. Ich gehe hier auf das gängiste Layout ein, das aus einen Kopf-Bereich, dem Inhalts-Bereich mit einem Menü links und einem Fuss-Bereich besteht.
<div id="wrapper"> <div id="page"> <div id="header"></div> <div id="content"> <div id="left"><div> <div id="right"></div> </div> <div id="footer"></div> </div> </div>
Tabellen wurden vor 5 Jahren verwendet und sind mitlerweile wirklich nicht mehr für Layout-Zwecke zu verwenden, insbesonders im Hinblick auf barrierefreie Webdesigns.
In dem Beispiel ist gut zu sehen, dass ich die eindeutigen Elemente mit einer ebenso eindeutigen ID kennzeichne. Das macht besonders die Zuordnung der CSS-Formatierung einfach und hilft auch schnell die Übersicht im Code zu wahren. Nur wiederkehrende Formatierungen sollte man mit class eine CSS-Formatierung zuordnen.
Über die Bezeichnungen kann man streiten, aber es hilft wenn diese eine gewisse Aussagekraft darüber besitzen, welche Position im Layout gemeint ist.
Da man nun die wichtigsten DIV-Layer eingebaut hat, kann man nur mit CSS-Formatierungen eine unzählige Vielfalt von Designs verwirklichen, noch ohne eine Zeile Inhalt zu besitzen.
Weitere Infos zum HTML-Aufbau findet ihr noch hier:
http://de.selfhtml.org/html/index.htm
Im nächsten Teilen gibt es Infos zu folgenden Elementen:
CSS-Layout, Farbwahl, Barrierefreiheit, Tips und Checkliste
Einen Kommentar schreiben