von Thomas Salvador.
In diesem Teil geht es um den Aufbau der HTML-Dateien, ohne den es nun einmal nicht geht. Wir beschäftigen uns mit der Struktur von HTML-Dateien.
HTML-Dateien sind im Grunde alle gleich. Sie bestehen aus einem Kopf, der Verwaltungsinformationen und ähnliches, also Informationen über den Inhalt transportiert, und aus einem Rumpf, der den Inhalt selbst darstellt. Das gesamte Dokument wird durch den html-Tag gekapselt. Kopf bzw. Rumpf sind durch head bzw. body gekapselt.
Die allgemeine Syntax lautet damit
<html> <head> Kopfinformation </head> <body> Bodyinformation </body> </html>
Einrückungen wie hier sind nicht zwingend, veranschaulichen jedoch die Blockeigenschaft der Tags und steigern in der Entwicklungsphase von Dokumenten die Übersichtlich- und Lesbarkeit.
Der Kopf einer HTML-Datei wird durch den head-Tag gekapselt und beinhaltet Informationen zum Dokument, nicht jedoch den Dokumentinhalt selbst. Ein Beispiel für eine solche Information ist der Titel des Dokumentes, der durch den title-Tag gekapselt und bei der Darstellung des Dokumentes durch Browser oftmals in Kopfzeile angezeigt wird.
Weitere und besonders wichtige Informationen sind die sogenannten meta-Informationen, die von vielen Suchmaschinen ausgewertet werden und helfen können, dass Ihr Dokument gefunden wird. Manche enthalten Anweisungen an eine Suchmaschine, an den Browser und sonstige verarbeitende Programme.
Als Syntax für den Dateikopf erhalten wir somit
<head> <title>Titel des Dokuments</title> <meta Metatyp="Metaname1" content="Metawert1" /> <meta Metatyp="Metaname2" content="Metawert2" /> ... <meta Metatyp="MetanameN" content="MetawertN" /> </head>
Durch den title-Tag wird der Titel des Dokuments festgelegt. Seine Syntax lautet
<title>Titel des Dokuments</title>
Er ist Bestandteil des Dateikopfes.
Der Titel sollte aussagekräftig und im Rahmen der von Ihnen angebotenen Dokumente eindeutig, aber nicht zu lang sein. Als maximale Länge empfiehlt der Autor etwa 40-60 Zeichen.
Ein aussagekräftiger Titel ermöglicht dem Benutzer eine direkte Anwahl bei mehreren gepufferten Dokumenten. Bei Titeln dieser Länge kann man auch mit etwaigen Bookmarks direkt etwas anfangen.
Viele Suchmaschinen führen Dokumente unter ihren Titeln, wenn Meta-Informationen fehlen.
Ein aussagekräftiger Titel erlaubt es somit dem Benutzer, hier schon eine gewisse Entscheidung zu treffen, ob Ihr Dokument das enthält, was er sucht, ohne erst ihr Dokument anwählen zu müssen, was wiederum zur Kostensenkung führt.
Beispiel: "Ein kurzes, aber vollständiges HTML-Dokument"
<html> <head> <title>Hallo WWW!</title> </head> <body> Mein erstes HTML-Dokument. </body> </html>
Die meisten Browser werden "Hallo WWW!" z.B. in der Kopfzeile solange anzeigen, wie dieses Dokument aktiv ist.
Durch meta-Tags können weitere Informationen zum Dokument angegeben werden. Seine Syntax lautet
<meta Metatyp="Metaname" content="Metawert" />
Er ist Bestandteil des Dateikopfes.
Metatyp kennzeichnet den Typ des Eintrags. Setzten Sie anstelle Metatyp den Wert
http-equiv, wenn der Eintrag im Rahmen des HTTP-Protokolls übertragen werden soll, undname, wenn es private Angaben sind.Metaname ist die Kennung des Eintrages, er ist bei meta name im Prinzip frei wählbar.
Der Name sollte kurz sein und dem Inhalt angemessen sein. Achten Sie bitte darauf, dass der Name in Anführungsstriche eingeschlossen ist.
Metawert ist der Inhalt des Eintrags. Achten Sie auch hier unbedingt darauf, dass der gesamte Inhalt in Anführungsstriche eingeschlossen ist.
Beispiel: "Ein HTML-Dokument mit Meta-Informationen"
<html> <head> <title>Hallo WWW: Die Zweite!</title> <meta name="author" content="Thomas Salvador" /> <meta name="description" content="Ein Beispieldokument" /> <meta name="keywords" content="Salvador,Beispiel,Test" /> </head> <body> Mein zweites HTML-Dokument. </body> </html>
Die einzelnen Schlüsselworte werden üblicherweise durch ein Leerzeichen oder durch ein Komma voneinander getrennt. Hierzu kann man noch Etliches mehr sagen.
Dies möchte ich jedoch auf etwas später verschieben, damit wir erstmal baldmöglichst etwas Konkretes in die Hände bekommen.
Das gesamte eigentliche Dokument wird durch den body-Tag gekapselt. Es stehen eine Vielzahl von Gestaltungselementen zur Verfügung. Die wichtigsten werden wir in den nachfolgenden Kapiteln betrachten.
<body> ... eigentliches Dokument ... </body>
Viele Browser werten die Attribute background, bgcolor, text, link, vlink und alink, oder einen Teil von ihnen aus.
Mit background kann ein Hintergrundbild gesetzt werden. Dabei wird die URL, d.h. die Adresse des Bildes, als Wert zugewiesen. Wie das genau geht, werden wir erst später im Kapitel Verweise und Protokolle und im Kapitel Grafiken sehen. Hier soll uns ein Beispiel genügen:
Beispiel: "Hintergrundbild"
<body background="einbild.gif">
was funktioniert, wenn Sie das Bild in das gleiche Verzeichnis kopieren.
Mit den anderen Attributen kann die farbliche Gestaltung vorgenommen werden. Möglich sind:
Beispiel: "dateiweites Setzen von Farben"
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#ff0000" alink="#000000">
oder analog
<body bgcolor="white" text="black" link="blue" vlink="red" alink="black">
Hintergrundbild und Farbe lassen sich freilich kombinieren, was auch notwendig ist, da z.B. Text per Voreinstellung meist schwarz dargestellt wird. Bei einem Hintergrundbild mit schwarzen Flächen ist das dann ungünstig.
Denken Sie also bitte daran, in diesem Falle auch die Farben anzupassen, damit eine garantiert lesbare Kombination erreicht wird. Die Farben für Verweise sollten (ggf. bis auf alink) von der Textfarbe abweichen, damit sie auch in Browsern sichtbar sind, die Links nicht zusätzlich (etwa unterstrichen) hervorheben.
Erinnern wir uns hier noch einmal an den Artikel "Hintergrundbilder und -farben". "Gelber Text auf weißem Grund ist eindeutig!". Lassen Sie Ihre Besucher Bilder laden oder nicht, so wie sie es wünschen!
Der Besucher ist König!
Im Anhang Farben besprechen wir die Art, in der Farben genau angegeben werden.
Kommentare dienen dazu, wie in den meisten anderen Sprachen, wie etwa Programmiersprachen, auch, eine Dokumentation des Quelltextes, des HTML-Codes zu erlauben.
Hieran erkennt man schön, dass HTML eine Sprache ist. Kommentare sind für die Darstellung der Dateien generell uninteressant, d.h. sie werden im Browser nicht angezeigt.
Denken Sie aber bitte daran, dass die Kommentare freilich im Source stehen und mit übertragen werden, d.h. der Benutzer kann die Kommentare sehen, wenn er den Source betrachtet.
Kommentare sind also keine geeignete Stelle sensitive Angaben zu platzieren.
Sie eignen sich jedoch hervorragend dazu, etwa die Anschrift des Autors, die Copyright-Bestimmung o.ä. im Dokument zu halten, ohne angezeigt zu werden.
Man sollte hier auch an den Benutzer denken, der die Übertragung bezahlen muss. Deshalb empfiehlt der Autor, alle nicht wichtigen Kommentare vor der Veröffentlichung zu entfernen.
Es ist natürlich klar, dass der Autor eines Dokumentes nur beschränkte Kontrolle über HTML-Dateien hat, die von einem Editor erzeugt werden.
Manche Editoren fügen umfangreiche Kommentare ein, die selbst in der Publish-Version, d.h. der Version, die zur Veröffentlichung gedacht ist, enthalten sind.
Eine nachträgliche Überarbeitung von Hand macht die Verwendung eines HTML-Editors praktisch unsinnig, da die Überarbeitung bei jeder Änderung neu vorzunehmen ist.
Es gibt aber Tools, die Kommentare entfernen können.
Die allgemeine Syntax ist
<!-- beliebiger Text -->
Durch <!-- wird der Kommentar begonnen. Der darauf folgende und sich ggf. über mehrere Zeilen erstreckende Text ist beliebig und wird ignoriert, bis zum Kommentarendezeichen -->.
Beispiel:
<html> <!-- Kopf --> <head> <title>Hallo WWW: Die Dritte!</title> </head> <!-- Body --> <body> Mein drittes HTML-Dokument. </body> </html>
Kommentare können an jeder beliebigen Stelle, außer in Tags auftreten. Es ist auch erlaubt, Kommentare vor dem html- und nach dem /html-Tag zu setzen.
Hierdurch wird es z.B. möglich, eine gesamte HTML-Datei digital zu signieren (ein entsprechendes Tool ist z.B. signHTML). Dies kann z.B. dann nützlich sein, wenn es etwa unbemerkte Änderung zu verhindern oder die Originalität zu bestätigen gilt.