Index
Was ist HTML?
HTML (kurz für Hypertext Markup Language) ist die Sprache des World Wide Web. Sie wurde 1989 von Tim Berners-Lee, am CERN in Genf entwickelt, und basiert auf der Metasprache SGML (Standard Generalized Markup Language). Metasprachen wie SGML werden zur Definition von Auszeichnungssprachen wie HTML/XHTML verwendet und schreiben strenge Regeln bezüglich deren Aufbau vor. Heute wird HTML vom World Wide Web Consortium (W3C) weiterentwickelt. Falls Sie bereits eine Programmiersprache beherrschen werden Sie feststellen, dass HTML wenig Ahnlichkeit zu solchen hat. Vielmehr benutzt man eine vorgeschriebene Struktur von Schlüsselwörtern (HTML-Tags), um den Inhalt der Webseite zu formatieren. Sollten Sie vollkommen neu auf dem Gebiet HTML sein, so werden Sie im Verlaufe dieses Kapitels feststellen, dass die Anwendung einem sturen Prinzip folgt, welches sich in kürzester Zeit begreifen und umsetzen lässt.
Aufbau einer HTML Datei
Grundsätzlich kann man ein HTML Dokument in 3 Bereiche gliedern.
1. Die Dokumententyp Deklaration, die angibt, welchem Standard das nachfolgende Dokument entspricht.
2. Der HTML Kopf (HEAD). Hier finden sich Hauptsächlich technische Informationen, die im Browser nicht direkt sichtbar sind.
3. Der HTML Körper (BODY), der die eigentlich Anzuzeigenden Informationen enthält.
Die Dokumententyp Deklaration:
Durch die Dokumenttyp Deklaration wird festgelegt, welchen Regeln das nachfolgende HTML Dokument unterliegt. Vorerst genügt es völlig, die ersten zwei Zeilen aus dem Beispiel zu übernehmen. In der Kategorie Der Dokumenttyp erfahren Sie näheres.
Der Kopf kann die folgenden Elemente beinhalten:
Lassen Sie sich nicht von der Fülle an Information abschrecken. Das für Sie wichtigste Element dürfte vorerst <title> sein. Hier sollten Sie den Title der Webseite angeben. Dieser wird u.a. auch in der Titelleiste des Browsers angezeigt. Einige der weiteren head-Elemente werden in eigenen Sektionen behandelt.
Die Elemente des Körpers (body):
Der <body> bereich einer Webseite kann eine Fülle an Elementen beinhalten. Einige grundlegende Elemente werden im folgenden Kapitel (Die Wichtigsten HTML Elemente) behandelt. Eine Übersicht aller HTML Elemente findet sich in der HTML Befehlsreferenz.
1. Die Dokumententyp Deklaration, die angibt, welchem Standard das nachfolgende Dokument entspricht.
2. Der HTML Kopf (HEAD). Hier finden sich Hauptsächlich technische Informationen, die im Browser nicht direkt sichtbar sind.
3. Der HTML Körper (BODY), der die eigentlich Anzuzeigenden Informationen enthält.
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titel der Webseite</title> </head> <body> Inhalt der Webseite </body> </html> |
Wie Sie an diesem Beispiel erkennen können, werden alle HTML-Tag's von spitzen Klammern (< >) eingeschlossen. Alles, was nicht von spitzen Klammern umschlossen ist, wird vom Browser angezeigt. Dabei wird jeweils nur 1 Leerzeichen, zwischen 2 Zeichen beachtet. Es ist also nicht möglich, Text mit Hilfe von Leerzeichen einzurücken.
|
Die Dokumententyp Deklaration:
Durch die Dokumenttyp Deklaration wird festgelegt, welchen Regeln das nachfolgende HTML Dokument unterliegt. Vorerst genügt es völlig, die ersten zwei Zeilen aus dem Beispiel zu übernehmen. In der Kategorie Der Dokumenttyp erfahren Sie näheres.
Der Kopf kann die folgenden Elemente beinhalten:
| title | Der Titel des Dokuments |
| base | Angabe einer Basis URI |
| link | Angabe von externen Ressourcen (siehe: <link> Element) |
| style | Einbinden von Stylesheet-Code (siehe CSS Grundlagen) |
| script | Einbinden von Scripten (z.b. JavaScript) |
| meta | Kann verschiedene Metadaten (Informationen über den Inhalt der Seite) enthalten |
| object | Einbinden einer externen Datei |
Lassen Sie sich nicht von der Fülle an Information abschrecken. Das für Sie wichtigste Element dürfte vorerst <title> sein. Hier sollten Sie den Title der Webseite angeben. Dieser wird u.a. auch in der Titelleiste des Browsers angezeigt. Einige der weiteren head-Elemente werden in eigenen Sektionen behandelt.
Die Elemente des Körpers (body):
Der <body> bereich einer Webseite kann eine Fülle an Elementen beinhalten. Einige grundlegende Elemente werden im folgenden Kapitel (Die Wichtigsten HTML Elemente) behandelt. Eine Übersicht aller HTML Elemente findet sich in der HTML Befehlsreferenz.
Die wichstigsten HTML Elemente
Index
1. Das <body> Element
2. Überschriften
3. Text Absätze
4. Zeilenumbrüche
5. Aufzählungen
6. Schriftformatierung
7. Weitere grundlegende Elemente zur Textformatierung
8. Verweise (Links)
9. Grafiken
- Das <body> Element
- Überschriften
- Absätze
- Zeilenumbrüche
- Aufzählungen
- Weitere grundlegende Elemente ...
- Verweise
- Grafiken
1. Das <body> Element
Der body Bereich bildet den Hauptteil der Webseite. Alle Informationen die der Browser später anzeigen soll befinden sich innerhalb des body Elementes. Das body Element kann Farbangaben für den Seitenhintergrund, Text und Links, sowie die Angabe eines Hintergrundbildes enthalten.
<body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">
<body background="Bild.jpg">
<body background="Bild.jpg">
| bgcolor | Hintergrundfarbe des Dokuments |
| text | Textfarbe (für das gesamte Dokument) |
| link | Farbe für noch nicht besuchte Verweise |
| vlink | Farbe für bereits besuchte Verweise |
| alink | Farbe für aktive Verweise |
| background | Angabe einer Bilddatei als Seitenhintergrund |
Anmerkung: Alle Farbangaben sind optional. | |
2. Überschriften
Für Überschriften stehen die Elemente <h1> bis <h6> zur Verfügung. Das <h1> Element bildet die größte Überschrift; <h6> die kleinste.
Mithilfe des align Attributes kann die Ausrichtung festgelegt werden.
<h1 align="left|center|right|justify">Hauptüberschrift</h1>
<h2>Unterkategorie</h2>
<h3>weitere Unterkategorie</h3>
<h2>Unterkategorie</h2>
<h3>weitere Unterkategorie</h3>
Mithilfe des align Attributes kann die Ausrichtung festgelegt werden.
| left | linksbündig |
| center | zentriert |
| right | rechtsbündig |
| justify | Blocksatz |
3. Text Absätze
Zum bilden von Absätzen dient das <p> Element. Auch hier kann die Ausrichtung mithilfe des align Attributes festgelegt werden.
<p>Text</p>
<p align="left|center|right|justify">Text</p>
<p align="left|center|right|justify">Text</p>
4. Zeilenumbrüche
Da im HTML Syntax Zeilenumbrüche und Leerzeichen ignoriert werden, gibt es hierfü das <br /> Element. Wie Ihnen mittlerweile sicherlich aufgefallen ist, bestehen HTML Elemente im Regelfall aus einem Einleitenden, und einem Abschließenden Tag (Also in der Form <h1>...</h1>). Bei Elementen, wie dem <br /> Element, für die es keinen Abschließenden Tag gibt, hat man sich darauf geeinigt, den einleitenden Tag mit einem / zu beenden (also: <br />).
Dieser Text steht in Zeile 1, <br />und dieser Text in Zeile 2.
5. Aufzählungen
Es wird zwischen unsortierten Aufzählungen (<ul>) und nummerierten Aufzählungen (<ol>) unterschieden.
Der Parameter type ist optional.
Der Parameter type ist optional.
<ul type="circle|disc|square">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
</ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
</ul>
Der Parameter type ist optional.
| circle | ein Kreis/Punkt |
| disc | eine Scheibe |
| square | ein Quadrat |
<ol type="a|A|i|I">
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
</ol>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
</ol>
Der Parameter type ist optional.
| a | alphabetisch, Keinbuchstaben |
| A | alphabetisch, Großbuchstaben |
| i | römisch, Kleinbuchstaben |
| I | römisch, Großbuchstaben |
6. Schriftformatierung
Zur Formatierung des Auszugebenden Textes steht das <font> Element zur Verfügung.
Die einzelnen Parameter sind jeweils optional.
<font size="Wert" color="#xxxxxx" face="Schriftart"> Text </font>
Die einzelnen Parameter sind jeweils optional.
| size | die Schriftgröße. Ein Wert von 1 (sehr klein) bis 7 (sehr gross). |
| color | die Schriftfarbe (in Hexadezimaler Darstellung) |
| face | die Schriftart, z.b. Arial, Georgia, ... |
7. Weitere grundlegende Elemente zur Textformatierung
Text Zentrieren
Zitate
Adressen
Fettschrift
Kursivschrift
Unterstrichen
Durchgestrichen
Trennlinie
Die einzelnen Parameter sind jeweils optional.
<center>Text (oder auch andere HTML Elemente) </center>
Zitate
<blockquote>Zitattext</blockquote>
Adressen
<address>Adresse</address>
Fettschrift
<b>fett gedruckter Text</b>
Kursivschrift
<i>kursiv gedruckter Text</i>
Unterstrichen
<u>unterstrichener Text</u>
Durchgestrichen
<s>durchgestrichener Text</s>
Trennlinie
<hr />
<hr width="Wert" size="Höhe" align="Ausrichtung" />
<hr width="Wert" size="Höhe" align="Ausrichtung" />
Die einzelnen Parameter sind jeweils optional.
| width | die Breite (entweder in Pixel, oder als Prozent Wert) |
| size | die Höhe in Pixel |
| align | die Ausrichtung (left, center, right) |
8. Verweise (Links)
Links sind das wohl wichtigste Element, zur Navigation auf Ihrer Seite. Mit Links lassen sich sowohl verschiedene Seiten einer Homepage, als auch verschiedene Homepages miteinander verbinden. Ausserdem können sogenannte Anker definiert werden, die es Ihnen erlauben, innerhalb einer Seite (gerade bei sehr großen Seiten) zu navigieren.
Anker werden folgendermaßen gebildet:
Damit ist diese Stelle im Dokument über einen Link erreichbar. Sinnvoll ist dies bei sehr langen Seiten, da der Browser automatisch an diese Stelle im Dokument scrollt.
Verweise werden folgendermaßen gebildet:
Links zum Mailversand:
Anker werden folgendermaßen gebildet:
<a name="Ankername">Text (z.b. Kategorie Überschrift)</a>
Verweise werden folgendermaßen gebildet:
<a href="URI">Linktext</a>
<a href="URI" target="Wert">Linktext</a>
<a href="URI" target="Wert">Linktext</a>
| name | der Verweis-/Ankername |
| href | die Sprungadresse des Verweises (ein Anker in der gleichen Datei: href="#Ankername" eine andere Datei: href="datei.html" eine Adresse im WWW: href="http://www..." ... ) |
| target | Hier können Sie das Zielfenster definieren _self = Verweis im selben Fenster öffnen. _blank = Verweis in neuem Fenster öffnen. _parent = aktuelles Frameset beim Ausführen des Verweises auflösen _top = alle Framesets beim Ausführen des Verweises auflösen 'name' = Name des Zielframes in dem sich der Link öffnen soll (siehe: Frames) |
Links zum Mailversand:
<a href="mailto:user@adresse.tdl">Linktext</a>
| href | Geben Sie hier die Mailadresse des Empfängers an. (beim klicken auf den Link wird der Mailclient des Benutzers geöffnet, und eine Mail an die Empfängeradresse vorbereitet. Auf diese Weise ist zum Beispiel der Versand von Formulardaten möglich.) |
9. Grafiken
Selbstverständlich können Sie auch Bilddateien verschiedener Formate in ihre Homepage integrieren. Hierfür steht das <img /> Element zur Verfügung.
<img src="URI" alt="Alternativtext" />
<img src="URI" alt="Alternativtext" width="Breite" height="Höhe" />
<img src="URI" alt="Alternativtext" border="Rahmendicke" />
<img src="URI" alt="Alternativtext" name="Bildname" />
<img src="URI" alt="Alternativtext" align="top|middle|bottom" />
<img src="URI" alt="Alternativtext" width="Breite" height="Höhe" />
<img src="URI" alt="Alternativtext" border="Rahmendicke" />
<img src="URI" alt="Alternativtext" name="Bildname" />
<img src="URI" alt="Alternativtext" align="top|middle|bottom" />
| src | die Adresse des Bildes z.B. src="bild.jpg" oder src="bilder/ich.gif" src="http://www.meinedomain.de/bilder/bild.jpg" |
| alt | ein Alternativtext für Browser, die keine Bilder darstellen können |
| width | die Bildbreite (in Pixel oder Prozent) |
| height | die Bildhöhe (in Pixel oder Prozent) |
| border | die Rahmendicke in Pixel |
| name | der Name des Bildes |
| align | die Ausrichtung im Text |
Sonderzeichen in HTML
Da die gleiche Sprache HTML International genutzt wird. gibt es für Sonderzeichen eine spezielle Regelung. Sonderzeichen werden mit einem & eingeleitet und mit einem ; abgeschlossen. Es folgt eine Liste der wichtigsten deutschen Sonderzeichen. Weitere Sonderzeichen finden sich in der Kategorie Liste der benannten HTML Sonderzeichen
| Ä , ä | Ä bzw ä | § | § |
| Ö , ö | Ö bzw ö | © | © |
| Ü , ü | Ü bzw ü | € | € |
| ß | ß | ¶ | ¶ |
Das ganze Anwenden
Soweit sogut. Nun kennen Sie bereits genügend HTML Elemente, um eine kleine, aber hübsche Webseite zu gestalten. Falls Sie nie zuvor mit HTML gearbeitet haben, fragen Sie sich vermutlich, was Sie mit all den Informationen anfangen sollen. In diesem Kapitel werden deshalb die Vorgestellten Elemente zu einem verständlichen Beispiel zusammengefasst. Sehen Sie sich das Beispiel einfach einmal an, vermutlich werden sich dann einige Ihrer Fragen von selbst lösen.
Und so sieht das ganze dann aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste Homepage</title>
</head>
<body bgcolor="#bbbbbb" link="#2050a0">
<h1 align="center">Willkommen auf meiner Webseite</h1>
<br /><br />
<p align="center">Ich freue mich, dass gerade <b><i>Sie</i> </b>den Weg auf meine Homepage gefunden haben.</p>
<center>
<img src="smiley.gif" alt=":-)" />
</center>
<br />
<h2 align="left">Inhalt meiner Webseite:</h2>
<ul>
<li>Startseite</li>
<li><a href="witze.html">Witze</a></li>
<li><a href="bilder.html">Bilder</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<br /><br />
<p align="center">
<font size="1">© 2005 'Ich'</font>
</p>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Meine erste Homepage</title>
</head>
<body bgcolor="#bbbbbb" link="#2050a0">
<h1 align="center">Willkommen auf meiner Webseite</h1>
<br /><br />
<p align="center">Ich freue mich, dass gerade <b><i>Sie</i> </b>den Weg auf meine Homepage gefunden haben.</p>
<center>
<img src="smiley.gif" alt=":-)" />
</center>
<br />
<h2 align="left">Inhalt meiner Webseite:</h2>
<ul>
<li>Startseite</li>
<li><a href="witze.html">Witze</a></li>
<li><a href="bilder.html">Bilder</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<br /><br />
<p align="center">
<font size="1">© 2005 'Ich'</font>
</p>
</body>
</html>
Und so sieht das ganze dann aus:
Weiter gehts auf Seite 2.
Validation Info
Dieses Dokument entspricht den aktuellen HTML / CSS Standards.
