Кодировка документа HTML задается в
текстовом редакторе. Например,
Блокнот в ОС Windows по умолчанию сохраняет
текстовые файлы в кодировке Windows-1251.
Для того чтобы браузер правильно
отобразил HTML-страницу, необходимо
задать правильную кодировку в специальном
теге
.
Если кодировка не будет указана, браузер
попытается «угадать» ее, но не
всегда это заканчивается успехом.
Пользователь может выбрать кодировку
самостоятельно в меню браузера (в
Internet Explorer и Mozilla Firefox: Вид → Кодировка).
При разработке сайта проблем с кодировкой
следует избегать, т.к. большинство
пользователей сразу же покинет страницу,
увидев нечитаемый набор букв на экране.
Специальные символы в html
В HTML предусмотрен механизм вставки в
документ любых символов Юникод –
подстановки или сущности (англ. entities).
Подстановки позволяют
употреблять символы, отсутствующие на
клавиатуре или даже в используемой
кодировке (т.е. даже используя кодировку
Windows-1251 можно вставить букву греческого
алфавита). Подстановки начинаются с
символа амперсанда и записываются в
виде DDDD; где DDDD – код символа в Юникоде
в десятеричной системе счисления. Также
можно записывать код в шестнадцатеричной
системе счисления в форме HHHH; Для
некоторых символов заданы специальные
названия – мнемоники. Например, знак
копирайта © может быть задан кодом
© или © или мнемоникой ©.
Основы css
CSS (Cascading Style Sheets – каскадные
таблицы стилей, произносится «си-эс-эс»)
– технология управления внешним видом
элементов (тегов) веб-страницы. CSS
предоставляет гораздо больше возможностей
по оформлению страницы, чем HTML. Например,
с помощью стилей CSS можно убрать у ссылок
подчеркивание, сделать у таблицы
пунктирные границы или даже поменять
курсор «мыши». Сейчас CSS используется
практически на всех сайтах Всемирной
паутины.
Синтаксис CSS
Рассмотрим синтаксис CSS. В
стилях задается набор правил отображения
в парах «свойство – значение», и то, к
каким элементам их применять (селектор):
Селектор
свойство1: значение1;
свойство2: значение2;
свойство3: значение3 значение4;
Правила записываются внутри
фигурных скобок и отделяются друг от
друга точкой с запятой. Между свойствами
и их значениями ставится двоеточие.
CSS, как и HTML, игнорирует
пробелы. Можно добавлять комментарии,
заключая их между /* и */.
Селекторы
Селектор определяет, к каким элементам
(тегам) страницы будут применяться
правила, заданные парами «свойство –
значение».
В качестве селектора можно
использовать
:
Название
тега
– тогда стиль
применится ко всем таким тегам.
Пример
:
A {font-size: 12pt; text-decoration: none}
TABLE {border: black solid 1px}
Первая строчка этого CSS-кода
задает всем ссылкам 12-й размер шрифта
и убирает подчеркивание. На второй
строчке указывается, что у всех таблиц
граница будет черного цвета, сплошной
(solid) и шириной 1 пиксель.
Несколько
тегов через запятую
– тогда стиль применится для всех
перечисленных тегов.
Пример:
H1, H2, H3, H4, H5, H6 {color: red} /* делаем все
заголовки красными */
Несколько
тегов через пробел:
TABLE A {font-size: 120%}
Правило относится ко всем тегам A,
вложенным в тег TABLE. Размер шрифта
увеличится на 20% от базового.
ID элемента
.
В стилях уникальный идентификатор
указывается после знака # – правила
применятся к тегу с атрибутом
id="идентификатор".
Пример:
#supersize {font-size: 200%}
Справочник
HTML и CSS
Нельзя вносить в документ несколько
элементов с одинаковым id!
Символ
*
– правила применятся
ко всем элементам документа.
Классы
Классы
Часто нужно, чтобы стиль
применялся не ко всем тегам на странице,
а только к некоторым элементам (например,
не ко всем ссылкам на странице, а только
к тем, которые расположены в меню сайта).
Для этого используются классы:
ТЕГ.имя_класса { … }
Правила, указанные после
такого селектора, будут действовать
только на теги с атрибутом class="имя_класса":
<ТЕГ class="имя_класса">
…
Можно не указывать имя тега,
тогда правила будут применятся ко всем
тегам с подходящим значением атрибута
class.
Рассмотрим пример:
Для всех тегов с атрибутом class="class1"
добавим подчеркивание текста
и уменьшим размер шрифта, а для тега
уберем подчеркивание.
.class1 {text-decoration: underline; font-size: 80%}
A.class1
{text-decoration: none;}
В HTML-коде укажем для тегов имя класса:
<
h
1
class
="
class
1">Мои
любимые сайтыh
1>
Яндекс
Google
Redut.ru
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://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></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>Открывайте <a href="/akelpad-ili-zamenyaem-bloknot-windows-alternativy-standartnomu/">стандартный блокнот</a>. <span><i>«Все программы» => «Стандартные» => «Блокнот»
</i>
</span>.<br>
Далее вставляете в блокнот <a href="/amerikanskii-standartnyi-kod-obmena-informaciei-ascii-kodirovka-ascii-american/">стандартный код</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>Задаём набор символов</p>
<h3>Мета-тег</h3>
<p>Нужно добавить на каждую страницу (или в шаблон шапки) специальный мета-тег, сообщающий браузеру о том, какой набор символов ему использовать для отображения текстов. Тег этот стандартный и выглядит обычно так:</p>
<blockquote><p><meta http-equiv=»Content-Type» content=»text/html; <b>charset=UTF-8
</b>» /></p>
</blockquote>
<blockquote><p><meta <b>charset=»utf-8″
</b> /> (вариант для HTML 5)</p>
</blockquote>
<p>Надо вставить его в раздел <head></head> —
лучше в самое начало, сразу после открывающего <head>:</p>
<p><img src='https://i2.wp.com/web-ru.net/wp-content/uploads/2012/11/meta-teg-charset.png' width="100%" loading=lazy></p><p>Мета-тег кодировки</p>
<h3>Через.htaccess (если ничего не помогает)</h3>
<p>Обычно первых двух вариантов достаточно и браузеры отображают текст <i>как надо
</i>. Но с некоторыми из них могут быть проблемы и поэтому можно прибегнуть к помощи <i>файла.htaccess
</i>.</p>
<p>Для этого в нём нужно прописать такую строчку:</p>
<blockquote><p>AddDefaultCharset utf-8</p>
</blockquote>
<p>Вот и всё. Если вы примените последовательно 3 этих способа задания кодировки на своём проекте, то вероятность того, <i>что всё будет отображено как надо
</i>, близка к 100 %.</p>
<h2>Как «увидеть», что скрывается за непонятными символами на сайте?</h2>
<p>Если вы зашли на веб-страницу, видите «кракозябры» и хотите увидеть нормальный текст, то тут только два пути:</p>
<ul><li>сообщить сайтовладельцу, чтобы всё настроил как следует</li>
<li>попытаться угадать кодировку самостоятельно. Делается это <a href="/nastroika-standartnymi-sredstvami/">стандартными средствами</a> браузеров. В Chrome, например, нужно в меню щёлкнуть <span><i>«Инструменты => Кодировка»
</i>
</span> и из огромного списка выбрать подходящий набор символов (т.е. угадать).</li>
</ul><p>К счастью, практически все современные веб-проекты делаются в кодировке UTF-8, которая является «универсальной» для разных алфавитов и поэтому всё менее и менее вероятно увидеть эти <a href="/kak-ispravit-shrift-esli-vmesto-russkih-bukv-neponyatnye-simvoly-pochemu/">непонятные символы</a> в Интернет.</p>
<p>Давайте согласимся иметь разногласия. <br><span>Роберт Льюис Стивенсон.
</p>
<p>Э
то урок, в котором мы поговорим о том, что такое <b>мета-теги
</b>, для чего и как они используются при и как их правильно заполнить.</p>
<p>К
ак я уже говорил в , <i>мета-теги
</i> располагаются в заголовке html-страницы, между тегами и, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень <a href="/tip-imya-i-znachenie-peremennoi-v-obektno-orientirovannyh-yazykah/">важную роль</a>. Их добавление и оптимизация могут существенно помочь сайту в его жизни.</p>
<p>Р
екомендую использовать только те метатеги, которые <b>реально
</b> нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.</p> <br clear="all"><blockquote>
<i>
</i>ервый <b>мета-тег
</b> очень важен. Причём этот мета-тег одинаково важен и для поисковых систем, и для посетителей. Первые в ранжировании результатов поиска придают <a href="/kak-vydelit-naimenshee-i-naibolshee-znachenie-v-excel-cvetom-funkcii-v-excel/">большое значение</a> ключевым словам, которые содержатся в теге «title», вторые видят его содержимое в виде ссылки на сайт в тех же результатах поиска:
<p>С
одержимое этого же мета-тега отображается и в заголовке окна :</p>
<p>В
HTML мета-тег «title» добавляется следующим образом:</p>
<p><b><span>Содержимое мета-тега «title»
</span>
</b></p><p>Основное содержимое страницы<br></p>
<p>К
роме того, как я уже сказал ранее, <b>ключевые слова
</b>, которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.</p>
<h2>§ 2. Мета-тег «keywords» (ключевые слова)</h2>
<p>С
начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».</p>
<p>Т
е слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как <a href="/programma-dlya-poiska-bitkoin-mainerov-otdelnoe-slovo-pro/">отдельные слова</a>, так и словосочетания, но они <b>обязательно
</b> должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.</p>
<p>Н
апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «<a href="/keywords---ispolzovat-meta-teg-ili-on-uzhe-ne-rabotaet-nuzhno-li-zapolnyat/">мета-тег keywords</a>» и т.д.</p>
<p>Б
олее подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в .</p>
<p>Ч
тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:</p>
<p><b>Перечень ключевых слов">
</b><br>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p>
<p>К
лючевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более <a href="/markirovannyi-kontent-rulit-bolee-vysokie-pozicii-na-poiske/">высоких позиций</a> в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время <b>правильно
</b> заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.</p>
<h2>§ 3. Мета-тег «description» (описание страницы)</h2>
<p>С
ледующим важным мета-тегом является тег «description», в котором должно содержаться <a href="/kopiya-vtoroi-versii-ipad-zasvetilas-na-ces-kratkoe-opisanie-ipad/">краткое описание</a> страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.</p>
<p>В
ажной особенностью мета-тега «description» является то обстоятельство, что в случае его <b>правильного
</b> заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):</p>
<p>Е
сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.</p>
<p>Т
аким образом, <a href="/zapolnenie-title-description-keywords-primery-pravilnogo-zapolneniya-meta-tegov-description/">правильный мета-тег</a> «description» обязательно содержит <a href="/podbor-klyuchevyh-slov-ot-a-do-ya-kakiie-klyuchevye-slova-ot-otdelnyh/">ключевое слово</a> (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из <a href="/poiska-skrinshoty-poseshchennyh-stranic-hronologiya-v-google-kartah/">поисковой выдачи</a> на сайт или нет! Поэтому его, как и «title», нужно прописывать для <b>каждой
</b> страницы!</p>
<p>H
TML-код для создания мета-тега «description» будет следующим:</p>
<p><b>Содержимое мета-тега «description»">
</b><br>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p>
<p>Т
еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).</p>
<h2>§ 4. Технические мета-теги</h2>
<p>Т
ехнические мета-теги, для сайта, значат очень много. С их помощью можно управлять отображением страницы, настройками индексирования и т.д. В этом уроке мы рассмотрим основные технические мета-теги.</p>
<ul><li><b>content-type
</b> - тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером. <br>
Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. <a href="/sovremennyi-brauzer-dlya-windows-7-kakie-est-brauzery/">Современные браузеры</a> определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в <a href="/chto-takoe-operacionnaya-sistema-vidy-operacionnyh-sistem/">операционной системе</a> Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p></li> <li><b>content-language
</b> - указание языка документа. Значение этого необязательного мета-тега используется как <a href="/kakuyu-rabotu-vypolnyayut-pauki-poiskovyh-mashin-poiskovyi-robot-google-kakuyu/">поисковыми роботами</a>, так и web-серверами. Код для вставки:
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p></li> <li><b>refresh
</b> - время (в секундах), через которое произойдет <a href="/sinii-ekran-vo-vremya-raboty-kompyutera-chto-delat-pri/">автоматическая перезагрузка</a> документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p>
<p>А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:</p>
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p></li> <li><b>robots
</b> - мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть <a href="/proksi-sleduyushchim-obrazom-znachenie-kak-polzovatsya-proksi-serverom-osnovnye/">следующие значения</a>: <ul><li><b>index
</b> - страница индексируется;</li>
<li><b>noindex
</b> - страница не индексируется;</li>
<li><b>follow
</b> - гиперссылки на странице учитываются;</li>
<li><b>nofollow
</b> - гиперссылки на странице не учитываются</li>
<li><b>all
</b> - заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);</li>
<li><b>none
</b> - заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.</li>
</ul><p>Код для вставки мета-тега «robots»:</p>
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p></li> <p>
<b>author
</b> и <b>copyright
</b> - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:
</p><p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p>
</ul><h2>§ 5. Заключение</h2>
<p>Э
то все метатеги в HTML, которые будут нужны новичку. Остальные специфичны и могут понадобиться тебе после того, как наберешься опыта и будешь точно знать, что делаешь. Из всех же вышеперечисленных мной настоятельно рекомендую использовать на <b>каждой
</b> странице твоего сайта следующие:</p>
<p>Заголовок страницы<br></p>
<p>О
стальные применяй по мере необходимости, но особо не заморачивайся. Помни, что мета-теги не сделают твой сайт интересным, они могут лишь помочь браузеру и web-серверу правильно отобразить страницы сайта, а <a href="/kak-osushchestvlyaetsya-poisk-v-poiskovyh-sistemah-poiskovaya/">поисковой системе</a> их найти.</p>
<p>Н
а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из <a href="/mts-lichnyi-kabinet-kak-svyazatsya-s-operatorom-kak-bystro/">личного опыта</a> по оптимизации страниц сайта. Жми на «Дальше».</p>
</blockquote>
</span>
<p>Кодировка windows 1251
была создана в начале 90 годов для русификации <a href="/sistemnaya-papka-zhivye-oboi-ne-otkryvaetsya-kak-ustanovit/">программных продуктов</a>, выпускаемых корпорацией Microsoft
:</p>
<p>Кодировка является 8-битной
и включает в себя символы славянской группы языков, в которую входят русский, белорусский, украинский, болгарский, македонский, сербский – это дает преимущество перед остальными кириллическими кодировками (ISO 8859-5, KOI8-R, CP866
). Однако у 1251-кодировки
имеются и весомые недостатки:</p>
<ul><li>0xFF (25510)
– это код, который зарезервирован для символа «я». В программах, которые не поддерживают чистый 8-ой бит, часто возникают непредсказуемые проблемы;</li>
<li>Нет псевдографики, которая присутствует в KOI8
, CP866
.</li>
</ul><p>Ниже приведены символы из Code Page 1251
или сокращенно СР1251
(<span>числа под символами являются кодом в <a href="/shestnadcatirichnoi-sisteme-schisleniya-shestnadcaterichnaya-sistema/">шестнадцатеричной системе</a> такого же символа в Юникоде
</span>):</p>
<p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201502/simvoli-iz-code-page-1251-230306.png' width="100%" loading=lazy></p>
<h2>Кодировка windows 1251 в html</h2>
<p>Нередко у web-разработчиков и блогеров, обладающих различной квалификацией возникает проблема с кодировкой страниц: вместо подготовленного текста появляются неизвестные, нечитаемые символы. Чтобы разобраться с данной проблемой, необходимо понимать суть термина «<span>кодировка страницы
</span>».</p>
<p>Текст в памяти компьютера хранится в виде <a href="/proigrat-cikl-javascript-opredelennoe-kolichestvo-raz-cikly-for-v-javascript/">определенного количества</a> байт, а не в том виде, в котором он отображается в текстовом редакторе. Каждый байт является кодом, который соответствует одному символу. Для того чтобы текст на странице отображался как следует, нужно сообщить браузеру, какую таблицу кодов для расшифровки и отображения он должен использовать.</p>
<p>Таблица кодировок не является универсальной, то есть, для расшифровки текста необходимо использовать ту, которая соответствует кодировке символов:</p>
<p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201502/kodirovka-windows-1251-v-230308.png' width="100%" loading=lazy></p>
<p>Для того чтобы html-документ
корректно отобразился в браузере, необходимо указать используемую кодировку. Делается это следующим образом:</p>
<p>— между тегом <head> и закрывающим его </head> нужно прописать <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> — исходя из этой строки, браузер будет использовать символы русского алфавита для отображения текста на странице.</p>
<h3>Кодировка windows 1251 в PHP</h3>
<p>Ни для кого не является тайной, что генерация страниц проходит путем выборки и использования какой-то части информации, которая хранится в базе данных. При написании сайта на PHP
, чаще всего это mysql
:</p>
<p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201502/kodirovka-windows-1251-v-230307.png' width="100%" loading=lazy></p>
<p>Нередко при смене хостинга возникает проблема: различные кодировки информации в базе данных и в шаблонах страниц. Из-за этого одна сгенерированная страница может одновременно содержать несколько кодировок. Если информация на сайте представлена в кодировке виндовс 1251
, то и чтение из базы данных должно осуществляться с помощью таблицы, в которой представлена win 1251
кодировка.</p>
<p>Для согласования расшифровки необходимо выполнить функцию <span>mysql_query(«SET NAMES cp1251»)
</span> – это означает, что преобразование из <a href="/kak-i-zachem-google-sozda-t-iskusstvennyi-intellekt-google-obespechit-gollivudskoe/">машинного кода</a> будет осуществляться согласно таблице cp1251
.</p>
<h3>Кодировка windows 1251 в htaccess</h3>
<p>При создании сайта, предварительно настроив кодировки в шаблонах и базах данных, все равно может всплыть проблема <a href="/chto-delat-esli-v-biznese-net-prodazh-nekorrektnoe-otobrazhenie-na/">некорректного отображения</a> информации в браузере.</p>
<p>Для того чтобы для веб-ресурса была задана кодировка виндовс-1251
, необходимо найти (или создать
) файл .htaccess
. Это файл, который хранит в себе <a href="/noutbuk-vin-7-ustranit-sboi-menyu-zagruzki-avtomaticheskoe/">дополнительные настройки</a> и описания конфигураций web-сервера.</p>
<p>В нем для установки кодировки следует прописать следующие строки:</p>
<ul><li>DefaultLanguage ru;</li>
<li>AddDefaultCharset windows-1251;</li>
<li>php_value default_charset «cp1251».</li>
</ul><p>Таким образом, для корректного отображения текста должны совпадать его кодировка и таблица кодов, с помощью которой браузер будет расшифровывать символы. Для текстов, написанных на славянских языках, необходима win 1251
кодировка. Важно помнить, что элементы страниц и баз данных должны быть описаны с помощью одной таблицы кодов.</p>
<p>Хорошо
Плохо
</p>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
</div>
<div class="right -is-sticky">
<div class="articles-conseilles">
<div id="focoda2" style="height:500px;width:266px;" align="center"></div>
</div>
</div>
</div>
<div class="a-decouvrir">
<h3>Рекомендуем почитать</h3>
<div class="featured">
<div class="view view-articles view-id-articles view-display-id-block_4 view-dom-id-169dc93f512a102548b755435ccd1346">
<div class="view-content">
<div class="row">
<article class="preview-article">
<header class="preview-article__header">
<a href="/luchshie-utility-dlya-udaleniya-virusov-i-vredonosnyh-programm/">
<figure class="">
<img src="https://i2.wp.com/webhelper.info/images/danger.jpg" alt="Лучшие утилиты для удаления вирусов и вредоносных программ" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/luchshie-utility-dlya-udaleniya-virusov-i-vredonosnyh-programm/">Лучшие утилиты для удаления вирусов и вредоносных программ</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Вредоносное ПО (malware) - это назойливые или опасные программы,...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/programma-dlya-vosstanovleniya-udalennyh-failov-onlain-kak-testirovalis/">
<figure class="">
<img src="https://i0.wp.com/softnonstop.ru/newi/7-Data-Recovery-Suite-min.png" alt="Как тестировались программы" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/programma-dlya-vosstanovleniya-udalennyh-failov-onlain-kak-testirovalis/">Как тестировались программы</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Лучшие программы для восстановления данных с любых носителей информации....
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
<article class="preview-article">
<header class="preview-article__header">
<a href="/chto-sdelat-chtoby-umenshit-nagruzku-kak-umenshit-nagruzku-na-cp/">
<figure class="">
<img src="https://i2.wp.com/pcpro100.info/wp-content/uploads/2015/03/kak-pochistit-kompyuter-ot-pyili.jpg" alt="Как уменьшить нагрузку на ЦП: простые, но эффективные методы решения проблемы" loading=lazy>
</figure>
</a>
</header>
<div class="preview-article__content">
<div class="views-field views-field-title"> <span class="field-content"><a href="/chto-sdelat-chtoby-umenshit-nagruzku-kak-umenshit-nagruzku-na-cp/">Как уменьшить нагрузку на ЦП: простые, но эффективные методы решения проблемы</a></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<p>
Здравствуйте.Одна из самых распространенных причин, по которым тормозит...
</p>
</div>
</div>
<div class="views-field views-field-field-article-categorie">
<div class="field-content"> <span class="preview-article__category se-soigner">
</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#skip-link" class="visually-hidden visually-hidden--focusable" id="main-menu" tabindex="-1">Наверх</a>
</div>
</section>
<div class="region region-bottom">
<div class="block block-block first last odd" id="block-block-7">
<ul>
<li><a href="/category/news/">Новости</a></li>
<li><a href="/category/for-android/">Для Андроид</a></li>
<li><a href="/category/for-windows/">Для Windows</a></li>
<li><a href="/category/for-windows-phone/">Для Windows Phone</a></li>
<li><a href="/category/download-viber/">Скачать Viber</a></li>
<li><a href="/category/viber-on-the-computer/">Вайбер на компьютер</a></li>
</ul>
<p><a href="/" id="choosit"><img alt="" height="13" src="/sites/all/themes/lanutrition/img/logo-choosit.svg" width="50" / loading=lazy></a></p>
</div>
</div>
<div class="search-modal" id="search-modal"><button class="close-button" id="close-search" aria-label="Close reveal" type="button"><span aria-hidden="true">×</span></button>
<div class="search-modal__content">
<div class="block block-search first odd" role="search" id="block-search-form">
<form class="search-form" role="search" action="/" method="get" id="search-block-form" accept-charset="UTF-8">
<div>
<div class="container-inline">
<h2 class="element-invisible">Поиск по сайту</h2>
<div class="form-item form-type-textfield form-item-search-block-form">
<input title="" class="custom-search-box form-text" placeholder="введите слово" type="text" id="edit-search-block-form--2" name="s" value="" size="15" maxlength="128" />
</div>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Rechercher" class="form-submit" /></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html> 