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

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


verwandte Artikel und Seiten

Grundstruktur von HTML-Dateien

HTML für Einsteiger - Kapitel 2-1

von Thomas Salvador.

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.

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.

Kopf

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>

Der title-Tag

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.

Der meta-Tag

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 http-equiv, wenn der Eintrag im Rahmen des HTTP-Protokolls übertragen werden soll und name, wenn es private Angaben sind.

Metaname ist die Kennung des Eintrages, er ist bei meta name 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.

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


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 2. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/10.html .