Sie sind auf Seite 1von 7

Einfhrung in HTML

1. Grundstruktur einer HTML-Seite


HTML-Dateien sind reine Text-Dateien, d.h. sie knnen in einem beliebigen Editor geschrieben
werden und mssen lediglich mit der Endung .html versehen werden.
Jede HTML-Datei besitzt eine feste Struktur:
<html>
<head>
<title>Ich bin die Titelleiste</title>
</head>
<body>
Ich bin der Seiteninhalt
</body>
</html>
Die Befehle in HTML werden als Tags bezeichnet. In der Regel bentigt man einen Anfangs-Tag
(<tag>) und einen End-Tag (</tag>), manche Befehle knnen aber auch einfach (<tag>)
verwendet werden.
Jede HTML-Datei beginnt mit <html> und endet mit </html> und besteht aus einem Kopf-Teil
(<head> ... </head>) und einem Krper-Teil (<body> ... </body>).
Im Kopf-Teil befinden sich Informationen ber das Dokument, wie z.B. die Titelzeile, die im
oberen Fensterbalken angezeigt wird.
Im Krper-Teil steht der eigentliche Inhalt des Dokuments.
Innerhalb eines Tags knnen weitere Angaben (Attribute) stehen. So stellt man mit bgcolor= die
Hintergrundfarbe und mit text= die Textfarbe ein.
<body bgcolor=red text=green>
Anstelle der Farbnamen kann auch der entsprechende RGB-Code angegeben werden.
Dabei wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grn und Blau definiert.
black

red

green

blue

white

#000000 #FF0000 #00FF00 #FF0000 #FFFFFF


1

2. Einfache Gestaltungsmglichkeiten
Mit <font>...</font> definiert man einen Bereich fr Schriftformatierung.
Als Attribute stehen z.B. Schriftgre (size) und Schriftfarbe (color) zur Verfgung.
Der Wert der Schriftgre kann absolut ( 1, 2, ... 7) oder relativ (-3, -2 , ... +3) angegeben werden.
<font size=+3 color=blue>Hallo</font>
Daneben gibt es eine Vielzahl weiterer Mglichkeiten zur Textauszeichnung, die auch miteinander
kombiniert werden knnen.
<b>

<i>

<sup>

<sub>

fettgedruckt kursiv hochgestellt tiefgestellt

<b><i>Ich bin fett und kursiv</i></b>


Um einen Zeilenumbruch zu erzwingen, verwendet man den <br>-Tag. Dieser steht immer allein,
d.h. man bentigt keinen Endtag.
Zeile<br>neue Zeile
Mit dem <p>-Tag (p = paragraph = Absatz) leitet man einen Textabsatz ein und mit </p>
beendet man diesen.
<p>1. Absatz</p>
<p>2. Absatz</p>
In HTML stehen 6 berschriftenebenen zur Verfgung: 1 ist die oberste, 6 ist die niedrigste Ebene
<h1>berschrift Ebene 1</h1>
<h2>berschrift Ebene 2</h2>
...
<h6>berschrift Ebene 6</h6>
Abstze und berschriften knnen Attribute zur Textausrichtung (align) enthalten:
align = left

right

center

linksbndig rechtsbndig zentriert

justify
Blocksatz

<h1 align=center>berschrift</h1>
<p align=right>Text</p>

3. Einbinden von Bildern


Zum Einbinden von Bildern in HTML-Seiten, verwendet man den <img> -Tag. Geeignete
Grafikformate sind PNG, GIF und JPEG. Mit dem src-Attribut whlt man die gewnschte Bilddatei
und mit dem alt-Attribut kann man einen Alternativtext angeben, fr den Fall, dass die Grafik nicht
angezeigt werden kann.
<img src=sonne.jpg alt=Sonne>
Befindet sich die Bilddatei in einem anderen Verzeichnis als die HTML-Datei, so muss der
entsprechende Pfad angegeben werden,
<img src=../bilder/sonne.jpg alt=Sonne>

4. Hypertextelemente
Das Besondere an HTML-Texten sind Verweise (links), ber die man andere Elemente erreichen
kann. Man setzt Verweise mit dem <a>-Tag (a = anchor = Anker) und gibt das Verweisziel mit
dem href-Attribut an. Das Ziel kann eine Textstelle im selben HTML-Dokument oder aber auch
eine beliebige andere Datei aus dem Internet sein.
Zwischen Anfangs- und End-Tag steht der Text, auf den man Klicken muss, um das Ziel zu
erreichen.
<a href=seite2.html>Nchste Seite</a>
<a href=http:\\did.mat.uni-bayreuth.de>Uni Bayreuth</a>
An der Stelle des Textes kann auch ein anklickbares Bild stehen.
<a href=www.stern.de><img src=stern.jpg></a>
Fr einen Sprung innerhalb eines Dokuments muss man an der Zielstelle einen Anker definieren.
Dieser wird genau wie ein Verweis mit Hilfe des <a>-Tags erzeugt, enthlt aber statt des Attributs
href ein Attribut name zum Festlegen des (beliebigen) Ankernamens.
Der Verweis zu diesem Anker beginnt mit einem #-Zeichen gefolgt vom Namen des Ankers.

<a href=#ankername>Zu Plan A</a>


.
.
.
<a name=ankername>Plan A</a>

5. Der hover-Effekt Austauschen von Bildern


Beim berfahren einer Textstelle mit der Maus soll ein Bild ausgetauscht werden.
Um auf ein Bild zugreifen zu knnen, muss es mit einem Namen versehen werden.
<img src=bild1.png name=xxx>
Die gewnschte Textstelle wird als Link gestaltet und mit JavaScript-Befehlen versehen:
<A HREF="javascript://"
onmouseover="javascript:window.document.xxx.src='bild2.png';"
onmouseout="javascript:window.document.xxx.src='bild1.png';">
Textstelle</A>
Der Aufruf HREF="javascript: //" bewirkt, dass beim Anklicken des Textes nichts geschieht. Der
Javascript-Aufruf // steht dabei fr einen leeren Kommentar.
Beim berfahren der Textstelle wird der Befehl hinter onmouseover ausgefhrt. Im Beispiel wird
die vorherige Bildquelle ersetzt durch bild2.png. Der Javascipt-Aufruf enthlt den HTML-Namen
(xxx) und den Datei-Namen des gewnschten Bildes (bild2.png).
Verlsst die Maus die Textstelle, so wird der Befehl hinter onmouseout ausgefhrt und es wird
wieder die ursprngliche Datei bild1.png angezeigt.

6. Tabellen
Neben der Darstellung von Daten, werden Tabellen in HTML meist als Gestaltungsmittel fr
Seitenlayouts verwendet. Texte und Grafiken knnen in einer Tabelle genauer angeordnet werden.
Folgende Tags werden fr das Grundgerst einer Tabelle bentigt:
Tabelle

Tabellenzeile

<table>...</table> <tr>...</tr>

Kopf-Datenzelle

Datenzelle

<th>...</th>

<td>...</td>

Aufbau einer Tabelle:


<table>
<tr>
<th>berschrift Spalte 1</th>
<th>berschrift Spalte 2</th>
</tr>
<tr>
<td>Datenzelle in Spalte 1</td>
<td>Datenzelle in Spalte 2</td>
</tr>
</table>
Attribute im table-Tag:
Ausrichtung (align)
align =

left

right

center

linksbndig rechtsbndig zentriert

justify
Blocksatz

<table align=center>
Breite und Hhe der Tabelle (height, width)
Mglich ist die Angabe von Pixeln oder von Prozentwerten.
<table height=200 width=90%>
Achtung: Tabellen knnen nicht beliebig verkleinert werden. Der Browser nimmt sich auf alle Flle
so viel Platz, wie bentigt wird, um den Inhalt der Tabelle korrekt anzuzeigen.

border

cellspacing

cellpadding

Rahmen bzw. Gitternetzlinien Strke der Gitternetzlinien Abstand des Textes zum Zellenrand
<table border=1 cellspacing=10 cellpadding=3>
Attribute fr einzelne Zeilen bzw. Zellen:
5

horizontale Ausrichtung des Zelleninhaltes (align)


align =

left

right

center

linksbndig rechtsbndig zentriert

justify
Blocksatz

vertikale Ausrichtung des Zelleninhaltes (valign)


valign = top

middle

bottom

oben

zentriert

unten

Erfolgt der Eintrag im tr-Tag, so bestimmt dies die Ausrichtung der gesamten Zeile.
<tr valign=middle height=100>
<td width=20% align=right>Text 1</th>
<td width=80% align=center>Text 2</th>
</tr>
Zum Verbinden von Zellen dienen die Attribute rowspan und colspan.
<table>
<tr>
<td colspan=2>Zelle 1</td>
</tr>
<tr>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</table>
<table>
<tr>
<td rowspan=2>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
</tr>
</table>

Zelle 1
Zelle 2

Zelle 3

Zelle 1

Zelle 2
Zelle 3

Diese Befehle knnen auch kombiniert werden. Zusammen mit Verschachteln von Tabellen
(Tabellen in Tabellenzellen) kann man nun fast beliebig komplexe Strukturen erstellen.
Mit bgcolor knnen Tabellen (bzw. Zeilen oder Zellen) auch mit Hintergrundfarben versehen
werden.
<table bgcolor="red">
<tr bgcolor="green">
<td bgcolor="blue">

7. Einbinden einer GEONExT-Konstruktion in eine HTML-Seite


Exportiert man unter GEONExT eine Konstruktion ins HTML-Format, so wird automatisch eine
HTML-Datei erzeugt. Die fr GEONExT wichtigen Eintrge befinden sich dabei innerhalb des
<applet>-Tags.
<!-- GEONExT -->
<applet id="xxx" code="geonext.Geonext.class" codebase="./"
archive="geonext.jar" width="400" height="380"
.
.
.
<param name="geonext" value="file:dreieck.gxt">
</applet>
<!-- GEONExT -->

Die fr GEONExT notwendigen Daten befinden sich in der Datei "geonext.jar".


Der Eintrag codebase= verweist auf das Verzeichnis, in dem diese Datei zu finden ist. Befindet
sie sich im selben Verzeichnis wie die HTML-Seite, so lautet der Eintrag codebase="./".
Die Gre der GEONExT-Konstruktion in der HTML-Seite wird durch die Werte fr Breite und
Hhe (height, width) festgelegt.
Beim Exportieren in eine HTML-Seite gibt es zwei Mglichkeiten:

Standardmig wird der Quelltext der Konstruktion in die HTML-Seite geschrieben; d.h. es
entsteht lediglich eine Datei.

Whlt man "Externe gxt-Datei", so werden die Zeichenflchen in einer separaten gxt-Datei
gespeichert. Diese kann anschlieend in GEONExT geffnet, weiterbearbeitet und wieder
abgespeichert werden, ohne die HTML-Seite ndern zu mssen. Die Einbindung der gxt-Datei
erfolgt im <applet>-Tag.
Beispiel: <param name="geonext" value="file:dreieck.gxt">

Weitere Informationen zu HTML findet man unter

http://selfhtml.teamone.de
7