HTML-Grundlagen

Von Stefan Bucher
Erstellt: 25.02.2003
Geändert: 18.12.2004

 

Inhalt

 

Grundlagen zum Erstellen von Web-Seiten

Was ist hinter der Oberfläche einer Web-Seite verborgen? Wie können Sie selber Web-Seiten erstellen? Wir lernen die Sprache des Webs kennen und erarbeiten die Grundlagen zum Gestalten von Webseiten.

HTML

Als man damit anfing, Texte für die Verbreitung via Internet zu schreiben, entwickelte man den sogenanten Hypertext und die Hypertext Markup Language (auf Deutsch: «Hypertext Beschreibungssprache») – HTML.

Mit HTML lassen sich Texte gliedern in Überschriften, Absätze, Listen und Tabellen. Eine Besonderheit von Hypertext ist die Möglichkeit, an eine andere Stelle innerhalb eines Dokuments oder an eine Stelle in einem anderen Dokument zu springen. Diese Verknüpfungen werden gesteuert durch Hyperlinks (oder einfach Links). Links sind heute das wichtigste Element zum Surfen im Web.

HTML entwickelte sich zu einem Standard in der Web-Programmierung. Aktuell sind die Versionen HTML 4.01 und XHTML 1.0. Mehr zu XHTML im Kapitel «Gültiger Hypertext».

HTML ist die Grundlage beinahe jeder Web-Seite. Abgespeichert werden Hypertext-Dokumente mit der Dateiendung «.html» (oder «.htm»).

Das HTML-Gerüst jeder Web-Site kann im Browser sichtbar gemacht werden. Dazu wählen Sie im Browser unter «Ansicht» «Quelle zeigen». Angezeigt wird dann der sogenannte HTML-Quelltext (auf Englisch: «Source Code»).

Praxis-Tipp: Womit HTML schreiben?
HTML ist reiner Text. Sie können deshalb HTML mit einem einfachsten Text-Editor («NotePad», «SimpleText») schreiben. Mehr Möglichkeiten bieten textbasierte HTML-Editoren. Sie enthalten Werkzeuge zum schnellen Einfügen häufig verwendeter Elemente. Sogenannte WYSIWYG-Editoren («What You See Is What You Get») erlauben das Gestalten von Web-Seiten, ohne sich um den Code zu kümmern. Diese Programme erzeugen den Code im Hintergrund, während die Anwender an der Oberfläche arbeiten.

Eine einfache HTML-Seite sieht so aus:

<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<p>Meine erste Webseite in HTML</p>
</body>
</html>

Die einzelnen Beschreibungen in Spitzklammern (<>) werden Tag genannt. Für jeden Tag wird ein Anfangs-Tag (zum Beispiel: <p>) und ein Schluss-Tag (</p>) gesetzt. Der Inhalt zwischen Anfangs- und Schluss-Tag erhält die entsprechenden Eigenschaften.

Tabelle einiger HTML-Tags:
<head></head> «Kopf»-Bereich des HTML-Dokuments
<title></title> Titel der Web-Seite
<body></body> Haupt-(Inhalt-)Bereich der Web-Seite
<h1></h1> steht für «header», Text wird als Überschrift der höchsten Gliederungsstufe dargestellt
<h2></h2> Überschrift eine Stufe tiefer als <h1>
<p></p> steht für «paragraph», auf Deutsch «Absatz»
<em></em> steht für «emphasis», Text erhält Betonung, wird meist kursiv dargestellt
<strong></strong> Text erhält starke Betonung, wird meist fett dargestellt
<ul>
<li></li>
</ul>
Erzeugt eine unnummerierte Liste mit Aufzählungspunkten

Hinweis: Eine umfassende Beschreibung aller HTML-Tags und eine Anleitung zum Selbsterstellen von HTML-Dateien finden Sie unter http://de.selfhtml.org.

Praxis-Tipp: Unterschiede je nach Browser
Nicht mit allen Browsern, nicht mit allen Versionen und nicht auf allen Btriebssystemen werden HTML-Dokumente genau gleich dargestellt. Es gibt unter Umständen grosse Differenzen. Das liegt einerseits an fehlerhaftem HTML-Code, andererseits an abweichenden Interpretationen der HTML-Tags von den verschiedenen Browsern. Es empfiehlt sich daher dringend, Web-Seiten auf verschiedenen Browsern (auch alten Versionen) und Plattformen zu testen.

Semantische Verwendung von HTML-Tags

HTML ist nicht ein Mittel zur visuellen Gestaltung. HTML ist Beschreibung («Markup») und HTML-Tags geben dem beschriebenen Text Bedeutung.

Zum Beispiel ist eine <h1>-Überschrift nicht einfach ein Titel in grossen, fetten Buchstaben, sondern steht für die oberste Stufe in einer logischen hierarchischen Gliederung.
Weitere HTML-Tags mit deutlichen semantischen Eigenschaften sind <strong> (starke Betonung), <blockquote> (zitierter Text), und <address> (Adressinformationen).

Werden HTML-Tages semantisch verwendet, enthalten Hypertexte auch für Maschinen lesbare Bedeutung. In Zukunft sollen in einem «semantischen Web» Informationen noch treffender bewertet und dadurch effizienter ausgetauscht werden können.

Der Tag für einen Link sieht so aus:

<a href="andereseite.html">Link</a>

Die Angabe «href="…"» ist ein sogenanntes Attribut zum HTML-Tag <a></a> (steht für «anchor», auf Deutsch «Anker», was Verknüpfung bedeutet). Als Wert des href-Attributs steht die URL des Dokuments, auf das verwiesen wird. Die URL verweist also an den genauen Ort, wo sich das angesteuerte Ziel-Dokument befindet. Entweder wird die gesammte URL (inklusive «http://» und Servername) oder die «relative» URL angegeben. Was «relativ» heisst, geht aus der folgenden Tabelle hervor. Relative URLs sind die Fälle 1 bis 3.

  Ort URL
1 Das Ziel-Dokument befindet sich im selben Verzeichnis, wie die Seite, auf der der Link steht. Die URL lautet nur auf den Namen des HTML-Dokuments (wie in unserem Beispiel «andereseite.html»).
2 Das Ziel-Dokument befindet sich in einem Unterverzeichnis (tieferere Hierarchiestufe). Die URL lautet auf «verzeichnis/andereseite.html».
3 Das Ziel-Dokument befindet sich in einem Verzeichnis höherer Hierarchiestufe. Die URL lautet auf «../andereseite.html» («../» weist auf die höhere Hirarchiestufe zurück).
4 Das Ziel-Dokument befindet sich auf einem anderen Web-Server im Internet. Die URL lautet auf «http://www.andererserver.com/andereseite.html».
5 Das Ziel ist nicht eine Web-Seite, sondern soll das Senden einer E-Mail ermöglichen. Die URL lautet auf «mailto:info@domain.ch».

Praxis-Tipp: HTML-Syntax
Auch HTML kennt Schreibregeln. Nach gültigem Standard müssen Tags und Attriute in Kleinbuchstaben geschrieben werden und Attribut-Werte in Anführungszeichen (" ") stehen. Beachten Sie auch das Kapitel «Gültiger Hypertext: Webseiten validieren» in diesem Tutorial.

Grafik

Der Tag zum Einfügen eines Bildes in eine Web-Seite sieht so aus:

<img src="einbild.jpg" width="100" height="70" alt="Ein Bild" />

Das img-Tag hat keinen Schluss-Tag. Im Attribut «src» steht – wie beim Link – die komplette oder die relative URL der Datei, in diesem Fall eine Grafik-Datei.

Zwei Grafik-Formate sind im Web gebräuchlich: GIF und JPEG.

GIF-Bilder werden mit bis zu 256 Farben abgespeichert. Das ist genug für Texte und Grafiken aber meist zu wenig für Fotos. GIF erlaubt Animationen und kann transparente Flächen enthalten. Dateien im GIF-Format haben die Endung «.gif».

JPEG-Bilder können mit bis zu 16,7 Millionen Farben gespeichert werden. Das JPEG-Format eignet sich deshalb optimal für Fotos. Wählbar sind verschiedene Komprimierungsstufen, die die Dateigrösse bestimmen. Sie haben auch Einfluss auf die Bildqualität. Dateien im JPEG-Format haben die Endung «.jpeg» oder «.jpg».

Jede Grafik sollte mit den Attributen «width», «height» und «alt» versehen werden. Die Angaben «width» und «height» geben Breite und Höhe des Bildes in Pixeln an. «alt» steht für «Alternative Bildbeschreibung» und sollte einen Text enthalten, der angezeigt wird, falls ein Browser das Bild nicht darstellen sollte.

Eine anschauliche und unterhaltsame Art, sich mit den grundlegenden HTML-Tags etwas vertraut zu machen, ist der externlink.gif HTML-Builder.

Multimedia

Es gibt zahlreiche andere Datei-Formate, die in eine Webseite eingebunden werden können:

Flash («.swf») ist ein Multimedia-Format, mit dem sich Animationen und ganze Websites erzeugen und anzeigen lassen.

Video kann in verschiedenen Formaten (zum Beispiel «.mov», «.avi») in Webseiten eingebunden werden. Ebenso Audio also Ton-Dateien («.wav», «.mp3»).

In diesem Tutorial wird nicht weiter auf Multimedia-Formate eingegangen.

Tabellen

Um Informationen in Tabellenform wiederzugeben, hält HTML spezielle Tags bereit.
Eine Tabelle besteht aus Spalten und Reihen. So entstehen Tabellen-Zellen.

Der HTML-Code einer einfachen Tabelle sieht so aus:

<table border="1">
<tr>
<td>Reihe 1, Zelle 1</td>
<td>Reihe 1, Zelle 2</td>
<td>Reihe 1, Zelle 3</td>
</tr>
<tr>
<td>Reihe 2, Zelle 1</td>
<td>Reihe 2, Zelle 2</td>
<td>Reihe 2, Zelle 3</td>
</tr>
</table>

Und das ist das Resultat im Browser:

Reihe 1, Zelle 1 Reihe 1, Zelle 2 Reihe 1, Zelle 3
Reihe 2, Zelle 1 Reihe 2, Zelle 2 Reihe 2, Zelle 3

Der HTML-Tag <table></table> umschliesst die gesamte Tabelle. Das Attribut «border» gibt die Stärke der Umrandung an. Das Tag <tr></tr> steht für eine Reihe. Innerhalb der Reihe werden Zellen mit dem <td></td>-Tag notiert.

Das Attribut «border» kann weggelassen werden, dann gilt der Wert 0 (Null). Ohne Umrandung werden Tabellen so «unsichtbar».

Tabellen werden im Webdesign häufig eingesetzt, um eine Zellenstruktur über die ganze Webseite zu schaffen. Aus unserem Tabellen-Beispiel lässt sich einfach ein dreispaltiges Seiten-Layout erstellen.

Beispiel:externlink.gif Dreispaltiges Tabellen-Layout

Praxis-Tipp: Webdesign ohne Tabellen
Moderne Websites werden ohne Tabellen als Layout-Raster erstellt. Nimmt man es mit den Web-Standards genau und beachtet man die Anforderungen für barrierefreie Wedseiten, ist die Verwendung von Tabellen fürs Layout nicht zulässig. HTML ist nicht für die grafische Gestaltung gemacht. Entwicklern bietet sich als Mittel für das Seitenlayout CSS an (siehe unten). Weitere Information lesen Sie auf CSS4You.de im Artikel «Layouten ohne Tabellen».

Frames

Wir haben im Kapitel «Internet-Grundlagen» festgestellt: Jedes Dokument hat eine einzigartige Adresse im World Wide Web. Das heisst, dass Sie im Browser jedes Web-Dokument einzeln anzeigen können, wenn Sie die entsprechende URL aufrufen.

Von der Regel «Eine URL für ein Web-Dokument» weicht eine Webseite ab, die Frames verwendet.
Frames heisst auf Deutsch Rahmen. Das Browserfenster stellt normalerweise einen Rahmen dar, in dem die Web-Dokumente angezeigt werden. Durch die Verwendung von Frames, lässt sich ein Browserfenster in mehrere Rahmen aufteilen. In jedem dieser Rahmen kann dann eine eigene Web-Datei dargestellt werden.

Beispiel:externlink.gif Frames

In unserem Beispiel wird das Browserfenster in drei Frames aufgeteilt. In jedem Frame wird der Inhalt einer einzelnen HTML-Datei dargestellt. In der Adresszeile des Browsers sehen wir die URL einer vierten Datei namens «frameset.html».

Hier wird der Verstoss gegen die «Eine URL für ein Web-Dokument»-Regel sichtbar. Auf eine URL bekommen wir drei sichtbare Dokumente plus ein «unsichtbares» Dokument.

Die Datei «frameset.html» enthält selbst keinen Inhalt. Der HTML-Code in «frameset.html» steuert die Aufteilung in Frames und den Aufruf der drei einzelnen Web-Seiten. Der Frameset-Code sieht so aus:

<frameset rows="120" cols="140,*" frameborder="yes" border="1">
<frame name="leftFrame" scrolling="no" noresize src="seite_a.html">
<frameset rows="100,*" frameborder="yes" border="1" framespacing="1">
<frame name="topFrame" noresize scrolling="no" src="seite_b.html">
<frame name="mainFrame" src="seite_c.html" scrolling="auto">
</frameset>
</frameset>

Hier soll nicht weiter auf Frames eingegangen werden. Die Vor- und Nachteile können nicht weiter dargelegt werden. Als Hinweis empfehle ich den Artikel «Diese Fehler sollten Sie vermeiden» (http://www.drweb.de/frames/frames_fehler.shtml) im Web-Magazin Dr. Web.

Stylesheets

Bis jetzt haben wir HTML-Tags kennengelernt, mit denen wir Hypertext gliedern können.

Wir haben gelesen, dass HTML kein Mittel zur grafischen Gestaltung ist. Für Layout, Stil und Farbe setzen wir CSS (Cascading Style Sheets) ein. CSS ist ein Standard zur Formatierung von HTML.

Es gibt drei Möglichkeiten, wie Sie HTML-Elementen CSS-Stildefinitionen zuweisen können:

CSS-Stildefinitionen im Head-Bereich einer HTML-Datei sehen so aus:

<style type="text/css">
<!--
a  { font-family:verdana;font-weight:bold;font-size:12px;color:#FF4500;}
h2 { font-family:verdana;font-size:16px;color:#000000;}
p  { font-family:verdana;font-size:12px;color:#667A81;}
-->
</style>

Eingeschlossen vom <style></style>-Tag werden in diesem Beispiel die Stilvorgaben von drei HTML-Elementen definiert:

Allen «a»-Elementen (also Hyperlinks/Anker) wird die Schriftart («font-family») Verdana zugewiesen. Weiter wird die Schriftstärke («font-weight») auf fett («bold») gesetzt. Die Schriftgrösse («font-size») beträgt 12 Pixel und die Farbe wird Orange (Farbangabe als Hex-Wert).

Ebenso werden die HTML-Elemente «h2» (Überschrift 2) und «p» (Absätze) vordefiniert. Alle diese Definitionen gelten für die gesamte HTML-Datei.

Praxis-Tipp: Farbwahl
Natürlich müssen Sie die Hex-Farben-Werte nicht auswendig lernen. Es gibt Online-Hilfsmittel zum Auswählen der Farben für Webseiten. Ein solches Werkzeug ist der externlink.gif Farben-Wähler. Wenn Sie mit einem HTML-Editor arbeiten, nimmt das Programm Ihnen die Farbcodierung ab.

Sie können für mehrere HTML-Seiten die selben Stildefinitionen verwenden, ohne dass Sie diese in jedem Dokument einzeln angeben müssen. Dazu verweisen Sie aus der HTML-Datei auf eine externe Stylesheet-Datei. Der Verweis im HEAD-Bereich der HTML-Datei sieht so aus:

<link rel="stylesheet" href="style_datei.css" type="text/css">

Das externe Stylesheet dieser Seite können Sie hier anschauen:externlink.gif tutorial_style.css.

Schliesslich können Sie einzelnen HTML-Tags im Attribut «style» Stilvorgaben zuweisen. Für einen Absatz in der Schrift Georgia, fett und in roter Schriftfarbe verwenden Sie diesen Code:

<p style="font-family:Georgia;font-weight:bold;color:#FF0000;">Dieser Absatz erscheint in roter Farbe.</p>

Und das zeigt der Browser an:

Dieser Absatz erscheint in roter Farbe.

Praxis-Tipp: Schriftwahl
Welche Schrift für Ihre Webseite? Die meisten Browser benutzen als Standard-Schrift Times. Es hat sich herausgestellt, dass Times als Web-Schrift ungeeignet ist. Die beste Lesbarkeit bietet gemäss Untersuchungen die Schrift Verdana. Sie ist deshalb heute im WWW weit verbreitet.

Layout

Als Webseiten-Layout haben sich folgende Formen durchgesetzt: Eine, zwei oder drei Spalten mit Kopf- und Fussbereich mit fester oder dynamischer Breite.

Zum Erstellen von Seitenlayouts in einer dieser Varianten gibt es im Internet praktische Hilfsmittel.

Layout-o-Matic. Bestimmen Sie, ob sie ein, zwei oder drei Spalten wünschen, geben Sie Massangaben in Pixeln oder Prozent an und lassen Sie sich das fertige Layout anzeigen («View») oder laden Sie es in einer HTML-Datei herunter («Download»).

CSS-Creator.com. Erstellen Sie ein dreispaltiges Layout, wahlweise über die ganze Seite, links- oder mitteausgerichtet, bestimmen Sie Massangaben und Farben und klicken Sie auf «Generate Layout». Das Resultat können Sie in einer HTML- und einer CSS-Datei herunterladen.

Fertige Layouts können Sie auch als so genannte Templates bei intensivstation.ch herunterladen.

Das HTML-Tag <div></div> erzeugt Blöcke, die mittels CSS-Stilangaben positioniert und in Grösse und Farbe gestaltet werden können. Fassen Sie Teile des Inhalts ihrer Webseite durch <div>…</div> zusammen, können Sie diesen Block beispielsweise als Seitenspalte positionieren.

Praxis-Tipp: Grössenangaben in Pixel oder Prozent
Die Grössen von HTML-Elementen können Sie einerseits in Prozentwerten angeben. 100% entspricht dem gesamten zur Verfügung stehenden Platz. Die Elemente passen sich so dynamisch der Grösse des Browserfensters an. Geben Sie Grössenwerte andererseits in Pixeln (Bildpunkten) an, haben Elemente fixe Grössen. In einem kleinen Browserfenster können so Inhalte verborgen bleiben.

Hinweis: Umfassende Anleitungen und Tipps zum Einsatz von CSS finden Sie unter http://barrierefrei.e-workers.de.