15.03.2016
Пока нет
Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку
для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:
Итак, HTML кодировка
– это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы .
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами
вот такой мета тег:
Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать HTML кодировку.
Обычно это utf-8
или windows-1251
.
Кодировка для
utf-8
:
Кодировка
для
windows-1251
:
Если забыть указать браузеру, в какой кодировке сайт или веб-страница, то браузер попытается определить кодировку автоматически, но не всегда у него это выходит правильно. В итог результат будет такой, который я показал на картинке выше.
Переходим к практике.
Как создать HTML документ с
кодировкой utf-8
«Все программы» => «Стандартные» => «Блокнот»
:
</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..
</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></p>
<p><br>
Там, где пункт «Кодировка:»
укажите «UTF-8»
.<br>
Жмите «Сохранить»
:</p>
<p><img src='https://i2.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></p><p>Увеличить изображение?</p>
<h3><span>Как создать HTML документ с кодировкой windows-1251
</span></h3>
<p>Открывайте стандартный блокнот. <span><i>«Все программы» => «Стандартные» => «Блокнот»
</i>
</span>.<br>
Далее вставляете в блокнот стандартный код HTML:</p><p>
<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog..
</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..
</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></p>
<p>Там, где пункт «Имя файла»
напишите название веб-страницы на латинице и с расширением «.html»
. Я думю, вы это помните еще с первых уроков.<br>
Там, где пункт «Кодировка:»
укажите «ANSI»
.<br>
Жмите «Сохранить»
:</p>
<p><img src='https://i2.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></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://i2.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></p>
<p>Так как это неправильно, результат будет вот таким:</p>
<p>Сохраняйте правильно ваши веб-страници во избежание вот таких результатов </p>
<p>Предыдущая запись <br></span>
<span>Следующая запись <br></p>
<p>Практический каждый новичок в области веб-разработок, рано или поздно сталкивается с проблемами кодировки в своих проектах. И тогда, как по написанному сценарию, начинается бомбардировка форумов с вопросами о том, как победить ненавистные "<b>кракозябры
</b>". Подавляющее большинство проблем уже давно известны и лечатся довольно легко, нужно просто знать "<i>в каком месте болит и какую таблетку принять
</i>". Посему, предлагаю разобрать наиболее популярные ошибки, из-за которых эта проблемка появляется и возможно, что мои рекомендации избавят вас от дальнейших с ними столкновений.</p>
<p>Во-первых, настоятельно рекомендую, чтобы <span>все документы были в одной кодировке
</span> и база данных, а именно поля со строковыми данными, имели такую же кодировку. Устанавливается она при создании базы или же можно указывать сравнение для каждого отдельного поля. Если создаёте БД с помощью phpMyAdmin, то сложностей возникнуть не должно: закладка "Базы данных" > в поле под "Создать базу данных" вписываете имя вашей будущей БД > рядом выпадающий список "Сравнения". Если же создаёте базу sql-запросом, то пишите примерно следующее:</p><p>CREATE DATABASE IF NOT EXISTS `my_db_name` CHARACTER SET utf8 COLLATE utf8_general_ci;
</p><p>Выбор кодировки остаётся за вами, но я бы посоветовал выбрать для документов "<b>UTF-8 без BOM
</b>" и сравнение для базы "<b>utf8_general_ci
</b>" (<i>юникод многоязычный, регистронезависимый
</i>). Только не забудьте подстраховаться и сделать дамп перед манипуляциями с БД! Не буду здесь расписывать, что такое 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 .</p>
<p>При создании нового документа - всё ясно, а как быть с уже существующим, в котором желательно изменить кодировку? Один из самых простых способов - это открыть документ в Notepad++ , выбрать в меню "<i>Кодировки
</i>" и в списке "<i>Преобразовать в UTF-8 без BOM
</i>". Далее изменяем метатег с определением кодировки:</p><p>И для php-файлов можно установить соответствующий заголовок, но только, если файл не подключен в другом документе, где такой заголовок уже будет отправлен раньше. Это касается как заголовка в метатеге, так и отправленного функцией header:</p><p>Header("Content-Type: text/html; charset=utf-8");
</p><p>Проверяем результат в браузере. Тут может несколько вариантов:</p>
<ol><li>Всё выводится отлично и вопрос закрыт</li>
<li>Статически прописанные данные отображаются нормально, но данные из БД - всё тами же "кракозябрами"</li>
<li>Ничего не изменилось и кодировка осталась кривой</li>
</ol><p>Начнём с последнего пункта. Счастливые владельцы выделенных серверов или VPS/VDS, могут изменить кодировку для директивы <b>default_charset
</b> в конфигурационном файле php.ini. Тем же, кто доступа к php.ini не имеет или имеет, но необходимо изменить кодировку только для одного сайта, можно использовать файл.htaccess, записав в него следующее:</p><p>
# в принципе, хватает строки ниже:
AddDefaultCharset UTF-8
# но иногда, могут потребоваться дополнительные установки:
DefaultLanguage ru
php_value default_charset "utf-8"
</p><p>Файл.htaccess распологается в корне вашего сайта. Если вы его там не обнаружили, то создаём сами. В обычном блокноте создаёте документ > "<i>Сохранить как
</i>" > Тип файла выбрать "<i>Все файлы
</i>" > в поле "Имя файла" записываем только точку и расширение "<b>.htaccess
</b>".</p>
<p>Переходим ко второму пункту - если базу перевели на нужную кодировку, но данные из неё отображаются на странице криво. Для начала, нужно убедится, что символы в самой базе отображаются нормально. Если кодировка там "не поплыла", то можно или же опять апеллировать к файлам конфигурации, или сделать запрос сразу после подключения к базе:</p><p>SET NAMES utf8;
</p><p><b>*
</b>я пишу сам текст запроса, но т.к. не знаю какое расширение вы используете для работы с MySQL, покажу несколько вариантов:</p><p>
// для устаревшего 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 = new PDO("mysql:host=localhost;dbname=db_name", "username", "password", array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
// для MySQLi
$mysqli = new mysqli("localhost", "username", "password", "db_name");
$mysqli->set_charset("utf8");
</p><p>Раз уж затронул вопрос "устаревшего mysql_*", то хочу обратить ваше внимание, на текст выделенный красным в документации php. Cто́ит задуматься...<br>Если у вас была одна из стандартных проблем, то выполнив некоторые или все вышеописанные шаги, с кодировкой вопрос будет решен положительно. Но так же хотелось бы упомянуть о некоторых функциях, которые могут пригодится в нестандартных ситуациях. Подробнее о них вы сможете прочитать в документации, а я лишь приведу пару примеров, не вдаваясь в подробности:</p><p>Mb_internal_encoding()
C помощью этой функции, мы можем установить или получить текущую кодировку скрипта:
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"); // Привет, мир!
</p><p>Да и вообще, не забываем про аналоги функций для работы с многобайтными строками . Чаще всего, они имеют такое же название, но с приставкой <b>mb_
</b>. Разницу ощутить достаточно просто. Возьмём, для примера, функции <b>strlen()
</b> и <b>mb_strlen()
</b> и проведём эксперимент, измерив длину строки:</p><p>
// установим внутреннюю кодировку
mb_internal_encoding("utf-8");
// для латинских символов разницы нет
echo strlen("incode"); // 6
echo mb_strlen("incode"); // 6
// А вот с кириллицей выдает - пичалька
echo strlen("инкод"); // 10
echo mb_strlen("инкод"); // 5
</p><p>Может кому и не нужно объяснять это явление, но для новичков растолкую: кириллица кодируется двумя байтами, а <b>strlen()
</b> считает именно количество байт в строке, а не количество букв. Вот и получается, что пять кириллических символов умножить на два - получаем 10. Китайские символы, если я не ошибаюсь, вообще кодируются тремя байтами, поэтому в дальнейшем для таких случаев, чтоб не возникало никаких недорозумений, используйте соответствующие функции.</p>
<p>Повторюсь, что эти решения к часто встречающимся случаям и в подавляющем большинстве, они решают проблему. Но если у вас возникла ситуация, когда всэ эти способы не возымели действия, то пишите сюда, попробуем разобраться вместе и дополним статью новым "рецептом от головной боли" ;) Засим позвольте откланяться.</p>
1. У нас есть файл: Мойфайл.html.
<br>2. Надо сохранить его в кодировке Юникод -> UTF-8.
<b>Решение 1.
</b>
<ol><li>Открываеем Мойфайл.html в текстовом редакторе <b>Блокнот
</b>.</li><li>Выбикаем «Сохранить как…».</li><li>Выбираем кодировку UTF-8.</li><li>Жмем кнопку - Сохранить.</li>
</ol><br><img src='https://i0.wp.com/u4ilka.kcbux.ru/Raznoe/image/raz-019-02.png' width="100%" loading=lazy><b>Решение 2.
</b>
<ol><li>Открываем Мойфайл.html в текстовом редакторе <b>Notepad++
</b> (еще есть редактор PSPad)</li><li>Меню -> Кодировки. <br>Здесь видим (Notepad++ определяет сам) кодировку открытого нами файла.</li><li>Выбираем <span>Преобразовать в UTF-8 без BOM
</span> (BOM - Byte Order Mark).<br>(Кодироака "UTF-8 без BOM" предпочтительна и отличается от просто "UTF-8").</li><li>Меню -> Файл -> Сохранить.</li>
</ol><br><img src='https://i0.wp.com/u4ilka.kcbux.ru/Raznoe/image/raz-019-03.png' width="100%" loading=lazy><h4>Определение кодировки браузерами</h4>
Мы сами сообщаем браузеру о том, какая кодировка установлена для данного HTML файла. <br>Делается это посредством META-тега
1)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
В приведенном примере браузеру дается указание, что загруженный HTML-файл сохранен в кодировке utf-8.
Если HTML-файл сохранен в кодировке windows-1251, то:
2)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<b>Важно!
</b>
<br>При перекодировке файлов <b>не забывайть изменять
</b> директивы в META-теге на актуальные.
<br>Если в META-теге указана одна кодировка, а файл сохранен в другой кодировке, то на экране мы увидем "абракадабру".
<p>3) <b>Если
</b> в META-теге указана нужная кодировка, а сайт все равно отображает "абракадабру", то нужно проверить настройку сайта на хостинге (веб-сервере). <br>Обычно на хостингне в настройках сайта указана кодировка utf-8.
<br>Если в настройках хостинга указана кодировка windows-1251, то нужно сменить настройку на utf-8.</p>
<p>Здравствуйте, уважаемые читатели моего блога. Сегодня мы поговорим с вами про кодировку. Если вы читали мою статью о том, то знаете, что любой документ в интернете хранится не в том виде, в каком мы привыкли его видеть. Он записан при помощи непонятных человеку символов и знаков. С текстом все точно также.</p> <p>Существует несколько кодировок, а потому, иногда увидев непонятные символы при открытии книги в мобильном приложении или запилив статью на сайт, вы, поменяв кое-какие значения в настройках, увидите привычный глазу алфавит.</p> <p>Кодировка windows-1251 – что это такое, какое значение она имеет при создании сайта, какие символы будут доступны и является ли она лучшим решением на сегодняшний день? Обо всем этом в сегодняшней статье. Как всегда, простым языком, максимально понятно и с минимальным количеством терминов.</p> <h2>Немного теории
</h2> <p>Любой документ на компьютере или в интернете, как я уже сказал, хранится в виде двоичного кода. К примеру, если вы используете кодировку ASCII, то буква «К» будет записана как 10001010, а windows 1251 под этим числом скрывается символ – Љ. В итоге, если браузер или программа обратится к другой таблице и считает вместо ASCII коды windows 1251, то читатель увидит совершенно непонятные ему символ.</p> <p>Логичен вопрос, нафига было придумывать множество таблиц с кодами? Дело в том, что помимо русского алфавита существует еще и английский, немецкий, китайский. По некоторым подсчетам, существует около 200 000 символов. Хотя, я не очень доверяю этой статистике, вспоминая про японский.</p> <p>Не забывайте, что для заглавной и строчной буквы нужно придумать свой код, есть запятые, тире и так далее.</p> <p>Чем больше в таблице символов, тем длиннее код каждого из них, а значит и вес документа становится больше.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/3-162.jpg' align="center" width="100%" loading=lazy></p> <p>Представьте, если бы одна книга весила 4 Гб! Она бы очень долго загружалась, занимала все свободное место на компьютере. Решение о скачивании представлялось бы делом нелегким.</p> <p>Если вспомнить о сайтах, то вообще страшно подумать, что бы произошло. Каждая страничка открывалась даже на скоростном оптоволокне по часу с лишним! Думаю, мобильные телефоны можно было бы смело выкидывать. Пользоваться ими на улице даже с 4G? Сомневаюсь.</p> <p>По этим причинам каждый программист в свое время старался придумать свою таблицу символов. Чтобы было удобно для использования и вес сохранялся оптимальным.</p> <p>Microsoft, к примеру, для русскоязычного сегмента создали windows-1251. В ней, конечно же, есть свои достоинства и недостатки. Как и у любого другого продукта.</p> <p>Сейчас уже, лишь 2% всех страниц в интернете написано на 1251. Большинство веб-мастеров используют UTF-8. Почему так?</p> <h2><span>Недостатки и достоинства
</span></h2> <p>UTF-8, в отличие от windows-1251 универсальная кодировка, в ней содержатся буквы различных алфавитов. Существует даже UTF-128, где есть вообще все языки – теулу, суахили, лаосский, мальтийский и так далее.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/citata-2-48.jpg' align="center" width="100%" loading=lazy></p> <p>UTF-8 победнее, буквы занимают в разы меньше места и занимают всего один байт памяти, как и в 1251. В УТФ есть редкие символы из других языков или специальные символы. Они-то и весят по 5-6 байтов, но в документе используются крайне редко.</p> <p>Эта кодировка более продумана, а потому ее использует большинство приложений по умолчанию. То есть, если вы не указываете программе, какую кодировку вы используете, то первым делом он проверит именно UTF-8 .</p> <p>Когда вы создаете html документ для сайта, то указываете браузерам на какую таблицу им обращать внимание при расшифровке записей.</p> <p>Для этого необходимо вставить в тег head следующие данные. После символов «charset=» идет либо утф, либо виндовс, как в примере ниже.</p>
<table><tr><td class="code"> <<span>meta
http-equiv
=
"Content-Type"
content
=
<span>"text/html; charset=windows-1251"
</span>>
</span>
</td>
</tr></table><p><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></p>
<p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/4-151.jpg' align="center" width="100%" loading=lazy></p> <p>Если в дальнейшем вы захотите что-то поменять и вставить фразу на албанском, используя эту таблицу расшифровок, то ничего не получится, ведь этого языка кодировка не поддерживает. UTF‑8 без проблем позволит вам это сделать.</p> <p>Если вас заинтересовало правильное создание сайта, то я могу порекомендовать вам курс Михаила Русакова «<i><b><span>Создание и Раскрутка сайта от А до Я
</span>
</b>
</i>».</p> <p><br><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/1-174.jpg' align="center" width="100%" loading=lazy></p> <p>Он содержит в себе очень много – 256 уроков, затрагивающих , JavaScript, и XML. Помимо языков программирования вы сможете понять как монетизировать сайт, то есть скорее и больше получать прибыль. Один из немногих курсов, в котором было бы так подробно разъяснено все, что нужно.</p> <p>Сам я вот уже год обучаюсь <i><b><span>в школе блоггеров Александра Борисова
</span>
</b>
</i>. Это занимает в разы больше времени, конца и края пока не видно, но зато не менее исчерпывающе и дисциплинирует. Мотивирует продолжать разработку.</p> <p>Ну а если возникают вопросы, не нужно искать по интернету. Всегда есть грамотный наставник.</p> <p><br><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/5-131.jpg' align="center" width="100%" loading=lazy></p> <p>Что-то я отошел от темы. Давайте вернемся к кодировкам.</p> <h2>Базы банных
</h2> <p>Когда речь идет о php, все вообще страшно. Я уже рассказывал про базы данных, они используются для ускорения работы сайта. Обычно, вы к ним не обращаетесь, но когда появляется необходимость в переносе сайта становится не по себе.</p> <p>Сложности случаются у всех, не важно какой у вас опыт работы, стаж и выслуга лет. Некоторые странички в базе могут содержать в себе все доступные символы для виндовс-1251, другие, к примеру, в шаблонах страниц, в другой кодировке.</p> <p>Пока не нужен перенос все работает и функционирует, хоть и не совсем правильно. Но после переезда начинаются неприятности. В идеале вы должны использовать либо только УТФ, либо виндовс-1251, но по факту всегда и у всех случаются вот такие недочеты.</p> <p>Чтобы расшифровка согласовалась необходимо вписать код mysql_query(«SET NAMES cp1251»). В этом случае преобразование будет осуществлять по другому протоколу – cp1251.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/5-138.jpg' align="center" width="100%" loading=lazy></p> <h2>Htaccess
</h2> <p>Если на сайте вы настойчиво решили использовать именно 1251, то вам следует найти или создать файл htaccess. Он отвечает за настройки конфигурации. В него придется добавить еще три строчки, чтобы все сошлось.</p>
<table><tr><td class="code"> DefaultLanguage ru;
AddDefaultCharset windows-1251;
php_value default_charset "cp1251"
</td>
</tr></table><p>DefaultLanguage ru;
AddDefaultCharset windows-1251;
php_value default_charset "cp1251"</p>
<p>Я все же настоятельно рекомендую вам задумать о использовании UTF-8. Он более популярен, прост и богат. Какие бы решения вы не приняли сейчас, важно, чтобы впоследствии можно было все исправить. Добавить англоязычную версию сайта на этой кодировке будет в разы проще. Ничего не нужно исправлять.</p> <p>Решение остается за вами. Подписывайтесь на рассылку, чтобы узнавать как можно быстрее , где учиться, чтобы не повторять чужих ошибок, а также какие блоггеры получают больше посетителей.</p> <p>До новых встреч и удачи в ваших начинаниях.</p>
<p>При неправильной кодировке весь сайт или его часть отображаются в виде «кряпозяблов», т.е. непонятных символов, делающих текст нечитаемым. Такая ситуация может возникнуть при неверной настройки кодировки веб-сервера или при отсутствии настроек. Рассмотрим возможные варианты и способы устранения проблем</p>
<h2>Неправильная кодировка HTML страниц<br></h2>
<p>Создадим тестовый файлик:</p><p>Sudo gedit /var/www/html/encoding.html
</p><p>Скопируем в него:</p><p>
<html>
<head>
<title>Проверка кодировки
Откроем этот файл в браузере http://localhost/encoding.html
Как можно видеть, кодировка браузером определена неправильно:
Имеется несколько способов исправить эту ситуацию. Начнём с самого простого - явно указать кодировку для веб-страницы. Это делается метатегом, который должен быть расположен внутри тэга 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"
Какую кодировку выбрать для веб-сайта
