verlinken-und-einbetten.md 5.73 KB
Newer Older
Axel Dürkop's avatar
Axel Dürkop committed
1 2
---
title: 'Inhalte verlinken und einbetten'
Axel Dürkop's avatar
Add 02  
Axel Dürkop committed
3 4
date: 2022-10-26T08:50:13.000Z
draft: true
Axel Dürkop's avatar
Axel Dürkop committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
type: book
weight: 300
LastModifierDisplayName: Axel Dürkop
LastModifierEmail: axel.duerkop@tuhh.de
---

## Inhalte verlinken und einbetten

Das WWW wäre nicht das weltweite Netz, wenn es die **Hyperlinks** nicht gäbe. Mit ihnen können die Inhalte der eigenen Website verknüpft werden, bspw. um Unterseiten mit der Homepage zu verlinken. Aber auch Ressourcen, die auf ganz anderen Webservern liegen, können zu einem Netz von Inhalten verwoben werden.

{{< figure src="../img/verlinken/pietro-jeng-n6B49lTx7NM-unsplash.jpg" title="Foto \"Play with UV light\" von Pietro Jeng auf Unsplash" >}}

Neben den Links gibt es in HTML ein Element, das [die **Einbettung aktiver Inhalte**](https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Aktive_Inhalte_einbinden) ermöglicht. Der Unterschied ist hier also, dass nicht *verlinkt*, sondern *eingebettet* wird. Mit `iframe` können bspw. Videos und Audiodateien Podcastepisoden in der eigenen Website dargestellt werden. 

## Geplante Inhalte der heutigen Sitzung

- Setzen von Links zu eigenen und zu fremden Webseiten
- Einbetten von Videos und H5P-Elementen in die eigene Website

---

## Aufgabenstellung in der Sitzung

Führen Sie die folgenden Aufgaben in Ihrer eigenen Website durch. Lassen Sie sich Zeit, es gibt niemanden, der Sie drängt!

### Links zum Warmwerden

Setzen Sie exemplarisch einen Link im Footer Ihrer Website zum [Datenschutzgenerator](https://datenschutz-generator.de/).

- Die Seite soll sich in einem neuen Tab öffnen. Wer weiß, was dafür getan werden muss, darf das gern im Chat posten.
- Merken Sie sich die Seite des Datenschutzgenerators, sie ist hilfreich, wenn Sie eine Seite wirklich online stellen wollen. Es gibt auch noch andere Anbieter, die beim Erstellen von Impressum und Datenschutzerklärung behilflich sind.

**Laden Sie Ihr Ergebnis in GitLab hoch, wenn Sie fertig sind.**

### Videos einbetten

Betten Sie ein Video in Ihre Website ein!

- Recherchieren Sie ein Video, das thematisch zu Ihrer Website oder Ihrer Projektidee passt.
- Betten Sie das Video mit `iframe` in eine Seite Ihrer Website ein. Die Videoplattformen stellen einen entsprechenden HTML-Schnipsel meist über die Funktion *Teilen* zur Verfügung.
- Nutzen Sie die Chrome Developer Tools, um die Darstellung auf mobilen Endgeräten zu simulieren.

Oft ist die Darstellung von IFrames nicht gleich responsiv und sieht daher auf dem Handy ungut aus. Um diesen Umstand zu verbessern, gibt es einen kostenlosen Dienst, den Sie jetzt ausprobieren sollen:

Erstellen Sie einen HTML/CSS-Schnipsel für Ihr Video auf der Seite [Embed Responsively](https://embedresponsively.com/).

- Fügen Sie den Schnipsel in Ihre Seite ein.
- Überprüfen Sie wieder die Darstellung auf mobilen Endgeräten.

**Laden Sie Ihr Ergebnis in GitLab hoch, wenn Sie fertig sind.**

### H5P einbetten

H5P ist eine Lösung, um interaktive Lerninhalte zu erstellen. Auf [der Homepage des Projekts](https://h5p.org/) können Sie sich über die verschiedenen Inhaltstypen informieren und diese ausprobieren.

Betten Sie das Beispiel [Interactive Video](https://h5p.org/interactive-video) mit `iframe` in Ihre Seite ein. Unter dem Video befindet sich ein sehr unscheinbarer Link *Embed*.

**Laden Sie Ihr Ergebnis in GitLab hoch, wenn Sie fertig sind.**

---

Axel Dürkop's avatar
Axel Dürkop committed
66
## Arbeitsauftrag
Axel Dürkop's avatar
Axel Dürkop committed
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

Der heutige Arbeitsauftrag dient dazu, das Wissen über Links und IFrames zu vertiefen und die eigene Projektidee mit diesem Wissen weiterzutreiben. Führen Sie die Arbeitsaufträge an Ihren existierenden Webseitenkonstrukten durch.

### Ziele

- Sie kennen die Unterschiede relativer und absoluter Pfadangaben für URIs und haben damit experimentiert.
- Sie kennen das Prinzip der Einbettung aktiver Inhalte über `iframe`.
- Sie haben über Potenziale und Risiken fremder Inhalte auf Webseiten nachgedacht.

### Teilaufgaben

#### Wissen vertiefen

- Lesen Sie die Seite [Referenzieren in HTML](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Referenzieren_in_HTML). Der Abschnitt [Mit protokoll-relativen URIs referenzieren](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Referenzieren_in_HTML#Mit_protokoll-relativen_URIs_referenzieren) ist dabei zu vernachlässigen.
- Lesen Sie die Seite [Auf Seiten verlinken](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Einstieg/Kapitel5), um den Zusammenhang von Links auf der eigenen Website besser zu verstehen.

#### Projektarbeit

- Nachdem Sie nun ein wenig besser wissen, was es bedeutet HTML/CSS zu lernen und zu schreiben, passen Sie ggf. Ihre **Projektskizze** an, sodass die Ziele für ein bzw. zwei Semester realistisch sind. Achten Sie darauf, dass Sie für sich am Ende einen Erfolg verbuchen können.
- Machen Sie eine **Skizze der [Sitemap](https://de.wikipedia.org/wiki/Sitemap)** Ihrer Projektseite und posten Sie diese in Ihrem Projektkanal.
- Erstellen Sie die erforderlichen **HTML-Unterseiten** und verlinken Sie diese untereinander.
- Fügen Sie thematisch geeignete aktive Inhalte (Videos, Podcasts u.a.) in Ihre Projektseite ein.
- Erstellen Sie eine ungeordnete Liste mit mindestens drei Links zu anderen Webseiten. Diese Seiten sollen sich in einem neuen Tab öffnen und ein Konstrukt aus `<ul>`-, `<li>`- und `<a>`-Elementen sein, wie bei einer Navigation. Wenn Sie Lust und Zeit haben, gestalten Sie die Liste mit CSS.

#### Nachdenken und abwägen

- Frage "Potenziale": Was sind die Vor- und Nachteile des Einbettens und Verlinkens fremder Inhalte auf der eigenen Seite? Posten Sie Ihre Überlegungen im Chat mit dem Hashtag `#Potenziale` und diskutieren Sie!
- Frage "Rechtliches": Welche rechtlichen Aspekte könnten beim Einbetten und Verlinken fremder Inhalte eine Rolle spielen? Posten Sie Ihre Überlegungen im Chat mit dem Hashtag `#Rechtliches` und diskutieren Sie!