HTML - ASCII-Codes: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Heute begeben wir uns auf eine aufregende Reise in die Welt der ASCII-Codes und ihrer Rolle in HTML. Keine Sorge, wenn Sie noch nie von ASCII gehört haben – bis zum Ende dieses Tutorials werden Sie ein ASCII-Profi sein!

HTML - ASCII Codes

Was ist ASCII?

ASCII steht für American Standard Code for Information Interchange. Es ist wie ein geheimer Code, den Computer verwenden, um Buchstaben, Zahlen und Symbole zu verstehen. Stellen Sie sich vor, Sie tauschen Notizen im Unterricht aus, aber anstatt Wörter zu schreiben, verwenden Sie Zahlen, um mỗi Buchstabe darzustellen. Das ist so, wie ASCII für Computer funktioniert!

HTML-Codes - Tabelle der ASCII-Zeichen und Symbole

Lassen Sie mit einer有趣的 Tatsache beginnen: Wussten Sie, dass jeder Character, den Sie auf Ihrer Tastatur eingeben, einen eindeutigen ASCII-Code hat? Das ist wahr! Hier ist eine Tabelle mit einigen häufigen ASCII-Codes:

Character ASCII-Code
A 65
a 97
0 48
Leerzeichen 32

In HTML können wir diese Codes verwenden, um Zeichen anzuzeigen. Hier ist, wie man das macht:

<p>Der Buchstabe A: &#65;</p>
<p>Der Buchstabe a: &#97;</p>
<p>Die Zahl 0: &#48;</p>

Wenn Sie dies in einem Browser ansehen, wird folgendes angezeigt:

Der Buchstabe A: A Der Buchstabe a: a Die Zahl 0: 0

Cool, oder? Es ist, als ob wir die Computersprache sprechen!

Warum ASCII-Codes in HTML verwenden?

Vielleicht fragen Sie sich, "Warum machen wir uns die Mühe mit diesen Codes, wenn ich einfach den Buchstaben eingeben kann?" Great Frage! Manchmal werden bestimmte Zeichen möglicherweise nicht auf allen Geräten oder Browsern korrekt angezeigt. Die Verwendung von ASCII-Codes stellt sicher, dass Ihr Inhalt genau so appears, wie Sie es intendieren, unabhängig vom System des Benutzers.

ASCII-Gerätekontrollzeichen

Nun lassen Sie uns über einige spezielle ASCII-Zeichen sprechen, die Sie nicht sehen können, aber sehr wichtig sind. Diese werden als Gerätekontrollzeichen bezeichnet und helfen dabei, wie Text angezeigt oder verarbeitet wird.

Zum Beispiel:

  • ASCII 10 ( ) ist ein Zeilenvorschub
  • ASCII 13 ( ) ist ein Wagenrücklauf

So könnten Sie sie verwenden:

<p>Dies ist Zeile 1.&#10;Dies ist Zeile 2.</p>

Dies wird angezeigt als:

Dies ist Zeile 1. Dies ist Zeile 2.

Druckbare ASCII-Zeichen

Druckbare ASCII-Zeichen sind diejenigen, die Sie tatsächlich auf Ihrem Bildschirm sehen können. Sie umfassen Buchstaben, Zahlen, interpunktion und einige Symbole. Sehen wir uns einige Beispiele an:

<p>Ausrufezeichen: &#33;</p>
<p>Dollarszeichen: &#36;</p>
<p>Prozentsymbol: &#37;</p>

Dies wird angezeigt als:

Ausrufezeichen: ! Dollarszeichen: $ Prozentsymbol: %

Ein cooler ASCII-Kunstbeispiel

Möchten Sie etwas Cooles sehen? Wir können ASCII-Zeichen verwenden, um einfache Grafiken zu erstellen! Schauen Sie sich das an:

<pre>
___________
/           \
/   ASCII Kunst \
\    ist spaß!  /
\____________/
</pre>

Dies erstellt eine einfache Sprechblase in Ihrem Browser. Cool, oder?

Erweiterte ASCII-Codes

Nun tauchen wir etwas tiefer ein. Erweiterte ASCII-Codes ermöglichen es uns, még mehr Zeichen darzustellen, einschließlich akzentuierte Buchstaben und spezielle Symbole. Diese Codes reichen von 128 bis 255.

Hier ist ein Beispiel:

<p>Urheberrechtszeichen: &#169;</p>
<p>Eurozeichen: &#8364;</p>
<p>Registriertes Warenzeichen: &#174;</p>

Dies wird angezeigt als:

Urheberrechtszeichen: © Eurozeichen: € Registriertes Warenzeichen: ®

Praktische Verwendung von erweiterten ASCII-Codes

Stellen Sie sich vor, Sie erstellen eine Website für ein Café in Paris. Sie könnten erweiterte ASCII-Codes verwenden, um französische Wörter mit Akzenten korrekt anzuzeigen:

<p>Caf&#233; au lait</p>
<p>Cr&#232;me br&#251;l&#233;e</p>

Dies stellt sicher, dass "Café au lait" und "Crème brûlée" korrekt angezeigt werden, selbst wenn das System des Benutzers keine französischen Zeichen unterstützt.

Fazit

Und das war's, Leute! Wir haben die faszinierende Welt der ASCII-Codes in HTML durchquert. Von grundlegenden Buchstaben bis hin zu schicken Symbolen wissen Sie jetzt, wie Sie diese Codes verwenden können, um sicherzustellen, dass Ihr Webinhalt korrekt und kreativ angezeigt wird.

Denken Sie daran, Übung macht den Meister. Versuchen Sie, eine einfache HTML-Seite zu erstellen und experimentieren Sie mit verschiedenen ASCII-Codes. Sie könnten überrascht sein, was Sie erstellen können!

Bevor wir aufhören, hier ist eine schnelle Herausforderung für Sie: Können Sie ein Lächelnsymbol nur mit ASCII-Codes erstellen? Hinweis: Sie benötigen ☺ (☺).

Frohes Coden und möge Ihre Webseiten immer so appear, wie Sie es intendieren!

Credits: Image by storyset