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

An dieser Stelle nur der Verweis auf (a) meine Folien (siehe Moodle) oder (b) auf die folgenden Quellen im Web:

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 Transformationen und Transitions (CSS3)

Mit der Einführung von CSS3 (CSS Level 3) gibt es die in Programmiersprachen üblichen geometrischen Transformationen Translation, Rotation, Skalierung auch in CSS.

Noch wichtiger: Sie können einfache Animationen, sogenannte Transitions, über das CSS definieren und anstoßen.

CSS3 ist noch mit etwas Vorsicht zu genießen. Obwohl es bereits seit 2000 in Entwicklung ist, gibt es bis heute keinen offiziellen Standard, aber die wichtigsten Features von CSS3 werden von allen Browsern unterstützt.

Transformationen kann man sich ähnlich wie position:relative vorstellen: das Element nimmt den originalen Platz im Layout ein und wird relativ zu diesem Standort verschoben, gedreht oder skaliert.

Wir schauen uns wieder ein einfaches Beispiel an:

<p>
  Lorem ipsum ...
</p>

<img id="pic1" src="hsa.png" alt="Logo der Hochschule Augsburg"/>

<p>
  Lorem ipsum ...
</p>

So sieht das ganze ohne Transformationen aus:

Bild ohne Transformationen

Translation

Bei der Translation werden einfach zwei Werte für die Verschiebung in x- und y-Richtung angegeben, z.B.

#pic1 {
  transform: translate(100px, -50px);
}

Das sieht dann so aus:

Bild mit Translation

Rotation

Bei der Rotation wird ein Winkel angegeben. Die Drehung erfolgt im Uhrzeigersinn:

#pic1 {
  transform: rotate(10deg);
}

Das sieht dann so aus:

Bild mit Rotation

Skalierung

Bei der Skalierung werden zwei Werte für die Skalierung in x- und y-Richtung angegeben, z.B.

#pic1 {
  transform: scale(1.5, 2);
}

Das sieht dann so aus:

Bild mit Skalierung

Einfache Animationen mit Transitions

Über Pseudoelemente (insbes. "hover") können Sie jetzt Transitions (engl. Übergänge) definieren. Dazu definieren Sie im ursprünglichen Element den Ausgangszustand und welche Eigenschaft bei einer Transition in welcher Zeit (Animationsdauer) verändert werden kann:

#box {
  width: 100px;
  transition: width 2s;
}

In dem auslösenden Pseudoelement spezifizieren Sie dann den Zielzustand:

#box:hover {
   width: 300px;
}

Transition mit Breite

Sie können die Transition auch zusammen mit den mächtigen Transformationen verwenden. Sie beziehen sich dann auf die "Eigenschaft" transform. Auch hier geben Sie erst die zu animierende Eigenschaft an:

#box {
  transition: transform .5s;
}

Und im Zielelement den Zielzustand:

#box:hover {
  transform: rotate(10deg);
}

Transition mit Transformation

Sie können auch mehrere Eigenschaften gleichzeitig animieren, geben Sie einfach jeweils Eigenschaft und Animationsdauer mit Komma getrennt an:

#box {
    width: 100px;
    transition: width 1s, transform .5s;
}

Entsprechend brauchen Sie mehrere Zielangaben:

#box:hover {
    width:150px;
    transform: rotate(10deg);
}

Transition mit Breite und Transformation

6.4.2 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.3 Spezifizität

Spezifizität meint die Frage, in welcher Reihenfolge die CSS-Regeln ausgeführt werden, da die selbe Eigenschaft (z.B. font-size) ja von mehreren Regeln gesetzt werden kann.

Haben zwei Regeln exakt den gleichen Selektor, dann gilt die Regel, die weiter unten in der CSS-Datei steht.

p {
  color: blue;
  font-size: 20px;
}

p {
  font-size: 16px;
}

Hier gilt die font-size aus der zweiten Regel, weil sie später ausgeführt wird, und die Farbe aus der ersten Regel, weil sie von der zweiten Regel nicht überschrieben wird.

Ansonsten gilt: Die Eigenschaft der "spezifischeren" Regel wird gesetzt. Aber was heißt das genau?

Erstmal grob:

Konkret würde bei einem solchen Element

<p class="foo" id="fancy"> ... </p>

zuerst die Regel mit dem Elementselektor ("p"), dann die mit dem Klassenselektor (".foo") und zuletzt die mit dem ID-Selektor ("#fancy") ausgeführt werden.

Man kann sich also vorstellen, dass die Regeln in Kaskaden ausgeführt werden: zuerst alle Regeln der geringsten Spezifizität und dann weiter. Daher auch der Name CSS: Cascading Style Sheets.

Da Sie natürlich weit komplexere Selektoren haben können, wie "p .foo" oder "div #fancy > p", müssen Sie wissen, wie Spezifizität genau funktioniert.

Wir verweisen hier lediglich auf Quellen wie hier: CSS Kaskade

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