Кодування сторінки HTML. HTML кодування. В яке кодування зберігати веб-сторінку

Останні кілька годин я провів на своєму веб-сайті, щоб перевірити HTML 4.01 Strict, і я насправді досяг успіху в цьому, але є ще одне попередження, якого я не можу позбутися. Попередження:

Невідповідність кодування символів!

Кодування символів, зазначене в заголовку HTTP (iso-8859-1) відрізняється від значення в елемент (utf-8). Я використовуватиму значення з заголовка HTTP (iso-8859-1) для цього підтвердження.

Для отримання загальної інформації про те, як змінити заголовок набору символів у різних мережевих стеках, див. http://www.w3.org/International/O-HTTP-charset


2018-05-25 13:30

Сервер чітко маркує документ як ISO-8859-1 у заголовках HTTP. Спробуйте зберегти default.html за допомогою кодування UTF-8 за допомогою відповідного редактора.


2018-05-25 03:07

Добре, я вигадав часткове вирішення моєї проблеми. Оскільки це був лише файл default.html, який викликав попередження, я припустив, що сервер робить щось особливе для нього через його ім'я. Тому я створив новий файл home.html з тим же вмістом, що й файл default.html, і вказав файл.htaccess на новий файл (див. Рядок 3 нижче).

# Use PHP5 as default AddHandler application/x-httpd-php5 .php DirectoryIndex home.html AddDefaultCharset UTF-8

Це вирішило проблему, і всі файли розпізнаються як UTF-8. Я все ще не впевнений, що сервер робить з файлом default.html або де налаштування щодо цього, але в міру того, як моя проблема пішла, я забуду про це.

Однією з найчастіших проблем, з якою стикається початківець Web-майстер(та й не тільки початківці), це проблеми з кодуванням на сайті. Навіть у мене постійно з'являється під час створення сайтів " абракадабраАле, добре, я чудово знаю, як цю проблему вирішити, тому все наводжу в порядок протягом декількох секунд. І в цій статті я постараюся навчити Вас також швидко вирішувати проблеми, пов'язані з кодуванням на сайті.

Перше, що варто відзначити, це те, що всі проблеми з появою "Абракадабри" пов'язані з розбіжністю кодування документа і кодування, що виставляється браузером. Припустимо, документ у windows-1251, а браузер чомусь виставляє UTF-8. А вже джерелом такої розбіжності можуть бути такі причини.

Перша причина

Неправильно прописаний мета-тег content-type. Будьте уважні, в ньому завжди має бути те кодування, в якому написаний Ваш документ.

Друга причина

Начебто мета-тег прописаний так, як Ви хочете, і браузер виставляє саме те, що Ви хочете, але чомусь все одно з кодуванням проблеми. Тут, майже напевно, винне те, що сам документ має чудове кодування. Якщо Ви працюєте в Notepad++, то внизу справа є назва кодування поточного документа (наприклад, ANSI). Якщо Ви ставите у мета-тезі UTF-8, а сам документ написаний у ANSI, то зробіть перетворення на UTF-8(через меню " Кодуванняі пункт Перетворити на UTF-8 без BOM").

Третя причина

Четверта причина

І, нарешті, остання популярна причина – це проблема з кодуванням у базі даних. По-перше, переконайтеся, що всі Ваші таблиці та поля написані в одному кодуванні, яке збігається з кодуванням решти сайту. Якщо це не допомогло, то відразу після підключення у скрипті виконайте наступний запит:

SET NAMES "utf8"

Замість " utf8може стояти інше кодування. Після цього всі дані з бази повинні виходити в правильному кодуванні.

У цій статті я, сподіваюся, розібрав, як мінімум, 90% проблем, пов'язаних з появою "Абракадабри" на сайті. Тепер Ви повинні розправлятися з такою популярною і простою проблемою, як неправильне кодування, за два рахунки.

Досить часто блогери-початківці, і не тільки початківці, стикаються з проблемою кодування сторінки html. Коли замість тексту та символів, що читаються, виводяться незрозумілі КРАКОЗЯБРИ. Саме так називаються символи, що не відповідають тим, які мають бути виведені на сторінку. Звідки з'являються незрозумілі ієрогліфи?

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

Базовим кодуванням є ASCII кодування, яке містить коди 128 символів латинського алфавіту і спеціальні символи (дужки, решітки і т.д.). Далі з'явилися перші російськосимвольні кодування CP866 і KOI8-R, а з них вийшло відоме сьогоднішнім веб-майстрам кодування windows-1251. Навіть незважаючи на те, що всі ці кодування покликані для відображення російського тексту, всі вони відрізняються один від одного кодами.

Якщо текст писався в кодуванні CP866, а браузер намагається розкодувати її за допомогою таблиці кодів windows-1251, то в результаті ми отримаємо слова, що не читаються. Крім назв тих кодувань, які я тут навів, існує ще безліч котирувань. З такою великою кількістю кодових таблиць утворилася проблема сумісності кодувань. Дуже актуально постало питання створення універсального кодування. На сьогоднішній день винайдено універсальне кодування utf-8. При програмуванні сайту є чотири моменти, які вимагають дотримання єдиного стандарту кодування тексту.

  • Кодування скриптів.
  • Кодування таблиць MySQL.
  • Кодування самої HTML сторінки.
  • Локаль використовується браузером користувача.

У всіх цих складових сайту, має використовуватися єдине кодування-бажано utf-8, адже воно універсальне.Якщо натиснути клавіші CTRL+ U, можна переглянути код сторінки, в якому видно, яке кодування використовується для цього документа.

Якщо Ви відкриваєте свій блог і замість російських символів бачите якісь незрозумілі знаки - значить кодування встановлено неправильно.

Як змінити кодування?

Для усунення помилок та проблем з кодуванням Вашого блогу використовуємо FTP-клієнт. За його допомогою копіюємо файл wp-config.php на «Робочий стіл» Вашого комп'ютера та відкриваємо за допомогою текстового редактора Notepad++. У цьому файлі міститься інформація Вашого блогу - включаючи паролі, кодування бази даних та інше. Дивимося, якщо кодування якесь інше, її потрібно поміняти на UTF-8.

  • -зберігаємо в цьому кодуванні.
  • -всередині коду Бази Даних кодування змінюємо на UTF-8.

Зберігаємо файл у редакторі Notepad++, у значенні-«UTF-8 без сигнатури BOM» і закачуємо файл на свій хостинг, тобто змінюємо на хостингу старий файл wp-config.php , на новий.

Як правило, цих дій достатньо для того, щоб на Вашому блозі все відображалося коректно. Якщо після проведених дій нічого не вийшло, можна спробувати ще один спосіб зміни кодування. Для цього потрібно внести зміни до файлу .htaccess. Для коригування відкриваємо файл.htaccess за допомогою редактора Notepad++ і додаємо на початку один із даних рядків:

  • AddDefaultCharset UTF-8
  • CharsetDisable On
  • CharsetDefault UTF-8
  • CharsetSourceEnc UTF-8

Можливо буде достатньо поміняти один із варіантів, буває достатньо першого. Якщо не виходить, перебираємо наступні варіанти вручну, по черзі вписуючи наступні варіанти. Не забуваємо послідовність дій:

  1. Відкриваємо файл у редакторі.
  2. Вносимо зміни.
  3. Зберігаємо.
  4. Закачуємо на хостинг.
  5. Перевіряємо.

Ще хочу згадати про одну із проблем, яка може виникнути, і з якою я зіткнувся під час створення сторінок захоплення. При закачуванні на хостинг файлів сторінки захоплення, може виникнути ситуація розбіжності кодувань. У такому разі потрібно підправити файл index.html. Для цього за допомогою FaleZilla витягуємо файл і переносимо на «Робочий стіл» комп'ютера. Далі відкриваємо файл за допомогою звичайного Блокнота.

Після того, як файл відкрився в Блокноті, лівою кнопкою миші натискаємо на "Файл" та "Зберегти як...".

15.03.2016

Поки немає


Всім привіт!
Продовжуємо вивчати основи HTML. У цьому уроці ми розберемо, як вказати HTML кодуваннядля веб-сайту (веб-сторінки).
Цей урок дуже важливий, оскільки незнання того, як вказати кодування для веб-сторінки, може призвести до того, що вашу сторінку не зможуть прочитати. Ви запитаєте: "Це як так, не зможуть?".
Давайте я покажу, як виглядає мій блог із неправильним кодуванням:

Отже, HTML кодування– це таблиці відповідності кодів та символів алфавіту. Тобто, наш комп'ютер із кодуванням поміняє код на зрозумілі читальні літери.

Щоб повідомити браузеру, в якому кодуванні знаходяться символи веб-сторінки, потрібно прописати між тегами ось такий мета тег:

Зверніть увагу, що в коді є слово «ім'я кодування». Тут необхідно вказати HTML кодування.
Зазвичай це utf-8 або windows-1251.

Кодування дляutf-8:

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

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

Переходимо до практики.

Як створити HTML документ з
кодуванням utf-8

"Всі програми" => "Стандартні" => "Блокнот" :

<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p> <head></head>ось цей мета-тег:</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p> <html> <head> <title>Моя перша HTML-сторінка на StepkinBlog.<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Тисніть у блокноті <span>"Файл" => "Збереже як ..."</span>:</p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-3.png' width="100%" loading=lazy loading=lazy></p><p><br>Там, де пункт «Кодування:» вкажіть UTF-8 . <br>Натисніть «Зберегти»:</p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-4.png' width="100%" loading=lazy loading=lazy></p><p>Збільшити зображення?</p> <h3><span>Як створити HTML документ із кодуванням windows-1251</span></h3> <p>Відкрийте стандартний блокнот. <span><i>"Всі програми" => "Стандартні" => "Блокнот"</i> </span>.<br>Далі вставляєте в блокнот стандартний код HTML:</p><p> <html> <head> <title>Моя перша HTML-сторінка на StepkinBlog.<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Тепер вказуємо, у якому кодуванні збережено веб-сторінку. Для цього розмістіть між тегами <head></head>ось цей мета-тег:</p><p> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </p><p>Ось так має вийти (рядок №4):</p><p> <html> <head> <title>Моя перша HTML-сторінка на StepkinBlog.<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>Тисніть у блокноті <span>"Файл" => "Збереже як ..."</span>:</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-5.png' width="100%" loading=lazy loading=lazy></p> <p>Там, де пункт «Ім'я файлу» напишіть назву веб-сторінки на латиниці та з розширенням «.html». Я гадаю, ви пам'ятаєте це ще з перших уроків. <br>Там, де пункт "Кодування:" вкажіть "ANSI" . <br>Натисніть «Зберегти»:</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-6.png' width="100%" loading=lazy loading=lazy></p> <p>От і все!</p> <p>Більшість вебмайстрів вибирають кодування UTF-8. Причини говорити не буду, тому що боюся навантажити вас інформацією, яка на вашому етапі пізнання HTML ще не потрібна.</p> <p>Для прикладу в блокноті встановіть код:</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>І вкажіть при збереженні «ANSI»:</p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-6.png' width="100%" loading=lazy loading=lazy></p> <p>Так як це неправильно, результат буде таким:</p> <p>Зберігайте правильно ваші веб-сторінки, щоб уникнути таких результатів</p> <p>Попередній запис <br></span> <span>Наступний запис <br></p> <p>При неправильному кодуванні весь сайт або його частина відображаються у вигляді «крязязяблів», тобто. незрозумілих символів, які роблять текст нечитаним. Така ситуація може виникнути при неправильному налаштуванні кодування веб-сервера або при відсутності налаштувань. Розглянемо можливі варіанти та способи усунення проблем</p> <h2>Неправильне кодування HTML сторінок <br></h2> <p>Створимо тестовий файлик:</p><p>Sudo gedit /var/www/html/encoding.html</p><p>Скопіюємо до нього:</p><p> <html> <head> <title>Перевірка кодування



Відкриємо цей файл у браузері

Як можна бачити, кодування браузером визначено неправильно:

Є кілька способів виправити цю ситуацію. Почнемо з найпростішого – явно вказати кодування для веб-сторінки. Це робиться метатегом, який має бути розташований усередині тега head:

Додамо цей рядок до нашого тестового файлика, щоб вийшло так:

Перевірка кодування

Тестовий файл для перевірки кодування



Як ми можемо переконатися на наступному скріншоті, проблему вирішено:

Якщо кодування вашого файлу відрізняється від UTF-8, то замість неї поставте windows-1251або ту, яка відповідає коду веб-сторінки. Щоб навчитися визначати кодування файлів, перегляньте .

Це був найпростіший спосіб виправлення проблеми з кодуванням без зміни налаштувань сервера.

Повернемо наш тестовий файл у вихідний стан та продовжимо вивчення способів вказівки кодування.

Якщо файли .htaccessвключені налаштуваннями Apache, то ці файли можна використовувати щоб вказувати кодування сторінок, що відправляються веб-сервером. Щоб увімкнути підтримку файлів .htaccessу конфігураційному файлі Apache ( /etc/apache2/apache2.conf) знайдіть групу рядків

Options Indexes FollowSymLinks AllowOverride None Require all granted

І в ній замініть

AllowOverride None

AllowOverride All

Після цього сервер потрібно перезапустити.

Sudo systemctl restart apache2.service

Файл .htaccessповинен бути розміщений у тій директорії, що і сайт. Мій сайт розміщений у кореневій директорії веб-сервера. Якщо у вас також, то тепер у папці /var/www/html/створіть файл .htaccessі додайте до нього директиву AddDefaultCharsetпісля якого вкажіть бажане кодування. Приклади

AddDefaultCharset UTF-8

AddDefaultCharset windows-1251

Можна вказати кодування, яке буде застосовано лише до файлів певного формату:

AddCharset utf-8 .atom .css .js .json .rss .vtt .xml

Набір файлів може бути будь-яким, наприклад:

AddCharset utf-8 .html .css .php .txt .js

Наступний варіант є альтернативним і дозволяє встановлювати кодування для файлів певного типу, для нього потрібно, щоб був включений mod_headers:

Header set Content-Type "text/html; charset=utf-8"

Ще один варіант, який також можна використовувати у файлі .htaccessдля встановлення кодування UTF-8:

IndexOptions +Charset=UTF-8

Якщо сайт на PHP, то додатково може знадобитися продублювати кодування з php_value default_charset:

AddDefaultCharset windows-1251 php_value default_charset "cp1251"

Замість створення файлу.htaccess можна встановити кодування в конфігураційному файлі веб-сервера. Для Apache CentOS/Fedora це файл httpd.conf, а на Debian/Ubuntu файл apache2.conf. Додайте наступний рядок для встановлення кодування і перезапустіть веб-сервер, щоб зміни набули чинності:

AddDefaultCharset UTF-8

Як встановити UTF-8 кодування в PHP

У PHP скрипті для встановлення кодування використовується header, наприклад:

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

Зазвичай разом із кодуванням також вказують тип вмісту (у прикладі варіант для HTML сторінки):

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

Ще один варіант для RSS стрічки:

Header("Content-type: text/xml; charset=utf-8");

Пам'ятайте, що функція headerмає бути викликана перед будь-яким висновком у браузер. В іншому випадку (якщо виведення в браузер вже було зроблено), то вже були надіслані заголовки. Очевидно, що в цьому випадку їх уже неможливо змінити. Якщо в браузері було виведено повідомлення про помилку, то заголовки також вже були відправлені і використання header викликає помилку. Щоб перевірити, чи були вже надіслані заголовки, використовуйте headers_sent.

Описаний спосіб працює тільки тоді, коли PHP скрипт повністю генерує вміст сторінки. Статичні сторінки (такі як html) ви повинні зберігати у кодуванні utf-8. Більшість веб-серверів звернуть увагу на кодування файлу і додадуть відповідний заголовок. Насправді збереження PHP файлу в кодуванні utf-8 призведе до такого ж результату.

Неправильне кодування результатів з бази даних MySQL

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

Потрібно розпочати з визначення кодування ваших таблиць. Можна подивитися в phpMyAdmin:

Зверніть увагу на стовпець « Порівняння», запис « utf8_unicode_ci» означає, що використовується кодування UTF-8.

Можна підключитися до СУБД MySQL та перевірити кодування таблиць без phpMyAdmin. Для цього:

Mysql -u root -p

Якщо ви забули ім'я бази даних, виконайте команду:

SHOW DATABASES;

Припустимо, я хочу переглянути кодування для таблиць у базі даних information_schema

USE information_schema;

Якщо ви забули ім'я таблиць, виконайте:

SHOW FULL COLUMNS FROM имя_таблицы;

Наприклад:

SHOW FULL COLUMNS FROM GLOBAL_STATUS;

Ви побачите приблизно таке:

Дивіться стовпець Collation. У моєму випадку там utf8_general_ci, це, як і utf8_unicode_ci, кодування UTF-8. До речі, якщо ви не знаєте у чому різниця між кодуванням utf8_general_ci, utf8_unicode_ci, utf8mb4_general_ci, utf8mb4_unicode_ci, а також яке кодування вибрати для бази даних MySQL, подивіться .

Тепер, коли ми дізналися кодування (у моєму випадку це UTF-8), при кожному підключенні до СУБД MySQL потрібно виконувати послідовно запити:

SET NAMES UTF8 SET CHARACTER SET UTF8 SET character_set_client = UTF8 SET character_set_connection = UTF8 SET character_set_results = UTF8

У PHP це можна зробити приблизно так:

$this->mysqli = new mysqli($server, $username, $password, $basename); if ($this->mysqli->connect_error) ( $this->errorHandler_c->logError(1, "Connect Error (" . $this->mysqli->connect_errno . ") " . $this->mysqli->connect_error , $_SERVER ["REQUEST_URI"]);) $this->mysqli->query("SET NAMES UTF8"); $this->mysqli->query("SET CHARACTER SET UTF8"); $this->mysqli->query("SET character_set_client = UTF8"); $this->mysqli->query("SET character_set_connection = UTF8"); $this->mysqli->query("SET character_set_results = UTF8");

Зверніть увагу, що UTF8вам потрібно замінити на те кодування, яке використовується для ваших таблиць.

Зміна кодування файлів

Якщо ви вирішили піти іншим шляхом і замість встановлення нового кодування змінити кодування ваших файлів, подивіться статтю « ». У ній розказано, як дізнатися про поточне кодування файлів і як конвертувати файли в будь-яке кодування (не тільки UTF-8).

Як дізнатися, яке кодування надсилає сервер

Якщо ви хочете дізнатися, які параметри кодування має веб-сервер (яке кодування передає в заголовках), скористайтеся наступною командою:

Curl URL -s -o /dev/null -D /dev/stdout | grep -E "charset"

У ній замість URLвставте реальну адресу сайту, що перевіряється. Якщо сайт використовує HTTPS, то вкажіть адресу сайту разом із протоколом, наприклад

Curl https://softocracy.ru -s -o /dev/null -D /dev/stdout | grep -E "charset"

Яке кодування вибрати для веб-сайту