I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren


HTML-Syntax

Quellcode
HTML-Syntax
HTML-Basis
Aufgaben

Quellcode

Der Quellcode einer Datei besteht aus Inhalten (Text) und Befehlen. Mit Hilfe von Befehlen können allgemeine Anweisungen für den Browser (z.B. hier beginnt eine HTML-Seite) erfolgen, Texte formatiert oder Inhalte (z.B. füge mir eine Bild-Datei ein) eingefügt werden.

 

HTML-Syntax

HTML besteht aus einer großen Menge von Befehlen und Attributen, die man miteinander verbinden kann. Das W3-Konsortium bestimmt, welche Befehle und Attribute verwendet werden. Zur Zeit gilt die Version HTML 4. Jeder kann weitere Befehle und Attribute vorschlagen. Es gibt eine Reihe von Befehlen, die nur von einem Browser unterstützt werden. Daher finden Sie oft den Hinweis "optimiert für Netscape", das bedeutet, dass alle Befehle und Attribute dieser Homepage mit Netscape funktionieren.

Jeder Befehl wird in spitze Klammern ("<" und ">") gesetzt. Nach der Eingangs-Klammer "<" steht der Befehl, danach können durch ein Leerzeichen getrennt die übrigen Attribute des Befehls folgen. Ein Befehl kann auch ohne Attribute angewendet werden oder gleich mehrere Attribute enthalten. Geschlossen wird der Befehl mit einer Schluss-Klammer ">". Groß- und Kleinschreibung spielen keine Rolle.

Beispiel: <p align="center"> in dem "p" der Befehl für neuen Absatz ist und align das Attribut, das die Zentrierung des Textes in diesem Absatz bewirkt und ="center" der Wert des Attributs. 

Es gibt Anfangs-Tags (Tag=Befehl) (Beispiel: <html>) und End-Tags (Beispiel: </html>), diese Befehle umschließen den Bereich, auf den der Befehl angewendet wird. Ausnahmen bestätigen die Regel, es gibt auch Befehle, die keinen End-Tag haben (z.B. <br>). 

Ein Befehl kann mehrere Attribute enthalten z.B. <table size="6" width="100" bgcolor="red">, trotzdem wird der Befehl nur mit </table> geschlossen. Attribute müssen nicht beendet werden, mit dem schließen des Befehls verlieren auch die in diesem Befehl enthaltenen Attribute ihre Wirkung.

Mehrere Befehle können miteinander kombiniert werden, dabei muss man beachten, dass der zuerst geöffnete Befehl zuletzt geschlossen wird (wie bei den Klammern in Mathematik). Beispiel: Wenn Befehle in folgender Reihenfolge  <b><i><sup> erstellt werden, dann müssen diese in dieser Reihenfolge  geschlossen werden </sup></i></b>.

Universalattribute können mit fast allen Befehlen kombiniert werden. Beispiel: Das Attribut "align="center" für Zentrieren, kann sowohl mit dem Absatz-Befehl (<p align="center">), mit dem Überschrift-Befehl (<h1 align="center">) als auch mit anderen Befehlen eingesetzt werden.

Bei der Erstellung des Quellcodes müssen noch folgende Hinweise beachtet werden:

  • Ob Sie in der HTML-Datei das gesamte Dokument in eine Zeile schreiben oder am Bildschirmrand jedes Mal mit der Eingabe-Taste einen Zeilenumbruch einfügen ist grundsätzlich egal. Allerdings sollten Sie zum Zwecke der Übersichtlichkeit regelmäßig eine neue Zeile beginnen.
  • Einrückungen im Quelltext sind unnötig, werden aber vom Browser ignoriert. Bei großen Dateien, sind sie sehr nützlich. Weiterhin ist es egal, wie viele Leerzeichen Sie irgendwo hintereinander einfügen, wenn Sie diese nicht mit dem Code für Sonderzeichen &#160; oder &nbsp; einfügen, wird im Browser immer nur ein Leerzeichen angezeigt.
  • Die Groß-/Kleinschreibung spielt bei HTML-Befehlen keine Rolle. Hingegen müssen Sie die Groß-/Kleinschreibung bei Dateinamen sowie selber benannten Namen für Frames oder Bezeichnungen für Textstellen  beachten.
  • Dateinamen, Frames und Bezeichnungen für Textstellen dürfen keine Lehrzeichen, keine deutschen Umlaute und keine Sonderzeichen außer dem Unterstrich "_"enthalten.
  • Der Wert des Attributs (="center" oder ="100%") muss nicht immer in Hochkommata gesetzt werden. Aus didaktischen Gründen wird er in diesen Seiten immer in Hochkommata gesetzt, hinzu kommt, dass in WYSIWYG-Editoren diese auch verwendet werden.

 

HTML-Basis oder HTML-Grundgerüst 

Jede HTML-Datei beginnt mit dem Befehl <html> und endet mit </html>. Damit weiß der Browser, dass dies eine HTML-Datei ist. 

Ein HTML-Dokument hat zwei unterschiedliche Bereiche: Head (Kopf) und Body (Rumpf). Mit den Befehlen <head> und </head> wird der Kopf-Bereich definiert und mit <body> und </body> der Body. 

Im Kopf  müssen alle sogenannten "Meta-Tags" (Tag=Befehl) eingeführt werden. Diese enthalten Metainformationen über Ihre Seiten und sind für die Suchmaschinen (Suchmaschinen im Internet oder im eigenen Projekt) oder für den Browser bestimmt. Im Body werden die Inhalte in Form von Text oder Bild-, Audio- oder Videodateien eingefügt.

 

HTML-Basis 
So sieht der Quellcode, die HTML-Basis, einer HTML-Datei aus:

<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
Inhalt der Datei, Text Ihrer Wahl einfügen.
</body>
</html> 

Aufgaben

  1. Legen Sie mit dem Windows Explorer ein Verzeichnis (Ordner) mit dem Namen "test" an.
  2. Öffnen Sie Ihren Editor. Klicken Sie, sofern Sie mit Windows arbeiten, auf Start, Programme, Zubehör, Editor. 
  3. Geben Sie im Editor die HTML-Basis ein (vgl. Angaben aus dem Kasten oben, Sie müssen alle dort aufgeführten Befehle von <html> bis </html> einfügen). Wählen Sie einen Titel Ihrer Wahl und fügen Sie einen Satz im Body ein.
  4. Speichern Sie die Datei im Ordner  "test" unter dem Namen "start.htm". Bitte Ordner- und Dateinamen immer klein schreiben und keine Sonderzeichen verwenden. Achten Sie darauf, dass bei Dateityp nicht "Textdokumente" steht, sondern  "Alle Dateien *.*", sonst wird der Dateiname vom Programm automatisch verändert (Das Programm fügt die Endung "txt" hinzu).
  5. Öffnen Sie den Browser entweder mit dem Internet Explorer (IE) oder mit dem Netscape Communicator (N). Gehen Sie dabei wie folgt vor: Klicken Sie auf Datei, (Seite)-Öffnen, dann Durchsuchen (IE) oder Datei wählen (N) klicken Sie auf die Datei und dann auf Öffnen.
  6. Schreiben Sie im Editor noch ein paar Sätze in den Body (zwischen <body> und </body>). Speichern Sie die Datei nochmals und schauen sich das Ergebnis mit dem Browser an. Sofern Sie die Änderungen nicht sehen, dann haben Sie entweder vergessen, im Editor nochmals zu speichern oder Sie haben im Browser nicht auf "Aktualisieren" oder "Neu laden" gedrückt. Unter Windows klappt häufig die Aktualisierung nicht, dann müssen Sie im Browser die Datei nochmals öffnen (siehe Aufgabe 5).

Grundbegriffe Seite drucken Text
I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren
© Copyright by Johann-Lauer.de
Quelle: www.web-publishing.biz E-Mail: info@web-publishing.biz
Seitenanfang