header

Stand: 25.02.2009,  Contact

Valid HTML 4.01 Transitional

HTML Einführung

Im Rahmen eines kurzen Vortrages an der Universität Graz


Schritt 1: Eine HTML-Seite erstellen.

Allgemeines zu HTML (HyperText Markup Language):
The World Wide Web Consortium (W3C) setzt Standarts für HTML.

Mehr Informationen zu HTML.

HTML:

Um eine HTML-Seite zu erstellen genügt es einen einfachen Editor (notepad) zu benutzen. Alternativ können auch Editoren wie Dreamveaver, NVU oder Amaya verwendet werden. Diese sind zum Teil kostenlos im Internet erhältlich.

Das Grundgerüst einer HTML-Seite schaut folgend aus:
HTML Befehle beginnen mit <Befehl [Attribut="Wert"]> und enden häufig mit </Befehl>.

<html>HTML-Seite</html>
<head><title>Titel</title></head>
<body>Hier steht die Homepage</body>

Grundsätzlich ist HTML tolerant in Bezug auf Fehler. Wird z.B. der letzte Befehl </html> vergessen wird die Seite trotzdem korrekt angezeigt. Dass Fehler nicht angezeigt werden macht die Fehlersuche allerdings schwieriger.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
 <!-- Inhalt der Datei -->
Hier entsteht die erste Homepage
</body>
</html>

So sieht´s aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

Wird angegeben für HTML Standart Seiten.
The World Wide Web Consortium


Schritt 2: Seite online stellen.

Erstellen einer persönlichen Homepage in den Ausbildungszentren:

Studierende haben die Möglichkeit, unter Berücksichtigung der vorgegebenen Richtlinien eine persönliche Homepage auf ihrem Home-Verzeichnis zu gestalten und diese im Internet zu präsentieren.
Es wurde dafür ein eigenes Unterverzeichnis namens public.www auf dem Laufwerk H: oder Laufwerk Z: der Ausbildungszentren eingerichtet. Bitte löschen Sie dieses Verzeichnis nicht. In diesem Verzeichnis können Sie eine Datei index.html erstellen, die automatisch angezeigt wird, wenn ein WWW-Browser die Internetadresse Ihrer Homepage aufruft.

Die Internetadresse (URL Uniform Ressource Locator) Ihrer Homepage lautet:
http://www.stud.uni-graz.at/~username
Beispiel: Username lautet 03muster
URL für die Homepage würde lauten: http://www.stud.uni-graz.at/~03muster


Schritt 3: Zeichen.


2 Sonderzeichen:
Mehr als ein Leerzeichen wird ignoriert, von daher muss ein Befehl für erzwungene Leerzeichen verwendet werden: &nbsp; (non breaking space)
Zeilenumbrüche werden mittels <br> erzeugt.
Für Umlaute siehe Link.
Eine Liste aller Befehle Referenz Zeichen.

Zeichen formatieren:

Texte werden in HTML unter:
<p> </p> (p = paragraph = Absatz)
geschrieben.

Durch Attribute im einleitenden <font>-Tag können Sie Schriften formatieren.

Mittels <font size=" " color=" " bgcolor=" " face=" ">Text</font> definieren Sie einen Bereich für Schriftformatierung. Wenn Sie also beispielsweise Textabsätze damit auszeichnen wollen, müssen Sie das font-Element jedesmal innerhalb von <p>...</p> notieren. Die Browser sehen es zwar nicht so eng, wenn Sie es schlampiger verwenden, aber dann ist es nicht mehr HTML-Standard-konform.

Farbe des Textes:

<font color="..."> bestimmt die Schriftfarbe (font color = Schriftfarbe).

RGB (red, green, blue) im Hexadezimalformat.
Tabelle mit Farbwerten:
Name Farbwert
black #000000
maroon #800000
green #008000
olive #808000
navy #000080
purple #800080
teal #008080
gray #808080
silver #C0C0C0
red #FF0000
lime #00FF00
yellow #FFFF00
blue #0000FF
fuchsia #FF00FF
aqua #00FFFF
white #FFFFFF

size bestimmt die Schriftgröße (font size = Schriftgröße). Sie können den Wert in Zahlen zwischen 1 und 7 angeben, oder relativ im Verhältnis zur Normalschriftgröße mit +Zahl bzw. -Zahl. Die Normalschriftgröße ist 3.

<font face="..."> bestimmt die Schriftart (font face = Schriftart). Als Wert können Sie die Namen einer oder mehrerer Schriftarten zuweisen. Wenn Sie mehrere Schriftarten angeben, trennen Sie die Schriftartnamen durch Kommata. Bei mehreren angegebenen Schriftarten versucht der WWW-Browser zuerst, den Text in der ersten angegebenen Schriftart darzustellen (im Beispiel in Avalon). Wenn diese Schrift beim Anwender nicht installiert ist, wird versucht, die zweite angegebene Schrift (im Beispiel Wide Latin) zu nehmen. Wenn keine der angegebenen Schriftarten beim Anwender darstellbar ist, bleibt die Angabe wirkungslos.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Schriftart, Schriftgröße und Schriftfarbe</title>
</head>
<body>
<p> <font size="7">Ziemlich riesiger Text</font><br>
<font size="1">Ziemlich winziger Text</font><br>
<font size="+1">Text etwas größer als normal</font><br>
<font size="-2">Text deutlich kleiner als normal</font>
</p>
<p> <font color="#FF0000">Knallroter Text</font><br>
<font color="#00C000">Grüner Text</font><br>
<font color="#0000FF">Blauer Text</font>
</p>
<p> <font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
oder, falls Avalon nicht darstellbar, in Wide Latin</font>
</p>
</body>
</html>

So sieht´s aus

Überschrifen definieren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>&Überschriften definieren</title>
</head>
<body>
<h1>Überschrift 1. Ordnung</h1>
<h2>Überschrift 2. Ordnung</h2>
<h3>Überschrift 3. Ordnung</h3>
<h4>Überschrift 4. Ordnung</h4>
<h5>Überschrift 5. Ordnung</h5>
<h6>Überschrift 6. Ordnung</h6>
</body>
</html>

So sieht´s aus


kursiv: <i> </i>
fett: <b> </b>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
 <!-- Inhalt der Datei -->
<i>Ein kursiver Text</i><br>
<b>Ein fett geschriebener Text</b>
</body>
</html>
So sieht´s aus

Horizontale Linie:<hr>

Schritt 4: Texte.

<p> (p = paragraph = Absatz) leitet einen Textabsatz ein. </p> beendet den Textabsatz und steht am Ende des Absatztextes.


Durch die Angabe align="center" im einleitenden <p>-Tag erreichen Sie, dass der Textabsatz zentriert ausgerichtet wird (align = Ausrichtung, center = zentriert). Mit align="right" wird der Absatz rechtsbündig ausgerichtet (right = rechts). Mit align="justify" erzwingen Sie den Blocksatz für den Absatz (justify = justieren). Mit align="left" können Sie die Normaleinstellung (linksbündige Ausrichtung) angeben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
 <!-- Inhalt der Datei -->
ohne Formatierung:
<p> Erstellen einer persönlichen Homepage in den Ausbildungszentren Studierende haben die Möglichkeit, unter Berücksichtigung der vorgegebenen Richtlinien eine persönliche Homepage auf ihrem Home-Verzeichnis zu gestalten und diese im Internet zu präsentieren. Es wurde dafür ein eigenes Unterverzeichnis namens public.www auf dem Laufwerk H: der Ausbildungszentren eingerichtet. Bitte löschen Sie dieses Verzeichnis nicht. In diesem Verzeichnis können Sie eine Datei index.html erstellen, die automatisch angezeigt wird, wenn ein WWW-Browser die Internetadresse Ihrer Homepage aufruft. </p>

mit Formatierung:
<p align="justify"> Erstellen einer persönlichen Homepage in den Ausbildungszentren Studierende haben die Möglichkeit, unter Berücksichtigung der vorgegebenen Richtlinien eine persönliche Homepage auf ihrem Home-Verzeichnis zu gestalten und diese im Internet zu präsentieren. Es wurde dafür ein eigenes Unterverzeichnis namens public.www auf dem Laufwerk H: der Ausbildungszentren eingerichtet. Bitte löschen Sie dieses Verzeichnis nicht. In diesem Verzeichnis können Sie eine Datei index.html erstellen, die automatisch angezeigt wird, wenn ein WWW-Browser die Internetadresse Ihrer Homepage aufruft. </p>

mit Formatierung rechtsbündig:
<p align="right"> Erstellen einer persönlichen Homepage in den Ausbildungszentren Studierende haben die Möglichkeit, unter Berücksichtigung der vorgegebenen Richtlinien eine persönliche Homepage auf ihrem Home-Verzeichnis zu gestalten und diese im Internet zu präsentieren. Es wurde dafür ein eigenes Unterverzeichnis namens public.www auf dem Laufwerk H: der Ausbildungszentren eingerichtet. Bitte löschen Sie dieses Verzeichnis nicht. In diesem Verzeichnis können Sie eine Datei index.html erstellen, die automatisch angezeigt wird, wenn ein WWW-Browser die Internetadresse Ihrer Homepage aufruft. </p>
</body>
</html>

So sieht´s aus