Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » HTML кодировка web-страницы
Информация к новости
  • Просмотров: 866
  • Автор: hazardcd
  • Дата: 16-03-2015, 10:36
  • Не нравится
  • 0
  • Нравится
16-03-2015, 10:36

HTML кодировка web-страницы

Категория: Вебмастер / Статьи

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

Сейчас мы с этим делом подробно разберемся и вы будете четко знать в какую кодировку сохранять HTML-страницу и посредством каких инструментов.

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

В 90-е годы прошлого века существовало 4 кодировки для PC и еще одна, своя собственная, для Мака. Ирония судьбы заключается в том, что во всех этих кодировках символы латиницы ставились в соответствие машинным кодам по одному и тому же алгоритму, а вот по поводу кирилицы каждая из кодировок имела свое собственное мнение.

Вся эта путаница и привела к появлению кракозябров. Например, если слово «Вопрос», набранное в кодировке windows-1251, отобразить кодировкой KOI8-R, получится слово «бНОПНЯ».

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

На данный момент выбор для кодировки HTML-документа стоит между windows-1251 и utf-8. А теперь внимание: utf-8 гораздо богаче, мощнее и за ней будущее. Так что наши HTML-файлы мы будем сохранять именно в utf-8.

UTF-8 содержит в своей таблице соответствия такие знаки, как → ←↓↑. А в windows-1251 вместо этих символов вот что: > <v^. А еще в utf-8 есть знак «евро»; а еще utf-8 позволяет в одном HTML-файле совмещать кучу разнообразных специфических символов, используемых в таких языках как грузинский, иврит, китайский, японский; а еще utf-8 в кодировках HTML — это правило хорошего тона.

Надеюсь я вас убедил и вы будете использовать Юникод (кстати «utf-8» и «Юникод» — это синонимы или, если быть более точным, utf-8 — это одна из кодировок семейства Юникод, которая снискала популярность в среде веб-разработчиков).

Теперь пристально посмотрим на инструменты перекодирования файлов, которые я рекомендую вам использовать.

Инструменты для работы с кодировками HTML файлов


- PSPad. Бесплатный текстовый редактор.
- Notepad++. Еще один хороший текстовый редактор и тоже бесплатный.
- Dreamweaver. C Dreamweaver-ом вы познакомитесь в других наших материалах.

Загружаем какой-то HTML-файл в PSPad. И как же нам понять, что за кодировка у загруженного подопытного? Очень просто в строке состояния (внизу) все четко написано.

Кодировка открытого файла windows-1251
Кодировка открытого HTML-файла windows-1251

А у этого файла HTML кодировка utf-8
А у этого файла HTML кодировка utf-8



А теперь, создавая новый HTML-документ, позаботимся о его кодировке.

Идем в меню PSPad-а. Нас интересует пункт Формат. В нем-то мы и поставим галку напротив кодировки utf-8.

Кодировка будущего HTML-файла будет utf-8
Кодировка будущего HTML-файла будет utf-8

HTML кодировка будующего файла windows-1251
А так кодировка будующего файла — windows-1251

Теперь о том как изменить кодировку файла HTML.

Пример перекодирования файла из кодировки windows-1251 в utf-8
Пример перекодирования файла из кодировки windows-1251 в utf-8



Нужно кликнуть по требуемой кодировке в пункте меню Формат и кодировка сменится. После этого сохраняйте файл, он перекодирован, дело сделано.

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

Создавая новый файл, обращайте внимание на то, в какой кодировке он будет создан. Для этого в окне создания нового документа File → New (Ctrl+N) воспользуйтесь кнопкой Preferences



И посмотрите, что задано в качестве кодировки по умолчанию:
Кодировка создаваемого HTML-файла по умолчанию
Кодировка создаваемого HTML-файла по умолчанию в Dreamweaver



Перекодировать открытый HTML-файл в Dreamweaver можно в диалоге Page Properties, который запускается из меню ModifyPage Properties (Ctrl + J).



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

Итак, наш HTML-файл сохранен в выбранную нами кодировку. Теперь давайте разберемся с вопросом: каким образом браузер узнает о применяемой в данном HTML-файле кодировке?

Здесь есть три варианта:

1. Мы сами сообщаем браузеру о том, какая кодировка установлена для данного HTML файла. Делается это посредством META-тега

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

В приведенном примере браузеру дается указание, что загруженный HTML-файл сохранен в кодировке utf-8.

Если HTML-файл сохранен в кодировку windows-1251, то:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

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

Полный HTML выглядит следующим образом (привожу его для понимания вопроса «в каком месте указывается META-тег с директивой кодировки» внимание на 4-ю строку):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body> Ну и т.д.

2. При помощи файла .htaccess. Иногда сервер насильно передает заголовки для загружаемых HTML-файлов и сообщает браузеру кодировку по умолчанию. В этом случае браузер не обращает внимания на директивы в META-теге, а отображает HTML-файл в той кодировки, которую сообщил сервер. Чтобы файл загружался в той кодировке, которая нужна вам, в корне хостинг-директории создается файл с именем «.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 header('Content-type: text/html; charset=utf-8')?>

Этот php-код отправит заголовок сервера с указанием кодировки по умолчанию для браузера. В приведенном примере, для отображения страницы, будет применяться кодировка utf-8.

Против такого лома, обычно, приемов в настройках сервера хостинг-провайдера не остается.

Хочу заметить, что для обработки php-инструкций сервером, html-файл должен иметь расширение .php (например index.php).

По материалам Андрея Морковина

Метки к статье: HTML кодировка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *

^
 
Рейтинг сайтов HazardCD Studio Рейтинг@Mail.ru Push 2 Check Web100kz.com - каталог сайтов Траст. Анализ сайта hi-cd.ru Goon Каталог сайтов