Das Dokument erzeugen

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Erzeugen Sie nochmal ein XHTML- oder HTML-Dokument und speichern Sie es unter dem Namen fixedwidth.html ab. Achten Sie darauf, dass alle Inhalte korrekt mit HTML ausgezeichnet sind und prüfen Sie das Dokument anschließend im W3C-Validator. So können sie sicher sein, dass Ihr Dokument keine HTML-Fehler enthält, die Ihnen später, wenn Sie CSS-Regeln hinzufügen, Schwierigkeiten machen könnten.

Ein tabellenbasiertes Layout
Obwohl wir Ihnen davon abraten, Layouts mit Tabellen zu erstellen, ist es vollkommen in Ordnung, Tabellen zu verwenden. Zur Darstellung von tabellarischen Daten, beispielsweise in einem Arbeitsblatt, sind sie das empfohlene Mittel. Der Turnierplan, den die Abbildung Mit der formatierten Tabelle ist das Layout fertig zeigt, enthält tabellarische Daten und deshalb sind auch Tabellen am besten geeignet, ihn zu kodieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Footbag Freaks</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="fixedwidth.css" />
  </head>
  <body>
    <div id="header">
      <img src="img/logo.gif" alt="Footbag Freaks" height="77" width="203" />
      <p>The Home of the Hack</p>
    </div> <!-- header -->
    <div id="content">
      <img src="img/player.gif" height="272" width="111" alt="World Cup 06 Melbourne" />
      <h1>Announcement</h1>
      <h2>2006 FOOTBAG WORLD CUP DRAW</h2>
      <p>Melbourne, Australia. July 21st - 27th</p>
      <p>Footbag Freaks is pleased to announce that the draw for the biggest and most prestigious event in global footbag is coming to Melbourne in July, 2006 with the staging of the Footbag World Cup.</p>
      <p>Seen as the pinnacle of achievement in the sport, the 2006 World Cup will bring together over 200 of the world's premier footbag experts, with representative teams expected from over 40 nations. Entries will close on March 2, 2006. Tickets to the event will go on sale from January 1, 2006.</p>
      <table class="schedule" summary="Schedule of matches for the Footbag 2006 World Cup">
        <caption>Event Schedule</caption>
        <thead>
          <tr>
            <th scope="col">Match</th>
            <th scope="col">Scheduled</th>
            <th scope="col">Country</th>
            <th scope="col">Vs.</th>
            <th scope="col">Country</th>
            <th scope="col">Winner plays..</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><a href="#">Match 1</a></th>
            <td><a href="#">July 21st :12:00pm</a></td>
            <td>England</td>
            <td>vs.</td>
            <td>New Zealand</td>
            <td>Winner of Match 12</td>
          </tr>
          <tr>
           ...
            <th scope="row"><a href="#">Match 12</a></th>
            <td><a href="#">July 24th :7:00pm</a></td>
            <td>Mexico</td>
            <td>vs.</td>
            <td>Iceland</td>
            <td>Winner of Match 1</td>
          </tr>
        </tbody>
      </table>
    </div> <!-- content -->
  </body>
</html>

Achten Sie ganz besonders auf die HTML-Auszeichnungen der Tabelle. Die oberste Zeile und die erste Spalte links (die Namen der Turniere) sind mit Spaltenüberschriften ausgezeichnet. Sie wurden mit dem <th>-Tag ausgezeichnet, während der Rest der Tabellenzellen in <td>-Tags eingeschlossen ist. Außerdem benutzen wir in den Spaltenüberschriften das Attribut scope, in dem wir angeben, ob diese Überschrift für eine Spalte (scope="col") oder für eine Zeile (scope="row") der Tabelle gilt. Der Tabellenkopf ist in das Tag <thead> eingeschlossen, während ein <tbody>-Tag den Tabellenkörper umschließt. Diese Tags sind sehr nützlich, um eine Tabelle korrekt zu beschreiben, und darüber hinaus erweisen sie sich als äußerst praktisch, wenn man CSS-Regeln anwenden will.

In dem Dokument gibt es zwei div-Bereiche: der erste ist ein Container für den Kopf der Seite und trägt den Namen #header. Im zweiten <div>-Element, #content, wird der Inhalt der Seite untergebracht. Wie die Seite zum jetzigen Zeitpunkt im Browser aussieht, sehen Sie in der folgenden Abbildung.

So sieht das Dokument ohne Formatierung mit CSS aus

Abbildung: So sieht das Dokument ohne Formatierung mit CSS aus.

<< zurück

vor >>

Achten Sie ganz besonders auf die HTML-Auszeichnungen der Tabelle. Die oberste Zeile und die erste Spalte links (die Namen der Turniere) sind mit Spaltenüberschriften ausgezeichnet. Sie wurden mit dem <th>-Tag ausgezeichnet, während der Rest der Tabellenzellen in <td>-Tags eingeschlossen ist. Außerdem benutzen wir in den Spaltenüberschriften das Attribut scope, in dem wir angeben, ob diese Überschrift für eine Spalte (scope="col") oder für eine Zeile (scope="row") der Tabelle gilt. Der Tabellenkopf ist in das Tag <thead> eingeschlossen, während ein <tbody>-Tag den Tabellenkörper umschließt. Diese Tags sind sehr nützlich, um eine Tabelle korrekt zu beschreiben, und darüber hinaus erweisen sie sich als äußerst praktisch, wenn man CSS-Regeln anwenden will.

In dem Dokument gibt es zwei div-Bereiche: der erste ist ein Container für den Kopf der Seite und trägt den Namen #header. Im zweiten <div>-Element, #content, wird der Inhalt der Seite untergebracht. Wie die Seite zum jetzigen Zeitpunkt im Browser aussieht, sehen Sie in der

Abb: So sieht das Dokument ohne Formatierung mit CSS aus

.

So sieht das Dokument ohne Formatierung mit CSS aus

Abb: So sieht das Dokument ohne Formatierung mit CSS aus

<< zurück

vor >>