62 besökare, 2 medlemmar och 1 Student är online nu
Loopia

Webdesign och HTML

 

Teckenkoder

Att använda en standardiserad teckenkodning är en förutsättning för att dina sidor ska visas likadant oberoende av vilket dator eller program som används. De flesta länder har ju landspecifika tecken som bara används i det egna språket och använder då en teckenkodning som innehåller de tecken som används.

När du använder svenska tecken i dina sidor kan vissa tecken visas felaktigt i webbläsaren. Det gäller framförallt tecknen "ÅÄÖ åäö" som förvrängs och kan se ut som i exemplet nedan:

Problemet i exemplet ovan är att de svenska tecknen ÅÄÖåäö inte finns med i den teckenkodning som används av webbläsaren. En vanlig lösning har varit att använda specialtecken (eng. entities) för åäöÅÄÖ: å ä ö Å Ä Ö

Det finns en bättre lösning och det är att ange vilken teckenkodning du använder så att webbläsaren förstår vilka tecken som ska visas.

Teckenkoderna ASCII, ISO 8859 och UTF-8

Behoven av en teckenstandard uppstod när datorer började kommunicera med varandra och en av de första som användes var ASCII (American Standard Code for Information Interchange). Den amerikanska versionen är idag standardiserad som ISO 646. ASCII använder en 7-bitars kod och kan representera 128 olika tecken och räcker till det engelska alfabetet versalt och gement. Det finns olika landspecifika ASCII-kodningar men de fungerar inte för internationell kommunikation.

ISO 8859 är resultatet av olika utökningar av ASCII och finns i olika versioner. Den vanliga västerländska versionen är ISO 8859-1 (kallas även Latin-1) använder 8-bitars kod och kan representera 256 olika tecken.

När man vill läsa information på olika språk måste man byta variant av ISO 8859 och teckenkodningen måste finnas i programmet som ska läsa dokumentet vilket ofta har inneburit att fel tecken visats. För att samla alla teckenkodningar från alla världens olika språk startades projektet Unicode (läs mer om Unicode hos http://www.unicode.org ). En standardiserad version av Unicode är ISO 10646 som kan innehålla över 1 miljon tecken. För att göra Unicode användbar och effektiv har den resulterat i olika varianter som kallas UTF-8, UTF-16 och UTF-32. UTF-8 är den variant som är mest använd idag.

Ett problem med UTF-8 är att inte alla editorer kan använda teckenkodningen idag. Dessutom lägger UTF-8 till ett "byte-order-mark", kallas också för BOM, för att ange att koden använder 16-bitar (UTF-16) eller 32-bitar (UTF-32) men BOM fyller inte samma funktion i UTF-8. De webbläsare och editorer som inte hanterar UTF-8 korrekt lägger till skräptecken som "" istället för BOM i början av sidans innehåll vilket kan innebära att sidans innehåll förvanskas. Läs mer i guiden Felsökning i PHP och MySQL » om problem med BOM.

Läs mer om teckenkoder, UTF, Unicode och BOM här:
http://www.w3.org/International/tutorials/tutorial-char-enc Öppnas i nytt fönster (Open in new window)
http://www.unicode.org/unicode/faq/utf_bom.html Öppnas i nytt fönster (Open in new window)
http://en.wikipedia.org/wiki/Unicode Öppnas i nytt fönster (Open in new window)
http://en.wikipedia.org/wiki/Byte_Order_Mark
 Öppnas i nytt fönster (Open in new window)

 

Använda UTF-8 eller ISO 8859-1

När du arbetar med webbsidor bör du välja ISO 8859-1 eller UTF-8 men vilken teckenkodning passar bäst för dina behov? En riktlinje är att UTF-8 är den teckenkodning som kommer att användas i framtiden men att alla program och plattformar inte använder UTF-8 idag. Du kommer inte att behöva konvertera dina sidor från UTF-8 till ISO 8859-1 utan tvärtom.

Användningen av specialtecken (eng. entities) för tex åäöÅÄÖ:
å ä ö Å Ä Ö
fungerar både för UTF-8 och ISO 8859-1.

ISO 8859-1 är en fungerande standard för västerländska webbplatser och om din sidor är skrivna på svenska, engelska, franska, spanska, norska , danska, finska, tyska, italienska mm så fungerar det bra med ISO 8859-1. Om du behöver använda kyrilliska eller vissa östeuropeiska tecken kan du använda en annan version av ISO 8859 som är anpassad för språket.

UTF-8 har alla språkversioner inbyggd och du behöver inte välja en specifik version av teckenkodningen. Om du skriver dina sidor på flera olika språk är UTF-8 ett bra alternativ då du inte behöver använda specialtecken (entities) och kan skriva koden med de tecken du skriver i vanlig text.

Webbläsarna använder UTF-8 och om dina sidor är fungerar på webbservern och är fristående från andra system kan du använda UTF-8. Om du däremot jobbar i en blandmiljö med nya och äldre programvaror och databaser kan UTF-8 vara ett osäkert val. Du måste vara säker på att UTF-8 används i alla led från editor fram till databasens tabeller. Om du får felaktig indata från dina webbsidor till i din MySQL-tabell är det med stor sannolikhet teckenkodningen som är fel.

Slutsatsen är att du i första hand ska använda UTF-8 men bör fortsätta använda ISO 8859-1 om du inte är helt säker på att andra program, plattformar, databaser mm klarar UTF-8.

 

Ange teckenkodningen med CHARSET

Du anger vilken teckenkodning dokumenten använder inom <META>.

UTF-8

I exemplet nedan används charset UTF-8. Notera att ÅÄÖåäö skrivs som vanliga tecken.

HTML5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Acme AB</title>
</head>
<body>
<p>Välkommen till företaget...</p>
</body>
</html>

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Acme AB</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Välkommen till företaget...</p>
</body>
</html>

 

ISO 8859-1

I exemplen nedan används charset ISO 8859-1. Notera att specialtecken (entities) används för ÅÄÖåäö.

HTML5

<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Acme AB</title>
</head>
<body>
<p>V&auml;lkommen till f&ouml;retaget...</p>
</body>
</html>

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Acme AB</title>
</head>
<body>
<p>V&auml;lkommen till f&ouml;retaget...</p>
</body>
</html>

 

Spara dokumentet med samma teckenkod som CHARSET

Det räcker inte att bara ange CHARSET i dokumentets kod. Du måste också se till att din editor sparar dokumentet med samma teckenkod. Här visas hur du kontrollerar att dokumentet sparas med korrekt teckenuppsättning i olika program.

Notepad/Anteckningar

Välj att "Spara som" och kontrollera kodning:

 

Notepad++

Välj menyn "Format" och konvertera till UTF-8 (om inte kodningen redan är denna som i exemplet):

 

Dreamweaver:

Välj snabbkommando CTRL+J för att komma till sidans egenskaper. Välj kategorin "Titel/kodning":

 

Problemet med Notepad (Anteckningar)

Vanliga teckenkodningar (charset) för webbsidor är ISO 8859 och UTF-8 men det är inte alla editorer som klarar av att ange den rätta teckenkodningen. Här får programmet Notepad (Anteckningar) fungera som exempel för problem som kan uppstå.

Programmet Anteckningar (Notepad) i Windows används ofta för att redigera HTML-kod. När du sparar dokument i programmet används en kodning som kallas ANSI och bygger på Microsofts teckenkod Windows-1252. Detta är ingen standardiserad kodning och kan ge problem i andra plattformar än Windows (läs mer här http://en.wikipedia.org/wiki/Windows-1252  Öppnas i nytt fönster (Open in new window)).

Många editorer använder Windows-1252 som förvald teckenkodning men om du väljer att spara dina dokument som ISO 8859-1 kan det fungera ändå. Här är ett exempel där tecknen ÅÄÖåäö skrivs både som vanliga tecken och som specialtecken. När dokumentet sparas används standardinställningen ANSI:

När sidan visas i Firefox fungerar specialtecknen men de vanliga tecknen förvrängs:

Teckenkodningen ISO 8859-1 finns inte som val men du kan spara dokumenten med teckenkodningen UTF-8:

... det resulterar i att tecknen visas korrekt:

Slutsatsen är att du alltid ska spara med UTF-8 i Notepad eller använda en annan editor. Läs mer i guiden HTML-editor - Notepad++ »

 

TIPS! Läs mer i guiden Felsökning i PHP och MySQL » om problem som är relaterade till Notepad (Anteckningar) och teckenkodning.