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

Dart Basic: Listen Part 1

Bild
In diesem Post wenden wir uns einem Basiselement fast jeder Programmiersprache zu, der Liste. Als Laie könnte man meinen, okay ein einfaches Thema, aber wen man genau hinschaut, ist es vielfältiger, als man denken möchte. Eine Liste kann nicht wachsen ? Es gibt Situationen, da wissen wir im Vorfeld schon, wie groß eine Liste sein wird.  Die Liste deiner Freunde zum Beispiel oder eine Liste deiner Familie. Der Anfang ist einfach. Wir haben eine Variable, meineKleineListe , diese ist vom Typ List<String> . Ihr weisen wir anschließend mit new List(5)  ein neues Listen Objekt zu . Unsere Variable meineKleineListe kann nun als Liste angesprochen werden und hat genau...wir sind verwundert..Platz für 5 Einträge. Kommen wir aber noch kurz zum Titel dieses Abschnitts, von wegen wachsen. Da wir mit new List(5 ) explizit festgelegt haben, das die Liste 5 Einträge haben soll, wird sich unsere Entwicklungsumgebung mit einem Fehler zu Worte melden, sollten wir versuchen ei...
Mehr anzeigen

Listen in Dart (2021): Part 1 List.filled List.empty und List.add

Bild
  Vor langer Zeit hatte ich in diesem Blogg schon einmal das Thema Listen aufgegriffen. Im ersten Post dazu, anhand eines einfachen Beispiels. Anschliessend war die Iterable Klasse ein Thema, welche mit der List Klasse einen engen Bezug hat. Abschließend wurde das Thema dann noch in einem zweiten Post vertieft. Wie oben geschrieben war das vor langer Zeit und es macht Sinn das Thema noch einmal aufzugreifen und sei es nur um das Wissen dazu aufzufrischen. Alle Code Beispiele wurden mit Dart 2.13, Null safety aktiviert, getestet . 2 Sorten von Listen Dart stellt zwei Arten von Listen zur Verfügung: eine mit fixer Grösse und eine die "wachsen" kann. Im Code oben sehen Sie zwei Versionen, wie Sie eine Liste definieren können. Wichtig dabei ist, das Sie die leere Liste erst dann über den Index ansprechen können, wenn Sie mindestens einen Eintrag hinzugefügt haben !  Im Vergleich zu früheren Dart Versionen hat sich das erstellen einer Liste mit fixer Länge geändert. Akt...
Mehr anzeigen