Skip to content

Webseiten mit Hilfe von iFrames hinzufügen

Embedding web pages with the help of iFrames

Ziele:

  • Eine Webseite im ATTO-Editor über ein iFrame einbetten

  • Code-Fragment für die Einbettung kennen-lernen

Schwierigkeit: einfach
Gültig ab Moodle Version 4.2 

Goals:

  • Embed a web site using the ATTO-Editor with the help of iFrames and HTML

  • Get to know the code-fragments necessary for the embedding process

 

Difficulty: easy
Valid from Moodle version 4.2

6 Schritte:
InformationQuellcode-Modus aktivierenHTML Quellcode einfügenLernmaterial-Erstellung abschließenIhre Arbeit überprüfenWeitere Informationen

Information

Um eine Webseite in einem Kurs zur Verfügung zu stellen, wird die Verwendung des Arbeitsmaterials „Text- und Mediafeld” empfohlen.

In der vorliegenden Anleitung wird gezeigt, wie eine Webseite über den HTML-Modus des ATTO-Editors an einer beliebigen Stelle eingebettet werden kann, z.B. im Beschreibungsfeld einer Aufgabe, etc.

Die Einbettung kann überall dort erfolgen, wo ein ATTO-Editor zur Verfügung steht. Die Vorgehensweise wird hier am Beispiel des Arbeitsmaterials
„Text- und Medienfeld” gezeigt.

Information

In order to make a web page available as a post/part of learning material in a course, it is recommended to use the content type "Text and Media area".


This guide shows you how to embed a web page anywhere in a course via the HTML mode of the ATTO editor e.g. in the description field of a task, etc.


Embedding can be done anywhere where an ATTO editor is available. The procedure is shown here using the example of the course material
"Text and Media area".

Quellcode-Modus aktivieren

In den Einstellungen eines Text- und Mediafeldes klappen Sie im ersten Schritt den "Wekzeuge" Feld auf und aktivieren Sie den Quellcode-Modus.

Die Option

Activate the "Source code" view

Using the drop down menu "Tools" select "Source code" in the Text and Media area.

Choose the

HTML Quellcode einfügen

Geben Sie nun das gewünschte HTML iframe-Codefragment in das Textfeld ein und passen Sie die Darstellung gegebenenfalls mit dem "style"-Element des CSS Codes an.
Berücksichtigen Sie bei Ihrem Code-Fragement die Barrierefreiheit
(Titel, Alt-Texte etc.) und beachten Sie, dass mögliche Spezialformatierungen, die Moodle nicht unterstützt bzw. darstellen kann, nicht angezeigt werden. Es ist empfehlenswert, Ihren HTML Code mit unterschiedlichen (mobilen) Endgeräten zu überprüfen. Klicken Sie abschließend auf „Speichern”.

Nach dem Einfügen von dem Quellcode in dem richtigen Format, bitte ganz unten rechts auf

Input HTML source code

Now enter the desired HTML iFrame source code in the text field and adjust as desired.
Specify the display with the "style" element of the CSS code.
Please keep accessibility in mind when writing your code (link titles, alternative texts, etc.)
and note that possible special formatting that Moodle does not support will not be displayed in the final version of the course material.
It is recommended to test out your HTML code on different (mobile) devices.
Lastly, click on the "Save" button.

After inputting the necessary HTML code correctly, please save the changes by clicking on the

Lernmaterial-Erstellung abschließen

Nachdem Sie Ihren HTML-Code erfolgreich bearbeitet und gespeichert haben, können Sie mit allen anderen erforderlichen Änderungen an Ihrem Kursmaterial fortfahren.
Um das Material in Ihrem Kurs zu speichern und zu veröffentlichen, klicken Sie bitte auf die Schaltfläche "Speichern und zum Kurs" in der unteren Mitte der Seite.

Nachdem alle gewünschte Formatierungen und Einstellungen gesetzt sind, bitte ganz unten links auf dem

Complete the course material creation

After successfully editing your HTML code and saving it, you can proceed with any other necessary edits to your course material.
To save the material in your course, please click on the “Save and return to course” button in the lower center of the screen.

After editing all the necessary components, please save the changes by clicking on the

Ihre Arbeit überprüfen

Nachdem Sie das Kursmaterial erstellt haben, können Sie nun auf Ihrer Kursseite sehen, wie es aussieht.

Bitte den Ansicht des Content-Feldes auf der Kursseite überprüfen.

Admire your work

After creating the course material you can now see how it looks on your course page.

In-course view of the newly embedded Web site link.

Weitere Informationen

 

Bei Fragen zur Barrierefreiheit wenden Sie sich bitte an die entsprechende Supporteinrichtung Ihrer Hochschule.

Dieses Werk steht unter einer Creative Commons Attribution-ShareAlike 4.0 Lizenz:
https://creativecommons.org/licenses/by-sa/4.0/

Other information

If you have any questions regarding accessibility, please contact the appropriate support facility at your university.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 license:
https://creativecommons.org/licenses/by-sa/4.0/