brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Grundstruktur von HTML-Dateien

HTML für Einsteiger - Kapitel 2-2

Teil 1

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

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. Im ersten Teil dieses Kapitels hatten wir Kopf mit Titel und Meta besprochen, hier folgt nun der Rest.

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.

Rumpf

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. Dabei wird mit bgcolor die Hintergrund- und mit text die Textfarbe eingestellt. link legt die Farbe für Verweise, vlink für bereits besuchte Verweise und alink schließlich die Farbe für einen Verweis fest, der gerade angeklickt wird.

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 auch 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 Abschnitt Farben besprechen wir die Art, in der Farben genau angegeben werden.

Kommentare

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 .

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.

Anstelle von konkreten Übungsaufgaben schlage ich nur ganz allgemein vor, dass Sie zum Texteditor Ihrer Wahl greifen und ein bisschen herumspielen. Das ist nun freilich alles noch recht langweilig, möchte man aber "gute" Seiten schreiben, kommt man um gewisse Grundkenntnisse nicht herum. "Gut" definiere ich rein technisch, also so, dass Prüfdienste mindestens gute Noten dafür vergeben.

Teil 1 von Kapitel 2

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Kapitel 3

Grundstruktur von HTML-Dateien

HTML für Einsteiger - Kapitel 2-2

Rumpf

Kommentare

Verwandte Artikel und Seiten