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] Kodierung beim speichern wählen (Windows Notepad).
Kodierung beim speichern wählen (Windows Notepad).
[Bildschirmfoto] Kodierung wählen (Notepad++).
Kodierung wählen (Notepad++).
[Bildschirmfoto] 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

Lokalen Webserver einrichten und verwenden
Um PHP-Scripte auszuführen benötigt man einen Webserver. Um nun nicht jede Datei zum testen erst per FTP auf seinen Webserver zu laden ist es sinnvoll, sich lokal auf dem Rechner einen sog. lokalen Webserver zu installieren.
Grafik als Zeichenkette speichern und wieder als Grafik ausgeben
Grafiken (Bilder) können problemlos als Zeichenkette gespeichert und wieder ausgelesen werden, wie das genau funktioniert und welchen Sinn es hat erfahren Sie hier.
Einfache Kalender mit PHP erstellen
PHP-Kalender können nützlich sein. Sie können so einfach sein wie das Datum anzeigen oder so komplex wie das Einrichten eines Online-Buchungssystems. Diese beiden PHP-Scripte zeigen wie Sie einfache Kalender erstellen. Wenn Sie wissen, wie das geht, können Sie dieselben Konzepte auf komplexe Kalender anwenden, die Sie möglicherweise benötigen.
Fehler 404 mit .htaccess abfangen
Eine Website wird öfters umgebaut, Seiten kommen hinzu, andere Seiten werden entfernt oder bekommen eine neue Adresse. Eine selbst gestaltete Fehler-Weiterleitungsseite, leitet den Besucher sicher zum Angebot der Webseite.

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