vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 1

Tag 3

Wichtige HTML- Grundlagen

Wenn Sie mit JavaScript programmieren wollen, kommen Sie auf Seiten des Clients nicht umhin, diese Scripte irgendwie in eine Webseite zu integrieren. Dazu gibt es gewisse Techniken, die zu HTML zählen. Ohnehin ist es für die Erstellung von Webscripten mittels JavaScript unabdingbar, dass Sie sich mit HTML-Grundlagen auskennen. Sie müssen nicht jede Anweisung kennen, aber zumindest das Konzept verstehen. Am dritten Tag wollen wir uns also genauer mit HTML-Grundlagen beschäftigen. Die Verbindung zu JavaScript wird uns dabei erst einmal nur am Rande interessieren. Am darauf folgenden Tag können wir dann zu der konkreten Integration von Scripten in Webseiten kommen. Darüber hinaus sollen dann auch Referenzen auf Style Sheets zur Sprache kommen, denn dieser Vorgang weist viele Parallelen dazu auf.

HTML-Grundlagen

Wir wollen am Anfang noch mal die wichtigsten Eckdaten von unseren bisherigen Ausführungen zu HTML zusammenfassen: HTML steht für »Hyper Text Markup Language« und bezeichnet eine Dokumentbeschreibungssprache, mit der die logischen Strukturen eines Dokuments im WWW beschriebenen werden. HTML-Dateien bestehen immer aus reinem Klartext ohne irgendwelche Formatierungen, wodurch HTML-Dokumente plattformunabhängig bleiben. HTML ist damit zwangsweise eine Interpretersprache, die interpretiert werden muss. Dazu verwendet man Browser. HTML verfügt im Gegensatz zu Programmier- und Scriptsprachen weder über Kontrollstrukturen in Form von Bedingungen, Sprüngen oder Schleifen noch über Variablen. Von daher können rein mit HTML beschriebene Seiten keinerlei Aktivitäten aufweisen (von referenzierten Ergänzungstechniken wie animierten GIFs oder so abgesehen) - sie sind statisch.

Die HTML-Steueranweisungen

HTML-Befehle bestehen aus Klartext-Steueranweisungen, die wiederum aus so genannten Tags aufgebaut sind. Ein Tag beginnt immer mit einer geöffneten spitzen Klammer

<

und endet mit der geschlossenen spitzen Klammer

> .

In so einem abgeschlossenen Bereich wird ein HTML-Schlüsselwort notiert, das den konkreten Befehl spezifiziert. Ein Tag sieht also von der Struktur her immer so aus:

  <Anweisung>

Wenn die Anweisung ein gültiges Schlüsselwort ist, wird der Interpreter (d.h. der Browser) die Anweisung im Inneren des Klammerpaars ausführen. Kennt er sie nicht, wird die Anweisung nach dem Prinzip der Fehlertoleranz ignoriert. Damit können jederzeit neue Anweisungen im WWW eingeführt werden, ohne dass in der Anfangsphase die alten Browser beim Laden einer Seite mit neuen Anweisungen abstürzen.

Grundsätzlich unterscheidet man bei Tags zwischen einem einleitenden Tag und einem beendenden Tag, der die Wirkung einer vorher erteilten Anweisung wieder aufhebt. Denken Sie beispielsweise an eine Anweisung, die ab einem bestimmten Zeichen allen nachfolgenden Text fett darstellen soll (das wäre die HTML-Anweisung <B>). Jedes nachfolgende Zeichen wird fett dargestellt, bis die Wirkung wieder aufgehoben wird (im Fall von fetter Textdarstellung mit </B>). Beide Tags sehen fast identisch aus, außer dass dem beendenden Tag vor der Anweisung ein Slash (Schrägstrich) / vorangestellt wird. Beispielsweise gehört zu dem einleitenden Tag

<H1>

der beendende Tag

</H1>

oder zu

<CENTER>

der beendende Tag

</CENTER>.

Beide Tags zusammen bilden einen so genannten Container. Dies bedeutet, die im einleitenden Tag angegebene HTML-Anweisung (etwa eine Formatierung) wirkt sich auf sämtliche Dinge aus, die sich im Inneren des Containers befinden und von der Anweisung beeinflusst werden können. Dies wird in vielen Fällen ein Text sein, es kann sich aber auch um Grafik oder andere Multimedia-Objekte handeln. Oder die Kennzeichnung eines Bereichs, indem Scripte oder Style Sheets notiert werden, wie wir bald sehen werden.

Nicht alle HTML-Steueranweisungen werden über Container realisiert. Es gibt auch eine Anzahl von Tags, wo kein beendender Tag notwendig ist. Etwa die Referenz auf eine Grafik. Oder das Einfügen eines Zeilenumbruchs. Daneben kann es Situationen geben, wo der Ende-Tag zwar vorgesehen ist, er aber in der Praxis ohne negative Auswirkung weggelassen werden kann. Etwa wenn ein nachfolgender Start-Tag eine widersprüchliche Anweisung auslöst, die die vorherige Anweisung deaktiviert. Auf eine solche »automatische« Deaktivierung sollte man sich aber nicht verlassen. Zumal im Fall von unbedingt notwendigem Ende-Tag ein Fehlen fatale Folgen haben kann. Dagegen ist die Angabe eines eigentlich nicht unter HTML definierten und damit überflüssigen Ende-Tags nie ein Problem. Für den Browser ist das einfach eine Anweisung, die er nicht kennt und er wird sie nach dem Prinzip der Fehlertoleranz ignorieren.

Viele HTML-Steueranweisungen sind erst dann sinnvoll einzusetzen, wenn sie genauer spezifiziert werden. Nicht jeder, denn beispielsweise ein Zeilenumbruch ist durch eine einfache Anweisung - die Steueranweisung <BR> - vollständig beschrieben (ohne weitere Parameter und auch ohne Ende-Tag). Aber nicht alle Anweisungen sind so eindeutig. Es gibt viele Steueranweisungen, wo man genauere Angaben machen muss. Etwa wenn eine Grafik referenziert werden soll. Neben dem Befehl, dass eine solche Referenz erfolgt, muss für dieses Beispiel auch noch angegeben werden, welche Datei genau das ist. Diese genauere Spezifikation erfolgt durch so genannte Parameter, die bei Bedarf den einleitenden Tag - durch Leerzeichen abgetrennt - erweitern. Dabei gibt es zwei Formen von Parametern:

  1. Parameter mit einer Wertzuweisung.
  2. Parameter, die bereits einen Wert repräsentieren.

Parameter mit einer Wertzuweisung bekommen über das Gleichheitszeichen = den entsprechenden Wert zugeordnet. Dies kann ein Text oder eine Zahl sein oder auch eine beliebige andere Form haben. Ein Tag mit einem Parameter mit einer Wertzuweisung sieht schematisch so aus:

<Anweisung Parameter=Wert>

Beispiel:

<IMG src="meinBild.gif">

Diese Anweisung referenziert eine Grafik in der Webseite.

Parameter, die bereits einen Wert repräsentieren, brauchen bloß durch ein Leerzeichen abgetrennt in den Einleitungs-Tag geschrieben werden. Sie fungieren als Schalter. Wenn sie angegeben werden, wird eine Eigenschaft aktiviert, fehlen sie, ist die jeweilige Eigenschaft deaktiviert. Ein Tag mit einem Parameter, der bereits einen Wert repräsentiert, sieht schematisch so aus:

<Anweisung Parameter>

Es wird immer nur der einleitende Tag durch Parameter erweitert. Beim beendenden Tag wird niemals (!) ein Parameter angegeben.

Viele Befehle lassen sich über mehr als einen Parameter spezifizieren. Diese werden dann einfach durch ein Leerzeichen getrennt aufgelistet.

Beispiel:

<BODY bgcolor=white text=red link=yellow>

Die Reihenfolge der Parameter spielt in der Regel keine Rolle.

HTML unterscheidet im Gegensatz zu JavaScript nicht (!) zwischen Groß- und Kleinschreibung. Jede HTML-Anweisung kann sowohl klein als auch groß geschrieben werden. Ebenso die Parameter. Sogar das Mischen von Groß- und Kleinbuchstaben innerhalb eines Worts ist erlaubt und hat keine Auswirkung (und ist sogar bei Parametern, die aus mehreren Worten zusammengesetzt sind, äußerst sinnvoll - etwa so: onMouseOver). Jeder kann nach seiner eigenen Vorliebe glücklich werden, es sei denn, in einem Projekt mit mehreren Beteiligten werden bestimmte Konventionen verbindlich beschlossen. Viele HTML-Programmierer tendieren dazu, das gesamte Befehlswort innerhalb der spitzen Klammern immer groß zu schreiben, andere schreiben es konsequent klein. Dies gilt auch für die Konventionen in HTML-Tools. Einige schreiben Steueranweisungen immer klein, andere immer groß und manche lassen es sogar einstellen (etwa der Editor Phase 5). Sehr gut lesbar ist Quelltext, wenn Befehle vollständig groß und zugehörige Parameter vollständig klein geschrieben werden. Wie auch immer - es dient ausschließlich der Übersichtlichkeit und ist ohne irgendwelche Nebeneffekte.

Dagegen dürfen aus mehreren Einzelworten zusammengesetzte Parameter niemals getrennt werden. Auch, wenn die Einzelworte in dem zusammengesetzten Begriff jeweils mit einem Großbuchstaben beginnen. Etwa bei onClick.

Zwar hat Groß- und Kleinschreibung innerhalb einer Anweisung keine Auswirkungen, aber es gibt natürlich auch in HTML einige gefährliche Fehler. Dazu zählen die falsche Verwendung der spitzen Klammern zum Kennzeichnen eines HTML-Befehls. Beispielsweise werden Klammern genau falsch herum verwendet (etwa so > Anweisung <). Oder es wird die einleitende Klammer vergessen. In diesem Fall erkennt der Browser nicht den Beginn des Befehls und wird die nachfolgende Anweisung als anzuzeigenden Text interpretieren. Schlimmer noch ist, wenn eine schließende Klammer vergessen wird. In diesem Fall wird auch der Text nach der eigentlichen Anweisung vom Interpreter als Parameter zu dem Befehl hinzugezählt. Das Resultat kann unterschiedlich aussehen, aber in jedem Fall wird das eigentlich nach der Anweisung darzustellende Element nicht angezeigt - es ist Bestandteil der Anweisung, die durchgeführt werden soll. Der Fehler kann sich über mehrere Zeilen im Quelltext erstrecken. Grundsätzlich dürfen die spitzen Klammern auch nicht als Teil eines Textes (etwa einer Formel) verwendet werden. Falls man sie in einem Text darstellen muss, müssen sie durch eine Kombination von Zeichen verschlüsselt werden (darauf gehen wir noch ein).

Ein weiteres Problem tritt gerade in Verbindung mit Scripten und Style Sheets auf: Wenn ein Abschluss-Tag notwendig ist und er vergessen wird, wirkt eine Anweisung möglicherweise länger weiter, als sinnvoll. Das kann bei einer Script-Einbindung (worauf wir gleich zu sprechen kommen) so weit gehen, dass die gesamte nachfolgende Webseite als Teil des Scriptcontainers gesehen wird. Wahrscheinliche Folge wird sein, dass weder das Script ausgeführt noch die Webseite überhaupt angezeigt wird. Das gilt analog bei Style-Sheet-Referenzen.

Die Verschachtelung von Containern

Container können verschachtelt werden, das heißt zwischen einem einleitenden und einem abschließenden Tag können beliebige - sinnvolle - andere Steueranweisungen stehen. Dies ist sogar zwingend, da insbesondere die vollständige HTML-Seite einen einleitenden und einen abschließenden Tag benötigt und alle weiteren Steueranweisungen darin verschachtelt werden müssen.

Bei der Verschachtelung von Tags sollte aber die Reihenfolge der Auflösung eingehalten werden! Das bedeutet, wenn ein Container weitere Container enthält, sollte dessen Ende-Tag vor dem Ende-Tag des zuerst geöffneten Containers notiert werden. Container werden also in umgekehrter Reihenfolge der Einleitungs-Tags geschlossen.

HTML-Grundstrukturen

HTML-Interpreter verhalten sich bei der Auswertung von Dokumenten größtmöglich fehlertolerant. Ein Klartext wird ohne irgendeine Struktur von einem Browser ausgewertet werden können. Ohne die geringsten HTML- Steueranweisungen im Inneren. Dann fehlen zwar sämtliche gestalterischen Elemente bei der Darstellung - die reine Information ist jedoch sichtbar. Es gibt nur eine einzige Regel, die aus einem einfachen Klartext gegenüber dem Betriebssystem ein HTML-Dokument macht - die Endung sollte .HTM, .HTML oder .SHTML lauten. Und selbst diese Minimalbedingung setzen Browser nicht voraus - Sie können jede Textdatei, gleich welcher Endung, einfach in den Browser laden. Er wird sie darstellen. Dabei wird jedoch die Fehlertoleranz des Browsers erheblich strapaziert, und bei der Verwendung komplexerer Techniken wird das nicht mehr funktionieren. Wir wollen es dennoch mit zwei kleinen Beispielen durchspielen, die sich bewusst dieser Fehlertoleranz bedienen.

Beispiel 1:

Geben Sie im Editor den nachfolgenden Quelltext ein. Dabei lassen Sie bitte erst einmal Zeilenschaltungen und Leerzeilen aus. Warum, das werden Sie bald sehen:

Was da steht, ist vollkommen egal. Es sollte nur genug Text sein, damit man sehen kann, wie sich die Datei im Browser verhält. Also munter Unsinn hingeschrieben, auf dass sich die Datei mit Zeichen füllt.

Speichern Sie den Text bitte unter dem Dateinamen Text.txt ab. Es handelt sich also um eine reine Klartextdatei, was auch der Arbeitsplatz unter Windows mit einem entsprechenden Symbol bestätigt.

Abbildung 3.1:  Die Datei wird  vom Betriebs- system als reiner  Text eingeordnet

Wenn Sie aber die Datei in einen beliebigen Browser laden, wird der Text dennoch angezeigt.

Dateien können auf vielfältige Weise vom lokalen Rechner in einen Browser geladen werden. Der Doppelklick auf eine HTML-Datei lädt diese automatisch in dem zugeordneten Standardbrowser. Da wir in dem Beispiel jedoch eine Textdatei laden wollen, funktioniert das nicht. Sie können aber mit dem Datei-Menü und dort dem Öffnen-Befehl die Datei laden oder noch einfacher - zumindest unter Windows - die Datei per Drag&Drop einfach mit der Maus auf das Browser-Symbol oder in das geöffnete Browserfenster ziehen. In beiden Fällen wird die Datei im Browser geladen.

Abbildung 3.2:  Der Text wird ohne Zeilenumbrüche angezeigt

Nun benennen Sie die Datei einfach um in Text.html. Das können Sie beispielsweise erreichen, indem Sie im Arbeitsplatz mit der rechten Maustaste auf die Datei klicken und aus dem Kontextmenü den entsprechenden Befehl auswählen. Alternativ markieren Sie die Datei und wählen in dem Datei-Menü den Umbenennen-Befehl aus.

Abbildung 3.3:  Umbenennen  der Datei

Die Datei wird anschließend vom Betriebssystem über ein entsprechendes Symbol als Webseite dargestellt.

Abbildung 3.4:  Die Datei wird als Webseite erkannt

Starten Sie die als Webseite symbolisierte Datei mit einem Doppelklick in einem Browser. Beachten Sie das Resultat. Was fällt Ihnen auf?

Abbildung 3.5:  Der Text wird mit Zeilenumbrüchen und anderer Schrift angezeigt

Im Gegensatz zu dem Fall, wo eine mit .txt gekennzeichnete Textdatei in den Browser geladen wurde, behandelt der Browser diese über die Dateiendung als Webseite gekennzeichnete Datei offensichtlich viel differenzierter. So wird etwa automatisch der Text umbrochen und in einer anderen Schrift mit definierter Hintergrundfarbe, Textfarbe und Textgröße dargestellt. Ohne irgendwelche HTML-Anweisungen im Inneren. Warum dies so ist, werden wir einige Absätze weiter beim Grundgerüst der Webseite abermals genauer veranschaulichen. Die Textformatierung lässt sich jedoch bereits jetzt einfach erklären - es sind Voreinstellungen des Browsers, wie er jede als Webseite erkennbare Datei darstellt. Aber was ist mit dem Zeilenumbruch? Warum hat der Browser Umbrüche verwendet und wo? Verändern Sie bitte einmal die Größe des Browserfensters.

Abbildung 3.6:  Veränderte Zeilenumbrüche bei anderer Fenstergröße

Die Umbrüche werden sich an anderen Stellen befinden.

Nun bearbeiten Sie bitte die Datei Text.html, indem Sie beliebig Zeilenumbrüche zwischen den einzelnen Worten einfügen. Auch durchaus mehrere hintereinander, um Leerzeilen zu erzeugen. Speichern Sie die Datei unter Text2.html und laden Sie diese dann in einen Browser. Sind die Zeilenumbrüche da, wo Sie diese per Zeilenschaltungstaste des Editors im Text eingefügt haben? Vermutlich nicht, denn sowohl Zeilenschaltungen als auch Leerzeilen, die per Editor eingegeben werden, sollten durch Browser ignoriert werden. Dafür müssen Zeilenschaltungen in Form von expliziten HTML-Anweisungen verwendet werden. Auch wenn Sie an verschiedenen Stellen im Text Leerzeilen und Zeilenschaltungen mit der Datenfreigabetaste im Editor eingefügt haben, werden sie nicht dargestellt. Größenveränderungen des Browsers werden sich jedoch auswirken. Der Text wird immer in der Breite automatisch der Größe des Browsers angepasst. Damit sind Browser in der Lage, darzustellenden Text immer an die zugrunde liegende Plattform optimal anzupassen. Weder die Größe des Browserfensters, die Browser-spezifischen Einstellungen, noch die Auflösung des Bildschirms werden die Darstellung des Textes so beeinflussen, dass er über den seitlichen Anzeigebereich hinaus geht.

Das ist aber kein Nachteil oder gar Problem von HTML oder Browsern. Ganz im Gegenteil - das ist eines der Highlights von HTML. Quellcode kann für den Ersteller der Webseite übersichtlich gestaltet werden und er muss sich dabei nicht darum kümmern, wie der Text beim Anwender aussieht. Ob er in jeder Auflösung zu sehen ist, in jeder Fenstergröße, in jeder eingestellten Schrift usw. Darum kümmert sich der Browser beim Anwender - der Ersteller der Webseite ist von der Last befreit. Ohne entsprechende Gegenmaßnahmen über eigene HTML-Befehle wird Text immer automatisch der Größe des Browsers angepasst. Damit haben wir bereits die Grundphilosophie von HTML im Wesentlichen beschrieben: Der Ersteller stellt Informationen bereit, wie diese jedoch konkret beim Anwender aufbereitet werden, überlässt man dem Browser. Dieses geniale Konzept erlaubt es, schnell Informationen zu publizieren und diese mit minimaler Zusatzinformation über das Netz zu verteilen. Wir werden darauf im Rahmen des Buches an verschiedenen Stellen genauer zurückkommen. Grundsätzlich muss man sich aber unter HTML klar werden, dass es zahlreiche Layoutfaktoren gibt, die ein Ersteller einer Webseite nicht unmittelbar kontrollieren kann. So wird Text mit vordefinierter Hintergrundfarbe, Textfarbe und Textgröße innerhalb eines Browsers dargestellt, wenn die Webseite keine eigenen Angaben macht (Voreinstellungen des Browsers). Dies sind aber Darstellungsbedingungen, die der Designer einer Webseite niemals beeinflussen kann, sondern von der Plattform des Betrachters abhängen. Auf diese Faktoren kann also über HTML kein Einfluss genommen werden, sie müssen jedoch unbedingt im Gesamtkonzept berücksichtigt werden.

Das Grundgerüst einer HTML-Seite

Reiner Klartext kann jederzeit in einem Browser dargestellt werden. Auch ohne dass die Datei als Webseite über ihre Endung identifiziert ist. Aber erst mit einer solchen Identifikation wird eine Datei vom Browser entsprechend den Regeln für Webseiten behandelt. Und obwohl wir gerade gesehen haben, dass eine HTML-Seite dann auch ohne HTML-Befehle im Inneren vom Browser sinnvoll darstellbar ist, wird normalerweise immer ein Grundgerüst aus HTML-Anweisungen benötigt. Fehlt dieses, reagieren Browser nämlich wieder mit dem Prinzip der Fehlertoleranz und »denken sich die fehlenden Grundanweisungen hinzu«. Das funktioniert aber nur so lange, wie keine komplexeren Dinge hinzukommen wie etwa Style Sheets oder Scripte. Verlassen Sie sich nicht darauf, dass ein fehlendes Grundgerüst schon keine Probleme macht.

Ein Webseitengrundgerüst definiert den Anfang und das Ende einer HTML- Seite und unterteilt sie in verschiedene Bereiche. Im Wesentlichen gibt es einen später im Anzeigebereich des Browsers sichtbaren Bereich und einen dort nicht angezeigten Bereich. Schauen wir uns einmal ein solches Gerüst an. Eine HTML-Seite beginnt immer mit der Anweisung

<HTML>

und endet mit

</HTML>.

Dies ist der äußerste Container einer HTML-Seite. Den im Anzeigebereich des Browsers unsichtbaren Bereich nennt man »Header« (Kopf) einer Webseite, den sichtbaren Bereich »Body« (Körper).

In dem der einleitenden HTML-Anweisung direkt folgenden Header werden allgemeine Hintergrundinformationen über die Seite zusammengefasst. Im Wesentlichen werden diese von Suchmaschinen verwendet. Damit ist dieser Teil einer Seite besonders wichtig, damit sie überhaupt jemals besucht wird und/oder der Inhalt der Seite vor einem Besuch richtig bewertet werden kann. Aber auch die Einbindung von Scripten und Style Sheets wird oft im Header vorgenommen. Ein Header wird mit der Anweisung

<HEAD>

begonnen und mit

</HEAD>

wieder geschlossen.

Der Body enthält sämtliche Informationen, die der WWW-Browser einem Anwender auf dem Bildschirm anzeigen soll. Er beginnt mit der Anweisung

<BODY>

und endet mit

</BODY>.

Damit sieht das minimale Grundgerüst einer normalen HTML-Datei so aus:

<HTML>
  <HEAD>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Wenn man sich das Grundgerüst jetzt in einen Browser lädt, wird man nicht viel sehen. Das sind aber die Anweisungen, die ein Browser »dazu denkt«, wenn man sie wie in unserem ersten Beispiel weglässt. Allerdings darf nun nicht der Eindruck entstehen, dass das »Hinzudenken« immer ohne Probleme funktioniert. Das erste Beispiel war nur von so einfacher Natur, dass es nicht zu Problemen für einen Browser kommen konnte. Prinzipiell können Sie nicht auf ein solches Grundgerüst verzichten. Zumindest nicht auf die Angabe von <HTML> und <BODY>. Der Header kann nur unterbleiben, wenn die Seite keinerlei Hintergrundinformationen beinhaltet.

Start- und Ende-Tags von Kopfbereich und Body der Webseite müssen sich vollständig innerhalb des umgebenden HTML-Containers befinden. Der Kopfbereich muss unbedingt geschlossen werden, bevor der Körper der Webseite geöffnet wird. Sie dürfen also auf keinen Fall verschachtelt werden.

HTML-Kommentare

Kommentare sind ein äußerst wichtiger Bestandteil einer Webseite. Prinzipiell versteht man unter einem Kommentar einen Bestandteil eines Quelltexts, der von dem ausführenden Programm (Interpreter-Fall) oder dem übersetzenden Programm (Compiler-Fall) ignoriert wird. Er kann in der Regel an jeder Stelle innerhalb eines Quelltexts stehen. Dies bedeutet, Kommentare haben keinerlei Auswirkung auf die konkrete Abarbeitung eines Quelltexts. Für eine HTML-Seite hat das die Folge, dass ein HTML- Kommentar im Darstellungsbereich eines Browsers nicht angezeigt wird und auch sonst für den HTML-Interpreter keine Wirkung hat. HTML- Kommentare dürfen sogar vor dem Beginn des Grundgerüstes stehen. Dennoch sind Kommentare von elementarer Bedeutung für Webseiten. Es gibt unter anderem folgende Rechtfertigungen:

  1. Das vielleicht offensichtlichste wenngleich nicht wichtigste Argument für die Verwendung von Kommentaren ist die Tatsache, dass man damit für eine bessere Lesbarkeit des Quelltexts sorgen kann. Gerade bei späterer Überarbeitung ist eine solche Dokumentation im Quelltext selbst oft sinnvoll - vor allem bei größeren Projekten.
  2. Mit Kommentaren lassen sich im HTML-Quelltext Hintergrundinformationen unterbringen, die bei der Darstellung der Seite nicht direkt sichtbar sein sollen.
  3. Zeitweise lassen sich über Kommentare bestimmte Teile eines Programms oder Dokumentes ausblenden. Wenn Sie diese Teile wieder benötigen, entfernen Sie einfach die Zeichen für den Kommentar wieder. Dies ist im Fehlerfall eine sehr effektive Möglichkeit, um Fehler zu lokalisieren (darauf gehen wir am siebten Tag noch genauer ein).
  4. HTML-Kommentare sind ein wichtiger Schlüssel zur Verwendung von Scriptsprachen und Style Sheets in HTML-Seiten, ohne durch deren Verwendung inkompatiblen Browsern Probleme zu bereiten. Darauf kommen wir morgen genauer zu sprechen.

Im Prinzip kann jeder Tag, der eine nicht für den Interpreter bekannte Anweisung enthält, implizit als Kommentar verstanden werden. Die Anweisung selbst und alle der Anweisung folgenden Zeichen bis zu der beendenden Klammer werden nach dem Prinzip der Fehlertoleranz ignoriert. Diese indirekte Kommentartechnik hat aber diverse Schwachstellen und sollte eigentlich nicht verwendet werden. Zumal es explizite HTML-Anweisungen gibt, die für Kommentare in HTML verwendet werden. Ein HTML-Kommentar beginnt mit einem Ausrufezeichen und zwei Strichen am Anfang (<!--) und endet mit zwei Strichen am Ende des Tags (-->). Alles, was in dem Bereich dazwischen eingeschlossen ist (der Bereich kann sich über beliebig viele Zeile erstrecken), wird als HTML-Kommentar gesehen und vom HTML- Interpreter ignoriert. Beispiel:

<!-- 
Hier kann beliebiger Text stehen.
Er wird vom HTML-Interpreter ignoriert
-->

Es gibt nun in HTML einen besonderen Kommentar - die Anweisung DOCTYPE. Diese Kommentarform wird etwa so aussehen:

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.0 Transitional//EN">

Dabei handelt es sich um einen Verweis auf die jeweilige DTD-Datei des Dokumentes. DTD steht dabei für »Document Type Definition«, was übersetzt Dokumententyp-Definition bedeutet. Darin werden alle Besonderheiten, welche ein Dokument bezüglich der Struktur und des Erscheinungsbildes haben darf, beschrieben. Konkret heißt dies, die HTML- Version wird angegeben (im obigen Beispiel HTML 4.0). Im Prinzip muss jedem SGML-Dokument (so auch einer HTML-Seite) eine solche DOCTYPE- Anweisung vorangestellt werden. Andererseits benötigt sie kein Browser wirklich und sie wird sogar von den meisten Browsern ignoriert bzw. hat keine weiteren Konsequenzen für die Darstellung der HTML-Datei. Die meisten im Netz zu findenden Seiten werden nur dann solche Anweisungen vorangestellt haben, wenn sie von einem Tool automatisch bei der Generierung gesetzt werden.

Details zum Header

Behandeln wir nun einige Details zum Header. Wir werden nicht alle dort verfügbaren HTML-Anweisungen angeben (dazu gibt es spezielle HTML- Literatur), aber die wichtigsten. Obwohl dort keine im Anzeigebereich des Browsers sichtbaren Informationen untergebracht werden, ist der Header dennoch der in der Regel wichtigste Bestandteil der Webseite. Der Header ist eine ideale Stelle für die Referenzierung von Scripten und Style Sheets, aber auch der Garant, dass eine Webseite auf unterschiedlichen Plattformen halbwegs korrekt angezeigt wird, und vor allem, dass eine Webseite überhaupt jemals Besucher bekommt. Die dort notierten Hintergrundinformationen sind nämlich die Hauptquelle für Suchmaschinen auf der Suche nach neuen Webseiten und deren korrekter Klassifizierung. Daneben kann man mit Header-Befehlen auch Serveraktionen auslösen und einige automatische Aktionen durch den Browser auslösen.

Eine der wichtigsten dieser Angaben im Kopfteil ist der Titel der Webseite, welche in den Tags

<TITLE>

und

</TITLE>

eingeschlossen wird.

Der Tag muss in der englische Schreibweise notiert werden. Die Ähnlichkeit zu dem deutschen Wort Titel führt leicht zu Fehlern.

Der Titel einer Webseite hat nun verschiedene Auswirkungen. Er erscheint beispielsweise beim Browser in der Titelzeile. Darüber kann also unter anderem eine im Browser angezeigte Seite identifiziert werden. Ein weiterer Effekt der Titelzeile ist, dass sie der Browser bei Lesezeichen und beim Anzeigen der bereits besuchten Dateien (Historie) verwendet. Der wichtigste Zweck der Titelzeile beruht freilich auf der Tatsache, dass diese Information von Suchmaschinen zum Bewerten und Einsortieren von Webseiten verwendet wird. Der Text in der Titelzeile ist auch das, was nach einer Suchabfrage durch den Anwender bei einem Treffer als Beschriftung des in der Suchmaschinenwebseite zurückgegebenen Hyperlinks angezeigt wird.

Innerhalb des Headers einer Webseite können noch weitere Informationen untergebracht werden. Zum Beispiel Hintergrundinformationen über den Autor, das Erstellungsdatum oder den verwendeten Zeichensatz - so genannte Metainformationen. Diese stehen auswertenden Programmen wie Suchmaschinen zur Verfügung und helfen bei der Dokumentation der Seite. Grundsätzlich werden solche Metainformationen über den <META>- Tag realisiert, der über einige standardisierte Attribute spezifiziert wird und auch noch allgemeinere Bedeutung hat. Die Werte für ein Attribut werden mit einem Gleichheitszeichen zugewiesen. Innerhalb eines Headers können beliebig viele <META>-Elemente verwendet werden. Es gibt nur einen Start- Tag, ein Ende-Tag ist nicht vorgesehen. Als Attribute des <META>- Elementes stehen im Wesentlichen folgende Angaben zur Verfügung:

Attribut

Beschreibung

%i18n

Mit dieser Angabe werden zwei Attribute abgekürzt, die im Zusammenhang mit dem Attribut content zur Angaben lang (Abkürzung für Language - Sprache) und dir für die Textfließrichtung (ltr für left-to-right - links nach rechts - oder rtl für right-to-left - rechts nach links) verwendet werden können.

http-equiv

Über das Attribut können HTTP-Headerinformationen spezifiziert werden, die Aktionen auf dem Server- oder Client-Programm auslösen können.

name

Die Spezifizierung des Namens der Metainformation. Es wird in Verbindung mit dem content-Attribut eingesetzt. Diese beiden Informationen bilden zusammen ein Wertepaar, das auch nur in Verbindung Sinn macht. Es gibt keine verbindliche Liste von erlaubten oder verbotenen Werten für dieses Attribut, sprich es ist frei zu wählen. Es gibt allerdings einige Werte, die allgemein verwendet werden. Wir geben gleich ein paar Beispiele an.

content

Die mit dem Attribut name assoziierte Information, die dieses Attribut genauer spezifiziert. Es gibt keine verbindliche Liste von erlaubten oder verbotenen Werten für dieses Attribut, d.h. auch dieses Attribut ist frei zu wählen.

scheme

Spezifiziert die Art des Inhaltes über ein Schema, das dessen korrekte Darstellung in einer Seite gewährleistet. Dies kann zum Beispiel bei Datumsangaben nützlich sein, denn diese können - je nach landesspezifischer Schreibweise - mehrdeutig sein. Eine Datumsangabe im Format »10-9-00«; kann sowohl den 9. Oktober 2000 bedeuten als auch den 10. September 2000 - je nachdem, ob erst der Tag oder erst der Monat genannt wird. Der scheme-Attributwert »Month-Date-Year« macht die Datumsangabe eindeutig.

Tabelle 3.1: Attribute des <META>-Elements

Schauen wir uns als Erstes einige Beispiele für die Verwendung von dem name-content-Wertepaar an.

Beispiel für die Angabe des Autors einer Webseite:

<META name="Author" content="Ralph Steyer">

Das name-content-Wertepaar wird auch oft für Eigenwerbung des Tools verwendet, mit dem eine Webseite erstellt wurde. So schreibt der Netscape Composer 4.7 Folgendes in den Header:

<meta name="GENERATOR" content=
"Mozilla/4.7 [de]C-CCK-MCD QXW03234 (WinNT; U) [Netscape]">1

Microsofts Frontpage setzt neben der Zeile des Generators

<meta name="GENERATOR" 
content="Microsoft FrontPage 4.0">

auch noch eine Programm-Id2:

<meta name="ProgId" 
content="FrontPage.Editor.Document">

Eine der wichtigsten Anwendungen für so ein name-content-Wertepaar ist die Bereitstellung einer Beschreibung für eine Webseite. Das ist das, was ein Anwender unter der per <TITLE>-Tag definierten Hyperlinkbeschriftung als Beschreibung einer Seite sieht, wenn er diese Seite als Ergebnis einer Suchabfrage in einer Suchmaschine angezeigt bekommt. Dazu wird als Wert von name der englische Begriff für Beschreibung (description) gesetzt und für content die konkrete Beschreibung der Seite, welche die Suchmaschine anzeigen soll.

Beispiel:

<META name="description" content=
"Die spannendste Seite zwischen in ganz Kleinhinterdorf.">

Eine weitere für Suchmaschinen extrem wichtige Metainformation ist das name-content-Wertepaar, wo als Wert von name der englische Begriff für Schlüsselworte (keywords) gesetzt wird. Diese dann per content angegebenen Schlüsselworte sind von Ihnen gewählte Worte, nach deren Eingabe als Suchbegriff in der Suchmaschine Ihre Webseite als Treffer gefunden werden soll. Mehrere Schlüsselworte werden durch Kommata getrennt.

Beispiele:

<META name="keywords" content=
"Umsonst, Billig, Kostenlos, Preiswert, Gratis">

Eine weitere Metainformation, die mit dem name-content-Wertepaar angegeben wird, ist das Copyright.

Beispiel:

<META name="copyright" content="2000 RJS">

Ebenso standardisiert ist das Erstellungsdatum einer Webseite über den Wert date für das Attribut name.

Beispiel:

<META name="date" content="2000-08-06T09:49:37+00:00">

Auch die Dokumentation der hinter einer Webseite stehenden Organisation kann angegeben werden:

<META name ="organization" content ="RJS EDV-KnowHow">

Neben den unter dokumentarischem Aspekt im Wesentlichen für Suchmaschinen angelegten Metainformationen kann man mit den HTTP- Headerinformationen in Zusammenhang mit dem http-equiv-Attribut die unterschiedlichsten Aktionen auf Server oder Client auslösen. Immer wenn Dokumente über das Hypertext Transfer Protocol (HTTP) zwischen Server und Client ausgetauscht werden, können damit verschiedene Aktionen beeinflusst werden. Wir wollen exemplarisch drei davon besprechen.

Die wichtigste Aktion dürfte die automatische Weiterleitung eines Besuchers auf eine andere Webseite sein. Dazu dient das refresh-Attribut, dessen Wert als ersten Eintrag die Wartezeit (in Sekunden) und anschließend - per Semikolon abgetrennt - das Ziel der Umleitung in Form eines URL enthält. Das werden wir in einem praktischen Beispiel testen, wobei wir gleichzeitig die gerade besprochenen dokumentarischen Metainformationen einsetzen wollen und einen Kommentar in der Praxis zeigen.

Beispiel 2:

Geben Sie im Editor den nachfolgenden Quelltext ein. Dazu sollte die Datei unter dem Namen start.html im gleichen Verzeichnis gespeichert werden, wo sich auch die im ersten Beispiel erstellte Datei Text.html befindet.

Bei unseren Beispielen können Sie sich viel Arbeit sparen, wenn Sie eine Grundgerüstdatei erstellen und jedes Mal als Schablone verwenden, indem Sie diese in den Editor laden oder via Zwischenablage in ein leeres Dokument einfügen und diese Schablone dann füllen.

Die Zwischenablage bedienen Sie übrigens so:

1. Text markieren

2. Markierten Text in die Zwischenablage legen (zum Beispiel mit der Tastenkombination (STRG)+(C))

3. Ziel aufsuchen

4. Einfügen (beispielsweise mit der Tastenkombination (STRG)+(V))

<HTML>
<HEAD>
<TITLE>
Meine Willkommenseite, von der direkt weitergeleitet wird
</TITLE>
<META name="Author" content="Ralph Steyer">
<META name="description" content="Die Seite leitet automatisch auf Text.html weiter.">
<META name="keywords" content="Steyer, RJS">
<META name="copyright" content="2000 RJS">
<META name="date" content="2000-08-06T09:49:37+00:00">
<META name ="organization" content ="RJS EDV-KnowHow">
<!--
Die nachfolgende Anweisung ist die Weiterleitung. Sie erfolgt nach 3 Sekunden
-->
<META http-equiv="refresh" content="3;URL=Text.html">
</HEAD>
<BODY>
Herzlich Willkommen! Sie werden in drei Sekunden weitergeleitet.
</BODY>
</HTML>

Anschließend laden Sie bitte die Datei in einen Browser.

Abbildung 3.7:  Die Startdatei heißt Sie willkommen

Nach drei Sekunden wird automatisch die referenzierte Folgeseite geladen. Über diese Anweisung können Sie eine beliebige Ressource automatisch bei Aufruf einer Seite nachladen lassen. Sie müssen nur deren URL (lokal oder aus dem Internet) angeben. Wenn Sie als Zeitspanne eine 0 angeben, wird die Ressource unmittelbar nachgeladen. Damit lassen sich auch ohne den Einsatz von Scripten (so ein Vorgang ist beispielsweise eine der leichtesten Aufgaben für ein JavaScript) Weiterleitungen realisieren.

Einige Browser unterstützen die Weiterleitung von Seiten auf diese Art und Weise nicht. Deshalb sollte auf jeden Fall auf der weiterleitenden Seite auch die Verzweigung per Hyperlink vorgesehen sein.

Eine weitere interessante Anwendung einer HTTP-Headerinformation ist das Setzen eines Ablaufdatums für ein HTML-Dokument. Damit kann gewährleistet werden, dass ein Browser bei Überschreitung des Datums nicht weiter die alte Version des Dokumentes lädt (etwa aus dem Cache oder von einem Proxy). Dazu dient der Wert expires für das Attribut http-equiv. Das Datum in der content-Wertzuweisung wird in einem gültigen HTTP-DATE- Headerformat (etwa nach der ISO8601-Datumsformatnorm) eingegeben. Das nachfolgende Beispiel verwendet ein solches Datumsformat:

<META http-equiv="expires" content="Tue, 17 Aug 2000 12:00:00 GMT">

Über das Attribut http-equiv kann auch die Zeichenkodierung eines HTML-Dokumentes festgelegt werden. Das nachfolgende Beispiel spezifiziert die Zeichenkodierung eines HTML-Dokumentes nach der Norm ISO-8859-5, wie sie in Westeuropa üblich ist:

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5">

Alternativ findet man auch oft die nachfolgende Spezifizierung:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Die Hoffnung ist bei Verwendung dieser Metainformationen, dass die interpretierenden Browser bei der Darstellung von Text den richtigen Zeichensatz verwenden und auch Sonderzeichen wie ö oder ä sinnvoll darstellen. Das funktioniert aber nur beschränkt, weshalb man solche Sonderzeichen zur Sicherheit noch verschlüsseln sollte (darauf gehen wir am fünften Tag ein).

Wie am Beginn des Abschnittes angedeutet, ist der Header eine ideale Stelle für die Einbindung von Style Sheets und Scripten. Da dies jedoch nicht zwingend im Header erfolgen muss und zudem für unser Buch ein entscheidendes Thema ist, sollen diese Thematiken gesondert behandelt werden.

Die meisten Tools unterstützen den sinnvollen Aufbau des Headers einer Webseite nur mangelhaft oder missbrauchen ihn höchstens für Eigenwerbung. Bessere Tools erlauben dessen gründlichen Aufbau, aber fast allen Hilfsprogrammen ist gemein, dass die Bedeutung des Headers nicht richtig klar gemacht wird. Gerade Anwender ohne Hintergrundwissen glauben oft, mit der Gestaltung des sichtbaren Bereichs einer Webseite sei diese fertig. Hinterher sind sie verwundert, wenn nur zwei Besucher pro Monat auf der Webseite vorbeikommen und einer davon ist man selbst, wenn man den Webcounter kontrolliert.

Der BODY einer Webseite

Der Body-Bereich einer Webseite umfasst sämtliche (!) im Anzeigebereich des Browsers sichtbaren Informationen einer Webseite. Innerhalb des von dem Start- und Ende-Tag gebildeten Containers sind sämtliche Daten einzufügen, die dort angezeigt werden sollen: Vom reinen Text über Grafiken bis hin zu komplexeren Objekten wie Java-Applets. Alles Sichtbare wird dort angegeben - auf Details kommen wir noch.

Der <BODY>-Tag besitzt eine ganze Reihe von Parametern, die ihn bei Bedarf erweitern und das globale Aussehen eines Dokumentes bestimmen. Es gibt da zum einen diverse Farbangaben, welche die globalen Farben von verschiedenen Elementen regeln:

Sämtliche Parameter können beliebig angeordnet und auch beliebig verwendet oder weggelassen werden. Ein vollständiger <BODY>-Tag mit allen Farbangaben hätte dann folgende Struktur:

<BODY bgcolor=[farbe] text=[farbe] link=[farbe] vlink=[farbe] alink=[farbe]>

Dabei kann die Angabe der Farbe in Hochkommata eingeschlossen oder auch ohne Hochkommata notiert werden. Wie auch alle innerhalb der Webseite individuell zu setzenden Farbangaben kann man unter HTML Farben auf zwei Arten angeben:

Das Hexadezimalsystem bedeutet eine Darstellung von 16 Werten in nur einem Zeichen. Dabei sind die Zahlen von 0 bis 9 identisch zum dezimalen Zahlensystem. Die dezimale Zahl 10 wird hexadezimal durch den Buchstaben A, 11 durch B, 12 durch C, 13 durch D, 14 durch E und 15 durch F dargestellt. Die hexadezimale Zahl 10 entspricht also dezimal dem Wert 16. Im Anhang finden Sie eine kleine Umrechnungstabelle zwischen hexadezimalen und dezimalen Zahlen.

Bei der Angabe der RGB-Werte in Hexadezimalform müssen die Farben aus den drei Grundfarben Rot, Grün und Blau über ihre jeweiligen Anteile (in der additiven Farbmischung) zusammengestellt werden. Dabei ist jede hexadezimale Farbdefinition sechsstellig und hat das Schema

  #XXXXXX

Hinter dem Gatter # folgen zuerst zwei Stellen für den Rotanteil, dann zwei Stellen für den Grünanteil und die letzten beiden Stellen für den Blauanteil. Die Angabe der RGB-Werte in Hexadezimalform ist Browser-unabhängig und es stehen im Prinzip ca. 16,7 Millionen Farbnuancen zur Verfügung (das ergibt sich daraus, das bei 6 Stellen und jeweils 16 verschiedenen Werten dort 16 hoch 6 Kombinationsmöglichkeiten vorhanden sind = 16.777.216). Die nachfolgende Tabelle gibt die hexadezimale Farbkodierung für 16 Standardfarben an, welche auch bei einer Bildschirmfarbeinstellung von nur 16 Farben korrekt angezeigt werden sollten:

Farbe

Rotwert

Grünwert

Blauwert

Blau

00

00

FF

Dunkeltürkis

00

80

80

Gelb

FF

FF

00

Grau

80

80

80

Grün

00

80

00

Hellblau

00

FF

FF

Hellgrün

00

FF

00

Lila

80

00

80

Marineblau

00

00

80

Olivgrün

80

80

00

Pink

FF

00

FF

Rostbraun

80

00

00

Rot

FF

00

00

Schwarz

00

00

00

Silber

C0

C0

C0

Weiß

FF

FF

FF

Tabelle 3.2: Farbcodes.

Nachteile der hexadezimalen Farbangabe sind, dass man sich mit dem hexadezimalen Zahlensystem auskennen und einzelne Farben über die jeweiligen Rot-, Grün- und Blauanteile zusammenstellen muss. Dazu kommt, dass 16,7 Millionen Farbnuancen im Web oft keinen Sinn machen, denn beileibe nicht alle Rechner sind mit einer entsprechender Grafikkarte ausgestattet, und vor allen Dingen haben viele Anwender eine niedrigere Farbtiefe eingestellt (was die Rechnerleistung verbessert). Deshalb gibt es die Möglichkeit der direkten Eingabe von standardisierten Farbnamen, die weitgehend den normalen englischen Farbbezeichnungen entsprechen. Die in der hexadezimalen Schreibweise gerade notierten 16 Standardfarben können auch so angegeben werden:

Farbe

Farbangabe

Blau

blue

Dunkeltürkis

teal

Gelb

yellow

Grau

gray

Grün

green

Hellblau

aqua

Hellgrün

lime

Lila

purple

Lilaton

fuchsia

Marineblau

navy

Olivgrün

olive

Rostbraun

maroon

Rot

red

Schwarz

black

Silber

silver

Weiß

white

Tabelle 3.3: Farbnamen

Natürlich gibt es nicht für 16,7 Millionen Farbnuancen einen Namen, aber mehr als diese 16 Farbnamen. Viele davon sind jedoch nicht standardisiert und in der Darstellung Browser-abhängig. Wenn der Browser einen Farbnamen überhaupt nicht kennt, wird er die Farbe nicht darstellen und eine Defaultfarbe verwenden. Das gilt auch bei hexadezimalen Angaben, wo die in der Wertigkeit naheliegendste Farbe gewählt wird, wenn die exakte Abstufung nicht dargestellt werden kann.

Schauen wir uns nun für den <BODY>-Tag einige vollständige Farbspezifizierungen an, wobei in den verschiedenen Beispielen hexadezimale Angaben mit direkten Farbangaben gemischt, mal Hochkommata verwendet werden und mal nicht und die Reihenfolge der Parameter vertauscht wird.

Eine Variante sieht so aus:

<BODY bgcolor=white text=black link=red alink=yellow vlink=white>

Eine alternative Darstellung:

<BODY text="#000000" bgcolor ="#FFFFFF" link="#FF0000" alink=yellow vlink=blue>

Eine Webseite kann zu den globalen Farbangaben ein gekacheltes Hintergrundbild verwenden, das den gesamten Anzeigebereich des Browsers ausfüllt. Diese Angabe erfolgt über eine weitere Erweiterung des <BODY>-Tags, mit dem Parameter background. Mit dieser Erweiterung laden Sie jedes Mal, wenn Ihre Webseite in einen Browser geladen wird, das Hintergrundbild von dem angegebenen Ort. Hintergrundbilder überdecken die Hintergrundfarbe, aber bei transparenten Bildern kann die Hintergrundfarbe durchscheinen. Falls die Anzeige von Grafiken im Browser deaktiviert ist, kommt sowieso die Hintergrundfarbe zum Tragen.

Bevor wir ein Hintergrundbild konkret einbinden können, müssen ein paar Hintergründe zu den im WWW erlaubten Bildformaten sowie der Weg der Referenzierung darauf behandelt werden. Diese Ausführungen gelten wie die Ausführungen zu den Farben dann analog bei Grafikreferenzen an einer lokalen Stelle in der Webseite.

Im WWW gibt es zwei Bildformate, die in jedem Browser verstanden werden:

Es haben sich in der letzten Zeit zwar verschiedene weitere Formate etabliert, aber es gilt immer noch, dass die Mehrzahl der Browser sie nicht oder nur mit einem Zusatzmodul anzeigen kann. Man sollte darauf verzichten, wenn man nicht ohne Notwendigkeit die Zielgruppe seiner Webseite radikal verkleinern will.

Beide Grafikformate haben ein paar Gemeinsamkeiten. Es handelt sich bei beiden um Pixelformate (Beschreibung von jedem Bildpunkt mit allen Angaben), keine Vektorformate (Berechnung von grafischen Formen), und beide sind hochkomprimierte Bildformate.

Die konkrete Einbindung von Hintergrundbildern erfolgt, indem dem Attribut background im <BODY>-Tag der URL einer Bilddatei zugewiesen wird. Dieser hätte dann folgende Struktur:

<BODY background="[URL der Grafik]">

Der URL ist dabei allgemein zu verstehen. Das bedeutet, die Grafikdatei kann sich auf dem gleichen Rechner befinden, aber auch auf einem beliebigen anderen - möglichst per Netz erreichbaren - Rechner. Schauen wir uns einige Beispiele an.

Beispiel für die Referenz von einer Bilddatei mit Namen raindrop.gif, die sich auf dem WWW-Server www.rjs.de befindet:

<BODY background="http:// www.rjs.de/raindrop.gif">

Beispiel für die Referenz von einer Bilddatei mit Namen raindrop.gif, die sich im gleichen Verzeichnis wie die Webseite selbst befindet:

<BODY background="raindrop.gif">

Beispiel für die Referenz von einer Bilddatei mit Namen raindrop.gif, die sich in einem Unterverzeichnis (bilder) des Verzeichnisses befindet, wo die Webseite selbst gespeichert ist:

<BODY background="bilder/raindrop.gif">

Wenn Sie für die Gestaltung von Webseiten geeignete Grafiken benötigen, können Sie diese mit jedem qualifizierten Grafikprogramm erstellen und einfach in einem der beiden passenden Formate speichern. Aber das ist vielfach nicht notwendig. Auf fast jedem Rechner werden sich bereits hunderte, wenn nicht tausende von GIF- und JPEG-Dateien befinden (über die Installation von verschiedenen Programmen oder Internetkontakte auf den Rechner gelangt usw.). Sie müssen sich nur passende suchen und für Ihre Zwecke verwenden. Dies funktioniert beispielsweise unter Windows wie folgt:

1. Wählen Sie im START-Menü den Eintrag SUCHEN - DATEIEN/ORDNER...

2. Wählen Sie im Folgedialog den Namen *.GIF *.JPG *.JPEG.

3. Wählen Sie Ihre Festplatte oder gleich den ganzen Arbeitsplatz aus (achten Sie bitte darauf, dass UNTERGEORDNETE ORDNER EINBEZIEHEN aktiviert ist).

4. Klicken Sie auf STARTEN.

Sie müssen anschließend nur noch eine passende Grafikdatei auswählen.

Bei der Verwendung von fremden Grafiken sollten Sie aber beachten, dass nicht alle Grafiken ohne Verletzung der Urheberrechte zu verwenden sind. Falls Sie sich nicht sicher sind, verzichten Sie auf deren öffentlichen Einsatz im Web. Es gibt genügend freie Grafiken, die Sie ohne Probleme einsetzen können. Zahlreiche CD-Beilagen in Computerzeitschriften, Beispielgrafiken in Grafikprogrammen oder Sammlungen im Internet (einfach mit Suchmaschinen suchen) bieten mehr als genug Auswahl.

Abbildung 3.8:  Bereits über 2000 Treffer auf einer Festplatte bei der Suche.

Abbildung 3.9:  Beim Speichern im Grafikprogramm eines der beiden passenden Formate auswählen

Wir wollen nun die Verwendung von den globalen Farbangaben und einer Hintergrundgrafik in einem vollständigen Beispiel durchspielen. Dabei greifen wir bezüglich ein paar HTML-Anweisungen vor, die aber bald erklärt werden.

Beispiel 3:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY background="smile.gif" bgcolor=cyan text=blue link=green alink=yellow vlink=white>
<H1 align=center>Herzlich Willkommen!</H1>
<B>
<A href="http://rjs.de/index.html">
Das ist ein Hyperlink</A>
</B>
</BODY>
</HTML>

Abbildung 3.10:  Zwar kein guter Kontrast, aber es sind deutlich die Effekte zu sehen.

Zusammenfassung

Wir haben heute wichtige Grundlagen für die Erstellung von Webseiten und vor allem die Hintergründe und Grundstrukturen von HTML behandelt. Insbesondere sollte klar sein, dass HTML aus Klartext besteht, der eine Reihe von Steueranweisungen (Tags) kennt. Ein Tag sieht von der Struktur her immer so aus:

<Anweisung>

Ein Browser interpretiert eine solche Anweisung, wenn er sie kennt. Ansonsten wird sämtlicher Text innerhalb der Klammern ignoriert. Es gibt zwei Formen von Tags:

Der einleitenden Tag eröffnet eine Anweisung, während der beendende Tag sie wieder ausschaltet. Beide Tags sehen fast identisch aus, außer einem Zeichen, mit dem der beendende Tag zusätzlich beginnt - dem Slash (Schrägstrich) /. Die beiden Tags bilden einen Container. Container können verschachtelt werden. Einleitende Tags können auch ohne beendenden Tag vorkommen. Viele Tags sind erst dann sinnvoll einzusetzen, wenn sie über erweiternde Parameter genauer spezifiziert werden. Dabei gibt es zwei Formen von Parametern:

Eine Textdatei wird erst durch ein Grundgerüst und eine für das Betriebssystem als Webseite erkennbare Dateiendung (in der Regel die Endung .HTM, .HTML oder .SHTML) vom Browser so behandelt, wie es für eine Webseite sinnvoll ist. Das korrekte Grundgerüst einer Webseite beinhaltet zwei streng getrennte Bereiche:

Fragen und Antworten

Frage:
Kann ein Browser auch andere Dateien als Klartexte anzeigen?

Antwort:
Ja. So können beispielsweise GIF- und JPEG-Dateien direkt in einem Browser geöffnet werden.

Frage:
Muss man alle HTML-Befehle kennen, wenn man mit JavaScript programmieren möchte?

Antwort:
Nein. Wichtiger ist es, die Philosophie von HTML und dem Web zu verstehen. Diejenigen Befehle, die für einen JavaScript- Programmierer unabdingbar sind, wurden bereits heute oder werden im Laufe des Buchs noch behandelt. Prinzipiell gilt auch in HTML wie in fast allen Sprachen (auch menschlichen Sprachen), dass man mit 10% des Wortschatzes 90% der Standardsituationen meistern kann.

Frage:
In Zusammenhang mit HTML-Anweisungen liest man in den offiziellen Dokumentationen häufig den Begriff »deprecated«. Was bedeutet das?

Antwort:
Eine neue Version einer Sprache bringt nicht nur neue Elemente mit sich, sondern kennzeichnet auch einige Sprachbestandteile der Vorgängerversion als überholt (deprecated). Für diese Elemente gibt es im Rahmen des neuen Sprachstandards eine andere Lösung, die statt dessen verwendet werden soll. Jedoch ist die Verwendung von als deprecated deklarierten Sprachelementen keinesfalls verboten. Die veralteten Sprachelemente werden auch von neuen Browsern weiter verstanden, denn diese sind abwärtskompatibel. Es ist sogar noch seltsamer, aber die Verwendung eines als deprecated erklärten Elementes wird so gut wie nie ein Fehler sein. Die Verwendung des ablösenden neuen Sprachelements in den ersten Monaten nach Verabschiedung einer Sprache jedoch schon, denn bei der überwiegenden Anzahl der Anwender ist dessen Unterstützung noch nicht garantiert. Es kann Monate dauern, bis endlich genügend Anwender neue Browser verwenden, die damit klarkommen. Bei einigen HTML-Elementen wird auch die Empfehlung des W3C bei den Anwendern überhaupt nicht akzeptiert und konsequent auf die als deprecated gekennzeichneten Elemente gesetzt. Der <APPLET>-Tag zum Einbinden von Java- Applets ist so ein Befehl, der eigentlich nicht mehr verwendet werden soll, dessen Ablösungs-Tag aber so gut wie kein Anwender nutzt.

Workshop

Laden Sie die Datei Text.html in den Netscape Navigator. Gehen Sie dann in das Menü Bearbeiten und wählen dort den Menüpunkt Einstellungen... aus.

Sie gelangen darüber zu diversen Konfigurationsmöglichkeiten des Browsers. Wählen Sie für diesen Workshop die Einstellung Schriftart aus und verändern Sie die Schriftgröße und die verwendeten Schriftarten. Sie geben damit Default-Schriftarten an, wie Texte in einer Webseite dargestellt werden.

Abbildung 3.11:  Die Konfigurationsmöglichkeiten des Netscape Navigator

Bestätigen Sie die Auswahl und betrachten Sie die Veränderungen in der Darstellung der Datei. Experimentieren Sie mit mehreren verschiedenen Einstellungen.

Abbildung 3.12:  Veränderter Schrifttyp und Schriftgröße

Danach aktivieren Sie bitte einmal das Ansicht-Menü und wählen Schrift verkleinern und Schrift vergrößern mehrfach hintereinander aus. Damit wird eine Art Zoom-Effekt erzeugt, der sich aber nur auf Texte in einer Webseite auswirkt. Grafiken und ähnliche Elemente bleiben davon unberührt. Das können Sie leicht mit einer Webseite aus dem Internet nachvollziehen.

Sie finden in den Konfigurationsmöglichkeiten unter den Schriftarten auch Konfigurationsmöglichkeiten für Farben. Experimentieren Sie auch hier mit mehreren verschiedenen Einstellungen.

Wenn Sie wollen, können Sie auch einmal die Auflösung ihrer Bildschirmdarstellung verändern.

Der gesamte Workshop soll Ihnen ein Gefühl dafür vermitteln, dass es bei der Darstellung von Inhalten einer Webseite extrem auf die beim Anwender vorzufindende Plattform und die Einstellungen des Browsers ankommt.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Ist HTML eine Programmiersprache?
  2. Kann man auf das Grundgerüst einer Webseite verzichten?
  3. Werden beim Ende-Tag Parameter angegeben?
  4. Muss man sich bei HTML an Groß- und Kleinschreibungsregeln halten?
  5. Kann man mit HTML absolute Gestaltungsangaben machen?


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


12

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH