Kurzanleitung HTML
Willemers Informatik-Ecke
Webseiten werden in der Beschreibungssprache HTML (Hypertext Markup Language) erstellt.

Für die Gestaltung und Anordnung von HTML-Elementen wird HTML um die CSS (Cascading Style Sheets) ergänzt.

Mit JavaScript ist es möglich, Programme auf dem Browser laufen zu lassen. Ein Web-Client oder auch Browser (Chromium, Firefox, ...) ist also ein HTML-, CSS und JavaScript-Interpreter.

HTML (Hyper Text Markup Language) ist die Beschreibungssprache für Webseiten. HTML verwendet Befehle im Klartext, um die Formatierung von Texten zu beschreiben.

Der namensgebende Hyperlink macht es möglich, auf eine andere Textstelle zu verweisen. Der Anwender kann über den Link direkt dorthin springen.

Sie können einem Text hinterlegen, dass er beim Anklicken auf eine andere Stelle im gleichen Text, auf eine andere Seite der gleichen Website oder gar auf eine andere Seite einer anderen Webpräsenz springt.

Ein weiterer wichtiger Aspekt ist, dass Browser auf Smartphones oder in unvorsehbar großen Fenstern laufen. Darum sollte die Beschreibungssprache den verfügbaren Platz möglichst optimal nutzen. Die Ausrichtung erfolgt also nicht auf DIN A4 oder anderen Papierformaten, sondern auf den verfügbaren Platz.

Webseiten-Beschreibungssprache

HTML-Dateien enden auf .htm oder .html und werden in einem einfachen Editor als roher Text erstellt, wie er auch für Programmiersprachen verwendet wird.

Es gibt auch spezielle HTML-Editoren, wie etwa Bluefish.

Viele Textverarbeitungen wie beispielsweise LibreOffice ermöglichen den Export ihrer Dokumente in HTML. Allerdings erzeugen solche Exporte in der Regel sehr viele HTML- und CSS-Befehle, um die Webseiten dem Aussehen der Dokumente anzupassen.

Der Aufbau eines HTML-Dokuments

Mit <!DOCTYPE html> wird eine HTML-Datei als solche identifiziert. In den meisten Fällen funktioniert eine HTML-Seite allerdings auch ohne diese Zeile.

Ein HTML-Dokument wird mit dem Tag (sprich Täg) <html> eingeleitet und hört mit </html> auf, wird also quasi eingerahmt. Groß- und Kleinschreibung sind bei Tags nicht signifikant.

In diesem Rahmen aus html-Tags befinden sich nacheinander zwei weitere Rahmen: 

<!DOCTYPE html>
<html>
  <head>
    <titel>Titel, steht im Verschiebebalken</titel>
  </head>
  <body>

     Irgendwelcher Text

  </body>
</html>

Der HTML-Code wird im Klartext an den Browser gesendet, der den Inhalt interpretiert und darstellt. Sie können den Original-Code bei den meisten Browsern über die Tastenkombination [Strg]+[U] anzeigen lassen.

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

Texte und Leerräume

Der Text, der im Body-Bereich einer HTML-Seite wird aneinandergehängt ausgegeben, ganz gleich, wie er im Text ausgerichtet ist. Um eine Unterteilung des Textes zu erreichen, müssen Sie ein Tag bemühen. Die folgenden Tags dienen zur Unterbrechung des Fließtextes.
Tag Bedeutung
<br> Zeilenvorschub
<p> Absatz
<hr> Trennlinie

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

Überschriften werden durch die Tags H1, H2, H3 und so weiter definiert. H1 ist die oberste Ebene.

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;
„Anführungszeichen“&bdquo;Anführungszeichen&ldquo;
“englisch”&bdquo;englisch&ldquo;
»Guillemets«&raquo;Guillemets&laquo;

Einbinden anderer Seiten

Mit dem Tag iframe lassen sich Teile der Webseite aus anderen Dateien oder Quellen füllen. 
<iframe src="menu.htm" width=200 height=500>
</iframe>
Auf diese Weise können alle Seiten eines Verzeichnisses mit dem gleichen Menü versehen werden, die in der Datei menu.htm gestaltet wird. Diese enthält eine normale HTML-Seite.

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.