HTML-Primer: Was in HTML-Büchern fehlt
Die erste HTML-Seite
Was wir brauchen
1. Text-Editor (zum Erstellen der Seiten)
Da wir HTML nicht nur erzeugen, sondern auch verstehen wollen, benutzen wir zur Erstellung unserer ersten Seite einen einfachen Text-Editor. Alle Betriebssysteme haben solch ein Tool an Bord. Das heißt, man muss keinen Editor kaufen und installieren.
Bei Microsoft Windows heißt dieser Editor Notepad. Das ist allerdings kein guter Editor und er macht auch Probleme. Wer ihn nutzen will beachte: Erstens immer aufpassen, dass Notepad nicht einfach eine Endung „.txt” an den gewählten Dateinamen anhängt. Zweitens beim Öffnen einer Datei immer „Alle Dateien” anwählen, weil sonst nur Text-Dateien mit der Endung „.txt” angezeigt werden.
Will sagen: Am besten installiert man bei Windows gleich einen guten Editor und hat seine Ruhe. Die müssen auch nix kosten. Hervorragende Produkte sind PS-Pad und Notepad++.
2. Web-Browser (zum Anschauen der Ergebnisse)
Die Seiten sollen nachher auf dem Web mit einem Web-Browser betrachtet werden. Mit den gängigen Web-Browsern kann man seine HTML-Dateien auch direkt von der Festplatte betrachten. Windows-Benutzer machen oft von dem bereits installierten Microsoft Internet-Explorer (MSIE) Gebrauch. Aufgrund der möchte ich aber dazu raten, diesen im Moment nicht im Internet zu benutzen. Stattdessen sollte man sich z.B. Mozilla Firefox oder Opera installieren.
Wir erstellen eine HTML-Seite
Wenn der Text-Editor gestartet ist, kann man sofort loslegen. In eine neue Datei geben wir folgendes ein:
<html>
<body>
<h1>Hallo Welt!</h1>
</body>
<html>
Die ganze HTML-Seite ist ein Element vom Typ „html”.
Daher stehen HTML-Seiten immer zwischen einem Zeichen (Tag) für
HTML-Anfang (<html>) und dem Tag für HTML-Ende
(</html>).
Der eigentliche Inhalt der Seite wird als Body bezeichnet und
steht -- innerhalb des HTML-Elementes -- zwischen den Tags für
Body-Anfang (<body>) und Body-Ende
(</body>).
Webseiten sind immer in ein HTML-Element eingebettet und haben auch immer einen Body. Der Inhalt des Body ist verschieden. Im Body steht nämlich der eigentliche Inhalt der Seite.
In diesem Seiten-Body haben wir nur ein Element, nämlich eine
Haupt-Überschrift (H1), die zwischen <h1>
und </h1>
steht.
Diese Datei speichern wir jetzt auf unserer Festplatte. Am besten legt man sich dabei gleich einen neuen Ordner für Web-Design an. Dort speichern wir die Datei unter dem Namen „test.html”.
Wir betrachten unsere HTML-Seite
Nun müssen wir unseren Web-Browser zur Hand haben. Wir wählen aus dem Menu „Datei”, „Datei öffnen” und suchen nach der Datei „test.html” und öffnen diese.
Das Ergebnis sollte etwa so aussehen:
Als nächstes lernen wir ein paar weitere HTML-Tags.