Html кодировка 1251. Меняем кодировку страниц

Кодировка windows 1251 была создана в начале 90 годов для русификации программных продуктов, выпускаемых корпорацией Microsoft :

Кодировка является 8-битной и включает в себя символы славянской группы языков, в которую входят русский, белорусский, украинский, болгарский, македонский, сербский – это дает преимущество перед остальными кириллическими кодировками (ISO 8859-5, KOI8-R, CP866 ). Однако у 1251-кодировки имеются и весомые недостатки:

0xFF (25510) – это код, который зарезервирован для символа «я». В программах, которые не поддерживают чистый 8-ой бит, часто возникают непредсказуемые проблемы;
Нет псевдографики, которая присутствует в KOI8 , CP866 .

Ниже приведены символы из Code Page 1251 или сокращенно СР1251 (числа под символами являются кодом в шестнадцатеричной системе такого же символа в Юникоде ):

Кодировка windows 1251 в html

Нередко у web-разработчиков и блогеров, обладающих различной квалификацией возникает проблема с кодировкой страниц: вместо подготовленного текста появляются неизвестные, нечитаемые символы. Чтобы разобраться с данной проблемой, необходимо понимать суть термина «кодировка страницы ».

Текст в памяти компьютера хранится в виде определенного количества байт, а не в том виде, в котором он отображается в текстовом редакторе. Каждый байт является кодом, который соответствует одному символу. Для того чтобы текст на странице отображался как следует, нужно сообщить браузеру, какую таблицу кодов для расшифровки и отображения он должен использовать.

Таблица кодировок не является универсальной, то есть, для расшифровки текста необходимо использовать ту, которая соответствует кодировке символов:

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

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

Кодировка windows 1251 в PHP

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

Нередко при смене хостинга возникает проблема: различные кодировки информации в базе данных и в шаблонах страниц. Из-за этого одна сгенерированная страница может одновременно содержать несколько кодировок. Если информация на сайте представлена в кодировке виндовс 1251 , то и чтение из базы данных должно осуществляться с помощью таблицы, в которой представлена win 1251 кодировка.

Для согласования расшифровки необходимо выполнить функцию mysql_query(«SET NAMES cp1251») – это означает, что преобразование из машинного кода будет осуществляться согласно таблице cp1251 .

Кодировка windows 1251 в htaccess

При создании сайта, предварительно настроив кодировки в шаблонах и базах данных, все равно может всплыть проблема некорректного отображения информации в браузере.

Для того чтобы для веб-ресурса была задана кодировка виндовс-1251 , необходимо найти (или создать ) файл .htaccess . Это файл, который хранит в себе дополнительные настройки и описания конфигураций web-сервера.

В нем для установки кодировки следует прописать следующие строки:

DefaultLanguage ru;
AddDefaultCharset windows-1251;
php_value default_charset «cp1251».

Таким образом, для корректного отображения текста должны совпадать его кодировка и таблица кодов, с помощью которой браузер будет расшифровывать символы. Для текстов, написанных на славянских языках, необходима win 1251 кодировка. Важно помнить, что элементы страниц и баз данных должны быть описаны с помощью одной таблицы кодов.

Хорошо Плохо

Давайте согласимся иметь разногласия.
Роберт Льюис Стивенсон.

Э то урок, в котором мы поговорим о том, что такое мета-теги , для чего и как они используются при и как их правильно заполнить.

К ак я уже говорил в , мета-теги располагаются в заголовке html-страницы, между тегами и, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень важную роль. Их добавление и оптимизация могут существенно помочь сайту в его жизни.

Р екомендую использовать только те метатеги, которые реально нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.

ервый мета-тег очень важен. Причём этот мета-тег одинаково важен и для поисковых систем, и для посетителей. Первые в ранжировании результатов поиска придают большое значение ключевым словам, которые содержатся в теге «title», вторые видят его содержимое в виде ссылки на сайт в тех же результатах поиска:
С одержимое этого же мета-тега отображается и в заголовке окна :

В HTML мета-тег «title» добавляется следующим образом:

Содержимое мета-тега «title»
Основное содержимое страницы

К роме того, как я уже сказал ранее, ключевые слова , которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.

§ 2. Мета-тег «keywords» (ключевые слова)

С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

Т е слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.

Н апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

Б олее подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в .

Ч тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

Перечень ключевых слов">
Содержимое мета-тега «title»
Основное содержимое страницы

К лючевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время правильно заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.

§ 3. Мета-тег «description» (описание страницы)

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

В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):

Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.

Т аким образом, правильный мета-тег «description» обязательно содержит ключевое слово (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из поисковой выдачи на сайт или нет! Поэтому его, как и «title», нужно прописывать для каждой страницы!

H TML-код для создания мета-тега «description» будет следующим:

Содержимое мета-тега «description»">
Содержимое мета-тега «title»
Основное содержимое страницы

Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).

§ 4. Технические мета-теги

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

content-type - тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:
Содержимое мета-тега «title»
Основное содержимое страницы

content-language - указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:
Содержимое мета-тега «title»
Основное содержимое страницы

refresh - время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:
Содержимое мета-тега «title»
Основное содержимое страницы

А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:

Содержимое мета-тега «title»
Основное содержимое страницы

robots - мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть следующие значения:
index - страница индексируется;

noindex - страница не индексируется;

follow - гиперссылки на странице учитываются;

nofollow - гиперссылки на странице не учитываются

all - заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);

none - заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.

Код для вставки мета-тега «robots»:

Содержимое мета-тега «title»
Основное содержимое страницы

author и copyright - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:
Содержимое мета-тега «title»
Основное содержимое страницы

§ 5. Заключение

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

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

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

Н а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».

15.03.2016

Пока нет

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

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

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

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

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

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

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

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

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

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

</body> </html> <head></head> вот этот мета-тег: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <html> <head> <title> Моя первая HTML-страничка на StepkinBlog.. </body> </html> Жмите в блокноте «Файл» => «Сохранит как…» : <img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-3.png' width="100%" loading=lazy> Там, где пункт «Кодировка:» укажите «UTF-8» . Жмите «Сохранить» : <img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-4.png' width="100%" loading=lazy>Увеличить изображение? <h3>Как создать HTML документ с кодировкой windows-1251 </h3> Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот» . Далее вставляете в блокнот <a href="/game/kak-ubrat-parol-ogranicheniya-na-aifone-4-kakoi-standartnyi-kod-parol.html">стандартный код</a> HTML: <html> <head> <title> Моя первая HTML-страничка на StepkinBlog.. </body> </html> Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> Вот так должно получиться (строка №4 ): <html> <head> <title> Моя первая HTML-страничка на StepkinBlog.. </body> </html> Жмите в блокноте «Файл» => «Сохранит как…» : <img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-5.png' width="100%" loading=lazy> Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html» . Я думю, вы это помните еще с первых уроков. Там, где пункт «Кодировка:» укажите «ANSI» . Жмите «Сохранить» : <img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-6.png' width="100%" loading=lazy> Вот и все! Большинство вебмастеров выбирают кодировку UTF-8 . Причины говорить не буду, так как боюсь нагрузить вас информацией, которая на вашем этапе познания HTML еще не нужна. Для примера в блокнте установите код: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> И укажите при сохранении «ANSI» : <img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/03/kak-ukazat-kodirovku-sajta-na-html-osnovy-html-dlya-nachinayushhix-urok-20-6.png' width="100%" loading=lazy> Так как это неправильно, результат будет вот таким: Сохраняйте правильно ваши веб-страници во избежание вот таких результатов Предыдущая запись Следующая запись Приветствую, читатели и подписчики моего блога. В сегодняшней публикации я решил затронуть очень важную и объемную тему, которую необходимо знать каждому разработчику и верстальщику. Прочитав весь материал, вы узнаете какой бывает кодировка html-документов, для чего она необходима и что меняется при установке того или иного типа кодировки. С какими проблемами можно столкнуться при неверном выборе, в каких <a href="/life-hacks-for-different-systems/programmy-dlya-root-prav-na-pk-vybor-programmnogo-produkta-dlya-polucheniya-prav.html">программных продуктах</a> можно изменять этот параметр, а также как ее можно задать в коде. Думаю, настало время приступить к делу! <h2>Почему кодировка так важна и какие существуют типы?</h2> Как только сфера IT начала развиваться, вместе с ней развивались и совершенствовались кодировки. Почему же они так важны для веб-разработки и сайтостроения? На самом деле <a href="/game/apc-smart-ups-2200-kalibrovka-korrektnoe-otobrazhenie-nagruzki-tochnaya-kalibrovka.html">корректное отображение</a> символов на дисплее девайсов – это достаточно сложная штука, ведь это не прямой процесс. Любой символ относящийся к кириллице, латинице, цифрам и другим алфавитам формируется благодаря двум параметрам: <ol><li>Векторное представление (формы) всевозможных единиц разных алфавитов, которые хранятся в документах со шрифтами на каждом персональном компьютере;</li> <li>Номер или код, по которому можно найти указанный символ в этих документах.</li> </ol>Так как за кодирование знаков отвечает не что иное, как <a href="/life-hacks-for-ios/vidy-operacionnyh-sistem-tipy-operacionnyh-sistem-ponyatie-operacionnoi.html">операционная система</a>, а после и программы, в которых вы работаете, любой текстовый контент для них выглядит как набор байтов. При этом каждый байт отвечает за конкретный символ. Из этого вы и получаете определенные размеры файлов. Как же ОС подставляет нужные буквы и знаки? Для нее все очень просто. Осуществляется поиск символа по считанному коду в документе шрифтов и после подставляется. На сегодняшний день существует несколько основных стандартов кодировок и их подтипов. К ним относятся ASCII и ее дочерние типы CP866, KOI8-R и Windows 1251, Unicode с <a href="/program/chto-takoe-utf-8-kodirovka-html-stranicy.html">кодировками UTF</a>. Однако на сегодняшний день все лавры почета достались UTF-8. И это оправдано. Чтобы вы четко понимали сложившуюся ситуацию, переходим к следующей главе. <h2>Досье на Аски</h2> Начну свой рассказ с прародителя описываемого семейства, стоящего во главе символьного отображения. <h3>ASCII (Аски) и первые наследники</h3> В первых версиях Аски было доступно только 128 знаков, среди которых уместились <a href="/life-hacks-for-smartphones/ascii-kody-latinskih-bukv-kodirovanie-tekstovoi-informacii.html">латинские буквы</a>, арабские цифры и дополнительные символы. Однако из-за недостатка значений, кодировка была расширена в 2 раза (т.е. до 256). Вследствие этого появилась возможность добавлять к существующим значениям свои. Наверное поэтому и существует несколько видов таблиц с русскими символами. Первой в себя включила алфавит русского языка CP866. Помимо этого, в расширенную версию входила и псевдографика. <img src='https://i0.wp.com/romanchueshov.ru/wp-content/uploads/2016/09/anci.jpg' align="center" width="100%" loading=lazy> Вслед за ней свет увидел аналог – KOI8-R. Особенностью KOI8-R является расположение русских букв не по алфавиту, а в примерно тех же столбцах, что и созвучные латинские буквы. В тот «железный век» IT-технологий не было такого изобилия графических ОС, поэтому псевдографика спасала разработчиков, помогая им создавать более-менее разнообразные . <h3>Переход в современность – Windows 1251</h3> Это еще один расширенный тип стандарта ASCII, однако он связан уже с современными графическими ОС. Что же это означает? А то, что псевдографика больше никому не была нужна. Windows 1251 еще называют «в народе» кириллицей. Все потому что в данной таблице место ненужных знаков заняли недостающие символы русского и других славянских языков, а также аналогичная типографика. Я перечислил наиболее популярные типы расширений Аски, однако их существовало намного больше. Вследствие этого началось деление власти и путаница среди используемых кодировок. Это привело к тому, что иногда на экране можно наблюдать появление непонятных значков, которые позже в широких кругах прозвали кракозябрами.Эти чудовища появляются только тогда, когда неверно установлен тип кодировки. <a href="/computers/smartfon-flai-enerdzhi-fly-iq440-energie-byudzhetnyi-smartfon-s-dolgim.html">Долгое время</a> эту проблему пытались решить <a href="/ios/denezhnye-perevody-cherez-megafon-kak-mozhno-perevesti-dengi.html">разными способами</a>. Но вслед за одной дилеммой появилась и другая – нехватка 256 байтов для хранения всех существующих символов (например, японского языка).<h2>Приход новой власти</h2> Спасательным кругом оказался <a href="/life-hacks-for-smartphones/skachat-antivirus-samyi-luchshii-dlya-windows-10-besplatnye-antivirusnye.html">новый стандарт</a> кодирования алфавитов – Unicode. Все его кодировки имеют в названии UTF, а после через дефис количество битов для 1-го символа. Так вот, продвинутые умы того времени скооперировались и создали UTF-32. Конечно это решило проблему нехватки места для тех же объемных иероглифов, однако вызвало другую – размер файлов увеличивался в 4 раза. <img src='https://i1.wp.com/romanchueshov.ru/wp-content/uploads/2016/09/UTF-8.jpg' align="center" width="100%" loading=lazy> После выделяемая память уменьшилась до 16 бит. И наконец дошла до 8. UTF-8 является стандартом, который не использует фиксированный размер битов для одного символа и в этом ее огромное преимущество: использование переменной длины. Благодаря этому латиница и другие <a href="/life-hacks-wi-fi/emodzi-zloi-prostye-smailiki-iz-simvolov-na-klaviature-oboznachenie.html">простые символы</a> кодируются 1-м байтом, как и в ASCII. А вот «тяжелые» знаки могут быть представлены от одного и до шести байт последовательно. Стоит отметить, что помимо алфавитов, в таблицах Юникода можно найти всевозможные закорючки, смайлы, греческие буквы, цветы и другие нестандартные элементы. Вот мы и разобрали, почему UTF-8 стала лидером. <h2>Программы для перевода текста из одной кодировки в другую</h2> На самом деле изменить формат кодирования файлов очень просто и доступно в большинстве программ: «Блокнот», «Notepad++», «PSPad» и другие аналоги предоставляют такую возможность, а также <a href="/life-hacks-for-different-systems/kod-produkta-vindovs-7-professionalnaya-povyshenie-versii-windows-s-pomoshchyu.html">профессиональные продукты</a> наподобие <a href="/internet/predstavlenie-view-sql-primer-sozdaniya-predstavleniya-view-v-baze-dannyh-tipa-ms-sql.html">Visual Studio</a>, <a href="/ios/eclipse-netbeans-ili-intellij-idea-vybiraem-ide-dlya-java-razrabotki-programmy-dlya.html">IntelliJ IDEA</a> и т.д. Для новичков подойдет и работа в «Блокноте». Просто откройте <a href="/instructions/uvelichenie-faila-podkachki-ili-zachem-nuzhna-virtualnaya-pamyat-optimizaciya.html">нужный файл</a>, выберете «Сохранить как…» и снизу диалогового окна измените вид кодировки. Для более продвинутых <a href="/iron/kak-sozdat-golosovanie-v-telegram-golosovanie-v-kanale.html">отличным инструментом</a> станет Notepad++. Он предлагает <a href="/life-hacks-for-windows/termotransfernye-etiketki-dlya-printera-gk420t-g-seriya---shirokii.html">широкий выбор</a> различных кодировок, в том числе UTF-8 с BOM и без него. Хотя предпочтительнее выбирать второй вариант. <img src='https://i1.wp.com/romanchueshov.ru/wp-content/uploads/2016/09/krakoziabri.jpg' align="center" width="100%" loading=lazy> Хочу сказать несколько слов о BOM. Полное название Byte Order Mark, что в русскоязычных кругах более известно, как «маркер последовательности (порядка) байтов». Такая метка устанавливается в самом начале документа с текстом и обычно используется для обмена файлами. Она занимает 3 байта, которые выглядят следующим образом: ef bb bf. Однако, чтобы не было проблем с распознаванием кодировки файлов, стоит использовать UTF-8 без метки. <h2>Набор инструментов для девелоперов</h2> Для того, чтобы в коде задать <a href="/instructions/kak-naiti-upominaniya-o-sebe-vkontakte-kak-v-vkontakte-upomyanut.html">определенный тип</a> кодирования текстового контента, можно воспользоваться несколькими способами. Первый вариант – это указать в документе.htaccess «AddDefaultCharset UTF-8». Второй – в <a href="/life-hacks-for-windows/dlya-chego-ispolzuyutsya-meta-tegi-meta-tegi-html-ih-naznachenie-i.html">теге meta</a> объявить значение для charset. <a href="/life-hacks-for-ios/funkcionalnaya-zavisimost-bazy-dannyh-zavisimosti-mezhdu.html">Данный атрибут</a> появился с выходом в свет . В качестве примера я прикрепил программную реализацию. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример с charset

Привычный вид text-а! Все 4 слова и 2 числа отобразились корректно.

Поэкспериментируйте и подставьте другие названия кодировок.

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

С уважением, Роман Чуешов

Прочитано: 120 раз

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

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

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

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

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

Html кодировка 1251. Меняем кодировку страниц

Кодировка windows 1251 в html

Кодировка windows 1251 в PHP

Кодировка windows 1251 в htaccess

§ 2. Мета-тег «keywords» (ключевые слова)

§ 3. Мета-тег «description» (описание страницы)

§ 4. Технические мета-теги

§ 5. Заключение