`{.HTML}** - Allgemeines Blockelement +> - **``{.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. -- cgit v1.2.3

..

`{.HTML}** - Eine Überschrift von klein `

`{.HTML} bis groß `