В какой кодировке сохранять html. HTML кодировка

Если вы ярый меломан, который много сидит за компьютером, то наверняка часто слушаете на нем музыку, у вас установлен классный мультимедиа проигрыватель, который позволяет вам максимально удобно работать с вашей музыкальной коллекцией. Но может ли ваш проигрыватель дать вам возможность удобно и наглядно регулировать громкость? У многих пользователей ноутбуков есть такая возможность. Пользователям же стационарных компьютеров приходится хуже, так как громкость можно регулировать либо с мультимедийной клавиатуры, либо мышкой тыкать в «Регулятор громкости». Но существует еще один весьма неплохой и наглядный способ регулировать громкость с помощью колесика мышки, наведя курсор на панель задач. При этом на рабочем столе будет показываться большой и стильный регулятор, который покажет текущее состояние громкости. Все это можно сделать с помощью утилиты Volume2.

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

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


На вкладке «Системный трей» в Volume2 можно задать внешний вид и настройки индикатора, расположенного в области уведомлений (трее). Тут вы найдете множество самых разнообразных вариантов отображения индикатора, которые красиво меняются при изменении громкости. Главное, при использовании этого индикатора, отключить стандартный, чтобы в области часов был один, а не два индикатора.


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


Помимо управления громкостью программа Volume2 позволяет задавать различные дополнительные возможности, которые к громкости не имеют никакого отношения. Например, можно назначать горячие клавиши не только на управление громкостью, но и на управление яркостью экрана, извлекать диски из CD/DVD привода, а также безопасно извлекать USB-устройства. Еще одной интересной особенностью программы является возможность задавать расписание выполнения различных задач. Можно автоматизировать процесс выключения или снижения уровня громкости в определенное время суток, автоматически запускать приложения в заданное время, а также по расписанию показывать на экране сообщения.

В целом, Volume2 достаточно сильно напичкана самыми разнообразными настройками, которые могут показаться полезными некоторым меломанам. Естественно, программа полностью русифицирована (автор наш с вами соотечественник) и разобраться в настройках не составит труда, если у вас есть на это время и желание кастомизировать свою систему, сделав ее максимально удобной для работы и прослушивания музыки. Работает утилита под операционными системами Windows 7/Vista/XP.

Одной из самых частых проблем, с которой сталкивается начинающий Web-мастер (да и не только начинающие), это проблемы с кодировкой на сайте . Даже у меня постоянно появляется при создании сайтов "абракадабра ". Но, благо, я прекрасно знаю, как эту проблему решить, поэтому всё привожу в порядок в течение нескольких секунд. И в этой статье я постараюсь научить Вас также быстро решать проблемы, связанные с кодировкой на сайте .

Первое, что стоит отметить, это то, что все проблемы с появлением "абракадабры" связаны с несовпадением кодировки документа и кодировки, выставляемой браузером . Допустим, документ в windows-1251 , а браузер почему-то выставляет UTF-8 . А уже источником такого несовпадения могут быть следующие причины.

Первая причина

Неправильно прописан мета-тег content-type . Будьте внимательны, в нём всегда должна находиться та кодировка, в котором написан Ваш документ.

Вторая причина

Вроде бы, мета-тег прописан так, как Вы хотите, и браузер выставляет именно то, что Вы хотите, но почему-то всё равно с кодировкой проблемы. Здесь, почти наверняка, виновато то, что сам документ имеет отличную кодировку. Если Вы работаете в Notepad++ , то внизу справа есть название кодировки текущего документа (например, ANSI ). Если Вы ставите в мета-теге UTF-8 , а сам документ написан в ANSI , то сделайте преобразование в UTF-8 (через меню "Кодировки " и пункт "Преобразовать в UTF-8 без BOM ").

Третья причина

Четвёртая причина

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

SET NAMES "utf8"

Вместо "utf8 " может стоять другая кодировка. После этого все данные из базы должны выходить в правильной кодировке.

В данной статье я, надеюсь, разобрал, как минимум, 90% проблем, связанных с появлением "абракадабры" на сайте . Теперь Вы должны расправляться с такой популярной и простой проблемой, как неправильная кодировка, в два счёта.

1. У нас есть файл: Мойфайл.html.
2. Надо сохранить его в кодировке Юникод -> UTF-8. Решение 1.
  1. Открываеем Мойфайл.html в текстовом редакторе Блокнот .
  2. Выбикаем «Сохранить как…».
  3. Выбираем кодировку UTF-8.
  4. Жмем кнопку - Сохранить.

Решение 2.
  1. Открываем Мойфайл.html в текстовом редакторе Notepad++ (еще есть редактор PSPad)
  2. Меню -> Кодировки.
    Здесь видим (Notepad++ определяет сам) кодировку открытого нами файла.
  3. Выбираем Преобразовать в UTF-8 без BOM (BOM - Byte Order Mark).
    (Кодироака "UTF-8 без BOM" предпочтительна и отличается от просто "UTF-8").
  4. Меню -> Файл -> Сохранить.

Определение кодировки браузерами

Мы сами сообщаем браузеру о том, какая кодировка установлена для данного HTML файла.
Делается это посредством META-тега 1) В приведенном примере браузеру дается указание, что загруженный HTML-файл сохранен в кодировке utf-8. Если HTML-файл сохранен в кодировке windows-1251, то: 2) Важно!
При перекодировке файлов не забывайть изменять директивы в META-теге на актуальные.
Если в META-теге указана одна кодировка, а файл сохранен в другой кодировке, то на экране мы увидем "абракадабру".

3) Если в META-теге указана нужная кодировка, а сайт все равно отображает "абракадабру", то нужно проверить настройку сайта на хостинге (веб-сервере).
Обычно на хостингне в настройках сайта указана кодировка utf-8.
Если в настройках хостинга указана кодировка windows-1251, то нужно сменить настройку на utf-8.

Влад Мержевич

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

Метатеги для поисковых механизмов

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

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

Некоторые принципы, относящиеся к метатегам:

  • не включайте ключевые слова, которые не содержатся на ваших страницах;
  • не повторяйте ключевые слова;
  • используйте метатеги по их прямому назначению;
  • делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.

description

Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.

Пример 1. Использование Description

description

keywords

Этот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.

Пример 2. Использование Keywords

keywords

Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).

. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

Кодировка

Кириллица

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251 , переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:

- начало документа
- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документа

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

С тегом </b> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <b><meta> </b> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.</p> <b><meta> </b> тег имеет следующие атрибуты: <ul><li><b>http-equiv </b> - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.</li><li><b>name </b> - информационное имя. (применяется в паре с атрибутом <b>content </b>)</li><li><b>content </b> - информационное содержание, связанное с мета именем (<b>name </b>)</li> </ul><p>Теперь на примерах будем вникать в суть дела.</p> <h2>Кодировка символов и язык</h2> <p>Пример (очень нужный и важный):</p> <p> <b><meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> </b></p> <p>Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница - формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку "иероглифов" у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере <b>Вид->Кодировка->Кириллица </b>, но он может не знать о данной функции, да и зачем утруждать человека данным действием.</p> <p>Теперь разберём по "слогам" нашу запись:<br><b><meta http-equiv="Content-Type" </b> - указываем что в этом мета теге мы будем заниматься <b>Content-Type </b> - типом содержания<br><b>Content="text/html; </b> - а именно его текстом<br><b>Charset=Windows-1251"> </b> - документ для Windows - Кириллица где <b>1251 </b> кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться <b>Charset=Windows-1252 </b></p> <p>В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку <b>UTF 8 </b></p> <p>То есть писать в голове документа вот так:</p> <p> <b><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </b></p> <p> <b><meta http-equiv="Content-Language" Content="ru"> </b></p> <p>В этой строчке говорится о том что язык <b>Language </b> документа является русским <b>Content="ru" </b></p> <p>Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.</p> <h2>Информация о документе</h2> <p> <b><meta name="author" Content="Остап Бендер"> </b> <br><b><meta name="copyright" Content=""Рога и копыта" Остап Бендер"> </b></p> <p>Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так <b>name="author" </b> указывает имя автора страницы, а <b>name="copyright" </b> авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду...</p> <p> <b><meta name ="Generator" Content="Microsoft Notepad"> </b></p> <p>Если хотите можете указать с помощью какого html редактора была написана данная страница.</p> <h2>Описание страницы и ключевые слова</h2> <p> <b><meta name="description" Content="Производим закупку по выгодным ценам рогов и копыт!"> </b></p> <p><b>Description </b> - краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.</p> <p> <b><meta name="keywords" Content ="рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене"> </b></p> <p><b>Keywords </b> - ключевые слова веб-страницы, опять таки предназначены для поисковых машин.</p> <p>Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта:) Какие слова и фразы Вы будите вводить в строке "Поиск"? ну наверно что то типа: "Где продать коровьи рога?" или "Реализовать копыта по выгодной цене" Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, это отдельная тема для разговора.</p> <p>Помните что описание <b>description </b> не должно превышать по длине более 200 символов, а ключевые слова <b>keywords </b> 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.</p> <h2>Адрес</h2> <p> <b><meta name="Publisher-Email" Content="Ваш_e-mail@сервер.домен"> </b> <br><b><meta name="Publisher-URL" Content="http://www.Ваш_сайт/"> </b></p> <p>Думаю понятно.. здесь указывается адрес Вашего почтового ящика <b>Publisher-Email </b> и адрес сайта <b>Publisher-URL </b></p> <h2>Обновление страницы</h2> <p> <b><meta name ="revisit-after" Content="15 days"> </b></p> <p>Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить "к Вам в гости" раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..</p> <h2>Время действия документа и кэш</h2> <p>Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно "но", дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем "беда" примет Ваш сайт за "мертвый" заброшенный и никем не обновляемый.</p> <p>Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(<b>GMT+03:00 </b> - время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.</p> <p>Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели</p> <td valign="top"> </td> <p>Атрибуту <b>content </b> можно присвоить значение <b>"0" <meta http-equiv="Expires" content="0"> </b> в этом случае страница всегда будет загружаться с сервера.</p> <p>И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. - не искушайте судьбу..</p> <p> <b><meta http-equiv="pragma" content="no-cache"> </b></p> <p>А такая запись вовсе запретит браузеру кэшировать данную страницу.</p> <h2>Команды для робота</h2> <p> <b><meta name="robots" content="Index,follow"> </b></p> <p>Данный мета тег предназначен для подачи поисковому роботу той или иной команды.</p> <p>Список возможных команд роботу:</p> <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> - индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)</li><li><b>None </b> - не индексировать страницу и не прослеживать гиперссылки на странице</li> </ul><h2>Автоматический переход на другую страницу</h2> <p> <b><meta content="10; URL=http://www.mysite/index.html"> </b></p> <p>Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:</p> <p> <html> <br> <head> <br> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <br><b><meta content="10; URL=http://www.mysite/index.html"> </b> <br> <title>Переадресация



Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:
http://www.mysite.ru/
Нажмите здесь для того чтобы выполнить переход немедленно.
Приносим извинения за доставленные неудобства.


Разберём и осмыслим строчку из примера:

meta - Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content="10; - обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html" - адрес новой/другой страницы на которую следует перейти.

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

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

Эффекты при переходе по ссылке


Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

  • Page-Enter - Эффект появления страницы
  • Page- Exit - Эффект исчезновения страницы

В которых:

  • Duration - время действия эффекта в секундах
  • Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
Номер Описание эффекта Номер Описание эффекта
0 Прямоугольники внутрь 12 Растворение
1 Прямоугольники наружу 13 Вертикальная панорама внутрь
2 Круг внутрь 14 Вертикальная панорама наружу
3 Круг наружу 15 Горизонтальная панорама внутрь
4 Наплыв наверх 16 Горизонтальная панорама наружу
5 Наплыв вниз 17 Уголки влево - вниз
6 Наплыв вправо 18 Уголки влево - вверх
7 Наплыв влево 19 Уголки вправо – вниз
8 Вертикальные жалюзи 20 Уголки вправо – вверх
9 Горизонтальные жалюзи 21 Случайные горизонтальные полосы
10 Шажки горизонтальные 22 Случайные вертикальные полосы
11 Шажки вертикальные 23 Случайный выбор эффекта

Файл page1.html





Эффекты перехода страниц



На заметку:


Эффекты перехода с одной страницы на другую работают не во всех браузерах.




"Перейти"


Файл page2.html





Эффекты перехода страниц



На заметку:


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


Нажмите на "Перейти" чтобы перейти к следующей странице
и оценить эффект перехода от одной странице к другой.


"Перейти"


    Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..

    Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода "презентации" слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему "Откинетесь на спинку кресла и расслабьтесь..":) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт "в свои руки" или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!



В продолжение темы:
Android

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