4. Unterrichtsblock

Inhaltsverzeichnis

Entitäten
Emojis
Symbole
URL-Codierung
Übungsaufgabe

Entitäten

Einige Zeichen sind in HTML reserviert. Wenn Sie in Ihrem Text die Zeichen „kleiner als“ (<) oder „größer als“ (>) verwenden, vermischt der Browser diese möglicherweise mit Tags. Zeichenentitäten werden verwendet, um reservierte Zeichen in HTML anzuzeigen.

Um ein Kleiner-als-Zeichen (<) anzuzeigen, müssen wir folgende Zeichenfolge schreiben: < oder <

Nicht unterbrechendes Leerzeichen

Eine häufig verwendete Entität in HTML ist das geschützte Leerzeichen:  
Ein geschütztes Leerzeichen ist ein Leerzeichen, das nicht in eine neue Zeile umgebrochen wird. Zwei Wörter, die durch ein geschütztes Leerzeichen getrennt sind, bleiben zusammen (werden nicht in eine neue Zeile umgebrochen). Dies ist praktisch, wenn das Brechen der Wörter störend sein könnte.

Beispiele:

§ 10
10 km/h
10 Uhr

Einige hilfreiche HTML-Entitäten

Ergebnis	Beschreibung	Entitäten-Name	Entitäten-Nummer
	Leerzeichen, ohne Zeilenumbruch
<	kleiner als	<	<
>	größer als	>	>
&	Kaufmännisches „und“	&	&
„	Doppelte Anführungszeichen	"	"
‚	Einfaches Anführungszeichen (apostroph)	'	'
¢	Cent	¢	¢
£	Pfund	£	£
¥	Yen	¥	¥
€	Euro	€	€
©	Urheberrecht	©	©
®	Eingetragene Marke	®	®

Beschreibung der Seite

Hier wurde ein Leerzeichen ohne Zeilenumbruch für die Uhrzeit verwendet: 10 Uhr
Hier wurde ein normales Leerzeichen für die Uhrzeit verwendet: 10 Uhr

Codebeispiel

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beschreibung der Seite</title>
  </head>
  <body>
     <ul>
       <li>Hier wurde ein Leerzeichen ohne Zeilenumbruch für die Uhrzeit verwendet: 10&nbsp;Uhr</li>
       <li>Hier wurde ein normales Leerzeichen für die Uhrzeit verwendet: 10 Uhr</li>
     </ul>
  </body>
</html>

Aufgabe

Baue o.g. Code im Code-Editor nach und probiere die verschiedenen HTML-Entitäten aus.

Kombinieren von diakritischen Zeichen

Ein diakritisches Zeichen ist eine „Glyphe“, die einem Buchstaben hinzugefügt wird. Einige Zeichen, wie ( ̀) und ( ́) werden Akzente genannt. Diakritische Zeichen können sowohl über als auch unter einem Buchstaben, innerhalb eines Buchstabens und zwischen zwei Buchstaben erscheinen. Diakritische Zeichen können in Kombination mit alphanumerischen Zeichen verwendet werden, um ein Zeichen zu erzeugen, das in dem auf der Seite verwendeten Zeichensatz (Codierung) nicht vorhanden ist.

Akzent	Buchstabe	Konstrukt	Ergebnis
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

Aufgabe

Baue folgenden Text mit o.g. HTML-Akzenten nach:

Me robastes Sueño cuando me dormí
Se pasó mi amante y yo no lo vi

Qué linda la mariposa cuando acaricia las flores
La mujer que a mí me quiera yo le pongo condiciones

A mí me decía mi madre: no te vayas a casar
Y dale las condiciones a culebra mapaná

Emojis

Was sind Emojis?

Emojis sind Zeichen aus dem UTF-8-Zeichensatz: 😄 😍 💗
Emojis sehen aus wie Bilder oder Symbole, sind es aber nicht. Es sind Buchstaben (Zeichen) aus dem Zeichensatz UTF-8 (Unicode).

UTF-8 deckt fast alle Zeichen und Symbole der Welt ab.

Um eine HTML-Seite korrekt anzuzeigen, muss ein Webbrowser den in der Seite verwendeten Zeichensatz kennen. Dies wird im <meta>-Tag angegeben:

<meta charset="UTF-8">

UTF-8 Charakter

Viele UTF-8-Zeichen können nicht auf einer Tastatur eingegeben werden, aber sie können immer mithilfe von Zahlen (sogenannten Entitätsnummern) angezeigt werden:

A ist 65
B ist 66
C ist 67

Die Zeichen A, B und C werden durch die Nummern 65, 66 und 67 dargestellt. Damit der Browser versteht, dass Sie ein Zeichen anzeigen, müssen Sie die Entitätsnummer mit &# beginnen und mit ; (Semikolon).

Liste der UTF-8 Charakter: https://www.w3schools.com/charsets/ref_utf_basic_latin.asp

Emojis sind auch Zeichen aus dem UTF-8-Alphabet:

😄 ist 128516
😍 ist 128525
💗 ist 128151

Vollständige Liste an Emojis: https://www.getemojis.net/html/

Beispiele

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>

    <p>Ich schreibe A B C</p>
    <p>Ich schreibe &#65; &#66; &#67;</p>
    <p>Ich schreibe &#128516;</p>

  </body>
</html>

Aufgabe

Schreibe „😍 IFB Berufsschule“ mit UTF-8 Charaktern

HTML Symbole

Symbole, die auf Ihrer Tastatur nicht vorhanden sind, können auch mithilfe von Entitäten hinzugefügt werden.

Viele mathematische, technische und Währungssymbole sind auf einer normalen Tastatur nicht vorhanden. Um solche Symbole zu einer HTML-Seite hinzuzufügen, können man den Entitätsnamen oder die Entitätsnummer (eine dezimale oder hexadezimale Referenz) für das Symbol verwenden.

Ich zeige €
Ich zeige €
Ich zeige €

<!-- € Zeichen -->
<p>Ich zeige &euro;</p>
<p>Ich zeige &#8364;</p>
<p>Ich zeige &#x20AC;</p>

Einige mathematische Symbole

Zeichen	Nummer	Entität	Beschreibung
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS
∅	∅	∅	EMPTY SETS
∇	∇	∇	NABLA
∈	∈	∈	ELEMENT OF
∉	∉	∉	NOT AN ELEMENT OF
∋	∋	&ni;	CONTAINS AS MEMBER
∏	∏	∏	N-ARY PRODUCT
∑	∑	∑	N-ARY SUMMATION

Einige griechische & kyrillische Symbole

Zeichen	Nummer	Entität	Beschreibung
Д	Д	&Dcy;	Kyrillisches D
Ф	Ф	&Fcy;	Kyrillisches F
Γ	Γ	Γ	Griechisches Gamma
Δ	Δ	Δ	Griechisches Delta

Andere HTML Schriftzeichen

Zeichen	Nummer	Entität	Description
©	©	©	Urheberrechts-Zeichen
®	®	®	Registriert
€	€	€	Euro
™	™	™	Handelsmarke
←	←	←	Linker Pfeil
↑	↑	↑	Pfeil nach oben
→	→	→	Rechter Pfeil
↓	↓	↓	Pfeil nach unten
♠	♠	&spades;	Pik
♣	♣	&clubs;	Blatt
♥	♥	&hearts;	Herz
♦	♦	&diams;	Karo

Aufgabe

Schreibe ☠ ☢ ☣ ♜ ♞ mit Hex-Werten.

Referenz: https://www.toptal.com/designers/htmlarrows/symbols/

URL Codierung

URL bedeutet „Uniform Recource Locator“ zu Deutsch: Einheitlicher Ressourcenfinder

Eine URL ist ein anderes Wort für eine Webadresse. Eine URL kann aus Wörtern (z. B. webentwicklerkurs.de) oder einer Internet Protokoll (IP)-Adresse (z. B. 192.68.20.50) bestehen. Die meisten Menschen geben beim Surfen den Namen ein, denn Namen sind leichter zu merken als Zahlen.

Webbrowser fordern den Inhalt von Seiten von Webservern unter Verwendung einer URL an. Ein Uniform Resource Locator (URL) wird verwendet, um ein Dokument (oder andere Daten) im Web zu adressieren. Eine Webadresse wie https://webentwicklerkurs.de/1-jahr/html/ folgt diesen Syntaxregeln:

schema://präfix.domain:anschluss/pfad/dateiname

Erklärung:

schema – definiert den Typ des Internet-Dienstes (meistens lautet das Protokoll http oder https)
präfix – definiert das Domänen-präfix (Standard für http ist www)
domäne – definiert den Internet-Domänen-Namen (z. B. webentwicklerkurs.de)
anschluss – definiert die Anschlussnummer beim Host auch „Port“ (Standard für http ist 80)
pfad – definiert den Ordnerpfad auf dem Server (wenn er weggelassen wird, ist das Hauptverzeichnis gemeint)
dateiname– definiert den Dateinamen oder die Ressource

Bekannte URL-Schema:

Schema	Ausgeschrieben	Verwendung
http	HyperText Transfer Protocol	Herkömmliche Webseiten. Nicht verschlüsselt
https	Secure HyperText Transfer Protocol	Sichere Webseiten. Verschlüsselt
ftp	File Transfer Protocol	Zum Hoch- und Herunterladen von Dateien
file		Eine Datei auf dem Rechner

URL-Verschlüsselung nach ASCII

URLs können nur mit dem ASCII-Zeichensatz über das Internet gesendet werden. Wenn eine URL Zeichen außerhalb des ASCII-Satzes enthält, muss die URL konvertiert werden. Die URL-Codierung wandelt Nicht-ASCII-Zeichen in ein Format um, das über das Internet übertragen werden kann.

Bei der URL-Codierung werden Nicht-ASCII-Zeichen durch ein „%“ gefolgt von Hexadezimalziffern ersetzt. URLs dürfen keine Leerzeichen enthalten. Die URL-Codierung ersetzt normalerweise ein Leerzeichen durch ein Pluszeichen (+) oder %20.

Probiere es aus:

Wenn Sie auf „Auslesen“ klicken, wird der Browser die Eingabe URL-codieren, bevor sie auf der Seite ausgegeben wird. Versuchen Sie es mit einer Eingabe, die Leerzeichen und Sonderzeichen enthält.

ASCII Verschlüsselungsbeispiele

Ihr Browser codiert die Eingabe entsprechend dem auf Ihrer Seite verwendeten Zeichensatz. Der Standardzeichensatz in HTML5 ist UTF-8.

Zeichen	In Windows-1252	In UTF-8
Leerzeichen	%20	%20
!	%21	%21
„	%22	%22
#	%23	%23
$	%24	%24
%	%25	%25
&	%26	%26
‚	%27	%27
(	%28	%28
)	%29	%29
*	%2A	%2A
+	%2B	%2B
,	%2C	%2C
–	%2D	%2D
.	%2E	%2E
/	%2F	%2F
0	%30	%30
1	%31	%31
2	%32	%32
3	%33	%33
4	%34	%34
5	%35	%35
6	%36	%36
7	%37	%37
8	%38	%38
9	%39	%39
:	%3A	%3A
;	%3B	%3B
<	%3C	%3C
=	%3D	%3D
>	%3E	%3E
?	%3F	%3F
@	%40	%40
A	%41	%41
B	%42	%42
C	%43	%43
D	%44	%44
E	%45	%45
F	%46	%46
G	%47	%47
H	%48	%48
I	%49	%49
J	%4A	%4A
K	%4B	%4B
L	%4C	%4C
M	%4D	%4D
N	%4E	%4E
O	%4F	%4F
P	%50	%50
Q	%51	%51
R	%52	%52
S	%53	%53
T	%54	%54
U	%55	%55
V	%56	%56
W	%57	%57
X	%58	%58
Y	%59	%59
Z	%5A	%5A
[	%5B	%5B
\	%5C	%5C
]	%5D	%5D
^	%5E	%5E
_	%5F	%5F
`	%60	%60
a	%61	%61
b	%62	%62
c	%63	%63
d	%64	%64
e	%65	%65
f	%66	%66
g	%67	%67
h	%68	%68
i	%69	%69
j	%6A	%6A
k	%6B	%6B
l	%6C	%6C
m	%6D	%6D
n	%6E	%6E
o	%6F	%6F
p	%70	%70
q	%71	%71
r	%72	%72
s	%73	%73
t	%74	%74
u	%75	%75
v	%76	%76
w	%77	%77
x	%78	%78
y	%79	%79
z	%7A	%7A
{	%7B	%7B
\|	%7C	%7C
}	%7D	%7D
~	%7E	%7E
€	%80	%E2%82%AC
‚	%82	%E2%80%9A
ƒ	%83	%C6%92
„	%84	%E2%80%9E
…	%85	%E2%80%A6
†	%86	%E2%80%A0
‡	%87	%E2%80%A1
ˆ	%88	%CB%86
‰	%89	%E2%80%B0
Š	%8A	%C5%A0
‹	%8B	%E2%80%B9
Œ	%8C	%C5%92
Ž	%8E	%C5%BD
‘	%91	%E2%80%98
’	%92	%E2%80%99
“	%93	%E2%80%9C
”	%94	%E2%80%9D
•	%95	%E2%80%A2
–	%96	%E2%80%93
—	%97	%E2%80%94
˜	%98	%CB%9C
™	%99	%E2%84
š	%9A	%C5%A1
›	%9B	%E2%80
œ	%9C	%C5%93
ž	%9E	%C5%BE
Ÿ	%9F	%C5%B8
¡	%A1	%C2%A1
¢	%A2	%C2%A2
£	%A3	%C2%A3
¤	%A4	%C2%A4
¥	%A5	%C2%A5
¦	%A6	%C2%A6
§	%A7	%C2%A7
¨	%A8	%C2%A8
©	%A9	%C2%A9
ª	%AA	%C2%AA
«	%AB	%C2%AB
¬	%AC	%C2%AC
®	%AE	%C2%AE
¯	%AF	%C2%AF
°	%B0	%C2%B0
±	%B1	%C2%B1
²	%B2	%C2%B2
³	%B3	%C2%B3
´	%B4	%C2%B4
µ	%B5	%C2%B5
¶	%B6	%C2%B6
·	%B7	%C2%B7
¸	%B8	%C2%B8
¹	%B9	%C2%B9
º	%BA	%C2%BA
»	%BB	%C2%BB
¼	%BC	%C2%BC
½	%BD	%C2%BD
¾	%BE	%C2%BE
¿	%BF	%C2%BF
À	%C0	%C3%80
Á	%C1	%C3%81
Â	%C2	%C3%82
Ã	%C3	%C3%83
Ä	%C4	%C3%84
Å	%C5	%C3%85
Æ	%C6	%C3%86
Ç	%C7	%C3%87
È	%C8	%C3%88
É	%C9	%C3%89
Ê	%CA	%C3%8A
Ë	%CB	%C3%8B
Ì	%CC	%C3%8C
Í	%CD	%C3%8D
Î	%CE	%C3%8E
Ï	%CF	%C3%8F
Ð	%D0	%C3%90
Ñ	%D1	%C3%91
Ò	%D2	%C3%92
Ó	%D3	%C3%93
Ô	%D4	%C3%94
Õ	%D5	%C3%95
Ö	%D6	%C3%96
×	%D7	%C3%97
Ø	%D8	%C3%98
Ù	%D9	%C3%99
Ú	%DA	%C3%9A
Û	%DB	%C3%9B
Ü	%DC	%C3%9C
Ý	%DD	%C3%9D
Þ	%DE	%C3%9E
ß	%DF	%C3%9F
à	%E0	%C3%A0
á	%E1	%C3%A1
â	%E2	%C3%A2
ã	%E3	%C3%A3
ä	%E4	%C3%A4
å	%E5	%C3%A5
æ	%E6	%C3%A6
ç	%E7	%C3%A7
è	%E8	%C3%A8
é	%E9	%C3%A9
ê	%EA	%C3%AA
ë	%EB	%C3%AB
ì	%EC	%C3%AC
í	%ED	%C3%AD
î	%EE	%C3%AE
ï	%EF	%C3%AF
ð	%F0	%C3%B0
ñ	%F1	%C3%B1
ò	%F2	%C3%B2
ó	%F3	%C3%B3
ô	%F4	%C3%B4
õ	%F5	%C3%B5
ö	%F6	%C3%B6
÷	%F7	%C3%B7
ø	%F8	%C3%B8
ù	%F9	%C3%B9
ú	%FA	%C3%BA
û	%FB	%C3%BB
ü	%FC	%C3%BC
ý	%FD	%C3%BD
þ	%FE	%C3%BE
ÿ	%FF	%C3%BF

Übungsaufgabe

1. Aufgabe

Codiere diese URL in ASCII-Schreibweise