Lektion 3:
Entitäten & Sonderzeichen, Visual Studio Code
Entitäten und Sonderzeichen
Entitäten
- Um Sonderzeichen einzugeben, die nicht auf der Tastatur sind, können sogenannte Entitäten verwendet werden.
Diese beginnen stets mit einem
& und enden mit ;
einige gebräuchliche Entitäten:
© |
–> |
© |
|
ä |
–> |
ä |
|
Ä |
–> |
Ä |
> |
–> |
> |
|
ö |
–> |
ö |
|
Ö |
–> |
Ö |
< |
–> |
< |
|
ü |
–> |
ü |
|
Ü |
–> |
Ü |
& |
–> |
& |
|
× |
–> |
× |
|
|
–> |
(Leerzeichen)> |
➡ Übersicht HTML-Entitäten z.B: auf
https://wiki.selfhtml.org/wiki/Zeichenreferenz
Unicode und Sonderzeichen
- Der Dokumentenstandard HTML5 sieht vor, dass HTML-Dateien sämtliche
Unicode-Zeichen (auch Emojis) verwenden können:
<p> ♪ δ ñ العربية ⇨ Русский 乸 漢 🙂⭐ </p>
Damit diese Emojis auch tatsächlich angezeigt werden, muss die Zeichencodierung (nächste Slide) korrekt gesetzt sein.
UTF8-Codierung
- «Als Zeichencodierung wird eine eindeutige Transformation von Zeichen wie Buchstaben oder sonstigen Symbolen
in Zahlen (oder Signale) bezeichnet.»
[1]
- Um Unicode zu verwenden, eignet sich die Codierung UTF8 (oder UTF16). Diese ist in Code-Editoren meist Standard.
- Wird der HTML5-Doctype korrekt gesetzt, so nimmt der Browser implizit UTF8 als Standardcodierung.
<!DOCTYPE html>
Unicode als Entität
- In Unicode erhält jedes Zeichen/Emoji eine eindeutige Nummer zugewiesen.
- Mit Hilfe dieser Nummer kann man jedes Zeichen/Emoji auch als Entität schreiben.
🖊️ Warum soll das sinnvoll sein??
| Zeichen |
|
dezimal |
hexadezimal |
Entität |
| ♪ |
–> |
9834 |
266A |
♪ |
| 🙂 |
–> |
128578 |
1F642 |
🙂 |
| 漢 |
–> |
28450 |
6F22 |
漢 |
➡ Unicode-Zeichentabelle online z.B: auf
https://unicode-table.com
➡ Unter Windows aufrufbar in der App Zeichentabelle (Suche nach charmap)
➡ Ab Windows 10 gibt es ein Emoji-Auswahlfenster. Tastenkombination:
Win + . (Windowstaste und Punkt)
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!
