Содержание

HTML Кодировка

ЧислоASCIIANSI8859UTF-8Описание
32Пространство
33!!!!Восклицательный знак
34««««Кавычки двойные
35####Знак числа
36$$$$Знак доллара
37%%%%Знак процента
38&&&&Амперсанд
39‘‘‘‘Кавычки одинарные
40((((Левая собка
41))))Правая скобка
42****Звездочка
43++++Плюс
44,,,,Запятая
45————Дефис-минус
46....Точка
47////Косая черта
480000Число нуль
491111Число один
502222Число два
513333Число три
524444Число четыре
535555Число пять
546666Число шесть
557777Число семь
568888Число восемь
579999Число девять
58::::Двоеточие
59;;;;Точка с запятой
60<<<<Знак меньше чем
61====Знак равенства
62>>>>Знак больше чем
63????Знак вопроса
64@@@@Коммерческая в
65AAAAЛатинская буква A
66BBBBЛатинская буква B
67CCCCЛатинская буква C
68DDDDЛатинская буква D
69EEEEЛатинская буква E
70FFFFЛатинская буква F
71GGGGЛатинская буква G
72HHHHЛатинская буква H
73IIIIЛатинская буква I
74JJJJЛатинская буква J
75KKKKЛатинская буква K
76LLLLЛатинская буква L
77MMMMЛатинская буква M
78NNNNЛатинская буква N
79OOOOЛатинская буква O
80PPPPЛатинская буква P
81QQQQЛатинская буква Q
82RRRRЛатинская буква R
83SSSSЛатинская буква S
84TTTTЛатинская буква T
85UUUUЛатинская буква U
86VVVVЛатинская буква V
87WWWWЛатинская буква W
88XXXXЛатинская буква X
89YYYYЛатинская буква Y
90ZZZZЛатинская буква Z
91[[[[Левая квадратная скобка
92\\\\Обратный солидус
93]]]]Правая квадратная скобка
94^^^^Циркумфлекс ударение
95____Низкая линия
96````Знак ударения
97aaaaЛатинская строчная буква a
98bbbbЛатинская строчная буква b
99ccccЛатинская строчная буква c
100ddddЛатинская строчная буква d
101eeeeЛатинская строчная буква e
102ffffЛатинская строчная буква f
103ggggЛатинская строчная буква g
104hhhhЛатинская строчная буква h
105iiiiЛатинская строчная буква i
106jjjjЛатинская строчная буква j
107kkkkЛатинская строчная буква k
108llllЛатинская строчная буква l
109mmmmЛатинская строчная буква m
110nnnnЛатинская строчная буква n
111ooooЛатинская строчная буква o
112ppppЛатинская строчная буква p
113qqqqЛатинская строчная буква q
114rrrrЛатинская строчная буква r
115ssssЛатинская строчная буква s
116ttttЛатинская строчная буква t
117uuuuЛатинская строчная буква u
118vvvvЛатинская строчная буква v
119wwwwЛатинская строчная буква w
120xxxxЛатинская строчная буква x
121yyyyЛатинская строчная буква y
122zzzzЛатинская строчная буква z
123{{{{Левая фигурная скобка
124||||Вертикальная линия
125}}}}Правая фигурная скобка
126~~~~Тильда
127DEL    
128 €  Знак евро
129 НЕ ИСПОЛЬЗУЕТСЯ
130 ‚  Одинарная 9 низкая кавычка
131 ƒ  Латинская строчная буква f с крючком
132 „  Двойная 9 низкая кавычка
133 …  Горизонтальное многоточие
134 †  Кинжал
135 ‡  Двойной кинжал
136 ˆ  Письмо модификатор облеченным ударением
137 ‰  Знак промилле
138 Š  Латинская буква S с caron
139 ‹  Одинарный угол влево низкая кавычка
140 Œ  Латинская заглавная лигатура OE
141 НЕ ИСПОЛЬЗУЕТСЯ
142 Ž  Латинская буква Z с caron
143 НЕ ИСПОЛЬЗУЕТСЯ
144 НЕ ИСПОЛЬЗУЕТСЯ
145 ‘  Левая одинарная низкая кавычка
146 ’  Правая одинарная низкая кавычка
147 “  Левая двойная низкая кавычка
148 ”  Правая двойная низкая кавычка
149 •  Маркер
150 –  Тире
151 —  Длинное тире
152 ˜  Маленькая тильда
153 ™  Знак торговой марки
154 š  Латинская строчная буква s с caron
155 ›  Одинарный угол вправо низкая кавычка
156 œ  Латинская строчная лигатура oe
157 НЕ ИСПОЛЬЗУЕТСЯ
158 ž  Латинская строчная буква z с caron
159 Ÿ  Латинская буква Y с diaeresis
160    Неразрывный пробел
161 ¡¡¡Перевернутый восклицательный знак
162 ¢¢¢Знак цента
163 £££Знак фунта
164 ¤¤¤Знак валюты
165 ¥¥¥Знак иены
166 ¦¦¦Прерывистая полоса
167 §§§Знак раздела
168 ¨¨¨Трема
169 ©©©Знак авторского права
170 ªªªЖенский порядковый индикатор
171 «««Двойной угол влево
172 ¬¬¬Знак нет
173 ­­­Мягкий дефис
174 ®®®Зарегистрированный знак
175 ¯¯¯Макрон
176 °°°Знак степени
177 ±±±Плюс-минус
178 ²²²Верхний индекс два
179 ³³³Верхний индекс три
180 ´´´Острый знак ударения
181 µµµМикро знак
182 Знак абзаца
183 ···Точка посередине
184 ¸¸¸Седиль
185 ¹¹¹Верхний индекс один
186 ºººМужской порядковый индикатор
187 
»		»»Двойной угол вправо
188 ¼¼¼Грубая дробь одна четвертая
189 ½½½Грубая дробь одна вторая
190 ¾¾¾Грубая дробь три четвертых
191 ¿¿¿Перевернутый вопросительный знак
192 ÀÀÀЛатинская буква A с grave
193 ÁÁÁЛатинская буква A с acute
194 ÂÂÂЛатинская буква A с circumflex
195 ÃÃÃЛатинская буква A с tilde
196 ÄÄÄЛатинская буква A с diaeresis
197 ÅÅÅЛатинская буква A с ring above
198 ÆÆÆЛатинская буква AE
199 ÇÇÇЛатинская буква C с cedilla
200 ÈÈÈЛатинская буква E с grave
201 ÉÉÉЛатинская буква E с acute
202 ÊÊÊЛатинская буква E с circumflex
203 ËËËЛатинская буква E с diaeresis
204 ÌÌÌЛатинская буква I с grave
205 ÍÍÍЛатинская буква I с acute
206 ÎÎÎЛатинская буква I с circumflex
207 ÏÏÏЛатинская буква I с diaeresis
208 ÐÐÐЛатинская буква Eth
209 ÑÑÑЛатинская буква N с tilde
210 ÒÒÒЛатинская буква O с grave
211 ÓÓÓЛатинская буква O с acute
212 ÔÔÔЛатинская буква O с circumflex
213 ÕÕÕЛатинская буква O с tilde
214 ÖÖÖЛатинская буква O с diaeresis
215 ×××Знак умножения
216 ØØØЛатинская буква O с stroke
217 ÙÙÙЛатинская буква U с grave
218 ÚÚÚЛатинская буква U с acute
219 ÛÛÛЛатинская буква U с circumflex
220 ÜÜÜЛатинская буква U с diaeresis
221 ÝÝÝЛатинская буква Y с acute
222 ÞÞÞЛатинская буква thorn
223 ßßßЛатинская строчная буква sharp s
224 àààЛатинская строчная буква a с grave
225 áááЛатинская строчная буква a с acute
226 âââЛатинская строчная буква a с circumflex
227 ãããЛатинская строчная буква a с tilde
228 äääЛатинская строчная буква a с diaeresis
229 åååЛатинская строчная буква a с ring above
230 æææЛатинская строчная буква ae
231 çççЛатинская строчная буква c с cedilla
232 èèèЛатинская строчная буква e с grave
233 éééЛатинская строчная буква e с acute
234 êêêЛатинская строчная буква e с circumflex
235 ëëëЛатинская строчная буква e с diaeresis
236 ìììЛатинская строчная буква i с grave
237 íííЛатинская строчная буква i с acute
238 îîîЛатинская строчная буква i с circumflex
239 ïïïЛатинская строчная буква i с diaeresis
240 ðððЛатинская строчная буква eth
241 ñññЛатинская строчная буква n с tilde
242 òòòЛатинская строчная буква o с grave
243 óóóЛатинская строчная буква o с acute
244 ôôôЛатинская строчная буква o с circumflex
245 õõõЛатинская строчная буква o с tilde
246 öööЛатинская строчная буква o с diaeresis
247 ÷÷÷division sign
248 øøøЛатинская строчная буква o с stroke
249 ùùùЛатинская строчная буква u с grave
250 úúúЛатинская строчная буква u с acute
251 ûûûЛатинская строчная буква с circumflex
252 üüüЛатинская строчная буква u с diaeresis
253 ýýýЛатинская строчная буква y с acute
254 þþþЛатинская строчная буква thorn
255 ÿÿÿЛатинская строчная буква y с тремой

schoolsw3.com

HTML кодировка страницы. В какой кодировке сохранять web-страницу? Урок №14

Бывали ли у вас ситуации, когда на web-странице вместо читабельного текста открывались кракозябры? Я уверен, что бывали или, по крайне мере, вы видели их на других сайтах. Если не видели, посмотрите на пример снизу:

HTML кодировка страницы. В какой кодировке сохранять web-страницу

Что такое HTML кодировка?
HTML кодировка – это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы.

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

Популярные кодировки.
На сегодняшний день существуют две самые популярные кодировки в русскоязычном интернете. Это кодировка windows-1251 и utf-8. Частенько веб-мастерам приходится выбирать, в какой кодировке делать им веб-страничку.

В какой кодировке следует сохранять HTML файл?
Большинство веб-мастеров выбирают кодировку utf-8. И это верный выбор, так как в кодировке utf-8 имеются различные знаки (→ ←↓↑ и т. д.), а также есть масса разнообразных специфических символов. Кстати, основная часть движков, как Joomla, WordPress, Drupal работает на кодировке utf-8.

Поэтому я рекомендую вам сохранять HTML файлы в кодировке utf-8.

Как задать кодировку UTF-8  для файла?
Чтобы задать кодировку для HTML файла, используют различные редакторы. Я пользуюсь текстовым редактором Notepad++.
Откройте текстовый редактор Notepad++.
Если нужно, создайте новый документ.
Перейдите в меню сверху по вкладке «Кодировки» => «Кодировать в UTF-8 (без BOM)»:

Как задать кодировку UTF-8 для файла?

Чтобы сообщить браузеру, в  какой кодировке HTML файл, существует специальный META-тег

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

В HTML документе это будет выглядеть вот так:


<html>
<head>
<title>кодировка HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
</html>

Как задать кодировку windows-1251 для файла?
Откройте текстовый редактор Notepad++.
Если нужно, создайте новый документ.
Перейдите в меню сверху по вкладке «Кодировки» => «Кодировать в ANSI»:

Как задать кодировку windows-1251 для файла?

Чтобы сообщить браузеру, в  какой кодировке HTML файл, существует специальный META-тег

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

В HTML документе это будет выглядеть вот так:


<html>
<head>
<title>кодировка HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
</body>
</html>

Пример перекодировки файла из windows-1251 в utf-8
Если в HTML документе был прописан код в кодировке windows-1251 (ANSI), а вам нужно перекодировать на utf-8 (или на оборот), тогда сделайте так:
Откройте текстовый редактор Notepad++. В текстовом редакторе перейдите в меню сверху по вкладке «Кодировки» => «Преобразовать в UTF-8 (без BOM)»:

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

Внимание, если бы вы нажали «Кодировать в UTF-8 (без BOM)», то в результате вы бы увидели вместо любимого русского текста, красивые караказябли :idea:.

красивые караказябли

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, основы

bloggood.ru

Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

Главная » Основы HTML » Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20

Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку  для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:

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

Итак, HTML кодировка –  это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы .

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами <head></head> вот такой мета тег:


<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">

Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать  HTML кодировку.
Обычно это utf-8 или windows-1251.

Кодировка для utf-8:


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

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


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

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

Переходим к практике.

Как создать HTML документ с
кодировкой utf-8

Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот»:

Далее вставляете в блокнот стандартный код HTML:


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег:


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

Вот так должно получиться (строка №4):


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Жмите в блокноте «Файл» => «Сохранит как…»:

Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html». Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:» укажите «UTF-8».
Жмите «Сохранить»:

Увеличить изображение?

Как создать HTML документ с кодировкой windows-1251

Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот».
Далее вставляете в блокнот стандартный код HTML:


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег:


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

Вот так должно получиться (строка №4):


<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Здравствуйте, это моя первая страница на StepkinBlog.ru.
</body>
</html>

Жмите в блокноте «Файл» => «Сохранит как…»:

Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html». Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:» укажите «ANSI».
Жмите «Сохранить»:

Вот и все!

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

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


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

И укажите при сохранении «ANSI»:

Так как это неправильно, результат будет вот таким:

Сохраняйте правильно ваши веб-страници во избежание вот таких результатов 

Предыдущая запись
Как проверить HTML форму. Основы HTML для начинающих. Урок №19 Следующая запись
Как прописать мета теги. Основы HTML для начинающих. Урок №21

stepkinblog.ru

Кодировки символов в HTML — Википедия

Язык гипертекстовой разметки HTML используется с 1991 года, но версия 4.0 (1997) была первой, где представление символов, отличных от ASCII (то есть, английского языка), достаточно стандартизировано.

Определение кодировки средствами HTTP

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

При передаче документа HTML по HTTP (скажем, в WWW) набор символов документа задаётся в заголовке HTTP, например для текста в русском варианте кодировки КОИ-8:

Content-Type: text/html; charset=koi8-r

Информацию о кодировке можно вставить в сам документ HTML, используя тег meta в раздел <head> HTML-документа. Например, в случае кодировки UTF-8 тег meta будет выглядеть следующим образом:

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

В стандарте для языка HTML 5 мета тег информирующий браузер о кодировке страницы записывается отлично от правил принятых в более ранних стандартах HTML. Так пример приведенный выше в HTML 5 будет выглядеть следующим образом:

<meta charset="utf-8" />

Такой способ неплохо работает для файлов, но при выдаче документа по HTTP его успешность будет зависеть от действий HTTP-сервера, пожелает ли он указать эту информацию в заголовке. Согласно HTTP/1.1, отсутствие указания charset в заголовке приравнивается к использованию набора символов ISO 8859-1.

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

Настройка заголовков, передаваемых сервером

1. При использовании сервера Apache можно использовать файл .htaccess. В нём нужно указать директивы серверу касательно кодировок по умолчанию: AddDefaultCharset UTF-8 В приведенном примере кодировкой по умолчанию в заголовках сервера будет назначена UTF-8.

В случае кодировки windows-1251: AddDefaultCharset windows-1251

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

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

charsetdisable on

AddDefaultCharset Off

Зачастую, проблемы отображения кодировок связаны с тем, что устаревшее ПО для Web (например, сайт, CMS и т. д.) использует национальную кодировку в то время как сервер настроен для работы с UTF-8. В этом случае, принудительно указывается язык, кодировка необходимая ПО (например, cp1251) для web-сервера, и (как правило) интерпретатора PHP.

DefaultLanguage ru

AddDefaultCharset windows-1251

php_value default_charset "cp1251"

2. Директива php-кодом: В начале php-файла можно указать php-код, который передаст инструкции браузеру по выбору кодировки: <?php header('Content-type: text/html; charset=utf-8')?>

Определение кодировки средствами XML

В XHTML можно также указывать кодировку в преамбуле XML, например:

<?xml version="1.0" encoding="utf-8"?>

Мнемоники HTML и коды Unicode

Символы, имеющие специальные названия (см. Мнемоники в HTML), могут быть закодированы в виде &entity;, например:

  • «&agrave;» → «à»
  • «&alpha;» → «α»
  • «&lt;» → «<»
  • «&gt;» → «>»
  • «&nbsp;» → « » (неразрывный пробел)

В то же время все символы могут быть также закодированы в числовом обозначении с использованием десятичного (&#DD;) или шестнадцатеричного (&#xHHHH;) кода Unicode.

  • «&#224;» = «&#xE0;» → «à»
  • «&#945;» = «&#x3B1;» → «α»

Правильный браузер будет отображать символы, заданные вышеназванным путём, независимо от текущей кодировки документа и, в частности, даже в случае, когда такие символы ею не могут быть охвачены. Таким образом, возможен японский текст в HTML-документе, написанном в Windows-1251, и т. д.

wikipedia.green

Правило @charset

Опубликовано: 16 июля 2015 Обновлено: 30 апреля 2019

Кодировка документа обычно задается в html-документе в теге <meta charset="...">. Как для html-документов, так и для таблиц стилей должна использоваться кодировка UTF-8.

<!-- HTTP запись -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- краткая запись для HTML5 -->
<meta charset="utf-8">

Кодировка — это таблица соответствия машинных кодов и символов алфавита.

Правило @charset определяет кодировку символов, используемую в таблице стилей. Правило должно быть указано самым первым в таблице стилей и ему не должен предшествовать какой-либо символ, даже пробел. Если задано несколько правил @charset, то будет использоваться только первое. Правило может быть полезно при использовании не-ASCII символов в некоторых css-свойствах, например, content.

Не допускается одновременное задание кодировки в таблице стилей с помощью правила @charset и на html-странице внутри элемента <style>, или как значение атрибута свойства style.

Поскольку существует несколько способов задания кодировки таблицы стилей, браузер проверяет эти способы в следующем порядке:
1) Тип кодировки символов, размещенных в начале документа.
2) Значение атрибута charset в Content-Type, указанное в http-заголовке (или аналогичном), передаваемом веб-сервером.
3) Тип кодировки, указанный в правиле @charset.
Если в результате проверки информация о кодировке не была получена, то браузер подразумевает, что документ в кодировке UTF-8.

Синтаксис
@charset "UTF-8";       
@charset 'iso-8859-15';

html5book.ru

Атрибут charset тега | HTML справочник

HTML тег <meta>

Значение и применение

Тег <meta> позволяет сообщить браузеру посетителя, какой набор символов и какую кодировку необходимо установить на веб-странице. Атрибут charset (HTML тега <meta>) задает кодировку символов для HTML документа. Атрибут charset может быть переопределен в определенном месте с помощью глобального атрибута lang для любого элемента.

Стандарт HTML 5 не запрашивает конкретную кодировку, но дает рекомендацию использовать кодировку UTF-8. Не рекомендуется использовать кодировки ASCII, CESU-8, UTF-7, BOCU-1, SCSU и UTF-32 по различным причинам.

Считается хорошей практикой, и настоятельно рекомендуется определять набор символов (кодировку), используя атрибут charset. Атрибут charset является лишь частью алгоритма определения кодировки страницы браузером. Рекомендуется указывать кодировку символов первым <meta> элементом (если используется несколько). Обратите внимание, что для одного документа указывается только одна кодировка.

Поддержка браузерами

Синтаксис:

<meta charset = "character_set (кодировка)">

Значения атрибута

ЗначениеОписание
character_setЗадает кодировку для HTML-документа.

Распространенные значения:

  • UTF-8 — кодировка для Unicode
  • ISO-8859-1 — кодировка символов для латиницы.

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

Отличия HTML 4.01 от HTML 5

Атрибут считается новым в HTML 5. До стандарта HTML 5 значение кодировки страницы указывалось следующим образом:
<meta http-equiv = "Content-Type" content = "text/html; charset = character_set">

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8" >  <!-- задаем кодировку документа UTF-8 -->
		<title>Пример использования атрибута charset тега <meta></title>
	</head>
	<body>
		<h3> Это заголовок.</h3>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы задали кодировку документа UTF-8 с использованием элемента <meta> и атрибута charset. Кодировка UTF-8 одна из общепринятых и стандартизированных кодировок текста, которая позволяет хранить символы Юникода.

HTML тег <meta>

basicweb.ru

Кодировка — Проблемы с кодировкой — utf-8 — windows-1251

В этой статье я постараюсь поставить все точки над «и» (а так же над «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 вместо этих символов вот что: > <v^. А еще в utf-8 есть знак «евро»; а еще utf-8 позволяет в одном HTML-файле совмещать кучу разнообразных специфических символов, используемых в таких языках как грузинский, иврит, китайский, японский; а еще utf-8 в кодировках HTML — это правило хорошего тона.

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

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

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

Собственно, их всего три:

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

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

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

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

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

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

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

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

Теперь о том как изменить кодировку файла HTML. Да оказывается очень просто:

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

Так-так, осталось пристально взглянуть на Dreamweaver.

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

И посмотрите, что задано в качестве кодировки по умолчанию:

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

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

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

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

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

Есть еще вопросы по кодировкам? Пишите в комментарии. Нужно решить эти проблемы раз и на всегда 🙂

С уважением, Андрей Морковин.

www.sdelaysite.com

No related posts.