15.03.2016

Пока нет


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

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

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

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

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

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

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

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

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

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

вот этот мета-тег:

Моя первая HTML-страничка на StepkinBlog..

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


Там, где пункт «Кодировка:» укажите «UTF-8» .
Жмите «Сохранить» :

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

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

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

Моя первая HTML-страничка на StepkinBlog..

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

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

Моя первая HTML-страничка на StepkinBlog..

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

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

Вот и все!

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

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

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

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

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

Предыдущая запись
Следующая запись

7 ответов

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

Example Site

Консистенция помогает уменьшить ошибки и сделать код более читаемым.

Обратите внимание, что атрибут charset не учитывает регистр. Вы можете использовать UTF-8 или utf-8, однако UTF-8 более четкий, читаемый и более точный.

Кроме того, нет абсолютно никакой причины использовать любое значение, отличное от UTF-8, в атрибуте мета-charset или заголовке страницы. UTF-8 является кодировкой по умолчанию для веб-документов с HTML4 в 1999 году и единственным практическим способом создания современных веб-страниц.

Также вы не должны использовать HTML-объекты в UTF-8. Символы, подобные символу авторского права, должны быть напечатаны напрямую. Единственными сущностями, которые вы должны использовать, являются 5 зарезервированных символов разметки: меньше, больше, амперсанд, простой, двойной премьер. Сущностям нужен парсер HTML, который вы не всегда можете использовать в будущем, они вносят ошибки, делают ваш код менее читаемым, увеличивают размеры вашего файла и иногда неправильно декодируют в разных браузерах в зависимости от того, какие объекты вы использовали. Узнайте, как вводить/вставлять авторские права, торговую марку, открытую цитату, закрывать цитату, апостроф, em dash, en dash, bullet, Euro и любые другие символы, с которыми вы сталкиваетесь в своем контенте, и использовать эти фактические символы в своем коде. У Mac есть средство просмотра символов, которое вы можете включить в настройке системы клавиатуры, и вы можете найти, а затем перетащить нужные символы или использовать соответствующий инструмент просмотра клавиатуры, чтобы узнать, какие ключи нужно вводить. Например, товарный знак - Option + 2. UTF-8 содержит все символы и символы на каждом письменном человеческом языке. Поэтому нет никакого оправдания для использования - вместо em emash. Неплохая идея также изучить правила пунктуации и типографики... например, зная, что период проходит внутри закрытой цитаты, а не снаружи.

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

Нет, это не так. Браузер начинает синтаксический анализ файла в качестве кодировки по умолчанию браузера: UTF-8 или ISO-8859-1. Поскольку US-ASCII является подмножеством как ISO-8859-1, так и UTF-8, браузер может отлично читать в любом случае... это то же самое. Когда браузер встречает тег мета-кодировки, если кодировка отличается от того, что браузер уже использует, браузер перезагружает страницу в указанной кодировке. Вот почему мы помещаем мета-чарт-тег вверху, сразу после заголовка, перед чем-либо еще, даже заголовком. Таким образом, вы можете использовать символы UTF-8 в своем названии.

Это не совсем так. Если в документе есть только символы US-ASCII, вы можете сохранить его как US-ASCII и использовать его как UTF-8, потому что это подмножество. Но если есть символы Unicode, вы правы, вы должны сохранить как UTF-8 без спецификации.

Если вам нужен хороший текстовый редактор, который сохранит ваши файлы в UTF-8 я рекомендую Notepad ++.

На Mac используйте Bare Bones TextWrangler (бесплатно) из Mac App Store или Bare Bones BBEdit, который находится в Mac App Store за 39,99 $... очень дешево для такого отличного инструмента. В любом приложении есть меню в нижней части окна документа, где вы указываете кодировку документа, и вы можете легко выбрать "UTF-8 no BOM". И, конечно, вы можете установить это как значение по умолчанию для новых документов в настройках.

Но если ваш веб-сервер обслуживает кодировку в HTTP-заголовке, который рекомендуется, оба [метатеги] бесполезны.

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

AddDefaultCharset UTF-8

Или вы можете просто изменить кодировку определенных типов файлов следующим образом:

AddType text/html;charset=utf-8 html

Совет для обслуживания файлов UTF-8 и Latin-1 (ISO-8859-1) должен предоставить UTF-8 файлам текстовое расширение и латинские файлы "txt."

AddType text/plain;charset=iso-8859-1 txt AddType text/plain;charset=utf-8 text

Наконец, рассмотрите вопрос о сохранении ваших документов с окончанием строки Unix, а не в устаревших версиях DOS или (классической) линии Mac, которые не помогают и могут повредить, особенно по линии, поскольку мы все больше и больше получаем от этих устаревших систем. HTML-документ с допустимой кодировкой HTML5, UTF-8 и окончанием строки Unix - это хорошо выполненная работа. Вы можете делиться и редактировать, хранить, читать и восстанавливать и полагаться на этот документ во многих контекстах. Это lingua franca. Это цифровая бумага.

был введен с/для HTML5.

Как указано в документации, оба действительны. Однако предназначен только для HTML5 (и проще вводить/запоминать).

В свое время старый стиль неизбежно станет устаревшим в ближайшем будущем. Я буду придерживаться нового .

Там только один путь, но вверх. В техническом случае, что поэтапный отказ от старого (действительно, ДЕЙСТВИТЕЛЬНО быстрый)

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

  • "длинная" (http-equiv) нотация и "короткая" равны, в зависимости от того, что наступит первым:
  • Заголовки веб-серверов будут перекрывать все теги ;
  • BOM (отметка байтового байта) переопределит все, и во многих случаях это повлияет на html 4 (и, возможно, на другие вещи тоже);
  • Если вы не объявляете какую-либо кодировку, вы, вероятно, получите текст в "резервной текстовой кодировке", которая определяется вашим браузером. Ни в Firefox, ни в Chrome это utf-8;
  • В отсутствие других подсказок браузер попытается прочитать ваш документ, как если бы он был в ASCII, чтобы получить кодировку, поэтому вы не можете использовать какие-либо странные кодировки (хотя utf-16 с BOM должен делать);
  • В то время как в спецификациях утверждается, что объявление кодирования должно быть в пределах первых 512 байт документа, большинство браузеров попытаются прочитать больше, чем это.

Вы можете протестировать, запустив echo "HTTP/1.1 200 OK\r\nContent-type: text/html; charset=windows-1251\r\n\r\n\xef\xbb\xbfприветпривет" | nc -lp 4500 и указав браузер на localhost:4500 . (Конечно, вы захотите изменить или удалить части. Часть спецификации \xef\xbb\xbf . Будьте осторожны с кодировкой вашей оболочки.)

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