update 7th grade hypertext and link lessons

6 files changed, 152 insertions, 19 deletions

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
--- /dev/null
+++ b/Info/7/1/Verweise/img/code_view.png
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
--- /dev/null
+++ b/Info/7/1/Verweise/img/html_tags_mebis.png
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
--- /dev/null
+++ b/Info/7/1/Verweise/img/messestadt_riem_wikipedia.png
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 `<a href="Zieladresse">Beschreibung</a>`{.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.