[HTML] Grundgerüst

Dieses Tutorial ist für diejenigen gedacht, die noch nie zuvor mit HTML gearbeitet haben, aber gerne damit anfangen wollen. All jenen, die bereits Ahnung von HTML haben, wird dieses Tutorial keine neuen Kenntnisse vermitteln.

Zu allererst einmal: Die HTML-Befehle nennen sich Tags und stehen in eckigen Klammern (<; >). Die meisten von ihnen werden geöffnet und später wieder geschlossen. Auf diese Weise werden HTML-Dokumente in verschiedene Bereiche geteilt. Es existieren aber auch Tags, die nicht geschlossen werden, aber dazu komme ich später.
Um dem Browser, der das HTML-Dokument interpretieren soll, zu sagen, dass es sich um HTML handelt, müssen wir ihm das mit dem entsprechenden Tag klar machen.

HTML:
 1 
 2 
<html>
</html>

Wie man sieht, heißt das angesprochene Tag html. Es steht wie gesagt in eckigen Klammern. Das schließende Tag erkennen wir am Slash (/), denn so werden alle Tags in HTML geschlossen. Bei Tags, von denen es eine öffnende und eine schließende Version gibt, steht der Slash beim schließenden Tag vor dem Tag-Namen.
Nun weiß der Browser also, dass es sich um ein HTML-Dokument handelt. So weit so gut. Nun hat ein HTML-Dokument grundsätzlich zwei wichtige Bereiche: einen Kopf (engl. head) und einen Körper (engl. body). Fügen wir diese doch einfach mit in das HTML-Dokument ein und zwar zwischen die beiden html-Tags:
HTML:
 1 
 2 
 3 
 4 
 5 
 6 
<html>
    <head>
    </head>
    <body>
    </body>
</html>

Auch ganz einfach. Kopf oben, Körper unten. Wie es sich gehört. Damit lässt sich schon einiges anfangen.
In den Kopf eines HTML-Dokumentes kommen Infos für den Browser und Suchmaschinen. So genannte Meta-Daten, auf die ich hier allerdings nicht näher eingehen werde. Entscheidend ist hier der Titel des HTML-Dokumentes. Dieser erscheint später ganz oben in der Leiste, wo auch der Browsername steht und ebenso in der Taskleiste. Auch hier ist der Tag-Name recht einfach: title, das ist schon alles. Und so könnte es aussehen:
HTML:
 1 
 2 
 3 
 4 
 5 
 6 
 7 
<html>
    <head>
        <title>Titel des Dokuments</title>
    </head>
    <body>
    </body>
</html>

Bislang ist alles noch ganz easy. Und das bleibt es auch.
Wir sind jetzt so weit, das HTML-Dokument mit Text zu füttern. Alles, was der Browser ausgeben soll, kommt in den HTML-Körper.
Ich werde gleich ein wenig formatierten Text benutzen, um mehrere Tags auf einmal erklären zu können:
HTML:
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
<html>
    <head>
        <title>Titel des Dokuments</title>
    </head>
    <body>
        <h1>Dies ist eine gro&szlig;e &Uuml;berschrift</h1>
        Hier folgt ganz normaler, unformatierter Text...
        <br />
        <b>FETT</b>, eine neue Zeile. Sogar <i>kursiv</i> kann man schreiben. Oder aber <u>unterstrichen</u>!<br />
        <div align="center">Diese Zeile ist zentriert.</div>
        <br />
        <div align="right">Diese hier ist am rechten Rand ausgerichtet. Mit align="left" wird sie links ausgerichtet.</div>
        <br />
        <a href="http://www.madman-maniac.de/" target="_blank">Ich bin ein Link</a>
        <br />
        <img src="bild.jpg" width="50" height="80" border="0" alt="Ein Bild" />
    </body>
</html>

Das waren jetzt tatsächlich ziemlich viele neue Tags. Angefangen mit h1, um eine Überschrift zu definieren. Dabei ist h1 die größte Überschrift. Es geht über h2 etc. bis runter zu h6, welches die kleinste ist.
Dann haben wir das Tag br. Damit erzeugen wir einen Zeilenumbruch. br ist eines der Tags, das kein schließendes Tag besitzt, daher muss es sich selbst schließen. Zwar ist das zur korrekten Interpretation des Dokuments durch den Browser nicht zwingend erforderlich, aber es zeichnet guten und korrekten HTML-Code aus. Damit sich so ein Tag selbst schließt, wird der Slash nachgestellt wie man sieht.
Um Textstücke fett (engl. bold), kursiv (engl. italic) oder unterstrichen (engl. underlined) darzustellen, gibt es die Tags b, i und u.
Man kann Texte auch in eigene Bereiche packen. Zum Beispiel mit dem div-Tag. Alternativ dazu gibt es auch das p-Tag. Dabei gibt das Attribut align an, wie dieser Bereich ausgerichtet werden soll: zentriert (engl. center), linksbündig (engl. left), rechtsbündig (engl. right) oder als Blocksatz (engl. justify).
Einen Link erstellen wir mit dem a-Tag (a wie engl. anchor = Anker). Er hat immer das Attribut href, welches angibt, worauf der Link zeigt. Im Beispiel ist das mein Website. Externe Links müssen immer mit http:// (oder je nachdem https:// ftp:// etc.) eingeleitet werden. Alternativ kann man das Attribut target hinzufügen, welches angibt, wo der Link geöffnet werden soll. _blank bedeutet, dass der Link in einem neuen Browserfenster geöffnet werden soll. Es gibt noch _top, um den Link im nächsthöheren Frame zu öffnen; _parent öffnet den Link im selben Fenster und löst dabei das Frameset auf; mit _self wird der Link im gleichen Fenster geöffnet.
Um Bilder in das Dokument einzufügen, gibt es das img-Tag. Das Attribut src bestimmt dabei den Dateinamen des Bildes inkl. evtl. der Adresse, falls das Bild nicht im gleichen Ordner wie das HTML-Dokument liegt. Mit width (= Breite) und height (= Höhe) werden die Ausmaß des Bildes in Pixeln bestimmt. Die Breite des Rahmens um das Bild (falls es als Link gebraucht wird) wird mit dem Attribut border bestimmt; auch hier werden die Angaben in Pixeln gemacht. Ein alternativer Text, der ausgegeben wird, wenn man mit dem Cursor über das Bild fährt oder falls die Bilddatei nicht gefunden werden kann, wird mit dem Attribut alt definiert..
Umlaute und Sonderzeichen lassen sich leider nicht in jeder Sprache ohne weiteres anzeigen, daher muss man sie in HTML als solche Definieren. So werden aus den kleinen Umlauten ä, ö und ü in HTML &auml;, &ouml; und &uuml; (Buchstabe + uml für Umlaut). Dazu analog werden aus den großen Umlauten Ä, Ö und Ü in HTML &Auml;, &Ouml; und &Uuml;. Aus ß wird &szlig; (= sz-Ligatur). Ein kaufmännisches Und (&) wird zu &amp;. Darüberhinaus gibt es noch etliche andere Sonderzeichen, die sich auf diese Weise in HTML darstellen lassen. Aber eines haben alle gemeinsam: Sie beginnen mit einem kaufmännischen Und und enden mit einem Semikolon.
Damit lassen sich schonmal ganz einfache HTML-Dokumente erstellen.

Was man mit HTML sonst noch so anstellen kann und genauere Erklärungen zu den Tags erklärt SelfHTML sehr ausführlich.

nach oben