---
header-includes: |
    \newcommand{\link}[1]{\textcolor{blue}{\underline{\url{#1}}}}
---

## \faIcon{chalkboard-teacher} Wiederholung

\let\tightlist\relax
* Was ist ein Verweis im Internet?
* Welcher andere Begriff wird auch oft verwendet?
* Aus welchen Teilen besteht er?

## \faIcon{chalkboard-teacher} Wiederholung - Die Klasse VERWEIS

\begin{center}
\begin{tikzpicture}[font=\Large]

%\begin{class}[text width=4.5cm]{\only<1>{\phantom{VERWEIS}}\only<2->{VERWEIS}}{-1,0}
\begin{class}[text width=4.5cm]{VERWEIS}{-2,0}
\only<-2> {
  \attribute{\phantom{Beschreibung}}
  \attribute{\phantom{Zieladresse}}
}
\only<3->{
  \attribute{Beschreibung}
  \attribute{Zieladresse}
}
\only<-4>{
  \operation{\phantom{öffneZieldokument()}}
}
\only<5->{
  \operation{öffneZieldokument()}
}
\end{class}

\node[single arrow,
  minimum width = 10pt, single arrow head extend=3pt,
  minimum height=10mm, left=0.5cm of VERWEIS] {};

\only<1> {
\node[single arrow, draw=blue, fill=blue, 
  minimum width = 10pt, single arrow head extend=3pt,
  minimum height=10mm, left=0.5cm of VERWEIS, yshift=1cm] {};
}

\only<2> {
\node[single arrow, draw=blue, fill=blue, 
  minimum width = 10pt, single arrow head extend=3pt,
  minimum height=10mm, left=0.5cm of VERWEIS] {};
}

\only<4> {
\node[single arrow, draw=blue, fill=blue, 
  minimum width = 10pt, single arrow head extend=3pt,
  minimum height=10mm, left=0.5cm of VERWEIS, yshift=-1cm] {};
}

\begin{object}[text width=7cm]{v1}{5,0}
\instanceOf{VERWEIS}
\only<-5> {
\attribute{\phantom{"Bg}}
\attribute{\phantom{"ky}}
}
\only<6-> {
\attribute{Beschreibung="Banknachbarin"}
}
\only<-6> {
\attribute{\phantom{"ky}}
}
\only<7-> {
\attribute{Zieladresse="kayra.html"}
}
\end{object}
\end{tikzpicture}
\end{center}

## \faIcon{chalkboard-teacher} Verweise graphisch darstellen {.t}

Wie könnte man mehrere Webseiten mit Verweisen übersichtlich graphisch darstellen?

\pause

### Als Graph!

\begin{center}
\begin{tikzpicture}[font=\Large]
\node[rounded corners, draw, minimum width=1cm] (verweis) {Seite mit Verweis};
\node[rounded corners, right=3cm of verweis, draw, minimum width=1cm] (verweisziel) {Zielseite};
\draw[->] (verweis) -- node[yshift=0.5cm, opacity=0] {\includegraphics[keepaspectratio, height=2cm]{img/surfer.png}} (verweisziel);
\only<3>{
\draw[->] (verweis) -- node[yshift=0.5cm] {\includegraphics[keepaspectratio, height=2cm]{img/surfer.png}} (verweisziel);
}
\end{tikzpicture}
\end{center}
\pause\pause

### Beispiel: Steckbriefe

\begin{center}
\begin{tikzpicture}[font=\Large]
\node[rounded corners, draw, minimum width=1cm] (lucy) {lucy.html};
\pause
\node[rounded corners, right=3cm of lucy, draw, minimum width=1cm] (kayra) {kayra.html};
\draw[->] (lucy) -- (kayra);
\end{tikzpicture}
\end{center}

## \faIcon{desktop} Arbeitsauftrag: Rainer und Pyro \hfill 10min {.t}

::: columns
:::: {.column width=70%}
Auf den Webseiten \link{https://bycs.link/rainer-pyro} sind viele Verweise zu finden.

Die rechte Abbildung verdeutlicht, welche Webseiten miteinander verknüpft sind.
Die Übersicht ist aber nicht fertig. 

\begin{tikzpicture}
\only<1>{
  \node[minimum height=2cm] {\includegraphics[keepaspectratio, width=0.9\textwidth]{img/rainer-pyro-index.png}};
  \node[draw=red, line width=0.75pt, minimum width=1.2cm, minimum height=0.4cm, anchor=west] at (-0.3cm, 0.7cm) {};
}
\only<2>{
  \node {\includegraphics[keepaspectratio, width=0.9\textwidth]{img/rainer.png}};
  \node[draw=red, line width=0.75pt, minimum width=1.7cm, minimum height=0.6cm, anchor=west] at (2.6cm, 0.7cm) {};
}
\end{tikzpicture}
::::

:::: {.column width=30%}
\begin{tikzpicture}[font=\Large]
\only<1>{
  \node[rounded corners, draw, fill=orange!50] (index) {\textbf{index.html}};
}
\only<2->{
  \node[rounded corners, draw] (index) {\textbf{index.html}};
  \node[rounded corners, fill=orange!50, below=3cm of verweis, draw, xshift=-0.2cm] (rainer) {\textbf{rainer.html}};
  \draw[->] (index) -- (rainer);
}
\end{tikzpicture}
::::
:::

\vspace{1cm}
**Übernehme die Abbildung auf ein Blatt, rufe die Webseite auf und ergänze die fehlenden Teile.**

##

![](img/pokemon-hyperstruktur.png){.center}

## \faIcon{brain} Hefteintrag {.standout hefteintrag}

\textbf{\Huge 1.3 Hypertextstrukturen}

\pause

Ein Dokument, das [[Verweis]]e enthält, heißt \boldred{Hypertextdokument}.
\pause

Viele Hypertextdokumente bilden eine \boldred{Hypertextstruktur}.
\pause

Diese können mithilfe von \boldred{Graphen} dargestellt werden.
Ein Graph besteht aus \boldred{Knoten} und den Verbindungslinien dazwischen, den \boldred{Kanten}.

Beispiel: *\<Bild deines Graphens\>*

## \faIcon{pencil-alt} Hausaufgabe

`\begin{tcolorbox}[colframe=red]`{=latex}

1. Mache ein Foto deines Graphens zu der Webseite von Pyro und Reiner.
2. Füge das Foto als Beispiel in deinen Hefteintrag ein.

`\end{tcolorbox}`{=latex}

## \faIcon{desktop} \faIcon{pencil-alt} Arbeitsauftrag: Nachbarländer Italiens \hfill 10min

Informiere dich auf \link{de.wikipedia.org/wiki/Italien} über alle Staaten, die an Italien grenzen und stelle die Beziehung in einem Graphen dar. 
\vspace{1cm}

\begin{tcolorbox}[title=Möglicher Start]
\centering
\begin{tikzpicture}
  \node[draw, rounded corners=2pt] (it) {Italien};
  \node[draw, rounded corners=2pt, left=of it] (au) {Österreich};
  \draw (it) -- (au);
\end{tikzpicture}
\end{tcolorbox}

\vspace{1cm}
**Vergiss die beiden Kleinstaaten innerhalb Italiens nicht!**

##

![](img/italien-hyperstruktur.png){.center}

## \faIcon{desktop} Arbeitsauftrag: Wissenswertes über Italien

Übertrage den Graphen in eine **Hypertextstruktur**.

\vspace{0.75cm}

::: {.columns align=center}
:::: {.column width=50%}
Erstelle dazu für jeden Staat ein HTML-Dokument im ![](logos/wiki.svg) **Netz des Wissens**.
Beginne mit Italien im **Zentrum** deines Netzes.
Füge jeweils Informationen über die Flagge, Sprache, Einwohnerzahl und Hauptstadt ein.
::::

:::: {.column width=50%}
![](img/wiki_start_italy.png)
::::
:::

\vspace{0.75cm}

**[Ganz wichtig für die Verweise]{.underline}: Du kannst den Namen des Landes in ``[[]]`` eckigen Klammern als Verweis verwenden.**