Подписка
Email
Fb
RSS
Twitter
Email

Курс верстки — валидация страницы

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

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

Что такое валидация страницы

Начнем с того, что же вообще такое валидация страницы. Валидация страницы — это проверка ее HTML и CSS кода на соответствие веб стандартам, а так же выбранному doctype.  Стандарты, о которых идет речь, прописаны W3C и все современные браузеры стараются им следовать.

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

Валидная верстка — это обычно «чистый», красивый код, который ко всему прочему «нравится» поисковым системам. Поэтому проверка кода на валидность — обязательный этап при верстке сайтов.

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

Как проверить сайт на валидность? Простейший способ проверить сайт на соблюдение веб-стандартов, — это воспользоваться онлайн валидатором. Проверка валидности html возможна по адресу: http://validator.w3.org/. Обязательно пользуйтесь данным сервисом, чтобы найти ошибки в своем HTML коде.

Валидация css осуществляется при помощи CSS-валидатора, расположенного по адресу: http://jigsaw.w3.org/css-validator/.

Более подробно работу с данными сервисами показал на видео, приведенном чуть ниже.

Так же проверка кода на валидность может быть проведена при помощи плагинов для проверки валидности кода. Мне, например, удобнее пользоваться именно ими, так как они позволяют проверять валидность прямо «на ходу».

Вот сам видео урок:

На этом наш курс верстки сайтов закончен. Если вы обнаружили какие-то ошибки или у вас возникли вопросы, пишите в комментариях.

Архив с темой можете скачать здесь.

И еще, подписывайтесь на обновления блога, так как впереди будет еще много разных уроков на тему сайтостроительства, продвижения сайтов и заработка на них.

Вы можете оставить комментарий.

42 комментариев к записи “Курс верстки — валидация страницы”

  1. Андрей:

    Какой будет следующий урок?

  2. fantomaxx:

    Очень интересные и полезные материалы. Спасибо! Но я так понял верстка шла с прицелом на WP. Так будет ли рассказано как сделать шаблон именно для WP ? Очень жду именно этой информации.

  3. trampdog:

    Привет. Разьясни пожалуйста вопрос. Шаблоны WP написаны в PHP. А на html они тоже могут быть, и работать со сторонними плагинами, или необходимо делить html на отдельные файлы php? 

    • Шаблон должен обязательно содержать несколько основных php файлов. Каждый php файл — это та же html страница, но со вставками php кода, необходимого для работы. Если сделать просто html страницы, то работать не будет.

  4. Кирилл:

    Можно задать вопрос? Прошел проверку на CSS и мне выдало "

    underline не является значением width :

    underline

    "-что это значит? 

  5. underline — значение свойства text-decoration. Видимо вы прописали его для свойства width.

  6. MuradShinoda:

    будет ли урок о подключение шаблона на wordpress который вы сделали

    • Тот шаблон, что мы делали еще не WordPress шаблон, а просто html+css. Его еще нужно верстать под WordPress — это быстро не объяснишь, так что пока в данном курсе будем использовать готовые шаблоны, наверное, и покажу как можно в них что-то поменять.

  7. Sep:

    Добрый день, закончил обучение по вашему курсу верстки, спасибо за проеделанную роботу :) Вот хотелось узнать — что дальше можно осовить? В планах научится делать сайты «под ключ»

  8. Антон:

    Денис добрый день, я бы хотел с вами связатся, если не затруднит не могли бы ответить мне на емейл muzikstysle@mail.ru

  9. Здравствуйте! Тема действительно полезная. на днях сам решил заняться чисткой кода, но дается это с трудом.

  10. Дмитрий:

    Привет.Пропустил код через W3C валидатор. Показало только то, что в картинках alt не дописан. Открываю у себя на компе с win7 все вроде нормально, а попробывал на XP и все блоки вперемешку. В чем может быть проблема? 

    • От того, в какой системе открываете — не зависит. Зависит от браузера, его версии.

      • Дмитрий:

        Стоит гугл хром на обеиз машинах.

        • Дмитрий:

          Начал проверять в разных браузерах теперь. В Safari показались те же проблемы... Попробую сейчас с ними разобраться. Скорее всего на том компе стоит какой-то старый гугл хром.И ещё. Можете посоветовать хорошую литературу по html и CSS, что-то ещё, что пригодилось бы знать. А то чем дальше иду по вашему курсу и пытаюсь сделать все сам, тем больше появляется вопросов. А спрашивать каждый уже стыдно :)

  11. Ирина:

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

  12. Денис:

    для начала спасибо за курсы! ну и хочу поделится моей проблемой которая возможно у кого то возникнет при проверке html на валидность. ввел код и он выдал такую ошибку:  <input type="text" name="s" id="s" class="search_text"></input> <input type="submit" value class="go"></input>красным я отметил ошибку которая была у меня найдена. решил её простым способомдальше продемонстрирую как<input type="text" name="s" id="s" class="search_text" />

     <input type="submit" value class="go" />

  13. timebox:

    Привет Денис) Всё довольно подробно, молодец) А почему сам на валидацию не проверяешь? Из-за значка копирайта внизу, W3C валидатор вообще отказывается твои страницы проверять, или это так и задумано?

    • Валидацию всегда проверял, когда верстал на заказ — заказчику это важно. На этом же блоге для меня это не принципиально.

      • Доброго времени суток! Денис, так как вы мой «духовный наставник»,( я делала свои первые шаги в веб-мастерстве именно на страницах вашего блога), хочу задать Вам вопрос.Всегда ли важна валидация при создании блога?  Я разместила на WordPress стандартную тему. Когда проверила её на html валидность, валидатор выдал мне несколько ошибок. Насколько принципиально их исправлять?  На что могут повлиять ошибки в коде?

  14. Jay:

    На видео(и у меня тоже) в IE(8) не работает слайдер. Проблема в JS или что-то другое ?

  15. Иван:

    Дорогой  DenWeb, раньше в одном из уроков в начале курса верстка сайта ты говорил о типах сайта — резиновые, эластичные и т.д. А как сделать эластичный сайт, расскажи пожалуйста!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  16. 1:

    Будет-ли курс по верстке этого шаблона под WordPress?  

  17. Joy:

    Добрый день, скажите пожалуйста, как можно потом из этого  сделать шаблон  для WordPress?

  18. sony:

    Здравствуйте DenWeb.ru, спасибо большое за курс,  очень в помощь!!! Именно на вашем уроке я начал понимать что такое верстка сайта!!!   У меня вопрос почему при навигации на ссылки из header_top цвет текста не меняется, в остальных браузерах вроде все нормально, кроме Chrome 

    v 28.0.1500.72 m?

  19. Ксения:

    Здравствуйте, Денис!Большое Вам спасибо за уроки, действительно очень подробно, доскональна и интересно изложено!Всё получилось, но вот при попытке проверить код на валидность вышло огромное число идентичных ошибок... Пишется, что запрещённый код (см. скрин)... Скажите, пожалуйста, чём причина?http://s42.radikal.ru/i096/1307/4f/1b5848b3a74c.png

  20. ВАЛЕНТИНА:

    ЗДРАВСТВУЙТЕ DenWeb , СЛУЧАЙНО НАШЛА ВАШ БЛОГ , СИЖУ ДЕНЬ И НОЧЬ , НАЧИНАЮ ПОТИХОНЬКУ ПОНИМАТЬ , ЧТО К ЧЕМУ , УРОКИ ПРОСТО  ПРЕВОСХОДНЫЕ , ВСЁ ПОНЯТНО , ЗАХОДИЛА В ДРУГИЕ , НО ВСЁ БЫЛО КАК В "ЛЕСУ " .  БЛАГОДАРЮ ВАС ! С НОВЫМ ГОДОМ , УСПЕХОВ ВАМ И МНОГО КЛИЕНТОВ .

  21. Виталий:

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

  22. Проверили сайт на валидность верстки, выдает очень много ошибок. Вы можете помочь их исправить или подскажите кто может помочь?

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

Spam Protection by WP-SpamFree

Яндекс.Метрика