HTML-Grundlagen

HTML ist eine Abkürzung für HyperText Markup Language, was zu deutsch mit Hypertext-Auszeichnungssprache übersetzt werden kann. Mit HTML wird der Aufbau und die Strukturierung der Homepage festgelegt. Dieser Artikel führt Sie in die HTML Grundlagen ein und zeigt erste Anwendungsbeispiele auf.

Die Elemente einer Homepage werden mit sogenannten Tags definiert. So gibt es Beispielsweise den <img>-Tag für das Einbinden von Fotos oder den <p>-Tag für die Definierung eines Absatzes in einem längeren Text. Für jeden Tag können verschiedene Eigenschaften (auch Attribute genannt) festgelegt werden. So existiert für den <img>-Tag beispielsweise das Attribut src (Abkürzung für source = Quelle) mit welchem der Pfad zum Einzubindenden Bild angegeben wird. Auch die Eigenschaften height für die Höhe des Bilder oder width für die Breite sind vorhanden.

Bei diesen Angaben muss allerdings darauf geachtet werden, dass das Bild - welches eingebunden wird - nur auf die angegebene Grösse skaliert wird. Im Hintergrund muss das Bild in der Originalgrösse geladen werden, was oft zu sehr langen Ladezeiten führt. Daher ist es immer sinnvoll, ein Bild vor dem Einbinden in eine Homepage in einem Bildbearbeitungsprogramm auf die gewünschte Grösse zu verkleinern.

Der erste HTML Tag: Bilder einbinden

Folgend ein vollständiger <img> -Tag, wie er im Quellcode einer Homepage zu finden ist:

<img src="images/test.jpg" alt="Test Bild" width="200px" height="150px" />

Das Bild test.jpg muss sich in diesem Beispiel im Ordner "images" befinden. Die Pfadangabe ist relativ, daher ausgehend von der aufgerufen HTML-Datei. Am Ende des Tags sehen Sie im Beispiel />. Der Slash ( / ) schliesst hierbei den Tag. Der <img>-Tag schliesst sich so selbst. Mit dem alt-Attribut kann ein Alternativer Text - für Benutzer mit deaktivierter Bilddarstellung - angegeben werden. Dieser wird dann anstelle des Bildes angezeigt und ist unter anderem für Sehbehinderte Menschen sehr hilfreich.

Später werden Sie noch sehen, wie die Eigenschaften width und height in eine externe CSS-Datei ausgelagert werden können. Dies hat viele Vorteile, vor allem aber wird die Wartung der Homepage und die Durchführung von Design-Änderungen vereinfacht.

Tags öffnen und schliessen: Das HTML Grundgerüst

Häufiger wird allerdings von einem Öffnungs-, und separatem Schliesstag gebrauch gemacht. Bei einem <p>-Tag sieht das wie folgt aus:

<p>Hier steht der Text für diesen Absatz</p>

Der abschliessende </p>-Tag unterschiedet sich nur durch den Slash vom Start Tag. Dieser ist allerdings sehr wichtig und sollte nicht vergessen werden. Beim Vergessen des End-Tags kann es zu unerwarteten Darstellungen kommen.

Für die korrekte Interpretation einer HTML Datei ist es wichtig, dass die einzelnen Tags innerhalb eines Grundgerüstes angewendet werden. Das Grundgerüst einer HTML - Datei besteht ebenfalls aus Tags, welche geöffnet und später wieder geschlossen werden. Der Haupt-Tag ist der <html>-Tag. Welcher als erstes geöffnet und als letzter geschlossen wird. Im <html>-Tag wird dann ein <head> und ein <body>-Tag platziert. Sie sehen, eine Verschachtelung der Tags ist in HTML möglich. Im <head>-Tag, dem sogenannten Header, werden alle Informationen festgehalten, die auf der Seite nicht direkt sichtbar sind. Z.B. der Titel Tag, der den Titel des Browser Fensters festlegt. Im Body Tag kann dann der eigentliche, sichtbare Inhalt der HTML-Seite festgelegt werden.

HTML "Hallo Welt" Beispiel

Abschliessend noch ein Beispiel zur besseren Veranschaulichung:

<html>
  <head>
    <title>Kostenlose Homepage</title>
  </head>
  <body>
    <p>Hallo Welt!</p>
  </body>
</html>

Diesen Code können Sie in einem Texteditor (z.B. Notepad) schreiben und als .html oder .htm Datei abspeichern. Falls Sie nicht direkt in einem dieser Formate speichern können, ist es auch möglich die Datei zuerst mit der Dateiendung .txt zu speichern und später umzubenennen. Beim öffnen in einem Browser können Sie dann die Ausgabe "Hallo Welt!" sehen.

Weiterführende Informationen finden Sie auf der Homepage von SelfHTML.

Informationen zum Newsletter