---
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).