Bootstrap Html und Co 3 - erste Schritte

 

Bootstrap
Im letzten Post hatten wir uns das Template angeschaut, welches Bootstrap auf seiner Homepage zur Verfügung stellt. Wir sind ein wenig auf Html eingegangen, ohne aber wirklich ausführlich zu werden. In diesem Post nehmen wir das Template als Grundlage für die ersten Schritte !

Wenn man sich in ein neues Thema einarbeitet stellt sich die Frage: Woher bekomme ich verlässliche Informationen dazu ?

Im Fall von Bootstrap ist die Homepage der natürliche erste Anlaufpunkt. Was Html betrifft gibt es einiges an Auswahl. Ich persönlich bevorzuge Selfhtml-Wiki. Es ist in deutscher Sprache und wie ich finde, ansprechend gestaltet.

Mit dem Template lernen

Wenn Sie das Template in Visual Studio Code, mit der Erweiterung LiveServer, im Browser anzeigen lassen, ist das Ergebnis wenig begeisternd. Das ist aber auch ok, das Template ist in erster Linie dazu gedacht, das einbinden der Bootstrap Dateien in ein eigenes Html File zu zeigen.
Im letzten Post haben wir auch festgestellt, das die eigentlich Website im <body>...</body> Bereich des Dokuments definiert wird. Hier dieser Bereich noch einmal zur Erinnerung:

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

Am besten Sie löschen die verschiedenen Kommentare  <! ... --> , diese brauchen wir zum jetzigen Zeitpunkt nicht. Innerhalb von <body> haben wir "nur" ein  <h1> ... </h1> und ein <script>...</script> Element. 

Mit <h1>...</h1> definieren wir eine Überschrift. Das Element kommt in den Abstufungen <h1>...</h1> bis <h6>...</h6> vor.  Wenn Sie damit experimentieren, werden sie feststellen, das Stufe 6 die kleinste Überschriftgröße ist.

Ersetzen Sie das Standard "Hello, world!" durch einen eigenen Text ! 

Das ist Ihre Sache !

Den Inhalt Ihrer Website bestimmen Sie. Falls Sie nicht gerade eine " One Page" Website möchten, werden Sie auf Ihrer Homepage eine Navigation brauchen. Mit dieser kann der Benutzer zu anderen Sektionen Ihrer Website wechseln. Schauen wir uns einmal an, was Html da zu bieten hat:

<nav>
      <ul>
        <li><a href="#link_1.html">Urlaubsfotos</a></li>
        <li><a href="#link_2.html">Börsenkurse</a></li>
        <li><a href="#link_3.html">Kontakt</a></li>
      </ul>
    </nav>

Mit <nav>...</nav> sehen Sie hier das erste "neue" Element. Nicht zu unrecht dürfen sie nav als Abkürzung für Navigation verstehen.
An dieser Stelle aber noch eine Richtigstellung: Ein Html Element besteht aus zwei Tags, dem öffnenden Tag (<nav>) und dem schließenden Tag (</nav>) .

Der Beispiel Code oben hat innerhalb der nav, das <ul>...</ul> Element. ul steht dabei für unordered list, ungeordnete Liste.
Innerhalb dieser ul haben wir drei <li>...</li> Elemente inklusive eines Links und den Text für den entsprechenden Link.

Ohne Bilder geht gar nicht

Sie werden auf Ihrer Website kaum auf Bilder oder Grafiken verzichten wollen. Bevor wir den Code anschauen, noch ein paar Worte zur Struktur einer Website. Html5 hat da mehr Möglichkeiten eingeführt. 
Sie erinnern sich: das <head>...</head> Element steht im Kopf der Html Datei und enthält vor allem Metainformationen über unser Html Dokument. Das <body>...</body> Element umfasst den Inhalt unserer Website. 
Mit Html5 können wir den Inhalt von body weiter strukturieren. Uns steht das <header>...</header> Element zur Verfügung, um den Kopfabschnitt in zu erstellen. Das Gegenstück dazu ist das <footer>...</footer> Element. Es ist für das Impressum, Kontakt oder ähnliches Gedacht. Im Beispiel unten importieren wir im header Element eine kleines Bild:

<header>
      <img src="bilder/logo21.png" alt="logo">
    </header>

Mit dem <img....> Element importieren wir das Bild in die Seite. Der gesamte Code sieht nun so aus :


<!doctype html>
<html lang="de">
  <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>
  <body>
    
    <h6>Bootstrap Html Css3 Test</h6>
    
    <header>
      <img src="bilder/logo21.png" alt="logo">
    </header>

    <nav>
      <ul>
        <li><a href="#link_1.html">Urlaubsfotos</a></li>
        <li><a href="#link_2.html">Börsenkurse</a></li>
        <li><a href="#link_3.html">Kontakt</a></li>
      </ul>
    </nav>

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

  </body>
</html>

Für das Bild habe ich im übrigen in Visual Studio Code einen Ordner angelegt. Für das testen sind die Ordnerstrukturen zwar nicht wichtig, trotzdem sollte man früher oder später darauf achten.
Wenn wir den Code in Visual Studio Code mit LiveServer darstellen lassen, erhalten wir folgende Website:

Beispiel

Am Anfang des Internets haben viele Links so ausgesehen wie oben. Vergleicht man das mit aktuellen Websiten, ist das wenig ansprechend. Jetzt ist es Zeit das erste Mal auf Css3 einzugehen.

Css3 -- unsere Möglichkeit der Gestaltung

Wie Html, ist auch Css3 ein großes Thema. Nicht umsonst werden dazu ganze Bücher geschrieben. Im ersten Moment wichtig ist zu wissen, was wir damit machen können. Da wären: Schriftfarben setzen, Hintergrundfarben setzen, Schriftarten definieren, Schriftgrößen und vieles andere mehr. 
Dabei gibt es drei verschiedene Möglichkeiten, wie wir Css in unser Html Dokument bringen. Wir werden uns auf die konzentrieren, die die benötigten Css Angaben über einen Link in unser Dokument einbindet.
Css steht dabei für Cascading Style Sheets , mit der 3 in der Abkürzung ist die aktuelle Version gemeint. Ein einfaches Beispiel:

h1 { 
   font-family: Helvetica;
   font-size: 1.4em;
   color: red;
}

Oben wird für das h1 Element von Html eine Schriftart (Helvetica), eine Schriftgröße (1.4em) und eine Farbe (red) definiert.
Solche Css Angaben können in einer eigenen Datei gespeichert werden und sind anschliessend über einen Link in das eigene Html Dokument ein zubinden. Beispiel: meinFarben.css.
Nun ist das Beispiel oben nur für das h1 Element gültig, was wenn wir Anweisungen schreiben möchten, die nicht an ein spezielles Element gebunden sind ?

Ein Html Element kann Klasse haben

Statt zum Beispiel <h1>...</h1>, schreiben wir <h1  class="meinetollenFarben">...</h1> .
Unser Css Text müsste dann wie folgt aussehen:

.meinetollenFarben { 
   font-family: Helvetica;
   font-size: 1.4em;
   color: red;
}

Hier ist die Überleitung zu Bootstrap. Dieses Framework ist zwar wesentlich mehr als "nur" Css, aber für den Anfang ist das okay. Schauen wir uns Beispiel Code auf der Homepage von Bootstrap zum Thema nav an:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sofort fällt auf das im Code oben sehr intensiv mit class gearbeitet wird. Testen Sie das gleich und übernehmen zum Beispiel die <ul> und die <li> Klasse in Ihren Code. Bei dem <a>...</a> Element begnügen wir uns jeweils mit der nav-link Klasse. Der Code sollte dann in etwa so aussehen:

<!doctype html>
<html lang="de">
  <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>
  <body>
    
    <h6>Bootstrap Html Css3 Test</h6>
    
    <header>
      <img src="bilder/logo21.png" alt="logo">
    </header>

    <nav>
      <ul class="nav">
        <li class="nav-item"><a class="nav-link" href="#link_1.html">Urlaubsfotos</a></li>
        <li class="nav-item"><a class="nav-link" href="#link_2.html">Börsenkurse</a></li>
        <li class="nav-item"><a class="nav-link" href="#link_3.html">Kontakt</a></li>
      </ul>
    </nav>

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

  </body>
</html>

Erstaunlich: wir haben nicht wirklich viel hinzugefügt. Wenn wir uns die Website über LiveServer darstellen lassen, erhalten wir folgendes Ergebnis:

Bootstrap

Das sieht jetzt doch schon ansprechender aus, als unser erster Entwurf weiter oben. Zudem haben wir Bootstrap das erste mal eingesetzt. 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