Bootstrap Html und Co 2 - das Template

 

FlutterCoder
Auf der Bootstrap Homepage wird ein Template zur Verfügung gestellt, das einen einfachen Start ermöglicht.  Als Einstieg schauen wir uns dieses im Detail an.

Template

Der erste wichtige Punkt in Html ist die Funktionsweise von Tags.  Diesen englischen Begriff könnten wir auch mit Schlüsselwörter übersetzen. Ähnlich zu Programmiersprachen kann man diese Schlüsselwörter als Befehle verstehen. Ein Tag wird immer geöffnet <Tag> und mit wenigen Ausnahmen auch immer geschlossen </Tag>. Alles was sich dazwischen befindet, ist von der Funktionsweise des Tags betroffen.

<!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>

Man sieht hier auch gleich, dass das meta Tag kein schließendes </meta> hat. In meta Elementen können beliebige Informationen gespeichert werden. In der Praxis wird der Tag aber genutzt um Informationen zu speichern, die das verarbeiten des Dokuments vereinfachen. 
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>

Mit <h1>...</h1>  wird eine Seitenüberschrift definiert, gefolgt von Html Kommentaren. Die zweite Bootstrap Datei, ein JavaScript Programm, wird mit dem <script>...</script> Tag eingebunden.

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:

Hello World

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 !
Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Material Design in Flutter Teil 2

Bild
Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet. Farben Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel: 0xff42f4dc Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff , ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255 , was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc , den Blauanteil fest. Kompakt: 0x = es handelt sich um eine Hex
Mehr anzeigen

Flutter -- ohne Dart geht es nicht 2 -- einfache Variablen Typen

Wer sich noch einmal den ersten Teil durchlesen möchte, geht auf diese Seite . Ohne Variablen kann man nicht programmieren. Dar t stellt uns eine Reihe von Variablen Typen zur Verfügung, wobei man immer im Hinterkopf behalten sollte: Alle Variablen Typen in Dart sind auch Objekte! Alle Variablen haben den Startwert NULL .  Beispiel: int jahr = 2018 ;   // int = Variablen Typ für ganze Zahlen z.b.: 1 oder 39 oder 5315 Der Variable mit dem Namen jahr weisen wir den Wert 2018 zu. Wir hätten für die Variable jahr , auch folgende Deklaration verwenden können: var jahr = 2018 ; In dieser Variante wird Dart jahr ebenfalls als int Variable behandeln. Der große Unterschied ist jedoch, das wenn wir im späteren Programmverlauf, dieser Variable ohne Fehlermeldung z.b. einen String zu weisen können. Während dies bei der int Version zu einer Fehlermeldung führen würde . Einer int Variablen können wir aber auch einen hex Wert zuweisen: int seltsame Zahl = 0xEADEBAEE
Mehr anzeigen

Flutter -- Tutorial Teil 6 Provider Part 2

Bild
In Part 1 zum Thema Provider haben wir den Code vorbereitet, auf den wir das "Muster" Provider anwenden möchten. Noch einmal zur Erinnerung: Der Code wurde in Visual Studio Code getestet, sollte aber auch in Android Studio problemlos laufen. Der Beispiel Code wurde dem Video von RetroPortalStudio entnommen. Ich empfehle sich das Video anzuschauen, vorausgesetzt man besitzt genügend Englisch Kenntnisse, um dem Audio Kommentar zu folgen. Als erstes werden wir unser Scaffold Widget in ein neues Widget einbetten. Visual Studio Code unterstützt uns dabei mit "Wrap with new Widget" !  Man klickt dazu auf die kleine Glühbirne und wählt im Drop Down Menu den entsprechenden Eintrag aus.  ChangeNotifierProvider(...)  heisst unser neues Widget und ist durch den Import von provider.dart verfügbar geworden: 1 2 3 4 5 import 'package:flutter/material.dart' ; import 'package:provider/provider.dart' ; import 'wetterinfo.dart' ;
Mehr anzeigen