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

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

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

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.

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.

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.

Ihre Arbeit überprüfen
Nachdem Sie das Kursmaterial erstellt haben, können Sie nun auf Ihrer Kursseite sehen, wie es aussieht.

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

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/