HTML - Strukturierung - Inhaltsbeispiele
1. Der Grundaufbau
Hier habe ich euch ja schon gezeigt, wie der aussehen könnte. Man unterteilt seine Seite in die
gewünschten Abschnitte und packt die in <div>
-Elemente. Sie sind also so eine Art von Kästen, wo man je nach
Inhalt etwas aufbewahrt. Man kann aber noch einen Schritt weitergehen. <div>
-Tags werden nur dann genutzt, wenn
es keine semantische Alternative dazu gibt.
2. Eine Navigation
... baut man eigentlich immer als Liste auf. Wenn möglich, sogar als verschachtelte Liste, um die Zugehörigkeit und Struktur deutlich zu machen.
<div class="navi">
<ul>
<li><a href="...">Bla</a></li>
<li>
<a href="...">Blubb</a>
<ul>
<li><a href="...">Blubber</a></li>
<li><a href="...">Laber</a></li>
<li><a href="...">Jodelblah</a></li>
</ul>
</li>
</ul>
</div>
Leider ist das nicht immer praktikabel. So gibt es zum Beispiel bei mir eine strikte Trennung zwischen der Hauptnavigation (also alles von "Einführung" bis "Allgemeines") und den jeweiligen Unterpunkten. Gut, in dem Fall fordert das Design seinen Preis, aber das ist in Ordnung. Man kann das zwar per CSS korrigieren, aber der Aufwand ist saumäßig hoch. Also lasst es in so einem Fall bleiben.
3. Inhalte
Hier könnt ihr sehen, wie die einzelnen Texte entsprechend ihrer inhaltlichen Bedeutung ausgezeichnet werden. Gut, mit dem Inhalt ist das hier so eine Sache, aber ich denke, ihr wisst, worum es geht.
<div class="content">
<h1>Überschrift</h1>
<p>
Bla bla bla, laber, schwall, ich bin Zensursula, jodelblah
</p>
<ul>
<li>Internet reglementieren</li>
<li>Bürger entmündigen</li>
<li>Wir wissen, was am Besten ist, ihr nicht</li>
</ul>
<h2>Zwiti</h2>
<p>
Und noch mehr bla blubb und rumsülz.
</p>
<h3>Hallo Herr Schäuble</h3>
<p>
Wenn sie das lesen können, sind sie zu nahe.
</p>
</div>
4. Formulare
Da dies etwas schwieriger ist, habe ich vor einiger Zeit dazu mal ein Tutorial verfasst. Die blutigen Anfänger können es sich ruhig mal ansehen, allerdings empfehle ich vorher noch die Theorie zu CSS, bevor ihr loslegt.