Kurzanleitung HTML

Willemers Informatik-Ecke

HTML ist eigentlich gar nicht schwer. Mit wenigen einfachen Befehlen lassen sich schon ordentliche Texte schreiben und miteinander verknüpfen. Aus diesem Grunde soll es hier auch nur um die essentiellen Bestandteile gehen. Mit Textverarbeitungen wie Starwriter ist es auch kein Problem, ein HTML-Dokument zu erstellen. HTML-Editoren gibt es bis zum Abwinken. Aber wer weiss, was dahintersteckt, hat Vorteile (und darf später auch JavaScript spielen).

Der Aufbau eines Dokumentes

Jedes HTML-Dokument wird mit <HTML> eingeleitet und hört mit </HTML> auf.

Jedes HTML-Dokument zerfällt in einen Kopf (HEAD) und einen Körper (BODY). Der <TITLE> erscheint in der Titelleiste des Browsers, aber nicht im Dokument. 

<HTML>
<HEAD>
<TITLE>Titel, steht im Verschiebebalken</TITLE>
</HEAD>
<BODY>



</BODY>
</HTML>

Alles zwischen <BODY> und </BODY> erscheint im Textteil des Browsers.

Hyperlinks

Ein Hyperlink dient zum Sprung an eine andere Stelle und ist das eigentlich interessante an HTML. Man kann an eine neue Datei im Dokument, eine andere Seite auf dem gleichen Server oder gar den Server wechseln. Der Sprungbefehl hat folgenden Aufbau:

<A HREF="ziel">Dieser Text wird unterlegt</A>

Um ein Sprungziel innnerhalb einer Datei zu definieren, wird der Befehl

<A NAME="ziel">

verwendet. Als Ansprungmarke muss dann ein # verwendet werden.

Beispiel:
Hier ist <A HREF="unfug.html">Quatsch</A> ohne Ende Ruft die Datei unfug.html auf dem gleichen Rechner
Hier ist <A HREF="#unfug">Quatsch</A> ohne Ende Sucht die Stelle unfug im aktuellen Dokument
Hier ist <A HREF="unfug.html#unfug">Quatsch</A> ohne Ende Sucht die Stelle unfug in der Datei unfug.html
Hier ist <A HREF="http://unfug">Quatsch</A> ohne Ende Ruft die Hauptseite des Rechners unfug und zeigt sie an.
Hier ist <A HREF="http://unfug/unfug.htm#unfug">Quatsch</A> ohne Ende Sucht die Stelle unfug in der Datei unfug.htm des Rechners unfug

Gliederung und Anordnung

Die Textausrichtung erfolgt durch den Browser. Unabhängig von der Ausrichtung des Rohtextes hängt er alles hintereinander weg. Will man eine Unterbrechung, muss man dafür ein Kommando geben.

Einen Absatz fügt man mit <P> ein. Soll nicht gleich ein Abstand zwischen den Absätzen erfolgen, sondern nur ein Zeilenvorschub, verwendet man <BR>. Dies ist beispielsweise bei Anschriften sinnvoll. Soll der Absatz besonders betont sein, verwendet man <HR>. Das erzeugt eine horizontale Linie.

Überschriften

Kapitel 1

 <H1>Kapitel 1</H1>

Kapitel 1.1

 <H2>Kapitel 1.1</H2>

Kapilel 1.1.1

 <H3>Kapitel 1.1.1</H3>

Kapitel 1.1.1.1

 <H4>Kapitel 1.1.1.1</H4>
Kapitel 1.1.1.1.1
 <H5>Kapitel 1.1.1.1.1</H5>

Aufzählungen

UL beginnt eine Aufzählung, /UL beendet sie. LI definiert einen Punkt. UL bedeutet unsorted list.

  • Erste Aufzählung, erster Punkt
    • Unterpunkt a)
    • Unterpunkt b)
  • Zweite Aufzählung, erster Punkt 
<UL>
<LI>Erste Aufzählung, erster Punkt
	<UL>
	<LI>Unterpunkt a) 
	<LI>Unterpunkt b)
	</UL>
<LI>Zweite Aufzählung, erster Punkt
</UL>

Tabellen

Eine in HTML geschriebene Tabelle sieht etwas kompliziert aus. Es ist aber halb so wild. Dafür übernimmt der Browser das korrekte Ausrichten. Man braucht also keine Gedanken darauf verschwenden, welchen Platz eine Spalte braucht.

Drei Schlüsselworte beschreiben eine Tabelle

tableDie ganze Tabelle
treine Spalte (tr = table row)
tdein Feld (td = tabelle drumherum)

Nun muss man sich klarmachen, dass zu jedem <ELEMENT> auch ein </ELEMENT> gehört. Und schon ist es ganz leicht, die folgende Tabelle zu basteln.
links oben rechts oben
links unten rechts unten 
  <table border>
  <tr>
     <td> links oben </td>
     <td> rechts oben </td>
  </tr>
  <tr>
     <td> links unten </td>
     <td> rechts unten </td>
  </tr>
  </table>

Ach ja, die BORDER! Die Tabelle bekommt nur dann einen Rahmen, wenn statt <table> <table border> geschrieben wird. BORDER ist hier das Attribut zu TABLE.

Auch ohne Rand machen Tabellen Sinn. Mann kann so leicht Dinge nebeneinander positionieren, so wie oben die Tabelle und der zugehörige Code.

Schriften

Listings und andere nicht proportionale Texte

Mit PRE wird Proportionalschrift abgeschaltet, mit /PRE wieder abgeschaltet. Der Text, der dazwischen steht wird auch so umgebrochen, wie er dort steht. Diese Art ist also ideal für Listungs und Tabellen.

Sonderzeichen

Sonderzeichen werden mit dem kaufmünnischen Und eingeleitet und mit einem Semikolon beendet. Dabei bedeuten:

Ä ä&Auml; &auml;
Ö ö&Ouml; &ouml;
Ü ü&Uuml; &uuml;
ß&szlig;
&&amp;
<&lt;
>&gt;

Wenn man mehr will...

Das ist der Einstieg, der ausreicht, um schnell ein paar Seiten zu erstellen. Eine Zusammenfassung der Formulare finden sich auf der nächsten Seite.

Wer mehr will und wirklich ausführliche Dokumentation sucht, sollte sich SelfHTML ansehen.

Homepage (C) Copyright 1999, 2000 Arnold Willemer