|
Was ist HTML eigentlich? Aufbau einer HTML-Datei |
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
|
|
|
||||||||||||||||||||||
|
|
|
|
||||
Was ist HTML eigentlich?HTML ist eine „Auszeichnungssprache“. HTML steht für „Hypertext Markup Language“. Ein „Hypertext“ ist ein Text, der über Verweise (sogenannte „Links“) mit anderen Texten oder Seiten verknüpft sein kann, und mit „Markup Language“ ist gemeint, dass die Inhalte einer Seite mit Markierungen („Auszeichnungen“) versehen sind, die eine Aussage über deren Bedeutung machen. So werden zum Beispiel Überschriften mit Markierungen der Art <h1>, <h2> usw. versehen. Daran erkennt ein Programm, das diese Texte anzeigen soll – üblicherweise ein sogenannter „Browser“ –, dass es diese Textteile auf eine bestimmte Art darstellen soll (im Fall von Überschriften in einer anderen Größe und in Fettdruck). Sollten Sie der Ansicht sein, dass eine Programmiersprache etwas Kompliziertes und schwer zu Erlernendes sei, so können Sie diese Ansicht getrost vergessen, denn HTML ist ziemlich einfach aufgebaut und die einzige Schwierigkeit besteht darin, die unterschiedlichen Sprachelemente (oder „Befehle“) zu lernen und anzuwenden. Aufbau einer HTML-DateiEine HTML-Datei bzw. -Seite kann man sich wie eine Schachtel vorstellen. Auf der Außenseite der Schachtel steht beispielsweise „Peters Homepage“ und wenn man diese Schachtel öffnet, findet man darin weitere Schachteln, die die unterschiedlichen Teile dieser Seite enthalten. Diese Schachteln können weitere Schachteln enthalten und so weiter. Jede dieser Schachteln ist mit Hinweisen darüber versehen, was in ihr enthalten ist und wie mit ihrem Inhalt umgegangen werden soll. So trägt beispielsweise die „äußerste“ Schachtel den Hinweis, dass in ihr HTML-Daten enthalten sind. Und die Schachteln darin enthalten Informationen über Kopf und Rumpf der Seite. In einer HTML-Datei sind Anfang und Ende eines Elements, zum Beispiel ein Absatz oder eine Überschrift, zumeist mit sogenannten „Tags“ gekennzeichnet, die in spitzen Klammern („<“ und „>“) stehen. Dabei ist der zweite, „schließende“ Teil eines Tags daran zu erkennen, dass er mit einem Schrägstrich („/“) beginnt. Beispiel:
An diesem Beispiel ist das oben Gesagte gut zu erkennen. Wenn man den Code „von außen nach innen“ liest, erkennt man die „große Schachtel“, deren Inhalt durch <html> und </html> begrenzt ist. Die „Schachteln“ im Inneren sind durch <head> und </head> beziehungsweise <body> und </body> gekennzeichnet. Im Kopf („head“) befindet sich der Titel, gekennzeichnet durch das <title>-Tag (<title> und </title>). Der Titel ist der Text, der bei der Ansicht im Browser die Titelleiste des Browserfensters ziert – und zwischen <body> und </body> befindet sich das, was im Inneren des Browserfensters zu sehen ist.
Das Beispiel im Browser. Die Einrückungen im Quelltext haben für den Browser übrigens keinerlei Bedeutung und werden ignoriert bzw. durch einzelne Leerzeichen ersetzt. Der menschliche Leser erkennt durch diese Einrückungen aber schnell, wie die Datei strukturiert ist. Hinweis: Das zuvor über Einrückungen Gesagte gilt bis auf folgende Ausnahme: Textteile, die mit dem <pre>-Tag (von engl. preformatted = vorformatiert) gekennzeichnet sind, werden in einer Schrift mit einheitlicher Zeichenbreite dargestellt und komplett – d. h. inklusive aller Leerschritte – angezeigt. Das führt dazu, dass auch durch Leerschritte erzeugte Einzüge berücksichtigt und korrekt dargestellt werden. Tipp: Ich empfehle Ihnen, Ihre HTML-Dateien grundsätzlich so aufzubauen, dass deren Struktur schnell erfassbar ist. Erzeugen
Sie die Einrückungen mit der Leerschritt-Taste und rücken Sie jede Ebene um zwei Leerschritte gegenüber ihrer Umgebung ein.
Im Vergleich zu Tabulatoren haben Leerschritte den Vorteil, dass die Einrückungen unabhängig vom verwendeten Editor und unterschiedlichen Einstellungen
immer gleich groß sind. Da ich ein Anhänger des „Open-Source“-Gedankens bin, läuft mein Computer unter einem auf Debian GNU/Linux basierenden System und ich verwende für vieles den Editor „gedit“, der zahlreiche Programmiersprachen unterstützt und mit entsprechenden Hervorhebungen anzeigen kann. Probieren Sie’s aus!Kopieren Sie den Beispiel-Code in einen Editor, passen sie ihn an, indem Sie beispielsweise Ihren Namen eintragen und speichern Sie ihn unter dem Namen „index.html“. Wenn Sie anschließend einen Doppelklick auf diese Datei machen, startet der auf Ihrem Computer installierte Webbrowser und zeigt die Datei an. Hinweis: HTML-Daten sollten immer als „Nur-Text-Dateien“ gespeichert werden. Wenn Sie gewohnt sind, Texte in einem „Office“-Programm zu verfassen, dies auch hier getan und nach dem Speichern lediglich die Endung des Dateinamens in „html“ geändert haben, funktioniert es nicht, da solche Dateien viele Informationen enthalten, mit denen ein Webbrowser meist nichts anfangen kann. Gehen Sie in diesem Fall so vor: Wählen Sie nach dem Eintippen (oder Kopieren und Einfügen) den Befehl „Speichern unter“, geben Sie im „Speichern-Unter“-Dialog das Dateiformat „Nur Text“ und den Dateinamen „index.html“ an und klicken Sie auf OK. Besonders aufregend sieht das Beispiel im Browser natürlich nicht aus. Üblicherweise befindet sich auf einer Homepage wesentlich mehr als nur eine einzelne Textzeile. Gehen wir also ein wenig ins Detail: Nachdem der Kopf der Seite mit dem Titel schon das Wichtigste enthält, konzentrieren wir uns auf den Rumpf und lernen dabei etwas kennen, mit dem man die Arbeitsweise vieler HTML-Befehle beeinflussen kann: „Modifizierer“ oder „Optionen“. Das <body>-Tag kennt einige Optionen, mit denen man beispielsweise die Hintergrundfarbe oder ein Hintergrundbild festlegen kann. Wenn nichts anderes angegeben ist, wird der Text einer HTML-Seite normalerweise in Schwarz auf einem grauen Hintergrund dargestellt. Möchten Sie, dass Ihre Seite – unabhängig von der Konfiguration des Browsers auf Betrachterseite – einen weißen Hintergrund hat, sieht der „öffnende“ Teil des <body>-Tags so aus:
oder
Dabei steht bgcolor= für „Background Color“ und die Angabe hinter dem Gleichheitszeichen gibt den Wert für die Hintergrundfarbe an. HTML kennt 16 vordefinierte Farben, die mit Namen bezeichnet werden, zum Beispiel „black“, „red“ oder „purple“. Da sich unter diesen Vorgaben nicht immer die gewünschte Farbe befindet, kann man Farben auch als „Hexadezimalwert“ angeben. Da die Erzeugung von Farben und deren Repräsentation als Hexadezimalwerte einer etwas ausführlicheren Erläuterung bedürfen, unternehmen wir einen kleinen Ausflug in ein ziemlich buntes Kapitel der Computerei. Weiter zu: Exkurs: Farberzeugung · Horizontale Linie |
