HTML = Hypertext Markup Language
HTML ist der grundlegendste Baustein des Webs. Es beschreibt und definiert den Inhalt einer Webseite zusammen mit dem grundlegenden Layout der Webseite. Neben HTML werden im Allgemeinen andere Technologien verwendet, um das Erscheinungsbild (CSS) oder die Funktionalität/Verhalten (JavaScript) einer Webseite zu beschreiben.
Quelle: https://developer.mozilla.org/de/docs/Web/HTML
Eine HTML-Datei erstellen
HTML-Webseiten kann jeder erstellen. Hierfür braucht man zum einen einen Computer, einen Texteditor und einen Browser.
In der Vorlesung habe ich mit dem Texteditor TextWrangler gearbeitet, jedoch kann man sich hier an verschiedensten Texteditoren bedienen. Um die HTML-Datei aufzurufen brauche ich einen Browser. HTML und CSS sind Industriestandards und alle Browser versuchen, diese auf die gleiche Weise zu unterstützen (in der Realität gibt es Abweichungen), deshalb ist es hier nicht wichtig, welchen expliziten Browser man verwendet.
Den gewünschten Inhalt kann man vorerst in den Texteditor eintippen und diesen abschließend abspeichern unter „index.html“. Wenn wir diese Datei nun im Browser öffnen, wird mein Inhalt unstrukturiert angezeigt. Hier kommt HTML ins Spiel. Mittels HTML kann ich meinen Text mit sogenannten „Tags“ versehen, dadurch erkennt der Browser, welcher Textteil eine Überschrift, ein Absatz, eine Zwischenüberschrift usw. ist. Darauf gehe ich im folgenden Text nochmal näher drauf ein. Der geschriebene HTML-Code erklärt dem Browser alles was er wissen muss, um die Seite anzuzeigen (Inhalte und Struktur der Seite).
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.
HTML-Code
Die HTML-Darstellung einer Seite basiert weitestgehend auf einem 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 lässt sich wie folgt beschreiben:
| <!DOCTYPE html> | HTML5-Doctype, erste Zeile der HTML-Datei |
| <html> | Umschließt den kompletten Inhalt |
| <head> | Head-Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt) |
| <title>Berechnungen</title> | Titelzeile, erscheint in der obersten Browserleiste |
| </head> | |
| <body> | Umschließt den Inhalt, der im Browserfenster angezeigt wird |
| INHALT | Hier kommt nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren) |
| </body> | |
| </html> | Ende der HTML-Seite |
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 anderer Tag stehen (verschachteln).
Text strukturieren
Mittels folgender Tags wird mein Text nun Strukturiert:
| 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.
Wie oben erwähnt müssen Tags nicht in einer Reihe stehen, jedoch ist es wichtig, dass ein Tag auch wieder geschlossen wird. Für einige Elemente gibt es eine Ausnahme, hierbei handelt es sich um eine Kurzschreibweise mit nur einem Tag.
Verlinkungen in HTML
Ebenfalls habe ich auf Webseiten die Möglichkeit durch anklicken auf ein Wort/Satz/Bild auf eine andere Webseite zu gelangen (Verlinkung).
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 verlinke ich dem Leser die Suchmaschine und habe in HTML folgenden Code:
Das Stichwort „Google“ auf meiner Webseite wird somit blau und unterstrichen hinterlegt, damit dem Leser sichtbar gemacht wird, dass sich hierunter ein Link befindet. Wenn ich interne Webseiten verlinken möchte, benutze ich ebenfalls den <a>-Tag. Der Code verändert sich hier. Wir setzten nun ein
<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) geben wir das Ziel des Links an.
Attribute
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. Ebenfalls haben wir das href-Attribut kennen gelernt. Dieses zeigt uns das Ziel eines Hyperlinks an. Ebenfalls haben wir die Möglichkeit ein Bild einzufügen. Hierfür verwenden wir das src-Attribut.
2.6 Vererbung
Im Kapitel Einführung in CSS wird neben der Struktur auch der Style von Webseiten beschrieben. Im Kapitel: Verlinkungen in HTML habe ich die Hyperlinks im Text beschrieben. Hierbei ist es wesentlich zu beachten, dass Elemente Styles von ihren „Eltern“ erben können. Im HTML-Code wurden beispielsweise Absätze gestylt mittels CSS. Wenn ich nun im <p>-Tag ein Hyperlink mittels einem <a>-Tag einfüge, dann wird dieser auch gestylt. Somit erben die <a>-Tags von ihren Eltern. Wenn wir nun beispielsweise die Schriftart im <body>-Tag definieren, dann erben alle darauffolgenden Eltern und Kinder. Sprich alle Überschriften, Zwischenüberschriften und auch Absätze enthalten nun dieselbe Schriftart.
Ebenfalls kann ich Vererbungen auch überschreiben. Ich habe wie vorher beschrieben im <body>-Tag eine Schriftart definiert. Wenn ich nun alle Überschriften in einer anderen Schriftart haben möchte, kann ich diese einfach überschreiben, indem ich eine Regel nur für das <h1>-Element angebe.
Problematisch ist nun, dass ich alle Überschriften, Absätze und Unterüberschriften in genau einer Schriftart, Farbe, etc. darstellen kann. Wenn ich jedoch einen Absatz in grün, einen in blau und einen in rot hinterlegen möchte, muss ich Klassen bilden. Hierfür definiere ich im <body>-Tag hinter den <p>-Tag nun eine Klasse wie folgt:
<p class=“gruen“> Absatz steht hier </p>
Nun schreibe ich mittels CSS in den <style>-Tag nun unter p.gruen { color: green; } und erhalte den spezifischen Absatz nun in der Farbe grün.
Nun haben wir uns mit der Struktur des Inhaltes beschäftigt. Die Webseiten, die wir kennen, sind jedoch wesentlich „interessanter“ und anschaulicher gestaltet. Um die Darstellung der Webseite zu bearbeiten benötigen wir CSS. Style und Struktur werden für Webseiten getrennt. Somit kann ich dasselbe Dokumente anders darstellen. Im Folgenden Kapitel konzentrieren wir uns auf die Darstellung der Webseite.
Nächstes Thema lautet CSS.
Entwicklung verteilter Systeme 