Кодировка html. Почему вместо нормального текста отображаются кракозябры. Изменение кодировки файлов
В этой статье я постараюсь поставить все точки над «и» (а так же над «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 файлов
Собственно, их всего три:
- PSPad . Бесплатный текстовый редактор, мой любимый.
- . Еще один хороший текстовый редактор и тоже бесплатный.
- Dreamweaver. Ну с Dreamweaver-ом вы с вами знакомы из моих .
Загружаем какой-то HTML-файл в PSPad. И как же нам понять, что за кодировка у загруженного подопытного? Очень просто в строке состояния (внизу) все четко написано.
Кодировка открытого HTML-файла windows-1251
А теперь, создавая новый HTML-документ, позаботимся о его кодировке.
Идем в меню моего любимого PSPad-а . Нас интересует пункт Формат . В нем-то мы и поставим галку напротив кодировки utf-8.
А так кодировка будующего файла - windows-1251
Теперь о том как изменить кодировку файла HTML . Да оказывается очень просто:
Нужно кликнуть по требуемой кодировке в пункте меню Формат и кодировка сменится. После этого сохраняйте файл, он перекодирован, дело сделано.
Что касается Notepad++ все очень похоже на вышеописанную ситуацию. Только для работы с кодировками нужно использовать пункт меню Кодировки.
Вся разница заключается в том, что в случае Notepad++ появляются, специально разработанные для преобразования кодировок, пункты меню Преобразовать..
. (лишние на мой взгляд, в PSPad все проще и поэтому я им пользуюсь). Соответственно, именно по ним и нужно кликать при желании поменять кодировки у нашего HTML-файла.
Кроме всего прочего, при сохранении в utf-8 у нас есть выбор: без BOM или с BOM . Нам, как веб-мастерам, нужно использовать кодировку UTF-8 (без BOM) .
Вот что нам ответит Википедия на вопрос «что такое BOM »
Для определения формата представления Юникода в текстовом файле используется приём, по которому в начале текста записывается символ U+FEFF (неразрывный пробел с нулевой шириной), также именуемый меткой порядка байтов (англ. Byte Order Mark, BOM). Этот способ позволяет различать UTF-16LE и UTF-16BE, поскольку символа U+FFFE не существует. Также он иногда применяется для обозначения формата UTF-8, хотя к этому формату и неприменимо понятие порядка байтов.
Если прочитать приведенный текст 10 раз, почесать затылок, то становится понятно: для utf-8 BOM нам НЕ нужен . Кроме того, если сохранить файл с php-скриптом в кодировку utf-8 с BOM , то он не будет работать, потому что обработчик не поймет, что это за ерунда такая написана в начале файла-скрипта (я имею ввиду тот самый неразрывный пробел с нулевой шириной).
Так-так, осталось пристально взглянуть на Dreamweaver .
Создавая новый файл, обращайте внимание на то, в какой кодировке он будет создан. Для этого в окне создания нового документа File → New (Ctrl+N) воспользуйтесь кнопкой Preferences ...
И посмотрите, что задано в качестве кодировки по умолчанию:
Кодировка создаваемого HTML-файла по умолчанию в Dreamweaver
Перекодировать открытый HTML-файл в Dreamweaver можно в диалоге Page Properties, который запускается из меню Modify → Page Properties (Ctrl + J).
Выбирайте требуемую кодировку, нажимайте ОК и все, задача по перекодированию выполнена (а вот BOM все так же ненужен, не ставьте галку).
Определение кодировки браузерами
Итак, наш HTML-файл сохранен в выбранную нами кодировку. Теперь давайте разберемся с вопросом: каким образом браузер узнает о применяемой в данном HTML-файле кодировке?
Здесь есть три варианта:
1. Мы сами сообщаем браузеру о том, какая кодировка установлена для данного HTML файла. Делается это посредством META-тега
В приведенном примере браузеру дается указание, что загруженный HTML-файл сохранен в кодировке utf-8 .
Если HTML-файл сохранен в кодировку windows-1251, то:
Кстати, при перекодировке файлов не забывайте изменять директивы в META-теге на актуальные. Dreamweaver, при изменении кодировки, делает это автоматически, а в других текстовых редакторах вам нужно самим ставить в соответствие примененную кодировку и директиву META-тега.
Полный HTML выглядит следующим образом (привожу его для понимания вопроса «в каком месте указывается META-тег с директивой кодировки» внимание на 4-ю строку):
2. При помощи файла.htaccess. Иногда сервер насильно передает заголовки для загружаемых HTML-файлов и сообщает браузеру кодировку по умолчанию. В этом случае браузер не обращает внимания на директивы в META-теге, а отображает HTML-файл в той кодировки, которую сообщил сервер. Чтобы файл загружалсяв той кодировке, которая нужна вам (часто хостинг насильно указывает кодировку windows-1251), в корне хостинг-директории создается файл с именем «.htaccess».
Файл этот предназначен для дополнительной конфигурации сервера. Действие.htaccess-директив распространяется на все файлы и подкаталоги, которые находятся в том каталоге, куда вы сохранили файл.htaccess.
Создать этот файл можно, например, в Total Commander-е, нажав горячее сочетание клавиш Shift+F4 и указав имя создаваемому файлу .htaccess . Далее в текстовом редакторе указываются директивы дополнительных настроек кодировки по умолчанию.
Для HTML-файлов в кодировке utf-8 в.htaccess нужно написать одну строку:
AddDefaultCharset UTF-8
Для HTML-файлов в кодировке Windows-1251 :
AddDefaultCharset Windows-1251
Если ваш хостинг хитро-мудрый и не обращает внимания на эти директивы, то можно попробовать:
Charsetdisable on AddDefaultCharset Off
Если и это не дало результата, то просто спросите у своего хостера, чего вам делать, чтобы отключить кодировку по умолчанию:). Все это зависит от конкретных настроек сервера у хостинг-провайдера.
3. PHP-инструкция, указывающая кодировку по умолчанию. В файле, который нужно отобразить в желаемой кодировке, не смотря на настройки сервера хостинг-провайдера, в самом начале указывается директива с php-кодом:
Этот php-код отправит заголовок сервера с указанием кодировки по умолчанию для браузера. В приведенном примере, для отображения страницы, будет применяться кодировка utf-8.
Против такого лома, обычно, приемов в настройках сервера хостинг-провайдера не остается.
Хочу заметить, что для обработки php-инструкций сервером, html-файл должен иметь расширение .php (например index.php).
Есть еще вопросы по кодировкам? Пишите в комментарии. Нужно решить эти проблемы раз и на всегда 🙂
Задаём набор символов
Мета-тег
Нужно добавить на каждую страницу (или в шаблон шапки) специальный мета-тег, сообщающий браузеру о том, какой набор символов ему использовать для отображения текстов. Тег этот стандартный и выглядит обычно так:
charset=UTF-8 » />
charset=»utf-8″ /> (вариант для HTML 5)
Надо вставить его в раздел
— лучше в самое начало, сразу после открывающего :
Мета-тег кодировки
Через.htaccess (если ничего не помогает)
Обычно первых двух вариантов достаточно и браузеры отображают текст как надо . Но с некоторыми из них могут быть проблемы и поэтому можно прибегнуть к помощи файла.htaccess .
Для этого в нём нужно прописать такую строчку:
AddDefaultCharset utf-8
Вот и всё. Если вы примените последовательно 3 этих способа задания кодировки на своём проекте, то вероятность того, что всё будет отображено как надо , близка к 100 %.
Как «увидеть», что скрывается за непонятными символами на сайте?
Если вы зашли на веб-страницу, видите «кракозябры» и хотите увидеть нормальный текст, то тут только два пути:
- сообщить сайтовладельцу, чтобы всё настроил как следует
- попытаться угадать кодировку самостоятельно. Делается это стандартными средствами браузеров. В Chrome, например, нужно в меню щёлкнуть «Инструменты => Кодировка» и из огромного списка выбрать подходящий набор символов (т.е. угадать).
К счастью, практически все современные веб-проекты делаются в кодировке UTF-8, которая является «универсальной» для разных алфавитов и поэтому всё менее и менее вероятно увидеть эти непонятные символы в Интернет.
Влад Мержевич
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмов
Среди разработчиков сайтов существует мнение, что правильно написанные метатеги позволяют подняться к верхним строчкам поисковых серверов. На самом деле это не так, на одних метатегах высоко не поднимешься, но и неудачно выполненное содержимое метатегов может ухудшить рейтинг сайта.
Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы, относящиеся к метатегам:
- не включайте ключевые слова, которые не содержатся на ваших страницах;
- не повторяйте ключевые слова;
- используйте метатеги по их прямому назначению;
- делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.
description
Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.
Пример 1. Использование Description
keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.
Пример 2. Использование Keywords
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).
. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).
Пример 4. Выбор текущей кодировки
Кириллица
Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251 , переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.
Довольно часто начинающие блоггеры, и не только начинающие, сталкиваются с проблемой кодировки страницы html. Когда вместо текста и читаемых символов выводятся непонятные КРАКОЗЯБРЫ. Именно так называются символы не соответствующие тем которые должны быть выведены на страницу. Откуда же появляются непонятные иероглифы?
Чтобы это понимать, нужно разобраться что такое- html кодировка страницы. Любой текст на компьютере представляется в виде набора байтов. В каждом из этих байтов определенным кодом – закодирован только один единственный символ. Чтобы правильно расшифровать или же раскодировать набор байтов и представить его в понятном человеку виде, браузеру нужно провести соответствие с одной из кодовых таблиц.
Базовой кодировкой является ASCIIкодировка, которая содержит в себе коды 128 символов латинского алфавита и специальные символы (скобки, решетки и т.д.). Далее появились первые русскосимвольные кодировки CP866 и KOI8-R, а из них вышла известная сегодняшним веб- мастерам кодировка windows-1251. Даже не смотря на то, что все эти кодировки призваны для отображения русского текста, они все отличаются друг от друга кодами.
Если текст писался в кодировке CP866, а браузер пытается раскодировать ее с помощью таблицы кодов windows-1251, то в результате мы получим не читаемые слова. Кроме названий тех кодировок, которые я здесь привел, существует еще великое множество котировок. С таким обилием кодовых таблиц образовалась проблема совместимости кодировок. Очень актуально встал вопрос создания универсальной кодировки. На сегодняшний день изобретена универсальная кодировка utf-8. При программировании сайта есть четыре момента которые требуют соблюдения единого стандарта кодирования текста.
- Кодировки скриптов.
- Кодировка таблиц MySQL.
- Кодировка самой HTML страницы.
- Локаль используемая браузером пользователя.
Во всех этих составляющих сайта, должна использоваться единая кодировка- желательно utf-8, ведь она универсальная. Если нажать сочетание клавиш CTRL+ U можно посмотреть код страницы, в котором видно, какая кодировка используется для данного документа.
Если Вы открываете свой блог и вместо русских символов видите какие то непонятные знаки- значит кодировка установлена неправильно.
Как поменять кодировку?
Для устранения ошибок и проблем с кодировкой Вашего блога используем FTP- клиент . С его помощью копируем файл wp- config.php на «Рабочий стол» Вашего компьютера и открываем с помощью текстового редактора Notepad++. В этом файле содержится информация Вашего блога- включая пароли, кодировку базы данных и другое. Смотрим, если кодировка какая либо другая, ее нужно поменять на UTF- 8.
- -сохраняем в этой кодировке.
- -внутри кода Базы Данных кодировку меняем на UTF- 8.
Сохраняем файл в редакторе Notepad++, в значении- «UTF- 8 без сигнатуры BOM» и закачиваем файл на свой хостинг, то есть меняем на хостинге старый файл wp- config.php, на новый.
Как правило этих действий достаточно для того чтобы на Вашем блоге все отображалось корректно. Если после проведенных действий ничего не получилось, можно попробовать еще один способ изменения кодировки. Для этого нужно внести изменения в файле.htaccess . Для корректировки открываем файл.htaccess с помощью редактора Notepad++ и добавляем в начале одну из данных строк:
- AddDefaultCharset UTF-8
- CharsetDisable On
- CharsetDefault UTF-8
- CharsetSourceEnc UTF-8
Возможно будет достаточно поменять один из вариантов, бывает достаточно первого. Если не получается, перебираем вручную следующие варианты, поочередно вписывая следующие варианты. Не забываем последовательность действий:
- Открываем файл в редакторе.
- Вносим изменения.
- Сохраняем.
- Закачиваем на хостинг.
- Проверяем.
Еще хочу упомянуть об одной из проблем, которая может возникнуть, и с которой я столкнулся при создании страниц захвата. При закачке на хостинг файлов страницы захвата, так же может возникнуть ситуация несовпадения кодировок. В этом случае нужно подправить файл index.html. Для этого, с помощью FaleZilla, извлекаем файл и переносим на «Рабочий стол» компьютера. Далее, открываем файл с помощью обычного Блокнота.
После того как файл открылся в Блокноте, левой кнопкой мыши нажимаем на «Файл» и «Сохранить как...».
15.03.2016
Пока нет
Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку
для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:
Итак, HTML кодировка – это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы .
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами
вот такой мета тег:
Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать HTML кодировку.
Обычно это utf-8
или windows-1251
.
Кодировка для utf-8 :
Кодировка для windows-1251 :
Если забыть указать браузеру, в какой кодировке сайт или веб-страница, то браузер попытается определить кодировку автоматически, но не всегда у него это выходит правильно. В итог результат будет такой, который я показал на картинке выше.
Переходим к практике.
Как создать HTML документ с
кодировкой utf-8
«Все программы» => «Стандартные» => «Блокнот» :
