Klasse 8

Erstellen einer HTML-Datei:

Eine HTML-Datei ist eine Textdatei, die mit einem Editorprogramm erstellt werden kann. Der gesamte Inhalt einer HTML-Datei wird in die Tags <html> bzw. </html> eingeschlossen. Hinter dem einleitenden HTML-Tag folgt das einleitende Tag für den Kopf <head>. Zwischen diesem Tag und seinem Gegenstück </head> werden allgemeine Angaben zur HTML-Datei notiert. Die wichtigste dieser Angaben ist der Titel der HTML-Datei, markiert durch die Tags <title> bzw. </title>. Unterhalb davon folgt der Textkörper, markiert durch die Tags <body> bzw. </body>. Im Textkörper wird dann der eigentliche Inhalt der Datei notiert, also das, was im Anzeigefenster des WWW-Browsers angezeigt werden soll.

Beispiel 1:

<html>
<head>
<title>Beispiel 1</title>
</head>
<body>

</body>
</html>

Beispiel 1: So sieht's aus

Sonderzeichen:

Im Hinblick auf das Internet und die internationale Verwendung sollten deutsche Umlaute in HTML-Dateien durch die dafür vorgesehenen HTML-Zeichenfolgen ersetzt werden.

Zeichen	Zeichenfolge
ä	ä
Ä	Ä
ö	ö
Ö	Ö
ü	ü
Ü	Ü
ß	ß

Wenn im Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen diese Zeichen maskiert werden.

Zeichen	Zeichenfolge
<	<
>	>
&	&
"	"

Textabsätze definieren:

<p> (p = paragraph) fügt eine Absatzschaltung ein, die mit </p> abgeschlossen wird. Textabsätze werden linksbündig ausgerichtet, wenn nicht anders angeben. Ein Textabsatz kann auch zentriert oder rechtsbündig ausgerichtet werden. Sogar Blocksatz ist möglich. (Achtung: Nicht alle Browser beherrschen den Blocksatz!)

Beispiel 2:

<p>Dies ist das HTML-Grundgerüst.</p>
<p align=center>Dieser Absatz ist zentriert.</p>
<p align=right>Dies ist ein Absatz, der rechts ausgerichtet wird.</p>
<p align=justify>...</p>

Beispiel 2: So sieht's aus

Überschriften:

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden. Jede Überschrift ist ein eigener Absatz, d.h. vor und nach Überschriften sind keine Absatzschaltungen nötig. Eine Überschrift kann auch zentriert oder rechtsbündig ausgerichtet werden. Sogar Blocksatz ist möglich.

Beispiel 3:

<h1 align=center>Überschrift 1. Ordnung</h1>
<h3 align=right>Überschrift 3. Ordnung</h3>
<h4 align=justify>Überschrift 4. Ordnung</h4>

Beispiel 3: So sieht's aus

Zeilenumbruch erzwingen:

<br> (br = break = Umbruch) fügt an der gewünschten Stelle einen Zeilenumbruch ein.

Schriftgröße:

<font size=...> bestimmt die Schriftgröße (font size = Schriftgröße). Man kann den Wert absolut in Zahlen zwischen 1 und 7 angeben, oder relativ im Verhältnis zur Normalschriftgröße mit +(Zahl) bzw. -(Zahl). Die Normalschriftgröße ist 3. Mit </font> wird der Abschnitt mit anderer Schriftgröße beendet.

Textformatierungen:

Es stehen verschiedene HTML-Befehle zur Verfügung, um Textabschnitte zu formatieren.

Beispiel 4:

<b>Fetter Text</b><br>
<i>Kursiver Text</i><br>
<font size=5> <u>Unterstrichener Text in Schriftgröße 5</u></font> Text in Normalschriftgröße

Beispiel 4: So sieht's aus

Grafiken einbinden:

Um Grafiken in eine HTML-Datei einzubinden, braucht man einen Befehl, um die gewünschte Grafikdatei an der gewünschten Stelle innerhalb der HTML-Datei zu referenzieren. Geeignete Dateiformate für WWW-gerechte Grafiken sind GIF und JPEG.
Die Grafikreferenz beginnt mit <img src= (img = image = Bild, src = source = Quelle). Hinter dem Istgleichzeichen gibt man den Namen der Grafikdatei an, auf die verwiesen wird. Der Dateiname muss in Anführungszeichen stehen. Der Befehl für die Grafikreferenz endet mit >.
Soll die Grafik zentriert werden, so ist die Grafikreferenz in <center> </center> einzuschließen.

Hintergrundbild einbinden:

Die Angabe zum Einbinden eines Hintergrundbildes erfolgt im einleitenden <body>-Tag der HTML-Datei. Mit der Zusatzangabe background= wird eine Grafikdatei als Hintergrundbild (background = Hintergrund) bestimmt.

Beispiel 5:

Beispiel 5: So sieht's aus

Verweise in HTML:

Das Setzen eines Verweises beginnt mit <a href= (a = anchor = Anker, href = hyper reference = Hyper(text)-Referenz). Hinter dem Istgleichzeichen gibt man das Verweisziel an. Das Verweisziel muss in Anführungszeichen stehen. Dahinter endet das einleitende Tag mit >. Es folgt der Text, der dem Anwender als Verweis angeboten wird (bei den meisten WWW-Browsern andersfarbig, häufig unterstrichen). Dahinter wird das abschließende Tag </a> notiert.
Das Verweisziel kann sein

eine Stelle innerhalb der gleichen HTML-Datei
eine andere HTML-Datei im eigenen Projekt
eine beliebige WWW-Adresse

Bei einem Verweis innerhalb der gleichen HTML-Datei muss zunächst das Verweisziel definiert werden.
Die Definition eines Verweisziels (Ankers) beginnt mit <a name= (a = anchor = Anker). Hinter dem Istgleichzeichen steht der Name des Verweisziels in Anführungszeichen. Hinter dem Verweiszielnamen endet das einleitende Tag mit >. Dann folgt ein Inhalt, zu dem der Verweis führen soll. Dahinter wird das abschließende Tag </a> notiert.
Beim Setzen des Verweises muss dem Namen ein # vorangestellt werden.

Beispiel 6:

<a name="anfang"><h1>Klasse 8<h1></a>
<p>......</p>
<a href="#anfang">Zum Anfang der Datei</a>

Beispiel 6: So sieht's aus

Ein Verweis zu einer anderen HTML-Datei im eigenen Projekt erfolgt durch Angabe der Projektdatei und einem entsprechenden Verweistext.
Bei einem Verweis zu einer beliebigen WWW-Adresse muss diese nach http:// angegeben werden.

Beispiel 7:

<a href="beispiel6.htm">Projektdatei Beispiel 6</a>
<a href="http://www.mannheim.de/lfg">LFG-Homepage</a>

Beispiel 7: So sieht's aus

Tabellen:

<table> leitet eine Tabelle ein (table = Tabelle). Wenn die Tabelle sichtbare Gitternetzlinien enthalten soll, muss der Zusatz border mit angeben werden (border = Rand). Am Ende der Tabelle folgt ein abschließendes Tag </table>.

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert. Am Ende einer Tabellenzeile wird ein abschließendes Tag </tr> notiert.

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellen wird hervorgehoben. <th> definiert eine Kopfzelle, <td> eine normale Datenzelle (th = table header = Tabellenkopf, td = table data = Tabellendaten). Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert und mit </th> bzw. </td> abgeschlossen. In einer Tabellenzelle können beliebige Elemente stehen, d.h. außer normalem Text z.B. auch Verweise oder eine Grafik.

Beispiel 8:

<table>
<tr>
<td>Verweis zu einer HTML-Datei im eigenen Projekt:</td>
<td><a href="beispiel7.htm">Projektdatei Beispiel 7</a></td>
</tr>
<tr>
<td>Verweis zu einer WWW-Adresse:</td>
<td><a href="http://www.mannheim.de/lfg">LFG-Homepage</a></td>
</tr>
<tr>
<td><font size=5>Grafik in einer Zelle:</font></td>
<td><img src="html.gif"></td>
</tr>
</table>

Beispiel 8: So sieht's aus

Zum Anfang der Datei