HTML – eine ganze Datei

Wie erzeugt man eine vollständige HTML-Datei?

Der Grundaufbau umfasst einen “Kopf” (head) mit Steuerinformationen und einen “Rumpf” (body), in dem derjenige Code abgelegt wird, der auf der Website angezeigt werden soll.

Diese beiden Bestandteile müssen so eingebettet werden, dass der Browser sie als HTML-Bestandteile erkennt. Dies geschieht mittels des Tags html. Idealerweise gibt man diesem ein Attribut mit, in welcher Sprache der Inhalt verfasst ist. Für Deutsch kennzeichnet man das Dokument mit lang="de".

Zu Beginn muss das gesamte Dokument mit dem Typ HTML gekennzeichnet werden. Dies erfolgt mit einer !DOCTYPE-Deklaration.

All dies zusammen gibt folgendes Grundgerüst.

<!DOCTYPE HTML>
<html lang="de">
  <head>
  </head>
  <body>
  </body>
</html>

Im Head sind Angaben zur Zeichencodierung, zum Seitentitel und zu anderen grundlegenden Seitenmerkmalen enthalten.

Als Zeichencodierung wird im heutigen Internet standardmäßig UTF-8 verwendet. Dieser Zeichensatz ist mächtig genug, um auch – aus europäischer Sicht – “exotischere” Zeichensätze wie zum Beispiel die der chinesischen oder japanischen Sprache darstellen zu können.   Global betrachtet ist es natürlich so, dass insbesondere die chinesische Schrift von so vielen Menschen wie keine andere im  Tagesgebrauch verwendet wird.

Aus Sicht der hier verwendeten deutschen Sprache dient die Kennzeichnung einer HTML-Datei als UTF-8-codiert vor allem der korrekten Darstellung der Umlaute und des scharfen “s”.

Innerhalb des Head erfolgt die Festlegung des Zeichensatzes mit dieser Einfügung: <meta charset="UTF-8" />. Diese Deklaration muss als erste erfolgen, damit alles nachfolgende richtig interpretiert werden kann.

 

Der Seitentitel erscheint NICHT auf der Website an sich, sondern in demjenigen “Reiter”, “Tabulator” oder “Tab” des Browsers, in dem die Website angezeigt wird. Erfahrungsgemäß hat man mehrere Tabs gleichzeitig geöffnet. Konsequenz ist: man hat wenig Platz. Also sollte der spezifizierte Titel möglichst kurz sein. Und: da oft der Titel-Text einfach abgeschnitten wird, sollten schon die ersten Worte oder gar Buchstaben möglichst sprechend sein. Also sollte man zum Beispiel Artikel vermeiden.

Der Inhalt des Titels wird so deklariert: <title>Beispieltitel</title>.

 

Vielleicht ist Ihnen auch schon einmal aufgefallen, dass viele Websites ein kleines Symbol mit sich führen, dass vor dem Titel im Taberscheint. Auf dieser Website zum Beispiel ist es dieses Symbol:Favicon dieser Website.

Man nennt dies ein Favicon, also ein favorite Icon. Es dient vor allem dem schnellen (Wieder-)Erkennen einer Website. Oft werden die Logos des eigenen Unternehmens genommen. Dies wird oft dadurch flankiert, dass der Unternehmensname auf der Startseite als Titel verwendet wird.  Man kann dies an nachfolgendem Beispiel ganz gut sehen: bei vielen steht in der Reiterregistratur sowohl das Firmenemblem als auch der Name des Unternehmens.

Favicon-Beispiele

Favicon-Beispiele auf Browser-Tabs.

 

Da der Platz für die Firmennamen oft nicht ausreicht, kann der Wiedererkennungswert des eigenen Markenlogos genutzt werden, um sich gleichsam in das Hirn des Nutzers “einbrennen’ zu können.

Mit all diesen Ergänzungen erhalten wir als neues, jetzt erweitertes Grundgerüst einer ganzen html-Datei:

<!DOCTYPE HTML>
<html lang="de">
  <head>
     <meta charset="utf-8" />
     <title>Beispieltitel</title>

 </head>
  <body>
  </body>
</html>

Die Inhaltselemente kommen in den Body. Damit haben Sie das Grundgerüst kennengelernt. Herzlichen Glückwunsch dazu.

 

 

 

About Wolfgang Wagemann

Wolfgang Wagemann lebt im Rhein-Neckar-Raum.
This entry was posted in Sprachen und Systeme. Bookmark the permalink.