Bedeutung von HTML:
Die Hypertext Maruk Language (HTML) ist eine Auszeichnungssprache, mit der man Texte und Bilder strukturieren kann und die als Grundlage der Homepagegestaltung dient. Einzelne Internetdokumente werden mittels (Hyper-)Links miteinander verknüpft.
Man spricht dann nicht mehr von normalem Text, wie er z. B. in einem Buch vorkommt, sondern vom sog. Hypertext (=dt. Übertext). Dieser besitzt statt einer linearen Navigation (z. B. das Umblättern einer Buchseite), viele verschiedene Navigationsmöglichkeiten (=Links auf einer Seite).
1992 wurde HTML im CERN in der Schweiz erstmalig vorgestellt. Aktuell wird XHTML 1.0 und 1.1 eingesetzt. Das X bezieht sich auf XML (=Extendable Markup Language), eine weitere Auszeichnungssprache, mit deren Hilfe andere Auszeichnungssprachen (wie eben XHTML) definiert werden können.
An HTML 5 wird zur Zeit gearbeitet. Damit sollen später viele interaktive Funktionalitäten (Audio- / Videounterstützung) möglich sein, ohne zusätzliche Plugins (wie z. B. Flash) einsetzen zu müssen.
Aufbau von HTML:
Eine HTML- Seite besteht aus 3 Teilen:
- Dokumentdeklaration (doctype)
- Kopf (<head>)
- Rumpf (<body>)
Innerhalb der beiden letzten Bereiche werden sog. Elemente eingesetzt, um das Dokument zu formatieren.
Dokumentdeklaration:
Hier wird die HTML- Version festgelegt, in der das aktuelle Dokument vorliegt.
– doctype für XTHML 1.0 (transitional):
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Das „transitional“ stellt dabei ein gewisse Abwärtskompatibilität zu älteren HTML- Versionen dar, die ältere Elemente erlaubt (z. B. <font>)
Kopf (<head>):
Im Kopfbereich werden Angaben zur Seite gemacht. Hier wird der Titel (<title>) definiert, Angaben zum Zeichensatz zur Beschreibung des aktuellen Dokumentes. Außerdem können im <head>- Teil weitere Dateien (z. B. CSS-Dateien für das Layout oder JavaScript- Dateien für die Interaktivität) eingebunden werden.
Rumpf ( <body>):
Im Rumpf kommt endlich das eigentlich Dokument hinein. Hier können verschiedene Elemente eingesetzt werden, um Text, Bilder und Links zu formatieren. Ein Element ist dabei immer von einem < und > umgeben und besteht aus einem Anfang und Ende (Ausnahme sind leere Elemente). Dem Text innerhalb des Elements werden dann die spezifischen Elementeigenschaften zugewiesen.
Elemente:
In der folgenden Tabelle werden oft genutzte HTML- Elemente beschrieben.
Elemente ohne eigenen Inhalt (sog. Leerelemente, wie z. B. <br />) werden mit einem / abgeschlossen. Alle anderen Elemente habe ein Start- und Endpunkt (z. B. <p>…</p>).
Element | Bedeutung |
<p> | Absatz mit größerem Abstand zwischen den Zeilen |
<p>Ich bin der 1. Absatz</p>
<p>Ich bin der 2. Absatz</p> |
Ich bin der 1. Absatz
Ich bin der 2. Absatz |
<br /> | Zeilenumbruch z. B. innerhalb eines Absatzes ( |
<p>Jetzt kommt ein<br />Zeilenumbruch im Absatz.</p> | Jetzt kommt ein
Zeilenumbruch im Absatz |
<img src=““ alt=““ /> | Bild einfügen mit Attributen:
src (=Bildquelle) und alt (=Bildbeschreibung) |
<img src=“http://www.catmoney.de/wp-content/uploads/2012/02/gute-struktur-gluecklicke-leser-300×230.jpg“ alt=“Ein Zebra auf CatMoney.de“ /> | |
<h1> | Überschrift 1. Ebene, weitere Ebenen: h2,h3,h4,h5,h6 |
<h>Überschrift der 1. Ebene</h1> |
Überschrift der 1. Ebene |
<a href=““></a> | Link auf ein anderes Dokument mit Attibuten:
href = Linkziel target = Öffnen im gleichen (_top) oder neuem (_blank) Fenster |
<a href=“http://www.catmoney.de“ target=“_blank“ >Link zu CatMoney.de (neues Fenster) </a> | Link zu CatMoney.de (neues Fenster) |
Beispiel einer HTML- Seite:
Im folgenden Screenshot ist der Quellcode einer XHTML- Seite dargestellt mit den 3 Bereichen (doctype=grün, Kopf=gelb und Rumpf=rot) und der Ausgabe im Browser.
Erklärung der einzelnen Zeilen anhand der Zeilennumern:
1./2. Zeile: doctype: Festlegung der HTML- Version (hier XHTML 1.0 Transitional)
3. Zeile: Kopf- und Rumpfbereich werden vom <html>- Element umschlossen, das xmlns- Attribut spezifiziert den XML- Namensraum
5. Zeile: Beginn des Kopfbereichs (<head>)
6. Zeile: Festlegung des Zeichensatzes (hier iso-8859-1 = westeuropäisch, weitere Möglichkeit z. B. utf-8)
7. Zeile: Titel der Seite festlegen (wird ganz oben im Browser in der Titelzeile dargestellt)
8. Zeile: Ende des Kopfbereichs (</head>)
10. Zeile: Anfang des Rumpfbereichs (<body>)
11. Zeile: Überschrift 1. Ebene (<h1>…</h1>)
12. Zeile: Überschrift 2. Ebene (<h2>…</h2>)
13. Zeile: beginnender Absatz (<p>…</p>) mit Zeilenumbruch (<br />)
14. Zeile: Absatz mit dicker Schrift (<strong>…</strong>) und einem Link (<a href=“…“>…</a>)
15. Zeile: Absatz mit linksbündiger (align=“left“) Schrift (left=Standard, weitere: right; center)
16. Zeile: Einbindung eines Bildes (<img src=““) mit Bildbeschreibung (alt=“Holz“) beim Überfahren mit der Maus
17. Zeile: Ende des Absatzes (</p>)
18. Zeile: Ende des Rumpfbereiches (</body>)
20. Zeile: Ende des HTML- Dokumentes
Weitere Ressourcen zum Thema HTML:
Ich hoffe ich konnte mit dieser kleinen Einführung die Verwendung des HTML- Syntax zur Gestaltung von Internetseiten etwas näher bringen. Für eine weitere Recherche empfehle ich aber folgende Internetseiten:
- SelfHTML: Ausführliche Beschreibung aller Elemente und deren Attribute mit vielen Beispielen
- W3C Validator: Prüfen ob Websites korrektes Markup einbinden und auf diese Weise Fehler in der HTML- Struktur entdecken
- Firebug: Add-On für den Mozilla Firefox Browser, um HTML- Elemente von Website zu untersuchen