HTML-Tutorial

Dieses HTML-Tutorial war ursprünglich ein Crash-Kurs für meine Schwester Astrid, damit sie auch die Hypertext Markup Language beherrscht. Da sich aber mit der Zeit doch einiges an Text zusammengekommen ist, möchte ich das Ergebnis der Allgemeinheit zur Verfügung stellen. Als Referenzquelle hinsichtlich exakter Syntax ist de.selfhtml.org zu verwenden, dieses Tutorial soll vielmehr als eine erste Einführung dienen.

HTML-Grundgerüst

Eine minimalistische HTML-Datei hat den folgenden Inhalt:

   <html>
   <head>
   <title>Dies ist ein Titel</title>
   </head>
   <body>
   Hallo Welt!
   </body>
   </html>

Ein HTML-Dokument besteht also aus einem Head und einem Body. Im Head werden die Dinge spezifiziert, die nicht unmittelbar Inhalt darstellen, aber dennoch für das HTML-Dokument wichtig sind. So werden im Head im Allgemeinen der Zeichensatz und Meta-Tags (Autor, Keywords, etc.) angegeben sowie der Seitentitel (das, was in der Programmleiste im Browserfenster angezeigt wird) spezifiziert.

Zusätzliche Angaben im Grundgerüst

Kommentare im Quelltext werden mit  geschlossen, ich werde diese auch in leicht erkennbarem Grau halten.

Der Standard verlangt, im Header die HTML-Version anzugeben. Sehr gängig ist HTML-Version 4.01, eine neuere "Version" ist XHTML, für den Einstieg ist HTML 4.01 (meiner Meinung nach) leichter. Die Versionsangabe steht aus naheliegenden Gründen ganz am Anfang des Dokuments. Weiters wird im Header dann auch noch die Zeichenkodierung angegeben. Dies ist für eine korrekte Darstellung der Zeichen - im Speziellen Umlaute - notwendig. Natürlich muss dann auch die Datei im entsprechenden Format gespeichert sein, für den Anfang kann es aber weggelassen werden. Um das HTML-Dokument entsprechend zu gestalten, bindet man im Head die CSS-Datei ein. Das erweiterte und nun standardkonforme Grundgerüst sieht dann so aus:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   <html>
   <head>
   <title>Dies ist ein Titel</title>
   <!-- Die CSS-Datei style.css einbinden: -->
   <link rel="stylesheet" href="style.css" type="text/css">
   </head>
   <body>
   Hallo Welt!
   </body>
   </html>

HTML-Standardelemente

Im Body steht dann der eigentliche (für den Betrachter relevante) Inhalt des Dokuments. Theoretisch kann man auch reinen Text schreiben, damit vergibt man aber die Gliederungsmöglichkeiten, die HTML bietet. Auszuzeichnender Text wird in HTML-Tags eingefasst, deren Verwendung wird am schnellsten über Beispiele klar. Die folgenden Text-Auszeichnungen (alle stehen im Body) sind meiner Meinung nach die häufigsten:

   <!-- Große, fette Überschrift:-->
   <h1>Überschrift 1</h1>
   
   <!-- Große Überschrift:-->
   <h2>Überschrift 2</h2>

   <!-- Es gibt auch h3, h4, usw. bis zur Mini-Überschrift h6:-->
   <h6>Überschrift 6</h6>
   
   <!-- Ein Absatz wird so eingefasst,
   kann aber auch weggelassen werden: -->
   <p>Hier steht ein mehr oder weniger langer Absatz</p>
   
   <!-- Zeilenumbruch: -->
   <br>
   
   <!-- Bild aisha.jpg (muss sich im selben Verzeichnis befinden) einbinden:-->
   <img src="aisha.jpg" alt="Alternativtext, falls Bild nicht angezeigt werden kann">
   
   <!-- Einen Link zu http://www.bgbrgleibnitz.at erstellen: -->
   <a href="http://www.bgbrgleibnitz.at/">Beschreibung des Links</a>

   <!-- Aufzählung (ungeordnet)-->
   <ul>
     <li>Erster Punkt</li>
     <li>Zweiter Punkt</li>
   </ul>

   <!-- Aufzählung (geordnet)-->
   <ol>
     <li>Erster Punkt</li>
     <li>Zweiter Punkt</li>
   </ol>

   <!-- Tabelle (tr für tablerow, td für tabledata) -->
   <table>
     <tr>
       <td>1. Datenfeld, 1. Zeile</td>
       <td>2. Datenfeld, 1. Zeile</td>
     </tr>
     <tr>
       <td>1. Datenfeld, 2. Zeile</td>
       <td>2. Datenfeld, 2. Zeile</td>
     </tr>
   </table>

Das Ergebnis dieses Codes (in Verbindung mit dem HTML-Grundgerüst) ist hier zu sehen.

Framesets

Oft möchte man auf einem Teil der Seite ein Menü haben und am verbleibenden Platz den Inhalt. Dies wird mittels Framesets bewerkstelligt. Es gibt verschiedene Meinungen darüber, ob Framesets noch zeitgemäß sind oder nicht, meine Ansicht ist, dass wenn sie die offensichtlich beste Lösung sind, dann auch verwendet werden sollen. Besser als Frames auf de.selfhtml.org könnt ichs auch nicht machen! ;-)

Hier ein Frameset, das in linke und rechte Hälfte aufteilt:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
   <html>
   <head>
   <title>Hier werden Framesets definiert</title>
   </head>
   <frameset rows="50%,50%">
      <frame src="links.html" name="Fensterlinks">
      <frame src="rechts.html" name="Fensterrechts">
      </noframes>
         <body>
         Das hier wird angezeigt, wenn der Browser keine Frames unterstützt
         </body>
      </noframes>
   </frameset>
   </html>

Natürlich sind für die Breitenangaben anstelle von "50%,50%" auch Pixel-Breiten möglich. Der "*" bedeutet, dass der verbleibende Platz hier eingesetzt wird. rows="200px, *" würde links einen 200 Pixel breiten Streifen erzeugen und den Rest dem rechten Streifen zuweisen. Trennungen in oben und unten werden durch cols= anstelle von rows= bewerkstelligt.

Meiner Meinung nach kommt einem HTML-Element ganz besondere Bedeutung in Bezug auf Layout zu: Dem div-Element. Es ist eine Art umfassender Container für alle darin enthaltenen Elemente, wie es beispielsweise body ist. Während es aber nur einen body geben kann, kann es praktisch beliebig viele divs neben- und ineinander geben. Beispiele für die Verwendung von div-Elementen folgen nach dem CSS-Teil.

CSS - Dem ganzen Style geben!

So, das Grundverständnis von HTML is nun soweit vorhanden, jetzt muss man dem ganzen etwas Farbe und Stil geben. Derartige Möglichkeiten sind in HTML nach wie vor vorhanden, aber wesentlich flexibler ist die Verwendung von CSS (Cascading Style Sheets). Am besten ist das ganze an einem Beispiel erklärt (Kommentare stehen innerhalb von "/* ... */":

   /* Datei html-css-beispiel1.css: */
  /* Alles, was im Body steht (also praktisch jeder Inhalt): */   
  body{   
    /* Hintergrundfarbe in leichtem Blau: */   
    background-color: #AAAAFF;
    /* Links 50 Pixel Platz zum Fensterrand: (Außenrand) */
    margin-left: 50px;
    /* Rechts auch 50 Pixel Platz zum Fensterrand: */
    margin-right: 50px;
    /* Oben 100 Pixel Außenrand: */
    margin-top: 100px;
    /* Rahmen mit 2 Pixel Breite, Farbe rot: */
    border: 2px solid #FF0000;
    /* Links 20 Pixel Platz zum Rahmen lassen: (Innenrand)*/   
    padding-left: 20px;
    /* Rechts auch: */   
    padding-right: 20px;
    /* Oben 50 Pixel Innenrand: */   
    padding-top: 50px;
    /* Unten das gleiche: */   
    padding-bottom: 50px;
    
    /* Textfarbe in dunklem Grau: */   
    color: #222222;
    /* Schriftart Verdana: */   
    font-family: Verdana;
    /* Kursiv: */   
    font-style: italic;
    /* Fett: */   
    font-weight: bold;
    /* Unterstrichen: */   
    text-decoration: underline;
    /* Zentriert */   
    text-align: center;
  } 

  h1{ 
    /* Überschrift 1 soll 50px groß sein: */   
    font-size: 50px;
    /* ... grün sein... */   
    color: #00FF00;
    /* ... und blinken! */   
    text-decoration: blink;
  
  }

So, wenn man jetzt das ganze im folgenden HTML-File verwendet:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   <html>
   <head>
   <title>Dies ist ein Titel</title>
   <!-- Die CSS-Datei html-css-beispiel1.css einbinden: -->
   <link rel="stylesheet" href="html-css-beispiel1.css" type="text/css">
   </head>
   <body>
   Ich bin etwas Beispieltext, lalala!
   <h1>Ich bin eine Überschrift!</h1>
   und hier gehts mit Text weiter...
   
   </body>
   </html>

So erhält man dieses grauenhafte, aber demonstrative Ergebnis.

Etwas Erklärung ist natürlich auch notwendig: Zu jedem HTML-Tag gibt es auch eine CSS-Struktur, also das, was vor den geschwungenen Klammern steht. Das geht also für body{...}, für a{...}, für img{...} und so weiter. Fast alle obigen Eigenschaften können darin verwendet werden, auch wenn bei img{} eine Textfarbe z.B. wenig Sinn macht.

Nun kann man auch für ein und das selbe Element verschiedene Formatierungsmöglichkeiten verwenden, indem man verschiedene Klassen definiert, als Beispiel wieder für h1:

  h1.gruen{ 
    /* grün einfärben */   
    color: #00FF00;
  } 

  h1.rot{ 
    /* rot einfärben */   
    color: #FF0000;
  } 

  /* Globale Klasse, kann für fast jeden HTML-Tag verwendet werden */   
  .blinkend{ 
    /* blinken lassen */   
    text-decoration: blink;
  }

Im HTML-Quellcode kann man dann die verschiedenen Klassen wie folgt verwenden:

  <h1 class="gruen"> Grüne Überschrift </h1>
  <h1 class="rot"> Rote Überschrift </h1>
  <h1 class="blinkend"> Blinkende Überschrift </h1>

Neben Spezialisierung mit class gibt es auch noch die Möglichkeit, mittels id zu spezialisieren. Wie der Name schon sagt, sollten id's nur einmal pro HTML-Seite verwendet werden. Die Syntax ist wie folgt:

  #gruen{ 
    /* grün einfärben */   
    color: #00FF00;
  } 

  #rot{ 
    /* rot einfärben */   
    color: #FF0000;
  }

Und verwenden kann man es dann so:

  <h1 id="gruen"> Grüne Überschrift </h1>
  <p id="rot"> Roter Absatz </p>

Anstelle von id kann man im Regelfall auch class verwenden, bezüglich CSS ist da kein Unterschied. Erst wenn man beispielsweise mit JavaScript id's ansprechen will, macht es einen Unterschied.

Warum Formatierungen so umständlich über CSS und nicht gleich direkt in HTML?

Es gibt noch genug HTML-Sprachelemente, die Farbgebungen, etc. direkt im Quellcode zulassen. Was mit CSS machbar ist, sollte aber auch mit CSS gemacht werden. Will man etwas am Layout verändern, so muss man nur noch das CSS-File anpassen und nicht jeden einzelnen Tag heraussuchen. Es gibt auch genug Beispiele im Web, wo man das Aussehen einer Seite komplett verändert, indem man nur die CSS-Datei austauscht.

Natürlich kann ich in der Kürze nicht alle CSS-Feinheiten erwähnen, für mehr Information ist wiedereinmal CSS bei de.selfhtml.org die richtige Anlaufstelle.

Layouten mit div's

In diesem Abschnitt sollen die Möglichkeiten von div-Elementen demonstriert werden. In den einzelnen Beispielen sind die CSS-Anweisungen jeweils im HTML-Head angeführt, dies ist nur der Einfachheit halber, um für jedes Beispiel nur eine Datei zu haben. Im "Ernstfall" sollten die CSS-Angaben wieder in einer eigenen Datei stehen!

Sofern etwaige Unklarheiten mit der Verwendung der CSS-Eigenschaften auftreten, so bitte weiter oben in diesem Tutorial nachschauen oder gleich direkt bei de.selfhtml.org.

Um ein Gefühl zu bekommen, was div-Elemente nun eigentlich sind, hier einmal ein einfaches Beispiel:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <title>div-Example 1</title>

 <style type="text/css"><!--
 div.box1{
   background-color: #88CC66; 
 }
 div.box2{
   background-color: #FF0000;
 }
 div.box3{
   background-color: #CC99FF; 
 }
 div.box4{
   background-color: #F1588F;
 }
 -->
 </style>
 </head>

 <body>

   <div class="box1">Das ist eine Box, etwas hässlich halt...<br>
   <br>Wirklich hässlich!</div>

   <div class="box2">Diese Box besser gleich gar nicht anschauen...</div>
   <div class="box3">Und die dritte Box ist aber auch nicht schöner...<br>
   <br>;Überhaupt nicht!</div>

   <div class="box4">Diese Box gibt ihren Senf am Ende dazu!</div>

 </body>

 </html>

Hier ist das Ergebnis zu sehen.

Div-Elemente sind also so eine Art Box, wo man Inhalt hineinschreiben kann. Mit dieser Erkenntnis sind freilich keine Bäume auszureißen, wir werden mit CSS aber einmal beginnen, das vorige Beispiel etwas zu verfeinern. Dazu ersetzen wir die alten CSS-Deklarationen durch die folgenden:

 div.box1{
   background-color: #88CC66;
   padding: 10px;
   margin: 10px; 
 }
  div.box2{
   background-color: #FF0000;
   padding: 10px;
   margin: 10px; 
   border: 2px dotted black;
   color: #FFFFFF;
 }
 div.box3{
   background-color: #CC99FF; 
   padding: 10px;
   margin: 10px; 
   border: 2px dashed #0000FF;
 }
 div.box4{
   background-color: #F1588F;
   margin: 10px 0 0 0;
 }

Hier ist das Ergebnis zu sehen.

Was hat sich geändert? Die Hintergrundfarben nicht, die sind die gleichen geblieben. Die Boxen haben Innen- (padding) und Außenränder (margin) dazubekommen und zwei Boxen haben auch noch einen Rahmen erhalten. Die Änderung der Textfarbe in der zweiten Box war eher kosmetischer Natur.

Außer etwas am Aussehen der divs (Boxen) hat sich im vorigen Schritt nicht allzu viel geändert. Nun kommt aber der wichtige Schritt: Man kann divs wie Bilder und Text ausrichten und ihre Größe vorschreiben! Das klingt im ersten Moment wenig spektakulär, eröffnet aber viele Möglichkeiten! Ändern wir im vorigen Beispiel den CSS-Teil auf:


 body{
   padding: 0;
   margin: 0;
 }
 div.box1{
   background-color: #88CC66;
   padding: 10px;
   margin: 0; 
   border: 1px solid #00FF00;
   float: left;
   width:180px;
 }
 div.box2{
   background-color: #FF0000;
   padding: 10px;
   margin: 0px; 
   border: 2px dotted black;
   float: right;
   color: #FFFFFF;
 }
 div.box3{
   background-color: #CC99FF; 
   padding: 10px;
   margin: 0 0 0 210px;
   border: 2px dashed #0000FF;
   height: 200px;
 }
  div.box4{
   background-color: #F1588F;
   margin: 0;
   padding: 10px;
 }

Hier ist das Ergebnis zu sehen.

Was hat sich nun verändert? Das Aufheben der Ränder bei body ist eher kosmetisch, damit werden nur die Ränder im Browserfenster abgeschalten. Die wichtigen Änderungen sind fett hervorgehoben: box1 wird auf eine Breite von 180 Pixel gesetzt und angewiesen, dass nachfolgende HTML-Elemente rechts herumfließen sollen weil box1 selbst links angeordnet wird, genauso wie es beim Textfluss bei Bildern im Text ist. box2 erhält die selbe Flußanweisung, nur steht selbst halt rechts. box3 wird auf eine Höhe von 200 Pixel gesetzt und gleichzeitig auf einen linken Rand von 210 Pixel. Damit bleibt genau der Raum links von box3 für box1 frei. Da box3 rechts keinen Rand hat, rutscht box2 in box3 hinein. Verkleinert man das Browserfenster per Hand, so erkennt man, dass kein Text von box3 hinter box2 verschwindet: Das ist die Wirkung von float!

Diese neue Struktur werden wir gleich einmal ausnützen, um den ganzen divs eine Bedeutung zu geben. Dazu ändern wir das Beispiel etwas ab:


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <title>div-Example 4</title>

 <style type="text/css"><!--
 body{
   padding: 0;
   margin: 0;
 }
 div.navigation{
   background-color: #88CC66;
   padding: 10px;
   margin: 0; 
   border: 1px solid #00FF00;
   float: left;
   width: 180px;
 }
 
 div.navigation a{
    font-style: none;
    color: #0000AA;
    font-size: 1.2em;
 }
 
 div.navigation li{
    font-weight: bold;
    font-size: 0.8em;
 }
 
 div.navigation li a{
    text-decoration: none;
    color: #FF0000;
 }

 div.tagestipp{
   background-color: #FF0000;
   padding: 10px;
   margin: 0px; 
   border: 2px dotted black;
   float: right;
   color: #FFFFFF;
 }

 div.inhalt{
   background-color: #CC99FF; 
   padding: 10px;
   margin: 0 0 0 210px; 
   border: 2px dashed #0000FF;
   height: 200px;
 }
  div.fusszeile{
   background-color: #F1588F;
   margin: 0;
   padding: 10px;
 }
 -->
 </style>
 </head>

 <body>


   <div class="navigation">
      <a href="#">Krasses Thema</a>
      <ul>
         <li><a href="#">Punkt 1</a></li>
         <li><a href="#">Punkt 2</a></li>
         <li><a href="#">Punkt 3</a></li>
         <li><a href="#">Punkt 4</a></li>
      </ul>
      <a href="#">Wichtiges Thema</a>
      <ul>
         <li><a href="#">Punkt 1</a></li>
         <li><a href="#">Punkt 2</a></li>
      </ul>
   </div>


   <div class="tagestipp">Tipp des Tages:
   <br>Probleme sind wie Ecken: Schneidet man eine ab, hat man zwei neue!</div>

   <div class="inhalt">Hier gibts etwas Text:
   <br><br>aöaldkfjasclk
   <br>ölkjlöcoxn
   <br><br>und so weiter...</div>


   <div class="fusszeile">Ich bin eine Fußleiste und werde vom linken Menü überlappt</div>


 </body>

 </html>

Hier ist das Ergebnis zu sehen.

Im CSS-Teil hat sich eigentlich nicht viel getan, lediglich etwas Layout für die neuen HTML-Elemente. Die einzelnen divs haben nun etwas mehr Inhalt bekommen und die CSS-Klassen sind entsprechend umbenannt: box1 heißt nun navigation, box2 heißt tagestipp, box3 heißt inhalt und box4 heißt fusszeile. Noch ein paar Worte zu den neuen Formatierungen: Hier wurde das Ineinanderschachteln von CSS-Deklarationen benutzt: "div.navigation a" bezeichnet alle Anker-Elemente (<a ...>), die innerhalb von divs der Klasse navigation auftauchen, ebenso für die List-Elemente (<li>). Das kann man auch weiter treiben: "div.navigation li a" formatiert alle Anker-Elemente, die innerhalb von List-Elementen auftauchen, die wiederum innerhalb von divs der Klasse navigation stehen. Alternativ hätte man auch jedes HTML-Element mit einer eigenen Klasse versehen können, dadurch wird der HTML-Teil aber schnell unübersichtlich, da man bei jedem Tag die Klasse dazuschreiben muss. Deshalb ist die verschachtelte Variante mit CSS nach Möglichkeit vorzuziehen.

Das vorangegangene Beispiel ist noch nicht so wirklich für eine eigene Website zu gebrauchen (einmal von der Farbwahl abgesehen), deswegen werden wir ein paar Dinge ergänzen: Zum einen soll die Navigation links nicht die Fußzeile überlappen und zum anderen brauchen wir noch eine Überschrift. Der Tages-Tipp soll außerdem auch etwas schlanker werden und der Inhalt-div bei Bedarf auch größer (=länger) werden. Dazu werden die folgenden CSS-Klassen geändert bzw. ergänzt:

/* Nicht angeführte Klassen bleiben ungeändert! */

 div.tagestipp{
   background-color: #FF0000;
   padding: 10px;
   margin: 0px; 
   border: 2px dotted black;
   float: right;
   width: 100px;
   color: #FFFFFF;
 }
 div.inhalt{
   background-color: #CC99FF; 
   padding: 10px;
   margin: 0 0 0 210px; 
   border: 2px dashed #0000FF;
   min-height: 200px;
 }
  div.fusszeile{
   background-color: #F1588F;
   margin: 0;
   padding: 10px;
   clear: both;
   text-align: center;
 } 
 h1{
   border: 10px ridge yellow;
   background-color: maroon;
   margin: 0 0 3px 0;
   text-align: center;
   color: #FFFFFF;
 }

Im HTML-Body ist zu ergänzen:

 <!-- Im HTML-Body an oberster Stelle einfügen: -->
 <h1>Ganz wildes Layout mit divs </h1>

Hier ist das Ergebnis zu sehen.

Die wichtigeren Änderungen sind wieder fett hervorgehoben: Der Tagestipp hat nun eine feste Breite von 100 Pixel, der Inhalt hat nun eine Mindesthöhe (bzw. Mindestlänge) anstelle einer fest vorgegebenen Höhe, die Fußzeile bricht derart um, dass es keine Elemente überlappt (clear: both; beendet den Textfluss um die Tagestipp- und Navigations-divs) und eine Überschrift-Formatierung ist dazugekommen.

Damit haben wir aus unserem anfangs hässlichen Entlein zumindest einmal einen (nach wie vor hässlichen) Schwan gemacht... Abgesehen von der Farbgebung kann man das aber durchaus schon für eine Webpage verwenden! Abschließend soll das ganze in der Breite beschränkt werden, damit es gerade bei hohen Auflösungen nicht ewig lange Zeilen gibt. Die dazu notwendigen Änderungen sind aber nicht schwer: Wir müssen nur alle unsere divs in einen umgebenden div stecken und diesen zentrieren. Den Tagestipp werden wir zusätzlich so wie die Navigation außerhalb des Inhalts-divs anordnen. Die Änderungen im CSS-Teil sind die folgenden:

 /* Nicht angeführte Klassen bleiben ungeändert! */
 body{
   text-align:center;
   padding: 0;
   margin: 0; 
 }
 div.container{
   width: 900px;
   margin: auto;
   text-align: left; 
 }

 div.inhalt{
   background-color: #CC99FF; 
   padding: 10px;
   margin: 0 130px 0 210px; 
   border: 2px dashed #0000FF;
   min-height: 200px; 
 }

Und im HTML-Teil:

 <!-- HTML-Body derart abändern: -->
 <body>
   <div class="container">
     <!-- Hier der ganze vorherige Inhalt von <body> -->
   </div>
 </body>

Hier ist das Ergebnis zu sehen.

Dieses Layout soll nun unser vorläufiges Endergebnis darstellen! Die wichtigen Änderungen sind wiederum fett hervorgehoben und erklären sich wie folgt: Im body wird nun der Inhalt zentriert. Der neue container-div wird dadurch zentriert, dass seine Außenränder (margins) zusätzlich auf automatisch gestellt werden. Außerdem wird er auf eine Breite von 900 Pixel gesetzt und richtet seinen eigenen Inhalt wieder linksbündig aus. Das war auch schon alles, um das ganze in der Breite zu begrenzen und gleichzeitig zu zentrieren. Der Tagestipp ist auf die gleiche Art wie die Navigationsleiste vom inhalt-div abgetrennt, indem einfach der Außenrand von inhalt entsprechend groß gemacht wurde.

Hinweis: Die CSS-Zentrierung im body kann auch weggelassen werden, allerdings kann das zu Problemen beim Internet-Explorer führen, wenn der DOCTYPE nicht anständig angegeben ist!

Für weitere Layout-Möglichkeiten verweise ich auf fractatulum.net, dort sind viele Layout-Möglichkeiten mit div's sehr klar ausgeführt und bleiben trotzdem immer einfach. Als Einstieg ist die Seite CSS Layout Teil 1 (sowie dessen dort verlinkten Nachfolger) zu empfehlen.

Computer

Elektronik

Uni

Fun

Links

HTML-Tutorial

HTML-Grundgerüst

Zusätzliche Angaben im Grundgerüst

HTML-Standardelemente

Framesets

CSS - Dem ganzen Style geben!

Warum Formatierungen so umständlich über CSS und nicht gleich direkt in HTML?

Layouten mit div's