HTML - Symbole: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die faszinierende Welt der HTML-Symbole. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, dich auf dieser Reise zu führen. Lass uns loslegen!

HTML - Symbols

Was sind HTML-Symbole?

HTML-Symbole sind besondere Zeichen, die nicht typischerweise auf deiner Standardtastatur zu finden sind. Sie reichen von Urheberrechtsymbolen über mathematische Operatoren bis hin zu süßen kleinen Emojis! Diese Symbole verleihen deinen Webseiten einen Hauch von Professionalität und Pep.

Denke an HTML-Symbole als das Gewürz in deinem Webdesignrezept. Genau wie ein Prise Salz ein Gericht verbessern kann, kann das richtige Symbol deine Webseite zum Leuchten bringen!

Wie man Symbole in ein HTML-Dokument einfügt

Es gibt drei Hauptmethoden, um Symbole in dein HTML-Dokument einzufügen:

HTML-Entities
Dezimalcode
Hexadezimalcode

Lassen wir uns jede Methode mit einigen Beispielen anschauen:

1. HTML-Entities

HTML-Entities sind vordefinierte Namen für spezifische Symbole. Sie beginnen immer mit einem Und-Zeichen (&) und enden mit einem Semikolon (;).

<p$I \hearts; HTML!</p>

Dieser Code wird angezeigt: I ♥ HTML!

Das &hearts; ist die Entity für ein Herzsymbol. Ist das nicht süß?

2. Dezimalcode

Jedes Symbol hat einen eindeutigen Dezimalcode. Um ihn zu verwenden, beginne mit &# und beende mit ;.

<p>Urheberrecht &#169; 2023</p>

Hier repräsentiert © das Urheberrechtssymbol.

3. Hexadezimalcode

Ähnlich wie Dezimalcodes, aber sie beginnen mit &#x und enden mit ;.

<p$I like &#x1F60A;</p>

Dies wird angezeigt: I like ?

Das 😊 ist der Code für ein lächelndes Gesicht Emoji. Es ist, als ob du deiner Webseite ein kleines digitales Lächeln hinzufügst!

Währungssymbole in HTML

Nun, lassen wir uns über Geld sprechen! Währungssymbole sind unerlässlich für E-Commerce-Seiten oder jede Seite, die mit finanziellen Informationen zu tun hat. Hier ist eine Tabelle mit häufigen Währungssymbolen:

Währung	Symbol	Entity	Dezimal	Hexadezimal
Dollar	$	&dollar;	$	$
Euro	€	€	€	€
Pfund	£	£	£	£
Yen	¥	¥	¥	¥

Lassen wir diese in einem praktischen Beispiel verwenden:

<p>Produktpreise:</p>
<ul>
<li>USA: &dollar;10.99</li>
<li>Europa: &euro;9.99</li>
<li>UK: &pound;8.99</li>
<li>Japan: &yen;1100</li>
</ul>

Dieser Code erstellt eine Liste von Preisen in verschiedenen Währungen. Es ist wie ein Mini-Internationaler Marktplatz direkt in deinem HTML!

Mathematische Symbole in HTML

Für alle Mathematik-Enthusiasten da draußen (und sogar für diejenigen, die es nicht sind) hat HTML eine breite Palette von mathematischen Symbolen. Diese sind besonders nützlich für Bildungsseiten oder jeglichen Inhalt, der mit Gleichungen zu tun hat.

Hier ist eine Tabelle mit einigen häufigen mathematischen Symbolen:

Symbol	Bedeutung	Entity	Dezimal	Hexadezimal
×	Mal	×	×	×
÷	Teilen	÷	÷	÷
±	Plus-Minus	±	±	±
√	Quadratwurzel	√	√	√
∑	Summe	∑	∑	∑

Lassen wir diese in einem mathematischen Ausdruck verwenden:

<p>Die quadratische Formel: x = (-b &plusmn; &radic;(b<sup>2</sup> - 4ac)) &divide; (2a)</p>

Dies wird angezeigt: Die quadratische Formel: x = (-b ± √(b² - 4ac)) ÷ (2a)

Ist es nicht erstaunlich, wie wir komplexe mathematische Formeln mit HTML-Symbolen darstellen können?

Schlussfolgerung

Und hier hast du es, Leute! Wir sind durch die Welt der HTML-Symbole gereist, von Herzen bis zu Währungen und mathematischen Operatoren. Denke daran, dass die Verwendung dieser Symbole wie das Hinzufügen von Gewürzen zu deinem HTML-Eintopf ist - verwende sie klug, um deine Webseiten zu bereichern, ohne sie zu überwältigen.

Bei deinem weiteren Programmierabenteuer habe keine Angst, verschiedene Symbole auszuprobieren. Wer weiß? Vielleicht findest du das perfekte Symbol, das deine Webseite zum Glänzen bringt!

Bevor ich abschalte, hier ist ein kleiner HTML-Witz für dich:

<p>Warum ist die HTML-Tags zum Zahnarzt gegangen?</p>
<p>Es hatte eine schlechte &lt;br&gt;ath!</p>

Weiter codieren, weiter lernen und vor allem: Viel Spaß mit HTML-Symbolen!

Credits: Image by storyset