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?
Attribute
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.
- 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
Beispiel: Hyperlinks und Bilder
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
Visual Studio Code
Visual Studio Code
- Visual Studio Code ist ein Code-Editor mit vielen nützlichen Funktionen, die der Windows Editor nicht zur Verfügung stellt.
- Kostenfrei verfügbar für Windows, Mac, Linux.
- Installiert auf den KSSB-PCs.
➡ Download unter https://code.visualstudio.com
Codierungsprobleme
- Trotz UTF8 kann es vorkommen, dass der Browser die Codierung nicht richtig erkennt. Als Folge davon werden Sonderzeichen falsch angezeigt, z.B.
- Abhilfe schafft, das UTF8 Byte Order Mark zu setzen.
- Das Byte Order Mark (BOM) ist eine Codesequenz, die vom Textbearbeitungsprogramm zu Beginn
einer Datei (für den Leser unsichtbar) eingefügt wird. Damit erkennt der Browser die Codierungsform
von Unicodezeichen automatisch.
Visual Studio Code: UTF8 Byte Order Mark
In Visual Studio Code kann man das UTF8-BOM folgendermassen hinzufügen:
- Klicke unten in der blauen Leiste auf die Codierung, meistens steht UTF-8.
- Oben öffnet sich ein kleines Menü. Wähle "Save with Encoding" aus.
- Klick auf "UTF-8 with BOM" .
❗ Vergiss nicht, deine Datei erneut hochzuladen!
