Zum Hauptinhalt springen

grundgerüst

Das HTML-Grundgerüst​

Fangen wir damit an, das Grundgerüst für unser Rezept zu erstellen. Wir haben ja bereits eine index.html-Datei erstellt, in der wir nun das Grundgerüst unserer Webseite aufbauen. Jede HTML-Datei beginnt mit dem <!DOCTYPE html>-Tag. Dieses Tag teilt dem Browser mit, dass es sich um eine aktuelle HTML-Datei handelt und benötigt kein schliessendes Tag.

<!DOCTYPE html>

In der nächsten Zeile erstellen wir das html-Tag. Es umschliesst den gesamten Inhalt der Webseite.

<!DOCTYPE html>
<html>
</html>

Als Entwickler haben wir Zugriff auf zwei Bereiche einer Webseite: den head-Bereich, in dem Dinge definiert werden, die der Kunde nicht sieht, und den body-Bereich, in dem alles definiert wird, was der Kunde sieht. Wir erstellen also als Nächstes das head- und das body-Tag.

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

Damit unsere Webseite überall immer gleich aussieht, müssen wir eine Zeichencodierung definieren. Dies machen wir mit dem meta-Tag im head-Bereich. Damit unsere Webseite überall gleich dargestellt wird, müssen wir eine Zeichencodierung definieren. Dies machen wir mit dem meta-Tag im head-Bereich. Im meta-Tag definieren wir das charset-Attribut mit dem Wert UTF-8. UTF-8 ist der aktuelle Standard für die Codierung von Webseiten. Das charset-Attribut definiert, wie die Zeichen auf der Webseite dargestellt werden.

Davor anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
</head>
  <body>
  </body>
</html>
Danach anzeigen

Damit die Seite auf PC und Handy gut aussieht, fügen wir ein viewport-Meta-Tag hinzu. Es sorgt dafür, dass die Webseite weiss, wie breit der Bildschirm ist.

Davor anzeigen
<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
  <body>
  </body>
</html>
Danach anzeigen

Schliesslich definieren wir einen Titel für unsere Webseite. Dieser Titel wird im Browser-Tab angezeigt.

Davor anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Spitzbubenrezept</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
  <body>
  </body>
</html>
Danach anzeigen

Wenn wir all das gemacht haben, sieht unser Grundgerüst so aus:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Spitzbubenrezept</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
  </body>
</html>

Wenn wir unsere Webseite jetzt anschauen möchten, können wir unten rechts den Go-Live-Button nutzen, um sie im Browser zu öffnen.

Momentan ist unsere Webseite noch leer, da wir noch keinen Inhalt im body-Bereich definiert haben. Aber wir können oben im Browser-Tab sehen, dass unser Titel definiert wurde.