Handbuch Webdesign: XHTML

Aus Wikibooks

[Bearbeiten] XHTML

Handbuch Webdesign XHTML

Folgende Übungen sind zu dieser Buchseite verfügbar:

• Übungen und Fragen zu HTML Grundlagen
• Übungen und Fragen zum Hochladen von Webseiten

[Bearbeiten] Einleitung

Dieses Kapitel ist sehr trocken geschrieben, es handelt nur vom HTML-Code und den genauen Vorschriften, wie dieser Code zu schreiben ist. Verlieren Sie dabei nie aus dem Auge: es geht um die Gestaltung von Webseiten. Das Ergebnis der trockenen Arbeit mit dem Code ist immer eine Webseite. Hoffentlich eine lesbare, bunte, interessante Webseite – auch wenn der Code selbst Ihnen unleserlich, trist und uninteressant erscheinen mag. Den Code beherrschen heißt, durch ihn hindurch die lebendige Webseite sehen zu können.

Vielleicht erlernen Sie mit HTML zum ersten Mal so etwas Ähnliches wie eine Programmiersprache. Dazu gehört auch der Erwerb des Fachvokabulars: Tags, Attribute, Whitespace, Character Entities – diese Fachbegriffe müssen Sie verstehen und korrekt verwenden können.

[Bearbeiten] XHTML und HTML

Die Abkürzung HTML steht für "HyperText Markup Language". HTML wird vom World Wide Web Consortium standardisiert. 4.01 ist die letzte/höchste Version von HTML, nach dieser Version wurde von HTML auf XHTML umgestellt. XHTML ist zu XML kompatibel, deswegen das X am Anfang.

Es ist etwas schwieriger, korrektes XHTML zu schreiben als korrektes HTML, da die Schreibweise in HTML weniger genau geregelt ist. Die aktuellen Browser stellen sowohl HTML als auch XHTML dar. Wir werden XHTML verwenden, es aber einfach HTML nennen.

Die wichtigsten Prinzipien und die wichtigsten HTML-Tags (für Links, Bilder, Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details können und sollen Sie bei selfhtml ^[1] oder in einem ähnlichen Referenzwerk nachschlagen. Sie sollten – wie bei allen Themen – parallel auch andere Quellen zu HTML konsultieren und die Aussagen in diesem Buch kritisch hinterfragen!

In diesem Kapitel wird nur der HTML-Code beschrieben, nicht das Erstellen von HTML-Dateien mit einem Programm, das nach dem "what you see is what you get" – Prinzip funktioniert. Sie können den HTML-Code mit jedem Text-Editor erstellen. Die HTML-Datei sollten Sie – auch während Sie die Datei noch erstellen und verändern – immer wieder in einem Browser betrachten und überprüfen, ob das Ergebnis Ihren Vorstellungen entspricht. Der Arbeitsablauf ist immer:

1. Code im Editor ändern
2. Datei im Editor abspeichern
3. in den Browser wechseln
4. Die Anzeige im Browser aktualisieren / neu laden

Und wieder zurück zu Punkt 1. So lange wiederholen, bis die Webseite fertig ist.

[Bearbeiten] Characterset

HTML-Dateien bestehen aus reinem Text, auch ASCII-Text genannt – so wie Dateien mit der Endung .txt.

Achtung: Erstellen Sie Ihren HTML-Code nicht mit dem Programm Wordpad unter Windows. Dieses Programm kann zwar ASCII-Text erzeugen, aber auch Dokumente im rtf-Format. Das kann zu dem in Abbildung 25 gezeigten Fehler führen:

Hier wurde der Text nicht (nur) mit HTML-Tags formatiert, sondern auch mit der von WordPad angebotenen Formatierungs-Leiste. Verwendet man diese, dann erscheint der Text zwar im Programm Wordpad größer / fett, im Browser sieht er dafür nicht mehr richtig aus.

Die korrekte Art, HTML zu speichern, ist entweder ANSI, auch bekannt als Format ISO 8859-1 (Latin-1). Das ist der traditionelle Computer-Zeichensatz ASCII, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie die Umlaute üöä ÜÖÄ sowie ß é ñ. (Um ganz genau zu sein, wird seit Einführung des Euros und des €-Zeichens ISO 8859-15 (Latin-15) verwendet – das ist Latin-1, ergänzt um das Euro-Zeichen und ein paar Ligaturen für Französisch.) Unter Windows und Linux wird dieses Format standardmäßig verwendet, nur am Mac müssen Sie beim Speichern im TextEdit darauf achten, das richtige Format, nämlich ?Westeuropäisch (Windows Latin 1)? einzustellen.

Eine Alternative zu Latin-1 ist Unicode in der Variante utf-8. Das hat den Vorteil, dass Sie die Sonderzeichen verschiedener Sprachen in einem Dokument mischen können. Falls Sie Ihre HTML-Datei als utf8 speichern, müssen Sie das im Head der HTML-Datei angeben, siehe Tags für den Head.

[Bearbeiten] Zeichenreferenzen

Zeichenreferenzen (engl.: character entities) dienen dazu, bestimmte Zeichen darzustellen. Eine Zeichenreferenz hat immer die Form &entityname; Folgende Zeichenreferenzen müssen Sie verwenden:

Folgende Zeichenreferenzen müssen Sie nicht verwenden, Sie können das Zeichen auch direkt im HTML-Code eingeben. Die Schreibweise als Zeichenreferenz ist vielleicht praktisch, wenn Sie das Zeichen nicht auf Ihrer Tastatur finden können (z.b. auf einer englischen Tastatur).

Die Umlaute ü, Ü, ö und Ö funktionieren nach dem gleichen Prinzip wie ä und Ä.

[Bearbeiten] HTML-Tags

Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben.

• Tags sind zwischen spitzen Klammern ("kleiner" und "größer"-Zeichen) eingeschlossen.
• Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag", der sich nur durch einen Schrägstrich vom Anfangs-Tag unterscheidet. Z.B. <p>hier der Absatz</p>.
• "alleinstehende" Tags müssen in XHTML mit einem Schrägstrich am Ende geschrieben werden: <br /> (früher, in HTML, ging auch <br>)

Die wichtigsten Tags werden weiter unten noch vorgestellt. Welche Tags es gibt und was sie jeweils bewirken, ist im HTML-Standard festgelegt. Sie können nicht einfach einen neuen Tag erfinden.

[Bearbeiten] Whitespace

Sogenannter whitespace - das sind mehrere Leerzeichen, Tabulatoren und Zeilen­umbrüche hintereinander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügen macht keinen Unterschied. Die beiden Dokumente werden vom Browser gleich dargestellt:

 <p>Halli Hallo</p>

 <p>
 Halli
 Hallo
 </p>

Abbildung 27: Zwei HTML-Dokumente die gleich dargestellt werden Nur die Tags beeinflussen die Darstellung der Webseite. Sie müssen den Tag <br /> verwenden, um einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch durchführt.

[Bearbeiten] Attribute

Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img>, der ein Bild in die Webseite einfügt (Englisch: Image). Die wichtigsten Attribute von <img> sind src (von Source = Quelle) und alt (Alternative Darstellung). (Ein häufiger Fehler ist es, scr statt src zu schreiben)

  <img src="neu.gif" alt="Das ist neu!" />

Es ist egal, in welcher Reihenfolge Sie die Attribute schreiben. Ebenso sind Zeilenumbrüche, Tabulatoren, Leerzeichen auch hier, innerhalb eines Tag ohne Auswirkung auf die Darstellung im Browser:

  <img alt="Das ist neu!" src="neu.gif" />
  <img 
 alt="Das ist Neu!" 
 src="neu.gif" 
 bli="bla, blu"
 />

Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte Attribute vom Browser einfach ignoriert. Der Wert eines Attributes wird in Anführungszeichen geschrieben, auch Zahlen (das war in HTML noch nicht verpflichtend):

   <img alt="Das ist Neu!" src="neu.gif" 
 width="50" height="15" />

ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:

   <img alt="Das ist neu!"
 src="neu.gif><p>Text nach dem Bild, der "zufällig"   
   auch Anführungszeichen enthält – aber das kommt nicht immer vor. .</p>
   <p>Und noch mehr Text</p>

Wenn Sie, wie in Abbildung 28 gezeigt, das zweite Anführungszeichen vergessen, hat das enorme Auswirkungen auf die Darstellung der Webseite: der Browser sucht konsequent nach dem zweiten Anführungszeichen, wenn es sein muss bis zum Schluss des Dokuments. In diesem Beispiel findet er schon in der nächsten Zeile ein Anführungszeichen. Damit ist der Wert des Attributs beendet. Nun sucht der Browser noch nach der schließenden spitzen Klammer des img-Tags. Das Ergebnis ist, dass der Text gar nicht im Browser angezeigt wird.

[Bearbeiten] Kompatibilität

Neue Tags, die z.B. ein Browser nicht erkennt, sind zu ignorieren - es gibt keine Fehlermeldungen. Wenn das W3C in einer zukünftigen XHTML-Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführt, können Sie diesen Tag auf Ihrer Webseite verwenden. Der Text wird jedoch nur in den neuesten Versionen der Browser (die schon XHTML 21 kennen) hüpfend dargestellt. In Netscape 6 oder MSIE 5 wird der Tag <jump> ignoriert:

Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber im Klaren sein, welche Versionen der Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine passende Browser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit älteren Browsern der gesamte Inhalt lesbar ist.

Das war eine Überlegung zur Kompatibilität der Browser. Auch Menschen sind nicht kompatibel: so sind ca. 9% aller Männer und ca. 0,8% aller Frauen rot-grün-blind^[2] - verwenden Sie also nicht den Farbunterschied zwischen rot und grün, um wichtige Information anzuzeigen.

[Bearbeiten] Text formatieren

Folgende Tags nennt man blockbildende Tags weil sie im Browser immer als rechteckige Fläche angezeigt werden, als "Block":

Da diese Tags nicht ineinander verschachtelt werden können ist der folgende Code nicht korrekt:

´ <h1><p>Absatz in der Überschrift</p></h1>

Es gibt keinen Absatz in der Überschrift. Entweder ein Stück Text ist ein Absatz, oder es ist eine Überschrift:

  <h1>Überschrift</h1>
  <p>Absatz</p>
  <p>noch ein Absatz</p>

Der Browser stellt zwischen den blockbildenden Tags jeweils einen Abstand dar. Dieser kann mit Stylesheets verändert, bzw. auf Null gesetzt werden. Im Browser Firefox kann man als zusätzliches Hilfsmittel die ?Web Developers Toolbar? installieren. Mit dieser Toolbar können Sie sich unter anderem die ?Blocks? der blockbildenden Elemente anzeigen lassen wie in Abbildung 31.

Format für kleinere Text-Abschnitte müssen Sie innerhalb eines Blocks verwenden, sie werden auch als inline-Tags bezeichnet:

Der <font>-Tag ist ein "altmodischer" Tag, der durch Stylesheets ersetzt wurde, und den Sie in neuen Dokumenten möglichst nicht verwenden sollten. Um alte Dokumente zu bearbeiten, müssen Sie diesen Tag aber kennen. Diese inline-Tags können ineinander verschachtelt werden:

   <p>Absatz mit 
   <b>fett und <i>fett-kursiv</i></b> ist in Ordnung </p>

Beim Verschachteln muss die Reihenfolge passen:

   <p>Absatz mit 
   <b>fett und <i>fett-kursiv</b></i> ist in Ordnung </p>

[Bearbeiten] Bilder

Wenn in einer Webseite Bilder verwendet werden, so sind diese jeweils als eigene Datei gespeichert. Enthält eine Webseite z.B. vier Bilder, dann besteht das ?Gesamtkunstwerk? aus fünf Dateien: einer HTML-Datei, und vier Bild-Dateien.

Wenn Sie die gesamte Webseite auf USB-Stick speichern und mitnehmen wollen, müssen Sie alle fünf Dateien mitnehmen! Falls die Bilder in einem Unter-Ordner gespeichert waren, muss auch diese Ordnerstruktur erhalten bleiben.

Noch ein Wort zur Größe von Bildern: Bei den Breiten- und Höhen-Angaben (width und height) sollten Sie immer die echte Größe des Bildes (gemessen in Pixel) angeben. Wieso? Betrachten wir die zwei möglichen Fälle:

• Bild ist in Wirklichkeit kleiner, width- und height-Angaben sind zu groß
• Bild ist in Wirklichkeit größer, width - und height-Angaben sind zu klein
  Größer dargestellt

Im ersten Fall wird das Bild im Browser nicht gut aussehen: in einem Bild, das zu groß dargestellt wird, werden die einzelnen Pixel sichtbar. Kompressions-Artefakte ? das sind Bildfehler, die durch die Kompression entstehen ? werden besser sichtbar. In Abbildung 33 sehen Sie typische jpeg-Artefakte rund um die Nase.

Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und Höhe vergrößert

Im zweiten Fall (verkleinerte Darstellung) gibt es keine Probleme mit der Bildqualität, sondern mit der Übertragungszeit.

Das Bild in Abbildung 34 ist im Original 450x450 Pixel groß, und hat eine Dateigröße von 115KB. Diese 115KB müssen übertragen werden, auch wenn das Bild dann im Browser kleiner (z.B. 225x225 Pixel groß) dargestellt wird. Die Alternative wäre, das Bild im Grafikprogramm auf 225x225 Pixel zu verkleinern. Dabei wird auch die Dateigröße kleiner, in diesem konkreten Beispiel 35KB. Das ist ein Faktor 3 in der Dateigröße, und damit auch in der Download-Zeit. Der typische Arbeitsablauf ist also:

• Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
•  ?Beste? Version des Bildes archivieren
• Bild im Grafikprogramm auf die richtige Dimension und Format bringen
• Fertiges Bild in den Web-Ordner kopieren
• <img>-Tag in das HTML-Dokument einfügen.

Das Bild wird wie ein Wort im Text behandelt, und kann nicht frei auf der Webseite positioniert werden. Später lernen Sie verschiedene Methoden kennen, wie man Text und Bild mittels Tabellen oder Ebenen doch noch positionieren kann. Bis dahin gilt: Wenn Sie das Bild wie in Abbildung 35 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr hässliches Layout.

Abbildung 35: Bild mitten im Absatz

Besser ist es, das Bild in einen eigenen Absatz zu setzten, und den Absatz dann z.B. zu zentrieren:

Als Bildformate für Webseiten können nur Pixel-Formate verwendet werden:

{{

Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszuwählen, in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist. Der vorher beschriebene Arbeitsablauf kann also weiter verfeinert werden

• Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
• Das Ergebnis, ein Bild mit hoher Auflösung + Dateigröße,
  Format z.B. tiff oder jpg mit geringer Kompression archivieren
• Bild im Grafikprogramm auf die richtige Dimension und Format bringen;
  Ergebnis: Bild im Format gif, jpg, png, Dateigröße möglichst klein (=web-tauglich).
• Fertiges Bild in den Web-Ordner kopieren
• <img>-Tag in das HTML-Dokument einfügen

Das Ergebnis ist ein web-taugliches Bild im richtigen Ordner.

[Bearbeiten] Links + Anker

Das Web heißt Web, weil es wie ein Spinnennetz ist ? die Stränge dieses metaphorischen Netzes sind die Hyperlinks. Links im Web sind unidirektional, sie funktionieren nur in eine Richtung. Sie können von Ihrer Seite zur ORF-Seite einen Link machen, Sie können nicht von der ORF-Seite zu Ihrer Seite einen Link machen. Bevor Sie einen Link setzen, müssen Sie sich über zwei Dinge klar werden:

1. Welcher Text auf Ihrer Webseite soll anklickbar sein?
2. Wohin soll der Link führen (URL)?

Alle Links auf einer Seite sind gleich gestaltet, normalerweise sind sie alle blau und unterstrichen. Mit Stylesheets können Sie diese Gestaltung ändern.

Stilistischer Tipp: Vermeiden Sie Formulierungen wie ?Klicken Sie hier, um zu Yahoo zu gelangen?. Die LeserInnen Ihrer Seite wissen, wie ein Link zu bedienen ist. Schreiben Sie einfach zuerst einen ganz normalen Satz, und verwandeln Sie dann ein geeignetes Wort in einen Link. Z.B. ?Ich empfehle Yahoo als Internet-Verzeichnis?.

Das zweite Beispiel in Tabelle 5 zeigt eine sogenannte "relative URL". Sie beginnt nicht mit http:// oder mailto:. Der Browser verwendet die URL des Dokuments, in dem sich der Link befindet, um die vollständige, "absolute URL" für den Link zu berechnen, wie in Abbildung 37 gezeigt.

Das Prinzip hinter relativen und absoluten URLs kennen Sie vielleicht schon von relativen und absoluten Pfadangaben. Relative URLs können auch Ordnernamen enthalten, und den speziellen Ordnernamen .. für den übergeordneten Ordner.

Die Verwendung von relativen URLs bringt folgenden Vorteil mit sich: Wenn die Website auf eine neue Adresse übersiedelt wird, funktionieren alle Links ohne Änderung weiterhin, wie Abbildung 39 zeigt.

Statt des Textes kann bei einem Link auch ein Bild stehen, Abbildung 40 zeigt den dazu notwendigen Code.

  <a href="home.htm">
  <img src="home.gif" alt="zurück zur Homepage" />
  </a>

Bei der Verwendung von Bildern als Link ist das alt-Attribut des Bildes besonders wichtig, um das Navigieren zu ermöglichen, falls das Bild nicht angezeigt werden kann, wie in Abbildung 41 gezeigt.

Noch ein stilistischer Tipp: Wenn Sie einen Link setzen, dann nutzen Sie die Chance, wirklich genau zu dem Dokument zu linken, das Sie referenzieren wollen. Ein Beispiel soll dies verdeutlichen: Wenn Sie zu einem bestimmten Artikel im Sport-Teil der Salzburger Nachrichten vom 1. April 2005 linken wollen, dann suchen Sie genau diesen Artikel aus der Website der Salzburger Nachrichten heraus, und verwenden Sie die URL dieses Dokuments für den Link.

Nur bei wenigen ? besonders schlecht gestalteten ? Webseiten geht das nicht weil Frames verwendet werden und das einzelne Dokument keine eigene URL hat. Websites die mit Frames gestaltet sind vergeben so also die Chance verlinkt zu werden und schmälern damit wiederum ihren PageRank bei Google, und die Chance gefunden zu werden.

[Bearbeiten] Anker

Sie können innerhalb der Webseite sogenannte ?Anker? setzen, die dann gezielt angesprungen werden können. Das ist besonders bei längeren Webseiten sinnvoll. Die ?Anker? heißen auf englisch ?Anchor? ? daher kommt auch der html-tag <a>. In deutschsprachigen Programmen wurden sie sehr unterschiedlich über­setzt ? z.B. heißen sie im deutschen Frontpage ?Text­marken?. So sieht ein Link zu einem Anker aus:

   <a href="#Bild1">das erste Bild</a>

So sieht der entsprechende Anker aus:

   <a name="Bild1"></a>

Wenn Sie wissen, dass in einer Seite draußen am Web ein Anker vorkommt, dann können Sie gezielt einen Link zu diesem Anker hin setzten: z.B. in der Seite http://webwelt.horus.at/html/forms/home.htmlgibt es einen Anker namens Beispiele. Die URL, die zum Anker zeigt ist: http://webwelt.horus.at/html/forms/home.html#Beispiele

[Bearbeiten] Gesamt-Struktur einer Webseite

Mit den bisher gezeigten HTML-Tags können Sie Webseiten erstellen, die von den meisten Browsern angezeigt werden. Diese Webseiten entsprechen aber noch nicht dem HTML-Standard. Eine korrekte HTML Seite enthält zusätzlich noch folgendes Grundgerüst.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
 <title>Titel der Seite</title>
 </head>
 <body>
 Hier die Tags die Sie schon kennen
 </body>
 </html>

Der <!DOCTYPE>-Tag muss ganz am Anfang stehen. Er gibt die Versionsnummer des verwendeten HTML-Standards an ? in diesem Fall XHTML 1.0. Der Rest des Dokuments befindet sich innerhalb des <html>-Tags. Innerhalb des <html>-Tags befindet sich genau ein <head> und genau ein <body>, es sind keine Wiederholungen erlaubt. Der <head> enthält Informationen über die Seite, aber keine direkt sichtbaren Elemente (siehe auch Kapitel 2.10). Der <body> enthält den eigentlichen Inhalt der Webseite. Alle bisher vorgestellten Tags sind nur innerhalb des <body> zu verwenden.

[Bearbeiten] Tags für den Head

Der <title>-Tag ist der wichtigste Tag im Head. Abbildung 43 zeigt das Ergebnis einer Abfrage in einer Suchmaschine. Woher kommt der Text, der hier angezeigt wird?

Die Suchmaschine liest den Titel und die Beschreibung aus der HTML-Seite aus:

 <title>Kurs Internet Seitengestaltung ? Wifi Salzburg, März 1999</title>
 <meta name="description"
       content="Projektarbeiten Aus dem Kurs Internet Seitengestaltung am Wifi Salzburg im März 1999." />
 <meta name="keywords" 
       content="HTML, Kurs, Webdesign, Webdesigner, Salzburg" />

Da die Meta-Keyword Tags sehr stark missbraucht wurden (irreführende keywords, z.B. Namen der Konkurrenzfirmen), werden sie seit dem Jahr 2002 von den meisten Suchmaschinen ignoriert.^[3]

Der Titel (<title>-Tag) einer Webseite ist weiterhin wichtig. Er wird auch für Favoriten/Lesezeichen verwendet. Der Titel muß also auch ohne die Seite verständlich sein. Achtung: Jede Seite sollte einen anderen Titel haben! Oft findet eine Suchmaschine mehrere Seiten einer Site, wenn alle denselben Titel haben kann man sie nicht unterscheiden.

Der <meta>-Tag hat noch verschiedene andere Anwendungsgebiete. So wird der <meta>-Tag dafür verwendet, das Characterset des Dokuments bekannt zu geben:

 <meta http-equiv="Content-Type" 
 content="text/html; charset=iso-8859-1" />

Eine Alternative zu iso-8859-1 wäre Unicode in der Variante utf8:

 <meta http-equiv="Content-Type" 
 content="text/html; charset=utf8" />

Die Angabe muss natürlich mit dem wirklich verwendeten Characterset (siehe Kapitel 2.1) übereinstimmen. Unicode/utf8 müssen Sie immer dann verwenden, wenn Sie Sprachen mit verschiedenen Zeichensätzen mischen, also z.B. auf ein und derselben Webseite sowohl Deutsch (westeuropäisch) als auch Polnisch (osteuropäisch) als auch Russisch (kyrillisch) verwenden. Wenn Sie nur westeuropäische Sprachen und Namen verwenden ist iso-8859-1 zu empfehlen, das spart ein paar Byte an Daten.

[Bearbeiten] Tabellen

Um eine Tabelle zu erzeugen müssen Sie die Tags <table>, <tr> und <td> richtig ineinander verschachteln.

<table border="1">
    <tr>    
      <td>Freitag</td>    
      <td>Samstag</td>    
      <td>Sonntag</td>
    </tr>
    <tr>    
      <td>lernen</td>   
      <td>lernen</td>    
      <td>lange schlafen</td>
    </tr>
</table>

Normalerweise hat eine Tabelle ein ganz regelmäßiges rechteckiges Gitternetz . Man kann auch nebeneinander liegende Zellen verbinden. Dies erreicht man mit dem Attribut colspan bzw. rowspan des <td>-Tags.

HTML-Tabellen wurden früher in Webseiten auch für das Layout der Seite verwendet, heute verwendet man für das Layout CSS-Stylesheets.

[Bearbeiten] Farben und Hintergrundbilder

Farben und Hintergrundbilder werden in XHTML mit Stylesheet gesetzt. (Nicht mehr wie in HTML mit Attributen des body-Tags oder dem <font>-Tag.). Mehr über Stylesheets erfahren Sie im Kapitel 3.

Tabelle 6: Farben und Hintergrundbilder im Stylesheets

In Webseiten erfolgte die Farb-Angaben früher mit einem Hexadezimalen r,g,b-Code. Dabei wird die Intensität von rot, grün und blau in hexadezimaler Schreibweise zwischen 00 (minimum) und FF (maximum) angegeben. (z.B. #000000 für schwarz, #FFFFFF für Weiss, #FF0000 für reines Rot, #00FF00 für reines Grün, #0000FF für reines Blau). In Stylesheets kann man statt dessen auch die Schreibweise rgb(10,2,120) verweden, um 10 Teile rot, 2 Teile grün und 120 Teile blau zu mischen. Jeder der drei Zahlen kann zwischen 0 und 255 sein. Für einige Farben kann man die englischen Farbwörter wie red, blue, black verwenden. In einem Webeditor wie Dreamweaver wäre die Farbauswahl etwas einfacher, wie in Abbildung 45 gezeigt.

Als ?Hintergrundbild? in einer Webseite kann jedes Bild in einem Web-geeigneten Dateiformat (gif, jpg, png) dienen. Das Bild wird ?gekachelt? ? es wird horizontal und vertikal so oft wiederholt, bis es die ganze Seite ausfüllt. In Abbildung 46 wurde ein Bild mit drei Zahnrädern als Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 46 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text ?wurde schon besucht? in der letzten Zeile ist kaum noch lesbar.

[Bearbeiten] Zusammenfassung

Sie haben den HTML-Code kennen gelernt. Und Sie haben mit diesem Code Ihre ersten Webseiten erstellt. Gratuliere! Im nächsten Schritt werden Sie noch wesentlich mehr Gestaltungsmöglichkeiten an die Hand bekommen, wenn Sie Stylesheets kennen lernen.

[Bearbeiten] Quellen

1. ↑ http://selfhtml.teamone.de
2. ↑ http://de.wikipedia.org/wiki/Rot-Gr%C3%BCn-Blindheit
3. ↑ hier fehlt die Quelle