Little Boxes – die HTML-Basics

Allgemeine Sonderzeichen kodieren

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sonderzeichen (Character Entities) werden im Quelltext kodiert, damit diese unabhängig vom verwendeten Zeichensatz in allen Browsern weltweit korrekt dargestellt werden. Lassen Sie sich in diesem Film zeigen, welche Besonderheiten es dabei zu beachten gilt.

Transkript

Sie sehen hier im Editor die Startseite "index.html" und im Footer sehen Sie hier ein Sonderzeichen: &middot; dass im Browser hier die Startseite als kleiner Punkt in der Mitte der Zeile dargestellt wird. Das ist ein allgemeines Sonderzeichen, der Browser erkennt an dem &, dass ein Sonderzeichen beginnt, und an dem ; dass es wieder aufhört. Dazwischen steht ein Kürzel, das er kennt, das darf man sich nicht selber ausdenken, und das übersetzt er dann in ein bestimmtes Zeichen. Es gibt noch eine ganze Menge mehr von diesen Kürzeln, und damit man die nicht alle auswendig lernen muss, gibt es Referenzen, und ich zeige Ihnen hier im "selfhtml - Wiki" auf der Startseite hier die Seite Referenzen, oder Referenz, und hier bei HTML-Referenz gibt es eine Referenz zu den benannten Zeichen. Hier ist ein Inhaltsverzeichnis, und wenn ich etwas nach unten scrolle, dann sieht man hier schon HTML-eigene Zeichen, und dann kommen hier die ersten echten Sonderzeichen, Akut, Micro, Absatz, und der Middot, ein Punkt in der Mitte der Zeile, der hier mit dem schönen Namen Mittelpunkt bezeichnet wird. Hier kommt alles mögliche, von griechischen Buchstaben bis hin zu mathematischen Symbolen, technischen Symbolen, diversen Pfeilen, und hier ganz unten bei "diverse Symbole", da finden Sie einen etwas dickeren Punkt, ein Bullet-Zeichen mit der Abkürzung bull, &bull; das möchte ich einmal ausprobieren, ob das nicht etwas deutlicher ist, also wechsle ich wieder rüber zum Editor, markiere die drei Middot-Sonderzeichen hier, indem ich die Steuerungstaste gedrückt halte, man kann die natürlich auch einzeln austauschen oder durchsuchen und ersetzen, speichere das ganze, und habe hier einen bull. Gespeichert ist, rüber in den Browser, auf die Startseite und neu laden, und Sie sehen, hier ist ein etwas deutlicherer Punkt, ein Bullet, ein Aufzählungszeichen mit &bull; . Viele dieser Sonderzeichen kann man, wenn man konsequent Unicode als Zeichensatz benutzt, das wird ja hier oben deklariert, im Head der Seite, da steht Charset UTF-8. Wenn das konsequent gemacht wird, dann braucht man Umlaute und andere Sonderzeichen nicht mehr auf diese Art zu codieren, aber es gibt hier in der Referenz ganz oben die sogenannten HTML-eigenen Zeichen, und die muss man auf jeden Fall weiterhin codieren. Die bekanntesten sind das &, und die öffnende und die schlieβende spitze Klammer. Das & haben Sie eben schon gesehen, hier im Einsatz, das leitet ja ein Sonderzeichen ein. Wenn sie also wirklich ein & auf Ihrer Seite unterbringen möchten, dann muss man das auch codieren, und Sie haben eben hier in der Referenz schon gesehen, das ist als &amp, kurz für Ampersand; Das muss man dementsprechend so codieren. Ich schreibe das hier einmal hin, und da ist es schon in Sicht. Speichern, nun sollte neben der Faxnummer auf der Startseite ein & erscheinen. Das müssen wir codieren, ansonsten denkt der Browser, da kommt ein Sonderzeichen, und das ist dann gar nicht der Fall, wenn ich nur ein & auf die Seite schreibe. Ebenfalls codiert werden müssen öffnende und schlieβende spitzen Klammern. Ich schreibe hier mal hin, ein Absatz beginnt mit dem Anfangstag... So, <p, und jetzt räumen wir den weg, so, und jetzt ist das nicht codiert, ich habe das einfach so hingeschrieben, der Browser kommt jetzt durcheinander, weil hier wird ein Absatz geöffnet, hier wird noch einer geöffnet, und hier wird er erst wieder geschlossen. Im Browser sieht das dann so aus, dass Sie hier einen leeren Absatz haben, und das wollten wir ja eigentlich nicht erreichen. Deswegen müssen jetzt diese Sonderzeichen codiert werden. Das < ist &lt "less than" und ein ; das ist &gt "greater than" ; So, speichern, jetzt ist das codiert, und jetzt weiss der Browser, dass nicht sein Anfangstag gemeint ist, sondern dass er hier ein < und darstellen soll, und das sieht so aus: Ein Absatz beginnt mit dem Anfangstag <p. Diese HTML-eigenen Zeichen müssen nach wie vor codiert werden, die meisten anderen Zeichen kann man auch direkt eingeben, wie zum Beispiel Umlaute hier, die musste man früher auch codieren, ein ü war zum Beispiel ein u Umlaut, so sah das früher aus. Das ist heute nicht mehr nötig, wenn man konsequent auf UTF8 setzt, und das ist eigentlich üblich. So, diese Zeile will ich mal wieder aus dem Dokument entfernen. einmal speichern, das Bullet soll drinbleiben. Ein Sonderzeichen möchte ich Ihnen trotzdem noch kurz zeigen, es hat eine besondere Bedeutung, und zwar steht hier gleich als erstes das nbsp "non breaking space", ein erzwungenes Leerzeichen, oder wie es oft auch genannt wird, eine geschützte Leerstelle. Geschützte Leerstellen kann man verwenden, um einen Umbruch zu verhindern, hier zum Beispiel nbsp, da ist es schon zu sehen, dann würde an dieser Stelle kein Umbruch mehr erfolgen, oder man verwendet sie einfach, um ein bisschen Abstand zwischen zwei Punkten zu erzeugen, wenn ich normal einfach nur Leerstellen mache, werden die zu einer Leerstelle zusammengefasst, wenn man stattdessen einen nonbreakable space verwendet, dann ist alles in Ordnung. Sie werden diese &nbsp-Kürzel öfter im Quelltext sehen, bei verschiedenen Webseiten, dann wissen Sie, was damit gemeint ist. So, die Liste hier in der Zeichenreferenz ist komplett zum Studieren. Zum Abschluss hier noch eine andere Referenz: unicode-table.com/de Und hier kann man suchen, nach bestimmten Zeichen, eine komplette Liste, und man kann die dann einfach kopieren. Hier zum Beispiel ein Ying/Yang Zeichen, da klickt man einmal drauf, und dann bekommt man hier die Unicode-Nummer, oder den HTML-Code als Nummer. Hier einfach markieren, in die Zwischenablage kopieren, und dann kann man das benutzen.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!