Das minimale Gerüst einer Webseite
Die DIY-Bewegung erlebt gerade eine Renaissance. Viele wollen selber aktiv werden, Dinge tun und gestalten. Vielleicht sogar eine eigene Homepage. Aber wo fange ich an?
Die meisten (kommerziellen) Webseiten sind heutzutage sehr überfrachtet und überladen. Sie bieten Einstiegern keine gute Vorlage, um mit der Webentwicklung zu starten. Über das Kontextmenü (-> Rechtsklick im Browser) läßt sich zwar der HTML Quelltext jeder Seite anzeigen, die Informationsflut ist jedoch gerade für Neulinge ernüchternd.
Daher macht es Sinn sich mit dem Grundgerüst einer HTML5-Webseite zu beschäftigen, um ein neues Projekt auf ein solides Fundament zu stellen. Erweitert werden und wachsen kann es dann immer noch.
Du benötigst einen Editor deiner Wahl, um eine .html-Datei zu erstellen. Es bietet sich an, diese index.html zu nennen. Wieso genau der Name erläutere ich vielleicht mal in einem anderen Beitrag. Kopiert nun folgenden Inhalt in die neue Datei und speichert sie ab:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seitentitel</title>
</head>
<body>
</body>
</html>
Wenn Du nun die Datei in einen leeren Tag des Browsers per Drag’n’Drop reinziehst, wirst Du feststellen, dass zwar in der Adresszeile der Pfad zur Datei angezeigt wird, das Inhaltfenster jedoch leer bleibt. Das liegt daran weil wir noch gar keine Inhalte also Text darstellen.
Wenn Du den <body>-Tag mit Kindelementen befüllst, werden diese jedoch angezeigt:
<body>
<h1>Ich bin eine Hauptüberschrift</h1>
<p>Ich bin ein einzelner Paragraph</p>
</body>
Gratuliere. Du hast soeben Deine erste, kleine Seite erstellt. Sozusagen ein Hello World in HTML5. Und responsive, also gut dargestellt auf allen Bildschirmgrößen, ist sie auch noch :)