1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
header-includes: |
\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://www.muhq.space/schule/klasse7](https://www.muhq.space/schule/klasse7) -->
[https://paftown.ddns.net/klasse7]()
## \faIcon{desktop} Seitenquelltext
{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$ **Dein  \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, -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.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
\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 (-4, -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: HTML-Editor
\large
Öffne den HTML-Editor des  **Steckbriefe** Wikis, indem du es im Mebis-Kurs anklickst.
\vspace{0.5cm}
{.center width=60%}
\vspace{0.5cm}
Erzeuge eine neue Seite *Ich*, falls du gefragt wirst.
## \faIcon{desktop} Arbeitsauftrag: Steckbrief
Schreibe einen kurzen Steckbrief über dich im  **Steckbriefe** Wiki.
Der Steckbrief sollte mindestens enthalten:
`\begin{tcolorbox}`{=latex}
* Deinen Namen
* Deine Hobbys
* Dein Lieblingsessen
* Informationen über deine Banknachbar*in
`\end{tcolorbox}`{=latex}
|
