Sie sind auf Seite 1von 8

HTML Grundlagen 1

1 HTML Grundlagen
HTML (Hypertext Markup Language)-Dokumente sind einfache Textdateien,
die neben dem eigentlichen Text zusätzliche Anweisungen enthalten, wie das
Dokument in etwa vom Browser auf dem Bildschirm dargestellt werden soll.
Es handelt sich dabei nur um Empfehlungen, die von verschiedenen Icon HINWEIS
Browsern unterschiedlich umgesetzt werden, so dass ein und dieselbe
HTML-Seite in verschiedenen Browser durchaus unterschiedlich aussehen
kann.

1.1 Tags
Die erwähnten Layout- und Formatierungsanweisungen heißen Tags und
bestehen immer aus:
• einer öffnenden Klammer <,
• einem Tag-Namen und
• einer schließenden rechten Klammer >.
In der Regel treten Tags paarweise auf, d.h., es gibt ein Starttag und ein
Endtag. Das Endtag unterscheidet sich dabei nur durch einen Slash / vom
Starttag – z.B. <h1> </h1>.
Grundsätzlich unterscheidet HTML nicht zwischen Groß- und Icon HINWEIS
Kleinschreibung. In Hinblick auf die zunehmende Bedeutung von XML (und
die XHTML-Adaption) sollte man sich aber angewöhnen, Tags und Attribut
konsequent klein zu schreiben.

1.2 Das Grundgerüst


Jedes HTML-Dokument muss das folgende Grundgerüst enthalten. Lassen
Sie sich nicht verwirren, falls Sie einmal Seiten sehen, bei denen manche der
Tags fehlen. Es handelt sich nicht um eine korrekte HTML-Seite und sie wird
nur deshalb korrekt angezeigt, weil viele Browser von sich aus die fehlenden
Tags ergänzen. Darauf sollten Sie sich aber nicht verlassen. Verwenden Sie
daher immer das folgende Grundschema:
<html>
2 Layout- und Formatierungsbefehle

<head>
<title> Das HTML-Grundger&uuml;st </title>
</head>

<body>
Hier steht der eigentliche Text.
</body>
</html>
Die eingesetzten Tags des Grundgerüsts nennt man Markup-Tags. Sie haben
folgende Bedeutung:

Tag Beschreibung
<html> ... </html> Zeigt an, dass das Dokument im HTML-Format vorliegt
<head> ... </head> Markiert den Kopfbereich des Dokumentes, in dem der
Titel definiert werden muss
<title> ... </title> Gibt dem Dokument einen Namen. Er sollte kurz und
aussagekräftig sein, da er bei vielen Browsern als Name
für die Bookmarks verwendet wird
<body> ... </body> Markiert den Bereich, wo der Text des Dokumentes steht
Tabelle 1.1: Tags des Grundgerüsts

1.3 Layout- und Formatierungsbefehle


Um das Layout des Textes im BODY-Bereich zu beeinflussen, steht eine
Vielzahl von Tags zur Verfügung, von denen wir an dieser Stelle nur die
wichtigsten angeben können.

Überschriften (Headings)
Um Überschriften hervorzuheben, gibt es sechs Heading-Levels, h1 bis h6,
die bewirken, dass ein größerer Font und/oder eine Fettschrift gewählt wird:
<h1> Dies ist der Titel </h1>

Abschnitte (Paragraphs)
Anders als Dokumente in einem Textverarbeitungssystem beachtet der
Browser nicht, wie lange eine Zeile ist und wo ein Zeilenumbruch im
HTML Grundlagen 3

Quelltext steht. Dies geschieht immer dann, wenn ein Absatz-Tag <p>
angetroffen wird oder ein Umbruch-Tag <br>:
<p> Dies ist ein erstes Beispiel. Eingegebene RETURNs werden
ignoriert. Ein Umbruch erfolgt vom Browser erst dann, wenn ein neuer
Paragraph angezeigt wird. </p>
<p> Hier beginnt ein neuer Abschnitt. Ein Zeilenumbruch <br>
kann auch mit dem BR-Tag erzwungen werden. </p>

Hervorheben von Text


Um Textpassagen vom übrigen Text hervorzuheben, gibt es mehrere
Möglichkeiten: einen größeren Font, Fettdruck oder Kursivschrift,
Unterstreichung usw.

Tag Beschreibung
<b> ... </b> Fettschrift
<i> ... </i> Kursivschrift
<small> ... </small> kleine Schrift
<s> ... </s> durchgestrichener Text
<u> ... </u> unterstrichener Text
<tt> ... </tt> Schreibmaschinenschrift
Tabelle 1.2: Textauszeichnungen

Aufzählungen (Listen)
HTML unterstützt nummerierte und nicht nummerierte Listen, die auch
verschachtelt sein dürfen.

Tag Beschreibung
<ul> ... </ul> nicht nummerierte Liste (Gliederung)
<ol> ... </ol> nummerierte Liste
<li> Listenelement
Tabelle 1.3: Listen-Tags

Beispiel:
<ul>
<li> Milch
4 Layout- und Formatierungsbefehle

<li> Eier
<li> Brot
</ul>

Sonderzeichen
Es ist möglich, eine Reihe von Sonderzeichen in der HTML-Seite zu
verwenden. Hierzu gehören insbesondere die deutschen Umlaute. Alle
Sonderzeichen beginnen mit einem &, gefolgt von einer mehr oder weniger
einfach zu merkenden Buchstabenfolge und einem Semikolon.

Sonderzeichen Umschreibung
äüöß &auml; &uuml; &ouml; &szlig;
äüöß &auml; &uuml; &ouml; &szlig;
Ä Ü Ö &Auml; &Uuml; &Ouml;
à â è é ê ë ô &agrave; &acirc; &egrave; &eacute;
&euml; &ocirc;
α β χ δ usw. &alpha; &beta; &gamma; &delta;
usw.
Tabelle 1.4: Sonderzeichen in HTML

Einfügen von Bildern


Ein besonderer Reiz ist die Möglichkeit, Bilder in den Text einzufügen.
Hierzu gibt es das <img>-Tag. Die meisten Browser unterstützen GIF- und
JPEG-Formate. Zusätzlich können noch Hinweise auf die Bildgröße und
Ausrichtung des umgebenden Texts mitgegeben werden:
<img src="MeinBild.gif"
height="100" width ="100" >

Verweise auf andere Webseiten (Hyperlinks)


Das Besondere an den HTML-Dokumenten ist die Möglichkeit, klickbare
Verweise auf andere HTML-Seiten hinzuzufügen, die sich auch auf einem
ganz anderen Rechner befinden. Hierzu dient das Tag <a> ... </a> (der
Anker für den Verweis) sowie das Attribut href, dem der URL des Links
mitgegeben wird:
<p>Besuchen Sie doch mal den
<a href="www.sun.com/index.html"> Webserver </a>
HTML Grundlagen 5

der Firma Sun!</p>

Einfügen von Applets


Zum Einfügen von Java-Applets dient das <applet>-Tag. Notwendige
Attribute sind width und height, die die Breite und Höhe des Applets in
Pixeln angeben.
<applet code="CMeinApplet.class"
width="100" height="80">
</applet >
Falls das Applet in einem jar-Archiv vorliegt, muss ein zusätzliches archive-
Attribut mit dem Namen des Archivs angegeben werden:
<applet code="CMeinApplet.class"
archive="MeinArchiv.jar"
width="100" height="80">
</applet >
Wenn das Applet nicht im gleichen Verzeichnis wie das HTML-Dokument
ist, müssen Sie mit codebase den vollständigen Pfad oder eine URL
angeben, z.B.
<applet code="CMeinApplet.class"
codebase="d:/java/applets"
width="100" height="80">
</applet>
Optional kann man noch mit dem align-Attribut die Ausrichtung des
Applets im umgebenden Text steuern:

Ausrichtung Beschreibung
align="left" Ausrichtung zum linken Rand hin
align="right" Ausrichtung zum rechten Rand hin
align="top" Ausrichtung nach dem größten Element
der Zeile
align="middle" Ausrichtung der Zeile an der Mitte des
Applets
align="bottom" Ausrichtung der Zeile am unteren Ende
des Applets
6 Tabellen

Tabelle 1.5: Applet-Ausrichtung

Parameter werden an das Applet mit dem <param>-Tag übergeben. Es


können beliebig viele Parameter angeben werden. Jeder einzelne Parameter
ist durch seinen Parameternamen (name) und einen Wert (value) definiert:
<applet code="CMeinApplet.class"
width="50" height="50" align="top">
<param name="Anzahl" value="50">
<param name="Farbe" value="rot">
</applet>
Der HTML 4.0-Standard sieht eigentlich zur Einbindung von Applets das Icon HINWEIS
<object>-Tag vor. Die Einbindung von Applets über das <object>-
Tag unterstützt derzeit aber nur der Netscape 6-Browser, weswegen man
noch das <applet>-Tag verwenden sollte.
<object codetype="application/java"
classid="java:CMeinApplet.class"
width="50" height="50">
Sorry, Ihr Browser unterstützt keine
Java-Applets.</object>

1.4 Tabellen
Tabellen eignen sich zur Darstellung tabellarischer Daten sowie zur
Gestaltung des Seitenaufbaus. So können Sie zum Beispiel mehrspaltigen
Text erzeugen oder Grafiken scheinbar frei platzieren. Wenn Sie dabei die
Gitternetzlinien der Tabelle verschwinden lassen, erzielen Sie eine optisch
gelungene Präsentation.

Tabellen definieren
Die komplette Tabelle wird durch die <table>-Tags eingeschlossen.
<table>
...
</table>
Die Definition der einzelnen Zeilen und Spalten findet innerhalb dieses
Bereichs statt. Dabei werden zuerst die Zeilen und innerhalb der Zeilen die
einzelnen Zellen (Spalten) definiert. Zur Definition einer neuen Zeile
verwenden Sie das <tr>-Tag, Zellen werden mit dem <td>-Tag definiert.
HTML Grundlagen 7

(TR ist eine Abkürzung für "table row", TD steht für "table data".) Für
Zellen, die als Überschrift für Spalten oder Zeilen dienen, können Sie statt
dem <td>-Tag auch das <th>-Tag einsetzen. Die meisten Browser stellen
den Inhalt der betreffenden Zellen dann fett dar.
Eine komplette Tabelle mit Tabellenkopf, zusätzlich zwei weiteren
Datenzeilen und insgesamt zwei Spalten wird wie folgt definiert. Die
Einrückung dient hier nur der Übersicht:
<table>
<tr>
<th>&Uuml;berschrift Spalte 1</th>
<th>&Uuml;berschrift Spalte 2</th>
</tr>
<tr>
<td>Zeile 1 / Spalte 1</td>
<td>Zeile 1 / Spalte 2</td>
</tr>
<tr>
<td>Zeile 2 / Spalte 1</td>
<td>Zeile 2 / Spalte 2</td>
</tr>
</table>

Tabellen formatieren
Das <table>-Tag verfügt über verschiedene Attribute, mit deren Hilfe die
Darstellung der Tabelle beeinflusst werden kann.

Attribut Beschreibung
<table width="400"> Breite der Tabelle. Die Breite kann in Pixeln (siehe
links oder auch in Prozent des Browserfensters
angegeben werden).
<table height="400"> Höhe der Tabelle. Die Höhe kann in Pixeln (siehe
links oder auch in Prozent des Browserfensters
angegeben werden).
<table border="0"> Das border-Attribut legt die Rahmenstärke der
gesamten Tabelle fest. Wenn Sie als Wert 0 angeben,
erzeugen Sie eine Tabelle ohne sichtbares Gitternetz.
<table frame="Void"> Das frame-Attribut bietet seit HTML 4.0 neue
Möglichkeiten für die Gestaltung des äußeren
Randes der Tabelle. Mit dem Wert »Void« wird
der äußere Rahmen z.B. nicht angezeigt.
FRAME-Wert Bedeutung
8 Tabellen

Void Kein Rahmen


Above Rand oben
Below Rand unten
HSides Rand oben und unten
LHS Rand links
RHS Rand rechts
VSides Rand links und rechts
Box Rand an allen Seiten
Border Rand an allen Seiten
<table rules="None"> Mit rules legen Sie die Umrahmung der einzelnen
Zellen fest. Der Wert »None« sorgt dafür, dass
einzelne Zellen keinen sichtbaren Rand erhalten.
Möchten Sie einen Rand lediglich zwischen den
einzelnen Spalten (Zeilen) erzeugen, so setzen Sie
den Wert »Cols« (»Rows«) ein.
<table cellspacing="5"> Abstand zwischen den Zellen der Tabelle.
<table cellpadding="5"> Abstand zwischen den Zelleninhalten und den
Zellenrändern.
Tabelle 1.6: Tabellen-Attribute

Für die einzelnen Zellen können Sie Breite und Höhe angeben:
<td width="100" height="100">
Beachten Sie, dass sich die meisten Browser trotz dezidierter Breiten- und
Höhenangaben vorbehalten, die Zellenabmaße gegebenenfalls an den
Zelleninhalt anzupassen.
Weiterhin können Sie festlegen, dass sich eine Zelle über mehrere Spalten
und/oder Zeilen erstreckt. Die nachfolgend definierte Zelle umspannt zwei
Spalten (ist also so breit wie zwei Zellen in anderen Zeilen der Tabelle) und
drei Zeilen (ist also drei Zeilen hoch):
<td colspan="2" rowspan="3">