Бухарбаева Н.А. Кодирование текстовой информации. Основа основ – кодировка ASCII и ее современные интерпретации

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

Актуальность данной темы определяется необходимостью рассматривать вопросы, связанные с кодированием информации, в виду их большой практической значимостью.

Практическая значимость: материал статьи может быть использован в качестве дополнительного при рассмотрении вопроса о кодировании информации или как учебный материал при проведении семинарского занятия.

ВВВЕДЕНИЕ.

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

Любой живой организм, в том числе человек, является носителем генетической информации, которая передается по наследству. Генетическая информация хранится во всех клетках организма в молекулах ДНК (дезоксирибонуклеиновой кислоты). Молекула ДНК человека включает в себя около трех миллиардов пар нуклеотидов, и в ней закодирована вся информация об организме человека: его внешность, здоровье или предрасположенность к болезням, способности и т.д.

Человек воспринимает окружающий мир, т.е. получает информацию, с помощью органов чувств. Чтобы правильно ориентироваться в мире, он запоминает полученные сведения, т.е. хранит информацию, человек принимает решения, т.е. обрабатывает информацию, а при общении с другими людьми – передает и принимает информацию. Человек живет в мире информации.

Для любой операции над информацией (даже такой простой, как сохранение) она должна быть как-то представлена (записана, зафиксирована). Этот процесс имеет специальное название – кодирование информации.

ПРЕДСТАВЛЕНИЕ И КОДИРОВАНИЕ ИНФОРМАЦИИ.

История кодирования информации начинается в доисторической эпохе, когда первобытный человек выбивал в скале образы известных ему объектов окружающего мира.

Кодирование информации необычайно разнообразно. Указания водителю автомобиля кодируются в виде дорожных знаков. Музыкальное произведение кодируется с помощью знаков нотной грамоты, для записи шахматных партий и химических формул созданы специальные системы записи. Любой грамотный компьютерный пользователь знает о существовании кодировок символов. Географическая карта кодирует информацию о местности. Необходимость кодирования речевой информации возникла в связи с бурным развитием техники связи, особенно мобильной связи. Людьми были придуманы специальные коды: Азбука Брайля, азбука Морзе, флажковая азбука. Таких примеров можно приводить очень много.

Известно, что одну и ту же информацию мы можем выразить разными способами.

Например, каким образом вы можете сообщить об опасности?

  • Если на вас напали, вы можете просто крикнуть: “Караул!!” (англичанин крикнет “Неlр me!”).
  • Если прибор находится под высоким напряжением, то требуется оставить предупреждающий знак (рисунок).
  • На оживленном перекрестке регулировщик помогает избежать аварии с помощью жестов.
  • В театре пантомимы вся информация передается зрителю исключительно с помощью мимики и жестов.
  • Если ваш корабль тонет, то вы передадите сигнал “SОS” (...– – –...).
  • На флоте помимо азбуки Морзе используют также семафорную и флажковую сигнализацию.

Набор знаков, в котором определен их порядок, называется алфавитом.

Существует множество алфавитов.

  • Алфавит кириллических букв (А, Б, В, Г, Д, Е, ...)
  • Алфавит латинских букв (А, В, С, D, Е, F, ...)
  • Алфавит десятичных цифр(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)
  • Алфавит знаков зодиака (^ , _ , ` , a , b , c , d , e , f , g , h , i) и др.

Имеются, однако, наборы знаков, для которых нет какого-то общепринятого порядка:

  • Набор знаков азбуки Брайля (для слепых);
  • Набор китайских идеограмм;
  • Набор знаков планет;
  • Набор знаков генетического кода (А, Ц, Г, Т).

Особенно важное значение имеют наборы, состоящие всего из двух знаков:

  • Пара знаков (+, –);
  • Пара знаков “точка”, “тире” (., –)
  • Пара цифр (0, 1).
  • Пара ответов (да, нет).

Таким образом, кодирование информации – это процесс формирования определенного представления информации. Значимость кодирования возросла в последние десятилетия в связи с внедрением ЭВМ.

C появлением компьютеров возникла необходимость кодирования всех видов информации, с которыми имеет дело и отдельный человек, и человечество в целом. Пписьменность и арифметика – есть не что иное, как система кодирования речи и числовой информации. Информация никогда не появляется в чистом виде, она всегда как-то представлена, как-то закодирована.

Основными атрибутами кодирования являются:

  • Код – это набор знаков, упорядоченных в соответствии с определенными правилами того или иного языка, для передачи информации.
  • Знак – это метка, предмет, которым обозначается что-нибудь (буква, цифра, отверстие). Знак вместе с его значением называют символом. Существует множество классификаций знаков (Приложение 1).
  • Язык – это сложная система символов, каждый из которых имеет определенное значение. Языковые символы, будучи общепринятыми и соответственно общепонятными в пределах данного сообщества, в процессе речи комбинируются друг с другом, порождая разнообразные по своему содержанию сообщения.

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

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

ПРАКТИЧЕСКОЕ ПРИМЕНЕНИЕ КОДИРОВАНИЯ ИНФОРМАЦИИ.

Стенография – это скоростное письмо особыми знаками, настолько краткими, что ими можно записать живую речь. Стенография пришла к нам из древнейших времен. Еще в Древнем Египте скорописцы записывали речь фараонов. Широкое распространение стенография получила в Древней Греции. В 1883 г. в Акрополе была найдена мраморная плита, на которой были высечены стенографические знаки. По мнению ученых, эти записи были сделаны в 350 г. до н.э. Но общепризнанным днем рождения стенографии считается 5 декабря 63 года до н.э. Тогда в Древнем Риме возникла необходимость дословной записи устной речи. Автором древнеримской стенографии считается Тирон – секретарь знаменитого оратора Цицерона.

В современном мире, несмотря на обилие средств механической фиксации слова (магнитофонов, диктофонов), владение навыками стенографии по-прежнему ценится. Мы записываем в среднем в пять раз медленнее, чем говорим. Стенография же ликвидирует этот разрыв. Она особенно полезна при конспектировании лекций, публичных выступлений, бесед, составлении докладов, подготовке статей и т. п.

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

Телефонный план нумерации.

В России используется закрытая десятизначная нумерация. Это значит, что любой полный телефонный номер с кодом региона или мобильной сети должен иметь 10 цифр. Это называется Национальный телефонный номер. При звонке на телефон с отличным от “домашнего” кодом региона понадобится дополнительно набирать код выхода на междугороднюю связь (“8”).

Персональные данные.

В последнее время очень актуален вопрос о персональных данных. Персональные данные человека записаны в его паспорте.

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

Штрих-коды.

С развитием информационной техники, широким внедрением средств вычислительной техники во многие сферы деятельности все острее встает вопрос быстрого и надежного ввода информации. Ручной ввод кода изделия требуют больших затрат ручного труда, времени, часто приводит к ошибкам.

В настоящее время в России и за рубежом ведутся большие работы по созданию автоматизированных систем обработки данных с применением машиночитаемых документов (МЧД), одной из разновидностей которых являются документы со штриховыми кодами. К машиночитаемым относятся товаросопроводительные документы, ярлыки и упаковки товаров, чековые книжки и пластиковые карточки для оплаты услуг, магнитные носители. В связи с этим появились термины “электронные ведомости”, “электронные деньги” и т. д.

Наиболее перспективным и быстроразвивающимся направлением автоматизации процесса ввода информации в ЭВМ является применение штриховых кодов.

Штриховой код представляет собой чередование темных и светлых полос разной ширины. Структура штрихового кода представлена на слайде.

По мнению специалистов, системы штрихового кодирования имеют перспективу и дают возможность решить одну из самых сложных компьютерных проблем - ввод данных.

В настоящее время штриховые коды широко используются не только при производстве и в торговле товарами, но и во многих отраслях промышленного производства.

Товарный штриховой код присваивается продукции (товару) на этапе запуска его в производство. Штрих-коды получили широкое практическое применение почти во всех сферах деятельности человека (Приложение 3) :

  • Штриховое кодирование помогает в приготовлении медицинских препаратов;
  • Превосходная сортировка;
  • Штрих-коды наводят порядок на складе;
  • Вы можете стать штрих-кодом!
  • Штрих-коды охраняют детей;
  • Общее наблюдение за частной жизнью;
  • Штрих-коды контролируют гарантийное обслуживание;
  • Штрих-коды в аэропорту избежать путаницы;
  • Штрих-коды и скоропортящиеся продукты;
  • Карты безопасности;
  • Штрих-коды следят за заключенными;
  • Газеты в будущем;
  • Штрих-коды помогают найти выгодную цену;
  • Штрих-коды как искусство;
  • Штрих-коды не пропустят `зайцев`;
  • Штрих-коды отлавливают прогульщиков;
  • Процесс выписки рецептов;
  • Штриховое кодирование и медицина;
  • Штрих-коды и гонки Формулы 1;
  • Мобильный телефон вместо билета на концерт;
  • Штрих-код охраняет детей;
  • Шифровка диагнозов заболеваний в листках нетрудоспособности?

Смайлики.

Смайликами (от smile – улыбка) в Интернете называют значки, составленные из знаков препинания, букв и цифр, обозначающие какие-то эмоции.

Смайлик – это лучший способ передать ваши чувства и эмоции при виртуальном общении! Маленькие забавные рожицы, которые вставляются в текст, избавляют от необходимости писать излияния о ваших переживаниях. Считается, что смайлик для Интернета – все равно, что для человечества колесо. Без него невозможно обойтись ни в одной форме виртуального общения. Он крайне прост в употреблении, информативен и при всей своей простоте дает широкий простор воображению. Неудивительно, что его переняли sms-коммуникация, реклама, дизайн, обычная почта, при обмене записками на уроках.

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

ЗАКЛЮЧЕНИЕ.

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

Множество кодов очень прочно вошло в нашу жизнь. Если Вы заинтересовались проблемой кодирования информации, то можно прочитать ряд художественных произведений, в которых были затронуты вопросы кодирования и декодирования информации.

  • Артур Конан Дойль “Пляшущие человечки”;
  • Эдгар По “Золотой жук”;
  • Жюль Верн “Путешествие к центру земли”;
  • Валентин Каверин “Исполнение желаний”;
  • Дэн Браун “Код да Винчи”;
  • Дэвид Кан “Взломщики кодов”.

Для наглядности представления материала может быть использованы слайды презентации из

  1. Возьмём в качестве примера наш сайт: www.vashmaster.ru
  2. Все тексты сайта написаны и размещены на сайте в кодировке "windows-1251" и об этом браузеру не сообщается
  3. Сервер хостинга автоматически по умолчанию отправляет следующий заголовок:
    Content-Type: text/html; charset=utf-8

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

Правильная кодировка - это очень важно!

Попробуем объяснить почему.

При описанных выше настройках, браузер пользователя не сможет автоматически определить в какой же кодировке написаны тексты на просматриваемом сайте. И скорее всего будет отображать страницы в нечитаемых "кракозябрах". Если вы столкнулись с подобным "недопониманием" между браузером и вашим сайтом, то в срочном порядке необходимо принять соответствующие меры. Иначе, это с большой вероятностью приведёт к череде серьёзных проблем.

Во-первых , в подобных условиях и настройках сайта, посетителям придётся постоянно в ручную (методом подбора) указывать браузеру кодировку для отображения сайта. Для этого потребуется сделать несколько лишних кликов мышкой. Но согласитесь, не каждому понравится делать лишних 2-3 клика мышкой, чтобы просто увидеть информацию на странице в читабельном виде . Тем более, что очень многие даже и не знают не только как сменить кодировку отображения в настройках браузера, но и что такое кодировка вообще! Большинство посетителей могут решить что сайт заброшен владельцем или кем-нибудь взломан, и постараются на него больше не возвращаться.

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

Надеюсь, вы осознали, что проблемы с кодировкой могут стать очень серьёзной преградой в функционировании сайта, в его развитии и привлечении на него постоянных посетителей.

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

Настройки сайта должны быть такими, чтобы любой браузер или любой робот поисковой системы могли ОДНОЗНАЧНО определить в какой кодировке передаётся информация с сайта!

Решение проблемы с кодировкой сайта

Мы уже заметили, что все тексты на нашем сайте написаны и передаются в браузер посетителю сайта в кодировке "windows-1251". Что же сделать, дабы сервер, на котором размещён наш сайт, передавал браузеру в заголовке правильную информацию о кодировке? Давайте действовать по порядку...

1. Чтобы не зависеть от настроек сервера , на всех страницах сайта прямо в коде HTML нужно, используя мета-тег, явно прописать следующую директиву:

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

2. Чтобы сервер отдавал в своём ответе правильную информацию о кодировке , необходимо в корне своего сайта создать файл .htaccess и прописать в нём директиву:

AddDefaultCharset windows-1251

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

Если файл .htaccess уже существует на вашем сервере, то просто добавьте указанную директиву, например, в самом начале. И ни в коем случае не удаляйте без надобности уже существующую в нём информацию!

Вот и всё решение проблемы. Согласитесь, всё это не так сложно?! Зато очень полезно для профилактики всевозможных проблем с пресловутой кодировкой.

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

Особые ситуации

Ситуация первая

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

Пропишите в файл .htaccess директиву:

AddDefaultCharset Off

При использовании данной директивы, сервер просто совсем не будет отсылать заголовок с информацией о кодировке передаваемой страницы. Тогда браузеры будут отталкиваться от данных по кодировке, которые указаны явно в коде HTML на самих страницах сайта. При этом на одной странице данные могут быть в кодировке windows-1251 , а на другой странице, например в utf-8 . Главное, не забыть указать на этих страницах соответствующие мета-теги с информацией о правильной кодировке для распознавания и отображения текста браузером.

Подобное решение хоть и самое простое, но, пожалуй, не самое оптимальное и правильное. По-хорошему, нужно всю информацию на сайте и во всех разделах сайта размещать в одной и той же кодировке! И если есть несколько страниц в другой кодировке, то лучше обновить в них информацию переконвертировав все тексты в требуемую кодировку.

Ситуация вторая

Как известно, большинство сайтов при генерации страниц часть данных выбирают из базы данных, например, MySQL (если сайт написан на языке PHP). Часто, при переносе сайта с одного хостинга на другой , могут возникнуть проблемы из-за несовпадения кодировок между данными, хранящимися в базе данных MySQL, и данными, хранящимися, например, непосредственно в шаблонах сайта . Таким образом, может возникнуть такая ситуация, что при формировании одной страницы на ней могут оказаться данные в разных кодировках. Пожалуй, это одна из самых грубых возможных ошибок с кодировкой на сайте и её нужно решать сразу же. Иначе, потом могут возникнуть дополнительные сложности при наполнении и редактировании сайта.

Решение подобных разногласий с данными, хранящимися в базе данных, достигается правильной явной установкой настроек кодировки при подключении к базе данных и до выполнения выборок данных из неё. Например, если данные на сайте у нас хранятся в кодировке windows-1251, то и читать данные из базы мы должны в этой же кодировке. Для этого, после выполнения подключения к базе с помощью функции PHP mysql_connect() (или mysql_pconnect()) выполните следующий запрос SQL:

mysql_query("SET NAMES cp1251");

Данный запрос, сообщает серверу базы данных MySQL, что все данные хранятся и должны передаваться в кодировке cp1251 (именно такое название кодировки используется в MySQL вместо упоминаемого ранее названия windows-1251, которое используется при передачи данных HTML).

Но лучше всего изменить кодировку данных в базе MySql на ту, которая используется и на самом сайте. Тогда серверу базы данных не придётся выполнять лишнюю операцию по перекодировки данных из одного формата в другой.

На заметку

Если вы посетили сайт, у которого по каким-либо причинам сбилась кодировка, но вам очень нужно получить на нём полезную информацию (не дожидаясь, когда разработчики сайта выполнят вышеперечисленные нами рекомендации), то следует в ручную в настройках браузера указать правильную кодировку страницы. Сделать это можно обычно через основное меню браузера: Вид -> Кодировка -> Далее выберите из списка название предполагаемой кодировки страницы. Возможно, чтобы угадать, вам придётся проделать данную процедуру не один раз, выбирая то одно, то другое название из списка кодировок. Чтобы ускорить процесс подбора, рекомендуем перебирать их в следующем порядке: Кириллица (Windows-1251) , Кириллица (UTF-8) , Кириллица (KOI 8-R) . Это наиболее часто используемые кодировки на сайтах в Рунете.

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

Неправильная кодировка 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"

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

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим с вами про то, откуда берутся кракозябры на сайте и в программах, какие кодировки текста существуют и какие из них следует использовать. Подробно рассмотрим историю их развития, начиная от базовой ASCII, а также ее расширенных версий CP866, KOI8-R, Windows 1251 и заканчивая современными кодировками консорциума Юникод UTF 16 и 8.

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

ASCII — базовая кодировка текста для латиницы

Развитие кодировок текстов происходило одновременно с формированием отрасли IT, и они за это время успели претерпеть достаточно много изменений. Исторически все начиналось с довольно-таки не благозвучной в русском произношении EBCDIC, которая позволяла кодировать буквы латинского алфавита, арабские цифры и знаки пунктуации с управляющими символами.

Но все же отправной точкой для развития современных кодировок текстов стоит считать знаменитую ASCII (American Standard Code for Information Interchange, которая по-русски обычно произносится как «аски»). Она описывает первые 128 символов из наиболее часто используемых англоязычными пользователями — латинские буквы, арабские цифры и знаки препинания.

Еще в эти 128 знаков, описанных в ASCII, попадали некоторые служебные символы навроде скобок, решеток, звездочек и т.п. Собственно, вы сами можете увидеть их:

Именно эти 128 символов из первоначального вариант ASCII стали стандартом, и в любой другой кодировке вы их обязательно встретите и стоять они будут именно в таком порядке.

Но дело в том, что с помощью одного байта информации можно закодировать не 128, а целых 256 различных значений (двойка в степени восемь равняется 256), поэтому вслед за базовой версией Аски появился целый ряд расширенных кодировок ASCII , в которых можно было кроме 128 основных знаков закодировать еще и символы национальной кодировки (например, русской).

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

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

В нашем примере это получается 1 (2 в степени ноль) плюс 8 (два в степени 3), плюс 32 (двойка в пятой степени), плюс 64 (в шестой), плюс 128 (в седьмой). Итого получает 233 в десятичной системе счисления. Как видите, все очень просто.

Но если вы присмотритесь к таблице с символами ASCII, то увидите, что они представлены в шестнадцатеричной кодировке. Например, «звездочка» соответствует в Аски шестнадцатеричному числу 2A. Наверное, вам известно, что в шестнадцатеричной системе счисления используются кроме арабских цифр еще и латинские буквы от A (означает десять) до F (означает пятнадцать).

Ну так вот, для перевода двоичного числа в шестнадцатеричное прибегают к следующему простому и наглядному способу. Каждый байт информации разбивают на две части по четыре бита, как показано на приведенном выше скриншоте. Т.о. в каждой половинке байта двоичным кодом можно закодировать только шестнадцать значений (два в четвертой степени), что можно легко представить шестнадцатеричным числом.

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

Расширенные версии Аски — кодировки CP866 и KOI8-R с псевдографикой

Итак, мы с вами начали говорить про ASCII, которая являлась как бы отправной точкой для развития всех современных кодировок (Windows 1251, юникод, UTF 8).

Изначально в нее было заложено только 128 знаков латинского алфавита, арабских цифр и еще чего-то там, но в расширенной версии появилась возможность использовать все 256 значений, которые можно закодировать в одном байте информации. Т.е. появилась возможность добавить в Аски символы букв своего языка.

Тут нужно будет еще раз отвлечься, чтобы пояснить — зачем вообще нужны кодировки текстов и почему это так важно. Символы на экране вашего компьютера формируются на основе двух вещей — наборов векторных форм (представлений) всевозможных знаков (они находятся в файлах со ) и кода, который позволяет выдернуть из этого набора векторных форм (файла шрифта) именно тот символ, который нужно будет вставить в нужное место.

Понятно, что за сами векторные формы отвечают шрифты, а вот за кодирование отвечает операционная система и используемые в ней программы. Т.е. любой текст на вашем компьютере будет представлять собой набор байтов, в каждом из которых закодирован один единственный символ этого самого текста.

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

Значит, чтобы закодировать любой нужный нам символ (например, из национального алфавита), должно быть выполнено два условия — векторная форма этого знака должна быть в используемом шрифте и этот символ можно было бы закодировать в расширенных кодировках ASCII в один байт. Поэтому таких вариантов существует целая куча. Только лишь для кодирования символов русского языка существует несколько разновидностей расширенной Аски.

Например, изначально появилась CP866 , в которой была возможность использовать символы русского алфавита и она являлась расширенной версией ASCII.

Т.е. ее верхняя часть полностью совпадала с базовой версией Аски (128 символов латиницы, цифр и еще всякой лабуды), которая представлена на приведенном чуть выше скриншоте, а вот уже нижняя часть таблицы с кодировкой CP866 имела указанный на скриншоте чуть ниже вид и позволяла закодировать еще 128 знаков (русские буквы и всякая там псевдографика):

Видите, в правом столбце цифры начинаются с 8, т.к. числа с 0 до 7 относятся к базовой части ASCII (см. первый скриншот). Т.о. русская буква «М» в CP866 будет иметь код 9С (она находится на пересечении соответствующих строки с 9 и столбца с цифрой С в шестнадцатеричной системе счисления), который можно записать в одном байте информации, и при наличии подходящего шрифта с русскими символами эта буква без проблем отобразится в тексте.

Откуда взялось такое количество псевдографики в CP866 ? Тут все дело в том, что эта кодировка для русского текста разрабатывалась еще в те мохнатые года, когда не было такого распространения графических операционных систем как сейчас. А в Досе, и подобных ей текстовых операционках, псевдографика позволяла хоть как-то разнообразить оформление текстов и поэтому ею изобилует CP866 и все другие ее ровесницы из разряда расширенных версий Аски.

CP866 распространяла компания IBM, но кроме этого для символов русского языка были разработаны еще ряд кодировок, например, к этому же типу (расширенных ASCII) можно отнести KOI8-R :

Принцип ее работы остался тот же самый, что и у описанной чуть ранее CP866 — каждый символ текста кодируется одним единственным байтом. На скриншоте показана вторая половина таблицы KOI8-R, т.к. первая половина полностью соответствует базовой Аски, которая показана на первом скриншоте в этой статье.

Среди особенностей кодировки KOI8-R можно отметить то, что русские буквы в ее таблице идут не в алфавитном порядке, как это, например, сделали в CP866.

Если посмотрите на самый первый скриншот (базовой части, которая входит во все расширенные кодировки), то заметите, что в KOI8-R русские буквы расположены в тех же ячейках таблицы, что и созвучные им буквы латинского алфавита из первой части таблицы. Это было сделано для удобства перехода с русских символов на латинские путем отбрасывания всего одного бита (два в седьмой степени или 128).

Windows 1251 — современная версия ASCII и почему вылезают кракозябры

Дальнейшее развитие кодировок текста было связано с тем, что набирали популярность графические операционные системы и необходимость использования псевдографики в них со временем пропала. В результате возникла целая группа, которая по своей сути по-прежнему являлись расширенными версиями Аски (один символ текста кодируется всего одним байтом информации), но уже без использования символов псевдографики.

Они относились к так называемым ANSI кодировкам, которые были разработаны американским институтом стандартизации. В просторечии еще использовалось название кириллица для варианта с поддержкой русского языка. Примером такой может служить .

Она выгодно отличалась от используемых ранее CP866 и KOI8-R тем, что место символов псевдографики в ней заняли недостающие символы русской типографики (окромя знака ударения), а также символы, используемые в близких к русскому славянских языках (украинскому, белорусскому и т.д.):

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

Очень часто они вылезали при отправке и получении сообщений по электронной почте, что повлекло за собой создание очень сложных перекодировочных таблиц, которые, собственно, решить эту проблему в корне не смогли, и зачастую пользователи для переписки использовали , чтобы избежать пресловутых кракозябров при использовании русских кодировок подобных CP866, KOI8-R или Windows 1251.

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

Допустим, если символы, закодированные с помощью CP866, попробовать отобразить, используя кодовую таблицу Windows 1251, то эти самые кракозябры (бессмысленный набор знаков) и вылезут, полностью заменив собой текст сообщения.

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

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

Юникод (Unicode) — универсальные кодировки UTF 8, 16 и 32

Эти тысячи знаков языковой группы юго-восточной Азии никак невозможно было описать в одном байте информации, который выделялся для кодирования символов в расширенных версиях ASCII. В результате был создан консорциум под названием Юникод (Unicode — Unicode Consortium) при сотрудничестве многих лидеров IT индустрии (те, кто производит софт, кто кодирует железо, кто создает шрифты), которые были заинтересованы в появлении универсальной кодировки текста.

Первой вариацией, вышедшей под эгидой консорциума Юникод, была UTF 32 . Цифра в названии кодировки означает количество бит, которое используется для кодирования одного символа. 32 бита составляют 4 байта информации, которые понадобятся для кодирования одного единственного знака в новой универсальной кодировке UTF.

В результате чего, один и тот же файл с текстом, закодированный в расширенной версии ASCII и в UTF-32, в последнем случае будет иметь размер (весить) в четыре раза больше. Это плохо, но зато теперь у нас появилась возможность закодировать с помощью ЮТФ число знаков, равное двум в тридцать второй степени (миллиарды символов , которые покроют любое реально необходимое значение с колоссальным запасом).

Но многим странам с языками европейской группы такое огромное количество знаков использовать в кодировке вовсе и не было необходимости, однако при задействовании UTF-32 они ни за что ни про что получали четырехкратное увеличение веса текстовых документов, а в результате и увеличение объема интернет трафика и объема хранимых данных. Это много, и такое расточительство себе никто не мог позволить.

В результате развития Юникода появилась UTF-16 , которая получилась настолько удачной, что была принята по умолчанию как базовое пространство для всех символов, которые у нас используются. Она использует два байта для кодирования одного знака. Давайте посмотрим, как это дело выглядит.

В операционной системе Windows вы можете пройти по пути «Пуск» — «Программы» — «Стандартные» — «Служебные» — «Таблица символов». В результате откроется таблица с векторными формами всех установленных у вас в системе шрифтов. Если вы выберете в «Дополнительных параметрах» набор знаков Юникод, то сможете увидеть для каждого шрифта в отдельности весь ассортимент входящих в него символов.

Кстати, щелкнув по любому из них, вы сможете увидеть его двухбайтовый код в формате UTF-16 , состоящий из четырех шестнадцатеричных цифр:

Сколько символов можно закодировать в UTF-16 с помощью 16 бит? 65 536 (два в степени шестнадцать), и именно это число было принято за базовое пространство в Юникоде. Помимо этого существуют способы закодировать с помощью нее и около двух миллионов знаков, но ограничились расширенным пространством в миллион символов текста.

Но даже эта удачная версия кодировки Юникода не принесла особого удовлетворения тем, кто писал, допустим, программы только на английском языке, ибо у них, после перехода от расширенной версии ASCII к UTF-16, вес документов увеличивался в два раза (один байт на один символ в Аски и два байта на тот же самый символ в ЮТФ-16).

Вот именно для удовлетворения всех и вся в консорциуме Unicode было решено придумать кодировку переменной длины . Ее назвали UTF-8. Несмотря на восьмерку в названии, она действительно имеет переменную длину, т.е. каждый символ текста может быть закодирован в последовательность длиной от одного до шести байт.

На практике же в UTF-8 используется только диапазон от одного до четырех байт, потому что за четырьмя байтами кода ничего уже даже теоретически не возможно представить. Все латинские знаки в ней кодируются в один байт, так же как и в старой доброй ASCII.

Что примечательно, в случае кодирования только латиницы, даже те программы, которые не понимают Юникод, все равно прочитают то, что закодировано в ЮТФ-8. Т.е. базовая часть Аски просто перешла в это детище консорциума Unicode.

Кириллические же знаки в UTF-8 кодируются в два байта, а, например, грузинские — в три байта. Консорциум Юникод после создания UTF 16 и 8 решил основную проблему — теперь у нас в шрифтах существует единое кодовое пространство . И теперь их производителям остается только исходя из своих сил и возможностей заполнять его векторными формами символов текста. Сейчас в наборы даже .

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

Кракозябры вместо русских букв — как исправить

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

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

В верхнем меню Notepad++ есть пункт «Кодировки», где у вас будет возможность преобразовать уже имеющийся вариант в тот, который используется на вашем сайте по умолчанию:

В случае сайта на Joomla 1.5 и выше, а также в случае блога на WordPress следует во избежании появления кракозябров выбирать вариант UTF 8 без BOM . А что такое приставка BOM?

Дело в том, что когда разрабатывали кодировку ЮТФ-16, зачем-то решили прикрутить к ней такую вещь, как возможность записывать код символа, как в прямой последовательности (например, 0A15), так и в обратной (150A). А для того, чтобы программы понимали, в какой именно последовательности читать коды, и был придуман BOM (Byte Order Mark или, другими словами, сигнатура), которая выражалась в добавлении трех дополнительных байтов в самое начало документов.

В кодировке UTF-8 никаких BOM предусмотрено в консорциуме Юникод не было и поэтому добавление сигнатуры (этих самых пресловутых дополнительных трех байтов в начало документа) некоторым программам просто-напросто мешает читать код. Поэтому мы всегда при сохранении файлов в ЮТФ должны выбирать вариант без BOM (без сигнатуры). Таким образом, вы заранее обезопасите себя от вылезания кракозябров .

Что примечательно, некоторые программы в Windows не умеют этого делать (не умеют сохранять текст в ЮТФ-8 без BOM), например, все тот же пресловутый Блокнот Windows. Он сохраняет документ в UTF-8, но все равно добавляет в его начало сигнатуру (три дополнительных байта). Причем эти байты будут всегда одни и те же — читать код в прямой последовательности. Но на серверах из-за этой мелочи может возникнуть проблема — вылезут кракозябры.

Поэтому ни в коем случае не пользуйтесь обычным блокнотом Windows для редактирования документов вашего сайта, если не хотите появления кракозябров. Лучшим и наиболее простым вариантом я считаю уже упомянутый редактор Notepad++, который практически не имеет недостатков и состоит из одних лишь достоинств.

В Notepad ++ при выборе кодировки у вас будет возможность преобразовать текст в кодировку UCS-2, которая по своей сути очень близка к стандарту Юникод. Также в Нотепаде можно будет закодировать текст в ANSI, т.е. применительно к русскому языку это будет уже описанная нами чуть выше Windows 1251. Откуда берется эта информация?

Она прописана в реестре вашей операционной системы Windows — какую кодировку выбирать в случае ANSI, какую выбирать в случае OEM (для русского языка это будет CP866). Если вы установите на своем компьютере другой язык по умолчанию, то и эти кодировки будут заменены на аналогичные из разряда ANSI или OEM для того самого языка.

После того, как вы в Notepad++ сохраните документ в нужной вам кодировке или же откроете документ с сайта для редактирования, то в правом нижнем углу редактора сможете увидеть ее название:

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

Вообще, во всех языках гипертекстовой разметки кроме Html используется специальное объявление xml, в котором указывается кодировка текста.

Прежде, чем начать разбирать код, браузер узнает, какая версия используется и как именно нужно интерпретировать коды символов этого языка. Но что примечательно, в случае, если вы сохраняете документ в принятом по умолчанию юникоде, то это объявление xml можно будет опустить (кодировка будет считаться UTF-8, если нет BOM или ЮТФ-16, если BOM есть).

В случае же документа языка Html для указания кодировки используется элемент Meta , который прописывается между открывающим и закрывающим тегом Head:

... ...

Эта запись довольно сильно отличается от принятой в , но полностью соответствует новому внедряемому потихоньку стандарту Html 5, и она будет стопроцентно правильно понята любыми используемыми на текущий момент браузерами.

По идее, элемент Meta с указание кодировки Html документа лучше будет ставить как можно выше в шапке документа , чтобы на момент встречи в тексте первого знака не из базовой ANSI (которые правильно прочитаются всегда и в любой вариации) браузер уже должен иметь информацию о том, как интерпретировать коды этих символов.

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на
");">

Вам может быть интересно

Что такое URL адреса, чем отличаются абсолютные и относительные ссылки для сайта
OpenServer - современный локальный сервер и пример его использования для установки WordPress на компьютер
Что такое Chmod, какие права доступа назначать файлам и папкам (777, 755, 666) и как это сделать через PHP
Поиск Яндекса по сайту и интернет-магазину

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание таблиц в html . В данной статье я бы хотел рассказать о проблеме, с которой вы обязательно столкнетесь (если ещё не столкнулись) в своей практике. А проблема эта связана с кодировкой на сайте . Нередко бывает такая ситуация: ты сидишь, что-то придумываешь, в итоге твои мысли выражаются в написанный код. Открываешь своё творение в браузере, а там написана полная ерунда, или как обычно данную ерунду называют — "кракозябры" . Тут очевидно одно, что проблема с кодировкой на сайте . Скорее всего у вас по умолчанию стоит кодировка windows-1251 (кирилица) , а браузер пытается открыть ваш файл в кодировке utf-8 . Кратко о том, что такое кодировка. Кодировка — это некая таблица, которая каждому символу ставит в соответствие какой-то машинный код. Соответственно наши русские буквы в одной кодировке имеют один код, в других — другой код. Друзья, используйте везде кодировку utf-8 и будет вам счастье. По-другому utf-8 называется Юникод .

Давайте создадим тестовый документ в Notepad++ и запишем следующий код.

Проблемы с кодировкой

Тестируем проблемы с кодировкой

В меню Notepad++ проверьте, чтобы наверху стояло "Кодировки" — "Кодировать в ANSI". Мы сейчас с вами искусственно создадим проблему с кодировкой. Попробуйте сейчас открыть данный файл в браузере. Мы увидим иероглифы. Дело здесь в том, что мы создали наш файл в кодировке ANSI (кирилица), а браузеру сообщили, что наш файл в кодировке utf-8 () .

Причины, по которым возникают проблемы с кодировкой на сайте :

1) Неправильное значение атрибута charset у мета-тега.

2) В меню Notepad++ проверьте, чтобы кодировка файла была utf-8. Это нужно сделать "Кодировки" — "Кодировать в UTF-8 (без BOM)". В интернете можно найти определение, что такое "BOM", но оно малопонятное. Как я понял, в начале документа, ставится неразрывный пробел с нулевой шириной. Он нам не нужен, поэтому всегда ставьте "без BOM".

3) Бывает такое, что первые два пункта выполнены, но на страницах сайта всё равно появляется ерунда. Здесь проблема может быть в настройках сервера,т.е. хостинг напрямую передаёт заголовки для наших файлов и выставляет кодировку по умолчанию. Давайте попробуем отучить его это делать. В корневой директории сайта должен быть файл .htaccess . С помощью этого файла можно вносить корректировки в работу хостинга. Если данного файла у вас нет, то его нужно создать. Удобно это сделать в редакторе Notepad++. В данном файле необходимо написать следующий код:

AddDefaultCharset UTF-8

Данной инструкцией мы говорим серверу, что у нас кодировка по умолчанию "utf-8". Если это не помогло, то нужно написать в этом же файле следующий код:

Charsetdisable on AddDefaultCharset Off

Здесь мы пытаемся сказать серверу, что нам не нужна кодировка по умолчанию. Если после данных махинаций ничего не помогло, то необходимо писать хостеру и решать данную проблему с ним. Возможно он что-то подскажет.