Um eine Website zu erstellen, muss man Dateien in der Hypertext Markup Language (HTML) schreiben und auf einem Webserver ablegen. Sobald man Dateien auf dem Webserver abgelegt hat, kann jeder Browser die Seite über das Internet abrufen. Der HTL-Code der Website erklärt dem Browser alles, was er wissen muss, um die Seite anzuzeigen.
Der Webserver
Der Webserver ist ein Computer, der mit dem Internet verbunden ist und ständig auf Anfragen (z.B. nach Bildern, Websiten, usw.) von Webbrowsern wartet. Wenn eine Anfrage an den Server gestellt wird, findet er die Ressource und schickt sie an den Browser.
Der Webbrowser
Wenn man im Web surft und auf einen Link klickt, dann fordert der Browser eine HTML-Seite vom Webserver an, ruft diese ab und zeigt sie anschließend im Browserfenster an. Damit der Browser weiß, wie die Seite dargestellt werden soll, schaut er sich den HTML-Code an, um die Struktur und den Inhalt der Seite zu kennen.
Woher weiß der Browser, wie das HTML dargestellt werden soll?
HTML gibt für den Browser die Dokumentenstruktur vor: also zum Beispiel, wo die Überschriften und Absätze stehen, welcher Text hervorgehoben wird usw. Mit diesen Informationen stellt der Browser die jeweiligen Elemente anhand eingebauter Standardregeln dar. Wenn der Browser den HTML-Code einliest, übersetzt er die Tags, in der der Text der Website eingeschlossen ist. Tags sind Wörter oder Buchstaben in spitzen Klammern ( z.B. <head>). Anhand der Tags erkennt der Browser Struktur und Bedeutung des Texts. Somit kann man mit Hilfe der Tags dem Browser genau mitteilen, welcher Teil eine Überschrift, oder ein Absatz ist und ob der Text hervorgehoben werden soll.
Was macht eine Datei zu einer HTML-Datei?
Grundsätzlich handelt es sich bei einer HTML-Datei um eine Textdatei, jedoch ist hierin keine Formatierung enthalten. Dadurch kann jeder beliebige Browser eine Website aufrufen und ihren Inhalt verstehen. Konventionsgemäß wird der Dateiname mit der Erweiterung „.html“ versehen. So wird dem Betriebssystem mitgeteilt, um welchen Dateityp es sich handelt.
HTML-Tags erklärt
Anbei nenne ich ein paar HTML-Tags und anschließend folgt ein Beispiel-Code, wie auch dessen Ausführung, um zu sehen, wie der Browser die HTML-Tags umsetzt.
<html> kennzeichnet den Beginn eines HTML-Codes
</html> signalisiert dem Browser das Ende eines HTML-Codes
<head> hiermit beginnt der Kopf der Seite
</head> Ende des Seitenkopfes
<body> hiermit beginnt der Textkörper der Seite
</body> Ende des Textkörpers
<h1>Titel der Überschrift </h1> Zeigt dem Browser an, dass „Titel der Überschrift“ eine Überschrift ist
<img src=“……“> Fügt hier das Bild „…..“ ein
<p> hiermit beginnt ein Absatz
</p> Ende des Absatzes
<em>………</em> hebt das, was zwischen den Tags ist hervor
<h2>…….</h2> zeigt, dass das zwischen den Tags eine Zwischenüberschrift ist
<!–……–> zwischen diesen Tags kann man Kommentare einfügen
Am <html>-Tag erkennt der Browser, dass das Dokument tatsächlich in HTML geschrieben ist, deshalb muss man es auch in den Code schreiben.
Es gibt sechs verschiedene Ebenen von Überschriften, also von <h1> bis <h6>, die vom Browser schrittweise in jeweils kleineren Schriftgrößen dargestellt werden.
So könnte ein Beispielcode aussehen:
und dessen Ausführung:
Zum Erstellen einer HTML-Datei braucht man einen Texteditor. Ich benutze Atom und würde jedem anraten nicht den Texteditor zu benutzen der bereits auf dem Laptop installiert ist, sondern sich einen herauszusuchen, der einem zusagt.
Um eine HTML-Datei im Browser zu öffnen, muss man sie entweder doppelt anklicken, oder einen Rechtsklick machen und sich dann einen Browser aussuchen.
<….> (z.B. <h1>) nennt man Start-Tag und </…>(z.B. </h1>) nennt man Ende-Tag.Dass es sich um ein schließendes Tag handelt kann man daran erkennen, dass es nach dem Inhalt kommt und es mit „/“ beginnt. Beide Tags zusammen nennt man ein Tag-Paar. Tags bestehen aus dem Tag-Namen und den spitzen Klammern. Das Start-Tag, der Inhalt und das Ende-Tag bilden zusammen ein Element. Es ist jedoch auch möglich Tags ineinander zu verschachteln.
Um der Website einen eigenen Stil zu geben und sich nicht auf die Standardeinstellungen im Browser zu verlassen, kann man mit CSS beschreiben, wie der Inhalt dargestellt werden soll. Um CSS im HTML-Code einzubauen braucht man das <style>-Element hinzufügen. CSS widme ich ein eigenes Kapitel innerhalb dieser Vorlesung.
E-Portfolio Annick 