Bootstrap Html und Co 2 - das Template
<!doctype html> Mit diesem Text teilen Sie dem Browser mit, das er ein Html5 Dokument verarbeiten soll. Im Umkehrschluss heisst das aber auch, das es noch andere doctype Angaben gibt. Mit diesen kann man zum Beispiel SVG Dokumente deklarieren oder ältere Html Versionen. doctype an sich ist kein Html Tag und wird auch nicht geschlossen.
<html>... </html> Mit diesen zwei Tags, öffnendes und schließendes, deklarieren Sie, das alles was sich dazwischen befindet Html Code ist. Gleichzeitig sehen wir auch, das es Tags gibt, die zusätzliche Eigenschaften besitzen.
<html lang="en"> Mit lang="en" wird im Template oben, die Sprache auf englisch gesetzt. Die Kürzel selbst orientieren sich am IANA Register für Sprachkürzel. Für ein deutsches Dokument würden wir <html lang="de" schreiben.
Die Struktur sehen
Wenn wir das Template betrachten sehen wir ein <head>...</head> und ein <body>...</body> Tag / Element. Beide sind eingebettet im <html>...</html> Tag. head und body kennzeichnen dabei unterschiedliche Abschnitte des Dokuments.
Vereinfacht ausgedrückt; Im Kopf Abschnitt des Dokuments (head) befinden sich alle Informationen, die der Browser benötigt, um den Körper (body) des Dokuments richtig dar zu stellen. Der body enthält also die eigentliche Webseite !
Der Kopf (head)
Das <head>...</head> Element enthält dabei zwei <meta> Tags. Dieser beinhaltet Daten über Daten. Das liest sich nun seltsam, hat aber seine Berechtigung. Hier noch einmal der Kopfabschnitt des Templates:
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <title>Hello, world!</title> </head>
Das Format dabei ist <meta name="land" content="Deutschland"> . Name ist also die Bezeichnung des Inhalts, content ist der Inhalt .
Im Code oben wird der Zeichensatz, charset, und der viewport über ein meta Element gesetzt. Ihnen dürfte auch <!-- .... --> aufgefallen sein. In diesem Format werden Kommentare in einem Html Dokument geschrieben.
Ein Link fürs Leben
Im <head>..</head> Element kommen wir auch zum ersten Mal mit Bootstrap in Kontakt. Mit dem <link......> Tag binden wir die erste Bootstrap Datei in das Dokument ein. Dabei handelt es sich um eine CSS Datei, dazu aber mehr in einem anderen Post. Auch bei diesem Tag wird kein schließendes </link> benötigt. Als letztes in diesem <head> Element wird mit <title>..</title> der Titel unseres Html Dokuments definiert.
Der Körper
Da es sich hier um ein Template handelt, also eine minimale Vorlage, ist der <body>....</body> Abschnitt mit Absicht schlank geraten:
<body> <h1>Hello, world!</h1> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script> --> </body>
Wie im letzten Post geschrieben, verwende ich Visual Studio Code mit der Erweiterung LiveServer. Startet man nun dieses Template, erhält man folgende Website im Browser:
Obwohl nicht spektakulär, haben wir die ersten Schritte mit Html gemacht. Das Template soll die Grundlage für die nächsten Schritte sein. Bis bald !
Kommentare
Kommentar veröffentlichen