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. Dadurch sind die ersten Seiten, die wir hier erstellen, noch kein valides HTML, sondern einfach zum HTML Lernen. Valide HTML-Seiten sind nach bestimmten Regeln aufgebaut.

Aber keine Angst - wir kommen von den einfachen Webseiten über den entsprechenden Wissenszuwachs sehr bald zu validen HTML-Seiten, und Sie bekommen die Werkzeuge an die Hand, um sich selber kontrollieren zu können!

Sehr einfache HTML-Seite erstellen

Für das Grundverständnis legen wir nun eine Seite in einem einfachen Texteditor an (z.B. dem Programm „Editor“ von Windows, zu finden unter „Alle Programme“ - Zubehör). Bei Windows einfach in die Suchfunktion „Editor“ eintippen und diesen starten.

einfacher Texteditor vom Betriebssystem

Diese Datei speichern wir unter dem Namen "index.htm". 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!

Beim Speichern sollte als Codierung UTF-8 ausgewählt werden. Wofür UTF-8 gut ist, wird in einem späteren Kapitel erklärt.

wichtig beim Speichern von Internetseiten mit dem Editor

Aufgabe: 1 HTML-Seite

Erstellen Sie eine Datei mit dem Dateinamen „index.htm“ und nachfolgendem Inhalt. Bitte darauf achten, dass alle Leerzeichen und Umbrüche auch mit übernommen werden!

Herzlich willkommen auf
meiner     ersten      HTML-Seite.

Hier                         finden
Sie meine ersten HTML-Gehversuche zum 
Lernen von HTML mit dem HTML-KURS http://www.html-seminar.de

Ihr
Manfred
Mustermann

Datei speichern als HTML-Seite

Die Datei hat durch die Endung ".htm" im Betriebssystem das Browserlogo bekommen (meistens das E des Internet Explorers 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:

Icon im Explorer bei Standardbrowser Internet Explorer

Oder dem entsprechenden für Firefox:

Icon im Explorer bei Standardbrowser Firefox

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

falsche Dateiendung durch selbstgefälligen Editor

Nun schauen wir uns diese Seite mit einem Webbrowser an. Sobald wir die Datei doppelt anklicken, wird sie im Webbrowser angezeigt. Die Ausgabe im Browser sollte ungefähr wie folgt aussehen:

Herzlich willkommen auf meiner ersten HTML-Seite. Hier finden Sie meine ersten HTML-Gehversuche zum Lernen von HTML mit dem HTML-KURS http://www.html-seminar.de Ihr Manfred Mustermann

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 (wenn auch nicht valide). Hier sehen Sie den 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).

Im folgenden Kapitel wollen wir unseren Text strukturieren und sauber anzeigen lassen.

Zusammenfassung: erste HTML-Seite

  • HTML-Seiten sind reine Textdateien, daher kann jeder beliebige Texteditor genutzt werden
  • Die Endung des Dateinamens ist wichtig (.htm bzw. .html) – dadurch wird die Datei im Internet-Browser angezeigt
  • Als Codierung UTF-8 auswählen
  • Umbrüche und mehrfache Leerzeichen sind ohne Bedeutung – es wird immer nur 1 Leerzeichen vom Browser angezeigt
  • Der Quelltext jeder beliebigen Website kann angesehen werden (rechts Maustaste und entsprechender Menüpunkt). So kann man von anderen Websites lernen.