Избор на подходящ енкодинг (encoding) 3
Сподели урока
В предишния урок научи как да използваш онлайн валидатора, за да проверяваш кода на твоята страница. При валидирането чрез качване на файл обаче имахме малък проблем с енкодинга на файла.
Липсващ или грешен енкодинг на страницата е една от най-често допусканите грешки от много уеб разработчици. За съжаление това се осъзнава много по-късно, когато вече сме създали няколко страници. Точно тогава получаваме странни резултати, които допълнително усложняват нещата. За да не изпаднем в такава ситуация е много важно да предприемем необходимите мерки още от самото начало. В този урок ще разгледаме как става това.
Преди да продължим нека си отговорим на един въпрос.
Какво е екодинг (encoding) ?
Енкодинг (на английски encoding) е начина, по който всички букви, цифри и всякакъв друг вид символи се запазват, за да бъдат разбираеми за компютъра / браузъра / мобилното устройство и др.
Това беше кратката версия. Ето я дългата.
Текстовия редактор, който използваме за създаването на нашите уеб страници запазва файловете с определена кодировка. Проблема най-често се забелязва, когато текста на нашата страница е написан на кирилица (или съдържа други специални символи). Ако запазим страницата с неподходящ енкодинг, който не поддържа кирилица например, при отварянето на страницата в браузър виждаме, че текста написан на “неразбираемия” език се показва по странен начин (например ��?�?? или само ??????).
Затова освен запазването на файла с подходяща кодировка е важно и някъде в този файл изрично да зададем енкодинга, който искаме да се използва при отварянето на файла чрез браузър.
За сега оставяме теориите на страна. Нека видим как изглежда на практика.
Запазване на файла с UTF-8 (without BOM енкодинг)
Стъпка 1
Нека използваме кода от урока “Моята първа уеб страница”. Създай нов документ в текстовя редактор, с който ще работиш и препиши кода. Това е удобен момент да упражниш знанията, които придоби до сега. Пробвай се да напишеш кода без да гледаш в примера. Накрая свери резултатите.
Стъпка 2
Промени кода в <body> като добавиш два параграфа с текст. Всичко останало нека остане същото. След промяната кода трябва да изглежда така:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Моята първа страница</title> </head> <body> <p>Здравей свят.</p> <p>Hello world.</p> </body> </html>
Новото в този код, е елемента <p>. Този елемент се използва винаги, когато искаме да добавим параграф в нашата страница. Параграфа може да съдържа други елементи като например текст, снимки, линкове или микс от всичко това. Елемента <p> се поддържа от всички браузъри.
Стъпка 3
От менюто Encoding (1) избери Encode in UTF-8 without BOM (2).
Стъпка 4
Запази файла и го отвори с браузър. Резултата е малко неочакван.
Текста, който е на латиница (3) е абсолютно същия. При него промяна не се забелязва, но текста на кирилицата (1 и 2) се превърна в напълно неразпознаваеми символи. Защо стана така?
Обяснение
Въпреки, че запазихме файла под UTF-8 (without BOM) енкодинг браузъра реши да използва друг енкодинг при отварянето на страницата.
Това е така, защото никъде в нашия документ не сме задали вида енкодинг, който искаме браузъра да използва при отварянето на нашата страница. Запазването на файла с UTF-8 (without BOM) енкодинг в случая не е достатъчно. Трябва някъде в страницата изрично да зададем енкодинга, който искаме да се използва.
Когато отворим нашата страница в браузър той проверява вида енкоинг, който сме задали, и прави всичко по силите си да покаже страницата с избрания от нас енкодинг. Обаче, когато пропуснем да споменем с какъв вид енкодинг искаме да се отваря нашата страница, браузъра все пак трябва да използва някакъв енкодинг затова той отваря страницата с енкодинга зададен по подразбиране.
ЗабележкаТермина “по подразбиране” е много важен. Това означава, че когато няма зададена никаква друга стойност, браузъра ще избере тази, която е зададена от хората, които са го създали.
По подразбиране голяма част от браузърите използват ISO-8859-1 екодинг.
Този вид енкодинг поддържа числата от 0 до 9, всички малки и колеми букви от английската азбука и някои специални символи (като ©, £ и други). Също така този вид енкодинг поддържа буквите специфични за някои Западноевропейски страни (например Å). Точно затова текста Hello world. остана без промяна.
Както става ясно кирилица не се поддържа и това е причината текста да изглежда толкова странно.
За да видиш енкодинга, който браузъра използва, отвори менюто View (1), след което избери Character Encoding (2) и в подменюто, което ще се отвори ще видиш енкодинга, който браузъра е избрал. В случая виждаме, че браузъра разчита на Western (ISO-8859-1) енкодинг, за да “прочете” нашата страница.
Решение
Един от начините да решим този проблем е като ръчно изберем енкодинга, който браузъра да използва. Отново, отвори менюто View, след което избери Character Encoding (2) и от подменюто избери Unicode (UTF-8) (3).
Страницата ще се презареди и текста ще бъде отново ясен и четлив. За съжаление промените, които направихме са временно решение. В момента, в който затворим страницата и я отворим отново, текста написан на кирилица ще изглежда както преди.
Все пак сме на прав път. Видяхме, че UTF-8 енкодинга реши проблема (макар и за кратко).
Надявам се, че всичко казано до тук има някакъв смисъл и е лесно за разбиране. Не се притеснявай да зададеш своите въпроси или да споделиш своя коментар след урока.
Може би все пак се интересуваш как ще отстраним проблема, след като най-вероятно искаш да използваш кирилица на твоя уеб сайт. Целта ни е да открием начин, който ни позволява да зададем енкодинга на страницата. Така ще накараме браузъра да използва енкодинга, който ние искаме. Следващия метод ще ти покаже как става това.
Запазване на файла с UTF-8 (without BOM енкодинг) + meta елемент
Ако си спомняш, в урока “Валидиране на уеб страница” използвахме един нов meta елемент. Добавянето му позволи на страницата да се валидира напълно. Този елемент не се използва само, за да ни помогне да валидираме нашата страница. Неговата цел е много по-важна. Нека видим защо е толкова необходим.
В този пример ще използвам Notepad++. Ако предпочиташ друг редактор, реда на менютата най-вероятно ще бъде различен, но принципа на работа трябва да е един и същ.
Стъпка 1
Отвори текстовия редактор и създай нов документ. Препиши кода от по-рано, но този път добави meta елемента, за който научи в урока “Валидиране на уеб страница”. След промяната кода трябва да изглежда така:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Моята първа уеб страница.</title>
</head>
<body>
<p>Здравей свят.</p>
<p>Hello world.</p>
</body>
</html>
Стъпка 2
Запази страницата под UTF-8 енкодинг и я отвори в браузъра. Резултата трябва да е нещо такова:
Съдържанието на елемента <title> е видимо в горния ляв ъгъл (1), а съдържанието на елемента <p> (2) е текста на страницата.
Уау. Всичко работи точно както трябва. Текста написан на кирилица е ясно четлив. Файла е запазен с UFT-8 енкодинг, а meta елемента казва на браузъра да използва UTF-8 енкодинг, за да покаже текста на страницата. Точно това, от което се нуждаехме.
Стъпка 3
За да сме сигурни, че браузъра използва UTF-8 енкодинг можем набързо да проверим. От менюто View (1) избери Character Encoding (2) и в подменюто ще видиш, че този път браузъра използва Unicode (UTF-8) енкодинг (3).
Обяснение
Както виждаш, избора на енкодинг е изключително важен фактор за един сайт. Това е още по-важно, когато текста на страницата е написан на кирилица.
Преди няколко години бе широко разпространено използването на windows-1251 за енкодинг на страницата. Този тип енкодинг е специално създаден да поддържа езици, които използват кирилица (като български, руски и др.), но с течение на времето windows-1251 се измести от Уникода.
Уникода (на английски Unicode) е универсална кодировка, която е разработена, за да реши проблема при писане на текст на различни езици.
Повече информация за Уникода.
UTF-8 е част от Unicode като UTF-8 една от често най-използваните кодировки при създаването на уеб страници. Уникода съдържа повече от 110 000 символа, което ни дава сигурност, че текста на нашата страница ще бъде правилно прочетен от браузъра и нашите посетители.
Обобщение
Има 3 важни неща, които трябва да запомниш от този урок:
- Винаги запазвай файловете под UTF-8 without BOM кодировка;
- Ако текстовия редактор, който използваш няма опция да запазва файловете под UTF-8 without BOM, тогава поне бъду сигурен/на, че запазваш файловете с UTF-8 енкодинг.
- Винаги използвай meta елемента с UTF-8 енкодинг във всяка страница (<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />). Дори, когато страницата ти е на английски;
Вариантите, които изпробвахме в този урок са свързани с изграждането на уеб страница, която не е свързана с датабаза. Ако твоя сайт е свързан с датабаза, от която вадиш съдържанието, използването на подходящ енкодинг на датабазата е също толкова важно. За съжаление този урок не дава насоки за това как да настроим правилно енкодинга на датабазата. Това ще бъде тема на разговор в уроците за php & MySQL.
Надявам се, че урока ти хареса и го намираш за полезен. Ще се радвам, ако споделиш своя коментар след урока.
Използвани снимки
Снимка към урока: poisson-lune
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Поздравления за урока! Изключително полезен. ;)
Сайтът е само за HTML/CSS, но за ползващите MySQL: Нека и колацията на базата данни бъде utf8_general_ci! За да Ви е чиста съвестта. :D
2
Радвам се, че го намираш за полезен. :)
Твоя съвет е също толкова ценен и съвсем точен. Много хора не обръщат голямо внимание на това в началото и по-късно имат доста неприятности.
3
Здравейте,
Може ли да помогнете освен с енкодинга, имам проблем и с изписването на html документ на БГ. Когато е кръстен с кирилица, html документа се чупи в браузера? Как може да се преодолее този проблем?
Благодаря предварително.