Inhalte verlinken und einbetten

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.

Neben den Links gibt es in HTML ein Element, das die Einbettung aktiver Inhalte 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.

• 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.

• 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 können Sie sich über die verschiedenen Inhaltstypen informieren und diese ausprobieren.

Betten Sie das Beispiel 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.

Arbeitsauftrag

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. Der Abschnitt Mit protokoll-relativen URIs referenzieren ist dabei zu vernachlässigen.
• Lesen Sie die Seite Auf Seiten verlinken, 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 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!