schriften-und-bilder.md 10.1 KB
Newer Older
Axel Dürkop's avatar
Axel Dürkop committed
1 2 3 4 5 6 7 8 9 10 11
---
title: 'Schriften und Bilder'
date: 2020-05-24T08:50:13.000Z
draft: false
type: book
weight: 400
LastModifierDisplayName: Axel Dürkop
LastModifierEmail: axel.duerkop@tuhh.de
---

 
Axel Dürkop's avatar
Axel Dürkop committed
12
## Typografie im Netz
Axel Dürkop's avatar
Axel Dürkop committed
13

Axel Dürkop's avatar
Axel Dürkop committed
14
Mit gut gewählten Schriften kann eine Website gestalterisch sehr gewinnen. Typografie im Netz ist daher zu einem eigenen Bereich geworden, besonders seit das mobile Web in den Vordergrund gerückt ist. [Lesen Sie diesen einführenden Beitrag zu Typografie im Netz](https://www.selbstaendig-im-netz.de/webdesign/die-wichtigsten-aspekte-fuer-eine-gelungene-typografie-digitale-schriftsetzung-teil-i/).
Axel Dürkop's avatar
Axel Dürkop committed
15 16 17 18 19 20 21 22 23 24 25 26 27

{{< figure src="../img/schriften-und-bilder/diomari-madulara-FFZjSpUwc_I-unsplash.jpg" title="Foto von Diomari Madulara on Unsplash" >}}

Mit der CSS-Eigenschaft `font-family` können Schriftfamilien angesprochen werden, bspw. so:

```css
body {
    font-family: 'Chelsea Market';
}
```

Gut möglich, dass auf dem eigenen Rechner, auf dem die Website entwickelt wird, auch gleich die gewünschte Veränderung zu sehen ist. Ein häufiges Missverständnis kann hier allerdings auftreten: 

Axel Dürkop's avatar
Axel Dürkop committed
28
**Es kann sein, dass die CSS-Anweisung funktioniert, weil die entsprechende Schriftart auf dem eigenen Rechner installiert ist oder im Cache des Browsers liegt. Das heißt aber noch lange nicht, dass sie auch auf den Rechnern der Nutzer\*innen vorliegt, die die Website später aufrufen.**
Axel Dürkop's avatar
Axel Dürkop committed
29 30 31 32 33 34 35

Damit die gewünschte Schriftart auch bei anderen zu sehen ist, müssen diese sie herunterladen können. Das geht z.B. wie folgt:

```html
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet">
```

Axel Dürkop's avatar
Axel Dürkop committed
36
In diesem Beispiel wird die Schriftart von [Google Fonts](https://fonts.google.com/specimen/Chelsea+Market?sidebar.open&selection.family=Chelsea+Market) geladen, wenn die Webseite aufgerufen wird. Anschließend kann sie wie oben beschrieben im CSS angesprochen werden -- egal, ob sie auf dem Rechner *installiert* ist oder nicht. Die zugehörige Endanwenderlizenz (weiter unten auf der Seite) regelt, inwieweit die Verwendung rechtlich erlaubt ist.
Axel Dürkop's avatar
Axel Dürkop committed
37

Axel Dürkop's avatar
Axel Dürkop committed
38
## Schriften von anderem Server einbinden 
Axel Dürkop's avatar
Axel Dürkop committed
39

Axel Dürkop's avatar
Axel Dürkop committed
40
Einfach, oder? Leider nicht mehr datenschutzkonform, weil bei jedem Aufruf *Ihrer* Website bei Google auch Daten landen, nämlich durch den Abruf der Schriftdatei. Daher ist dringend empfohlen, Google-Schriften zusammen mit Ihrer Website auszuliefern. Konkret heißt das, dass Sie die Fontdateien von Google herunterladen und in das Verzeichnis Ihres HTML-Konstrukts legen.
Axel Dürkop's avatar
Axel Dürkop committed
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

### Schriften auswählen

Suchen Sie auf der Seite [Google Fonts](https://fonts.google.com/) **eine [Serifen-Schrift](https://de.wikipedia.org/wiki/Serife)** aus sowie **eine serifenlose**. Entsprechende Filter können auf der Google-Seite unter *Categories* eingestellt werden.

{{< figure src="../img/schriften-und-bilder/gif-select-fonts.gif" title="Auswahl von Schriftarten auf der Seite Google Fonts" >}}

#### Erläuterung zur Animation

- Um eine Schrift auszuwählen, klicken Sie auf deren Kachel; es wird Ihnen die Detailansicht angezeigt. Rechts neben einem [Schriftschnitt](https://de.wikipedia.org/wiki/Schriftschnitt) der Schriftart klicken Sie dann auf *Select this style*. Die Schrift wird damit quasi einem "Warenkorb" zugeordnet (Symbol ganz rechts oben). Später können Sie diese Schriftschnitte per CSS ansprechen, z.B. mit `font-weight: 500`.
- Über den Link *Browse fonts* können Sie weitere Schriften nach diesem Vorgang auswählen.  
- Im Tab *Embed* wird ihnen das Markup angezeigt, mit dem Sie die gewählten Schriften in Ihre Website einbetten können.
- Darunter steht außerdem, wie Sie die Schriften im CSS ansprechen.

### Schriften auf der eigenen Website verwenden

Nutzen Sie die ausgesuchten Schriften in Ihrer Website.

- Verwenden Sie die **serifenlose Schrift** als generelle Schrift auf Ihrer Website (`body`).
- Verwenden Sie die **Serifen-Schrift** für alle **Überschriften** (`h1`, `h2` usw.).

Axel Dürkop's avatar
Axel Dürkop committed
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
### Schriften von Google datenschutzkonform einbinden

Nun lädt Ihr Browser Fonts von Google-Servern. Dabei werden *dort* Informationen über alle Besucher\*innen *Ihrer* Website gesammelt. [Das ist gemäß der DSGVO nicht mehr zulässig](https://www.mittwald.de/blog/mittwald/howtos/dem-datenschutz-zuliebe-wie-ihr-google-fonts-lokal-in-eure-webseiten-einbindet), sodass es andere Wege braucht, um die Google Fonts zu verwenden.

{{% callout note %}}
Leider ist bewährte Tool *google-webfonts-helper* nicht mehr online. Es generiert einen teils umfangreichen CSS-Schnipsel, den Sie an den Anfang Ihrer CSS-Datei einfügen, um Google Fonts lokal zu verwenden. Darin wird auf *Dateien* verwiesen, die ab jetzt in einem neuen Ordner `fonts` Ihrem Verzeichnis erwartet werden.
{{% /callout %}}

1. Erstellen Sie zunächst ein Verzeichnis `fonts` im gleichen Ordner wie Ihr HTML-Konstrukt.
1. Laden Sie alle Schriftdateien herunter, und fügen Sie sie in das `fonts`-Verzeichnis ein. Das Ergebnis könnte wie folgt aussehen:  
    ```bash
    .
    ├── fonts
    │   ├── merriweather-v21-latin-300.eot
    │   ├── merriweather-v21-latin-300italic.eot
    │   ├── merriweather-v21-latin-300italic.svg
    │   ├── merriweather-v21-latin-300italic.ttf
    │   ├── merriweather-v21-latin-300italic.woff
    │   ├── merriweather-v21-latin-300italic.woff2
    │   ├── merriweather-v21-latin-300.svg
    │   ├── merriweather-v21-latin-300.ttf
    │   ├── merriweather-v21-latin-300.woff
    │   ├── merriweather-v21-latin-300.woff2
    │   ├── merriweather-v21-latin-regular.eot
    │   ├── merriweather-v21-latin-regular.svg
    │   ├── merriweather-v21-latin-regular.ttf
    │   ├── merriweather-v21-latin-regular.woff
    │   └── merriweather-v21-latin-regular.woff2
    ├── index.html
    └── style.css
    ```

1. Kopieren Sie nun den HTML-Schnipsel zur Einbettung der Schriften vom Google-Server in Ihren Editor, z. B.  
   `<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap" rel="stylesheet">`
1. Öffnen Sie nun die blanke URL im Browser. Sie sollten eine CSS-Datei angezeigt bekommen, deren Inhalt Sie in Ihre CSS-Datei kopieren. Passen Sie anschließend den Pfad der `src`-Eigenschaft an, sodass er auf Ihren lokalen Ordner `fonts` passt.
2. Lesen Sie zur CSS-Eigenschaft `@font-face` [im Self-HTML-Wiki](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face) nach.

## Bilder einbinden
Axel Dürkop's avatar
Axel Dürkop committed
100

Axel Dürkop's avatar
Axel Dürkop committed
101
Das [Einbinden von Bildern](https://www.html-seminar.de/grafiken.htm) in Webseiten funktioniert mit dem `img`-Element sehr einfach. Im `src`-Attribut wird der Speicherort des Bildes angegeben, im `alt`-Attribut ein alternativer Text, der angezeigt wird, wenn das Bild nicht geladen werden kann. 
Axel Dürkop's avatar
Axel Dürkop committed
102

Axel Dürkop's avatar
Axel Dürkop committed
103
Oft sind Bilder auf Webseiten mit weiteren Informationen verknüpft, einer Urheber_innen- und Lizenzangabe, einer Bildunterschrift oder auch einem beschreibenden Text wie bspw. [in einem Webshop](https://www.ebay.de/sch/i.html?_from=R40&_trksid=p2380057.m570.l1313.TR5.TRC0.A0.H0.Xhtml5+buch.TRS0&_nkw=html5+buch&_sacat=0) oder [einer Seite für freie und offene Bildungsmaterialien](https://open-educational-resources.de/materialien/contentbuffet/).
Axel Dürkop's avatar
Axel Dürkop committed
104

Axel Dürkop's avatar
Axel Dürkop committed
105
{{< figure src="../img/schriften-und-bilder/screenshot-oer-content-buffet.png" title="Screenshot der Materialsuche im OER-Contentbuffet" >}}
Axel Dürkop's avatar
Axel Dürkop committed
106

Axel Dürkop's avatar
Axel Dürkop committed
107
#### Bild und Bildunterschrift
Axel Dürkop's avatar
Axel Dürkop committed
108

Axel Dürkop's avatar
Axel Dürkop committed
109
Da Bilder in Webseiten so wichtig sind, gibt es viele verschiedene Wege, um diese zu gestalten, die Sie im Arbeitsauftrag noch näher kennenlernen werden. Eine Neuerung von HTML5 ist die Kombination von `figure` und `figcaption`, um Bild und Bildunterschrift zusammen darzustellen:
Axel Dürkop's avatar
Axel Dürkop committed
110

Axel Dürkop's avatar
Axel Dürkop committed
111 112 113 114 115 116
```html
<figure>
  <img src="hund.jpg" width="800" height="600" alt="Bild mit Hund" />
  <figcaption>Ein dicker Hund</figcaption>
</figure>
```
Axel Dürkop's avatar
Axel Dürkop committed
117 118 119 120 121 122 123 124 125

### Bilder mit Bildunterschrift versehen

- Prüfen Sie, ob es auf Ihrer Website Bilder gibt, die um eine Bildunterschrift erweitert werden können. Wenn nicht, binden Sie ein neues Bild ein, das Sie mit einer Bildunterschrift versehen. Folgen Sie dabei [einem einfachen Tutorial](https://t3n.de/news/bilder-bildunterschriften-html5-364185/).
- Schreiben Sie eine CSS-Anweisung, die der `figcaption` die Serifen-Schrift zuordnet.
- Sorgen Sie mit CSS dafür, dass die `figcaption` kursiv und zwei Punkte kleiner als die Schriftgröße des `p`-Elements dargestellt wird.

Beurteilen Sie: Welche Schriftart eignet sich für Ihre Bildunterschriften besser, die Schrift mit oder die ohne Serifen?

Axel Dürkop's avatar
Axel Dürkop committed
126
### Bilder einbinden und formatieren
Axel Dürkop's avatar
Axel Dürkop committed
127 128 129 130 131

- Lesen Sie, welche Überlegungen zu [Formaten und Größen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen) von Bildern angestellt werden sollten.
- Lesen Sie, wie Sie [Bilder mit CSS formatieren](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Bilder_mit_CSS_formatieren) können. Klicken Sie auf die "Vorschau"-Tabs in den Beispielen, um zu sehen, wie Markup und CSS umgesetzt werden.
- Lesen Sie, wie [responsive Bildgestaltung](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/responsive_Bilder) für verschiedene Endgeräte und Viewportgrößen funktionieren kann.

Axel Dürkop's avatar
Axel Dürkop committed
132
### Bilder mit Flexbox layouten
Axel Dürkop's avatar
Axel Dürkop committed
133 134 135 136 137 138 139 140 141 142 143

Beschäftigen Sie sich zunächst noch einmal mit dem Konzept von Flexbox. Nutzen Sie dafür [das anschauliche Tutorial](https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/) mit Beispielen. Empfehlung: Legen Sie für die Arbeit mit dem Tutorial eine neue `index.html` und eine eigene `style.css` an. Übertragen Sie anschließend das Gelernte in Ihren Projektkontext! Lesen Sie nicht nur, sondern arbeiten Sie hands-on die Beispiele durch.

**Welche Teile Ihrer Projekt-Website lassen sich als Kacheln darstellen? Macht es Sinn, eine Bilder- oder Videogalerie auf diese Weise anzuzeigen?**

Spielen Sie mit dem neuen und vertieften Wissen herum. Nehmen Sie sich nicht zuviel vor. Die beiden folgenden Abbildungen mögen als Anregung dienen.

{{< figure src="../img/schriften-und-bilder/screenshot-galery-desktop.png" title="Desktop-Ansicht" >}}

{{< figure class="img-small" src="../img/schriften-und-bilder/screenshot-galery-mobile.png" title="Mobile Ansicht" >}}