Кодировка кириллица windows 1251 html. Кодировка в html

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

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

Почему кодировка так важна и какие существуют типы?

Как только сфера IT начала развиваться, вместе с ней развивались и совершенствовались кодировки. Почему же они так важны для веб-разработки и сайтостроения?

На самом деле корректное отображение символов на дисплее девайсов – это достаточно сложная штука, ведь это не прямой процесс. Любой символ относящийся к кириллице, латинице, цифрам и другим алфавитам формируется благодаря двум параметрам:

1. Векторное представление (формы) всевозможных единиц разных алфавитов, которые хранятся в документах со шрифтами на каждом персональном компьютере;
2. Номер или код, по которому можно найти указанный символ в этих документах.

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

Как же ОС подставляет нужные буквы и знаки? Для нее все очень просто. Осуществляется поиск символа по считанному коду в документе шрифтов и после подставляется.

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

Досье на Аски

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

ASCII (Аски) и первые наследники

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

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

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

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

Переход в современность – Windows 1251

Это еще один расширенный тип стандарта ASCII, однако он связан уже с современными графическими ОС. Что же это означает? А то, что псевдографика больше никому не была нужна.

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

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

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

Приход новой власти

Спасательным кругом оказался новый стандарт кодирования алфавитов – Unicode. Все его кодировки имеют в названии UTF, а после через дефис количество битов для 1-го символа.

Так вот, продвинутые умы того времени скооперировались и создали UTF-32. Конечно это решило проблему нехватки места для тех же объемных иероглифов, однако вызвало другую – размер файлов увеличивался в 4 раза.

После выделяемая память уменьшилась до 16 бит. И наконец дошла до 8.

UTF-8 является стандартом, который не использует фиксированный размер битов для одного символа и в этом ее огромное преимущество: использование переменной длины.

Благодаря этому латиница и другие простые символы кодируются 1-м байтом, как и в ASCII. А вот «тяжелые» знаки могут быть представлены от одного и до шести байт последовательно. Стоит отметить, что помимо алфавитов, в таблицах Юникода можно найти всевозможные закорючки, смайлы, греческие буквы, цветы и другие нестандартные элементы.

Вот мы и разобрали, почему UTF-8 стала лидером.

Программы для перевода текста из одной кодировки в другую

На самом деле изменить формат кодирования файлов очень просто и доступно в большинстве программ: «Блокнот», «Notepad++», «PSPad» и другие аналоги предоставляют такую возможность, а также профессиональные продукты наподобие Visual Studio, IntelliJ IDEA и т.д.

Для новичков подойдет и работа в «Блокноте». Просто откройте нужный файл, выберете «Сохранить как…» и снизу диалогового окна измените вид кодировки.

Для более продвинутых отличным инструментом станет Notepad++. Он предлагает широкий выбор различных кодировок, в том числе UTF-8 с BOM и без него. Хотя предпочтительнее выбирать второй вариант.

Хочу сказать несколько слов о BOM. Полное название Byte Order Mark, что в русскоязычных кругах более известно, как «маркер последовательности (порядка) байтов». Такая метка устанавливается в самом начале документа с текстом и обычно используется для обмена файлами. Она занимает 3 байта, которые выглядят следующим образом: ef bb bf.

Однако, чтобы не было проблем с распознаванием кодировки файлов, стоит использовать UTF-8 без метки.

Набор инструментов для девелоперов

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

Первый вариант – это указать в документе.htaccess «AddDefaultCharset UTF-8».

Второй – в теге meta объявить значение для charset. Данный атрибут появился с выходом в свет . В качестве примера я прикрепил программную реализацию.

Привычный вид text-а! Все 4 слова и 2 числа отобразились корректно.

Поэкспериментируйте и подставьте другие названия кодировок.

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

С уважением, Роман Чуешов

Прочитано: 120 раз

Первая серьёзная проблема, с которой сталкиваются большинство новичков при , связана с набором символов (англ. character set ). Выражается эта проблема с кодировкой в, так называемых, «кракозябриках», которые мы получаем вместо указанных в HTML-файле символов. В данной статье я хочу остановиться на проблеме с кодировкой подробнее, постараться расставить всё по полочкам и дать варианты решения.

• Что такое кодировка?
• Кодировка файла (редактирование в Notepad++)
• Кодировка отображения (просмотр в браузере)
• Как указать кодировку HTML-страницы? (метатег charset)
• Всё ещё есть проблема с кодировкой? (header charset в php)

Что такое кодировка?

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

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

Кодировка файла

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

В случае с Notepad++, кодировка нового документа задаётся в настройках текстового редактора. Выбираем в меню: Опции > Настройки… - и переходим на вкладку «Новый документ ». Здесь нас интересует секция «Кодировка ». По умолчанию, выбрана кодировка ANSI .

Напомню, что это кодировка, в которой будет храниться HTML-файл.

Впрочем, Вы всегда можете преобразовать кодировку HTML-страницы, используя соответствующие функции текстового редактора. Например, в Notepad++ для этого кликните пункт меню «Кодировки » и выберите нужное преобразование.

В данном случае файл был в кодировке ANSI и я преобразовал его в UTF-8 (без BOM) . О том, что такое этот BOM Вы можете прочитать в моей статье: PHP: как удалить BOM в WordPress - проследовав по .

Кодировка отображения

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

Например, если Вы сохранили HTML-страницу в кодировке ANSI и откроете её в браузере, вместо русских символов Вы можем получить, так называемые, «кракозябрики».

В данном случае нам надо убедиться, что кодировка файла совпадает с кодировкой отображения файла в браузере. Для этого в Firefox кликните иконку меню, а потом пункт «Кодировка ». Если такого у Вас нет, кликните пункт «Изменить » и добавьте элемент «Кодировка » в меню.

Как вы видите, браузер отображает файл в кодировке «Юникод » (например, UTF-8 ) , в то время как файл был сохранён в кодировке ANSI (например, Windows-1251 ) . Выбрав нужную кодировку, мы получим нужный нам результат.

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

В данном случае я изменил кодировку отображения ANSI на UTF-8 (без BOM) .

Как указать кодировку HTML-страницы?

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

Почему возникают проблемы с кодировкой? Определить кодировку HTML-страницы не просто, а зачастую и не возможно, т.к. у того же браузера нет информации о ней или она указана неправильно.

Для того чтобы указать кодировку HTML-страницы используется специальный метатег. В HTML5 он имеет следующий урезанный вид:

В данном случае указана кодировка UTF-8 (Юникод) .

В более старых версиях HTML этот метатег имеет следующий вид:

Этот метатег создаёт HTTP-заголовок Content-Type , в котором указывается тип документа text/html и его кодировка Windows-1251 (ANSI) .

Лично я рекомендую использовать именно этот вариант, т.к. с ним будет меньше всего проблем. Главное чтобы такой метатег присутствовал в секции HEAD , и указанная в нём кодировка соответствовала кодировке файла. В большинстве случаев этого будет достаточно.

Всё ещё есть проблема с кодировкой?

В некоторых случаях указать метатег с кодировкой HTML-страницы будет недостаточно. Такая проблема может быть вызвана настройками самого сервера, на котором находится файл HTML-страницы. Дело в том, что сервер способен выдавать свой HTTP-заголовок Content-Type , который будет, условно говоря, иметь приоритет перед метатегом.

В данном случае эту проблему можно решить путём внесения изменений в настройки сервера. Я не буду вдаваться в детали данного вопроса и порекомендую лишь отключать всю эту перекодировку через файл .htaccess , например:

CharsetDisable Off

Также можно производить изменения HTTP-заголовка Content-Type и программными средствами. В том же PHP для этого используется функция header() , например:

header("Content-Type: text/html; charset=UTF-8");

Обращаю Ваше внимание на то, что указание HTTP-заголовков должно идти до вывода какой-то информации на экран, в противном случае Вы получите сообщение об ошибке.

При создании сайта у начинающих веб-мастеров часто появляются вопросы: в какой кодировке делать сайт, чем отличается UTF-8 от windows-1251 и как ее прописывать в META Charset HTML-страницы сайта. Ответы на все эти вопросы в данной статье.

Что такое кодировка сайта и как она работает

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

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

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

Самые распространенные кодировки

Из предыдущего пункта вы уже знаете что такое кодировка и почему настолько важно правильно прописать ее в коде страниц сайта. Давайте теперь выясним какую из множества кодировок лучше выбрать для будущего сайта. Поскольку самой распространенной и наиболее понятной в освоении всегда была операционная система Windows, то большинство веб-разработчиков создавали HTML-страницы в кодировке windows-1251 (ANSI), которая использовалась по-умолчанию. Но windows-1251 поддерживает не очень большое количество букв и символов, а разработчики хотят использовать в своих текстах различные стрелочки, сердечки, квадратики и другие символы, в том числе есть необходимость совмещать слова из разных языков в одном документе, поэтому на смену ей уже давно пришла более расширенная UTF-8 и большинство разработчиков используют именно эту кодировку.

Проблемы с кодировкой не только в HTML-странице

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

Практически ни один современный сайт не обходится без использования базы данных MySQL и она также может стать источником проблем с кодировкой. Если файлы сайта сохранены в одной кодировке, а информация в базе данных в другой, то на странице та часть информации, которая выводится из базы данных может отображаться в виде все тех же знаков вопросов или других непонятных символов. Чтобы избежать проблем с кодировкой она должна быть одинаковой для веб-сервера, базы данных MySQL, в скриптах, в HTML-страницах сайта и в META-теге, который прописывается в HTML-коде. Если есть проблемы с отображением текста, то проверяйте на наличие проблемы все выше перечисленное.

META Charset HTML-документа

Чтобы сообщить браузеру и поисковым системам в какой кодировке сохранены страницы сайта в их коде прописывается META Charset.

Для кодировки windows-1251:

Для кодировки UTF-8:

Теперь вы знаете что такое кодировка сайта и где искать проблемы если в какой-либо части сайта неправильно отображается текст.

Копирование статьи запрещено.

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