Matthias Lipp

Einführung in HTML

Diese Einführung in HTML wurde zur Vorlesung Software Engineering Praxis der Sektion Angewandte Informationsverarbeitung im Sommersemester 1998 erstellt. Sie soll lediglich einen ersten Überblick über Aufbau und Fähigkeiten von HTML geben. Insbesondere stellt sie KEINE erschöpfende Auskunftsquelle über alle möglichen Tags von HTML dar.

Eine detaillierte Übersicht über die Feinheiten von HTML bietet z.B. SELFHTML (siehe Anhang).

1 Einführung

HTML (Hypertext Markup Language) ist eine Abart von SGML (Structured Generalized Markup Language). HTML ist eine Sprache zur Strukturierung von Text und zur Definition von Hyperlinks. HTML ist also geeignet zur Darstellung von:

Textstrukturen (Kapitel, Absätze)
Verweise - sowohl innerhalb eines Dokuments als auch zwischen Dokumenten.
Einbindung von Bildern

HTML ist weder eine Textverarbeitung noch ein DTP-Tool im Sinne von WYSIWYG (What You See Is What You Get). HTML definiert nur in den Text eingebettete Anweisungen, die vom Browser zu interpretieren sind. HTML kann deshalb auch als embedded language oder Seitenbeschreibungssprache bezeichnet werden (Die neueren Entwicklungen gehen aber zunehmend in Richtung der direkten Einflußnahme auf das Endergebnis).

1.1 Tags als Beschreibungsmittel

HTML ist also "gewöhnlicher" Text mit eingebetteten Informationen über Strukturen, Bilder, Links usw. Diese Informationen werden durch sogenannte Tags dargestellt. Ein Tag wird durch die umgebenden spitzen Klammern charakterisiert.

Tags kommen im allgemeinen paarweise vor, als Start- und Endtag. Dieser wird durch einen "/" charakterisiert. Der zu <TAG> gehörende Endtag heißt also </TAG>.Dabei gilt die Anweisung des Tags gerade für den zwischen Start- und Endtag stehenden Text. Dieser kann selbstverständlich wiederum Tags enthalten (Schachtelung). Beispielsweise ergibt:

<b> Das ist fett gedruckter Text <i> und das fetter, kursiver Text </i> </b>

Das ist fetter Text und das fetter kursiver Text.

Das Start-Tag kann dabei noch zusätzliche Attribute haben, die gewisse Optionen beschreiben. Das Endtag hat nie Attribute. Nicht alle Tags haben ein korrespondierendes Endtag. Tags sind case-insensitiv.

1.2 Zeichensatz

HTML kennt zunächst nur den ASCII-Zeichensatz. Umlaute, Klammern und sonstige Sonderzeichen (wie etwa die spitze Klammer) haben teilweise Sonderbedeutung bzw. sind unbekannt und müssen deshalb umschrieben werden. Beispielsweise wird ein spitzes Klammerpaar durch < > erzeugt. Ein "ü" wird erzeugt durch ü . Eine Liste mit den wichtigsten Umschreibungen findet sich im Anhang.

1.3 Form - Inhalt - Graphik - Lesbarkeit

Bei der Erstellung von HTML-Dokumenten sind drei Komponenten von Interesse:

Inhalt
Graphik/Design
Technik

Zu gewissen Teilen ergibt sich dabei ein Zielkonflikt. Beispielsweise gehen graphische Gestaltungen oft auf Kosten der Geschwindigkeit, der Plattformunabhängigkeit oder der Lesbarkeit in nicht graphikfähigen Browsern. Ein gutes HTML-Dokument sollte einen Mittelweg gehen.

2 Das Grundgerüst eines HTML-Dokuments

Ein HTML-Dokument beginnt und endet mit <HTML> und </HTML> und besteht aus zwei Teilen, Header und Hauptteil. Im Header (charakterisiert durch den Tag <HEAD>)stehen Informationen wie Titel, Autor oder Schlüsselbegriffe. Der Hauptteil (charakterisiert durch den Tag <BODY>) enthält den eigentlichen HTML-Code. Die prinzipielle Struktur sieht also folgendermaßen aus:

<HTML>
<HEAD>
<TITLE>
Titel des Textes
</TITLE>
</HEAD>
<BODY>
HTML-Text...
</BODY>
</HTML>

Der <TITLE>-Tag bestimmt den Titel eines Dokuments. Dabei gilt der gesamte Text zwischen <TITLE> und </TITLE> als Titel und wird etwa von Netscape in der Kopfzeile des Fensters dargestellt. Jedes Dokument sollte aus Übersichtlichkeitsgründen einen Titel haben.

3 Einfache Strukturierungselemente

3.1 Überschriften

HTML kennt sechs Überschriftenebenen. Diese werden durch die Tags <H1> bis <H6> repräsentiert. Die Darstellung der Überschriften bleibt dem Browser überlassen. Zu einem öffnenden Tag gehört ein schließender. Beispiel:

<H1>Einführung in HTML</H1>

3.2 Absätze

In HTML werden Leerzeilen, Tabs etc. lediglich als whitespace betrachtet. Eine Trennung von Absätzen durch Leerzeilen hat also für den Browser keine Bedeutung. Absätze werden stattdessen durch den P-Tag <P> gekennzeichnet. Die Darstellung des Absatzendes ist dem Browser überlassen, typischerweise wird eine Leerzeile eingefügt.

Theoretisch gibt es zwar ein </P>, das aber praktisch nie in Erscheinung tritt.

3.3 Zeilenumbrüche

Um lediglich eine neue Zeile zu beginnen, ohne eine Leerzeile einzufügen, wird das BR-Tag <BR> verwendet.

4. Texthervorhebungen

Für Texthervorhebungen gibt eine ganze Reihe von Möglichkeiten zur Texthervorhebung. Diese lassen sich grob in zwei Typen einteilen:

Inhaltsbasierte Tags: Hierbei zeigt der Tag einen bestimmten Inhaltstyp an. Die tatsächliche Darstellung bleibt dem Browser überlassen.Inhaltsbasierte Tags entsprechen eher dem Ideal einer strukturorientierten Sprache. Sie spielen mittlerweile eine eher untergeordnete Rolle und werden hier auch nicht weiter erwähnt.
Darstellungsorientierte Tags Diese Tags geben direkte anweisungen über die Darstellungsweise des Textes an den Browser. Diese Tags entspringen dem (graphikorientierten) Wunsch, über die Darstellung der Seiten mehr Einfluß zu erlangen.

4.1 Darstellungsorientierte Tags

Diese Tags treten stets paarweise auf, das Schlußtag ist also obligatorisch. Der gesamte Text dazwischen wird dem Tag entsprechend formatiert. Die Tags können auch geschachtelt werden (siehe Beispiel oben). Nachfolgend eine Übersicht über die wichtigsten Möglichkeiten:

Tag	Mnemonic	Wirkung
`<b>`	Bold	Fettschrift
`<i>`	Italic	Kursivschrift
`<tt>`	Typewriter	`Schreibmaschine`
`<u>`	Underlined	unterstrichen
`<big>`	Big	grössere Schrift
`<small>`	small	kleinere Schrift

5 Aufzählungen und Listen

HTML kennt mehrere Arten der Aufzählung. Dabei wird jeweils - in der Art von LaTeX - ein Aufzählungs"typ" definiert und anschließend die einzelnen Items angegeben. Die Items werden jeweils mit <LI> begonnen. <LI> ist ein einfacher Tag, d.h. es gibt keinen End-Tag.

5.1 Numerierte Listen

Eine numerierte Liste wird durch die Tags <OL> (Anfang der Liste) und </OL> (Ende der Liste) erzeugt. Beispiel einer numerierten Liste:

<OL>
<LI>Attention
<LI>Interest
<LI>Desire
<LI>Action
</OL>

Attention
Interest
Desire
Action

5.2 Nicht numerierte Listen

Eine nicht numerierte Liste wird durch die Tags <UL> (Anfang der Liste) und </UL> (Ende der Liste) erzeugt. Die Listenelemente werden üblicherweise mit einem vorangestellten Bullet dargestellt. Das nachfolgende Beispiel erzeugt die Liste der kinderliedlich bekannten Kuchenzutaten:

<UL>
<LI>Eier
<LI>Schmalz
<LI>Zucker
<LI>Salz
<LI>Milch
<LI>Mehl
<LI>Safran
</UL>

Eier
Schmalz
Zucker
Salz
Milch
Mehl
Safran

6 Links

Die Hypertext-Fähigkeit, also die Möglichkeit, direkt im laufenden Text Verweise anzubringen, ist die zentrale Eigenschaft von HTML (Hypertext Markup Language). Für den Benutzer ist dabei die tatsächliche Lokation des Zieles des Verweises transparent: Der Verweis kann auf eine andere Stelle im selben Dokument oder auch auf ein Dokument auf einem Rechner irgendwo auf der Welt (genauer: im WWW :-) zeigen.

6.1 URL's

Diese Transparenz auf der Seite der Clients wird durch die sogenannten Uniform Resource Locators (URL) erreicht: Jedes Dokument im WWW hat eine eindeutige Adresse. Diese Adresse enthält sowohl Informationen über die Lokation des Dokuments als auch über das zu verwendende Protokoll. Es ist dann Sache des Browsers, das Dokument geeignet anzufordern. Insbesondere unterscheidet sich ein Dokument im selben Verzeichnis für den Browser prinzipiell nicht von einem auf der anderen Seite der Welt.

Die vereinfachte Syntax eines URL ist folgendermaßen:

protokoll://adresse/dateinamen

Das gebräuchlichste Protokoll im WWW ist das Hypertext Transfer Protocol (HTTP) - wenn man so will, das WWW-Protokoll an sich. Solange nur mit "gewöhnlichen" WWW-Dokumenten gearbeitet wird, kommt ausschließlich dieses Protokoll zum Einsatz. Das vorliegende Dokument hat beispielsweise die URL:
http://www.mathematik.uni-ulm.de/sai/ws98/sepraxis/einfuehrung.html

Es existieren weitere Protokolle, beispielsweise ftp für den Transfer von Dateien (file transfer protocol), news für den Zugriff auf Usenet News oder file für das direkte Laden von lokalen Dateien (ohne Zugriff auf einen Webserver).

6.2 Links auf andere Dokumente

Zur Erzeugung von Links dient in HTML der <A>-Tag (Anchor). Ein Link auf ein anderes WWW-Dokument hat die Form:

<A HREF="URL">Anker</A>

Dabei ist Anker der Text (auch Bilder oder Überschriften), der mit dem Link versehen werden soll: Er wird farblich oder durch Unterstreichen herausgehoben, und bei Anklicken wird der Link "ausgeführt". Beispielsweise erzeugt dies einen Verweis auf die Homepage der Universität Ulm:

<A HREF="http://www.uni-ulm.de">Universität Ulm</A>

URLs können abgekürzt werden: Wenn nur ein Dateinamen angegeben ist, wird automatisch Methode, Rechner und Verzeichnis der aktuellen URL verwendet. Dies ermöglicht eine einfache Adressierung von Dateien im gleichen oder in benachbarten Verzeichnissen. Beispiele:

<A HREF="test1.html">
<A HREF="../verzeichnis2/test2.html">

Links auf Textteile

Manchmal ist es wünschenswert, auch innerhalb eines Dokumentes navigieren zu können, beispielsweise um eine Fußnote darzustellen oder eine Hilfe per Link zur Verfügung zu stellen. Dazu können im Text Sprungstellen (fragment identifier) angelegt werden. Dies geschieht mit:

<A NAME="name">text</A>

Danach kann diese Stelle innerhalb des Dokuments mit <A HREF="#name"> angesprungen werden. Auch von außerhalb kann direkt beim Öffnen des Dokuments an diese Stelle gesprungen werden, wenn der Link um #name erweitert wird.

7 Bilder

Mit <IMG> können Bilder an der aktuellen Stelle in das Dokument integriert werden. Das heißt, das Bild wird in der aktuellen Zeile eingeblendet. Dabei kann die Ausrichtung bestimmt werden. Generelle Syntax:

<IMG SRC="dateiname" ALIGN="textausrichtung" ALT="alternativtext">

textausrichtung gibt an, wie das Bild angeordnet werden soll. Mögliche Werte dafür sind top, middle und bottom in Bezug auf die laufende Textzeile (vertikal) und left und right in Bezug auf die Anordnung auf der Seite (horizontal). Es kann sowohl ein ALIGN für die horizontale als auch für die vertikale Ausrichtung angegeben werden.
alternativtext wird angezeigt, wenn entweder das Laden von Bildern unterbunden wird oder der Browser nicht graphikfähig ist. Die Angabe eines Alternativtextes wird empfohlen!

8 Tabellen

Tabellen sind ein (relativ) einfaches wirkungsvolles Werkzeug, um Textinhalte auf einer Seite anzuordnen. Insbesondere für strukturierte Ausgaben der Art Variable-Wert sind Tabellen gut geeignet. HTML-Tabellen haben drei Definitionsebenen:
Eine Tabelle (<TABLE>) besteht aus einzelnen Reihen (<TR>, table row); Reihen wiederum bestehen aus einzelnen Zellen. Zellen enthalten entweder Überschriften (<TH>, table header) oder normale Daten (<TD>, table data).

Alle Tags haben ein korrespondierendes Endtag. Bei <TR> und (<TH> bzw. <TD> kann dies aber im allgemeinen weggelassen werden, solange eine weitere Zelle bzw. Reihe folgt - aber es empfiehlt sich dennoch, die Endtags zu setzen.

In den Zellen einer Tabelle können nahezu beliebige Inhalte stehen: Texte, Formatierungen, Bilder, ja sogar wiederum Tabellen. Beispiel für eine Tabelle (<table border> sorgt dabei für die Umrandung der Tabellenzellen):

   <table border>
      <tr>
	 <th>Variable</th><th>Wert</th>
      </tr><tr>
	 <td>var1</td><td>wert1</td>
      </tr><tr>
	 <td>var2</td><td>wert2</td>
      </tr>
   </table>

Variable Wert
var1 wert1
var2 wert2

Variable	Wert
var1	wert1
var2	wert2

9 Weitere Tips

Nachfolgend noch einige - zugegebenermaßen persönlich gefärbte - Tips. Die Liste ist unvollständig und wird hoffentlich noch ergänzt :-)

9.1 Optionale Argumente von Tabellen

Bei der Definition von Tabellen kann das Aussehen der Tabelle weitgehend beeinflußt werden. Die wichtigsten Parameter sind dabei:

Attribut Wert/Beispiele Bedeutung

border border=3
border Um jede Zelle eine n Pixel starke Begrenzung
Wie border=1

width width=400
width=80% Breite der Tabelle: absolut (in Pixel)
oder relativ zur Breite des Browserfensters

align align=left
align=right Tabelle linksbündig am Rand
Tabelle rechtsbündig am Rand

Attribut	Wert/Beispiele	Bedeutung
`border`	border=3 border	Um jede Zelle eine n Pixel starke Begrenzung Wie border=1
`width`	width=400 width=80%	Breite der Tabelle: absolut (in Pixel) oder relativ zur Breite des Browserfensters
`align`	align=left align=right	Tabelle linksbündig am Rand Tabelle rechtsbündig am Rand

9.2 Das `<CENTER>`-Tag

Die align-Optionen sowohl von Tabellen als auch von Bildern erlauben nur eine Anordnung links oder rechts, jedoch keine Zentrierung. Ist eine Zentrierung gewüscht, so muß das <CENTER>-Tag verwendet werden: Beispiel:

<CENTER>
<TABLE>
Tabellendefinition
</TABLE>
</CENTER>

9.3 Hintergrundfarben

Wem der Standardhintergrund von Netscape&Co. zu langweilig, grau, ... ist, kann mit der bgcolor-Option von <BODY> Abhilfe schaffen. bgcolor bekommt als Wert entweder eine benannte Farbe oder einen Farbwert zugewiesen. Ein Farbwert besteht aus #rrggbb, wobei rr, gg und bb hexadezimale Werte fü Rot, Grün und Blau sind. <BODY BGCOLOR=#ffffff> ergibt also ein absolutes Weiß als Hintergrund, <BODY BGCOLOR=#ff0000> ein Volltonrot.

Mit <BODY BACKGROUND=filename> kann darüberhinaus ein Hintergrundbild verwendet werden.

9.4 `width` und `height` bei Bildern

Beim Einbinden von Bildern ist es sinnvoll, den Browser mit width und height anzuweisen, wieviel Platz er fü das Bild reservieren muß. Ohne diese Angabe kann der Browser nämlich erst beginnen, die Seite aufzubauen, wenn alle Bilder geladen sind. Oder, es fällt das Layout auseinander, falls das Laden von Bildern unterbunden wird. width und height bekommen als Wert die Breite und Höe des Bildes in Pixel. Beispiel:

<IMG src="bild.gif" width=350 height=200>

9.5 Mailto

Insbesondere bei der Erstellung eigener WWW-Seiten, z.B. einer homepage, ist das Protokoll mailto nützlich: Es ermöglicht auf einfache Weise einen Link, um einem definierten Adressaten eine e-mail zu schicken. Beispielsweise erzeugt <A href="mailto:lipp@mathematik.uni-ulm.de"> einen Link zum Autor dieser Einführung.

Referenzen

Ein empfehlenswertes Buch zu HTML mit einer Einführung in die grundlegenden Prinzipien, jedoch ohne die neuesten Entwickungen von HTML, ist
HTML - The Definitive Guide
Chuck Musciano, Bill Kennedy
O'Reilly & Associates, Cambridge 1996

Daneben gibt es im WWW eine riesige Menge an mehr oder weniger ausfürlichen HTML-Einführungen und -referenzen. Einige Beispiele:

Diese Einführung baut in Teilen auf der Einführung in HTML von Dierk Lucyga auf, einer etwas älteren, aber kompakten Übersicht.

Der HTML-Crashkurs (FH Stuttgart) ist referenzartig aufgebaut und bietet jeweils einen knappen Überblick über die einzelnen Themengebiete.

SELFHTML von Stefan Münz ist eine ausführliche Referenz zum Thema HTML, die auch neuere Entwicklungen abdeckt. Als "Standardwerk" zum Thema HTML sehr empfehlenswert.

Das Universitäsrechenzentrum bietet unter "Informationen rund um HTML" Links zu allen möglichen Themen vom HTML-Tutorium bis hin zu URZ-Spezifika an.

Anhang - ISO Latin 1-Zeichen

&Auml;       capital A, dieresis or umlaut mark
&Euml;       capital E, dieresis or umlaut mark
&Iuml;       capital I, dieresis or umlaut mark
&Ouml;       capital O, dieresis or umlaut mark
&Uuml;       capital U, dieresis or umlaut mark
&auml;       small a, dieresis or umlaut mark
&euml;       small e, dieresis or umlaut mark
&iuml;       small i, dieresis or umlaut mark
&ouml;       small o, dieresis or umlaut mark
&szlig;      small sharp s, German (sz ligature)
&uuml;       small u, dieresis or umlaut mark
&yuml;       small y, dieresis or umlaut mark
&amp;        Ampersand
&lt;         less than
&gt;         greater than
&copy;       Copyright

Matthias Lipp, November 1998