6.1 HTML

6.1.1 Meta-Informationen

Neben den Informationen, die eine Webseite direkt darstellt, gibt es auch eine Reihe von Informationen über die Webseite, die man separat einstellen möchten, damit z.B. Suchmaschinen die Seite besser finden und besser in der Suchübersicht darstellen.

Einige solcher Informationen sind:

Für solche Informationen gibt es das HTML-Element meta, das Sie bereits aus dem Bereich "Zeichenkodierung" kennen, wo Sie z.B. UTF-8 als Kodierung spezifizieren. Alle Meta-Informationen werden im head eingestellt.

<meta charset="UTF-8"/>

Wie Sie sehen, wird über ein Attribut die Art der Metainformation genannt. Hier ein Beispiel für weitere Meta-Informationen:

<meta name="description" content="Firma ICH AG mit Dienstleistungen zum Thema Egoismus und Co.">
<meta name="author" content="Reiner Wahnsinn">
<meta name="creator" content="Erna Error">
<meta name="publisher" content="ICH AG">
<meta name="keywords" content="Ich, Ego, Egoismus, Dienstleistungen">

Es gibt auch Infos, die gezielt an Suchmaschinen gerichtet ist. Suchmaschinen lassen Tag und Nacht sogenannte Robots laufen, um das Internet zu durchforsten und einen sogenannten Index anzulegen, wo man relativ schnell von Suchbegriffen auf eine zugehörigen URL kommt.

Die folgende Angabe sagt, dass Robots auch in Unterseiten "hinabsteigen" und diese in seinen Index aufnehmen soll (laut SELFHTML ist diese Angabe überflüssig, weil das das Standardverhalten von Robots ist):

<meta name="robots" content="index, follow">

Natürlich können Sie auch das Gegenteil verlangen, d.h. der Robot soll nicht die Seite indizieren und keinen Links folgen:

<meta name="robots" content="noindex,nofollow">

Für Responsive Design ist folgende Angabe wesentlich, wie wir später noch sehen werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Oft werden automatische Weiterleitungen über eine meta-Angabe gehandhabt. Das Szenario ist, dass sie eine alte Webseite an URL www.alteAdresse.de haben und eine neue unter www.neueAdresse.de. Dann stellen Sie folgende Zeile in das index.html auf der alten Adresse:

<meta http-equiv="refresh" content="2; URL=https://www.neueAdresse.de/">

Die "2" gibt dabei eine Wartezeit von 2 Sekunden an, wenn z.B. die alte Seite noch eine Meldung zeigen soll (kann auch auf "0" gesetzt werden).

6.1.2 Formulare TODO

6.2 Fonts und Icons

Jeder Browser hat eingebaute Schriftarten. In CSS können Sie angeben, welche Fallback-Optionen gewählt werden sollen, falls eine von Ihnen gewünschte Schriftart nicht vom Browser bereitgestellt wird (zum Beispiel: "wähle irgendeine serifenlose Schriftart!").

Darüber hinaus können Sie Schriftarten bereitstellen, um zu garantieren, dass wirklich die Schriftart genommen wird, die Sie haben möchten. Eine Schriftart liegt in Form einer oder mehrerer Dateien vor. Diese Dateien benötigt der Browser, um eine Schriftart darzustellen.

Es gibt prinzipiell zwei Arten, Schriftarten bereitzustellen:

  1. Sie haben eigene Dateien auf Ihrem Server liegen
  2. Sie verlinken Dateien eines externen Dienstleisters (man nennt den Diesntleister auch Content Delivery Network oder kurz CDN)

Beide Möglichkeiten haben Vor- und Nachteile:

  1. Eigene Dateien:
    • Vorteile: Sie nicht auf einen Dienstleister angewiesen, Sie müssen zum Testen nicht online sein
    • Nachteile: Bei neuen Versionen müssen Sie die entsprechenden Dateien und evtl. auch den Code updaten
  2. CDN:
    • Vorteile: Sie müssen sich nicht um Updates kümmern
    • Nachteile: Sie müssen beim Testen online sein, Sie sind darauf angewiesen, dass das CDN online und schnell ist

Google stellt den Service Google Fonts bereit, wo Sie Schriftarten auswählen, herunterladen oder einfach verlinken können. Google Fonts ist also auch ein CDN.

Wir verwenden Google Fonts als Beispiel, um die Einbindung von Schrift über ein CDN sowie die Einbindung von Schrift in Form von Dateien zu erklären.

6.2.1 Einbindung per CDN

Nehmen wir an, Sie wählen die Schrift Roboto (Standardschrift für Android-Geräte). Wenn Sie die Schrift über CDN einbinden wollen, verlinken Sie die Dateien im head Ihrer HTML-Datei über:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

In Ihrem CSS können Sie jetzt die Schrift verwenden, z.B. um Sie im gesamten Dokument zur Standardschrift zu erklären:

body {
  font-family: 'Roboto', sans-serif;
}

6.2.2 Einbindung von Schrift-Dateien

Wie binde ich eine Schrift ein, die ich in Form von Dateien vorliegen habe?

Wir zeigen das anhand einer Schrift von Google-Font. In diesem Fall nehmen wir an, Sie haben eine Schrift heruntergeladen. Die bekommen eine ZIP-Datei, die Sie entpacken und dann finden Sie eine Reihe von Dateien mit Endung .ttf (true type font). Es gibt noch weitere Dateitypen, hier eine kleine Übersicht (mehr Infos bei w3schools):

Jede Datei repräsentiert eine Variante der Schriftart, z.B. fett, kursiv oder schmal. Am besten legen Sie alle Dateien zunächst in einen Unterordner font. Hier nur ein Ausschnitt:

font/Roboto-Regular.ttf
font/Roboto-Thin.ttf
font/Roboto-Medium.ttf

In meinem CSS kann ich eine bestimmte Datei laden und dieser Schrift einen (frei wählbaren) Namen geben.

@font-face {
    font-family: myRoboto;
    src: url(font/Roboto-Regular.ttf);
}

Dann kann ich die Schrift dort einsetzen, wo ich sie benötige. Zum Beispiel als globale Schrift für meine Seite. Zur Sicherheit definiere ich auch eine Fallback-Option:

body {
    font-family: myRoboto, sans-serif;
}

6.2.3 Icons mit FontAwesome

Gerade auf mobilen Webseiten wird sehr viel mit Icons gearbeitet. Wir stellen hier ein derzeit populäres Paket mit Icons vor: FontAwesome.

Auch hier gibt es wieder zwei Möglichkeiten, das Paket einzubinden:

  1. Sie stellen Dateien bereit (die Sie vorher herunterladen)
  2. Sie verwenden das angebotene CDN (d.h. die Dateien bleiben bei FontAwesome)

Dateien bereitstellen

Wenn Sie Option 1 wählen, müssen Sie erst das Paket herunterladen, entpacken und das komplette font-awesome Verzeichnis in Ihr Projekt schieben. Anschließend verlinken Sie von Ihrer HTML-Datei aus eine CSS-Datei des FontAwesome-Pakets:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

CDN

Wenn Sie Option 2 wählen, müssen Sie lediglich einen Link setzen. Seit neuestem müssen Sie zuvor Ihre E-Mail-Adresse angeben. Sie bekommen dann den Code zugeschickt, der prinzipiell so aussieht (bei "CODE" steht ein alphanumerischer Code):

<script src="https://use.fontawesome.com/CODE.js"></script>

Icons einbinden

Anschließend können Sie die FontAwesome-Icons (siehe die Übersicht) mit folgendem HTML-Element einbinden:

<i class="fa fa-star"></i>

Dabei ist fa-star der Bezeichner des jeweiligen Icons. Zusätzlich kann man über Klassen die Größe bestimmen, z.B. über fa-lg (33% größer) und fa-2x bis fa-5x. Also für ein 4x größeres Icon:

<i class="fa fa-star fa-4x"></i>

6.3 Responsive Design mit Media Queries

Responsive bedeutet, dass das Layout sich der jeweiligen Ausgabesituation anpasst.

In CSS können wir Bereiche definieren, die nur dann ausgeführt werden, wenn bestimmte Bedingungen erfüllt sind. Diese Abfrage von Bedingungen nennt man in CSS auch Media Queries.

Zum Beispiel können wir die minimale oder maximale Bildschirmbreite in Pixeln angeben:

@media (min-width:800px) {
  /* CSS-Code */
}

Zum Testen kann man z.B. einfach die Hintergrundfarbe des body ändern:

@media (min-width:800px) {
  body {
    background-color: yellow;
  }
}

Man kann mit and mehrere Bedingungen zusammenfügen:

@media (min-width:800px) and (max-width:1000px) {
  body {
    background-color: yellow;
  }
}

Probieren Sie den obigen Code in einer HTML-Seite aus und verändern Sie die Fenstergröße. Sie werden sehen, wie sich der Hintergrund je nach Breite direkt verändert.

Statt wie oben alles in einem CSS-File abzuhandeln, kann man auch verschiedene CSS-Dateien für verschiedene Ausgabesituationen definieren. Realisiert wird das über mehrere link-Elemente, ähnlich wie bei der Erstellung einer CSS-Datei für den Druck:

<link rel="stylesheet" href="css/smartphone.css" media="(max-width:768px)"/>

Aus Gründen der Übersichtlichkeit packt man eher alles in eine CSS-Datei. Das prinzipielle Vorgehen ist, dass man im CSS einen "Standardfall" behandelt und dann per media query Änderungen vornimmt.

6.3.1 Breakpoints

Beim Responsive Design definiert man jetzt sogenannte Breakpoints, anhand derer man Geräteklassen oder Ausgabesituationen unterscheidet. Zum Beispiel könnte man mit zwei Breakpoints (768px und 992px) drei Geräteklassen unterscheiden:

Jetzt haben wir ein Problem, dass einige Geräte eine ungewöhnlich hohe Pixeldichte haben. Als Apple sein "Retina-Display" für Smartphones und Tablets einführte, hatte ein Smartphone plötzlich eine ähnliche Auflösung wie ein Desktop-Monitor. Aber natürlich wollen wir dennoch auf dem Smartphone nicht unser Desktop-Layout zeigen.

Die Lösung besteht darin, die Pixeldichte wieder "rauszurechnen". Das macht der Browser von allein mit der Angabe:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Konkret heißt das: wenn ein Smartphone eine Pixeldichte von 2 hat (d.h. doppelt so viele Pixel wie ein "normales" Smartphone), wird die absolute Bildschirmbreite (in Pixeln) durch zwei geteilt, bevor der Media-Query von oben greift.

Die obigen drei Geräteklassen kann man jetzt verschieden realisieren.

6.3.2 Mobile First

Man könnte davon ausgehen, dass das "normale" CSS sich auf die Smartphone-Version bezieht. Dann würde man für die anderen Geräteklassen/Breakpoints weitere Regeln einführen, die die anderen teilweise überschreiben:

/* normales CSS gilt für Smartphone */

body {
  background-color: yellow;
}

@media (min-width:768px) {
  /* CSS für Tablets */
  body {
    background-color: pink;
  }
}

@media (min-width:992px) {
  /* CSS für Desktops */
  body {
    background-color: cyan;
  }
}

In unserem Beispiel setzen wir für jede Geräteklassen eine andere Hintergrundfarbe, um das Testen zu erleichtern.

6.3.3 Desktop First

Umgekehrt könnte man davon ausgehen, zunächst die "große" Version in CSS zu definieren und dann schrittweise "abzuspecken". Dann sieht unser CSS so aus:

/* normales CSS gilt für Desktops */
body {
  background-color: cyan;
}

@media (max-width:992px) {
  /* CSS für Tablets */
  body {
    background-color: pink;
  }
}

@media (max-width:768px) {
  /* CSS für Smartphones */
  body {
    background-color: yellow;
  }
}

6.3.4 Breakpoints in Bootstrap 4

Bootstrap ist eine der derzeit beliebtesten Frameworks zur Erstellung responsiver Webseiten und verwendet in Version 4 die folgenden Breakpoints:

Bei der Wahl der Breakpoints muss man abwägen, wie viele man einrichten möchte. Jeder zusätzliche Breakpoint muss nicht nur erstellt, sondern auch getestet und bei jeder Weiterentwicklung mit berücksichtigt werden.

6.4 CSS

6.4.1 Flexbox

Siehe auch: A Complete Guide to Flexbox oder w3schools

Eine der größten Probleme in CSS ist die Positionierung und Skalierung von Objekten je nach aktueller Fenstergröße. Das wird herkömmlicherweise mit position oder float gemacht.

In CSS3 kam mit Flexboxen ein weiteres Konzept hinzu.

Man unterscheidet zwischen einem Container und den darin enthaltenen Items. Das Flexbox-Konzept erlaubt jetzt, die Items zu layouten.

Flexbox-Container

Auf Ebene des Containers müssen Sie zunächst mal angeben, dass Sie das Flexbox-Layout verwenden wollen.

.container {
  display: flex;
}

Richtung

Mit flex-direction können Sie die Richtung der Items bestimmen.

Zum Beispiel:

.container {
  flex-direction: column;
}

Ausprobieren bei w3schools: flex-direction

Umbruch

Mit flex-wrapkönnen Sie bestimmen, ob ein Umbruch gemacht werden soll.

Das sieht dann so aus:

.container {
  flex-wrap: wrap;
}

Ausprobieren bei w3schools: flex-wrap

Verteilung

Mit justify-content können die Verteilung der Items bestimmen:

Zum Beispiel:

.container {
  justify-content: center;
}

Ausprobieren bei w3schools: justify-content

Alignierung

Mit align-items können Sie die Alignierung der Items untereinander (anhand der Achse) bestimmen.

Zum Beispiel:

.container {
  align-items: center;
}

Ausprobieren bei w3schools: align-items

Flexbox-Element

Bei den beinhalteten Elementen können Sie die folgenden Aspekte bestimmen.

Reihenfolge

Die Reihenfolge können Sie durch Nummerierung vorgeben, d.h. jedes Element bekommt die Eigenschaft order. Nehmen wir an, Sie wollen die ursprüngliche Reihenfolge der Boxen b1, b2, b3 ändern, dann setzen Sie:

#b1 {
  order: 2;
}

#b2 {
  order: 1;
}

#b3 {
  order: 1;
}

Der Defaultwert für order ist 0.

Ausprobieren bei w3schools: order

Ausdehnung

Mit dem Wert flex-grow definieren Sie, mit welcher Priorität das Element sich ausdehnen soll, wenn zusätzlicher Platz zur Verfügung steht. Der Defaultwert ist 1. Setzt man ein bestimmtes Element auf flex-grow:2, nimmt es sich doppelt so viel Platz wie die anderen Elemente.

#b2 {
  flex-grow:2;
}

Ähnlich funktioniert flex-shrink.

Ausprobieren bei w3schools: flex-grow | flex-shrink

Basisgröße

Mit flex-basis definiert man die Ausgangsgröße der Elemente, entweder absolute (in Pixeln) oder relativ (in %).

#b2 {
  flex-basis:200px;
}

Ausprobieren bei w3schools: flex-basis

Alignierung für Einzelelement

Mit align-self setzen Sie die Alignierung für ein einziges Element und ignorieren für dieses Element die Gesamtalignierung von align-items.

#b2 {
  align-self:center;
}

Ausprobieren bei w3schools: align-self

6.4.2 Spezifizität TODO

Überblick: CSS Kaskade

Siehe auch: Specifics on CSS Specificity, Fishy Specificity und Specificity Calculator

6.5 Zeichnen und Animation TODO