From ab35e84c0f1c9e170f09b4142ae47c840e1325e0 Mon Sep 17 00:00:00 2001 From: Florian Fischer Date: Wed, 1 Oct 2025 19:18:27 +0200 Subject: update 7th grade hypertext and link lessons --- Info/25_26/10/02/7b/name_correct.png | Bin 0 -> 18931 bytes Info/25_26/10/02/7b/name_wrong.png | Bin 0 -> 18132 bytes Info/25_26/10/02/7b/schedule.md | 38 +++++++++ Info/25_26/10/02/7b/slides.md | 30 +++++++ Info/25_26/10/02/7b/topic1 | 1 + Info/25_26/10/02/7b/topic2 | 1 + Info/7/1/Hypertext/img/wiki_start_italy.png | Bin 0 -> 19858 bytes Info/7/1/Hypertext/slides.md | 38 +++++++-- Info/7/1/Verweise/.gitignore | 1 + Info/7/1/Verweise/img/code_view.png | Bin 0 -> 21544 bytes Info/7/1/Verweise/img/html_tags_mebis.png | Bin 0 -> 9432 bytes .../7/1/Verweise/img/messestadt_riem_wikipedia.png | Bin 0 -> 119963 bytes Info/7/1/Verweise/slides-kompozer.md | 91 +++++++++++++++++++++ Info/7/1/Verweise/slides.md | 79 +++++++++++++----- 14 files changed, 254 insertions(+), 25 deletions(-) create mode 100644 Info/25_26/10/02/7b/name_correct.png create mode 100644 Info/25_26/10/02/7b/name_wrong.png create mode 100644 Info/25_26/10/02/7b/schedule.md create mode 100644 Info/25_26/10/02/7b/slides.md create mode 120000 Info/25_26/10/02/7b/topic1 create mode 120000 Info/25_26/10/02/7b/topic2 create mode 100644 Info/7/1/Hypertext/img/wiki_start_italy.png create mode 100644 Info/7/1/Verweise/.gitignore create mode 100644 Info/7/1/Verweise/img/code_view.png create mode 100644 Info/7/1/Verweise/img/html_tags_mebis.png create mode 100644 Info/7/1/Verweise/img/messestadt_riem_wikipedia.png create mode 100644 Info/7/1/Verweise/slides-kompozer.md diff --git a/Info/25_26/10/02/7b/name_correct.png b/Info/25_26/10/02/7b/name_correct.png new file mode 100644 index 00000000..d9fed243 Binary files /dev/null and b/Info/25_26/10/02/7b/name_correct.png differ diff --git a/Info/25_26/10/02/7b/name_wrong.png b/Info/25_26/10/02/7b/name_wrong.png new file mode 100644 index 00000000..0643a834 Binary files /dev/null and b/Info/25_26/10/02/7b/name_wrong.png differ diff --git a/Info/25_26/10/02/7b/schedule.md b/Info/25_26/10/02/7b/schedule.md new file mode 100644 index 00000000..d48d3e5e --- /dev/null +++ b/Info/25_26/10/02/7b/schedule.md @@ -0,0 +1,38 @@ +--- +lang: de +geometry: margin=2cm +--- +# Verweis und Hypertext + +* **Klasse**: 7b +* **Datum**: 02.10 + +## Lernziele + +## Verlaufplan + +--------------------------------------------------------------------------------------------------- +Zeit Phase Unterrichtsgeschehen Ziel Methode Medien +----- --------------- -------------------------------------------- ----------- ---------- --------- +5 Orga Aufmerksamkeitsregel + +10 Wdh HTML Mebis + +5 Sicherung Netz des Wissens Anpassen + +10 Uebung Netz des Wissens Steckbrief HTML-Code + +5 Erarbeitung Verweis + +7 Sicherung Wiki-Eintrag + +10 Uebung Link auf Nachbarn + +5 Erarbeitung Graph + +10 Erarbeitung Reiner und Pyro Graph Papier + +10 Sicherung Hefteintrag + +x Übung Italien +--------------------------------------------------------------------------------------------------- diff --git a/Info/25_26/10/02/7b/slides.md b/Info/25_26/10/02/7b/slides.md new file mode 100644 index 00000000..5468bd4c --- /dev/null +++ b/Info/25_26/10/02/7b/slides.md @@ -0,0 +1,30 @@ +## Steckbrief im Netz des Wissens + +Eure Seite sollte in eurem Netz des Wissens unter **eurem** Namen zu finden sein. + +Euer Name ist nicht *Name*. + +`\only<2>{`{=latex} + +![](name_wrong.png) + +`}`{=latex} + +`\only<3>{`{=latex} + +![](name_correct.png) + +`}`{=latex} + +## \faIcon{chalkboard-teacher} {.standout} + +Zuerst Zusehen! + +## Arbeitsauftrag - 5min + +1. Kopiere alle Informationen aus deinem Steckbrief. +2. Wechsle zurück in das \boldred{Zentrum} deines Netz des Wissens. +3. Ändere im Zentrum *Name* zu deinem Vornamen. +4. Speichere deine Änderungen und klicke auf deinen Namen. +5. Kopiere die Informationen in die neue Seite. +6. \boldred{Speichern}. diff --git a/Info/25_26/10/02/7b/topic1 b/Info/25_26/10/02/7b/topic1 new file mode 120000 index 00000000..f888bdaa --- /dev/null +++ b/Info/25_26/10/02/7b/topic1 @@ -0,0 +1 @@ +../../../../7/1/Verweise \ No newline at end of file diff --git a/Info/25_26/10/02/7b/topic2 b/Info/25_26/10/02/7b/topic2 new file mode 120000 index 00000000..f26de20d --- /dev/null +++ b/Info/25_26/10/02/7b/topic2 @@ -0,0 +1 @@ +../../../../7/1/Hypertext \ No newline at end of file diff --git a/Info/7/1/Hypertext/img/wiki_start_italy.png b/Info/7/1/Hypertext/img/wiki_start_italy.png new file mode 100644 index 00000000..a721ea24 Binary files /dev/null and b/Info/7/1/Hypertext/img/wiki_start_italy.png differ diff --git a/Info/7/1/Hypertext/slides.md b/Info/7/1/Hypertext/slides.md index 0543c188..b16a38d0 100644 --- a/Info/7/1/Hypertext/slides.md +++ b/Info/7/1/Hypertext/slides.md @@ -1,6 +1,7 @@ --- header-includes: | \newcommand{\link}[1]{\textcolor{blue}{\underline{\url{#1}}}} + \let\tightlist\relax --- ## Wiederholung @@ -106,13 +107,13 @@ Wie könnte man mehrere Webseiten mit Verweisen übersichtlich graphisch darstel ::: columns :::: {.column width=70%} -Auf den Webseiten von \link{https://schule.muhq.space/klasse7/} sind ebenfalls viele Verweise zu finden. +Auf den Webseiten \link{https://schule.muhq.space/klasse7/} sind ebenfalls viele Verweise zu finden. \vspace{0.3cm} Die nebenstehende Abbildung verdeutlicht, welche Webseiten miteinander verknüpft sind. Die Übersicht ist aber nicht fertig. \vspace{0.3cm} -**Übernehme die Abbildung in dein Heft (oder deinen Schnellhefter), rufe die Webseite auf und ergänze die fehlenden Teile.** +**Übernehme die Abbildung auf ein Blatt, rufe die Webseite auf und ergänze die fehlenden Teile.** :::: :::: {.column width=30%} @@ -139,6 +140,17 @@ Viele Hypertextdokumente bilden eine \boldred{Hypertextstruktur}. Diese können mithilfe von \boldred{Graphen} dargestellt werden. Ein Graph besteht aus \boldred{Knoten} und den Verbindungslinien dazwischen, den \boldred{Kanten}. +Beispiel: *\* + +## \faIcon{pencil-alt} Hausaufgabe + +`\begin{tcolorbox}[colframe=red]`{=latex} + +1. Mache ein Foto deines Graphens zu der Webseite von Pyro und Reiner. +2. Füge das Foto als Beispiel in deinen Hefteintrag ein. + +`\end{tcolorbox}`{=latex} + ## \faIcon{desktop} \faIcon{pencil-alt} Arbeitsauftrag - 10min Informiere dich auf \link{de.wikipedia.org/wiki/Italien} über alle Staaten, die an Italien grenzen und stelle die Beziehung in einem Graphen dar. @@ -150,12 +162,26 @@ Informiere dich auf \link{de.wikipedia.org/wiki/Italien} über alle Staaten, die ![](img/italien-hyperstruktur.png){.center} -## \faIcon{desktop} Arbeitsauftrag +## \faIcon{desktop} Arbeitsauftrag - Wissenswertes über Italien + +Übertrage den Graphen in eine **Hypertextstruktur**. -Übertrage den Graphen in eine Hypertextstruktur. -Erstelle dazu für jeden Staat ein HTML-Dokument mit **KompoZer** ![](logos/KompoZer.png){height=0.7cm}. +\vspace{0.75cm} + +::: {.columns align=center} +:::: {.column width=50%} +Erstelle dazu für jeden Staat ein HTML-Dokument im ![](logos/wiki.svg) **Netz des Wissens**. +Beginne mit Italien im **Zentrum** deines Netzes. Füge jeweils Informationen über die Flagge, Sprache, Einwohnerzahl und Hauptstadt ein. +:::: + +:::: {.column width=50%} +![](img/wiki_start_italy.png) +:::: +::: + +\vspace{0.75cm} -**[Ganz wichtig für die Verweise]{.underline}: Speichere all diese HTML-Dokumente im gleichen Ordner (bspw. deinem Laufwerk)!** +**[Ganz wichtig für die Verweise]{.underline}: Du kannst den Namen des Landes in ``[[]]`` eckigen Klammern als Verweis verwenden.** diff --git a/Info/7/1/Verweise/.gitignore b/Info/7/1/Verweise/.gitignore new file mode 100644 index 00000000..940e553f --- /dev/null +++ b/Info/7/1/Verweise/.gitignore @@ -0,0 +1 @@ +slides-kompozer.pdf diff --git a/Info/7/1/Verweise/img/code_view.png b/Info/7/1/Verweise/img/code_view.png new file mode 100644 index 00000000..564fcbb7 Binary files /dev/null and b/Info/7/1/Verweise/img/code_view.png differ diff --git a/Info/7/1/Verweise/img/html_tags_mebis.png b/Info/7/1/Verweise/img/html_tags_mebis.png new file mode 100644 index 00000000..a00c96f5 Binary files /dev/null and b/Info/7/1/Verweise/img/html_tags_mebis.png differ diff --git a/Info/7/1/Verweise/img/messestadt_riem_wikipedia.png b/Info/7/1/Verweise/img/messestadt_riem_wikipedia.png new file mode 100644 index 00000000..80a8ae93 Binary files /dev/null and b/Info/7/1/Verweise/img/messestadt_riem_wikipedia.png differ diff --git a/Info/7/1/Verweise/slides-kompozer.md b/Info/7/1/Verweise/slides-kompozer.md new file mode 100644 index 00000000..75cd0dc3 --- /dev/null +++ b/Info/7/1/Verweise/slides-kompozer.md @@ -0,0 +1,91 @@ +--- +author: Florian Fischer +theme: metropolis +aspectratio: 169 +--- + +## Wiederholung + +> - In welcher Sprache wurden nochmal Webseiten geschrieben? +> - An welche Bestandteile des Quelltexts kannst du Dich erinnern? + +## Wiederholung - HTML Struktur + +![](img/html_human.png){.center height=90%} + +## + +![](img/edge_surf.png){.center width=80%} + +## Verweis und Verweisziel + +::: columns +:::: {.column width=50%} +### Verweis + +Das **Gymnasium Münchberg** ist eine weiterführende Schule in \underline{\textcolor{blue}{Münchberg}} und bietet den Erwerb des Abiturs in einem mathematisch-naturwissenschaftlichen und einem neusprachlichen Zweig.  + +:::: + +:::: {.column width=50%} +### Verweisziel + +![](img/muenchberg_wikipedia.png) +:::: +::: + +## \faIcon{pencil-alt} Die Klasse VERWEIS + +\begin{center} +\begin{tikzpicture}[font=\Large] +\begin{class}[text width=4.5cm]{VERWEIS}{-1,0} +\attribute{Beschreibung} +\attribute{Zieladresse} +\operation{öffneZieldokument} +\end{class} + +\begin{object}[text width=6cm]{v1}{5,0} +\instanceOf{VERWEIS} +\only<1> { +\attribute{\phantom{"Bg}} +\attribute{\phantom{"Z}} +} +\only<2-> { +\attribute{Beschreibung="Münchberg"} +} +\only<2> { +\attribute{\phantom{"Z}} +} +\only<3-> { +\attribute{Zieladresse="..."} +} +\end{object} +\end{tikzpicture} +\end{center} + + +## \faIcon{pencil-alt} Hefteintrag {.standout} + +\textbf{\huge 1.2 Verweis} + +\pause + +Unter einem \textcolor{red}{Verweis} versteht man einen Hinweis auf ein anderes Dokument, eine Grafik oder eine Textstelle. + +\pause +Wo diese zu finden ist muss in der \textcolor{red}{Zieladresse} angegeben werden. + +## \faIcon{desktop} Arbeitsauftrag - 5 min + +Öffne deinen Steckbrief von letzter Stunde mit dem Programm **KompoZer** ![](logos/KompoZer.png){height=0.7cm}. + +\underline{Zur Erinnerung:} +Der Steckbrief sollte mindestens deinen Namen, dein Lieblingsessen, Informationen über Hobbys und eine kurze Info über deinen Sitznachbarn enthalten. + +Speichere deine HTML-Datei anschließend im **Ablage-Laufwerk** im Ordner **7B/fis/Steckbriefe**. + +## \faIcon{desktop} Arbeitsauftrag +Verlinke auf deinem Steckbrief die Namen deiner Sitznachbarn mit deren Steckbriefen. + +\underline{Für Schnelle:} +Verlinke zusätzlich deine Hobbys mit den Seiten deiner Lieblingsvereine oder dein Lieblingsessen mit einem Rezept aus dem Internet. diff --git a/Info/7/1/Verweise/slides.md b/Info/7/1/Verweise/slides.md index 75cd0dc3..f6437f15 100644 --- a/Info/7/1/Verweise/slides.md +++ b/Info/7/1/Verweise/slides.md @@ -6,12 +6,48 @@ aspectratio: 169 ## Wiederholung -> - In welcher Sprache wurden nochmal Webseiten geschrieben? -> - An welche Bestandteile des Quelltexts kannst du Dich erinnern? - -## Wiederholung - HTML Struktur +::: {.columns align=center} +:::: {.column width=50%} +In welcher Sprache wurden nochmal Webseiten geschrieben? +:::: +:::: {.column width=50%} +\pause ![](img/html_human.png){.center height=90%} +:::: +::: + +## Wiederholung - HTML + +An welche HTML-Elemente (*tags* \faIcon{tag}) kannst du dich erinnern? + +### Mebis Quiz + +![](img/html_tags_mebis.png) + +## \faIcon{desktop} Arbeitsauftrag - 5 min + +::: {.columns align=center} +:::: {.column width=50%} +Öffne deinen Steckbrief von letzter Stunde im deinem ![](logos/wiki.svg) **Netz des Wissens** in der _Quellcode_-Ansicht. +:::: + +:::: {.column width=50%} +\vspace{-0.4cm} +![](img/code_view.png){.center} +:::: +::: + +\underline{Zur Erinnerung:} +Der Steckbrief sollte mindestens deinen Namen, dein Lieblingsessen, Informationen über Hobbys und eine kurze Info über deine Sitznachbar*in enthalten. + +\vspace{0.5cm} + +`\begin{tcolorbox}[colframe=red]`{=latex} + +Vergiss nicht deine Änderungen zu speichern. + +`\end{tcolorbox}`{=latex} ## @@ -20,17 +56,17 @@ aspectratio: 169 ## Verweis und Verweisziel ::: columns -:::: {.column width=50%} +:::: {.column width=40%} ### Verweis -Das **Gymnasium Münchberg** ist eine weiterführende Schule in \underline{\textcolor{blue}{Münchberg}} und bietet den Erwerb des Abiturs in einem mathematisch-naturwissenschaftlichen und einem neusprachlichen Zweig.  +Das **Gymnasium München Riem** ist eine weiterführende Schule im Stadtviertel \underline{\textcolor{blue}{Messestadt Riem}} und bietet den Erwerb des Abiturs in einem mathematisch-naturwissenschaftlichen und einem neusprachlichen Zweig.  :::: -:::: {.column width=50%} +:::: {.column width=60%} ### Verweisziel -![](img/muenchberg_wikipedia.png) +![](img/messestadt_riem_wikipedia.png) :::: ::: @@ -38,20 +74,20 @@ Das **Gymnasium Münchberg** ist eine weiterführende Schule in \underline{\text \begin{center} \begin{tikzpicture}[font=\Large] -\begin{class}[text width=4.5cm]{VERWEIS}{-1,0} +\begin{class}[text width=4.5cm]{VERWEIS}{-2,0} \attribute{Beschreibung} \attribute{Zieladresse} -\operation{öffneZieldokument} +\operation{öffneZieldokument()} \end{class} -\begin{object}[text width=6cm]{v1}{5,0} +\begin{object}[text width=7.5cm]{v1}{5.5,0} \instanceOf{VERWEIS} \only<1> { \attribute{\phantom{"Bg}} \attribute{\phantom{"Z}} } \only<2-> { -\attribute{Beschreibung="Münchberg"} +\attribute{Beschreibung="Messestadt Riem"} } \only<2> { \attribute{\phantom{"Z}} @@ -75,17 +111,22 @@ Unter einem \textcolor{red}{Verweis} versteht man einen Hinweis auf ein anderes \pause Wo diese zu finden ist muss in der \textcolor{red}{Zieladresse} angegeben werden. -## \faIcon{desktop} Arbeitsauftrag - 5 min +## Links einfügen -Öffne deinen Steckbrief von letzter Stunde mit dem Programm **KompoZer** ![](logos/KompoZer.png){height=0.7cm}. +![](../HTML/img/editor.png) -\underline{Zur Erinnerung:} -Der Steckbrief sollte mindestens deinen Namen, dein Lieblingsessen, Informationen über Hobbys und eine kurze Info über deinen Sitznachbarn enthalten. +\begin{tikzpicture}[overlay, remember picture] +\node[red, minimum width=1cm, minimum height=0.5cm] at (5cm, 1cm) {}; +\end{tikzpicture} + +Mit deinem \boldred{WYSIWIG} Editor kannst du Links einfügen. + +### Richtig programmieren -Speichere deine HTML-Datei anschließend im **Ablage-Laufwerk** im Ordner **7B/fis/Steckbriefe**. +In der _Quellcode_-Ansicht kannst du Verweise als `Beschreibung`{.html} anlegen. -## \faIcon{desktop} Arbeitsauftrag -Verlinke auf deinem Steckbrief die Namen deiner Sitznachbarn mit deren Steckbriefen. +## \faIcon{desktop} Arbeitsauftrag - 10min +Verlinke \faIcon{link} in deinem Steckbrief die Namen deiner Sitznachbarn mit deren Steckbriefen. \underline{Für Schnelle:} Verlinke zusätzlich deine Hobbys mit den Seiten deiner Lieblingsvereine oder dein Lieblingsessen mit einem Rezept aus dem Internet. -- cgit v1.2.3