Titelbild
Username: Passwort:   Bei jedem Besuch automatisch einloggen
  registrieren  Passwort vergessen?
Tutorials

HTML - Tutorial


Inhaltsverzeichnis

  1. Allgemeiner Hinweis
  2. Software für HTML
  3. Grundgerüst einer HTML-Seite
  4. einige wichtige Tags zur Textformatierung
  5. Listen und Tabellen
  6. Attribute in Tags
  7. Farben in HTML
  8. Links erstellen
  9. Bilder auf der Homepage
  10. Die Tags <div> und <span>
  1. Das Attribut id
  1. Kommentare in HTML
  2. einige wichtige Metatags für den Kopf
  3. DTD - Document Type Definition


1. Allgemeiner Hinweis

Solltet ihr Fragen zu einem der folgenden Abschnitte haben, scheut euch nicht diese zu stellen. Meine email-Adresse findet ihr unter .kontakt. Ich werde versuchen sie dann so gut ich kann zu beantworten.

zurück zum Inhalt

1&1 Do-It-Yourself

2. Software für HTML

Um HTML zu lernen braucht man, abgesehen von ein wenig Ehrgeiz, nicht mehr als einen Browser (Internet Explorer, Opera, Mozilla Firefox, ...) und einen Texteditor, z.B. "notepad" unter Windows. Um notepad zu starten geht man auf Start -> Ausführen und gibt dort ins Textfeld "notepad" ein und bestätigt mit OK.

Da ich lieber einen Editor benutze, der syntax highlighting unterstützt, verwende ich Notepad++, den man sich kostenlos runterladen und installieren kann. Aber auch hier gibt es, wie bei den Browsern, zahllose Alternativen.

Dann kann's ja schon losgehen!

Um das erste kleine Erfolgserlebnis zu haben, schreiben wir nun zunächst "Meine erste Homepage" in den geöffneten Editor und speichern die Datei unter "homepage1.html" ab. Am besten legt man sich vorher einen Ordner an, in dem man seine HTML-Dateien speichert. Die erstellte Datei kann man nun mit seinem Browser öffnen. HTML-Dateien werden immer unter der Endung ".html" (oder auch ".htm") abgespeichert.
Eine Homepage, die nur Text enthält könnte man also theoretisch erstellen, in dem man seinen Editor mit dem anzuzeigenden Text vollschreibt und die Datei dann beispielsweise unter "textOnlyhp.html" abspeichert. Wenn das dein Ziel war, hast du es bereits erreicht ;)
Für die anderen geht's jetzt erst richtig los.

zurück zum Inhalt

3. Grundgerüst einer HTML-Datei

HTML verwendet sogenannte Tags, um den Inhalt einer Seite zu strukturieren. Es gibt sogenannte Start- und Endtags. Das Grundgerüst einer HTML-Datei, das du jetzt kennen lernen wirst, besteht ausschließlich aus einer Reihe Start- und Endtags:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Tags sind also in eckige Klammern eingefasste Wörter. Jedes Starttag <...> wird durch ein entsprechendes Endtag (mit Schrägstrich "/") beendet.

  • Zwischen <html> und </html> steht der gesammten Dateiinhalt.
  • Zwischen <head> und </head> stehen Metatags und die Location externer Stylesheets-Definitionen. Das interessiert uns jetzt aber noch überhaupt nicht, wir werde später darauf näher eingehen. Das einzige was uns interessiert sind die
  • <title> und </title> Tags, zwischen denen wir den Titel unserer ersten Homepage angeben können.
  • Zwischen dem <body>-Starttag und dem </body>-Endtag steht nun der gesamte Inhalt, der auf unserer Homepage zu sehen sein soll.

Um nun unsere erste Homapage zu vollenden, tragen wir also folgendes in den Editor ein und speichern die Datei unter "meineErsteHP.html" ab:

<html>
<head>
<title>Meine erste Homepage</title>
</head>
<body>
<p>Wie der Titel schon sagt, ist das meine erste Homepage!</p>
</body>
</html>

Hierbei ist euch vielleicht das <p>-Tag aufgefallen. Das 'p' kommt vom englischen Wort 'paragraph' und heißt soviel wie Absatz. Wir haben also einen Absatz erzeugt.

zurück zum Inhalt

4. einige wichtige Tags zur Textformatierung

In diesem Abschnitt werden einige Tags zur Textformatierung vorgestellt. Um sich an die Verwendung dieser Tags zu gewöhnen sollte man selber ein wenig mit ihnen herum experimentieren. Um sich die Bedeutung der Tags besser einprägen zu können, hab ich die entsprechenden Eselsbrücken in Klammern dahinter geschrieben.
Das <p>-Tag haben wir ja bereits im letzten Abschnitt kennen gelernt.

Um einen Zeilenumbruch zu Erzeugen wird das <br>-Tag ('break') benutzt, das die Besonderheit hat, dass bei der Verwendung kein Endtag notwendig ist. Man kann also in einem Text folgendes schreiben:

Das ist ein <br> Zeilenumbruch

Auf der Homepage sieht das dann wie folgt aus:

Das ist ein
Zeilenumbruch

Passend zum <br>-Tag gibt es das <nobr>-Tag ('no break'), das einen Zeilenumbruch verhindert. Man fügt einfach den Text, den man nicht umgebrochen haben möchte, zwischen Start- und Endtag ein. Hier ein Beispiel:

<nobr>Es folgt ein super langer Text, der nicht umgebrochen wird, weil wir das mit nobr verhindern. Also kann man schreiben was man will, die Zeile scheint endlos zu sein. Vielleicht kennt ihr das ABC ja noch nicht, also dann mal los: ABCDEFGHIJKLMNOPQRSTUVWXYZ (ich hoffe ich hab mich da jetzt nicht vertippt!).</nobr>

Da das mein Layout jetzt total kaputt machen würde kann man sich das mal hier angucken wie das dann aussieht.

Mit den Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> ('head(line)') lassen sich Überschriften in verschiedenen Größen erzeugen. Es wird automatisch ein Absatz erzeugt und der Text erscheint fettgedruckt.

<h1>große Überschrift (h1)</h1>
<h2>kleinere Überschrift (h2)</h2>
<h3>noch kleiner (h3)</h3>
<h4>noch kleiner (h4)</h4>
<h5>noch kleiner (h5)</h5>
<h6>noch kleiner (h6)</h6>

Dies sieht dann wie folgt aus:

große Überschrift (h1)

kleinere Überschrift (h2)

noch kleiner (h3)

noch kleiner (h4)

noch kleiner (h5)
noch kleiner (h6)

Die Tags <u> ('underline'), <i> ('italic') und <b> ('bold') kann man (beispielsweise) wie folgt verwenden

<u>Dieser Text erscheint unterschtrichen.</u><br>
<i>Dieser Text erscheint kursiv.</i><br>
<b>Dieser Text erscheint fettgedruckt.</b><br>
<b><u>Dieser Text erscheint fettgedruckt und unterstrichen.</u></b>

Das sieht dann so aus:

Dieser Text erscheint unterschtrichen.
Dieser Text erscheint kursiv.
Dieser Text erscheint fettgedruckt.
Dieser Text erscheint fettgedruckt und unterstrichen.

Um eine horizontale Linie in seinen Text einzufügen, benutzt man das <hr>-Tag ('horizontal rule'). Auch hier kann man das Endtag weglassen:

Dieser Text wird durch eine horizontale Linie <hr> getrennt dargestellt.

Das sieht so aus:

Dieser Text wird durch eine horizontale Linie
getrennt dargestellt.

zurück zum Inhalt

5. Listen und Tabellen

HTML bietet die Möglichkeit relativ einfach Listen und Tabellen auf einer Homepage einzubetten. Letztere werden häufig sogar genutzt um das Layout einer kompletten Seite festzulegen. Das wollen wir hier allerdings nicht vorführen, da es für diesen Zweck die CSS (Cascading Stylesheets) gibt, die wir später kennen lernen werden. Tabellen sollen einfach dazu dienen tabellarische Daten, wie die Bundesliga-Tabelle darzustellen.

Fangen wir nun aber zunächst mit Listen an. Es gibt verschiedene Arten von Listen, wir wollen uns hier auf die zwei wichtigsten beschränken, die <ul>- ('unordered list') und die <ol>-Liste ('ordered list'). Wie diese im einzelnen verwendet werden können wir im folgenden Beispiel sehen:

<ul>
  <li>ein Eintrag</li>
  <li>noch ein Eintrag</li>
  <li>...</li>
</ul>
<ol>
  <li>erstens</li>
  <li>zweitens</li>
  <li>...</li>
</ol>

Das sieht dann so aus:

  • ein Eintrag
  • noch ein Eintrag
  • ...
  1. erstens
  2. zweitens
  3. ...

Wie ihr vielleicht festgestellt habt, ist das Inhaltsverzeichnis dieses Tutorials eine <ol>-Liste.

Tabellen sind etwas komplizierter zu erstellen. Wieder soll uns ein Beispiel als Hilfe dienen:

<table>
  <tr>
    <th>Manschaft</th>
    <th>Punkte</th>
  </tr>
  <tr>
    <td>FC Bayern München</td>
    <td>33</td>
  </tr>
  <tr>
    <td>SV Werder Bremen</td>
    <td>23</td>
  </tr>
</table>

Eine Tabelle wird also über das <table>-Tag definiert und besteht aus beliebig vielen Zeilen, die per <tr>-Tag erzeugt werden.In diesem Fall enthält die erste Zeile einen 'table header' (<th>-Tag), die restlichen Zeilen enthalten die eigentlichen Tabellen-Daten im <td>-Tag ('table data').
Auf der Homepage sieht das dann so aus:

Manschaft Punkte
FC Bayern München 33
SV Werder Bremen 23

Dieses Beispiel zeigt nur im Ansatz, was man mit Tabellen alles machen kann. Für uns soll das aber zunächst reichen. Wir werden später auf die Formatierungsmöglichkeiten in Tabellen zurück kommen.

zurück zum Inhalt

6. Attribute in Tags

In vielen (Start-)Tags können weitere Informationen (Farbe, Breite, Ausrichtung, ...), Attribute genannt, angegeben werden. Diesen Attributen kann dann ein Wert zugewiesen werden. Dafür notiert man den Attributnamen, gefolgt von einem Gleichheitszeichen und dem Attributwert in Anführungszeichen.
Wir wollen das hier mal für das Attribut "Hintergrundfarbe" ('bgcolor') zeigen. Dafür gehen wir davon aus, dass unsere Homepage die schöne Farbe rot als Hintergrund erhalten soll. Wir notieren das bgcolor-Attribut also im <body>-Tag:

<html>
<head>
<title>Meine erste Homepage</title>
</head>
<body bgcolor="red">
<p>Wie der Titel schon sagt, ist das meine erste Homepage!</p>
</body>
</html>

Diese Datei speichern wir unter "roterBackground.html" ab und öffnen sie mit unserem Browser. Das Ergebnis müsste dann so aussehen klick mich!.

Wenn uns im folgenden ein Tag begegnet, das zusätzliche Informationen enthält, wissen wir, dass es sich dabei um Attribute handelt.

zurück zum Inhalt

7. Farben in HTML

Im letzten Kapitel haben wir unserer Homepage eine schöne rote Hintergrundfarbe verpasst. Auffallend war, dass wir einfach das englische Wort für rot 'red' nutzen konnten und unser Browser das anscheinend richtig interpretiert hat. In HTML gibt es einige vordefinierte Farben, für die man einfach die engliche Bezeichnung als Attributwert nehmen kann. Beispiele hierfür sind 'yellow', 'blue', 'black', 'white', 'green' und 'gray'. Um allerdings Farben außerhalb dieser vordefinierten Werte nutzen zu können, muss man die alternative Angabemöglichkeit (ein wenig) verstehen.

Die Farbdefinitionen in HTML basieren auf dem RGB-Farbraum ('rot-grün-blau'). Für jede dieser Farben sind 256 Werte vorgesehen. Dies lässt sich im Hexadezimalsystem einfach erreichen und zwar mit drei zweistelligen Hexadezimalzahlen. Der Unterschied zu unserem Dezimalsystem (0, 1, 2, ..., 9) liegt darin, dass es für jede Stelle sechzehn verschieden Möglichkeiten gibt, der Wertebereich also von 0 bis 15 geht. Um mit unserem System nicht durcheinander zu kommen, zählt man ab 9 bei "a" weiter, so dass sich folgende mögliche Werte ergeben:

Dezimalsystem01 234 567 8910 111213 1415
Hexadezimalsystem01 234 567 89a bcd ef

Nun haben wir ja bereits gesagt, dass jede der drei Farbe zwei Hexadezimalstellen zur Verfügung hat. Das macht genau 162 = 256 Kombinationsmöglichkeiten. Nun müssen wir nur noch wissen, wie man in HTML diese Farbwerte nutzt. Dafür führen wir das neue Tag <font> ein und zeigen die Anwendung an einem Beispiel:

<font color="white"> weiß </font><br>
<font color="#ffffff"> auch weiß </font><br>
<font color="black"> schwarz </font><br>
<font color="#000000"> auch schwarz </font><br>
<font color="red"> red </font><br>
<font color="#ff0000"> reines rot </font><br>
<font color="green"> green </font><br>
<font color="#00ff00"> reines grün </font><br>
<font color="blue"> blue </font><br>
<font color="#0000ff"> reines blau </font><br>
<font color="#125327"> komsiche Mischfarbe </font><br>
<font color="#5a78c2"> noch eine komische Mischfarbe </font>

Auf einer Homepage sieht's dann so aus:

weiß
auch weiß
schwarz
auch schwarz
red
reines rot
green
reines grün
blue
reines blau
Mischfarbe
noch eine Mischfarbe

Wir haben nun also bereits gelernt, wie wir eine Hintergrundfarbe vergeben und unseren Text farblich aufpeppen.

zurück zum Inhalt

8. Links erstellen

Kommen wir nun zu einem HTML-Element, ohne das keine Homepage auskommt - Links.
Hinter diesen anklickbaren Texten (oder auch Bildern), die einen auf andere Seite lotsen, scheint eine ausgeklügelte und nur schwer erlernbare Programmierkunst zu stecken. In Wirklichkeit ist es aber ganz einfach. Man muss sich nur ein weiteres Tag merken, das <a>-Tag.
Folgendes Beispiel zeigt wie's funktioniert:

ein externer Link, der sich in einem neuen Fenster öffnet:<br>
<a href="http://www.google.de" target="blank"> Die Suchmaschine Google</a><br>
ein Link, der auf eine HTML-Datei innerhalb des aktuellen Ordners verweist:<br>
<a href="./bsplink.html"> HTML-Datei im aktuellen Ordner</a><br>

Auf der Homepage würde das so angezeigt:

ein externer Link, der sich in einem neuen Fenster öffnet:
Die Suchmaschine Google
ein Link, der auf eine HTML-Datei innerhalb des aktuellen Ordners verweist:
HTML-Datei im aktuellen Ordner

Im Attribut href steht also auf welche Adresse verwiesen werden soll. Zwischen Start- und Endtag wird der Text angegeben, der auf der Homepage zu sehen sein soll.
Will man Google im aktuellen Browserfenster öffnen lässt man einfach das Attribut target="blank" weg. Das a steht übrigens für 'anchor' und href für 'hyper reference'.

relative Pfadangaben

In der Angabe zum zweiten Link findet sich eine relative Pfadangabe, das heißt man gibt bezogen auf den aktuellen Ordner den Pfad zu der Datei an auf die man verweist. Da die Datei in diesem Fall im gleichen Ordner steht, wie die HTML-Datei für dieses Tutorium reicht ein ./ vor dem Dateinamen bspLink.html. Folgende Angaben sind beispielsweise auch möglich:

Für die folgenden Fälle gehen wir davon aus, dass sich die aktuelle Datei (von der aus die Datei "dateiname.html" aufgerufen werden soll) im Ordner "Unterordner1" irgendwo auf der Festplatte befindet.

Die Datei liegt im gleichen Ordner (entspricht dem Fall oben):
  ./dateiname.html
Die Datei liegt im übergeordneten Ordner:
  ../dateiname.html
Im Überordner gibt es (außer dem Ordner "Unterordner1", in dem unsere aktuelle Datei liegt) einen Ordner der "Unterordner2" heißt, in dem sich die Datei dateiname.html befindet:
  ../Unterordner2/dateiname.html
Die Datei liegt in einem Unterodner des aktuellen Ordners (hier "Subunterordner"):
  ./Subunterordner/dateiname.html

Wir halten also abschliessend fest, dass das Verweisen auf andere Seite immer nach dem gleichen Schema abläuft, unabhängig davon, ob ich auf externe Seiten (z.B. GoogleTM) oder auf interne Seite der eigenen Homepage verweisen möchte.

zurück zum Inhalt

9. Bilder auf der Homepage

Um Bilder auf eine Homepage zu stellen, benötigt man das <img>-Tag. Es ist auch möglich ein Hintergrundbild für seine Homepage festzulegen, oder über ein Bild auf eine andere Seite zu linken. Folgendes Beispiel zeigt diese Möglichkeiten auf

<html>
<head>
<title>Bilder</title>
</head>
<body background="./Bilder/bg.jpg">
  Auf Bild klicken um bei Google zu suchen<br>
  <a href="http://www.google.de" target="blank"><img src="./Bilder/google.gif" alt="google Logo"></a> <br><br><br><br>
  Es folgt ein tolles Bild aus meiner Sammlung<br>
  <img src="./Bilder/bspBild.jpg" alt="die 3 lustigen 2">
</body>
</html>

Um ein Hintergrundbild für die gesammte Seite festzulegen, verwendet man also das Attribut background im <body>-Tag.
Für einen Bilder-Link fügt man zwischen <a> und </a> keinen Text ein, sondern ein Bild ein. Dies geschieht über das <img>-Tag mit dem Attribut src ('source'), das den Pfad zum Bild bzw. die Bildquelle angibt. Eine Pflichtangabe bei der Verwendung von Bildern ist das Attribut alt ('alternative'), in dem du angibst was alternativ angezeigt werden soll.Wenn du also ein Bild einbindest, nicht das alt-Attribut vergessen!!
Um ein Bild einfach nur auf der Homepage anzuzeigen, geht man wie im dritten Fall vor.
Das Ergebnis könnt ihr euch hier anschauen.

zurück zum Inhalt

10. Die Tags <div> und <span>

Mit <div>s ('division' - 'Breich') und <span>s ('span' - 'Breich') kann man ganze Bereiche auf einer Homepage zusammenfassen und gleich formatieren. Meine Homepage ist z.B. mit Hilfe von <div>s gegliedert. Eigentlich sind diese beiden Elemente wohl eher dazu gedacht mittels CSS formatiert zu werden, daher will ich sie nur kurz mittels Beispiel einführen:

<html>
<head>
<title>Div-Test</title>
</head>
<body>
  <div align="center">
    das ist das Haus vom Nikolaus
  </div>
  <div align="right">
    Das ist das Haus vom Nikolaus
  </div>
  <div>
    Das ist das <span>Haus</span> vom Nikolaus
  </div>
</body>
</html>

So sieht das ganze dann aus klick mich!

Wie man sieht machen die Tags so nur wenig Sinn. Das einzige was aufällt ist, das <div> einen Zeilenumbruch erzeugt, wohingegen <span> innerhalb des Textes keine Wirkung zeigt. Das Attribut zur horizontalen Ausrichtung align kann übrigens u.a. auch im <body>-Tag verwendet werden.

Aus diesem Beispiel wird der größte Unterschied zwischen <div> und <span> leider nicht deutlich. Dieser liegt darin, dass <div> andere Block-Elemente (Tabellen, Grafiken, Absätze, andere <div>-Bereiche...), also Elemente die einen Umbruch erzeugen enthalten kann, wohingegen <span> nur Inline-Elemente enthalten kann, die eben keinen Umbruch erzeugen.

Wir sollten uns allerdings gar nicht erst daran gewöhnen HTML-Seiten im Code zu formatieren. Hierfür bieten sich extern definierte Cascading Stylesheets (CSS) an, für die ich ebenfalls ein entsprechenden Tutorial verfasst habe.

zurück zum Inhalt

a) Das Attribut id

Um doch etwas sinnvolles mit dem <span>-Tag zu machen, stellen wir uns folgende Aufgabe: Wir wollen Auf einer Seite unserer Homepage (wie zum Beispiel diesem Tutorial) zu verschiedenen Textpassagen "springen", ohne immer bis zur entsprechenden Stelle scrollen zu müssen. Das entspricht auf dieser Seite dem Sprung zurück zum Inhaltsverzeichnis bzw. dem zum jeweiligen Kapitel. Wieder macht ein Beispiel deutlich, wie das funktioniert:

<html>
<head>
  <title>auf Textstellen linken</title>
</head>
<body>
  <span id="anfang">.........Inhalt.....</span>
  <a href="#ende" >zum Ende der Seite</a>
  <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>
  <p>Hier steht ganz viel Text!</p>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br>
  <span id="ende">Das Ende der Seite</span>
  <a href="#anfang" >zum Anfang der Seite</a>
</body>
</html>

So sieht das ganze dann auf der Homepage aus klick mich!

Wir arbeiten also auch hier wieder mit Links. Wir geben allerdings kein Ziel außerhalb der aktuellen Seite an, sondern definieren eins über das Attribut id. Diesem Attribut weisen wir einen (eindeutigen) Wert id-name zu. Auf diesen Wert kann man dann referenzieren, indem man einen Link definiert, der auf das Ziel #id-name verweist, also dem Wert von id mit vorangestelltem #-Zeichen.
Bei der Wertevergabe für das Attribut id muss man darauf achten, dass der Name einmalig im gesamten Quelltext der Seite ist, also eindeutig dieser Stelle zuordbar ist.
ids werden uns auch im Zusammenhang mit CSS wieder begegnen.

zurück zum Inhalt

11. Kommentare in HTML

Da unser HTML-Wissen nun bereits so groß ist, dass unsere Quelltexte immer länger und unübersichtlicher werden, ist es nun an der Zeit eine Möglichkeit kennen zu lernen Kommentare in den Quelltext zu schreiben, um die Übersicht nicht komplett zu verlieren. Diese Kommentare werden von den Webbrowsern nicht angezeigt, sondern dienen uns als Hilfe unseren Quelltext auch nach längerer Zeit noch zu verstehen und zu überblicken. Ein Beispiel:

<!--hier beginnt die HTML-Datei-->
<html>
<head>
  <title>Kommentare</title>
  <!--hier könnten weitere Metaangaben stehen-->
</head>
<body>
  <!--hier beginnt der Inhalt der Seite-->
  .........Inhalt.....
</body>
</html>

Kommentare werden also eingefügt, in dem man sie mit einem <!-- beginnt und mit --> beendet.

zurück zum Inhalt

12. einige wichtige Metatags für den Kopf

Wie bereits in Kapitel 3 erwähnt, kann man im <head>-Tag Metaangaben zum HTML-Dokument machen. Diese werden dem Besucher der Seite zwar nicht angezeigt, sind aber aus verschiedenen Gründen trotzdem wichtig.
Folgendes Beispiel zeigt einige wichtige Angaben:

<html>
<head>
<title>Head-Angaben</title>
  <meta name="description" content="Das was hier steht sollte den Inhalt dieser Seite kurz zusammenfassen. Er wird einem Benutzer angezeigt, wenn eine Suchmaschine die Seite als Ergebnis liefert. Man kann das Testen, indem man mal auf web.de geht und sich den Quelltext anzeigen lässt (rechte Maustaste auf die Seite und "Quelltext anzeigen") und dann muss man bei Google nach "web.de" suchen. Der Satz bei description und der Beschreibungstext unter Google sind identisch.">
  <meta name="author" content="Daniel Pasqua">
  <meta name="keywords" content="hier sollte eine durch Kommata getrennte Liste aller Suchbegriffe stehen unter deren Angabe man bei einer Suchmaschine findbar sein möchte">
  <!--Durch die Angabe des folgenden Metatags wird man nach 5 Sekunden automatisch auf http://www.google.de weitergeleitet. Diese Funktion kann im Browser des Benutzers deaktiviert sein. Euch ist bestimmt schon mal eine Seite begegnet auf der stand: "Wenn Sie nicht automatisch weitergeleitet werden, klicken Sie bitte hier". Da das automatische weiterleiten deaktiviert sein kann, fordert man den Benutzer auf, die entsprechende Seite durch einen Klick auf den Link zu öffnen. Wie das geht haben wir ja bereits kennen gelernt.-->
  <meta http-equiv="refresh" content="5; URL=http://www.google.de">
</head>
<body>
Wie man sieht, sieht man von den Head-Angaben nix! </body>
</html>

Das war auch schon die kurze Einführung in die Metatags, wie man sieht kommen auch diese ohne Endtag aus.

zurück zum Inhalt

13. DTD - Document Type Definition

Wenn man sich den Quelltext von Homepages im Web anguckt, fällt auf, dass in der ersten Zeile nicht <html> steht, sondern sowas wie <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.
Diese Zeile gibt an, wo das Dokument, die DTD (Document Type Definition), zu finden ist, nach dessen Regeln die folgende HTML-Datei erstellt worden ist. In diesem Fall also unter der Adresse http://www.w3.org/TR/html4/loose.dtd.

Um das etwas näher zu erläutern, nehmen wir mal an, dass wir selber eine Datei erstellen wollen, die definiert, wie andere Dateien aufgebaut sein sollen. Um den Zusammenhang zum Thema nicht komplett zu verlieren, nennen wir diese Datei DTD und Dokumente, die nach diesem Schema aufgebaut sind, Instanzen. Unsere Aufgabe besteht nun darin, eine DTD zu schreiben, die definiert, wie der Briefkopf auf den Briefen unserer Firma auszusehen hat. Unsere DTD definiert das nun folgendermaßen:

({Nachname}, {Vorname}),
({Adresse}),
(Abteilung: {Abteilung})

Eine Instanz zu dieser DTD könnte dann so aussehen (natürlich müssen wir uns vorstellen, dass wir Nachname, Vorname, Adresse und Abteilung bereits definiert haben, deren korrekte Darstellung also kennen):

Mustermann, Max
ABC-Strasse 111
11111 ABC-Stadt
Abteilung: Ar*¿# für Alles

Dieses Beispiel beschreibt, hoffentlich einigermaßen anschaulich, was eine DTD macht. Um zu überprüfen, ob ein Briefkopf korrekt ist, müssen wir ihn nur mit den Briefkopf-Aufbauregeln in der Briefkopf-DTD vergleichen, man spricht hierbei von validieren.

Um zu überprüfen, ob man eine (bezogen auf die in der ersten Zeile angegebenen DTD) korrekte HTML-Datei erstellt hat, kann man den HTML-Validator des W3Cs nutzten. Dieser gibt entweder ein OK aus, oder weißt uns auf die Stellen in unserem Quelltext hin, die fehlerhaft sind.

Im CSS Tutorial werden wir später sehen, dass eine DTD-Angabe Anzeigefehler in Browsern verhindern kann.

zurück zum Inhalt

Wenn euch das Tutorial gefallen hat, könnt ihr es gerne weiter

(zuletzt geändert: 19.03.2011 - Twitter eingebaut)

© 2007-2017 Daniel Pasqua
kontakt inhalt info