Довольно часто начинающие блоггеры, и не только начинающие, сталкиваются с проблемой кодировки страницы html. Когда вместо текста и читаемых символов выводятся непонятные КРАКОЗЯБРЫ. Именно так называются символы не соответствующие тем которые должны быть выведены на страницу. Откуда же появляются непонятные иероглифы?
Чтобы это понимать, нужно разобраться что такое- html кодировка страницы. Любой текст на компьютере представляется в виде набора байтов. В каждом из этих байтов определенным кодом – закодирован только один единственный символ. Чтобы правильно расшифровать или же раскодировать набор байтов и представить его в понятном человеку виде, браузеру нужно провести соответствие с одной из кодовых таблиц.
Базовой кодировкой является ASCIIкодировка, которая содержит в себе коды 128 символов латинского алфавита и специальные символы (скобки, решетки и т.д.). Далее появились первые русскосимвольные кодировки CP866 и KOI8-R, а из них вышла известная сегодняшним веб- мастерам кодировка windows-1251. Даже не смотря на то, что все эти кодировки призваны для отображения русского текста, они все отличаются друг от друга кодами.
Если текст писался в кодировке CP866, а браузер пытается раскодировать ее с помощью таблицы кодов windows-1251, то в результате мы получим не читаемые слова. Кроме названий тех кодировок, которые я здесь привел, существует еще великое множество котировок. С таким обилием кодовых таблиц образовалась проблема совместимости кодировок. Очень актуально встал вопрос создания универсальной кодировки. На сегодняшний день изобретена универсальная кодировка utf-8. При программировании сайта есть четыре момента которые требуют соблюдения единого стандарта кодирования текста.
- Кодировки скриптов.
- Кодировка таблиц MySQL.
- Кодировка самой HTML страницы.
- Локаль используемая браузером пользователя.
Во всех этих составляющих сайта, должна использоваться единая кодировка- желательно utf-8, ведь она универсальная.
Если нажать сочетание клавиш CTRL+ U можно посмотреть код страницы, в котором видно, какая кодировка используется для данного документа.
Если Вы открываете свой блог и вместо русских символов видите какие то непонятные знаки- значит кодировка установлена неправильно.
Как поменять кодировку?
Для устранения ошибок и проблем с кодировкой Вашего блога используем FTP- клиент . С его помощью копируем файл wp- config.php на «Рабочий стол» Вашего компьютера и открываем с помощью текстового редактора Notepad++. В этом файле содержится информация Вашего блога- включая пароли, кодировку базы данных и другое. Смотрим, если кодировка какая либо другая, ее нужно поменять на UTF- 8.
- -сохраняем в этой кодировке.
- -внутри кода Базы Данных кодировку меняем на UTF- 8.
Сохраняем файл в редакторе Notepad++, в значении- «UTF- 8 без сигнатуры BOM» и закачиваем файл на свой хостинг, то есть меняем на хостинге старый файл wp- config.php,
на новый.
Как правило этих действий достаточно для того чтобы на Вашем блоге все отображалось корректно. Если после проведенных действий ничего не получилось, можно попробовать еще один способ изменения кодировки. Для этого нужно внести изменения в файле.htaccess . Для корректировки открываем файл.htaccess с помощью редактора Notepad++ и добавляем в начале одну из данных строк:
- AddDefaultCharset UTF-8
- CharsetDisable On
- CharsetDefault UTF-8
- CharsetSourceEnc UTF-8
Возможно будет достаточно поменять один из вариантов, бывает достаточно первого. Если не получается, перебираем вручную следующие варианты, поочередно вписывая следующие варианты. Не забываем последовательность действий:
- Открываем файл в редакторе.
- Вносим изменения.
- Сохраняем.
- Закачиваем на хостинг.
- Проверяем.
Еще хочу упомянуть об одной из проблем, которая может возникнуть, и с которой я столкнулся при создании страниц захвата. При закачке на хостинг файлов страницы захвата, так же может возникнуть ситуация несовпадения кодировок. В этом случае нужно подправить файл index.html. Для этого, с помощью FaleZilla, извлекаем файл и переносим на «Рабочий стол» компьютера. Далее, открываем файл с помощью обычного Блокнота.
После того как файл открылся в Блокноте, левой кнопкой мыши нажимаем на «Файл» и «Сохранить как...».
Первая серьёзная проблема, с которой сталкиваются большинство новичков при , связана с набором символов (англ. character set
). Выражается эта проблема с кодировкой в, так называемых, «кракозябриках», которые мы получаем вместо указанных в HTML-файле символов. В данной статье я хочу остановиться на проблеме с кодировкой подробнее, постараться расставить всё по полочкам и дать варианты решения.
- Что такое кодировка?
- Кодировка файла (редактирование в Notepad++)
- Кодировка отображения (просмотр в браузере)
- Как указать кодировку HTML-страницы? (метатег charset)
- Всё ещё есть проблема с кодировкой? (header charset в php)
Что такое кодировка?
Условно говоря, каждый символ
(знак)
состоит из кода
и картинки
. Здесь код
- это уникальный идентификатор символа в наборе символов, который определяется выбранной кодировкой
, а картинка
- это визуальное представление символа, которое содержится в файле шрифта
в соответствующей коду символа ячейке.
Другими словами, кодировка
(англ. charset
)
- это набор взаимосвязей
кодов символов
с их визуальными представлениями
в шрифте.
Кодировка файла
HTML-страница представляет собой обычный текстовый файл, кодировка которого выбирается при его создании и/или сохранении на запоминающее устройство (жёсткий диск, флэшка и т.д.)
.
В случае с Notepad++, кодировка нового документа задаётся в настройках текстового редактора. Выбираем в меню: Опции > Настройки…
- и переходим на вкладку «Новый документ
». Здесь нас интересует секция «Кодировка
». По умолчанию, выбрана кодировка ANSI
.
Напомню, что это кодировка, в которой будет храниться HTML-файл.
Впрочем, Вы всегда можете преобразовать кодировку
HTML-страницы, используя соответствующие функции текстового редактора. Например, в Notepad++ для этого кликните пункт меню «Кодировки
» и выберите нужное преобразование.
В данном случае файл был в кодировке ANSI
и я преобразовал его в UTF-8
(без BOM)
. О том, что такое этот BOM Вы можете прочитать в моей статье: PHP: как удалить BOM в WordPress - проследовав по .
Кодировка отображения
Важно разделять кодировку файла
и кодировку отображения
. Независимо от того, в какой кодировке хранится файл, он может быть отображен и в любой другой кодировке. Это и является одной из причин проблем с кодировкой.
Например, если Вы сохранили HTML-страницу в кодировке ANSI
и откроете её в браузере, вместо русских символов Вы можем получить, так называемые, «кракозябрики».
В данном случае нам надо убедиться, что кодировка файла
совпадает
с кодировкой отображения
файла в браузере. Для этого в Firefox кликните иконку меню, а потом пункт «Кодировка
». Если такого у Вас нет, кликните пункт «Изменить
» и добавьте элемент «Кодировка
» в меню.
Как вы видите, браузер отображает файл в кодировке «Юникод
» (например, UTF-8
)
, в то время как файл был сохранён в кодировке ANSI
(например, Windows-1251
)
. Выбрав нужную кодировку, мы получим нужный нам результат.
В случае с Notepad++ также имеется возможность выбора кодировки отображения. Для этого кликните пункт меню «Кодировки
», а потом нужный вариант используемой для отображения кодировки.
В данном случае я изменил кодировку отображения ANSI
на UTF-8
(без BOM)
.
Как указать кодировку HTML-страницы?
И так, мы уже разобрались с тем, что такое кодировка и в чём состоит отличие кодировки файла и кодировки отображения. Теперь нам нужно решить проблему с кодировкой, которая заключается в неправильной интерпретации
браузером (или любым другим клиентом)
кодировки HTML-страницы.
Почему возникают проблемы с кодировкой?
Определить кодировку HTML-страницы не просто, а зачастую и не возможно, т.к. у того же браузера нет информации о ней или она указана неправильно.
Для того чтобы указать кодировку HTML-страницы используется специальный метатег. В HTML5 он имеет следующий урезанный вид:
В данном случае указана кодировка UTF-8
(Юникод)
.
В более старых версиях HTML этот метатег имеет следующий вид:
Этот метатег создаёт HTTP-заголовок Content-Type , в котором указывается тип документа text/html и его кодировка Windows-1251 (ANSI)
.
Лично я рекомендую использовать именно этот вариант, т.к. с ним будет меньше всего проблем. Главное чтобы такой метатег присутствовал в секции HEAD
, и указанная в нём кодировка соответствовала кодировке файла. В большинстве случаев этого будет достаточно.
Всё ещё есть проблема с кодировкой?
В некоторых случаях указать метатег с кодировкой HTML-страницы будет недостаточно. Такая проблема может быть вызвана настройками самого сервера, на котором находится файл HTML-страницы. Дело в том, что сервер способен выдавать свой
HTTP-заголовок Content-Type , который будет, условно говоря, иметь приоритет перед метатегом.
В данном случае эту проблему можно решить путём внесения изменений в настройки сервера. Я не буду вдаваться в детали данного вопроса и порекомендую лишь отключать всю эту перекодировку через файл .htaccess
, например:
CharsetDisable Off
Также можно производить изменения HTTP-заголовка Content-Type и программными средствами. В том же PHP для этого используется функция header() , например:
header("Content-Type: text/html; charset=UTF-8");
Обращаю Ваше внимание на то, что указание HTTP-заголовков должно идти до
вывода какой-то информации на экран, в противном случае Вы получите сообщение об ошибке.
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>
Далее вставляете в блокнот стандартный код 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://i2.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://i2.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>
<h2>Почему вместо нормального текста отображаются кракозябры</h2>
<p>Каждая страница вашего сайта должна иметь определенную кодировку. О том, какая кодировка используется в <a href="/kogda-zakonchitsya-padenie-bitcoin-kolichestvo-bitkoinov-na-dannyi/">данный момент</a> необходимо сообщать браузеру, передавая специальные заголовки (header). В этих заголовках необходимо указать кодировку, соответствующую той, которую вы используете в теле документов, размещенных на сайте (на его страницах).</p>
<p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/utf-8-and-windows-1251-compare.jpg' align="left" height="244" width="300" loading=lazy><a href="/chto-takoe-cookie-faily-i-kak-ochistit-kuki-v-sovremennyh/">Современные браузеры</a> могут и сами определить кодировку документа, если вебмастер забыл указать ее в явном виде. Иногда случается так, что возникают несостыковки между «мнением» браузера и реальностью, отсюда и появляется набор символов, которые невозможно прочитать. Набор галиматьи может принимать разные виды, иногда это будут просто странные символы, похожие на древние иероглифы, а иногда - просто вопросики или же вопросики внутри черных ромбиков. По большому счету не так важно, какие именно кракозябры отображает браузер, а важно то, что человек их прочитать не может.</p>
<p>Если же вы столкнулись с проблемой некорректно указанной кодировки и видите на своем сайте то, что не в состоянии прочитать, в первую очередь воспользуйтесь специальным Декодером , разработанным в студии Артемия Лебедева. Для этого просто скопируйте текст, который хотите расшифровать, вставьте его в специальное поле и нажмите «Расшифровать». В случае успешного декодирования, вы увидите уже читаемый текст, а также исходную кодировку и путь, который пришлось пройти программе, чтобы вывести результат.</p>
<p>Все это нужно, скорее, для продвинутых пользователей, которым полученная информация сможет чем-то помочь. Возможно, результат действий программы натолкнет вас на мысль и вы сообразите, откуда на вашем сайте берутся кракозябры и быстро исправите ситуацию. А если же проделанные манипуляции совершенно ни о чем вам не говорят, то давайте просто двигаться дальше.</p>
<h2>Как правильно выбрать кодировку</h2>
<p>В рамках данной статьи мы не будем углубляться в то, какие кодировки бывают и чем они друг от друга отличаются, т.к. не хотим перегружать ни себя, ни вас лишней информацией, да и в целях сегодняшней статьи этого не было. Стоит отметить лишь тот факт, что на русскоязычном сайте нет совершенно никакого смысла устанавливать кодировку windows-1251 , исчерпывающе описанную в замечательной статье Википедии. Даже если все тексты на нем будут написаны исключительно на русском и не будет никаких вкраплений нестандартных символов. Вместо этого нужно просто выбрать универсальную кодировку UTF-8 , приняв это как данное, не забивая голову лишней информацией.</p>
<p><img src='https://i0.wp.com/makeasite.ru/wp-content/uploads/2015/09/utf-8-and-windows-1251-compare.jpg' align="left" height="244" width="300" loading=lazy>Дело в том, что нет смысла выбирать для своего сайта кодировку, которая поддерживает одни только символы славянских языков, таких как русский, украинский, белорусский, сербский, македонский и болгарский. Зачем изначально ограничивать себя и обрекать на возможные проблемы в дальнейшем. Что вы будете делать, если понадобится вставить символ, которого нет в поддерживаемых?</p>
<p>UTF-8 (от англ. Unicode Transformation Format) - восьмибитный формат преобразования Юникода, который получил всемирное признание и был стандартизирован как раз для избежания проблем, связанных с появлением кракозябров и неразберихой с нечитабельными текстами. Из чего можно смело сделать вывод, что в данном случае из двух зол нужно выбирать бóльшую и спать спокойно, не вникая в подробности, потому что тут и так все понятно. Посмотрите на размер Юпитера и Венеры для сравнения.</p>
<h2>Основные способы установки правильной кодировки</h2>
<p>Довольно часто проблемы с кодировкой сайта возникают не потому что не было выполнено ни одного из условий, о которых мы вам сейчас расскажем, а достаточно не выполнить всего лишь одно из них, чтобы текст на вашем сайте начал отображаться некорректно. После того, как вы установите кодировку всеми перечисленными способами, задача будет решена с вероятностью 99.9%. К такому заключению мы пришли на основании многолетнего опыта работы с сайтами на всевозможных хостинг-площадках, с использованием самых разных систем администрирования и настроек серверов.</p>
<h3>Кодировка в.htaccess - AddDefaultCharset</h3>
<p>Прежде всего, вам нужно установить кодировку всех страниц сайта по умолчанию с помощью одной очень полезной директивы htaccess - AddDefaultCharset, которая в дословном переводе с английского языка означает «ДобавитьКодировкуПоУмолчанию». Делается это очень просто:</p><p>AddDefaultCharset UTF-8
</p><p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/krakozyabra.jpg' align="right" height="434" width="300" loading=lazy>Если вы не знаете что такое <i></i>, то просто создайте текстовый файл в блокноте, а затем с помощью Total Commander-а переименуйте его в файл без названия, имеющий расширение HTACCESS (<i></i> - именно так и должно выглядеть полное имя вашего файла). После этого закачайте только что созданный файл в корневую директорию вашего сайта (в то же место, где находится главный исполняющий файл, например <i>index.php
</i>). И не забудьте вставить строку с кодировкой по умолчанию, которую мы только что приводили.</p>
<h3>Кодировка с помощью meta charset</h3>
<p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/meta-tags.jpg' align="right" height="112" width="300" loading=lazy>Метатеги способны отсылать браузеру информацию о странице в виде специальных заголовков, одним из которых как раз является тот, что нам нужен - <i>charset
</i>. Вообще метатеги могут иметь аж 4 различных атрибута:</p>
<ol><li>content;</li>
<li>http-equiv;</li>
<li>name;</li>
<li>scheme.</li>
</ol><p>На самом деле, из представленных четырех атрибутов только один является обязательным - <i>content
</i>, но существуют и исключения. Например в нашем случае будет использоваться сокращенная версия записи и мы установим кодировку с помощью метатега именно так:</p><p>
<meta charset="utf-8">
</p><p>Старый же формат записи давно канул в Лету и использовать его больше смысла нет:</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Как известно, метатеги принято размещать внутри контейнера <i>head
</i>. Об этом, наверное, знают уже все без исключения. Проделайте эту операцию и мы перейдем к следующему пункту в нашем списке.</p>
<h3>Кодировка файла с помощью функции header PHP</h3>
<p>Данный способ подойдет лишь тем, у кого сайт реализован с помощью самого популярного на данный момент языка программирования, по большей части ориентированного на создание веб-сайтов - PHP (Hyper Text Preprocessor). Для решения задачи, поставленной в рамках данной статьи, мы воспользуемся замечательной встроенной функцией header() , предназначенной для передачи заголовков, аналогично метатегам, но с тем небольшим отличием, что действие производится из PHP-скрипта, а не посредством вывода HTML-кода.</p>
<p>Установить кодировку UTF-8 для файла при помощи функции <i>header()
</i> довольно просто - нужно просто вставить приведенный код в самое начало страницы, но разумеется внутри области действия PHP, которая обозначается так: <? здесь у нас PHP-код?> или же так - <?php здесь у нас PHP-код?>.</p><p>Header("Content-type: text/html; charset=utf-8");
</p><p><img src='https://i2.wp.com/makeasite.ru/wp-content/uploads/2015/09/PHP.jpg' align="right" height="209" width="300" loading=lazy>Самым <a href="/dopolnitelnye-nastroiki-bios-vazhnye-momenty-v-nastroike-ami/">важным моментом</a> здесь является то, что заголовки мы имеем право передавать только в том случае, если перед этим не было никакого вывода со стороны скрипта. Именно поэтому мы вставляем <a href="/sposoby-peredachi-dannyh-po-kanalam-svyazi-kody-peredachi-dannyh-kakovy/">данный код</a> в самое начало страницы. Делать это нужно с умом и хорошо понимать, что происходит, ведь вы можете быть уверены, что вставляете заголовок в начало файла, но можете не знать, что этот файл используется в другом файле, в который подтягивается с помощью функции <i>require
</i> или <i>include
</i> уже после того, как определенная информация была выведена на экран. Поэтому если вы не очень хорошо понимаете о чем сейчас идет речь, лучше перейдите к следующему шагу и вернитесь к этому, если 3 предыдущих не помогли установить правильную кодировку страниц вашего сайта.</p>
<h3>Сохранение файлов в правильной кодировке</h3>
<p>Одной из, наверное, самых распространенных причин возникновения кракозябров на сайте является некорректное кодирование самих фалов, использующихся для генерации конечного документа. Чаще всего такая проблема возникает у начинающих программистов, которые только делают свои первые шаги в освоении искусства . Когда в качестве движка сайта выбрана одна из популярных на данный момент систем администрирования, <a href="/kursovaya-rabota-problemy-bezopasnosti-baz-dannyh-obespechenie/">данная проблема</a> может возникать в очень редких случаях, но если используется , то такое случается чуть ли не в каждом третьем случае.</p>
<p><img src='https://i0.wp.com/makeasite.ru/wp-content/uploads/2015/09/encode-in-unicode-without-BOM.jpg' align="left" height="223" width="300" loading=lazy>Как мы условились ранее, используемая нами кодировка на всех, даже на самых прожженных русскоязычных сайтах - UTF-8, поэтому и все файлы, составляющие движок сайта мы с вами будем кодировать в этом же формате. А для того, чтобы изменить кодировку самого файла, закачиваемого на сервер, обычного блокнота, предоставляемого операционной системой Windows будет конечно же не достаточно. Поэтому лучше воспользоваться <a href="/programmy-dlya-proverki-vneshnego-zhestkogo-diska-chto-delat-pri-obnaruzhenii/">сторонней программой</a>, распространяемой бесплатно - Notepad++, которую можно скачать на официальном сайте без особых проблем.</p>
<p>Успешно пройдя несложный процесс установки, вы должны будете назначить эту программу редактором по умолчанию, произвести некоторые настройки на свой вкус и поменять кодировку некорректно отображаемого файла так же, как показано на скриншоте. Т.е. вам необходимо выбрать значение «Кодировать в UTF-8 (без BOM)». Хорошим признаком того, что причина была именно в этом, будет то, что изначально не будет выбран ни один из вариантов и вам будет предложено «Преобразовать в UTF-8 (без BOM)». Если вы это увидели, то будьте уверены, что до решения проблемы с кодировкой остались считанные секунды.</p>
<p><img src='https://i1.wp.com/makeasite.ru/wp-content/uploads/2015/09/yes.jpg' align="right" height="177" width="300" loading=lazy>В дополнение хочется сказать лишь то, что выбирать нужно именно <b>без BOM
</b>. В противном случае, если кодировать просто в UTF-8 (с BOM), то в начале файла будут создаваться лишние байты. BOM - Byte Order Mark стараются не использовать именно в вебе при кодировании в формате UTF-8, т.к. это приводит к ошибкам из-за создания помех корректной PHP-интерпретации.</p>
<p>Ну а теперь, когда все <a href="/kak-vosstanovit-dannye-s-diska-hdd-vosstanovlenie-dannyh-s-zhestkogo-diska/">необходимые действия</a> выполнены, вы, скорей всего, на страницах вашего сайта увидите перед собой легко читаемый текст и вздохнете свободно 🙂</p>
<p>Давайте согласимся иметь разногласия. <br><span>Роберт Льюис Стивенсон.
</p>
<p>Э
то урок, в котором мы поговорим о том, что такое <b>мета-теги
</b>, для чего и как они используются при и как их правильно заполнить.</p>
<p>К
ак я уже говорил в , <i>мета-теги
</i> располагаются в заголовке html-страницы, между тегами и, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень важную роль. Их добавление и оптимизация могут существенно помочь сайту в его жизни.</p>
<p>Р
екомендую использовать только те метатеги, которые <b>реально
</b> нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.</p> <br clear="all"><blockquote>
<i>
</i>ервый <b>мета-тег
</b> очень важен. Причём этот мета-тег одинаково важен и для поисковых систем, и для посетителей. Первые в ранжировании результатов поиска придают <a href="/kak-pravilno-nastroit-avtomobilnuyu-raciyu-faq---racii-chto-delat-esli/">большое значение</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-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они <b>обязательно
</b> должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.</p>
<p>Н
апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.</p>
<p>Б
олее подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в .</p>
<p>Ч
тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:</p>
<p><b>Перечень ключевых слов">
</b><br>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p>
<p>К
лючевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время <b>правильно
</b> заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.</p>
<h2>§ 3. Мета-тег «description» (описание страницы)</h2>
<p>С
ледующим важным мета-тегом является тег «description», в котором должно содержаться <a href="/kak-hranit-dannye-v-oblake-na-aifone-kratkoe-opisanie-osnovnyh-servisov/">краткое описание</a> страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.</p>
<p>В
ажной особенностью мета-тега «description» является то обстоятельство, что в случае его <b>правильного
</b> заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):</p>
<p>Е
сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.</p>
<p>Т
аким образом, правильный мета-тег «description» обязательно содержит <a href="/chto-takoe-klyuchevye-slova-i-kak-ih-ispolzovat-klyuchevye-slova-vidy/">ключевое слово</a> (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из <a href="/apdeity-yandeksa-apdeity-yandeksa-kakie-byvayut-kak-otslezhivat/">поисковой выдачи</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> - тип документа и его кодировка. Этот мета-тег нужен для <a href="/konverter-dlya-pravilnogo-otobrazheniya-faila-preobrazovanie-dokumentov-word-odnoi-komandoi-poisk-ko/">правильного отображения</a> символов браузером. <br>
Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в <a href="/reiting-luchshih-operacionnyh-sistem-operacionnye-sistemy/">операционной системе</a> Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p></li> <li><b>content-language
</b> - указание языка документа. Значение этого необязательного мета-тега используется как <a href="/kak-rabotaet-poiskovyi-robot-poiskovyi-robot-poiskovye-roboty-google/">поисковыми роботами</a>, так и web-серверами. Код для вставки:
<p>Содержимое мета-тега «title»</p><p>Основное содержимое страницы<br></p></li> <li><b>refresh
</b> - время (в секундах), через которое произойдет <a href="/iphone-4s-kak-snyat-parol-posle-perezagruzki-pochemu-avtomaticheskaya-blokirovka-ne-rabotaet-ustanav/">автоматическая перезагрузка</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» могут быть следующие значения: <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="/poiskovaya-sistema-yaho-poiskovaya-sistema-yahoo-kratko-o-poiskovoi/">поисковой системе</a> их найти.</p>
<p>Н
а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из <a href="/razblokirovka-telefona-lichnyi-opyt/">личного опыта</a> по оптимизации страниц сайта. Жми на «Дальше».</p>
</blockquote>
</span>
<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>
<footer>
<div class="td-post-source-tags">
</div>
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://rokwell.ru/menyaem-kodirovku-stranic/" content="https://rokwell.ru/menyaem-kodirovku-stranic/" /><span style="display: none;"><span style="display: none;"><meta itemprop="url" content="/assets/logo.svg"></span>
<meta itemprop="name" content=" Меняем кодировку страниц">
</span>
<meta itemprop="headline " content="Сбербанк Копилка онлайн"><span style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://i1.wp.com/pro-infobusiness.ru/wp-content/uploads/2013/07/kodirovka_html.jpg">
<meta itemprop="width" content="366"><meta itemprop="height" content="262"></span> </footer>
</article>
<style>
.ads-border {
overflow: hidden;
}
.ads-content {
width: 930px;
display: block;
}
@media(max-width: 1140px) {
.ads-content {
width: 910px;
}
}
@media(max-width: 1018px) {
.ads-content {
width: 970px;
}
}
@media (max-width: 767px) {
.ads-content {
width: 134%;
}
}
@media (max-width: 479px) {
.ads-content {
width: 100%;
height: 490px;
}
}
</style>
<div class="ads-block">
<h4 class="td-related-title"><span class="td-related-left td-cur-simple-item">СХОЖИЕ СТАТЬИ</span></h4>
<div class="ads-border">
<div class="ads-content">
<div id="fofuny1" style="height:90px;width:690px;" align="center"></div>
</div>
</div>
</div>
<style>
#mc-container {
padding: 10px;
}
</style>
<dblock></dblock>
</div>
</div>
<div class="td-pb-span4 td-main-sidebar" role="complementary">
<div class="td-ss-main-sidebar">
<aside class="widget widget_text" id="text-23">
<div class="block-title"><span>Полезное</span></div>
<div class="textwidget" align="center"><div id="fofuny2" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-24">
<div class="block-title"><span>Реклама</span></div>
<div class="textwidget" align="center"><div id="fofuny3" style="height:200px;width:300px;" align="center"></div></div>
</aside>
<aside class="widget widget_text" id="text-25">
<div class="textwidget">
<p style="text-align: center;">
</p>
</div>
</aside>
<aside class="widget rpwe_widget recent-posts-extended" id="rpwe_widget-4">
<div class="block-title"><span>Новое</span></div>
<dblock></dblock>
<div class="rpwe-block ">
<ul class="rpwe-ul">
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/preryvanie-na-kontrollere-avr-v-atmel-avr-studio-chto-takoe-preryvaniya-v-mikrokontrollerah-preryvani/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/cxem.net/mc/book10-2.png" alt="Что такое прерывания в микроконтроллерах Прерывания микроконтроллера avr" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/preryvanie-na-kontrollere-avr-v-atmel-avr-studio-chto-takoe-preryvaniya-v-mikrokontrollerah-preryvani/" title="Что такое прерывания в микроконтроллерах Прерывания микроконтроллера avr" rel="bookmark">Что такое прерывания в микроконтроллерах Прерывания микроконтроллера avr</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/pravilnaya-struktura-statei-dlya-bloga-blogosfera-kak/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/ruskweb.ru/wp-content/uploads/2013/03/robots.jpg" alt="Блогосфера как сетевое информационное пространство Упражнения от freeCodeCamp" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/pravilnaya-struktura-statei-dlya-bloga-blogosfera-kak/" title="Блогосфера как сетевое информационное пространство Упражнения от freeCodeCamp" rel="bookmark">Блогосфера как сетевое информационное пространство Упражнения от freeCodeCamp</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/ne-uda-tsya-aktivirovat-windows-na-etom-ustroistve-obzor-vseh-oshibok-pri/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/geekon.media/wp-content/uploads/2015/10/okno-vypolnit.png" alt="Обзор всех ошибок при активации Windows и методы устранения Решение возникшей проблемы" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/ne-uda-tsya-aktivirovat-windows-na-etom-ustroistve-obzor-vseh-oshibok-pri/" title="Обзор всех ошибок при активации Windows и методы устранения Решение возникшей проблемы" rel="bookmark">Обзор всех ошибок при активации Windows и методы устранения Решение возникшей проблемы</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/programma-konvertacii-flac-v-wav-kak-konvertirovat-faily-flac-v-mp3-aac-wma-wav-i/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/mymusictools.com/rus/articles/flac-v-wav-1.gif" alt="Как конвертировать файлы FLAC в MP3, AAC, WMA, WAV и т" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/programma-konvertacii-flac-v-wav-kak-konvertirovat-faily-flac-v-mp3-aac-wma-wav-i/" title="Как конвертировать файлы FLAC в MP3, AAC, WMA, WAV и т" rel="bookmark">Как конвертировать файлы FLAC в MP3, AAC, WMA, WAV и т</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/vse-o-kriptovalyute-nem-kriptovalyuta-nem-nem-xem-unikalnaya-set-s-algoritmom/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/miningbitcoinguide.com/wp-content/uploads/2017/12/Kurs-NEM-v-2017-godu.jpg" alt="Криптовалюта NEM (Нэм, XEM) — уникальная сеть с алгоритмом доказательства важности Как устроен NEM" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/vse-o-kriptovalyute-nem-kriptovalyuta-nem-nem-xem-unikalnaya-set-s-algoritmom/" title="Криптовалюта NEM (Нэм, XEM) — уникальная сеть с алгоритмом доказательства важности Как устроен NEM" rel="bookmark">Криптовалюта NEM (Нэм, XEM) — уникальная сеть с алгоритмом доказательства важности Как устроен NEM</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/uznat-kogda-vyidet-obnovlenie-android-kogda-vyidet-novaya/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i2.wp.com/pdalife.info/uploads/p/3fciaz/google-pixel.jpg" alt="Когда выйдет новая прошивка для Samsung Galaxy" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/uznat-kogda-vyidet-obnovlenie-android-kogda-vyidet-novaya/" title="Когда выйдет новая прошивка для Samsung Galaxy" rel="bookmark">Когда выйдет новая прошивка для Samsung Galaxy</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/vylil-kofe-na-noutbuk-vosstanovlenie-zalitoi-klaviatury/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i1.wp.com/smart-service.ru/_data/article/66/full/8172_zalit_noutbuk.jpg" alt="Восстановление залитой клавиатуры ноутбука" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/vylil-kofe-na-noutbuk-vosstanovlenie-zalitoi-klaviatury/" title="Восстановление залитой клавиатуры ноутбука" rel="bookmark">Восстановление залитой клавиатуры ноутбука</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/nastroiki-bios-detalnaya-instrukciya-v-kartinkah-bazovyi-kod-chto-takoe/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/alexzsoft.ru/wp-content/uploads/2017/04/Parametry.png" alt="Базовый код: что такое BIOS Не заходит в биос на windows 10" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/nastroiki-bios-detalnaya-instrukciya-v-kartinkah-bazovyi-kod-chto-takoe/" title="Базовый код: что такое BIOS Не заходит в биос на windows 10" rel="bookmark">Базовый код: что такое BIOS Не заходит в биос на windows 10</a>
</li>
<li class="rpwe-li rpwe-clearfix">
<a class="rpwe-img" href="/oshibka-application-error--chto-delat-oshibka-application-load-error-p-0000065432-chto-delat-proverit/" rel="bookmark">
<img class="rpwe-aligncenter rpwe-thumb" src="https://i0.wp.com/tvoykomputer.ru/wp-content/uploads/2017/06/application-load-error-5-0000065434.jpg" alt="Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы" loading=lazy></a>
<a style="color: #169c4c; font-size:14px; font-weight:600;" href="/oshibka-application-error--chto-delat-oshibka-application-load-error-p-0000065432-chto-delat-proverit/" title="Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы" rel="bookmark">Ошибка Application Load Error P:0000065432 – что делать Проверить обновление системы</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</div>
</div>
<div class="td-footer-wrapper td-footer-template-3">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12">
</div>
</div>
<div class="td-pb-row">
<div class="td-pb-span3 logo-footer">
<div class="td-footer-info">
<div class="footer-logo-wrap"><a href="/"><img class="td-retina-data" src="/logo/logo.png" data-retina="/logo/logo.png" alt="Сайт о компьютерной технике" title="Сайт о компьютерной технике" / loading=lazy></a></div>
<div class="footer-text-wrap"></div>
<div class="footer-social-wrap td-social-style-2"></div>
</div>
<aside class="widget widget_text" id="text-16">
<div class="textwidget">
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<span class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter"></span></div>
</aside>
</div>
<div class="td-pb-span9 footer-discription">
<aside class="widget widget_text" id="text-5">
<div class="textwidget">
<p>
<font size="2" color="grey">
</font>
</p>
© Сайт о компьютерной технике, 2024</div>
</aside>
</div>
</div>
</div>
</div>
<div class="td-sub-footer-container">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span12 td-sub-footer-menu">
<div class="td-sub-footer-main">
<div class="menu-foot-container"><ul id="menu-foot" class="td-subfooter-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-first td-menu-item td-normal-menu"><a href="/feedback/">Обратная связь</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="/sitemap.xml">Карта сайта</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu"><a href="">О сайте</a></li>
</ul></div> </div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("span.ancored").replaceWith(function () {
$this = jQuery(this);
href = $this.attr("title");
text = $this.html();
return '<a href="' + href + '">' + text + '</a>';
} )
} )
</script>
<link rel='stylesheet' id='font-awesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' />
<link rel='stylesheet' id='su-content-shortcodes-css' href='/assets/content-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='su-box-shortcodes-css' href='/assets/box-shortcodes.css' type='text/css' media='all' />
<script type='text/javascript' src='/assets/jquery.form.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = { "recaptcha":{ "messages":{ "empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."} },"cached":"1"} ;
/* ]]> */
</script>
<script type='text/javascript' src='/assets/scripts.js'></script>
<script type='text/javascript' src='/assets/front.min.js'></script>
<script type='text/javascript' src='/assets/imagesloaded.min.js'></script>
<script type='text/javascript' src='/assets/masonry.min.js'></script>
<script type='text/javascript' src='/assets/jquery.masonry.min.js'></script>
<script type='text/javascript' src='/assets/rsvp.js'></script>
<script type='text/javascript' src='/assets/tagdiv_theme.js'></script>
<script type='text/javascript' src='/assets/comment-reply.min.js'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "td-default", "margin_top" : 25, "margin_bottom" : 320, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-13'] } ;
</script>
<script type='text/javascript' src='/assets/q2w3-fixed-widget.min.js'></script>
<script type='text/javascript' src='/assets/wp-embed.min.js'></script>
<style type='text/css'>
/*** Shortcodes Ultimate - box elements ***/
/* Common styles
---------------------------------------------------------------*/
.su-clearfix:before,
.su-clearfix:after {
display: table;
content: " ";
}
.su-clearfix:after { clear: both; }
/* Tabs + Tab
---------------------------------------------------------------*/
.su-tabs {
margin: 0 0 1.5em 0;
padding: 3px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #eee;
}
.su-tabs-nav span {
display: inline-block;
margin-right: 3px;
padding: 10px 15px;
font-size: 13px;
min-height: 40px;
line-height: 20px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
color: #333;
cursor: pointer;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
.su-tabs-nav span:hover { background: #f5f5f5; }
.su-tabs-nav span.su-tabs-current { background: #fff; cursor: default; }
.su-tabs-nav span.su-tabs-disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default;
}
.su-tabs-pane {
padding: 15px;
font-size: 13px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
background: #fff;
color: #333;
}
.su-tabs-vertical:before,
.su-tabs-vertical:after {
content: " ";
display: table;
}
.su-tabs-vertical:after { clear: both; }
.su-tabs-vertical .su-tabs-nav {
float: left;
width: 30%;
}
.su-tabs-vertical .su-tabs-nav span {
display: block;
margin-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.su-tabs-vertical .su-tabs-panes {
float: left;
width: 70%;
}
.su-tabs-vertical .su-tabs-pane {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.su-tabs-nav,
.su-tabs-nav span,
.su-tabs-panes,
.su-tabs-pane {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-tabs-nav span { display: block; }
.su-tabs-vertical .su-tabs-nav {
float: none;
width: auto;
}
.su-tabs-vertical .su-tabs-panes {
float: none;
width: auto;
}
}
/* Spoiler + Accordion
---------------------------------------------------------------*/
.su-spoiler { margin-bottom: 1.5em; }
.su-spoiler .su-spoiler:last-child { margin-bottom: 0; }
.su-accordion { margin-bottom: 1.5em; }
.su-accordion .su-spoiler { margin-bottom: 0.5em; }
.su-spoiler-title {
position: relative;
cursor: pointer;
min-height: 20px;
line-height: 20px;
padding: 7px 7px 7px 34px;
font-weight: bold;
font-size: 13px;
}
.su-spoiler-icon {
position: absolute;
left: 7px;
top: 7px;
display: block;
width: 20px;
height: 20px;
line-height: 21px;
text-align: center;
font-size: 14px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
.su-spoiler-content {
padding: 14px;
-webkit-transition: padding-top .2s;
-moz-transition: padding-top .2s;
-o-transition: padding-top .2s;
transition: padding-top .2s;
-ie-transition: padding-top .2s;
}
.su-spoiler.su-spoiler-closed > .su-spoiler-content {
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
border: none;
opacity: 0;
}
.su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f068"; }
.su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f067"; }
.su-spoiler-icon-plus-circle .su-spoiler-icon:before { content: "\f056"; }
.su-spoiler-icon-plus-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f055"; }
.su-spoiler-icon-plus-square-1 .su-spoiler-icon:before { content: "\f146"; }
.su-spoiler-icon-plus-square-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0fe"; }
.su-spoiler-icon-plus-square-2 .su-spoiler-icon:before { content: "\f117"; }
.su-spoiler-icon-plus-square-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f116"; }
.su-spoiler-icon-arrow .su-spoiler-icon:before { content: "\f063"; }
.su-spoiler-icon-arrow.su-spoiler-closed .su-spoiler-icon:before { content: "\f061"; }
.su-spoiler-icon-arrow-circle-1 .su-spoiler-icon:before { content: "\f0ab"; }
.su-spoiler-icon-arrow-circle-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f0a9"; }
.su-spoiler-icon-arrow-circle-2 .su-spoiler-icon:before { content: "\f01a"; }
.su-spoiler-icon-arrow-circle-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f18e"; }
.su-spoiler-icon-chevron .su-spoiler-icon:before { content: "\f078"; }
.su-spoiler-icon-chevron.su-spoiler-closed .su-spoiler-icon:before { content: "\f054"; }
.su-spoiler-icon-chevron-circle .su-spoiler-icon:before { content: "\f13a"; }
.su-spoiler-icon-chevron-circle.su-spoiler-closed .su-spoiler-icon:before { content: "\f138"; }
.su-spoiler-icon-caret .su-spoiler-icon:before { content: "\f0d7"; }
.su-spoiler-icon-caret.su-spoiler-closed .su-spoiler-icon:before { content: "\f0da"; }
.su-spoiler-icon-caret-square .su-spoiler-icon:before { content: "\f150"; }
.su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before { content: "\f152"; }
.su-spoiler-icon-folder-1 .su-spoiler-icon:before { content: "\f07c"; }
.su-spoiler-icon-folder-1.su-spoiler-closed .su-spoiler-icon:before { content: "\f07b"; }
.su-spoiler-icon-folder-2 .su-spoiler-icon:before { content: "\f115"; }
.su-spoiler-icon-folder-2.su-spoiler-closed .su-spoiler-icon:before { content: "\f114"; }
.su-spoiler-style-default { }
.su-spoiler-style-default > .su-spoiler-title {
padding-left: 27px;
padding-right: 0;
}
.su-spoiler-style-default > .su-spoiler-title > .su-spoiler-icon { left: 0; }
.su-spoiler-style-default > .su-spoiler-content { padding: 1em 0 1em 27px; }
.su-spoiler-style-fancy {
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
color: #333;
}
.su-spoiler-style-fancy > .su-spoiler-title {
border-bottom: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #f0f0f0;
font-size: 0.9em;
}
.su-spoiler-style-fancy.su-spoiler-closed > .su-spoiler-title { border: none; }
.su-spoiler-style-fancy > .su-spoiler-content {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.su-spoiler-style-simple {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.su-spoiler-style-simple > .su-spoiler-title {
padding: 5px 10px;
background: #f0f0f0;
color: #333;
font-size: 0.9em;
}
.su-spoiler-style-simple > .su-spoiler-title > .su-spoiler-icon { display: none; }
.su-spoiler-style-simple > .su-spoiler-content {
padding: 1em 10px;
background: #fff;
color: #333;
}
/* Quote
---------------------------------------------------------------*/
.su-quote-style-default {
position: relative;
margin-bottom: 1.5em;
padding: 0.5em 3em;
font-style: italic;
}
/*.su-quote-style-default.su-quote-has-cite { margin-bottom: 3em; } */
.su-quote-style-default:before,
.su-quote-style-default:after {
position: absolute;
display: block;
width: 20px;
height: 20px;
background-image: url('../images/quote.png');
content: '';
}
.su-quote-style-default:before {
top: 0;
left: 0;
background-position: 0 0;
}
.su-quote-style-default:after {
right: 0;
bottom: 0;
background-position: -20px 0;
}
.su-quote-style-default .su-quote-cite {
display: block;
text-align: right;
font-style: normal;
}
.su-quote-style-default .su-quote-cite:before { content: "\2014\0000a0"; }
.su-quote-style-default .su-quote-cite a { text-decoration: underline; }
/* Pullquote
---------------------------------------------------------------*/
.su-pullquote {
display: block;
width: 30%;
padding: 0.5em 1em;
}
.su-pullquote-align-left {
margin: 0.5em 1.5em 1em 0;
padding-left: 0;
float: left;
border-right: 5px solid #eee;
}
.su-pullquote-align-right {
margin: 0.5em 0 1em 1.5em;
padding-right: 0;
float: right;
border-left: 5px solid #eee;
}
/* Row + Column
---------------------------------------------------------------*/
.su-row {
clear: both;
zoom: 1;
margin-bottom: 1.5em;
}
.su-row:before,
.su-row:after {
display: table;
content: "";
}
.su-row:after { clear: both; }
.su-column {
display: block;
margin: 0 4% 0 0;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.su-column-last { margin-right: 0; }
.su-row .su-column { margin: 0 0 0 4%; }
.su-row .su-column.su-column-size-1-1 { margin-left: 0; margin-right: 0; }
.su-row .su-column:first-child { margin-left: 0; }
.su-column-centered {
margin-right: auto !important;
margin-left: auto !important;
float: none !important;
}
.su-column img,
.su-column iframe,
.su-column object,
.su-column embed { max-width: 100%; }
@media only screen {
[class*="su-column"] + [class*="su-column"]:last-child { float: right; }
}
.su-column-size-1-1 { width: 100%; }
.su-column-size-1-2 { width: 48%; }
.su-column-size-1-3 { width: 30.66%; }
.su-column-size-2-3 { width: 65.33%; }
.su-column-size-1-4 { width: 22%; }
.su-column-size-3-4 { width: 74%; }
.su-column-size-1-5 { width: 16.8%; }
.su-column-size-2-5 { width: 37.6%; }
.su-column-size-3-5 { width: 58.4%; }
.su-column-size-4-5 { width: 79.2%; }
.su-column-size-1-6 { width: 13.33%; }
.su-column-size-5-6 { width: 82.66%; }
/* Styles for screens that are less than 768px */
@media only screen and (max-width: 768px) {
.su-column {
width: 100% !important;
margin: 0 0 1.5em 0 !important;
float: none !important;
}
.su-row .su-column:last-child {
margin-bottom: 0 !important;
}
}
/* Service
---------------------------------------------------------------*/
.su-service {
position: relative;
margin: 0 0 1.5em 0;
}
.su-service-title {
display: block;
margin-bottom: 0.5em;
color: #333;
font-weight: bold;
font-size: 1.1em;
}
.su-service-title img {
position: absolute;
top: 0;
left: 0;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.su-service-title i {
position: absolute;
top: 0;
left: 0;
display: block !important;
width: 1em;
height: 1em;
text-align: center;
line-height: 1em;
}
.su-service-content { line-height: 1.4; }
/* Box
---------------------------------------------------------------*/
.su-box {
margin: 0 0 1.5em 0;
border-width: 2px;
border-style: solid;
}
.su-box-title {
display: block;
padding: 0.5em 1em;
font-weight: bold;
font-size: 1.1em;
}
.su-box-content {
background-color: #fff;
color: #444;
padding: 1em;
}
.su-box-style-soft .su-box-title {
background-image: url('../images/styles/style-soft.png');
background-position: 0 0;
background-repeat: repeat-x;
}
.su-box-style-glass .su-box-title {
background-image: url('../images/styles/style-glass.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-bubbles .su-box-title {
background-image: url('../images/styles/style-bubbles.png');
background-position: 0 50%;
background-repeat: repeat-x;
}
.su-box-style-noise .su-box-title {
background-image: url('../images/styles/style-noise.png');
background-position: 0 0;
background-repeat: repeat-x;
}
/* Note
---------------------------------------------------------------*/
.su-note {
margin: 0 0 1.5em 0;
border-width: 0px;
border-style: solid;
}
.su-note-inner {
padding: 1em;
border-width: 0px;
border-style: solid;
box-shadow: 3px 3px 6px #d0d0d0;
}
/* Expand
---------------------------------------------------------------*/
.su-expand { margin: 0 0 1.5em 0; }
.su-expand-content { overflow: hidden; }
.su-expand-link {
margin-top: 0.5em;
cursor: pointer;
}
.su-expand-link:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
.su-expand-link a,
.su-expand-link a:hover,
.su-expand-link a:active,
.su-expand-link a:visited,
.su-expand-link a:focus {
display: inline;
text-decoration: none;
background: transparent;
border: none;
}
.su-expand-link-style-default .su-expand-link a,
.su-expand-link-style-default .su-expand-link a:hover { text-decoration: none; }
.su-expand-link-style-underlined .su-expand-link span { text-decoration: underline; }
.su-expand-link-style-dotted .su-expand-link span { border-bottom: 1px dotted #333; }
.su-expand-link-style-dashed .su-expand-link span { border-bottom: 1px dashed #333; }
.su-expand-link-style-button .su-expand-link a {
display: inline-block;
margin-top: 0.2em;
padding: 0.2em 0.4em;
border: 2px solid #333;
}
.su-expand-link-more { display: none; }
.su-expand-link-less { display: block; }
.su-expand-collapsed .su-expand-link-more { display: block; }
.su-expand-collapsed .su-expand-link-less { display: none; }
.su-expand-link i {
display: inline-block;
margin: 0 0.3em 0 0;
vertical-align: middle;
color: inherit;
}
.su-expand-link img {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 0.3em 0 0;
vertical-align: middle;
}
/* Lightbox content
---------------------------------------------------------------*/
.su-lightbox-content {
position: relative;
margin: 0 auto;
}
.mfp-content .su-lightbox-content,
#su-generator .su-lightbox-content { display: block !important; }
.su-lightbox-content-preview {
width: 100%;
min-height: 300px;
background: #444;
overflow: hidden;
}
.su-lightbox-content h1,
.su-lightbox-content h2,
.su-lightbox-content h3,
.su-lightbox-content h4,
.su-lightbox-content h5,
.su-lightbox-content h6 { color: inherit; }
/* Common margin resets for box elements
---------------------------------------------------------------*/
.su-column-inner > *:first-child,
.su-accordion > *:first-child,
.su-spoiler-content > *:first-child,
.su-service-content > *:first-child,
.su-box-content > *:first-child,
.su-note-inner > *:first-child,
.su-expand-content > *:first-child,
.su-lightbox-content > *:first-child { margin-top: 0; }
.su-column-inner > *:last-child,
.su-tabs-pane > *:last-child,
.su-accordion > *:last-child,
.su-spoiler-content > *:last-child,
.su-service-content > *:last-child,
.su-box-content > *:last-child,
.su-note-inner > *:last-child,
.su-expand-content > *:last-child,
.su-lightbox-content > *:last-child { margin-bottom: 0; }
</style>
<script>
(function(){
var html_jquery_obj = jQuery('html');
if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {
var path = '/assets/style2.css';
jQuery.get(path, function(data) {
var str_split_separator = '#td_css_split_separator';
var arr_splits = data.split(str_split_separator);
var arr_length = arr_splits.length;
if (arr_length > 1) {
var dir_path = '/wp-content/themes/Newspaper';
var splited_css = '';
for (var i = 0; i < arr_length; i++) {
if (i > 0) {
arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
}
//jQuery('head').append('<style>' + arr_splits[i] + '</style>');
var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,'');
} );
splited_css += "<style>" + formated_str + "</style>";
}
var td_theme_css = jQuery('link#td-theme-css');
if (td_theme_css.length) {
td_theme_css.after(splited_css);
}
}
} );
}
} )();
</script>
</body>
</html>
