Кодировка charset. Меняем кодировку страниц

При неправильной кодировке весь сайт или его часть отображаются в виде «кряпозяблов», т.е. непонятных символов, делающих текст нечитаемым. Такая ситуация может возникнуть при неверной настройки кодировки веб-сервера или при отсутствии настроек. Рассмотрим возможные варианты и способы устранения проблем

Неправильная кодировка HTML страниц

Создадим тестовый файлик:

Sudo gedit /var/www/html/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"

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

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://i1.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>Открывайте <a href="/problem-with-os/kak-otkryt-tekstovye-redaktory-bloknot-i-word-neskolko-prostyh/">стандартный блокнот</a>. <span><i>«Все программы» => «Стандартные» => «Блокнот» </i> </span>.<br> Далее вставляете в блокнот <a href="/error-in-windows-10/kak-ubrat-standartnyi-pin-kod-na-kak-snyat-parol-s-sim-karty/">стандартный код</a> 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://i0.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://i0.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>Почему вместо нормального текста отображаются кракозябры</h2> <p>Каждая страница вашего сайта должна иметь определенную кодировку. О том, какая кодировка используется в <a href="/education-and-science/kogda-sozdali-odnoklassniki-kto-vladelec-odnoklassnikov/">данный момент</a> необходимо сообщать браузеру, передавая специальные заголовки (header). В этих заголовках необходимо указать кодировку, соответствующую той, которую вы используете в теле документов, размещенных на сайте (на его страницах).</p> <p><img src='https://i0.wp.com/makeasite.ru/wp-content/uploads/2015/09/utf-8-and-windows-1251-compare.jpg' align="left" height="244" width="300" loading=lazy>Современные браузеры могут и сами определить кодировку документа, если вебмастер забыл указать ее в явном виде. Иногда случается так, что возникают несостыковки между «мнением» браузера и реальностью, отсюда и появляется набор символов, которые невозможно прочитать. Набор галиматьи может принимать <a href="/problem-with-os/programma-na-planshet-dlya-stikerov-v-kontakte-kak-poluchit-raznye-vidy/">разные виды</a>, иногда это будут просто странные символы, похожие на древние иероглифы, а иногда - просто вопросики или же вопросики внутри черных ромбиков. По большому счету не так важно, какие именно кракозябры отображает браузер, а важно то, что человек их прочитать не может.</p> <p>Если же вы столкнулись с проблемой некорректно указанной кодировки и видите на своем сайте то, что не в состоянии прочитать, в первую очередь воспользуйтесь специальным Декодером , разработанным в студии Артемия Лебедева. Для этого просто скопируйте текст, который хотите расшифровать, вставьте его в специальное поле и нажмите «Расшифровать». В случае успешного декодирования, вы увидите уже <a href="/mobile-device/obuchayushchaya-programma-vord-eksel-kak-vydelit-bolshoi-fragment/">читаемый текст</a>, а также исходную кодировку и путь, который пришлось пройти программе, чтобы вывести результат.</p> <p>Все это нужно, скорее, для продвинутых пользователей, которым полученная информация сможет чем-то помочь. Возможно, результат действий программы натолкнет вас на мысль и вы сообразите, откуда на вашем сайте берутся кракозябры и быстро исправите ситуацию. А если же проделанные манипуляции совершенно ни о чем вам не говорят, то давайте просто двигаться дальше.</p> <h2>Как правильно выбрать кодировку</h2> <p>В рамках данной статьи мы не будем углубляться в то, какие кодировки бывают и чем они друг от друга отличаются, т.к. не хотим перегружать ни себя, ни вас лишней информацией, да и в целях сегодняшней статьи этого не было. Стоит отметить лишь тот факт, что на русскоязычном сайте нет совершенно никакого смысла устанавливать кодировку windows-1251 , исчерпывающе описанную в замечательной статье Википедии. Даже если все тексты на нем будут написаны исключительно на русском и не будет никаких вкраплений нестандартных символов. Вместо этого нужно просто выбрать универсальную кодировку UTF-8 , приняв это как данное, не забивая голову лишней информацией.</p> <p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/utf-8-and-windows-1251-compare.jpg' align="left" height="244" width="300" loading=lazy>Дело в том, что нет смысла выбирать для своего сайта кодировку, которая поддерживает одни только символы славянских языков, таких как русский, украинский, белорусский, сербский, македонский и болгарский. Зачем изначально ограничивать себя и обрекать на <a href="/security/v-odnoklassnikah-ne-otkryvayutsya-fotografii-bystro-reshaem-problemu-pochemu-ne/">возможные проблемы</a> в дальнейшем. Что вы будете делать, если понадобится вставить символ, которого нет в поддерживаемых?</p> <p>UTF-8 (от англ. Unicode Transformation Format) - восьмибитный формат преобразования Юникода, который получил всемирное признание и был стандартизирован как раз для избежания проблем, связанных с появлением кракозябров и неразберихой с нечитабельными текстами. Из чего можно смело сделать вывод, что в <a href="/internet/kak-vosstanovit-udalennye-faily-diska-programmy-dlya-vosstanovleniya-failov/">данном случае</a> из двух зол нужно выбирать бóльшую и спать спокойно, не вникая в подробности, потому что тут и так все понятно. Посмотрите на размер Юпитера и Венеры для сравнения.</p> <h2>Основные способы установки правильной кодировки</h2> <p>Довольно часто проблемы с кодировкой сайта возникают не потому что не было выполнено ни одного из условий, о которых мы вам сейчас расскажем, а достаточно не выполнить всего лишь одно из них, чтобы текст на вашем сайте начал отображаться некорректно. После того, как вы установите кодировку всеми перечисленными способами, задача будет решена с вероятностью 99.9%. К такому заключению мы пришли на основании многолетнего опыта работы с сайтами на всевозможных хостинг-площадках, с использованием самых <a href="/desk-desktop/analogi-total-commander-dlya-raznyh-operacionnyh-sistem-luchshie-besplatnye-analogi/">разных систем</a> администрирования и настроек серверов.</p> <h3>Кодировка в.htaccess - AddDefaultCharset</h3> <p>Прежде всего, вам нужно установить кодировку всех страниц сайта по умолчанию с помощью одной очень полезной директивы htaccess - AddDefaultCharset, которая в дословном переводе с <a href="/mobile-device/chto-znachit-vatsap-perevod-na-angliiskii-yazyk-whatsapp-perevod-na/">английского языка</a> означает «ДобавитьКодировкуПоУмолчанию». Делается это очень просто:</p><p>AddDefaultCharset UTF-8 </p><p><img src='https://i2.wp.com/makeasite.ru/wp-content/uploads/2015/09/krakozyabra.jpg' align="right" height="434" width="300" loading=lazy>Если вы не знаете что такое <i></i>, то просто создайте <a href="/graphics-and-design/kak-rabotat-v-tekstovom-dokumente-operacii-s-sozdaniem-i-sohraneniem/">текстовый файл</a> в блокноте, а затем с помощью <a href="/setting-up-software/rasshiryaem-funkcionalnost-total-commander-nastraivaem-total-commander-pod-sebya/">Total Commander-а</a> переименуйте его в файл без названия, имеющий расширение HTACCESS (<i></i> - именно так и должно выглядеть <a href="/plug-ins-for-browsers/kak-postavit-prozvishche-v-kontakte-kak-sdelat-v-vk-otchestvo-vozvrashchaem/">полное имя</a> вашего файла). После этого закачайте только что созданный файл в <a href="/news/pervye-shagi-k-programmirovaniyu-na-php-ne-vykladyvaite-phpinfo-v-vashei/">корневую директорию</a> вашего сайта (в то же место, где находится главный исполняющий файл, например <i>index.php </i>). И не забудьте вставить строку с кодировкой по умолчанию, которую мы только что приводили.</p> <h3>Кодировка с помощью meta charset</h3> <p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/meta-tags.jpg' align="right" height="112" width="300" loading=lazy>Метатеги способны отсылать браузеру информацию о странице в виде специальных заголовков, одним из которых как раз является тот, что нам нужен - <i>charset </i>. Вообще метатеги могут иметь аж 4 различных атрибута:</p> <ol><li>content;</li> <li>http-equiv;</li> <li>name;</li> <li>scheme.</li> </ol><p>На самом деле, из представленных четырех атрибутов только один является обязательным - <i>content </i>, но существуют и исключения. Например в нашем случае будет использоваться сокращенная версия записи и мы установим кодировку с помощью метатега именно так:</p><p> <meta charset="utf-8"> </p><p>Старый же формат записи давно канул в Лету и использовать его больше смысла нет:</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Как известно, метатеги принято размещать внутри контейнера <i>head </i>. Об этом, наверное, знают уже все без исключения. Проделайте эту операцию и мы перейдем к <a href="/security/chto-dolzhna-soderzhat-politika-konfidencialnosti-dannye-peredayutsya/">следующему пункту</a> в нашем списке.</p> <h3>Кодировка файла с помощью функции header PHP</h3> <p>Данный способ подойдет лишь тем, у кого сайт реализован с помощью самого популярного на данный момент языка программирования, по большей части ориентированного на создание веб-сайтов - PHP (Hyper Text Preprocessor). Для решения задачи, поставленной в рамках данной статьи, мы воспользуемся замечательной встроенной функцией header() , предназначенной для передачи заголовков, аналогично метатегам, но с тем небольшим отличием, что действие производится из PHP-скрипта, а не посредством вывода HTML-кода.</p> <p>Установить кодировку UTF-8 для файла при помощи функции <i>header() </i> довольно просто - нужно просто вставить приведенный код в самое начало страницы, но разумеется внутри области действия PHP, которая обозначается так: <? здесь у нас PHP-код?> или же так - <?php здесь у нас PHP-код?>.</p><p>Header("Content-type: text/html; charset=utf-8"); </p><p><img src='https://i2.wp.com/makeasite.ru/wp-content/uploads/2015/09/PHP.jpg' align="right" height="209" width="300" loading=lazy>Самым <a href="/internet/noutbuk-peregrevaetsya-i-tormozit-chto-delat-davaite-rassmotrim-osnovnye/">важным моментом</a> здесь является то, что заголовки мы имеем право передавать только в том случае, если перед этим не было никакого вывода со стороны скрипта. Именно поэтому мы вставляем <a href="/setting-up-software/kakoi-princip-kodirovaniya-informacii-ispolzuetsya-v-kompyutere/">данный код</a> в самое начало страницы. Делать это нужно с умом и хорошо понимать, что происходит, ведь вы можете быть уверены, что вставляете заголовок в начало файла, но можете не знать, что этот файл используется в другом файле, в который подтягивается с помощью функции <i>require </i> или <i>include </i> уже после того, как определенная информация была выведена на экран. Поэтому если вы не очень хорошо понимаете о чем сейчас идет речь, лучше перейдите к следующему шагу и вернитесь к этому, если 3 предыдущих не помогли установить правильную кодировку страниц вашего сайта.</p> <h3>Сохранение файлов в правильной кодировке</h3> <p>Одной из, наверное, самых распространенных причин возникновения кракозябров на сайте является некорректное кодирование самих фалов, использующихся для генерации конечного документа. Чаще всего такая проблема возникает у начинающих программистов, которые только делают свои первые шаги в освоении искусства . Когда в качестве движка сайта выбрана одна из популярных на данный момент систем администрирования, <a href="/customize-windows-10/sboi-podklyucheniya-oshibka-651-sposoby-ustraneniya-dannoi-problemy/">данная проблема</a> может возникать в очень редких случаях, но если используется , то такое случается чуть ли не в каждом третьем случае.</p> <p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/encode-in-unicode-without-BOM.jpg' align="left" height="223" width="300" loading=lazy>Как мы условились ранее, используемая нами кодировка на всех, даже на самых прожженных русскоязычных сайтах - UTF-8, поэтому и все файлы, составляющие движок сайта мы с вами будем кодировать в этом же формате. А для того, чтобы изменить кодировку самого файла, закачиваемого на сервер, обычного блокнота, предоставляемого <a href="/customize-windows-10/klassifikaciya-operacionnyh-sistem-po-semeistvam-tipy-operacionnyh-sistem/">операционной системой</a> Windows будет конечно же не достаточно. Поэтому лучше воспользоваться <a href="/news/kak-povysit-bystrodeistvie-windows-7-udalenie-nenuzhnyh-programm-iz/">сторонней программой</a>, распространяемой бесплатно - Notepad++, которую можно скачать на официальном сайте без особых проблем.</p> <p>Успешно пройдя несложный процесс установки, вы должны будете назначить эту программу редактором по умолчанию, произвести некоторые настройки на свой вкус и поменять кодировку некорректно отображаемого файла так же, как показано на скриншоте. Т.е. вам необходимо выбрать значение «Кодировать в UTF-8 (без BOM)». Хорошим признаком того, что причина была именно в этом, будет то, что изначально не будет выбран ни один из вариантов и вам будет предложено «Преобразовать в UTF-8 (без BOM)». Если вы это увидели, то будьте уверены, что до решения проблемы с кодировкой остались считанные секунды.</p> <p><img src='https://i0.wp.com/makeasite.ru/wp-content/uploads/2015/09/yes.jpg' align="right" height="177" width="300" loading=lazy>В дополнение хочется сказать лишь то, что выбирать нужно именно <b>без BOM </b>. В противном случае, если кодировать просто в UTF-8 (с BOM), то в начале файла будут создаваться лишние байты. BOM - Byte Order Mark стараются не использовать именно в вебе при кодировании в формате UTF-8, т.к. это приводит к ошибкам из-за создания помех корректной PHP-интерпретации.</p> <p>Ну а теперь, когда все <a href="/office-programs/kak-vklyuchit-knopku-navigacii-na-smartfone-huawei-honor-samye-neobhodimye/">необходимые действия</a> выполнены, вы, скорей всего, на страницах вашего сайта увидите перед собой легко читаемый текст и вздохнете свободно 🙂</p> <p>Первая серьёзная проблема, с которой сталкиваются большинство новичков при , связана с набором символов (англ. <i>character set </i>). Выражается эта проблема с кодировкой в, так называемых, «кракозябриках», которые мы получаем вместо указанных в HTML-файле символов. В данной статье я хочу остановиться на проблеме с кодировкой подробнее, постараться расставить всё по полочкам и дать варианты решения.</p> <ul><li>Что такое кодировка?</li> <li>Кодировка файла <span>(редактирование в Notepad++) </span></li> <li>Кодировка отображения <span>(просмотр в браузере) </span></li> <li>Как указать кодировку HTML-страницы? (метатег charset) </li> <li>Всё ещё есть проблема с кодировкой? (header charset в php) </li> </ul><h2>Что такое кодировка?</h2> <p>Условно говоря, каждый <b>символ </b> (знак) состоит из <i>кода </i> и <i>картинки </i>. Здесь <b>код </b> - это <a href="/setting-up-software/identifikator-zaprosa-ne-ukazan-otpravit-chto-takoe/">уникальный идентификатор</a> символа в наборе символов, который определяется выбранной <i>кодировкой </i>, а <b>картинка </b> - это визуальное представление символа, которое содержится в <i>файле шрифта </i> в соответствующей коду символа ячейке.</p> <p>Другими словами, <b>кодировка </b> (англ. <i>charset </i>) - это набор взаимосвязей <i>кодов символов </i> с их <i>визуальными представлениями </i> в шрифте.</p> <h2>Кодировка файла</h2> <p>HTML-страница представляет собой обычный текстовый файл, кодировка которого выбирается при его создании и/или сохранении на запоминающее устройство <span>(<a href="/customize-your-desktop/chto-delat-esli-kompyuter-ne-vidit-vneshnii-zhestkii-disk-zhestkii-disk-ne/">жёсткий диск</a>, флэшка и т.д.) </span>.</p> <p>В случае с Notepad++, кодировка нового документа задаётся в настройках <a href="/tips/chto-takoe-tekstovyi-redaktor-ms-word-funkcii-tekstovogo-redaktora-microsoft/">текстового редактора</a>. Выбираем в меню: <b>Опции > Настройки… </b> - и переходим на вкладку «<b><a href="/useful/trebovaniya-gost-k-oformleniyu-tekstovyh-dokumentov-vyderzhki/">Новый документ</a> </b>». Здесь нас интересует секция «<i>Кодировка </i>». По умолчанию, выбрана кодировка <i>ANSI </i>.</p> <p>Напомню, что это кодировка, в которой будет храниться HTML-файл.</p> <p>Впрочем, Вы всегда можете <span>преобразовать кодировку </span> HTML-страницы, используя соответствующие функции текстового редактора. Например, в Notepad++ для этого кликните пункт меню «<b>Кодировки </b>» и выберите нужное преобразование.</p> <p><img src='https://i2.wp.com/chuvyr.ru/-oDOjDR14ot8/U7vZU9NYMaI/AAAAAAAAZNE/WaXRT9vXL7Y/s400/notepad-charset-change.jpg' height="295" width="287" loading=lazy></p> <p>В данном случае файл был в кодировке <i>ANSI </i> и я преобразовал его в <i>UTF-8 </i> (без BOM) . О том, что такое этот BOM Вы можете прочитать в моей статье: PHP: как удалить BOM в WordPress - проследовав по .</p> <h2>Кодировка отображения</h2> <p>Важно разделять <i>кодировку файла </i> и <i>кодировку отображения </i>. Независимо от того, в какой кодировке хранится файл, он может быть отображен и в любой другой кодировке. Это и является одной из причин проблем с кодировкой.</p> <p>Например, если Вы сохранили HTML-страницу в кодировке <i>ANSI </i> и откроете её в браузере, вместо русских символов Вы можем получить, так называемые, «кракозябрики».</p> <p><img src='https://i0.wp.com/chuvyr.ru/-P5h0Z5xte0s/U7vZo0OXa0I/AAAAAAAAZNM/5oSKUbLjC0E/s400/firefox-charset.jpg' width="100%" loading=lazy></p> <p>В данном случае нам надо убедиться, что <i>кодировка файла </i> совпадает с <i>кодировкой отображения </i> файла в браузере. Для этого в Firefox кликните иконку меню, а потом пункт «<b>Кодировка </b>». Если такого у Вас нет, кликните пункт «<b>Изменить </b>» и добавьте элемент «<b>Кодировка </b>» в меню.</p> <p><img src='https://i2.wp.com/chuvyr.ru/-Dlx_WN2VPx0/U7vaAQYundI/AAAAAAAAZNY/OnOaTmPw9PU/s400/firefox-charset-change.jpg' width="100%" loading=lazy></p> <p>Как вы видите, браузер отображает файл в кодировке «<i>Юникод </i>» <span>(например, <i>UTF-8 </i>) </span>, в то время как файл был сохранён в кодировке <i>ANSI </i> <span>(например, <i>Windows-1251 </i>) </span>. Выбрав нужную кодировку, мы получим нужный нам результат.</p> <p><img src='https://i2.wp.com/chuvyr.ru/-VA94VKf8QK8/U7vaRkZxXuI/AAAAAAAAZNg/snqCa4eYLb4/s400/firefox-charset-ok.jpg' width="100%" loading=lazy></p> <p>В случае с Notepad++ также имеется возможность выбора кодировки отображения. Для этого кликните пункт меню «<b>Кодировки </b>», а потом нужный вариант используемой для отображения кодировки.</p> <p><img src='https://i0.wp.com/chuvyr.ru/-SLzkEw5RbXo/U7vafO2V1pI/AAAAAAAAZNo/RxtTbvxKi5Y/s400/notepad-charset-show.jpg' height="295" width="287" loading=lazy></p> <p>В данном случае я изменил кодировку отображения <i>ANSI </i> на <i>UTF-8 </i> (без BOM) .</p> <h2>Как указать кодировку HTML-страницы?</h2> <p>И так, мы уже разобрались с тем, что такое кодировка и в чём состоит отличие кодировки файла и кодировки отображения. Теперь нам нужно решить проблему с кодировкой, которая заключается в <b>неправильной интерпретации </b> браузером <span>(или любым другим клиентом) </span> кодировки HTML-страницы.</p> <p><b>Почему возникают проблемы с кодировкой? </b> Определить кодировку HTML-страницы не просто, а зачастую и не возможно, т.к. у того же браузера нет информации о ней или она указана неправильно.</p> <p>Для того чтобы указать кодировку HTML-страницы используется специальный метатег. В HTML5 он имеет следующий урезанный вид:</p> <p><meta charset="UTF-8"></p> <p>В данном случае указана кодировка <i>UTF-8 </i> (Юникод) .</p> <p>В более старых <a href="/desk-desktop/skachat-poslednyuyu-versiyu-flash-pleera-onlain-html-igry/">версиях HTML</a> этот метатег имеет следующий вид:</p> <p><meta content="text/html; charset=Windows-1251" http-equiv="Content-Type"></p> <p>Этот метатег создаёт HTTP-заголовок Content-Type , в котором указывается тип документа text/html и его кодировка Windows-1251 (ANSI) .</p> <p>Лично я рекомендую использовать именно этот вариант, т.к. с ним будет меньше всего проблем. Главное чтобы такой метатег присутствовал в секции HEAD , и указанная в нём кодировка соответствовала кодировке файла. В большинстве случаев этого будет достаточно.</p> <h2>Всё ещё есть проблема с кодировкой?</h2> <p>В некоторых случаях указать метатег с кодировкой HTML-страницы будет недостаточно. Такая проблема может быть вызвана настройками самого сервера, на котором находится файл HTML-страницы. Дело в том, что сервер способен выдавать <b>свой </b> HTTP-заголовок Content-Type , который будет, условно говоря, иметь приоритет перед метатегом.</p> <p>В данном случае эту проблему можно решить путём внесения изменений в настройки сервера. Я не буду вдаваться в детали данного вопроса и порекомендую лишь отключать всю эту перекодировку через файл <i>.htaccess </i>, например:</p> <p>CharsetDisable Off</p> <p>Также можно производить изменения HTTP-заголовка Content-Type и <a href="/graphics-and-design/programmnye-sredstva-avtomatizacii-turoperatorov-i-turagentstv-opisanie/">программными средствами</a>. В том же PHP для этого используется функция header() , например:</p> <p><?php<br>header("Content-Type: text/html; charset=UTF-8");</p> <p>Обращаю Ваше внимание на то, что указание HTTP-заголовков должно идти <b>до </b> вывода какой-то информации на экран, в противном случае Вы получите сообщение об ошибке.</p> <p>Влад Мержевич</p> <p>Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.</p> <h2>Метатеги для поисковых механизмов</h2> <p>Среди разработчиков сайтов существует мнение, что правильно написанные метатеги позволяют подняться к верхним строчкам поисковых серверов. На самом деле это не так, на одних метатегах высоко не поднимешься, но и неудачно выполненное содержимое метатегов может ухудшить рейтинг сайта.</p> <p>Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.</p> <p>Некоторые принципы, относящиеся к метатегам:</p> <ul><li>не включайте ключевые слова, которые не содержатся на ваших страницах;</li> <li>не повторяйте ключевые слова;</li> <li>используйте метатеги по их прямому назначению;</li> <li>делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.</li> </ul><h3>description</h3> <p>Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.</p> <p>Пример 1. Использование Description</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>description

keywords

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

Пример 2. Использование Keywords

keywords

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

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).

. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

Кодировка

Кириллица

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251 , переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.