HTML - Entities

Hallo ihr zukünftigen Web-Entwickler! Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, euch auf eine Reise durch die faszinierende Welt der HTML-Entitäten mitzunehmen. Keine Sorge, wenn ihr neu im Programmieren seid – wir beginnen bei den Grundlagen und arbeiten uns hoch. Am Ende dieses Tutorials werdet ihr ein Experte für HTML-Entitäten sein!

Was sind HTML-Entitäten?

Bevor wir eintauchen, lassen wir uns verstehen, was HTML-Entitäten sind. Denkt daran als spezielle Codes, die Zeichen darstellen, die andernfalls möglicherweise schwer in HTML anzuzeigen sind. Es ist wie eine geheime Sprache für eure Webseiten!

Warum brauchen wir HTML-Entitäten?

Stellt euch vor, ihr wollt das kleiner-als-Symbol (<) in eurem HTML anzeigen. Wenn ihr es direkt eingabet, könnte euer Browser denken, es ist der Anfang eines neuen HTML-Tags! Das ist, wo Entitäten zur Rettung kommen. Sie erlauben es uns, diese besonderen Zeichen ohne den Browser zu verwirren, anzuzeigen.

HTML-Zeichen-Entitäten Name und Code

Lassen wir mit einigen der häufigsten HTML-Entitäten beginnen. Wir schauen uns sowohl ihre Namen als auch ihre numerischen Codes an.

Zeichen	Entitätsname	Numerischer Code
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'

Seht euch das in Aktion an:

<p$Ich liebe es, &lt;strong&gt; Tags zu verwenden, um Text <strong>fettdruck</strong>!</p>
<p>Das Underscore-Symbol (&amp;) wird für HTML-Entitäten verwendet.</p>

In diesem Beispiel verwenden wir < und >, um die tatsächlichen Tags anzuzeigen, und &, um das Underscore anzuzeigen. Versucht, diese Entitäten zu entfernen und seht, was passiert!

HTML-Non-Breaking-Spaces Name und Code

Nun lassen wir uns über eine besondere Entität unterhalten, die unglaublich nützlich ist: den Non-Breaking Space.

Zeichen	Entitätsname	Numerischer Code
(Leerzeichen)

Der Non-Breaking Space ist wie ein Superhelden-Leerzeichen – er verhindert Umbrüche, wo ihr sie nicht wollt. Zum Beispiel:

<p$Ich liebe HTML&nbsp;Entitäten!</p>

Dies stellt sicher, dass "HTML" und "Entitäten" immer auf der gleichen Zeile bleiben.

Beispiel für HTML-Entitäten

Lassen wir unsere Kenntnisse mit einem spaßigen Beispiel testen:

<p$Ich lerne HTML &amp; es ist &lt;em&gt;erstaunlich&lt;/em&gt;!</p>
<p>Urheberrecht &copy; 2023 von John&nbsp;Doe</p>

In diesem Beispiel verwenden wir & für das Underscore, < und >, um die <em> Tags anzuzeigen, © für das Urheberrechtssymbol und  , um "John" und "Doe" zusammenzuhalten.

ISO 8859-1 Symbol-Entitäten Name und Code

HTML bietet auch Entitäten für verschiedene Symbole. Hier sind einige häufige:

Symbol	Entitätsname	Numerischer Code
©	©	©
®	®	®
™	™	™
€	€	€
£	£	£

Lassen wir diese in einem praktischen Beispiel verwenden:

<p>Unser Unternehmen, Web Wizards&trade;, akzeptiert Zahlungen in &euro; und &pound;.</p>
<p>Alle Inhalte sind &copy; 2023 Web Wizards&reg;.</p>

ISO 8859-1 Zeichen-Entitäten Name und Code

Manchmal könnt ihr Zeichen mit Akzenten oder anderen diakritischen Zeichen benötigen. HTML-Entitäten kommen wieder zur Rettung:

Zeichen	Entitätsname	Numerischer Code
à	à	à
é	é	é
ñ	ñ	ñ
ü	ü	ü

So könnt ihr sie verwenden:

<p>In Spanisch ist "hello" "hola" und "goodbye" "adi&oacute;s".</p>
<p>Das französische Wort für "Strand" ist "plage" (ausgesprochen "pl&acirc;zh").</p>

Andere von Browsern unterstützte Entitäten

Moderne Browser unterstützen eine breite Palette von Entitäten, einschließlich mathematischer Symbole, Pfeile und sogar Emojis! Hier sind einige spaßige:

Symbol	Entitätsname	Numerischer Code
∞	∞	∞
♥	♥	♥
→	→	→
☺	⌣	☺

Lassen wir diese verwenden, um eine spielerische Nachricht zu erstellen:

<p$Ich habe &infin; Liebe für HTML! &hearts;</p>
<p>Lassen uns vorwärts &rarr; gehen und weiterlernen! &smile;</p>

Denkt daran, dass diese Entitäten虽然是有趣， aber maßvoll eingesetzt werden sollten. Die übermäßige Verwendung von Entitäten kann euer HTML schwerer lesbar und wartbar machen.

Schlussfolgerung

Glückwunsch! Ihr habt gerade einen tiefen Einblick in die Welt der HTML-Entitäten genommen. Vom Anzeigen von besonderen Zeichen bis hin zum Hinzufügen von spaßigen Symbolen habt ihr jetzt ein mächtiges Werkzeug in eurem Web-Entwicklungswerkzeugkasten.

Als wir uns verabschieden, hier ist eine kleine Geschichte aus meiner Lehrerfahrung: Ich hatte einmal einen Schüler, der frustriert war, weil seine Underscores von seiner Webseite verschwunden sind. Als ich ihm HTML-Entitäten zeigte, leuchtete sein Gesicht auf, als hätte er einen versteckten Schatz entdeckt. Das ist die Magie des Lernens – es gibt immer eine Lösung, die darauf wartet, entdeckt zu werden!

Denkt daran, Übung macht den Meister. Versucht, diese Entitäten in eure HTML-Projekte zu integrieren, und bald werden sie zu einer zweiten Natur für euch. Frohes Coden und mögen eure Webseiten mit perfekt gerenderten Zeichen und Symbolen gefüllt sein!

Credits: Image by storyset