Einführung in HTML – Die Hypertext Markup Language

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“ /> 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.

Beispiel einer XHTML- Seite (Quellcode)

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

Beispiel einer XHTML- Seite (Ausgabe im Browser)

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
Nach oben!