Webaholic - Blog

Der zweite Teil der “Wie ich eine Webseite erstelle” Serie soll den grundsätzlichen Aufbau einer modernen Webseite (also genau einer Seite/Page - nicht eines ganzen Webauftrittes) darstellen. Dabei geht es mir nicht um das Design - Web 2.0 Styleguides gibt es wie Sand am Meer, teils gut, teils schlecht, da häng ich mich jetzt nicht mit rein - sondern um den Quellcode.

Teilung Inhalt/Darstellung

Zum ersten möchte ich auf die Teilung von Inhalt und Aussehen der Seite kommen, denn der ist Elementar geworden.

HTML bietet eine Reihe an Möglichkeiten um das Aussehen einer Webseite zu beeinflussen. Dazu gehören unter anderem das Font-Tag und Attribute wie background und Tags wie b für bold und i für italic. Aber auch Tabellen als Layout-Mittel zähle ich dazu. Diese Tags lernt man ganz schnell - besser man lässt es aber gleich bleiben. Webseiten die aus Tabellen bestehen (die garkeine Tabellarischen Daten enthalten) sind aus mehreren Gründen veraltet.

Der für die meisten verständlichste Punkt dürfte sein, dass es einfach toll ist, wenn man die Navigation auf 1000 Unterseiten mit einer Änderung an gerade mal einer Datei von Oben nach Links oder umgekehrt verschieben kann.

Wie geht das? Nun das Aussehen einer modernen Webseite wird nicht mehr durch HTML bestimmt. In HTML gibt man an, welche Bedeutung ein Inhalt einer Webseite hat. Diese Bedeutung ist z.B. “Ãœberschrift n-ter Ordnung” (h1 bis h6), “Stark betont” (strong), “betont” (em für emphasis). Welche Form eine derartige Bedeutung nachher auf der Webseite annimmt, wird von 2 Faktoren gesteuert:

1. Im Webbrowser sind Standard-Darstellungsformen festgelegt - so wird strong per Standard Fett dargestellt. Im Gegensatz zu b (bold) bedeutet es aber nicht fett.
2. Per CSS Datei können den semantischen Bedeutungen konkrete Darstellungsformen verliehen werden. So kann unter anderem angegeben werden, welche Dicke die Schrift haben soll, welche “Dekoration”, ob und welche Ränder, welche Farbe und welchen Hintergrund.

HTML selbst sollte heute also nur noch semantische Bedeutung sein, während das Aussehen per Cascading Style Sheet (CSS) gesteuert wird.

Gegeben sei folgender Code-Schnipsel:

<div class="navigation"><ul> 

<li><a href="#" mce_href="#">Nav1</a></li> 

<li><a href="#" mce_href="#">Nav2</a></li> 

<li><a href="#" mce_href="#">Nav3</a></li> 

<li><a href="#" mce_href="#">Nav4</a></li> 

<li><a href="#" mce_href="#">Nav5</a></li> 

</ul> 

</div> 

<div class="content"> 

<h3>Ãœberschrift</h3> 

<p>Absatz 1</p> 

</div>

Der würde normalerweise zu folgender Ausgabe führen:

Mit CSS kann die Ausgabe aber auch so aussehen:

Die Macht die CSS besitzt wird auf CSS-ZenGarden noch viel deutlicher zur Schau gestellt - hier lohnt sich ein Besuch auf jeden Fall.

Ich möchte hier aber niemandem HTML und CSS beibringen - das lernt man am bestern per “Learning by Doing” und indem man Quellcodes liest; wer gerne genaueres wissen möchte sollte sich auch SelfHTML mal anschauen.

Wichtig ist, dass man sich Gedanken über die Strucktur einer Seite macht - diese beginnt bei der Untergliederung in Head und Body und endet in fein verzweigten Ästen des Document Object Models (DOM). Head und Body?

Head ist der Bereich in der Webseite, in der unter anderem Style-Anweisungen/Dateien eingebunden werden und der Titel der Webseite festgelegt wird. Hier können aber auch Javascripts und vieles anderes untergebracht werden, was für die ganze Seite gelten soll.

Body ist der Bereich der Webseite, in der der Inhalt und die semantische Bedeutung des selbigen bestimmt wird. Nur dieser Teil wird im Browserfenster angezeigt (der Titel wird als einzige Metainformation auch noch angezeigt).

Validität

Eine Webseite ist dann valide, wenn sie sich an die Standards des W3Cs (Word Wide Web Consortium) hält. Nun ist das nicht immer einfach und auch nicht immer (aber meistens) sinnvoll. Dazu muss gesagt sein, dass die wenigsten Browser es schaffen, auch nur die meisten Standards zu erfüllen. Dies gilt auch für Browser wie Firefox und Opera, insbesondere aber für den Internet Explorer.

Man kann also trotz standardisiertem Code nicht sicherstellen, dass die Webseite in jedem Browser wie gewünscht angezeigt wird. Solange es dabei nur um ein paar falsch sitzende Pixel und eine eher selten verwendeten Browser geht, kann ich nur sagen: Wenn ihr wollt, dass es überall gleich aussieht, malt ein Bild!

In vielen Fällen geht es aber um mehr - in vielen Fällen gerade um den Internet Explorer, der von einer Mehrheit der Nutzer verwendet wird, der die Seite völlig unbrauchbar darstellt. Teilweise verschwinden Teile der Webseite ganz. Das ist Ärgerlich, aber noch lange kein Grund Standards in den Wind zu schießen: Es gibt ausreichend Möglichkeiten auch solche Tücken zu überstehen.

Validität sichert vor allem ab, dass zukünftige Browser (theoretisch) in der Lage sein müssten diese Seite nach dem Standard der für diese Seite ewählt wurde richtig zu rendern. Hierfür gibt es zwar keine Garantie, die Wahrscheinlichkeit ist aber vergleichsweise hoch.

Nachtrag: Da mich grade via Google die Frage

warum muss eine webseite doctype haben

erreicht hat, möchte ich hiermit doch glatt mal eine Antwort geben:

Es gibt unterschiedliche Standards für HTML, aktuell ist HTML 4, HTML 5 ist in Entwicklung. Dann gibt es noch XHTML (1.1 - 2 in Vorbereitung) - das ist im großen und ganzen noch eine (verbesserte) Version von HTML 4 die auf XML Standards angepasst wurde (bei der 2er Version soll der Mischmasch aus Formatierung und Strucktur endgültig abgeschafft werden. Ich freue mich drauf, dauert aber noch). Vergleiche hierfür auch HTML-Versionen in Wikipedia.

In den unterschiedlichen Versionen sind teilweise nicht übereinstimmende Dinge festgelegt - es sind entfallen Tags und es kommen neue dazu, manche Tags werden (geringfügig) anders verwendet etc. Ziel des Doctype ist es dem Browser zu sagen, wie er das Dokument rendern soll - an welche HTML-Spezifikation er sich halten soll. Dazu kommt (noch viel wichtiger) die Tatsache, dass früher (und aus Kompatibilitätsgründen heute immer noch) 2 verschiedene Box-Models, eines für die Welt und eines für den IE. Je nach Doctype ändert sich auch das verwendete Box-Model. Nur wer also ein Doctype festlegt, kann sich auch (enigermaßen) darauf verlassen, welches Box-Model verwendet wird und wie der Browser etwas dastellt. Der IE ist hier sehr Fehlertolerant, dafür stimmt die Darstellung am wenigsten mit den W3C-Spezifikationen überein, während Geckobrowser wie Firefox, KHTML-Browser (Konqurer und Safari) genau wie Opera mit seiner eigenen Engine weniger Fehlertolerant sind, die Darstellung stimmt aber eher mit den Spezifikationen überein.

Als nächstes kommt ein Artikel über Web / HTML-Editoren

Der Beitrag wurde am Donnerstag, den 23. August 2007 um 00:52 Uhr veröffentlicht und wurde unter (X)HTML, CSS, Webdesign abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.