Сайт о телевидении

Сайт о телевидении

» » Http кодировка utf 8. Кодировка HTML-страницы

Http кодировка utf 8. Кодировка HTML-страницы

При создании сайта у начинающих веб-мастеров часто появляются вопросы: в какой кодировке делать сайт, чем отличается 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:

Заголовок страницы

Текст страницы


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

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

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

UTF-8 (от англ. Unicode Transformation Format ) - в настоящее время распространённая кодировка, реализующая представление Юникода, совместимое с 8-битным кодированием текста.

Windows-1251 (или cp1251 ) - набор символов и кодировка, являющаяся стандартной 8-битной кодировкой для всех русских версий Microsoft Windows.

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

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

Свойство UTF-8 Windows 1251
Общего характера
Многоязычность Кодировка позволяет использовать разные языки как в публичной, так и в административной части сайта.
  • Смена кодировки действующего крупного сайта с Windows-1251 на UTF-8 может вызвать серьёзные дополнительные трудовые и финансовые издержки.
  • Русский и английский без проблем работают с Windows-1251, если точно не будет потребности в других языках, то и нет потребности в UTF-8.
Большое число символов. Возможность использования спецсимволов. Есть. Но надо учитывать возможности браузеров. Штатно нет. Есть возможность замены спецсимволов на "костыли", например, © на &cорy; или × (знак умножения) на &timеs;. Однако это повышает требования к уровню подготовки контент-менеджера и создаёт проблемы при переносе данных из другой базы данных. Кроме того, в Bitrix Framework есть поля, которые не используют визуальный редактор, например, название страницы или название элемента инфоблока. Это также усложняет поддержку проекта силами низкоквалифицированных сотрудников.
Скорость работы
  • При работе сайта идет подмена всех функций работы со строками на mb_* . Это значит, что весь текст будет перекодироваться в кодировку сайта.
  • utf strlen зависит от длины строки, соответственно обычный strlen работает в 3 раза быстрее мультибайтового: 0.0004 против 0.0013 на тысяче итераций. По замерам на это выливается в 10-15% разницу в скорости работы реального сайта.
Минимизация объема проекта. Проект на UTF-8 будет заведомо "тяжелее", в силу того что строки в этой кодировке занимают в два раза больше места, чем строки в однобайтной Windows-1251. Размер сайта и базы данных будет в 1,2 - 1,5 раз больше.
Поддержка большинством js-фреймворков Поддерживается без проблем. Сложности в реализации.
Поддержка MS SQL По техническим причинам, данные в MS SQL должны храниться и хранятся в Windows-1251. Требуется дополнительная настройка. Нет проблем.
Импорт CSV Excel не сохраняет в UTF-8. Требуется пересохранение созданного файла в этой кодировке с помощью другого редактора. Нет проблем.
Импорт из 1С Сайты на UTF-8 работают без проблем при интеграции через SOAP с такими системами как, например, 1С.
Вебвизор Яндекс.Метрики Вебвизор корректно записывает действия посетителей. Возможны ошибки в записи.
Связанные с Bitrix Framework
Возможность сделать сайты в разной кодировке по системе многосайтовости. Невозможно. Все сайты на одном ядре должны быть в одной кодировке.
Поддержка на различных хостингах При работе с Bitrix Framework необходимо подключение опции php mbstring.func_overload в значении большем или равном 2 . Это . Работает на любых хостингах.
Размещение продуктов на виртуальной машине BitrixVM . По умолчанию. Требует дополнительных действий по настройке.
Корректное отображение пунктов меню сайта При использовании данной кодировки такая проблема возможна. Решается пересохранением каждого файла в UTF-8. (Если быть точным, то рекомендуется проверить кодировку всех файлов, а не только файлов меню и, при необходимости, перекодировать и их.)
Импорт исходников в IDE, например, в eclipse pdt При выставленном в настройках проекта UTF-8, в коде ядра Bitrix Framework портятся комментарии. Нет проблем.
Разные мелочи
Взаимодействие с WordPress (блог-клиенты, trackback и ping"и) Есть Нет
Редактирование файлов по FTP через FAR FAR поддерживает UTF только с версии 2.0. Возможно
Поддержка большинством редакторов Требуется редактор, который поддерживает кодировку UTF-8 без BOM . Нет проблем.

Как перевести сайт с кодировки win1251 в UTF-8

Общий порядок действий:

    1. Перекодировать всю базу данных в UTF-8 (вероятнее всего придётся обращаться за помощью к администратору сервера).

    2. Перекодировать все файлы сайта в UTF-8 (можно сделать своими силами).

    3. В файл /bitrix/php_interface/dbconn.php добавить строки:

define("BX_UTF", true);

4. В файл /.htaccess добавить строки:

Php_value mbstring.func_overload 2 php_value mbstring.internal_encoding UTF-8

Перекодировать все файлы сайта в UTF-8 (второй пункт) можно выполнив команду через SSH в корневой папке сайта:

Find . -name "*.php" -type f -exec iconv -fcp1251 -tutf8 -o /tmp/tmp_file {} \; -exec mv /tmp/tmp_file {} \;

Те, у кого старые сайты, могут столкнуться с такой проблемой, что необходимо перевести файлы в кодировку UTF-8. К их числу я смело могу назвать и себя. Начала делать сайты более 10 лет назад, когда об этой кодировке было мало что известно. На всех страницах у меня стояла кодировка:

За эти годы некоторые мои сайты распухли до тысячи и более страниц и переделывать все эти тысячные страницы не хватит никаких сил и времени.

Сейчас уже так не пишут. На смену старому пришло новое - HTML5, где нужно прописать:

Скажу честно, все же решила я все перелопатить вручную и вот как это у меня происходило:

  1. Открывала файл в Notepad++
  2. Выделяла весть текст
  3. Копировала весь текст
  4. Переводила кодировку в UTF-8
  5. Вставляла текст
  6. Проверяла опять - в той ли кодировке стоит?
  7. Сохраняла файл

И вот два дня я так долбила один свой сайт.

Можно, конечно же и не менять ничего. Но ведь старые сайты мои давно устарели, нужно переводить их и на современную верстку HTML5 и CSS3, плюс мобильную и адаптивную верстку. И лучше это делать в более продвинутых программах, а не в Notepad++.

Короче, приуныла я. Однако приехал сын-программист и все решил!

Оказывается все уже давно придумано. И если у Вас возникла такая же проблема - не отчаивайтесь! Есть прекрасная программа UTFCast Express

Эту программу можно скачать тут - http://www.rotatingscrew.com/utfcast-express.aspx - Это условно бесплатная программа, которая умеет конвертировать текст из разных кодировок в utf8. Доступна для ОС семейства Windows.

Запускаем UTFCast Express и указываем правильные пути: сверху - что конвертировать, снизу - куда складывать конвертированные файлы. Вам нужно просто выбрать нужные директории, программа сама перекодирует все нужные файлы из папки. Нажимаем "Start".

Единственно, заранее создайте новую папку, куда программа закачает все Ваши файлы из нужной папки.

Не забудьте также поставить галочку "Copy Unconverted". Нажимаете кнопочку "Start" и программа заработала!

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

Папку с прежними файлами можете просто удалить, чтобы не занимала место и работать дальше! Вперед, к новым высотам!

Ура, товарищи!!!

Что такое вообще UTF-8

Заметьте, что UTF-8 надо обязательно писать в верхнем регистре и через черточку, то есть никаких там utf-8, utf8 или UTF8. Пишите правильно!

UTF-8 (от англ. Unicode Transformation Format, 8-bit - «формат преобразования Юникода, 8-битный») - одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода, используя переменное количество байт (от 1 до 6).

Стандарт UTF-8 официально закреплён в документах RFC 3629 и ISO/IEC 10646 Annex D. Кодировка нашла широкое применение в UNIX-подобных операционных системах и веб-пространстве. Сам же формат UTF-8 был изобретён 2 сентября 1992 года Кеном Томпсоном и Робом Пайком и реализован в Plan 9. В качестве BOM использует последовательность байт EF16, BB16, BF16 (что у неё самой является трёхбайтовой реализацией символа FEFF16).

Одним из преимуществ является совместимость с ASCII - любые их 7-битные символы отображаются как есть, а остальные выдают пользователю мусор (шум). Поэтому в случае, если латинские буквы и простейшие знаки препинания (включая пробел) занимают существенный объём текста, UTF-8 даёт выигрыш по объёму по сравнению с UTF-16.

Задаём набор символов

Мета-тег

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

charset=UTF-8 » />

charset=»utf-8″ /> (вариант для HTML 5)

Надо вставить его в раздел — лучше в самое начало, сразу после открывающего :

Мета-тег кодировки

Через.htaccess (если ничего не помогает)

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

Для этого в нём нужно прописать такую строчку:

AddDefaultCharset utf-8

Вот и всё. Если вы примените последовательно 3 этих способа задания кодировки на своём проекте, то вероятность того, что всё будет отображено как надо , близка к 100 %.

Как «увидеть», что скрывается за непонятными символами на сайте?

Если вы зашли на веб-страницу, видите «кракозябры» и хотите увидеть нормальный текст, то тут только два пути:

  • сообщить сайтовладельцу, чтобы всё настроил как следует
  • попытаться угадать кодировку самостоятельно. Делается это стандартными средствами браузеров. В Chrome, например, нужно в меню щёлкнуть «Инструменты => Кодировка» и из огромного списка выбрать подходящий набор символов (т.е. угадать).

К счастью, практически все современные веб-проекты делаются в кодировке UTF-8, которая является «универсальной» для разных алфавитов и поэтому всё менее и менее вероятно увидеть эти непонятные символы в Интернет.

Первая серьёзная проблема, с которой сталкиваются большинство новичков при , связана с набором символов (англ. 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-заголовков должно идти до вывода какой-то информации на экран, в противном случае Вы получите сообщение об ошибке.