switch HTML slides to mebis wiki

5 files changed, 128 insertions, 14 deletions

diff --git a/Info/7/1/HTML/.gitignore b/Info/7/1/HTML/.gitignore
new file mode 100644
index 00000000..940e553f
--- /dev/null
+++ b/Info/7/1/HTML/.gitignore
@@ -0,0 +1 @@
+slides-kompozer.pdf
diff --git a/Info/7/1/HTML/img/editor.png b/Info/7/1/HTML/img/editor.png
new file mode 100644
index 00000000..338200e4
--- /dev/null
+++ b/Info/7/1/HTML/img/editor.png
diff --git a/Info/7/1/HTML/img/netz_des_wissens_zentrum.png b/Info/7/1/HTML/img/netz_des_wissens_zentrum.png
new file mode 100644
index 00000000..b4e86acd
--- /dev/null
+++ b/Info/7/1/HTML/img/netz_des_wissens_zentrum.png
diff --git a/Info/7/1/HTML/slides-kompozer.md b/Info/7/1/HTML/slides-kompozer.md
new file mode 100644
index 00000000..917d8831
--- /dev/null
+++ b/Info/7/1/HTML/slides-kompozer.md
@@ -0,0 +1,110 @@
+---
+header-includes: |
+    \usepackage{tikz}
+    \usetikzlibrary{calc}
+    \usetikzlibrary{positioning}
+    \usepackage{fontawesome5}
+    \let\tightlist\relax
+---
+
+
+## Wiederholung
+
+\Large
+> - Was war nochmal das **Internet** überhaupt?
+> - Wofür ist es gut?
+> - Wie werden **Webseiten** erstellt?
+> - Mit was für **Programmen** werden sie angezeigt?
+
+## \faIcon{desktop} Seitenquelltext
+\Large
+
+Öffne die Webseite
+\vspace{2cm}
+
+\centering
+
+[https://schule.muhq.space/klasse7](https://schule.muhq.space/klasse7)
+
+## \faIcon{desktop} Seitenquelltext
+![](img/source_code.png){height=70%}
+\large
+Versuche die Bedeutung möglichst vieler Bestandteile des oben gezeigten Quelltextes herauszufinden.
+
+## Seitenquelltext
+
+### HTML - wichtige Klassen (**Tags**)
+
+> - **`<body>`{.HTML}** - Der gesamte Inhalt der Webseite
+> - **`<p>`{.HTML}** - Ein Absatz (englisch *paragraph*)
+> - **`<h1>..<h6>`{.HTML}** - Eine Überschrift von klein `<h1>`{.HTML} bis groß `<h6>`{.HTML} (englisch *headline*)
+> - **`<div>`{.HTML}** - Allgemeines Blockelement
+> - **`<span>`{.HTML}** - Eine Textspanne zum Verändern von Zeichen
+
+## HTML-Editoren
+
+Internetseiten können direkt in der Sprache HTML mit einem Textverarbeitungsprogramm geschrieben werden.
+
+Einfacher geht es aber mit \textcolor{red}{\textbf{WYSIWYG}}-Editoren.
+Man sieht bereits beim Erstellen, wie das Dokument im Browser aussehen wird.
+
+\pause
+$\Rightarrow$ **Kennenlernen des WYSIWYG-Editors \textcolor{red}{KompoZer}.**
+
+## \faIcon{desktop} Arbeitsauftrag: HTML-Editor
+
+Öffne den HTML-Editor ![](logos/KompoZer.png){width=0.7cm} **KompoZer** und übertrage die nachfolgenden Zeilen in das Programm:
+
+![](img/KompoZer_first_site.png)
+
+## Inhalte formatieren
+
+\centering
+\begin{tikzpicture}[overlay]
+\node[rotate=2, align=left, font=\Large] (c) at (-4.5, -1) {\textcolor{red}{rot}\\ \textcolor{blue}{blau}\\ \textcolor{green}{grün}};
+\pause
+\node[rotate=10, scale=0.9] (fs) at (0, -1) {\includegraphics{img/font\_style.png}};
+\pause
+\node[rotate=-15, scale=0.9] (ff) at (4.5, 1) {\includegraphics{img/fonts.png}};
+\pause
+\node[draw, font=\Large, fill=bg, rotate=-20] at (c) {\textcolor{red}{Attribut: Farbe}};
+\pause
+\node[draw, font=\Large, fill=bg] at (fs) {\textcolor{red}{Attribut: Hervorhebung}};
+\pause
+\node[draw, font=\Large, fill=bg, rotate=10] at (ff) {\textcolor{red}{Attribut: Schriftart}};
+\pause
+\node[font=\Large] at (-5, 3.5) {\textcolor{red}{=Attributewerte setzen}};
+\end{tikzpicture}
+
+## Auflistungen
+\large
+::: columns
+:::: {.column width=35%}
+### Gerichte
+
+1. Vorspeise
+2. Hauptspeise
+3. Nachspeise
+::::
+
+:::: {.column width=35%}
+### Sportarten
+* Fußball
+* Langlauf
+* Klettern
+* ...
+::::
+:::
+
+## \faIcon{desktop} Arbeitsauftrag
+
+Schreibe einen kurzen Steckbrief über dich mit dem HTML-Editor KompoZer. 
+
+Der Steckbrief sollte mindestens 
+
+* deinen Namen, 
+* deine Hobbys, 
+* dein Lieblingsessen und 
+* Informationen über deinen Banknachbarn enthalten.
+
+**Speichere die Datei unter steckbrief.html auf deinem eigenen Laufwerk** (es heißt wie dein Benutzername).
diff --git a/Info/7/1/HTML/slides.md b/Info/7/1/HTML/slides.md
index 917d8831..dcea5684 100644
--- a/Info/7/1/HTML/slides.md
+++ b/Info/7/1/HTML/slides.md
@@ -49,23 +49,21 @@ Einfacher geht es aber mit \textcolor{red}{\textbf{WYSIWYG}}-Editoren.
 Man sieht bereits beim Erstellen, wie das Dokument im Browser aussehen wird.
 
 \pause
-$\Rightarrow$ **Kennenlernen des WYSIWYG-Editors \textcolor{red}{KompoZer}.**
-
-## \faIcon{desktop} Arbeitsauftrag: HTML-Editor
-
-Öffne den HTML-Editor ![](logos/KompoZer.png){width=0.7cm} **KompoZer** und übertrage die nachfolgenden Zeilen in das Programm:
-
-![](img/KompoZer_first_site.png)
+$\Rightarrow$ **Dein ![](logos/wiki.svg) \textcolor{red}{Netz des Wissens} hat einen WYSIWYG Editor.**
 
 ## Inhalte formatieren
 
 \centering
 \begin{tikzpicture}[overlay]
+\node[] (editor) at (0, 3) {\includegraphics[width=0.9\textwidth, keepaspectratio]{img/editor.png}};
 \node[rotate=2, align=left, font=\Large] (c) at (-4.5, -1) {\textcolor{red}{rot}\\ \textcolor{blue}{blau}\\ \textcolor{green}{grün}};
+\only<1>{\node[draw=red, minimum size=0.5cm] at (-3.25, 2.7) {};}
 \pause
-\node[rotate=10, scale=0.9] (fs) at (0, -1) {\includegraphics{img/font\_style.png}};
+\node[rotate=10, scale=0.9] (fs) at (0, -0.9) {\includegraphics{img/font\_style.png}};
+\only<2>{\node[draw=red, minimum size=0.5cm, minimum width=1cm] at (-4.1, 2.7) {};}
 \pause
-\node[rotate=-15, scale=0.9] (ff) at (4.5, 1) {\includegraphics{img/fonts.png}};
+\node[rotate=-15, scale=0.9] (ff) at (4.75, 0.1) {\includegraphics{img/fonts.png}};
+\only<3>{\node[draw=red, minimum size=0.5cm, minimum width=1.1cm] at (-1.9, 3.3) {};}
 \pause
 \node[draw, font=\Large, fill=bg, rotate=-20] at (c) {\textcolor{red}{Attribut: Farbe}};
 \pause
@@ -73,7 +71,7 @@ $\Rightarrow$ **Kennenlernen des WYSIWYG-Editors \textcolor{red}{KompoZer}.**
 \pause
 \node[draw, font=\Large, fill=bg, rotate=10] at (ff) {\textcolor{red}{Attribut: Schriftart}};
 \pause
-\node[font=\Large] at (-5, 3.5) {\textcolor{red}{=Attributewerte setzen}};
+\node[font=\Large] at (-4, -3.5) {\textcolor{red}{=Attributewerte setzen}};
 \end{tikzpicture}
 
 ## Auflistungen
@@ -96,15 +94,20 @@ $\Rightarrow$ **Kennenlernen des WYSIWYG-Editors \textcolor{red}{KompoZer}.**
 ::::
 :::
 
+## \faIcon{desktop} Arbeitsauftrag: HTML-Editor
+
+Öffne den HTML-Editor deines ![](logos/wiki.svg) **Netz des Wissens**, indem du im **Zentrum** auf deinen Namen mit dem \boldred{+} klickst.
+
+![](img/netz_des_wissens_zentrum.png)
+
+
 ## \faIcon{desktop} Arbeitsauftrag
 
-Schreibe einen kurzen Steckbrief über dich mit dem HTML-Editor KompoZer. 
+Schreibe einen kurzen Steckbrief über dich im ![](logos/wiki.svg) **Netz des Wissens**.
 
 Der Steckbrief sollte mindestens 
 
 * deinen Namen, 
 * deine Hobbys, 
 * dein Lieblingsessen und 
-* Informationen über deinen Banknachbarn enthalten.
-
-**Speichere die Datei unter steckbrief.html auf deinem eigenen Laufwerk** (es heißt wie dein Benutzername).
+* Informationen über deine Banknachbar*in enthalten.