erste eigene HTML-Seite erstellen

Wir steigen hier ganz einfach ein. Dabei werden wir sehr schnell eine HTML-Seite entwerfen, die in einem Web-Browser angezeigt werden kann.Dabei werden die Beispiele am Anfang sehr einfach gehalten sein, damit ein grundlegendes Verständnis aufgebaut werden kann. 

sehr einfache HTML-Seite erstellen

Für das Grundverständnis legen wir nun eine Seite in einem einfachen Texteditor (z.B. dem Programm „Editor“ unter Windows, zu finden unter „Alle Programme“ – Zubehör) an.

Du kannst auch direkt mit dem komfortableren Programm Notepad++ arbeiten. Gibt es kostenlos zum Download im Netz.

Als Speicherort für die zukünftigen Dateien legst du auf deinem USB Stick die Ordner ai/html/ an.

Für ISERV gilt: Du speicherst deine Dateien in deinem Homepageverzeichnis ab H:\homepage

Netzlaufwerk einbinden: https://www.iserv.de/doc/cookbook/external/webdav/windows-10/


max.muster.stt-hl.org ruft deine H:\homepage\index.html auf
max.muster.stt-hl.org/absatz.html ruft die Datei H:\homepage\absatz.html auf

Diese Datei speichern wir mit dem Namen „index.html“. Wichtig ist dabei die Endung. Durch die Endung sagen wir, dass es sich um eine HTML-Seite handelt. Wichtig ist beim Editor unter Windows, dass der Dateityp auf „Alle Dateien“ gestellt wird – sonst kann es vorkommen, dass unsere Datei in Wirklichkeit dann „index.htm.txt“ heißt und daher keine HTML-Seite ist. Die Anzeige der letzten Endung kann je nach Einstellung des Betriebssystems unterdrückt sein und man wundert sich dann, dass nichts so funktioniert wie hier beschrieben. Daher bitte darauf achten, dass die Endung entsprechend eingetragen ist!

Der Inhalt der Datei ist (exakt mit Leerzeichen und Umbrüchen abtippen!):

Herzlich willkommen auf
meiner ersten HTML-Seite
Hier                  findest
du meine erste Homepage zum
Lernen von HTML 
Angewandte 
Informatik
macht ganz viel Spass!

Datei speichern als HTML-Seite

Die Datei hat durch die Endung „.htm“ im Betriebssystem das Browserlogo bekommen (meistens das E des Internet Explorer oder je nach Webbrowser das entsprechende Symbol).

Im Dateibrowser wird nun die Datei mit entsprechendem Icon angezeigt – hier das bekannte E vom Internet Explorer für Internetseiten:

Oder dem entsprechenden für Firefox:

Hier unbedingt auf die Endung achten – schief lief es, wenn folgendes Symbol auftaucht:

Nun schauen wir uns diese Seite mit einem Webbrowser an. Sobald wir die Datei doppelt anklicken, wird diese im Webbrowser angezeigt. 

Was fällt dir auf?

Erstaunlich, oder? Alle Umbrüche sind beseitigt und mehrere Leerzeichen werden zu einem Leerzeichen zusammengefasst. Nicht wundern – denn dies ist in HMTL völlig normal.

Schockiert, wie einfach HTML Seiten erstellen sein kann?

Das ist durchaus schon eine HTML-Seite (auch wenn sie nicht blinkt und leuchtet und videos beinhaltet). Hier siehst du Grund für den Siegeszug von HTML. Durch sehr einfache Mittel können Inhalte für andere bereitgestellt werden, die dann weltweit darauf zugreifen können. Unsere Datei müssten wir dazu nur noch auf einen Webserver schieben (dazu kommen wir später).

Für ISERV gilt: Deine Datei ist bereits im WWW erreichbar. Bedenke: du bist verantwortlich für den Inhalt.

Als nächstes wollen wir unseren Text strukturieren und sauber anzeigen lassen. Dazu benötigen wir die ersten HTML-TAGs.