Lektion 2: Bilder und Verlinkung

Wiederholung HTML

Wiederholung HTML: Brainstorming

Wie erstellt man eine Website? Welche Programme braucht es dazu?
Wie sieht die Grundstruktur einer Website aus? Aus welchen Bausteinen/Elementen besteht der Code?

Wiederholung HTML: Kahoot

➡ https://play.kahoot.it/v2/?quizId=2613a67f-7d35-4e3f-a3b8-4c8f5cbac548

HTML-Bäume

HTML-Dokumente sind hierarchisch aufgebaut
–> Hierarchie abbilden als Baum-Struktur
<html> ist das Wurzelelement
<head> und <body> sind Kinder, die wiederum Nachkommen haben
Texte als eigenständige Knoten

HTML-Bäume: Beispiel

DOM-Viewer

Das Online-Tool Live DOM Viewer erstellt automatisch eine solche Baumstruktur.

🖊️ Aufgabe: HTML-Baum

Zeichne den HTML-Baum zu folgender Website:

<html>
	<head>
		<title>Tim Berners-Lee</title>
	</head>
	<body>
		<h1>Tim Berners-Lee</h1>
		<p>
			Berners-Lee gilt als Erfinder vom 
			<strong>WWW</strong>
		</p>
	</body>
</html>

➡ Seitenvorschau | Lösung

Attribute

Tags können genauer spezifiziert werden mit Hilfe von Attributen.

Beispiel: <h2 align="center">Die Teepflanze</h2>
Beispiel: <p align="right">rechtsbündig</p>

🖊️ Aufgabe: Attribute identifizieren

Werft einen Blick auf den Quellcode der Wikipedia-Seite zu Big Data.
- https://de.wikipedia.org/wiki/Big_Data
- Rechte Maustaste in Seite –> Seitenquelltext anzeigen (Ctrl + U)
Welche Tags/Elemente findet ihr im Quellcode und welche Attribute werden verwendet?
Welches Element wird verwendet, um Hyperlinks einzufügen? Welches Attribut wird dort verwendet?

Hyperlinks

Hyperlinks `<a>`

Verlinkung (Links setzen) zu anderen Hypertext-Dokumenten, Ressourcen, Orten geschieht mittels des Tags <a> (engl. anchor)

Syntax

Hyperlinks `<a>` – Attribute

<a href="https://www.spiritus.ch" target="_blank" title="KSSB">Kollegium</a>

Das Attribut href (hyper reference) spezifiziert das Verweisziel. Z.B.:
- html-Dokument innerhalb desselben Ordners href="seite2.html"
- externe Ressourcen via URI, z.B.
  - href="https://www.google.ch" (Website) oder
  - href="http://kssb.ch/webprogrammierung/docs/Cheatsheet-HTML-Tags.pdf" (PDF)
- E-Mail-Adresse href="mailto:sekretariat.kssb@edu.vs.ch"
- Telefonnummer href="tel:+41791234567"
Mit target="_blank" kann bewirkt werden, dass der Link in einem neuen Fenster/Tab geöffnet wird.
Mit title="Hinweis" und alt="Hinweis" können Texte definiert werden, die angezeigt werden, wenn der Cursor über dem Link bleibt.

Bilder einfügen

Bilder einfügen `<img>`

Bilddateien können mittels des atomaren Tags <img> eingefügt werden:
```
<img src="teebaum.jpg" width="300" />
```
Auf Bilder wird in HTML nur verwiesen! Die Bilder selbst befinden sich in einer anderen Datei im aktuellen Ordner oder im Internet.
Das Attribut src (engl. source) spezifiziert den Dateinamen.
- Bilddatei im gleichen Verzeichnis wie html-Datei src="bilddatei.jpg"
- Unterverzeichnis mittels src="Unterverzeichnis/meinbild.jpg"
- externe Bilder einbetten via URI src="http://kssb.ch/bild.jpg"
Bildgrösse in Pixel spezifizierbar mit Attributen width oder height

Beispiel: Hyperlinks und Bilder

<!DOCTYPE html>
<html>
	<head>
		<title>Tim Berners-Lee</title>
	</head>
	<body>
		<h1>Tim Berners-Lee</h1>

		<p>
			* 8. Juni 1955 in London<br/>
			Website: 
			https://www.w3.org/People/Berners-Lee/
		</p>
		
		https://www.vibrio.eu/blog/wp-content/uploads/2017/12/Tim-Berners-Lee.jpg
		
	</body>
</html>

➡ Download Code l2_berners-lee_1.html

Beispiel: Hyperlinks und Bilder (Lösung)

<!DOCTYPE html>
<html>
	<head>
		<title>Tim Berners-Lee</title>
	</head>
	<body>
		<h1>Tim Berners-Lee</h1>

		<p>
			* 8. Juni 1955 in London<br/>
			Website: 
			<a href="https://www.w3.org/People/Berners-Lee/" target="_blank">
				https://www.w3.org/People/Berners-Lee/
			</a>
		</p>
		
		<img src="https://www.vibrio.eu/blog/wp-content/uploads/2017/12/Tim-Berners-Lee.jpg" width="250" />
		
	</body>
</html>

➡ Download Code l2_berners-lee_2.html

Übung 2

➡ Übung 2

Lektion 2: Bilder und Verlinkung

Wiederholung HTML

Wiederholung HTML: Brainstorming

Wiederholung HTML: Kahoot

HTML-Bäume

HTML-Bäume

HTML-Bäume: Beispiel

DOM-Viewer

🖊️ Aufgabe: HTML-Baum

Attribute

Attribute

🖊️ Aufgabe: Attribute identifizieren

Hyperlinks

Hyperlinks <a>

Syntax

Hyperlinks <a> – Attribute

Bilder einfügen

Bilder einfügen <img>

Beispiel: Hyperlinks und Bilder

Beispiel: Hyperlinks und Bilder

Beispiel: Hyperlinks und Bilder (Lösung)

Übung 2

Hyperlinks `<a>`

Hyperlinks `<a>` – Attribute

Bilder einfügen `<img>`