Die erste eigene HTML-Seite

Im ersten Schritt soll nun zunächst der Microsoft-IIS-Server aktiviert werden.

Dazu in den Systemeinstellungen mit „Programme“ und dann „Windows-Features aktivieren oder deaktivieren“ das Fenster „Windows-Features“ öffnen und hier den Punkt „Internetinformationsdienste“ aktivieren:

Die Schritte im einzelnen und wie der Microsoft-IIS-Server getestet werden kann, wird in den „Technicals“ im Kapitel „Microsoft-IIS-Server“ genauer beschrieben.

Im zweiten Schritt wird nun die HTML-Datei mit dem Windows-Edior erstellt.

Unter Windows 7 das Startmenü öffnen, in das Eingabefeld „editor“ eingeben und dann auf „Editor“ klicken:

Unter Windows 8.1 die Metro-Ansicht öffnen, „editor“ eingeben und dann auf „Editor“ klicken:

Unter Windows 10 das Startmenü öffnen, „editor“ eingeben und dann auf „Editor“ klicken:

Damit der Browser weiß, welche HTML-Version das Dokument hat, muss als erstes in einem HTML-Dokument das DOCTYPE-Element stehen:

Das DOCTYPE-Element wird durch ein Ausrufezeichen „!“ gefolgt von „DOCTYPE“ definiert. Danach wird die entsprechende Version angegeben. Ab HTML5 ist es ausreichend lediglich „html“ für die Version anzugeben.

Als nächstes soll der HTML-Rumpf erstellt werden. Das gesamte HTML-Dokument wird von dem Start- und End-Tag des „html“-Elements umschlossen. Die Ausnahme bildet das „DOCTYPE“-Element, das vor dem eigentlichen HTML-Dokument stehen muss. Innerhalb eines HTML-Dokuments gibt es einen Head-Bereich und einen Body-Bereich. Der Head-Bereich ist nicht sichtbar und dient dazu, zusätzliche Informationen zu einer HTML-Seite anzugeben. Der Body-Bereich definiert den eigentlichen Inhalt einer HTML-Seite in dem alle sichtbaren Elemente der Seite untergebracht werden.

Hinweis: Die Einrückungen in der Abbildung sind nicht Pflicht, dienen aber der besseren Übersicht in einem HTML-Dokument.

Der Head-Bereich soll nun um das „title“-Element erweitert werden. Der Titel ist zwar nicht auf der Seite selber sichtbar, wird aber auf der Registerkarte des Browsers angezeigt.

Der Body-Bereich wird nun um einen Absatz („p“-Element) erweitert.

Hinweis: Seitenumbrüche innerhalb eines „p“-Elements werden vom Browser ignoriert, dafür aber vor und nach einem „p“-Element immer automatisch ein Zeilenumbruch eingefügt.

Zuletzt sollen dem HTML-Dokument noch zwei Kommentare hinzugefügt werden.

Hinweis: Kommentare werden nicht auf der Seite im Browser angezeigt, dienen aber der Strukturierung und Kennzeichnung des HTML-Codes. Die Verwendung von Kommentaren kann sehr nützlich sein, wenn mehrere an einem Webauftritt arbeiten, um nachvollziehen zu können, warum ein Designer bestimmte Elemente an der entsprechenden Stelle verwendet hat. Auch für einen selber kann es eine gute Erinnerungsstütze sein, wenn man später eine Seite anpassen oder erweitern möchte.

Zum Abschluss wird die HTML-Seite nun mit der Endung „.html“ gespeichert.

Hinweis: Dabei sollte die Datei zunächst in ein eigenes Verzeichnis gespeichert werden, da es auf manchen Systemen nicht erlaubt ist, direkt in das Root-Verzeichnis des Webservers zu speichern. Außerdem sollten in das Root-Verzeichnis dann nur die HTML-Dateien landen, die getestet oder über das Netzwerk zur Verfügung gestellt werden sollen.

Im dritten Schritt wird die HTML-Datei im Root-Verzeichnis des IIS-Servers gespeichert und vom Browser aus gestartet.

Um die HTML-Seite über den IIS-Server zu starten, muss die HTML-Datei direkt in das Root-Verzeichnis des IIS-Servers kopiert werden.

Je nach Berechtigungen des Anwenders auf dem System, kann folgende Abfrage erscheinen. Hier muss der Vorgang mit „Fortsetzen“ bestätigt werden.

Zuletzt soll die HTML-Datei nun im Browser angezeigt werden. Dazu wird in der Adresszeile des Browsers an die Adresse des lokalen Webservers („127.0.0.1“) ein Slash „/“ und der Name der HTML-Datei angehängt.

Wird eine HTML-Datei verändert, die bereits vor der Änderung in einem Browser angezeigt wurde, kann es vorkommen, dass die Veränderungen nicht dargestellt werden. Das kommt davon, dass Browser Dateien von Webseiten in ihren sog. Cache speichern. Damit vorgenommene Änderung dennoch angezeigt werden können, muss der Browser-Cache gelöscht werden. Wie dies genau funktioniert wird in den „Technicals“ im Kapiel „Browser-Cache löschen“ gezeigt.

Im vierten Schritt sollen nun eigene Erfahrungen mit HTML gesammelt werden. Dazu können die folgenden kleinen Aufgaben abgearbeitet werden.

Öffne die HTML-Datei im Benutzerverzeichnis (nicht im Root-Verzeichnis des IIS-Servers) und verändere den Text innerhalb des „title“- und des „p“-Elements. Kopiere danach die Datei in das Root-Verzeichnes des IIS-Servers, lösche den Browser-Cache und rufe die Datei dann im Webbrowser auf:

So könnte das Ergebnis aussehen:

HTML-Datei:

Ergebnis im Browser:

Erstelle eine eigene neue HTML-Seite mit dem Titel „Meine zweite HTML-Seite“.

So könnte das Ergebnis aussehen:

HTML-Datei:

Ergebnis im Browser:

Schreibe drei Sätze mit Zeilenumbruch in ein „p“-Element.

So könnte das Ergebnis aussehen:

HTML-Datei:

Ergebnis im Browser:

Verwende nun für alle drei Sätze ein eigenes „p“-Element.

So könnte das Ergebnis aussehen:

HTML-Datei:

Ergebnis im Browser: