Zeichenkodierung - Schriftzeichen richtig darstellen (Tutorial)

Oft werden Umlaute (Ä Ö Ü), Akzentzeichen (À É Å Ç Š) oder andere Schriftzeichen (€ ß Σ) falsch auf der Website angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular oder Daten aus der Datenbank können fehlerhafte Zeichen enthalten wie zum Beispiel:




Eine vermeintliche Lösung für dieses Problem ist es, die Umlaute durch benannte Zeichen (Buchstabencode) zu ersetzen. Im Quelltext vieler Websites sieht man dann zum Beispiel folgendes:

Wörter, Überprüfung, Schaltfläche, Änderung, 
Dateigröße, Ökosystem, Fußball, Künstler, …

➤ Es ist absolut nicht notwendig das man Umlaute (per Hand oder durch ein Programm) ersetzt, wenn man die richtige Zeichenkodierung verwendet.

Man kann nämlich festlegen, welche Zeichenkodierung benutzt werden soll – das ist nötig, um die verschiedenen Zeichenkodierungen (Zeichensätze) und Sonderzeichen korrekt darstellen zu können. Wurde diese Zeichenkodierung nicht oder falsch hinterlegt, muss der Browser die Zeichenkodierung „erraten”. Meistens klappt das, aber nicht immer. Falls nicht, erscheinen vor allem Umlaute und Sonderzeichen unleserlich.

1. Browser

➤ Jede ausgelieferte HTML-Seite sollte muss im Header die (richtige) Meta-Tag Angabe besitzen, in der die Zeichenkodierung geregelt wird. Der Browser orientiert sich daran und stellt die Zeichen gemäß dieser Angabe dar. In den meisten Fällen hilft es schon wenn Sie zwischen den <head>-Tags folgende (HTML 5 - Angabe) einfügen:

<meta charset="UTF-8">
UTF-8 hat eine zentrale Bedeutung als globale Zeichenkodierung. Sollen ganze Sätze in einer anderen Sprache dargestellt werden, bietet sich UTF-8 mit einem größeren Zeichenvorrat an.

🖝 Da sich in den vergangenen Jahren UTF-8 (Unicode) in der Programmierung immer mehr durchgesetzt hat, um eines Tages das ganze durcheinander mit den Zeichenkodierungen zu lösen, sollten auch Sie an Ihrer Website (von Anfang an) konsequent mit UTF-8 arbeiten.

Fügen Sie den Meta-Tag noch vor dem <title>-Tag ein, damit auch dieser korrekt angezeigt wird.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Titel der Seite</title>
 </head>
<body>
...
</body>
</html>

2. Editoren

Es ist unbedingt notwendig, dass der Editor die Datei speichert mit welcher die Zeichenkodierung im Dokument (Meta-Tag) angegeben wurde. Sie sollten daher einen Editor verwenden, bei dem Sie die Zeichenkodierung wählen können.

➤ Wählen Sie die Option: UTF-8 ohne BOM aus.

Was ist BOM? Erklärung auf: https://de.wikipedia.org/wiki/Byte_Order_Mark

[Bildschirmfoto / Grafik]
 Kodierung beim speichern wählen (Windows Notepad).
Kodierung beim speichern wählen (Windows Notepad).
[Bildschirmfoto / Grafik]
 Kodierung wählen (Notepad++).
Kodierung wählen (Notepad++).
[Bildschirmfoto / Grafik]
 Format für neue Dateien wählen (Notepad++).
Format für neue Dateien wählen (Notepad++).

Bildschirmfotos: Notepad++ (kostenlos, notepad-plus.sourceforge.net)

3. Eine einheitliche Zeichenkodierung in allen Dateien setzen

➤ Wenn andere Dateien in die Seite eingebunden werden, zum Beispiel mit der PHP-Include()-Funktion, von einer Datenbank oder über externe Text-, CSS-, JavaScript-Dateien, müssen diese die gleiche Zeichenkodierung haben ansonsten können Probleme bei der Darstellung der Zeichen auftreten.

PHP

Einen PHP-Header mit der angegebenen Zeichenkodierung senden. Die Funktion muss vor jeglicher Ausgabe an den Browser erfolgen.

<php
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="de">
 <head>
  …

Arbeitet man mit PHP, dann sollte die: "php.ini"-Datei folgende Einstellung haben: default_charset = "utf-8"

Datenbanken (MySQL / MariaDB, …)

Die Zeichenkodierung bei der Verbindung zur Datenbank einstellen.

<php
// PDO()
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'user', 'pass');

// mysqli()
$db = new mysqli("localhost", "user", "pass", "test");
mysqli_set_charset($db, "utf8");
?>

➤ Die Datenbank-Tabelle sollte auch umgestellt werden, dabei hilft das Programm:

Bilddatei "../html/scripts/mysql_datenbank/phpmyadmin.png" nicht vorhanden!

(ist bei vielen Webhostern bereits auf dem Server verfügbar) die richtige Zeichenkodierung zu setzen.

🖝 Ich empfehle bei MySQL/MariaDB, für Tabellen-Spalten mit Textinhalt (VARCHAR, TEXT, …) entweder die Kollation: utf8_unicode_ci oder utf8mb4_unicode_ci.

Mit utf8mb4_unicode_ci können auch Unicode Symbol-Zeichen (sogenannte Emoji) dargestellt werden.

Tipps

Floodsperre
Um das Flooden (= Zumüllen mit großen Mengen meist sinnlosen Inhalts) von Foren und Gästebüchern etc. zu erschweren oder um zu verhindern das nach dem absenden des Formulars und drücken der F5-Taste (Seite neu laden) die Daten nochmals eingetragen werden, kann die hier vorgestellte Floodsperre einen Schutz bieten.
Artikel über Checkboxen auswählen
Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.
Daten auf mehreren Seiten aufteilen / Kombinierte Formular.- und Blätterfunktion
Damit nicht alle Daten einer DB-Tabelle auf einmal auf der Seite zu sehen sind, sondern übersichtlich auf mehreren Seiten verteilt stehen, benutzt man eine Seitennavigation zum blättern (Pagination).
Erster Eintrag in eine MySQL-Datenbank mit PHP
Eine Anleitung wie man ein Nachrichten-System mit einer MySQL (oder MariaDB)-Datenbank über PHP realisieren kann. Komplett mit Formularen zum eintragen, anzeigen und bearbeiten der Daten.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.