Erstellen Sie Ihre erste HTML-Seite
Sie haben jetzt gesehen, wie HTML aussieht - nun sind Sie an der Reihe. Lassen Sie uns mit einem recht einfachen Beispiel beginnen, sodass Sie ein Grundgefühl für HTML bekommen.
Um ein HTML-Dokument zu schreiben, brauchen Sie keinen Web-Server, Web-Provider und noch nicht mal eine Verbindung zum Web selbst. Alles, was Sie wirklich brauchen, ist etwas, womit Sie Ihre HTML-Dateien schreiben können, und noch mindestens einen Browser, mit dem Sie sie anschauen können. Sie können ganze Reihen von Webseiten schreiben, verknüpfen und testen, ohne jemals mit einem Netzwerk in Berührung zu kommen.
Zuerst brauchen Sie einen Texteditor. Ein Text-Editor ist ein Programm, das Dateien im ASCII-Format erzeugen kann.
ASCII-Format ist einfach reiner Text, ohne Schriftformatierung oder Spezialzeichen. Unter Windows sind Notepad, Microsoft Write bzw. WordPad und DOS edit gute, einfache Texteditoren (diese kommen kostenlos mit dem System!). Shareware Text-Editors sind für verschiedene Betriebssysteme, inklusive DOS, Windows 3.1, Windows 95/98, Windows NT, Macintosh und LINUX erhältlich.
Wenn Sie nur ein Textverarbeitungsprogramm wie Microsoft Word haben, brauchen Sie keine Panik zu bekommen. Sie können Seiten in Textverarbeitungsprogrammen genauso gut wie in Texteditoren schreiben, obwohl dies ein wenig komplizierter sein kann. Wenn Sie den Befehl Speichern oder Speichern unter geben, sehen Sie ein Menü mit verschiedenen Formaten, unter denen Sie die Datei speichern können. Eines davon sollte "Nur Text", "Text mit Zeilenumbrüchen" oder "DOS-Text" sein. Alle diese Optionen speichern Ihre Datei als reinen ASCII-Text, genauso, wie es auch ein Text-Editor täte. Wenn Sie bei HTML-Dateien die Wahl zwischen DOS-Text und reinem Text haben, wählen Sie DOS-Text, und benutzen Sie auch die Zeilenumbruch-Option, wenn möglich.
Wenn Sie ein Textverarbeitungsprogramm für Ihre HTML-Entwicklung verwenden, seien Sie sehr vorsichtig.
Viele neue Textverarbeitungsprogramme beinhalten einen Modus für HTML oder XML Mechanismen, um HTML-Code zu schreiben. Das Textverarbeitungsprogramm kann Ihnen das HTML-Kodieren auf einmal ungewollt abnehmen oder Sie mysteriöserweise, ohne Vorwarnung, in diesen Modus umschalten. Dies kann ungewöhnliche Resultate zur Folge haben. Wenn Sie Probleme mit einem Textverarbeitungsprogramm haben, probieren Sie es einfach mit einem Texteditor, und sehen Sie, ob das besser ist.
Wie sieht es nun aber mit der Flut der kostenlosen und kommerziellen HTML-Editoren aus, die behaupten, Ihnen dabei zu helfen, HTML einfacher zu schreiben? Die meisten von ihnen sind einfache Texteditoren mit einigen Buttons, die die Kennungen (Tags) für Sie einsetzen. Wenn Sie bereits einen besitzen, können Sie ihn ruhig benutzen. Wenn Sie jedoch einen ausgefallenen Editor haben, der von sich behauptet, alle HTML-Befehle für Sie zu verstecken und alle Arbeit für Sie zu erledigen, so legen Sie ihn mal für ein paar Tage beiseite, und verwenden Sie für eine kleine Weile einen rein textbasierten Editor.
Starten Sie den Texteditor, und schreiben Sie folgenden Code. Sie müssen an dieser Stelle noch nicht verstehen, was das alles bedeutet; Sie lernen das später in diesem Kapitel. Dies ist nur ein einfaches Beispiel, um zu beginnen:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-utf-8" />
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
Erstellen Sie Ihre erste HTML-Seite
</h1>
</body>
</html>
In diesem Beispiel, sowie auch in anderen Beispielen, werden die HTML-Tags dunkler als der übrige Text geschrieben, damit sie die Tags leicht erkennen können. Wenn Sie Ihre eigenen HTML-Dateien erstellen, wird der ganze Text in einer einheitlichen Farbe erscheinen (es sei denn, Sie verwenden ein speziellen HTML-Editor, der Tags in bestimmten Farben erscheinen lässt).
Nachdem Sie Ihre HTML-Datei nun erzeugt haben, speichern Sie sie auf der Platte - und denken Sie daran, wenn Sie ein Text-verarbeitungssystem benutzen, sie als reinen ASCII-Text zu speichern. Wenn Sie einen Namen für die Datei auswählen, gibt es zwei Regeln, die Sie befolgen müssen:
Der Datei-Name sollte die Endung .html haben (oder .htm auf DOS- oder Windows-Systemen, die nur Extensionen mit drei Stellen haben); beispielsweise Mein-Beispiel.html oder Text.html oder Index.htm. Die meiste Web-Server-Software wird Dateien mit diesen Extensionen erwarten, also sollten Sie sich schon jetzt daran gewöhnen, sie zu benutzen.
Benutzen Sie kurze, einfache Namen. Fügen Sie keine Leerstellen oder Sonderzeichen (Merkpunkte, hervorgehobene Zeichen) ein - es reicht vollkommen, Buchstaben und Ziffern zu verwenden.
Sehen Sie sich das Resultat an
Nun, da Sie eine HTML-Datei haben, starten Sie Ihren Web-Browser. Sie müssen jetzt nicht mit dem Netzwerk verbunden sein, da Sie ja keine Dokumente auf irgendeinem anderen System öffnen wollen (obwohl Ihr Browser nach einer Verbindung verlangen könnte; oft wird er sich aber damit abfinden, keine Verbindung zu haben, und weiter arbeiten).
Danach, wieder in Ihrem Browser, wählen Sie AKTUALISIEREN oder sein Äquivalent (NEU LADEN für Internet Explorer) Der Browser wird nun die neue Version Ihrer Datei lesen, und voilà, Sie können editieren und ansehen und editieren und ansehen, bis Sie alles richtig hingekriegt haben.
Wenn Sie den tatsächlichen HTML-Text in Ihrem Browser zu sehen bekommen und nicht den Inhalt des Bildes, dann versichern Sie sich, dass Ihre HTML-Datei eine .html- oder .htm-Extension hat. Diese Datei-Extension ist wichtig, denn sie zeigt Ihrem Browser an, dass es sich um eine HTML-Datei handelt.
Wenn die Dinge absolut nicht stimmen - wenn Sie einen leeren Bildschirm zu sehen bekommen oder seltsame Zeichen sehen -, dann stimmt etwas mit Ihrer Originaldatei nicht. Wenn Sie ein Textverarbeitungsprogramm benutzt haben, um Ihre Dateien zu editieren, versuchen Sie zur Abwechslung, Ihre gespeicherte HTML-Datei in einem rein textbasierten Editor zu öffnen (hier werden NotePad oder SimpleText wieder gute Dienste leisten). Wenn der Text-Editor es nicht lesen kann oder das Resultat vermurkst ist, dann haben Sie die Originaldatei nicht im richtigen Format gespeichert. Gehen Sie zu Ihrem Originaleditor zurück, und versuchen Sie noch einmal, die Datei als "Nur Text" zu speichern, und probieren Sie sie dann noch mal in Ihrem Browser aus, bis Sie es richtig hinkriegen.
Ein Hinweis zum Formatieren
Wenn ein HTML-Dokument von einem Browser untersucht wird, werden alle Formatierungen, die Sie womöglich von Hand gemacht haben - wie etwa zusätzliche Leerzeichen, Tabulatoren, Zeilenumbrüche -, ignoriert. Das einzige, das ein HTML-Dokument formatiert, ist eine HTML-Kennung (HTML-Tag). Wenn Sie Stunden damit verbracht haben, eine Text-Datei so zu editieren, dass sie optimal formatierte Absätze hat und Spalten mit Zahlen, aber keinerlei HTML-Kennungen eingefügt haben, dann wird der Text, wenn Sie das Dokument in einen HTML-Browser laden, insgesamt in einem einzigen Absatz zusammenfließen, und all Ihre Arbeit wird vergeblich gewesen sein.
Es gibt eine Ausnahme dieser Regel: eine Kennung namens
<pre>.
Der Vorteil des Ignorierens aller so genannten white spaces (Leerzeichen, Tabulatoren, Zeilenumbrüche) besteht darin, dass Sie Ihre Tags einfügen können, wo immer Sie mögen.
Die folgenden Beispiele führen alle zum gleichen Ergebnis. In all Code-Beispielen wird der allseits bekannte Lorem Ipsum Beispiel-Text verwendet. (Probieren Sie es!)
<h1>Erstellen Sie Ihre erste HTML-Seite</h1>
<h1>
lobortis elit lacinia justo dictumst
</h1>
<h1>
lobortis elit lacinia justo dictumst </h1>
<h1> lobortis elit lacinia justo
dictumst </h1>
