- HTML Meta Charset – прописываем кодировку сайта
- Что такое кодировка сайта и как она работает
- Самые распространенные кодировки
- Проблемы с кодировкой не только в HTML-странице
- META Charset HTML-документа
- HTML кодировка. В какую кодировку сохранять web-страницу
- Кодировка windows 1251 в сайтостроении
- Кодировка windows 1251 в html
- Кодировка windows 1251 в PHP
- Кодировка windows 1251 в htaccess
- Структура HTML-документа: Doctype Definition, Head и вёрстка
- §1. Doctype Definition — объявление типа документа
- §1.1 HTML 4
- §1.2 Стандарт XHTML 1.0
- §1.3 Стандарт HTML 5
- §2. Секция
- §2.1 Head: общая информация
- §2.2 Позиционирование title относительно кодировки
- §2.2.1 Актуальные языковые кодировки
- §2.3 Порядок подключения каскадных таблиц стилей CSS и Java Script’ов
- §3. Виды вёрстки — табличная и блочная
- §3.1 Табличная вёрстка
- §3.2 Блочная вёрстка
- §3.3 Комбинированная вёрстка
- §3.4 Суть вёрстки
HTML Meta Charset – прописываем кодировку сайта
Автор статьи: Сергей Каминский
При создании сайта у начинающих веб-мастеров часто появляются вопросы: в какой кодировке делать сайт, чем отличается 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 и CSS
HTML кодировка. В какую кодировку сохранять web-страницу
В этой статье я постараюсь поставить все точки над «и» (а так же над «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 вместо этих символов вот что: >
Кодировка windows 1251 в сайтостроении
Кодировка windows 1251 была создана в начале 90 годов для русификации программных продуктов, выпускаемых корпорацией Microsoft :
- 0xFF (25510) – это код, который зарезервирован для символа «я». В программах, которые не поддерживают чистый 8-ой бит, часто возникают непредсказуемые проблемы;
- Нет псевдографики, которая присутствует в KOI8 , CP866 .
Ниже приведены символы из Code Page 1251 или сокращенно СР1251 ( числа под символами являются кодом в шестнадцатеричной системе такого же символа в Юникоде ):
Кодировка windows 1251 в html
Нередко у web-разработчиков и блогеров, обладающих различной квалификацией возникает проблема с кодировкой страниц: вместо подготовленного текста появляются неизвестные, нечитаемые символы. Чтобы разобраться с данной проблемой, необходимо понимать суть термина « кодировка страницы ».
Текст в памяти компьютера хранится в виде определенного количества байт, а не в том виде, в котором он отображается в текстовом редакторе. Каждый байт является кодом, который соответствует одному символу. Для того чтобы текст на странице отображался как следует, нужно сообщить браузеру, какую таблицу кодов для расшифровки и отображения он должен использовать.
Таблица кодировок не является универсальной, то есть, для расшифровки текста необходимо использовать ту, которая соответствует кодировке символов:
— между тегом и закрывающим его нужно прописать — исходя из этой строки, браузер будет использовать символы русского алфавита для отображения текста на странице.
Кодировка windows 1251 в PHP
Ни для кого не является тайной, что генерация страниц проходит путем выборки и использования какой-то части информации, которая хранится в базе данных. При написании сайта на PHP , чаще всего это mysql :
Для согласования расшифровки необходимо выполнить функцию 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-документа: Doctype Definition, Head и вёрстка
С амые основы HTML и создание с их помощью простого сайта мы изучаем в этом разделе. А здесь — смотрим подробнее на разные важные штуки.
У прощённо схема HTML-документа выглядит следующим образом:
Н ачнём по порядку с самой верхней секции.
§1. Doctype Definition — объявление типа документа
К ак не прискорбно звучит, но многие вебмастера либо пренебрегают этим тегом, либо абсолютно не догоняют его назначения.
Т ег DOCTYPE обязателен и должен идти первой строкой. Он является ключевым элементом, задающим формат синтаксиса документа. Без него просто-напросто нельзя создать валидный документ.
П очему так важен этот тег? Разбираем порядок обработки страницы браузером. Перед тем как браузер обработает любой html\xhtml-документ, он должен знать с какого рода документом ему предстоит работать, по каким правилам рендерить страницу, какие теги допустимы. Если браузер не может прочесть или найти объявление типа документа, он переходит в так называемый обобщённый режим или Quirks Mode.
Ч ем же так плох этот режим? Во-первых, каждый тег будет обработан по спецификации, выбранной браузером на его личное усмотрение. Что скорее всего скажется на результирующем внешнем виде. И, например, при выполнении клиентских java-скриптов возникут сбои.
К аждый браузер будет обрабатывать документ по-своему — можно забыть про одинаковый внешний вид страницы в разных программах. Либо придётся навешать кучу хардкорных CSS-фиксаторов.
П редставим ситуацию: пользователь, сёрфящий в Интернете браузером IE 8, заходит на страничку с отсутствующим объявлением типа документа. Что произойдёт?
Браузер начнёт рендерить страницу по правилам HTML 4 в режиме обратной совместимости с IE 6.
Итог на экране: кривая страница, половина скриптов не выполняется.
В целом, это не просто хороший тон и показатель вашей грамотности. Doctype Definition задает ритм написания самого документа.
Р ассмотрим наиболее актуальные варианты на сегодняшний день.
§1.1 HTML 4
- 1. strict .dtd»>
- 2. Transitional //EN» «http://www.w3.org/TR/html4/loose.dtd»>
- 1. HTML 4 Strict — строгий
- 2. HTML 4 Transitonal — переходный
§1.2 Стандарт XHTML 1.0
- 1. Strict //EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
- 2. Transitional //EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
- 1. xHTML 1.0 Strict — строгий
- 2. xHTML 1.0 Transitonal — переходный
§1.3 Стандарт HTML 5
- html — для всех документов
М ожно рассматривать Doctype Definition в качестве ГОСТ’а. Любите качественную тушёнку произведённую с соблюдением ГОСТ’а? Также и браузеры с поисковиками любят странички, написанные в соответствии со спецификацией. Вы же не собираетесь угощать гостей беспонтовщиной?
Т еперь немного о валидности. Идём на страничку валидатора W3C, заряжаем в соответствующее поле адрес анализируемой страницы, смотрим ошибки.
П ри должном старании научиться верстать валидно можно за пару недель. Придётся попотеть, но если вы не страдаете маразмом, то запомнится навсегда как надо, а как нет.
Д альше разберёмся с — головой документа.
§2. Секция
Т еперь подробнее рассмотрим секцию . Её еще принято называть головой (заголовком) документа.
В споминаем нашу схемку:
§2.1 Head: общая информация
Г олова документа должна начинаться сразу после тега и заканчиваться перед тегом (началом тела документа). Позиция выбрана не случайно и несёт некоторую смысловую нагрузку. Обычно секция содержит в себе такую информацию:
Заголовок документа или ;
Информацию об авторе документа;
Информацию о языке документа и кодировке: об этом чуть позже;
Информацию о подключаемых таблицах стилей и скриптах;
Описания характеристик документа для поисковых ботов;
Адреса rss\rdf\atom потоков характерных страничке;
С писок далеко неполный, но для того, чтобы начать понимать — этого вполне достаточно.
З десь стоит обратить внимание на несколько моментов:
Порядок и группировка тегов;
Варианты подключения внешних Java Scripts и CSS.
§2.2 Позиционирование title относительно кодировки
Р азбираемся с порядком. Очень часто встречается ошибка с позиционированием заголовка документа .
Не стоит задавать его до объявления кодировки!
Э то связано не только с безопасностью. Если заголовок будет идти первым, всегда есть шанс, что браузер попытается самостоятельно определить кодировку документа.
П оэтому задаем тег title после объявления кодировки:
В еликолепно, теперь браузер сможет прочитать заголовок документа и правильно вывести его в своём интерфейсе, а злоумышленники получат дополнительную порцию геморроя при попытке XSS-инклюдинга (вид атаки посредством включения Java Scripts в код страницы; делится на активный и пассивный).
§2.2.1 Актуальные языковые кодировки
Т еперь о кодировках. Мы не будем рассматривать экзотические варианты, в нашем случае вполне достаточно двух:
UTF-8 — самая распространённая кодировка в Интернете. Реализует представление Юникода (Unicode). Совместима с 8-битным кодированием текста.
Windows-1251 — поддерживает практически все русские типографические символы. Была создана на базе кодировок, использовавшихся в ранних «самопальных» русификаторах Windows в 1990—1991 гг.
З десь стоит заметить, что лучшим вариантом является utf-8, именно её рекомендует консорциум W3C. Однако, не стоит ориентироваться лишь на рекомендации консорциума — первоначальное внимание стоит уделить рекомендации вашей CMS. Например Data Life Engine (DLE) вот уже сколько времени упорно использует только windows-кодировку. Вы даже можете попробовать сменить её на другую, но результат вас огорчит: на экране вы увидите нечитабельную кашу из знаков вопроса или характерные для ошибок чтения ромбики со знаками вопроса внутри.
П очему так получается? Всё довольно интереснее, чем кажется на первый взгляд. На самом деле, перед тем как браузер получит страницу и прочитает в её «голове» заявленную кодировку, информация передаётся из базы данных в определённой кодировке, обрабатывается сервером в определённой кодировке и даже отдаётся браузеру в определённой кодировке! В идеале все эти ступени должны быть синхронны.
Т акже стоит отметить, что размеры файлов в кодировке windows и unicode будут отличаться. Как правило, разница практически не ощутима для документов на английском языке. Для русского языка в UTF-8 размер файла будет больше, чем для windows-1251.
§2.3 Порядок подключения каскадных таблиц стилей CSS и Java Script’ов
П орядок подключения CSS (каскадных таблиц стилей, в современном вебдизайне в css-файле хранится всё визуальное оформление сайта) критично сказывается на порядке наложения правил оформления HTML-элементов. Это значит, что последний подключённый файл CSS будет иметь приоритет над предыдущими.
Т . о. становится реальным для разных страниц применить свои правила оформления — просто подключите к нужной странице корректирующий файл последним.
В отношении JavaScript правила такие: библиотеки функций и фреймворки, например Jquery или MooTools, подключаются первыми. За ними идут плагины и вызовы необходимых функций с параметрами. Если перепутать порядок подключения, скрипты работать не будут!
П ример подключения библиотеки Jquery и плагина к ней:
Д альше мы познакомимся с видами вёрстки.
§3. Виды вёрстки — табличная и блочная
Теперь поговорим об актуальных на сегодняшний день способах вёрстки. Здесь можно выделить 2-3 направления:
Табличная — структуру сайта определяют таблицы, строки и столбцы: , , , .
Блочная — опора контента или каркас базируется на элементах.
Комбинированная — некий симбиоз таблиц и блоков.
§3.1 Табличная вёрстка
К ак правило, начинающие верстальщики первой осваивают табличную вёрстку. Отчасти это происходит потому, что делают сайты на бесплатных хостингах с конструкторами, отчасти по причине того, что она более логична и требует меньших знаний CSS. Я не окажусь исключением — начинал с таблиц.
Ч то характерно для табличной вёрстки, так это замусоренный код и практическое отсутствие вынесенной во внешний файл стилизации. Тегов будет больше, а если учесть, что для визуального оформления таблицы к каждому тегу прилагается порядка семи параметров (width, height, border, cellpadding, cellspacing, align, valign и др.), нетрудно представить, сколько времени займёт вёрстка и какого огромного размера будет только каркас.
Т аблицы достаточно капризны. Пропустив один тег или не закрыв всего один столбец, вы рискуете потратить кучу времени на поиски причины поплывшего дизайна. Дополнительные неудобства будут при попытке что-то поправить или переверстать.
О днако, кое-где без таблиц просто не обойтись. Найдите в Сети хоть один форум, отвёрстанный на блоках. Хоть это и реально, но применение таблиц для вёрстки форумов — самый рациональный вариант.
§3.2 Блочная вёрстка
Н а сегодняшний день верстать блоками актуально не просто в угоду моде, это показатель профессионализма. Из плюсов можно отметить компактный код, сравнительную простоту вложенности, скорость разработки и правок. Минус — требуется знание CSS.
Б ез утайки скажу, что блочная вёрстка позволяет в буквальном смысле слова творить увертюры сколь угодно сложной логики, что благотворно сказывается на SEO. Например, визуально «хлебные крошки» (так называют навигацию, отражающую положение пользователя относительно корня сайта, на данной странице это строка «Главная > Вебмастеру. ») можно расположить над контентом, а в коде они будут под ним. Или «приклеить» панель авторизации к верхней рамке браузера, а в коде отправить её в самый конец.
В ерстая блоками, можно играть с позиционированием сколь угодно хитро. Это позволяет вынести важную для поисковиков текстовую информацию ближе к началу страницы.
§3.3 Комбинированная вёрстка
Т акая вёрстка подразумевает наличие как таблиц, так и блоков. Правило здесь простое: «Таблицы в дивах, таблиц как можно меньше».
§3.4 Суть вёрстки
Н е стоит забывать, что основной сутью вёрстки есть, было и будет максимальное отражение макета сайта так, как его задумал дизайнер или вебмастер. Иногда можно позволить себе некоторую халатность в пользу красоте или функционалу. Валидность — не панацея — это аксиома качества, которой стоит придерживаться. Писана она не вилами по воде и не «васькой» на заборе.
К онсорциум W3C задаёт стандарты и ритм, наше с вами дело — блюсти спецификацию. Хуже никому не будет.
Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки ! Так победим.
Поделиться ссылкой на эту страницу в:
