Одна из самых частых проблем сайта - это его кодировка. И несмотря на это многие Web-мастера продолжают утверждать, что браузер сам выбирает кодировку. Действительно, он выбирает кодировку сам, но делает это не всегда правильно. Вот это и есть самая распространнёная ошибка с кодировкой: сайт в кодировке, допустим, UTF-8 , а браузер настойчиво выбирает windows-1251 . Вот как задать жёстко кодировку через файл htaccess , я расскажу в этой небольшой статье.

Для того, чтобы задать кодировку файла в htaccess достаточно написать в нём всего одну строчку:

AddDefaultCharset UTF-8

Если Вам нужна windows-1251 , то тогда так:

AddDefaultCharset WINDOWS-1251

Всего одна строчка и теперь браузер, независимо от своего предпочтения, будет выбирать указанную кодировку. Сразу говорю, данный способ - это действительно мощный. Вы должны понимать, что раз браузер неправильно распознаёт кодировку Вашего сайта (игнорируя даже мета-тег "ContentType "), значит, на то есть свои причины, поэтому внимательно проверьте: везде ли всё хорошо отображается.

Надеюсь, что этой статьей я помог Вам решить проблему с кодировкой. А в следующей статье я расскажу о проблеме, связанной с кодировкой базы данных . Это тоже весьма частая проблема, которую многие не могут решить.

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://i2.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://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></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://i2.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>При неправильной кодировке весь сайт или его часть отображаются в виде «кряпозяблов», т.е. непонятных символов, делающих текст нечитаемым. Такая ситуация может возникнуть при неверной настройки кодировки веб-сервера или при отсутствии настроек. Рассмотрим возможные варианты и способы устранения проблем</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"

Какую кодировку выбрать для веб-сайта

В этой статье я постараюсь поставить все точки над «и» (а так же над «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 - это правило хорошего тона.

Надеюсь я вас убедил и вы будете использовать Юникод (кстати «utf-8» и «Юникод» - это синонимы или, если быть более точным, utf-8 - это одна из кодировок семейства Юникод, которая снискала популярность в среде веб-разработчиков).

Теперь пристально посмотрим на инструменты перекодирования файлов, которые я рекомендую вам использовать, уважаемый читатель.

Инструменты для работы с кодировками HTML файлов

Собственно, их всего три:

  • PSPad . Бесплатный текстовый редактор, мой любимый.
  • . Еще один хороший текстовый редактор и тоже бесплатный.
  • Dreamweaver. Ну с Dreamweaver-ом вы с вами знакомы из моих .

Загружаем какой-то HTML-файл в PSPad. И как же нам понять, что за кодировка у загруженного подопытного? Очень просто в строке состояния (внизу) все четко написано.

Кодировка открытого HTML-файла windows-1251

А теперь, создавая новый HTML-документ, позаботимся о его кодировке.

Идем в меню моего любимого PSPad-а . Нас интересует пункт Формат . В нем-то мы и поставим галку напротив кодировки utf-8.

А так кодировка будующего файла - windows-1251

Теперь о том как изменить кодировку файла HTML . Да оказывается очень просто:

Нужно кликнуть по требуемой кодировке в пункте меню Формат и кодировка сменится. После этого сохраняйте файл, он перекодирован, дело сделано.

Что касается Notepad++ все очень похоже на вышеописанную ситуацию. Только для работы с кодировками нужно использовать пункт меню Кодировки.

Вся разница заключается в том, что в случае Notepad++ появляются, специально разработанные для преобразования кодировок, пункты меню Преобразовать.. . (лишние на мой взгляд, в PSPad все проще и поэтому я им пользуюсь). Соответственно, именно по ним и нужно кликать при желании поменять кодировки у нашего HTML-файла.

Кроме всего прочего, при сохранении в utf-8 у нас есть выбор: без BOM или с BOM . Нам, как веб-мастерам, нужно использовать кодировку UTF-8 (без BOM) .

Вот что нам ответит Википедия на вопрос «что такое BOM »

Для определения формата представления Юникода в текстовом файле используется приём, по которому в начале текста записывается символ U+FEFF (неразрывный пробел с нулевой шириной), также именуемый меткой порядка байтов (англ. Byte Order Mark, BOM). Этот способ позволяет различать UTF-16LE и UTF-16BE, поскольку символа U+FFFE не существует. Также он иногда применяется для обозначения формата UTF-8, хотя к этому формату и неприменимо понятие порядка байтов.

Если прочитать приведенный текст 10 раз, почесать затылок, то становится понятно: для utf-8 BOM нам НЕ нужен . Кроме того, если сохранить файл с php-скриптом в кодировку utf-8 с BOM , то он не будет работать, потому что обработчик не поймет, что это за ерунда такая написана в начале файла-скрипта (я имею ввиду тот самый неразрывный пробел с нулевой шириной).

Так-так, осталось пристально взглянуть на Dreamweaver .

Создавая новый файл, обращайте внимание на то, в какой кодировке он будет создан. Для этого в окне создания нового документа File → New (Ctrl+N) воспользуйтесь кнопкой Preferences ...

И посмотрите, что задано в качестве кодировки по умолчанию:

Кодировка создаваемого HTML-файла по умолчанию в Dreamweaver

Перекодировать открытый HTML-файл в Dreamweaver можно в диалоге Page Properties, который запускается из меню Modify Page Properties (Ctrl + J).

Выбирайте требуемую кодировку, нажимайте ОК и все, задача по перекодированию выполнена (а вот BOM все так же ненужен, не ставьте галку).

Определение кодировки браузерами

Итак, наш HTML-файл сохранен в выбранную нами кодировку. Теперь давайте разберемся с вопросом: каким образом браузер узнает о применяемой в данном HTML-файле кодировке?

Здесь есть три варианта:

1. Мы сами сообщаем браузеру о том, какая кодировка установлена для данного HTML файла. Делается это посредством META-тега

В приведенном примере браузеру дается указание, что загруженный HTML-файл сохранен в кодировке utf-8 .

Если HTML-файл сохранен в кодировку windows-1251, то:

Кстати, при перекодировке файлов не забывайте изменять директивы в META-теге на актуальные. Dreamweaver, при изменении кодировки, делает это автоматически, а в других текстовых редакторах вам нужно самим ставить в соответствие примененную кодировку и директиву META-тега.

Полный HTML выглядит следующим образом (привожу его для понимания вопроса «в каком месте указывается META-тег с директивой кодировки» внимание на 4-ю строку):

Untitled Document Ну и т.д.

2. При помощи файла.htaccess. Иногда сервер насильно передает заголовки для загружаемых HTML-файлов и сообщает браузеру кодировку по умолчанию. В этом случае браузер не обращает внимания на директивы в META-теге, а отображает HTML-файл в той кодировки, которую сообщил сервер. Чтобы файл загружалсяв той кодировке, которая нужна вам (часто хостинг насильно указывает кодировку windows-1251), в корне хостинг-директории создается файл с именем «.htaccess».

Файл этот предназначен для дополнительной конфигурации сервера. Действие.htaccess-директив распространяется на все файлы и подкаталоги, которые находятся в том каталоге, куда вы сохранили файл.htaccess.

Создать этот файл можно, например, в Total Commander-е, нажав горячее сочетание клавиш Shift+F4 и указав имя создаваемому файлу .htaccess . Далее в текстовом редакторе указываются директивы дополнительных настроек кодировки по умолчанию.

Для HTML-файлов в кодировке utf-8 в.htaccess нужно написать одну строку:

AddDefaultCharset UTF-8

Для HTML-файлов в кодировке Windows-1251 :

AddDefaultCharset Windows-1251

Если ваш хостинг хитро-мудрый и не обращает внимания на эти директивы, то можно попробовать:

Charsetdisable on AddDefaultCharset Off

Если и это не дало результата, то просто спросите у своего хостера, чего вам делать, чтобы отключить кодировку по умолчанию:). Все это зависит от конкретных настроек сервера у хостинг-провайдера.

3. PHP-инструкция, указывающая кодировку по умолчанию. В файле, который нужно отобразить в желаемой кодировке, не смотря на настройки сервера хостинг-провайдера, в самом начале указывается директива с php-кодом:

Этот php-код отправит заголовок сервера с указанием кодировки по умолчанию для браузера. В приведенном примере, для отображения страницы, будет применяться кодировка utf-8.

Против такого лома, обычно, приемов в настройках сервера хостинг-провайдера не остается.

Хочу заметить, что для обработки php-инструкций сервером, html-файл должен иметь расширение .php (например index.php).

Есть еще вопросы по кодировкам? Пишите в комментарии. Нужно решить эти проблемы раз и на всегда 🙂