nicht angemeldet
Hallo!
Da ich heute nicht viel zu tun hatte, habe ich mich mal daran versucht, einen Artikel über logische Strukturierung von HTML-Seiten. Also weg von DIV-Suppen und Tabellenlayout. Könntet ihr mir vielleicht sagen, was ich besser oder anders machen könnte? Ich bin dankbar für jede hilfreiche Antwort.
Hier der Artikel:
II. Nachteile von Tabellenlayout und DIV-Suppe
II.I Nachteile von Tabellenlayout
Bevor CSS erfunden wurde, wurde die Darstellung von HTML-Seiten mit Tabellen
umgesetzt. Die Nachteile von Layouttabellen sind zahlreich. Unteranderem sind
folgende Punkte zu nennen:
* Layouttabellen passen sich nicht der Größe des Browserfensters an
* Layouttabellen sind für Screenreader absolut ungeeignet und im wahrsten
Sinne des Wortes unleserlich
* Angenommen Du hast deine Seite mit Tabellen strukturiert. Jetzt
gefällt dir aber nicht, dass das Menü rechts ist. Jetzt kannst du bei
X Unterseiten mühsam das HTML umschreiben. Wenn du dein Layout mit CSS
gestaltet hast, dann genügt es eventuell eine einzige Eigenschaft zu ändern.
Wenn du dann noch idealerweise ein externes Stylesheet benützt, dann hast
du es am einfachsten.
* Tabellenlayouts sind äußerst ungeeignet für die Darstellung von HTML-Seiten
auf PDAs und Handhelds.
All diese Gründe sprechen gegen das Verwenden von Layouttabellen. Allerdings
werden bei relativ vielen Seiten immer noch Tabellen genutzt um das richtige
Layout zu erreichen.
II.II Nachteile von DIV-Suppen
Viele Umsteiger von Tabellenlayouts auf CSS-Layouts produzieren erstmal eine
ordentliche DIV-Suppe. Allerdings sind diese Umsteiger stolz darauf, dass sie
den Umstieg von Tabellenlayouts auf ein CSS-Design geschafft haben. Dabei
setzen sie ein CSS-Layout mit einem semantisch korrektem Design gleich. Aber
nicht jedes Layout, das mit Hilfe von CSS erstellt wurde, ist perfekt. Eine
DIV-Suppe hat folgende Eigenschaften und Nachteile.
* Der Code besteht nur aus DIV-Elementen und verwendet selten Listen,
Überschriften oder sonstige Elemente, die für eine sinnvolle Auszeichnung
von Inhalten steht.
* Der Code ist oft absolut unübersichtlich und für einen Aussenstehenden oft
unverständlich.
* Der Code ist nahezu unwartbar und kann kaum erweitert werden, da (wie in
Punkt 2 genannt) er Code total unübersichtlich ist.
Diese DIV-Suppen sind oft nur geringfügig besser als Tabellenlayouts. Das einzig
wahre, was das Herz eines verwöhnten HTML-Kenners höher schlagen lässt ist:
Semantisches HTML :-) Womit wir schon beim nächsten Punkt wären.
III. Was ist logisch strukturiertes HTML?
Es ist ganz kurz erklärt, was logisch strukturiertes HTML ist: logisch strukturiertes HTML
nutzt alle Möglichkeiten aus, die ihm vom W3C gegeben wurden. Soll heißen: Wenn du
Listen brauchst, dann benütze eine Liste. Wenn du einen Absatz brauchtst, dann benutze
<p>. Wenn du ein Menü rechts haben willst, dann nimm es per float aus dem Fluss.
Dabei ist zu beachten, dass zum Beispiel ein Menü eine Aufzählung bzw. Liste von Links ist.
Das bedeudet, dass es kein semantisch korrektes HTML ist, wenn man dazu dann viele DIVs
nimmt. Sondern vielmehr eine Liste. An dieser Stelle möchte ich auch anmahnen, dass es
durchaus sinnvoll ist über eine Seite den Validator zu schicken. Validiertes HTML trägt
ungemein zur Steigerung der Korrektheit bei ;-)
IV. Logisch strukturiertes HTML in der Praxis
Jetzt kommt etwas Praxis in diesen Artikel. Ich zeige nun, wie man logisch strukturiertes HTML
umsetzt. Wer allerdings noch nie viel mit CSS gemacht hat, der schaut sich bitte das CSS-Kapitel
von SELFHTML an. Das SELFHTML-Kapitel vermittelt die nötigen Grundlagen.
Hier ist ein semantisch absolut sinnloses Codebeispiel dargestellt:
<body>
<div id="headline">Überschrift</div>
<div id="menu">
<div> Menüpunkt 1 </div>
<div> Menüpunkt 2 </div>
<div> Menüpunkt 3 </div>
<div> Menüpunkt 4 </div>
</div>
<div id="content">
<div style="padding-bottom:1em">
Absatz 1
</div>
<div style="padding-bottom:1em">
Absatz 2
</div>
</div>
</body>
Die zugehörige CSS-Datei spielt eine untergeordnete Rolle in diesem Beispiel, da es sich
schließlich um logisch strukturiertes HTML geht. Wenn man diesen HTML-Quelltext in korrektes
HTML umsetzt, dann sieht das in etwa so aus:
<body>
<h1>Überschrift</h1>
<ul>
<li> Menüpunkt 1 </li>
<li> Menüpunkt 2 </li>
<li> Menüpunkt 3 </li>
<li> Menüpunkt 4 </li>
</ul>
<div id="content">
<p>
Absatz 1
</p>
<p>
Absatz 2
</p>
</div>
</body>
Siehst Du den Unterschied? Der Code ist um einiges übersichtlicher und ist weitaus sinnvoller
als die DIV-Suppe von Beispiel 1. Wenn man sich die Beispiele ohne CSS anschaut, dann sieht
man wieder den riesigen Unterschied zwischen den einzelnen Darstellungsformen.
Das war es. Danke schön für eure Mühe und bitte zerreisst mich nicht *g* Bei den Codebeispielen, wird dann auch ein Link zu einem Dokument sein, das dann den Code darstellt. Das zeigt dann IMHO noch besser den Sinn von gutem HTML :-)
ciao, ww
Dies ist eine sehr einfache und effektive Sicherheitsstufe, aber nicht perfekt. Denn wenn mehrere User über eine Leitung ins Internet gehen, haben für den Webserver alle User die selbe IP. Und dann wirkt diese Sicherheitsstufe nicht mehr. Aber zumindest könnt ihr demjenigen, der euch die Session-ID geklaut hat, eins in die Fresse hauen.
http://tut.php-q.net/login.html