HTML

Hypertext Markup Language

HTML heißt Hypertext Markup Language und ist eine Auszeichnungssprache. Sie dient zur Strukturierung des Inhaltes von Webseite.

1. Erstellen einer HTML-Datei

Zum Erstellen einer HTML-Datei, kann eigentlich jeder Texteditor benutzt werden, ich habe Atom heruntergeladen. Der Aufruf der eigentlichen HTML-Datei erfolgt allerdings im Browser. HTML und CSS sind Industriestandards und alle Browser versuchen, diese auf die gleiche Weise zu unterstützen, auch wenn es in der Realität hier immer noch Unterschiede gibt.

Jede Datei trägt beinen Dateinamen mit der Endung html. Zum Beispiel kann eine Datei „Portfolio.html“ heißen. Diese Datei kann dann mit Inhalt gefüllt werden und muss anschließend gespeichert werden. Wenn diese Datei nun im Browser geöffnet wird, wird mein Inhalt unstrukturiert angezeigt. Hier kommt HTML ins Spiel. Mittels HTML kann man den Text mit sogenannten „Tags“ versehen, dadurch erkennt der Browser, welcher Textteil eine Überschrift, ein Absatz, eine Zwischenüberschrift usw. ist. Dazu mehr weiter unten auf der Seite. Der geschriebene HTML-Code ist für die Strukturierung des Inhaltes der Webseite verantwortlich.

Vorerst nochmal ganz allgemein: um eine Webseite zu erstellen, muss man Dateien in HTML schreiben (.html oder .htm) und auf einem Webserver ablegen. Sobald die Dateien auf einem Webserver abgelegt sind, kann jeder Browser die Seiten über das Internet abrufen. Der Webserver „wartet“ ununterbrochen auf Anfragen vom Browser. Wenn der Browser eine Anfrage schickt, sucht er die entsprechende HTML-Datei raus und schickt diese an den Browser zurück.

So sieht der oben gezeigte HTML Text bei Aufruf im Browser aus

2. HTML-Code

Die HTML-Darstellung einer Seite kann man sich vorstellen wie ein Baukastenprinzip.

Der Browser übersetzt beim Lesen des HTML-Textes die Tags. Tags sind Wörter/Buchstaben in spitzen Klammern, z.B. <head>. Öffnet man die vorliegende Datei wird „Hallo Welt“ ausgegeben.

Mithilfe der Tags erkennt der Browser Strukturen und Bedeutung des Textes und formatiert diese entsprechend (h1, h2, etc.).

Das HTML Grundgerüst sieht wie folgt aus:

Es gibt jedoch weitaus mehr Funktionen/Tags. Die Tag-Paare, wie <head> und </head> müssen nicht in einer Zeile stehen. Innerhalb eines Tags kann auch ein weiterer Tag stehen, das heißt, ein Verschachteln der Tags ist möglich.

3. HTML – Textstruktur

Mittels folgender Tags kann ein Text strukturiert werden:

HTML-Befehle	Beschreibung
<h1> … </h1>	Hauptüberschrift
<h2> … </h2> bis <h6> … </h6>	Unterüberschriften
<p> … </p>	Absatz (engl. p = paragraph = Absatz)
<br>	erzwungener Zeilenumbruch (engl. br = break = Umbruch)
<hr>	Trennlinie

Die Tags bestehen aus spitzen Klammern <> und einem Tag-Namen (z.B. h1). Es gibt ein Start-Tag und ein End-Tag (Tag-Paar). Mit dem Start-Tag beginnt z.B. eine Überschrift und das End-Tag signalisiert, dass die Überschrift zu Ende ist. Zwischen den beiden Tags steht ein bestimmter Inhalt, beispielsweise eine Überschrift. Das Start-Tag, der Inhalt, sowie das End-Tag werden als Element bezeichnet.

Es ist nicht wichtig, dass alle Tag-Paare in einer Reihe stehen, aber jedes Start-Tag braucht ein End-Tag. Für einige Elemente gibt es eine Ausnahme, hierbei handelt es sich um eine Kurzschreibweise mit nur einem Tag, wie beispielsweise das Tag für einen Zeilenumbruch <br/>.

4. Verlinkungen in HTML

Es gibt die Möglichkeit Wörter, Sätze oder Bilder zu einem Link zu formen, sodass man auf eine andere Website gelangt.

Es gibt mehrere Funktionen die hinter einem Link stecken:

interne Links – Verlinkung innerhalb der Webseite auf Unterseiten
externe Links – Verlinkung auf eine andere Seite im Internet
andere Links – Verlinkung auf z.B. eine E-Mail, Öffnen und Speichern von PDF-Dokumenten

Die Verlinkung erfolgt über den sogenannten <a>-Tag. Im Folgenden Beispiel möchte ich dem Leser die Suchmaschine Google vorstellen. Dazu verlinkt man dem Leser die Suchmaschine und habe in HTML folgenden Code:

<a href = https://www.mannheim.dhbw.de > DHBW Mannheim</a>

Das Stichwort „DHBW Mannheim“ auf der Webseite wird blau und unterstrichen hinterlegt, damit dem Leser erkennbar gemacht wird, dass sich hierunter ein Link befindet. Wenn man interne Webseiten verlinken möchte, benutzt man ebenfalls den <a>-Tag. Der Code verändert sich hier. Man kann das wie folgt realisieren:

<a href=“wegbeschreibung.html“>Wegbeschreibung</a>

Unter dem Text Wegbeschreibung ist nun die Unterwebseite mit der Beschreibung des Weges verlinkt. Diese html-Datei muss natürlich vorher erstellt und vorhanden sein. Mit dem href-Attribut (hyperlink reference) gebt man das Ziel des Links an.

5. Attribute in HTML

Mit Hilfe von Attributen wird ein Element mit zusätzlichen Informationen ausgestattet. Beispiele hierfür sind das type-Attribut (siehe Kapitel: Einführung in CSS), welches die Sprache CSS für die Darstellung definiert, genauso wie das href-Attribut. Dieses zeigt uns das Ziel eines Hyperlinks an. Ebenfalls hat man die Möglichkeit ein Bild einzufügen. Hierfür verwendet man das src-Attribut.

HTML Code der ein Bild einfügt