Все для DataLife Engine / Все для DLE / Разная информация / Проверка HTML кода на валидность сайтов DLE

Проверка HTML кода на валидность сайтов DLE

World Wide Web Consortium, W3C
Проверка HTML кода на валидность сайтов DLE. Проверка CSS кода шаблона дле на валидность официальном сервисом W3C

Приветствую всех! Сегодня речь пойдет о HTML и CSS коде, точнее об проверки валидности. Валидность – это соответствие кода определенным нормам. Задает нам эти нормы Консорциум Всемирной паутины (от англ. World Wide Web Consortium, W3C).

Очень важно проверить сайт на ошибки 404, установить идеальный и простой шаблон Что значит ошибка 404, ошибка страница, 404, прочитать можно по следующей ссылке. Как исправить 404 ошибка сайт недоступен?


Проверка HTML кода на валидность сайтов DLE. Проверка CSS кода шаблона дле на валидность в официальном сервисе W3C


World Wide Web Consortium, W3C
Консорциум устанавливает стандарты всемирной паутины и задачей разработчиков программного обеспечения, в частности, интернет-браузеров, советует внедрять эти стандарты в свои разработки. К сожалению, не все они придерживаются этих норм.


Проверка HTML кода на валидность официальным сервисом W3C

Официальный ресурс W3C предоставляет вебмастерам очень полезные сервисы, для выявления ошибок HTML и CSS коде, является валидатор. Чтобы попасть на главную страницу сервиса Validate HTML W3C перейдите по ссылке.

Главная страница HTML кода на валидность официальном сервисом W3C
Выберите наилучший вариант проверки для вашего ресурса из трех вкладок

Validate by URI – проверка по URL-адресу;
Validate by File Upload – проверка загружаемого файла;
Validate by Direct Input – вставка непосредственно кода и его проверка.

Выбрав любой из вариантов нажимаем Check откроется следующая страница. Для примера я проверил главную страницу Яндекса и вот что получил:


Как видите, сервис показал что имеется 38 ошибок и 8 предупреждений. Соблюдать абсолютно все стандарты действительно сложно, тем более для такого крупного портала. Ниже будет приведен список ошибок и предупреждений с подробным их описанием и рекомендациями по их исправлению:
Ошибки и предупреждения валидатора все на английском, но если знаете сам язык HTML, то поймете и суть, а если нет, то можно всегда найти информацию в поиске или воспользуйтесь каким нибудь форумом, связанным с сайтостроением и веб-дизайном. Ответы непременно найдутся ;) .
Настройки проверки HTML
На странице Вы найдете настройки проверки, которые могут очень пригодиться:

Show Source – отображает исходный код;
Show Outline – отображает строку в которой присутствует ошибка;
Validate error pages – проверяет страницы, которые выдают ошибку, например 404 – страница не существует и т.п.;
Verbose Output – этот параметр, если честно, я не знаю что означает, если знаете – поделитесь в комментариях, буду очень благодарен;
List Messages Sequentially – выводит ошибки и предупреждения обычным списком;
Group Error Messages by Type – группирует ошибки и предупреждения по одинаковым признакам;
Clean up Markup with HTML Tidy – отображение правильного кода, исправленного программой HTML Tidy. Если решите его использовать в своем коде, то будьте осторожны, т.к. HTML Tidy не является разработкой W3C и он не предоставляет гарантий по его работе.

Помните в методах исправления ошибок для разных CMS (системы управления сайтом) нету, т.к. HTML везде одинаковый. Другое дело если ошибки в самом движке, в Вашем случае на DataLife Engine DLE, т.к. не всегда их удается исправить без потери работоспособности. CMS изначально может быть построена правильно, и единственное что может вызвать ошибки, так это всевозможные плагины и сторонний код (баннеры, счетчики). Иногда приходится чем то жертвовать и отказываться.
Для успешного продвижения ресурса важно придерживаться стандартов W3C, но многочисленные плагины в большинстве своем делают свое «черное» дело и все портят, время покажет!

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

Проверка CSS на валидность официальном сервисом W3C


Каскадная таблица стилей CSS (от англ. Cascading Style Sheets) – специальная технология, позволяющая описывать внешний вид документа языком разметки. С помощью CSS можно легко выполнить верстку, не загромождая код самого документа, что значительно ускоряет скорость загрузки.


Очень важно правильность таблиц стилей для любого сайта, поэтому для проверки существует полезный сервис, который предоставляет W3C.
Что дает проверка CSS кода?
К примеру у вашего шаблона на дле в CSS стилях прописан запрос на загрузку графического изображения, но данного графического изображения (картинки) в папке нету. В результате, ваш сайт будет зависать при каждой загрузке страницы, что не очень хорошо. А, что если таких картинок куча? Сайт, будет ужасно долго загружаться.
Бывает также особенно с бесплатными шаблонами дле и РИПами в CSS коде прописаны настройки не относящие не к одному файлу шаблона dle, это тоже является грубой ошибкой и лишним мусором.

Чтобы избежать таких проблем, советую воспользоваться данным сервисом для поиска и исправления ошибок.

Перейдем на предлагаемый сервис для проверки валидность CSS и проверим для примера главную страницу Яндекса. Пройдя по ссылке на страницу валидатора CSS откроется новое окно, которое будет выглядеть следующим образом:


В отличие от HTML W3C нас ждет приятное удивление! Все на русском языке! Кроме того, есть возможность выбора языка из 18 доступных. Внизу страницы имеется примечание, видим примечание о необходимости проверки кода HTML на валидность. В окне присутствуют вкладки, предлагающие нам на выбор что необходимо проверить:
URI
Загруженный файл
Набранный текст

Только вместе, оба абсолютно правильных кода дают гарантию корректности документа. Продолжаем экспериментировать с Яндексом и проверим его на соответствие нормам сети интернета. Для этого в текстовую строку ввожу адрес главной страницы и нажимаю на кнопку «Проверить». В ответ получаю следующее:

Результаты проверки CSS

И снова Яндексу необходимо поработать над ошибками :winked: . Из первых строк таблицы видно, что ошибки в основном связаны с параметром border-radius, отвечающим за скругление углов, что не поддерживает стандарт CSS2.1, который используется в конкретном случае. На самом деле это не критично, просто не поддерживающие такие параметры браузеры не будут следовать этому правилу, а отобразят прямые углы.

Настроек практически нет, сервис предлагает нам сгенерированный валидный код таблицы стилей, который будет отображен после списка всех ошибок и предупреждений:

Информация о корректном CSS

Правильно изучив, сравнив с исходным вариантом, можно выявить методы исправления ошибок и предупреждений, а после принять меры по их устранению.
Внимание! Стили CSS кода engine.css шаблона Dle управляет оформлением модулей и всплывающими подсказками движка DataLife Engine, поэтому удалять что-либо стоит крайне осторожно. Иногда бывает такого файла нету в шаблоне, дизайнер верстки переименовал файл или соединил в один файл стиля CSS, что естественно не совсем хорошо и удобно.

Если вы успешно прошли проверку, сайт не содержит ошибок в знак подтверждения соответствия правилам вы можете разместить баннер. Баннер не является обязательным, на усмотрение вебмастера. Предлагаю и Вам воспользоваться этим сервисом и поделиться результатами в комментариях!
Валидаторы - Проверка сайтов на ошибки
Наш сайт dle9.com предлагает ознакомится с полезной статьей
  • 100
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent