Оценка сайта и рассылки, подписка на рассылку, статьи по веб-дизайну, полезные скрипты PHP и javascript
Оптимизатор сайта о раскрутке сайта и непоисковой оптимизации

Панель опций Сделать стартовой страницей Панель опций подписаться на RSS-ленту RSS-лента                         
 
.::Реклама::.

www.liex.ru - автоматическое размещение статей с прямыми ссылками
.::Наша кнопка::.
Наша кнопка
Хотите помочь нашему сайту? Установите нашу кнопку на свой сайт.
Получить код
.::Полезная ссылка::.
Лучший редактируюмемый каталог ресурсов
Лучший редактируемый людьми каталог ресурсов Интернета
.::Рекомендуем::.
.::Статистика::.

Статьи

Библиотека веб-мастера - "море" информации по веб-дизайну, которая пополняется посетителями сайта.


Главная :: Библиотека веб-дизайнера :: Вёрстка веб-документа

Вычищаем HTML-код

Автор: Александр Архипов
NeoMoon-Хостинг

В статье я расскажу, как можно контролировать правильность HTML-кода веб- страниц. Вашему вниманию будет представлено несколько инструментов для
проверки и контроля HTML-кода с точки зрения стандарта.

Зачем нужен "правильный" HTML-код?

HTML - это специальный язык разметки для веб-страниц. Этот язык
стандартизован. Значения каждого тега строго определены. Каждый тег имеет
определенные атрибуты. HTML-код страницы интерпретируется браузерами и переводится в изображение веб-страницы, которое видит пользователь.

Теперь представьте, что HTML код страницы содержит ошибки (не соответствует
стандарту). Что в этом случае делать браузеру?

Самый простой вариант - это вывести на экран сообщение об ошибке и все.
Однако пользователь вряд ли будет рад увидеть вместо страницы, на которой
пропущен закрывающийся тег, сообщение об ошибке. Поэтому создатели браузеров пошли другим путем. Браузеры пытаются (в меру своей интеллектуальности) "исправить" некорректный HTML-код.

Вот тут и кроется проблема. Каждый браузер имеет свои правила, по которым он
будет исправлять HTML ошибки на веб-страницах. Поэтому, если на странице есть
ошибки, то существует большая вероятность, что данная страница в разных
браузерах будет выглядеть по-разному.
Более того, если даже он сейчас выглядит одинаково во всех браузерах, это не значит, что так будет всегда. С выходом новой версии какого-либо браузера коррекция HTML ошибок может быть изменена. А вот следование стандартам изменено вряд ли будет.

Если вы хотите, чтобы ваш сайт выглядел одинаково в самых популярных
браузерах, постарайтесь избежать ошибок в HTML коде. Как? Об этом эта статья.

W3C Markup Validation Service

Представляю вашему вниманию классический сервис для проверки синтаксиса HTML от W3C (World Wide Web Consortium). W3C - это специальный консорциум, который разрабатывает и принимает стандарты веб-технологий, такие как HTML или набирающий сейчас популярность XHTML.
Проверить валидность (правильность) HTML кода своей страницы вы можете по
адресу: http://validator.w3.org/
Введите URL страницы, которую вы хотите проверить, и нажмите "Check". После
этого вы получите результаты проверки HTML-кода на странице.

Необходимо сказать, как данный сервис определяет, по какому стандарту
проверять страницу. Каждая веб-страница в самом начале должна содержать
описание типа документа. Это должно выглядеть примерно вот так:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


В данном случае, декларируется, что документ является HTML страницей и создан
он, используя редакцию HTML 4.01.

W3C Validator по этой строке определяет, как нужно проверять данный документ.
Для страницы, содержащей приведенную выше строку, будет использован стандарт HTML в редакции 4.01.

Если вы используете тип документа HTML 4.01, то будьте готовы к
неожиданностям. Например, в классическом HTML нельзя использовать укороченную форму записи тегов (одновременно и открывающийся, и закрывающийся тег).


<meta http-equiv="Content-Type" content="text/xhtml; charset='windows-1251'"/>


Нужно делать вот так:

<meta http-equiv="Content-Type" content="text/xhtml;
charset='windows-1251'"></meta>

Если же вы хотите использовать укороченную форму записи тегов, то вы можете
описать тип вашей страницы, как "расширенный HTML" (XHTML). Этот тип уже
позволяет пользоваться конструкциями вида: <tag attribute="value"/>.

Чтобы объявить тип своего документа как XHTML, необходимо в начало добавить
строку:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Обнаружив такую строку, W3C Validator будет проверять веб-страницу, используя
правила стандарта XHTML.

Но будьте аккуратны. Стандарт XHTML не разрешает отсутствие закрывающегося
тега. То есть, если элемент <BR> является вполне допустимым для HTML, то
XHTML Validator сгенерирует ошибку. Чтобы "удовлетворить" его, необходимо
вместо <BR> использовать <BR />

HTML Validator плагин для Firefox

Недостаток валидатора от W3C - это то, что он работает только для страниц,
уже загруженных на сайт. А как же проверить HTML-код, если проект
отлаживается локально на локальном веб-сервере? Конечно, можно сохранить код веб-страницы в буфер обмена и затем вставить в форму на той же странице:
http://validator.w3.org/ Но... Есть способ лучше.

Совершенно случайно я узнал, что для браузера Firefox есть плагин для
проверки синтаксиса HTML-кода. Этот плагин доступен для скачивания вот здесь:
https://addons.mozilla.org/firefox/249/

После установки этого плагина в статус баре Firefox появится иконка и/или
текст, показывающий, есть ли ошибки на текущей веб-странице. Дважды щелкнув по этой иконке, вы попадете в окно исходного кода страницы с отмеченными
ошибками в нем.

Очевидный плюс этого плагина в том, что вы не должны быть в онлайне, чтобы
проверить HTML-синтаксис ваших страниц. Я рекомендую вам хотя бы попробовать этот инструмент. Лично мне он очень нравится. Очень удобный и функциональный.

Например, можно настроить плагин, чтобы он работал только на определенных
сайтах. Этим вы сбережете время отображения страниц, которые вы не хотите
проверять.
Вы можете спрятать определенные предупреждения, если вы не хотите, чтобы они показывались в статус баре. Например, я отключил предупреждение о том, что в таблице отсутствует атрибут summary. Не знаю, почему этот плагин считает этот
атрибут обязательным. В стандарте HTML я не нашел требования обязательного
присутствия этого атрибута для тега <table>.

Поскольку этот плагин базируется на проекте HTML Tidy, то в нем предусмотрена
опция исправить (tidy) HTML код на странице. Эта опция активируется при
нажатии кнопки: "Clean up the page..." при просмотре исходного кода страницы
в браузере Firefox. После нажатия на эту кнопку открывается диалоговое окно,
где вам предлагатся исправленный вариант вашей страницы.

Выводы

Чем чище HTML-код вашей страницы, тем больше вероятность, что она будет
выглядеть одинаково во всех браузерах.

Существуют различные инструменты для проверки и контроля над правильностью
HTML-кода на странице. Среди них есть как профессиональные инструменты, такие как W3C Validator, которые строго проверяют код, выводя все, даже малейшие огрехи, так и простые в использовании, интуитивно понятные, как плагин для Firefox - HTML Validator.

Тема проверки правильности HTML-кода настолько обширна, что объем статьи не
позволяет описать ее полностью. Однако, я надеюсь, что эта статья укажет вам
правильное направление для дальнейших исследований.

Дата публикации: 28.02.07

Копирование информации допустимо только при наличии всех действующих ссылок.

Мнение администрации сайта может не совпадать с мнением автора статьи.


В этом списке может оказаться и Ваша статья!

Если Ваша статья относится к тематике данного сайта, то Вы можете прислать её нам, заполнив специальную веб-форму на сайте в разделе " Статьи" или отправив её на наш e-mail: .

Ваша статья будет рассмотрена администрацией сайта, и, если она удовлетворяет нашим требованиям, будет опубликована на нашем сайте в течение 1 - 5 дней. (1-2 дня - при платной регистрации).

Мы будем Вам очень благодарны. Ссылка на Вас гарантируется!


Что почитать ещё?

  1)Подсказки по работе в системе Google Adsense;
2)Как проиндексировать сайт в поисковой базе Google менее чем за 24 часа?;
3)Доменные имена. Как выбрать хорошее имя для своего сайта;
4)SEO-специалист делится своими секретами;
5)Двадцать шесть способов получения качественного трафика на ваш сайт.

Главная :: Библиотека веб-дизайнера :: Вёрстка веб-документа

 

"Веб-дизайн - это просто! Теория и практика"
Эта рассылка создана специально для тех, кто не хочет иметь проблем с созданием, поддержкой и раскруткой своего сайта. Полезные и интересные статьи по веб-дизайну в Ваш почтовый ящик. Мы ответим на все ваши вопросы, связанные с разработкой и поддержкой сайта;

RSS-канал
Все свежие новости об обновлениях на сайте, а также новости на тему веб-дизайна, хостинга, web-программирования и других тем тем, связанных с веб-дизайном. Если вы следите за нужной информацией, то получите информацию первым через наш RSS-канал, даже не заходя на наш веб-сайт.
Экономьте Ваше время с Vitaweb!

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

Реклама:
Рекомендуем кунилингус и куни порно на порно-копилке.инфо. 


Связь с автором сайта:

.::Поиск::.
.::Новости::.
  
05.08.2013
Новое онлайн интервью: вопросы Роману Ширяеву (Пузату);

04.07.2013
Теперь вы можете снова подать заявку на БЕСПЛАТНУЮ оценку сайта;

15.04.2013
Социальная сеть: опыт создания высоконагруженного проекта Подробнее.


.::Опрос::.
"На какой язык вы ориентируетесь при создании сайта? "

PHP;
PERL;
C;
ASP;
AJAX;
JAVA;
Python;
Javascript/Vbscript;
"Чистый" HTML.

.::Реклама::.



RotaPost
Копирование информации с этого сайта на другие ресурсы разрешено только при наличии видимой ссылки на наш сайт.
Электронная почта редактора сайта: audit(@)vitaweb.pp.ru (уберите скобки). 2005-2014 год. 18+.