SELF-Treffen in Mainz 2023

Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.

HTML/Tutorials/Grundgerüst

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im vorliegenden Kapitel lernen Sie das minimale Grundgerüst einer HTML-Webseite kennen, wogegen das Einstieg in HTML-Tutorial die ersten Schritte in HTML erklärt.


Kopiervorlage für ganz Ungeduldige

Ein Grundgerüst für Seiten, die auch tatsächlich im Internet veröffentlicht werden sollen, muss ein wenig über das minimale Grundgerüst hinausgehen.

Kopiervorlage ansehen …
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel der Seite | Name der Website</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
    <p>Sehen Sie sich den Quellcode dieser Seite an.
      <kbd>(Kontextmenu: Seitenquelltext anzeigen)</kbd></p>
  </body>
</html>
Kopiervorlage: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>
ansehen …

Informationen zu dem, was über das minimale Grundgerüst hinaus geht, finden Sie unter:

Aufbau des Grundgerüstes

Ein valides HTML5-Dokument, also eine Webseite, die dem vom W3C vorgegebenen Standard entspricht, besteht mindestens aus der Angabe des Dokumententyps und aus folgenden Elementen:

  • html
  • head
  • title
  • body

Als Grundgerüst bezeichnet man ein HTML-Dokument, das nur diese Elemente enthält. Es wird folgendermaßen notiert:

Beispiel
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

Für den produktiven Einsatz sollten Sie jedoch das Grundgerüst aus der Kopiervorlage verwenden.

Doctype

Es gibt von HTML verschiedene Versionen (HTML 1 bis HTML 4.01 und HTML5). Eine Zeit lang wurden Webseiten nicht nur in HTML, sondern auch in XHTML geschrieben. Die Dokumenttyp-Deklaration (DTD) am Anfang eines jeden HTML-Dokumentes informiert über die Art des Dokumentes.

Für die heutigen Browser wird nur noch die DTD für HTML5 benötigt[1], weshalb wir die vielfältigen DTDs älterer HTML-Versionen aus unserer Dokumentation entfernt haben. Eine vollständige Liste der DTD finden Sie (englischsprachig) beim World Wide Web Consortium W3C: (X)HTML Doctype Declarations List.

Angabe einer Dokumenttyp-Deklaration
<!DOCTYPE HTML>

Groß-/Kleinschreibung ist für diese Angabe nicht relevant.

Empfehlung: Erstellen Sie HTML5-Dokumente.
  • Jeder Browser „versteht“ diesen Doctype.
  • Sie können sowohl die neuen HTML5-Elemente nutzen als auch bestehenden HTML4-Code weiterverwenden.
  • Der doctype ist kürzer und übersichtlicher ;-)

Das HTML-Element

Das html-Element umschließt das gesamte Dokument. Die Struktur eines HTML-Dokumentes kann wie ein Stammbaum dargestellt werden. Ausgangspunkt für diese Struktur ist immer das HTML-Element, weswegen man auch vom Wurzelelement (eng. root element) spricht.

Im html-Element muss mit dem lang-Attribut die Sprache des Seiteninhalts angegeben werden; das ist wichtig für die allgemeine Benutzbarkeit der Seite. (für deutschsprachige Seiten: <html lang="de">; für englischsprachige "en")

Es wird unterteilt in

  • head – Informationen über die Seite, die von Programmen wie z. B. Suchmaschinen oder Browsern ausgewertet werden
  • body – die eigentlichen, vom Browser darzustellenden Informationen
Beispiel
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Der head: unsichtbar, aber unverzichtbar

Das head-Element (deutsch: Kopf) ist in allen HTML-Standards ein Pflicht-Element und enthält Informationen über den im body notierten Text.

head 
<head></head>

Zwingend ist mindestens die Angabe eines Namens, daher muss jedes valide HTML-Dokument einen Titel haben.

der Titel

Obwohl der title nicht auf der eigentlichen Webseite ausgegeben wird, erscheint er an vielen Stellen. Hier einige Beispiele:

  • Browser zeigen ihn in der Registerkarte (Tab) an,
  • Microsoft Windows blendet ihn in der Taskleiste als Tooltip ein,
  • Suchmaschinen verwenden ihn in der Regel als Bezeichnung für einen Treffer
  • Nutzern von Vorleseprogrammen wird der Titel beim Wechsel auf eine Seite als erstes vorgelesen.

Dem Titel kommt also eine besondere Bedeutung zu und er sollte daher aussagekräftig sein. Um die einzelnen Seiten eindeutig unterscheiden zu können, empfiehlt es sich außerdem, einen Titel nicht für zwei oder mehr HTML-Dokumente innerhalb eines Webauftrittes zu verwenden. Vergeben Sie besser für jede Seite einen einmaligen Namen.

title -Element im head 
<head>
  <title>aussagekräftiger Seitentitel</title>
</head>

Zeichencodierung

Sie müssen wie bisher die Zeichencodierung festlegen.[2] Am einfachsten erreichen Sie dies durch die Angabe:

Zeichencodierung
<meta charset="utf-8">
Beachten Sie: Wenn Sie für HTML-Dokumente die Zeichencodierung durch <meta charset="utf-8"> festlegen, müssen Sie darauf achten, dass sich diese Angabe vollständig innerhalb der ersten 1024 Bytes des Dokuments befindet.
Des Weiteren muss das Dokument auch mit dieser Zeichencodierung vom Server ausgeliefert werden, dafür einfacherweise auch in derselben Zeichencodierung abgespeichert sein.

Viewportangabe

Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man eine Viewportangabe einstellen. Ohne Angabe setzen Browser die Breite einer Webseite auf 960px und verkleinern, sodass es in den Viewport passt. So erhält der Nutzer zwar einen Überblick, Text wird aber erst nach dem hineinzoomen lesbar.

Mit folgender Einstellung können Sie erreichen, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht:

Beispiel
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Folgende Angaben sind möglich:

  • initial-scale: (Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt)
  • user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no), der default-Wert ist yes.
  • minimum-scale bzw. maximum-scale: ermöglichen es, den Zoomgrad einzuschränken. (z. B.: maximal scale=2.0 Inhalt kann maximal 2x-fach vergrößert werden.)

Da hiermit etwas eingestellt wird, das mit der Darstellung zu tun hat, ist eine Metaangabe natürlich nicht ideal. Langfristig wird diese Metaangabe auch entfallen können und statt dessen in CSS erfolgen. Die entsprechende Regel @viewport {} ist aber auch schon wieder zurückgezogen worden.

Sie können dieses meta-Element ohne jegliche Nebenwirkungen für jede Ihrer Webseiten einsetzen, um die Darstellung auf Mobilgeräten zu verbessern. Die Benutzbarkeit und der Komfort werden auf keinen Fall leiden.

Empfehlung: Unterbinden Sie das Zoomen auf Mobilgeräten nicht. Verwenden Sie <meta name="viewport" content="width=device-width, initial-scale=1.0">

Der body: sichtbarer und strukturierter Aufbau

Was Sie in das body-Element schreiben, wird im Hauptbereich des Browsers dargestellt, der für die eigentliche Webseite reserviert ist (Viewport). In diesen Bereich kommen alle auf der Webseite sichtbaren Informationen.

body 
<body>
  <!-- Inhalt Ihrer Seite -->
</body>

Wie geht es weiter?

Dieses Grundgerüst ist die notwendige Grundlage für jede Webseite.

Im folgenden Kapitel werden die Elemente vorgestellt, mit denen Sie die innerhalb des body notierten Inhalte strukturieren.

  1. ↑ W3C: Doctype
  2. ↑ W3C: character-encoding
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Grundgerüst&oldid=91500“