Schritt für Schritt lernen
die eigene Website zu erstellen

Jetzt das HTML-Seminar als
Video-Tutorial mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

Videokurs HTML + CSS + Webdesign erstellen

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 (z.B. dem Programm „Editor“ unter Windows, zu finden unter „Alle Programme“ - Zubehör) an. Bei Windows 8 einfach auf der Kacheloberfläche „Editor“ eintippen und diesen starten.

einfacher Texteditor vom Betriebssystem

Diese Datei speichern wir mit 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!

wichtig beim Speichern von Internetseiten mit dem Editor

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

Herzlich willkommen auf
meiner ersten HTML-Seite

Hier                  finden
Sie meine erste Homepage zum
Lernen von HTML vom 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 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:

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 wird die Datei doppelt anklicken, wird diese im Webbrowser angezeigt. Die Ausgabe im Browser sollte ungefähr wie folgt aussehen:

Herzlich willkommen auf meiner ersten HTML-Seite Sie meine erste Homepage zum Lernen von HTML vom 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).

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

Facebook und Google+

Sehr geehrte Nutzer/innen dieser Website! Wir würden uns freuen, wenn Sie uns durch Facebook oder Google+ unterstützen würden - sei es durch ein Like/+1 oder das Teilen dieser Seite. Allerdings legen wir Wert auf Datenschutz und möchten nicht, dass diese Netzwerke Daten von Ihnen erhalten, sollten Sie dies nicht wünschen. Deshalb sind die entsprechenden Buttons bei uns standardmäßig deaktiviert.

Durch einen Klick auf einen der unteren Buttons stimmen Sie der Nutzung/Speicherung Ihrer Daten (in uns unbekanntem Ausmaß, uns unbekannten Orten und uns unbekannter Weise) zu und erhalten Zugriff auf die Buttons. Wir bitten um Ihr Verständis und freuen uns über Ihre Unterstützung :)

eBook HTML-Seminar.de Videokurs HTML + CSS + Webdesign erstellen

Video-Tutorial: über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign

© 2000-2014 Axel Pratzner • www.html-seminar.de • Stand 2.1.2014
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de