Одна из самых частых проблем сайта - это его кодировка. И несмотря на это многие Web-мастера
продолжают утверждать, что браузер сам выбирает кодировку. Действительно, он выбирает кодировку сам, но делает это не всегда правильно. Вот это и есть самая распространнёная ошибка с кодировкой: сайт в кодировке, допустим, UTF-8
, а браузер настойчиво выбирает windows-1251
. Вот как задать жёстко кодировку через файл htaccess
, я расскажу в этой небольшой статье.
Для того, чтобы задать кодировку файла в htaccess
достаточно написать в нём всего одну строчку:
AddDefaultCharset UTF-8
Если Вам нужна windows-1251
, то тогда так:
AddDefaultCharset WINDOWS-1251
Всего одна строчка и теперь браузер, независимо от своего предпочтения, будет выбирать указанную кодировку. Сразу говорю, данный способ - это действительно мощный. Вы должны понимать, что раз браузер неправильно распознаёт кодировку Вашего сайта (игнорируя даже мета-тег "ContentType
"), значит, на то есть свои причины, поэтому внимательно проверьте: везде ли всё хорошо отображается.
Надеюсь, что этой статьей я помог Вам решить проблему с кодировкой. А в следующей статье я расскажу о проблеме, связанной с кодировкой базы данных
. Это тоже весьма частая проблема, которую многие не могут решить.
1. У нас есть файл: Мойфайл.html.
2. Надо сохранить его в кодировке Юникод -> UTF-8.
Решение 1.
- Открываеем Мойфайл.html в текстовом редакторе Блокнот
.
- Выбикаем «Сохранить как…».
- Выбираем кодировку UTF-8.
- Жмем кнопку - Сохранить.
Решение 2.
- Открываем Мойфайл.html в текстовом редакторе Notepad++
(еще есть редактор PSPad)
- Меню -> Кодировки.
Здесь видим (Notepad++ определяет сам) кодировку открытого нами файла. - Выбираем Преобразовать в UTF-8 без BOM
(BOM - Byte Order Mark).
(Кодироака "UTF-8 без BOM" предпочтительна и отличается от просто "UTF-8"). - Меню -> Файл -> Сохранить.
Определение кодировки браузерами
Мы сами сообщаем браузеру о том, какая кодировка установлена для данного
HTML файла.
Делается это посредством META-тега
1)
В приведенном примере браузеру дается указание, что загруженный HTML-файл сохранен в кодировке utf-8.
Если HTML-файл сохранен в кодировке windows-1251, то:
2)
Важно!
При перекодировке файлов
не забывайть изменять
директивы в META-теге на актуальные.
Если в META-теге указана одна кодировка, а файл сохранен в другой кодировке, то на экране мы увидем "абракадабру".
3) Если
в META-теге указана нужная кодировка, а сайт все равно отображает "абракадабру", то нужно проверить настройку сайта на хостинге (веб-сервере).
Обычно на хостингне в настройках сайта указана кодировка utf-8.
Если в настройках хостинга указана кодировка windows-1251, то нужно сменить настройку на utf-8.
Одной из самых частых проблем, с которой сталкивается начинающий Web-мастер
(да и не только начинающие), это проблемы с кодировкой на сайте
. Даже у меня постоянно появляется при создании сайтов "абракадабра
". Но, благо, я прекрасно знаю, как эту проблему решить, поэтому всё привожу в порядок в течение нескольких секунд. И в этой статье я постараюсь научить Вас также быстро решать проблемы, связанные с кодировкой на сайте
.
Первое, что стоит отметить, это то, что все проблемы с появлением "абракадабры" связаны с несовпадением кодировки документа и кодировки, выставляемой браузером
. Допустим, документ в windows-1251
, а браузер почему-то выставляет UTF-8
. А уже источником такого несовпадения могут быть следующие причины.
Первая причина
Неправильно прописан мета-тег content-type
. Будьте внимательны, в нём всегда должна находиться та кодировка, в котором написан Ваш документ.
Вторая причина
Вроде бы, мета-тег прописан так, как Вы хотите, и браузер выставляет именно то, что Вы хотите, но почему-то всё равно с кодировкой проблемы. Здесь, почти наверняка, виновато то, что сам документ имеет отличную кодировку. Если Вы работаете в Notepad++
, то внизу справа есть название кодировки текущего документа (например, ANSI
). Если Вы ставите в мета-теге UTF-8
, а сам документ написан в ANSI
, то сделайте преобразование в UTF-8
(через меню "Кодировки
" и пункт "Преобразовать в UTF-8 без BOM
").
Третья причина
Четвёртая причина
И, наконец, последняя популярная причина - это проблема с кодировкой в базе данных
. Во-первых, убедитесь, что все Ваши таблицы и поля написаны в одной кодировке, которая совпадает с кодировкой остального сайта. Если это не помогло, то сразу после подключения в скрипте выполните следующий запрос:
SET NAMES "utf8"
Вместо "utf8
" может стоять другая кодировка. После этого все данные из базы должны выходить в правильной кодировке.
В данной статье я, надеюсь, разобрал, как минимум, 90% проблем, связанных с появлением "абракадабры" на сайте
. Теперь Вы должны расправляться с такой популярной и простой проблемой, как неправильная кодировка, в два счёта.
15.03.2016
Пока нет
Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку
для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:
Итак, HTML кодировка
– это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы .
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами
вот такой мета тег:
Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать HTML кодировку.
Обычно это utf-8
или windows-1251
.
Кодировка для
utf-8
:
Кодировка
для
windows-1251
:
Если забыть указать браузеру, в какой кодировке сайт или веб-страница, то браузер попытается определить кодировку автоматически, но не всегда у него это выходит правильно. В итог результат будет такой, который я показал на картинке выше.
Переходим к практике.
Как создать HTML документ с
кодировкой utf-8
«Все программы» => «Стандартные» => «Блокнот»
:
</body>
</html>
</p><p> <head></head>
вот этот мета-тег:</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>
<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog..
</body>
</html>
</p><p>Жмите в блокноте <span>«Файл» => «Сохранит как…»
</span>:</p>
<p><img src='https://i0.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></p>
<p><br>
Там, где пункт «Кодировка:»
укажите «UTF-8»
.<br>
Жмите «Сохранить»
:</p>
<p><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-4.png' width="100%" loading=lazy></p><p>Увеличить изображение?</p>
<h3><span>Как создать HTML документ с кодировкой windows-1251
</span></h3>
<p>Открывайте стандартный блокнот. <span><i>«Все программы» => «Стандартные» => «Блокнот»
</i>
</span>.<br>
Далее вставляете в блокнот <a href="/the-security-of-your-computer/kak-skinut-zashchitnyi-kod-na-nokia-kakoi-standartnyi-parol-nokia-dlya-vseh.html">стандартный код</a> HTML:</p><p>
<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog..
</body>
</html>
</p><p>Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head>
вот этот мета-тег:</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</p><p>Вот так должно получиться (строка №4
):</p><p>
<html>
<head>
<title> Моя первая HTML-страничка на StepkinBlog..
</body>
</html>
</p><p>Жмите в блокноте <span>«Файл» => «Сохранит как…»
</span>:</p>
<p><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></p>
<p>Там, где пункт «Имя файла»
напишите название веб-страницы на латинице и с расширением «.html»
. Я думю, вы это помните еще с первых уроков.<br>
Там, где пункт «Кодировка:»
укажите «ANSI»
.<br>
Жмите «Сохранить»
:</p>
<p><img src='https://i0.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></p>
<p>Вот и все!</p>
<p>Большинство вебмастеров выбирают кодировку UTF-8
. Причины говорить не буду, так как боюсь нагрузить вас информацией, которая на вашем этапе познания HTML еще не нужна.</p>
<p>Для примера в блокнте установите код:</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>И укажите при сохранении «ANSI»
:</p>
<p><img src='https://i0.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></p>
<p>Так как это неправильно, результат будет вот таким:</p>
<p>Сохраняйте правильно ваши веб-страници во избежание вот таких результатов </p>
<p>Предыдущая запись <br></span>
<span>Следующая запись <br></p>
<p>При создании сайта у начинающих веб-мастеров часто появляются вопросы: в какой кодировке делать сайт, чем отличается UTF-8 от windows-1251 и как ее прописывать в META Charset HTML-страницы сайта. Ответы на все эти вопросы в данной статье.</p>
<h2>Что такое кодировка сайта и как она работает</h2>
<p>Кодировку можно представить в виде таблицы, состоящей из разных букв, цифр и других символов понятных человеку, которые закодированы определенным образом. Когда вы открываете <a href="/solving-problems/poisk-po-tekstovym-failam-wingrep-dlya-poiska-teksta-v-failah.html">текстовый файл</a>, к которым относятся в том числе HTML-страницы, то компьютер считывает из заголовка файла в какой кодировке он был сохранен и выводит текст в соответствующей кодировке преобразовывая компьютерные данные в вид понятный человеку сопоставляя эти данные с таблицей кодировки. Если информация о кодировке из заголовка файла совпадает с кодировкой в которой сохранены данные в HTML-странице, то пользователь видит привычные ему буквы, цифры и другие символы. Если же есть несовпадение, то в результате пользователю выводится непонятный набор символов, особенно часто это происходит в старых <a href="/internet-tips/gde-ustanavlivaetsya-programma-pochtovogo-klienta-pochtovye-klienty-dlya-windows.html">почтовых программах</a>. Если пользователь получил письмо с непонятными крякозябрами, то просто перебирая <a href="/solving-problems/yandeks-vebmaster-proverka-indeksacii-stranicy-rabota-s.html">разные кодировки</a>, обычно получается угадать и выбрать ту, в которой написано письмо, и в результате непонятный набор символов превращается в понятный человеку текст.</p>
<p>То же самое происходит и с HTML-страницами сайта. Если документ был сохранен, например, в кодировке UTF-8, а в самом документе прописан META-тег указывающий что это кодировка windows-1251, то браузер опять же будет сопоставлять сохраненные в файле данные с таблицей указанной ему кодировки и так как символы закодированы по-разному, то браузер выведет вместо привычного текста непонятный набор символов или же часть букв может быть в <a href="/windows-10/xml-shablon-chem-otkryt-kak-otkryt-fail-xml-v-normalnom-vide.html">нормальном виде</a>, а другие буквы или символы могут выводиться, например, в виде знаков вопроса. Все выше сказанное относится в том числе и к отображению имен файлов.</p>
<p>Создавая новый документ в текстовом редакторе лучше сразу убедиться что выбрана нужная кодировка. Современные редакторы позволяют преобразовать текст <a href="/solving-problems/kak-v-vindovs-otkryt-vord-chem-otkryt-doc-kak-otkryt-dokument-word-bez.html">открытого документа</a> из одной кодировки в другую, а <a href="/the-security-of-your-computer/alternativy-standartnomu-bloknotu-windows.html">стандартный Блокнот</a> позволяет выбрать кодировку только при сохранении файла.</p>
<h2>Самые распространенные кодировки</h2>
<p>Из предыдущего пункта вы уже знаете что такое кодировка и почему настолько важно правильно прописать ее в коде страниц сайта. Давайте теперь выясним какую из множества кодировок лучше выбрать для будущего сайта. Поскольку самой распространенной и наиболее понятной в освоении всегда была операционная <a href="/configuring-windows/i-can-not-restore-the-windows-system-how-to-restore-windows-system-health.html">система Windows</a>, то большинство веб-разработчиков создавали HTML-страницы в кодировке windows-1251 (ANSI), которая использовалась по-умолчанию. Но windows-1251 поддерживает не очень большое количество букв и символов, а разработчики хотят использовать в своих текстах различные стрелочки, сердечки, квадратики и другие символы, в том числе есть необходимость совмещать слова из разных языков в одном документе, поэтому на смену ей уже давно пришла более расширенная UTF-8 и большинство разработчиков используют именно эту кодировку.</p>
<h2>Проблемы с кодировкой не только в HTML-странице</h2>
<p>Сайт, независимо от того является ли он просто набором статических HTML-документов или сложных динамических скриптов генерирующих страницы на лету, размещается на веб-сервере, который также работает с определенной кодировкой. И если сервер выдает информацию в одной кодировке, а ваши страницы или скрипты сохранены в другой кодировке, то опять же могут быть проблемы с отображением страниц в браузере пользователя. Многие хостинги позволяют менять настройки и выбрать кодировку в соответствии с той, которая используется в файлах сайта, через панель управления или же прописать ее в файле.htaccess, если на хостинге используется популярный веб-сервер Apache.</p>
<p>Практически ни один современный сайт не обходится без использования базы <a href="/solving-problems/kak-sozdat-bazu-dannyh-na-hostinge-kak-sozdat-bazu-dannyh-v-mysql-sozdanie-bd-na.html">данных MySQL</a> и она также может стать источником проблем с кодировкой. Если файлы сайта сохранены в одной кодировке, а информация в базе данных в другой, то на странице та часть информации, которая выводится из базы данных может отображаться в виде все тех же знаков вопросов или других непонятных символов. Чтобы избежать проблем с кодировкой она должна быть одинаковой для веб-сервера, базы данных MySQL, в скриптах, в HTML-страницах сайта и в META-теге, который прописывается в HTML-коде. Если есть проблемы с отображением текста, то проверяйте на наличие проблемы все выше перечисленное.</p>
<h2>META Charset HTML-документа</h2>
<p>Чтобы сообщить браузеру и <a href="/configuring-windows/chto-takoe-socialnaya-poiskovaya-sistema-poiskovye-sistemy-interneta.html">поисковым системам</a> в какой кодировке сохранены страницы сайта в их коде прописывается META Charset.</p>
<p>Для кодировки windows-1251:</p>
<span><!DOCTYPE html>
<html lang="ru">
<head>
<title>Заголовок страницы
Текст страницы
Для кодировки UTF-8:
Заголовок страницы
Текст страницы
Теперь вы знаете что такое кодировка сайта и где искать проблемы если в какой-либо части сайта неправильно отображается текст.
Копирование статьи запрещено.
