Кодування російських букв у HTML. HTML кодування. В яке кодування зберігати веб-сторінку. Тестовий файл для перевірки кодування

При створенні сайту у веб-майстрів-початківців часто з'являються питання: в якому кодуванні робити сайт, чим відрізняється UTF-8 від windows-1251 і як його прописувати в META Charset HTML-сторінки сайту. Відповіді на всі ці питання у цій статті.

Що таке кодування сайту і як воно працює

Кодування можна подати у вигляді таблиці, що складається з різних літер, цифр та інших символів, зрозумілих людині, які закодовані певним чином. Коли ви відкриваєте текстовий файл, до яких відносяться в тому числі HTML-сторінки, то комп'ютер зчитує із заголовка файлу в якому кодуванні він був збережений і виводить текст у відповідному кодуванні перетворюючи комп'ютерні дані на вигляд зрозумілий людині зіставляючи ці дані з таблицею кодування. Якщо інформація про кодування із заголовка файлу збігається з кодуванням, у якому збережені дані в HTML-сторінці, то користувач бачить звичні йому літери, цифри та інші символи. Якщо є розбіжність, то в результаті користувачеві виводиться незрозумілий набір символів, особливо це відбувається у старих поштових програмах. Якщо користувач отримав листа з незрозумілими крякозябрами, то просто перебираючи різні кодування, зазвичай вдається вгадати і вибрати ту, в якій написано лист, і в результаті незрозумілий набір символів перетворюється на зрозумілий людині текст.

Те саме відбувається і з HTML-сторінками сайту. Якщо документ був збережений, наприклад, у кодуванні UTF-8, а в самому документі прописаний META-тег, що вказує, що це кодування windows-1251, то браузер знову ж таки буде зіставляти збережені у файлі дані з таблицею вказаного йому кодування і оскільки символи закодовані по -різному, то браузер виведе замість звичного тексту незрозумілий набір символів або частина літер може бути в нормальному вигляді, а інші літери або символи можуть виводитися, наприклад, у вигляді знаків питання. Все вище сказане стосується навіть відображення імен файлів.

Створюючи новий документ у текстовому редакторі краще відразу переконатися, що вибрано потрібне кодування. Сучасні редактори дозволяють перетворити текст відкритого документа з одного кодування на інше, а стандартний Блокнот дозволяє вибрати кодування тільки при збереженні файлу.

Найпоширеніші кодування

З попереднього пункту ви вже знаєте, що таке кодування і чому настільки важливо правильно прописати його в коді сторінок сайту. Давайте тепер з'ясуємо, яке з безлічі кодувань краще вибрати для майбутнього сайту. Оскільки найпоширенішою і найбільш зрозумілою в освоєнні завжди була операційна система Windows, більшість веб-розробників створювали HTML-сторінки в кодуванні windows-1251 (ANSI), яка використовувалася за замовчуванням. Але windows-1251 підтримує не дуже велику кількість букв і символів, а розробники хочуть використовувати у своїх текстах різні стрілочки, серця, квадратики та інші символи, в тому числі є необхідність поєднувати слова з різних мов в одному документі, тому на зміну їй вже давно прийшла більш розширена UTF-8 і більшість розробників використовують саме це кодування.

Проблеми з кодуванням не тільки у HTML-сторінці

Сайт, незалежно від того чи є він просто набором статичних HTML-документів або складних динамічних скриптів, що генерують сторінки на льоту, розміщується на веб-сервері, який також працює з певним кодуванням. І якщо сервер видає інформацію в одному кодуванні, а ваші сторінки або скрипти збережені в іншому кодуванні, то знову ж таки можуть бути проблеми з відображенням сторінок у браузері користувача. Багато хостинги дозволяють змінювати налаштування та вибрати кодування відповідно до того, яке використовується у файлах сайту, через панель керування або прописати його у файлі.htaccess, якщо на хостингу використовується популярний веб-сервер Apache.

Майже жоден сучасний сайт не обходиться без використання бази даних MySQL і вона також може стати джерелом проблем із кодуванням. Якщо файли сайту збережені в одному кодуванні, а інформація в базі даних в іншій, то на сторінці та частина інформації, яка виводиться з бази даних, може відображатися у вигляді тих самих питань або інших незрозумілих символів. Щоб уникнути проблем із кодуванням, вона повинна бути однаковою для веб-сервера, бази даних MySQL, у скриптах, у HTML-сторінках сайту та в META-тезі, який прописується в HTML-коді. Якщо є проблеми з відображенням тексту, то перевіряйте на наявність проблеми все перераховане вище.

META Charset HTML-документа

Щоб повідомити браузеру та пошуковим системам у якому кодуванні збережені сторінки сайту в їхньому коді прописується META Charset.

Для кодування windows-1251:

Для кодування UTF-8:

Тепер ви знаєте, що таке кодування сайту і де шукати проблеми, якщо в будь-якій частині сайту неправильно відображається текст.

Копіювання статті заборонено.

Практичний кожен новачок в області веб-розробок рано чи пізно стикається з проблемами кодування у своїх проектах. І тоді, як за написаним сценарієм, починається бомбардування форумів із питаннями про те, як перемогти ненависні. кракозябриПереважна більшість проблем вже давно відомі і лікуються досить легко, потрібно просто знати. де болить і яку таблетку прийнятиТому пропоную розібрати найбільш популярні помилки, через які ця проблемка з'являється і можливо, що мої рекомендації позбавлять вас від подальших з ними зіткнень.

По-перше, наполегливо рекомендую, щоб всі документи були в одному кодуванніі база даних, а саме поля з рядковими даними, мали таке саме кодування. Встановлюється вона при створенні бази або можна вказувати порівняння для кожного окремого поля. Якщо створюєте БД за допомогою phpMyAdmin, то складнощів виникнути не повинно: закладка "Бази даних" > у полі під "Створити базу даних" вписуєте ім'я вашої майбутньої БД > список "Порівняння", що випадає поряд. Якщо ж створюєте базу SQL-запитом, то пишіть приблизно таке:

CREATE DATABASE IF NOT EXISTS `my_db_name` CHARACTER SET utf8 COLLATE utf8_general_ci;

Вибір кодування залишається за вами, але я порадив би вибрати для документів " UTF-8 без BOMі порівняння для бази utf8_general_ci" (юнікод багатомовний, реєстронезалежний). Тільки не забудьте підстрахуватися та зробити дамп перед маніпуляціями з БД! Не буду тут розписувати, що таке BOM , але якщо дуже образно і на пальцях, то це такий невидимий маркер, який планувався для розрізнення кодувань UTF-16LE і UTF-16BE, але з деяких причин виявився незатребуваним і тепер заважає веб -розробникам жити спокійно;) Виглядає BOM як символ U+FEFF і селиться на початку документа. А чому все-таки UTF-8? Ось хоча б кілька причин... Ви без проблем зможете виводити на екран як кирилицю, так і цитату з віршів Аль-Мутанаббі або китайські ієрогліфи. Все тому, що в тому ж кодуванні windows-1251 (cp1251) лише 256 символів, у той час, як у UTF-8 їх близько ста тисяч, плюс до всього спеціальні символи, піктограми, значки і т.д. Якщо ви збираєтеся використовувати на своєму сайті ajax-запити, то це також додає плюс до кодування UTF-8, тому що саме з цим кодуванням дружить об'єкт XMLHttpRequest, а з іншими доведеться перекручуватися і іноді безуспішно. Та сама карта сайту (sitemap.xml), яка служить для індексації пошуковими системами, працює тільки, якщо цей файл створено з кодуванням UTF-8. Крім того, це кодування є стандартом для багатьох функцій PHP і стандартом, який рекомендований W3C .

При створенні нового документа - все ясно, а як бути з існуючим, у якому бажано змінити кодування? Один із найпростіших способів - це відкрити документ у Notepad++, вибрати в меню Кодування" та у списку " Перетворити на UTF-8 без BOMДалі змінюємо метатег з визначенням кодування:

І для php-файлів можна встановити відповідний заголовок, але тільки якщо файл не підключений в іншому документі, де такий заголовок вже буде відправлений раніше. Це стосується як заголовка в метатезі, так і відправленого функцією header:

Header("Content-Type: text/html; charset=utf-8");

Перевіряємо результат у браузері. Тут може бути кілька варіантів:

1. Все виводиться чудово і питання закрито
2. Статично прописані дані відображаються нормально, але дані з БД - все там же "кракозябрами"
3. Нічого не змінилося і кодування залишилося кривим

Почнемо з останнього пункту. Щасливі власники виділених серверів або VPS/VDS можуть змінити кодування для директиви default_charsetу конфігураційному файлі php.ini. Тим, хто доступу до php.ini не має або має, але необхідно змінити кодування тільки для одного сайту, можна використовувати файл.htaccess, записавши в нього наступне:

# в принципі, вистачає рядки нижче: AddDefaultCharset UTF-8 # але іноді можуть знадобитися додаткові установки: DefaultLanguage uk php_value default_charset "utf-8"

Файл.htaccess знаходиться в корені вашого сайту. Якщо ви його там не виявили, створюємо самі. У звичайному блокноті створюєте документ > " Зберегти як" > Тип файлу вибрати " Усі файли" > у полі "Ім'я файлу" записуємо тільки точку та розширення " .htaccess".

Переходимо до другого пункту - якщо базу перевели на потрібне кодування, але дані відображаються на сторінці криво. Для початку потрібно переконатися, що символи в самій базі відображаються нормально. Якщо кодування там "не попливло", то можна або знову апелювати до файлів конфігурації, або зробити запит відразу після підключення до бази:

SET NAMES utf8;

* я пишу сам текст запиту, але т.к. не знаю, яке розширення ви використовуєте для роботи з MySQL, покажу кілька варіантів:

// для застарілого mysql_ * $ db = mysql_connect ( "localhost", "username", "password"); mysql_select_db("db_name", $db); mysql_query("SET NAMES utf8"); // для PDO та версій php нижче 5.3.6 $dbh = new PDO("mysql:host=localhost;dbname=db_name", "username", "password"); $dbh->exec("SET NAMES utf8"); // для PDO і версій php 5.3.6 і новіше, можна вказувати прямо під час створення об'єкта $dbh = new PDO("mysql:host=localhost;dbname=db_name;charset=utf8", "username", "password"); // або $db = новий PDO("mysql:host=localhost;dbname=db_name", "username", "password", array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"))); // для MySQL $mysqli = new mysqli("localhost", "username", "password", "db_name"); $mysqli->set_charset("utf8");

Якщо вже торкнулося питання "застарілого mysql_*", то хочу звернути вашу увагу на текст виділений червоним у документації php. Варто задуматися...
Якщо у вас була одна із стандартних проблем, то виконавши деякі або всі вищеописані кроки, з кодуванням питання буде вирішено позитивно. Але так само хотілося б згадати про деякі функції, які можуть стати в нагоді в нестандартних ситуаціях. Докладніше про них ви зможете прочитати в документації, а я лише наведу кілька прикладів, не вдаючись у подробиці:

Mb_internal_encoding() За допомогою цієї функції ми можемо встановити або отримати поточне кодування скрипту: mb_internal_encoding("UTF-8"); // встановлюємо echo mb_internal_encoding(); // без аргументу - отримуємо mb_http_input() і mb_http_output() Дві функції, які визначають, встановлюють чи отримують кодування символів HTTP запиту чи виведення: print_r(mb_http_input("I")); // Визначаємо кодування вхідних даних http-запиту mb_http_output("UTF-8"); // встановлюємо кодування для виводу http echo mb_http_output(); // отримуємо поточне кодування символів http-висновку iconv() Функція перетворює символи рядка в потрібне кодування: echo iconv("utf-8","cp1251","Привет, РјРёСЂ!"); // Привіт світ! mb_convert_encoding() Функція схожа на iconv(), але, на мій погляд, краще, т.к. працює більш адекватно. echo mb_convert_encoding("мривет, РјРёСЂ!","cp1251","utf-8"); // Привіт світ!

Та й взагалі, не забуваємо про аналоги функцій для роботи з багатобайтними рядками. Найчастіше вони мають таку ж назву, але з приставкою mb_. Різницю відчути досить легко. Візьмемо, наприклад, функції strlen()і mb_strlen()і проведемо експеримент, вимірявши довжину рядка:

// встановимо внутрішнє кодування mb_internal_encoding("utf-8"); // для латинських символів різниці немає echo strlen ("incode"); // 6 echo mb_strlen("incode"); // 6 // А ось з кирилицею видає - пічалька echo strlen ("інкод"); // 10 echo mb_strlen ("інкод"); // 5

Може комусь і не треба пояснювати це явище, але для новачків розтлумачу: кирилиця кодується двома байтами, а strlen()вважає саме кількість байт у рядку, а не кількість літер. Ось і виходить, що п'ять кирилиць помножити на два - отримуємо 10. Китайські символи, якщо я не помиляюся, взагалі кодуються трьома байтами, тому в подальшому для таких випадків, щоб не виникало жодних непорозумінь, використовуйте відповідні функції.

Повторюся, що ці рішення до випадків, що часто зустрічаються, і в переважній більшості, вони вирішують проблему. Але якщо у вас виникла ситуація, коли всі ці способи не подіяли, то пишіть сюди, спробуємо розібратися разом і доповнимо статтю новим "рецептом від головного болю" ;) Потім дозвольте відкланятися.

У цій статті я постараюся поставити всі крапки над «і» (а також над «i») у питанні вибору кодування для створюваної HTML-сторінки.

Коли я тільки починав займатися сайтобудуванням, у мене постійно виникали проблеми через ці кодування. Збережеш HTML-сторінку, вивантажиш на сервер, відкриваєш, бах, а там кракозябри. Ну от і привіт, приїхали.

Або в середовищі налагодження (наприклад, локальне середовище розробки « ») все нормально, а з хостингу знову вони, прокляті кракозябри, нахабно на мене дивляться.

З двигунами скільки мук було. Раптом, незрозуміло чому, рідні російські букви перетворюються на …

Зараз ми з цією справою докладно розберемося і ви чітко знатимете у яке кодування зберігати HTML-сторінкуі за допомогою яких інструментів.

Для зміцнення нашого взаєморозуміння визначимося з поняттям кодування. Так ось, кодування- Це таблиця відповідності машинних кодів та символів алфавіту. Є якась послідовність машинних символів, яку розумний комп'ютер, відповідно до обраної кодової таблиці, замінює на зрозумілі нам літери.

У 90-ті роки минулого століття (стародавність яка, а я як зараз пам'ятаю календар 1991 року на стіні) існувало 4-те кодування для PC і ще одне, своє власне, для Мака. Іронія долі полягає в тому, що у всіх цих кодуваннях символи латиниці ставилися у відповідність машинним кодам по тому самому алгоритму, а ось з приводу кирилиці кожне з кодувань мала свою власну думку.

Вся ця плутанина і призвела до кракозябрів. Наприклад, якщо слово « Питання», набране в кодуванні windows-1251, відобразити кодуванням KOI8-R, вийде слово « БНОПНЯ».

Слава Богу, 90-ті роки вже далеко позаду і з п'яти бредокодувань залишилося лише 2 нормальних. Але цього цілком достатньо, щоб веб-майстер-початківець заблукав у двох соснах. Нічого, не хвилюйтесь, зараз я вас виведу з цього лісу!

На даний момент вибір для кодування HTML-документастоїть між windows-1251 та utf-8. А тепер увага: utf-8 набагато багатший, потужніший і за нею майбутнє. Отже, наші HTML-файли ми будемо зберігати саме в utf-8.

Обгрунтую свої слова;). UTF-8 містить у своїй таблиці відповідності такі знаки, як → ← ↓. А у windws-1251 замість цих символів ось що: > . А ще у utf-8 є знак "євро"; а ще utf-8 дозволяє в одному HTML-файлі поєднувати купу різноманітних специфічних символів, що використовуються в таких мовах як грузинська, іврит, китайська, японська; а ще utf-8у кодуваннях HTML- Це правило гарного тону.