Handbuch Webdesign: HTML

Handbuch Webdesign HTML

In den vergangenen Kapiteln haben Sie gelernt, die Inhalte für eine Webseite auszuwählen. Sie haben sie auf die einzelnen Seiten verteilt und die Navigation ausgearbeitet. In diesem Kapitel lernen Sie nun, den Inhalten eine Struktur zu geben und damit ein Gerüst für die fertigen Seiten zu schaffen. An dieses Gerüst werden später das Aussehen (mit Hilfe von CSS) und alle interaktiven Dinge (wie Formulare, Gästebücher, Suchen-Felder usw.) „angehängt“.

Die Sprache, in der Sie den Webbrowsern ihre Struktur mitteilen, heißt HyperText Markup Language, kurz HTML. HTML ist eine Auszeichnungssprache, d.h. HTML-Dokumente werden geschrieben - und nicht programmiert Grundlage der Sprache sind HTML-Tags.

Da Content-Management-Systeme und Editoren einen großen Teil der Arbeit für Sie übernehmen können, werden in diesem Buch nur wichtige Konzepte der Sprache vorgestellt, und nicht jeder Befehl bis ins Detail erläutert. Wenn Sie tiefer in die Materie einsteigen wollen, werfen Sie einen Blick auf das

   

Wikibook: Websiteentwicklung: XHTML

und die beste deutschsprachige Webseite zum Thema: selfhtml.

Geschichte und Standards

Die erste Version von HTML entstand schon 1992/1993 und damit zeitgleich zum  World Wide Web (WWW), dass heute zumeist mit dem Internet gleich gesetzt wird. Während der letzten zwanzig Jahre haben sich sowohl HTML als auch das WWW stark weiterentwickelt. Dabei sind für Webdesigner vor allem zwei Dinge entscheidend:

1. die Konkurrenz zwischen verschiedenen Webbrowsern um Marktanteile, umgangssprachlich auch als „ Browserkrieg“ bezeichnet,
2. sowie die Arbeitsweise des World Wide Web Consortiums (W3C) als „Hüter“ des HTML-Standards.

Probleme

Der erste Faktor, die Browserkonkurrenz, führte dazu, dass nahezu jeder Browser versucht, jede Internetseite irgendwie darzustellen, solange sie irgendwie vage als HTML-Dokument geschrieben ist. Daher liegt die Zahl der eigentlich ungültigen, d.h. nicht standard-konformen Webseiten sehr hoch, möglicherweise höher als diejenige der gültigen.

Zum zweiten arbeitet das W3C wesentlich langsamer, als sich die Möglichkeiten des WWW erweiterten. Daher gingen die Browser-Hersteller dazu über, HTML auf eigene Faust zu ergänzen. Dieses führte (und führt), je nach Browser-Hersteller, zu unterschiedlichen Lösungen für die selbe Ergänzung. Hatten genügend Browser eine Ergänzung eingeführt, so wurde eine Lösung in den nächsten HTML-Standard aufgenommen. Gleichzeitig wurde und wird nicht jeder HTML-Standard von jedem Browser vollständig unterstützt.

Als Webdesigner müssen sie daher den Markt beobachten und festlegen, welche Browser, und welche ihrer Versionen sie unterstützen wollen, damit möglichst viele ihrer Besucher die Seite ohne Probleme betrachten können. Zu beachten ist, dass sich Anteile in ihrer Zielgruppe beträchtlich von denen der Allgemeinheit unterscheiden können.

XHTML

Bei XHTML handelt es sich um eine Portierung von HTML in XML-kompatible Syntax, daher das X am Anfang.

Die aktuellen Browser stellen sowohl HTML als auch XHTML dar. Die Beispiele in diesem Kapitel verwenden (derzeit) noch XHTML, bezeichnen es aber einfach als HTML .

Weiterführende Informationen zu  HTML und  XHTML finden Sie in der Wikipedia.

Die Standards Anfang 2013

Anfang 2013 lassen sich drei HTML-Standards unterscheiden:

1. HMTL 4.01 von 1999. Über zehn Jahre alt, entspricht dieser Standard zwar nicht mehr den heutigen Anforderungen, ist aber so etwas wie der kleinste gemeinsame Nenner, es sei denn Sie nutzen
2. XTHML 1.0. (…)
3. HTML 5 ist zur Zeit noch kein festgelegter Standard, die Weiterentwicklung findet in den beiden konkurrierenden Gruppen HTML 5 und HTML Living Standard statt.

Konzepte

Auch wenn es verschiedene Standards gibt, haben sie doch einige Konzepte gemein. Diese müssen Sie kennen, bevor es um den Aufbau der Seite geht.

Tags

Die gewünschte Strukturierung der Inhalte wird durch HTML-Tags erreicht. Der Name eines Tags ist eine Abkürzung der englischen Bezeichnung. Ein Absatz (engl. "paragraph“) wird somit durch ein p symbolisiert. Damit die Browser HTML-Tags erkennen können, stehen sie immer zwischen spitzen Klammern (bzw. den „kleiner als"- und „größer als“-Symbolen): <p> ist also der HTML-Tag für einen Absatz. Damit der Browser erkennt, wann ein Inhaltselement zu Ende ist, muss der Tag geschlossen werden, in dem ein Schrägstrich / vor den Namen gesetzt wird: </p>.

Ein vollständiger Absatz wird also folgendermaßen ausgezeichnet:

   <p>Dieser Text ist als (ein) Absatz ausgezeichnet!</p>

Für korrektes („valides“) HTML muss ein Tag, der geöffnet wurde, auch wieder geschlossen werden. Umgekehrt darf kein schließender Tag vorkommen, ohne dass vorher einer geöffnet wurde.

Bei manchen Tags steht nichts zwischen öffnendem und schließendem Tag, zum Beispiel bei einem Zeilenumbruch (engl. "line break", <br>). In diesem Fall werden beide Tags, der Übersicht halber, zusammengefügt, indem ein Leerzeichen und ein Schrägstrich / am Ende des Namens hinzugefügt werden: statt <br> </br> also nur <br />.

Tags lassen sich in zwei Gruppen einteilen:

• blockbildende Tags', von denen der Browser jedes als eigenen Absatz behandelt und
• in-line Tags, die innerhalb von blockbildenden Tags vorkommen und Sätze, Satzteile oder Wörter auszeichnen

Die blockbildenden Tags werden wir nutzen, um unsere Seite quasi aus Blöcken zusammenzubauen. In-line Tags nutzen wir dann später für die Details.

Attribute

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).

   <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>

Abbildung 28: Fehler im HTML-Code: Anführungszeichen vergessen

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.

Zeichenreferenzen

Damit ein Browser nicht bei jedem '<' oder '>' einen Tag vermutet - z.B. wenn Sie Ausdrücke wie x < 1 darstellen wollen - müssen diese Zeichen im Dokument maskiert werden. Dazu nutzen Sie Zeichenreferenzen (engl.: character entities). Eine Zeichenreferenz besteht aus der Form &+Name+;. Für die häufigsten Zeichen ist der Name wiederum die Abkürzung des englischen Wortes:

Gewünschtes Zeichen	engl. Name	Zeichenreferenz
<	lesser than	&lt;
>	greater than	&gt;

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).

Gewünschtes Zeichen	Zeichenreferenz
Ä	Ä
ä	ä
ß	ß
€	€
©	©

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

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 Struktur 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.

Kompatibilität

Tags, die ein Browser nicht kennt, werden ignoriert - es gibt keine Fehlermeldungen. Wenn das W3C in einer zukünftigen Version 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 hüpfend dargestellt und in älteren ignoriert.

Code	Ein älterer Browser interpretiert das als:
<p>Dies ist meine erste <jump>supercoole</jump> Webseite!!!! </p>	<p>Dies ist meine erste supercoole Webseite!!!!</p>

Abbildung 29: Neue HTML-Tags und Kompatibilität mit alten Browsern

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.

Schlecht	Besser
<p>Zu den hüpfenden Terminen sind noch Plätze im Kurs frei: </p> <ul> <li><jump>Montag</jump> <li>Dienstag <ul>	<p>Zu den markierten Terminen sind noch Plätze im Kurs frei</p> <ul> <li><jump>Montag *</jump> <li>Dienstag <li>
In älteren Browsern geht die wichtigste Information verloren!	Durch das Einfügen des * ist auf allen Browsern erkennbar zu welchen Terminen noch Plätze frei sind.

Abbildung 30: Vorsichtiger Einsatz von neuen HTML-Tags

Kommentare

Es ist möglich, in HTML-Dateien Kommentare einzufügen. Diese werden im Browser nicht angezeigt. Sie stehen aber im Quelltext der Seite. In Kommentaren sollte also nur Dinge stehen, die auch öffentlich seien dürfen - für Login-Informationen sind Kommentare definitiv der falsche Platz.

<!-- Dieses ist ein Kommentar-Beispiel. Bitte die Zeichen beachten, in die diese Sätze eingeschlossen sind -->

Kommentare werden oft dazu genutzt, um zu Testzwecken bestimmte Teile eines Dokuments ausblenden zu können, ohne sie aus der Datei löschen zu müssen.

Struktur

Ein HTML-Dokument besteht aus drei Teilen:

1. der Deklaration des Dokumententyps (engl. "doctype“)
2. dem Kopf der Seite mit den Metadaten über die Seite selbst (engl. "head“)
3. dem Körper der Seite mit dem Inhalt (engl. "body“)

Die letzten beiden Teile, "head" und "body", werden von einem <html>-Tag umschlossen. Keiner der Teile darf sich wiederholen oder weggelassen werden.

Beispiel:

 <!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" lang="de">
 <head>
 <title>Titel der Seite</title>
 </head>
 <body>
 Hier steht der Inhalt.
 </body>
 </html>

Abbildung 42: Grundstruktur eines HTML-Dokuments

Doctype

Der <!DOCTYPE>-Tag steht am Anfang und gibt die Dokumenttypdefinition (DTD) an.

Je nach verwendeter Version von HTML oder XHTML ist ein anderer <!DOCTYPE> zu verwenden:

Version (Variante)	DOCTYPE
HTML 5	<!DOCTYPE HTML>
HTML 4.01 (strict)	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 (strict)	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Abbildung 42a: Einige neuere <!DOCTYPE>

In der Praxis kümmert sich das Content-Management-System oder der WYSIWYG-Editor um diese Angabe. Sollten Sie eine Webseite per Hand schreiben, sollten Sie sich für eine Version entscheiden und den <!DOCTYPE> per copy&paste einzufügen. Weitere Informationen und ältere <!DOCTYPE> finden sich in der Wikipedia und bei selfhtml.

Metadaten

Der Kopf ("head") einer HTML-Datei beinhaltet die Metadaten, also die Daten über das Dokument und den Inhalt selbst. Die meisten dieser Informationen werden dem Betrachter der Seite nicht angezeigt.

<head>
 <title>Handbuch Webdesign: Eine Beispielseite</title>
 <meta name="description"
       content="Dient zur Verdeutlichung, wie Metadaten in eine HTML-Datei eingebunden werden." />
 <meta name="keywords" 
       content="HTML, Kurs, Webdesign, Webdesigner" />
</head>

Für eine valide HTML-Datei muss ein <title>-Tag vorhanden sein. Der Browser zeigt ihn im Fenster oder Tab und in den Favoriten/Lesezeichen an, Suchmaschinen in ihrer Ergebnisliste. Der Titel muß also ohne die Seite verständlich sein. 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.

Da die "meta-keywords" sehr stark missbraucht wurden (irreführende keywords, z.B. Namen der Konkurrenzfirmen), werden sie seit Jahren von den meisten Suchmaschinen ignoriert.

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

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

Unicode/utf8 ist das Standard-Charset im heutigen WWW, weil es erlaubt, verschiedene Zeichensätze, also z.B. Deutsch (westeuropäisch), Polnisch (osteuropäisch) und Russisch (kyrillisch) auf ein und derselben Webseite verwenden. Bei älteren Webseiten stößt man noch auf die früher verwendeten Zeichensätze wie 'iso-8859-1, bei der Erstellung von neuen Webseiten sollten Sie nur utf8 nutzen.

Inhalt

Der <body> enthält den eigentlichen Inhalt der Webseite.

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

Normaler Textabsatz	<p>Text text text, text text. Text text text, text text. Text text text, text text. Text und text text, text text.</p>
Haupt-Überschrift (1. Ebene)	<h1>Überschrift</h1>
Unter-Überschrift (2. Ebene)	<h2>Überschrift</h2>
Unter-Überschrift (3. Ebene)	<h3>Überschriftstext</h3>
Block-Zitat (eingerückt)	<blockquote>Alle meine Entchen schwimmen auf dem See</blockquote>

Tabelle 1: Blockbildende Tags

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

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

Der Browser stellt zwischen den blockbildenden Tags jeweils einen Abstand dar. Dieser kann per CSS verändert oder abgeschafft werden.

Die „typische“ Struktur

Auch wenn Webseiten noch so unterschiedlich aussehen, lässt sich ein typisches Grundgerüst zeigen:

• oben stehen Name und Logo der Seite
• für die Navigation sind eine oder mehrere Listen vorhanden, oft unterhalb des Logos oder an einer der beiden Seiten
• auf der anderen Seite findet sich oft ein vermischter Bereich mit Links zu anderen Seiten usw.
• in der Mitte der Seite steht der eigentliche Inhalt
• am unteren Ende finden sich notwendige, aber nebensächliche Links auf Impressum, Datenschutz und anderes

Die Inhalte

Text auszeichnen

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

betonter Text	Eine <em>wichtige</em> Sache
besonders betonter Text	und eine <strong>besonders wichtige</strong> Sache
Unterstrichener Text	Dafür gibt es zwar einen Tag, Sie sollten ihn aber nicht verwenden, denn unterstrichener Text wird zu leicht mit einem Link verwechselt.

Tabelle 2: Inline-Tags

Diese inline-Tags können ineinander verschachtelt werden:

   <p>Absatz mit 
   <strong>fett und <em>fett-kursiv</em></strong> ist in Ordnung </p>

Den Tag, den man zuletzt geöffnet hat, schließt man zuerst.

Bilder

Wenn in einer Webseite Bilder verwendet werden, so sind diese jeweils als eigene Datei gespeichert und werden im Dokument nur eingebunden. Wenn Sie eine gesamte Webseite speichern wollen, müssen Sie aufpassen, ob die Bilder mit abgespeichert wurden! Falls die Bilder in einem Unter-Ordner gespeichert waren, muss auch diese Ordnerstruktur erhalten bleiben.

Bild	<img src="neu.gif">
Bild mit Ersatztext (für Blinde, oder für den Fall, dass das Bild nicht angezeigt werden kann)	<img alt="neu" src="neu.gif">
Bild mit Größenangabe (beschleunigt in manchen Browsern das Layout der restlichen Seite)	<img width="10" height="5" src="neu.gif">

Tabelle 3: Varianten des img-Tags

Bild-Dimension

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

Kleiner dargestellt

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.

Bilder und Layout

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 setzen, und den Absatz dann z.B. zu zentrieren:

Bildformate

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

gif	Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). Ein animiertes Gif enthält mehrere Bilder, die der Reihe nach angezeigt werden (Daumenkino). Besonders geeignet für Bilder mit klaren Kanten, einfärbigen Flächen, wenigen Farben, z.B. Comics, Logos.
jpg	Millionen von Farben, variable Kompression, keine Transparenz. Besonders geeignet für Bilder mit Farbverläufen, z.B. Photos.
png	Nachfolge-Format für gif, Alpha-Transparenz, wird noch nicht von allen Browsern unterstützt.

{{

Tabelle 4: Bildformate im Vergleich

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.

Links

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 Wikibooks-Seite einen Link setzen, Sie können aber nicht von der Wikibooks-Seite zu Ihrer Seite einen Link setzen. 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?

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

Link zu einer Seite draußen am Web	Suchmaschine <a href="http://www.altavista.com">Alta Vista</a>
Link zu Webseite im selben Ordner	<a href="seite2.htm">mehr</a>
Link zu E-Mail Adresse	<a href="mailto:aa@bb.cc">Mail</a>
Bild statt Linktext	<a href="home.htm"><img src="home.gif" alt="Home" /></a>

Tabelle 5: der a-Tag für Hyperlinks

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.“

Relative URLs

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.

URL des HTML-Dokuments	http://www.meinefirma.at/index.htm
relative URL in diesem Dokument	seite2.htm
berechnete absolute URL	http://www.meinefirma.at/seite2.htm

Abbildung 37: Umrechnung einer relativen URL in eine absolute URL

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.

URL des HTML-Dokuments	http://www.meinefirma.at/prod/tee.htm
relative URL in diesem Dokument	../kontakt/mail.htm
berechnete absolute URL	http://www.meinefirma.at/kontakt/mail.htm

Abbildung 38: Umrechnung einer relativen URL mit ".." in eine absolute URL

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.

URL des HTML-Dokuments	http://www.neuefirma.de/prod/tee.htm
relative URL in diesem Dokument	../kontakt/mail.htm
berechnete absolute URL	http://www.neuefirma.de/kontakt/mail.htm

Abbildung 39: relativer Link nach der Übersiedelung auf eine neue Adresse

Bild als Link

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>

Abbildung 40: Bild als Link

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.

Deep Link

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.

Frames verhindern Deep Links

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.

Anker

Sie können innerhalb der Webseite sogenannte Anker (engl. anchor, <a>) setzen, die dann gezielt angesprungen werden können. Das ist besonders bei längeren Webseiten sinnvoll.

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 auf diesen Anker setzen.

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>

Abbildung 44: HTML-Code für eine Tabelle

Zellen verbinden

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.

	Obst		Gemüse
	Äpfel	Birnen	Lauch	Kohl
Q1	10	3	3	30
Q2	8	2	0	30
Q3	9	1	30

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

Kein HTML

• Farben und Hintergrundbilder gehören zum Aussehen einer Seite und werden daher im CSS definiert,
• ebenso die Positionierung (absolut, relativ) der Elemente,
• und Dinge wie Schriftgröße, -art usw.

Veraltete Tags

In den verschiedenen Versionen von HTML wurden Tags nicht nur hinzugefügt, sondern auch als veraltet (engl. "deprecated") gekennzeichnet. Hier die wichtigsten, die Ihnen begegnen können. Sie selbst sollten diese Tags nicht nutzen!

• <i> Kursiver Text (engl. "italic"), ersetzt durch: hervorgehobenen Text (engl. "emphasized", <em>)
• <b> Fetter Text (engl. "bold"), ersetzt durch: besonders hervorgehobenen Text (engl. "strong", <strong>)
• <font> Schriftart -farbe, -größe usw., ersetzt durch: CSS

Zusammenfassung

Sie sollen in diesem Kapitel gelernt haben:

• was für eine Art Sprache HTML ist und wofür sie eingesetzt wird.
• wie sich HTML von XHTML unterscheidet.
• was Tags sind und in welche beiden Gruppen sie eingeteilt werden können.
• wie ein HTML-Dokument aufgebaut ist.
• wie eine Webseite für gewöhnlich strukturiert wird
• wie sich einzelne Elemente eines Dokumentes sinnvoll auszeichnen lassen
• was Sie nicht mit HTML sondern durch CSS erreichen sollten

Übung (veraltet)

Wikiversity

Folgende Übungen sind zu dieser Buchseite verfügbar:

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