нужно перенести в файл style.css и все.

Валидатор также указывает, где именно находиться ошибка:

Таким образом можно найти и исправить ошибки HTML кода. Но сайты состоят не только из кода разметки, но еще и CSS, поэтому проводим еще и проверку каскадных таблиц стилей веб-ресурса.

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

В валидаторе W3c также можно проверить CSS-код на валидность. Сделать это можно по этой ссылке . Принцип работы все тот же: указываете URL-сайта, либо выбираете файл на компьютере и нажимаете на кнопку “Проверить”.

В отличии от того же валидатора HTML, валидатор CSS на русском.

Ошибки и предупреждения CSS

При проверке CSS кода на валидность, сервис выдает большое количество ошибок и предупреждений. У меня набралось 23 ошибки и аж 281 предупреждение. На первый взгляд может показаться, что это очень много и может даже напугать, однако большинство из указанных ошибок и предупреждений показываются только из-за того, что сервис не знает определенных свойств, которые применяются для разных браузеров.

В моем случае, большинство предупреждений из 281 – это CSS-свойства для нормального отображения в различных браузерах:

Сервис позиционирует подобные теги, как “неизвестное расширение поставщика”. Поэтому если при проверке своих CSS-файлов, Вы видите большое количество таких ошибок, то не пугайтесь. Все нормально.

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

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

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

Ну а сейчас, до свидания!

Предыдущая статья
Следующая статья

2016-12-29

Оживляем кнопки и проверяем сайт на валидность кода HTML и CSS

Здравствуйте уважаемый посетитель!

Сегодня рассмотрим на примере созданной веб-страницы как можно проверить сайт на валидность, а именно, на соответствие установленным спецификациям языков HTML и CSS.

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

• Делаем кнопки объемными
• Делаем кнопки интерактивными
• Нужна ли валидация
• Как проверять на валидность HTML-код
• Как проверять на валидность CSS-код
• Исходные файлы сайта

Делаем кнопки объемными

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

Ниже показан фрагмент сайдбара с такими кнопками.

Для того, чтобы кнопки "оживить" сначала придадим им с помощью стилей CSS некоторую объемность. И сделаем это с помощью свойства линейного градиента, которое ранее уже использовалось при оформлении блоков ротатора, поиска и подписки.

Значения линейного градиента определим следующим образом:

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

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

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

3. И последнее, что нужно сделать для назначения свойств градиента, это определить более светлый цвет по сравнению с основным, который будет окрашивать кнопки в верхней части. Делается это аналогичным образом, как и при определении начального цвета градиента. В данном случае значение этого цвета примем за "b88686".

3. На основании полученных данных добавим линейный градиент к ранее сформированным свойствам CSS кнопок.

input: {

height:30px;

margin-bottom:10px;

border-radius:5px;

background:#a76d6d;

text-align:center;

font-weight:bold;

color:#fff;

float:right;

background-image

Можно отметить, что при определении крайних цветов здесь не указаны стоп-позиции, так как при значениях 0% и 100% это делать необязательно.

Теперь, обновим браузер и посмотрим на результат.

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

Делаем кнопки интерактивными

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

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

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

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

CSS-код после соответствующих дополнений примет вид.

input: {

height:30px;

margin-bottom:10px;

border-radius:5px;

background:#a76d6d;

text-align:center;

font-weight:bold;

color:#fff;

float:right;

background-image:linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

box-shadow:2px 2px 4px 0px #422a2a;

border-width:2px;

border-style:solid;

border-color:#ddbebe #241616 #241616 #ddbebe;

Здесь можно отметить, что бордюры представлены комбинацией свойств, определяющих толщину (border-width со значением 2px ), стиль (border-style ) со значением, определяющим сплошную рамку и цвета (border-color ) по каждой из четырех сторон.

Обновим браузер и посмотрим как теперь будут выглядеть кнопки.

Как видно, кнопки в этом состоянии как будто приподнялись.

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

Код CSS для активного состояния кнопок примет следующий вид.

input: hover {

box-shadow:none;

border-color:#a76d6d #a76d6d #a76d6d #a76d6d;

В этом случае бордюрам снова изменим цвет и добавим тень, только в этом случае она будет внутренней и без смещения. Селектор псевдо-класса также изменится на :active , соответствующий нажатому состоянию.

Код CSS для нажатого состояния будет следующим.

input: active {

box-shadow:0px 0px 7px 2px #422a2a inset;

border-color:#777 #fff #fff #777;

Ниже для сравнения показана кнопка "Поиск", где хорошо видно, как она меняет свой вид в зависимости от состояния.

Рис.8 Пассивное состояние

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

Нужна ли валидация

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

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

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

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

А теперь перейдем к непосредственной проверке валидности кодов, сначала HTML, затем CSS.

Как проверять на валидность HTML-код

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

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

Для проверки кода HTML достаточно перейти по ссылке https://validator.w3.org/ , где откроется страница с полем ввода адреса проверяемой страницы.

скриншот 51

После нажатия кнопки "Check" получим результат проверки.

В данном случае код HTML валидный, но имеется рекомендация использовать атрибут lang со значением "ru" , так как на странице используется русский язык.

Атрибут lang предназначен для правильного отображения браузерами некоторых символов, например кавычек, в зависимости от используемого языка. Поэтому, совсем нелишним будет нам его включить в код HTML. И сделаем это в теге html для того, чтобы этот атрибут смог действовать на весь документ.

Как сделать это дополнение, показано в следующей таблице.

"ru" >

. . .

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

Таким способом мы сделали проверку файла размещенного в интернете. Но когда страница еще не размещена в сети, то можно проверить ее валидность другими способами, это либо загрузить файл используя кнопку обзор, либо воспользоваться формой для непосредственного копирования HTML-кода.

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

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

Как проверять на валидность CSS-код

Мы рассмотрели проверку валидации HTML-кода. Проверка кода CSS проходит в точно таком же порядке. Только при этом нужно использовать другую страницу валидатора, которая для такого случая находится по адресу http://jigsaw.w3.org/css-validator/ .

Откроем ее и также как в предыдущий раз введем адрес проверяемой страницы, после чего нажмем кнопку "Check".

Результат этой проверки приведен на скриншоте.

Как видно, наш CSS-код полностью соответствует спецификации без каких-либо ошибок, что является хорошим результатом.

Порядок остальных способов проверки для этого случая полностью совпадает с подобными проверками для HTML-кода. Поэтому повторяться здесь не будем и на этом закончим рассмотрение проверок на валидацию.

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

А, займемся мы этим сразу после Новогодних праздников.

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

Исходные файлы сайта

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

В одной из прошлых статей я рассказывал о . Однако, не все знают, что помимо валидатора для HTML , есть валидатор и для CSS .

Значение валидности CSS такое же, как и у HTML: почти не имеет значения. Аналогично с HTML , если Вы будете писать невалидный CSS , то проблем не возникнет (если, конечно, не будет грубых ошибок), однако, валидный код - это всегда хорошо. Такой код чёткий и структурированный, он легко поддаётся пониманию, что также немаловажно, особенно при исправлении, и особенно другими людьми. Также валидность CSS ускоряет процесс обработки, а, следовательно, и скорость загрузки страниц.

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

Чтобы проверить валидность CSS , надо воспользоваться вот этим W3-сервисом : http://jigsaw.w3.org/css-validator/ .

Я сразу скажу, что в отличии от HTML , сделать CSS валидным гораздо проще, поскольку там в основном только грубые ошибки, за исключением , которые лучше вообще избегать.

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

Проверка веб-кода на валидность - это проверка его на соответствие стандартам и сертификатам W3C.
W3C (Консорциум Всемирной паутины) - это технические законодатели Сети, которые разрабатывают стандарты и правила для написания кода. Сертификаты и стандарты W3C обязательны к исполнению для всех, кто работает в Сети. Единые стандарты в правописании кода нужны для того, чтобы все Сетевые приложения общались в едином языковом пространстве, на стандартных языках, и понимали друг друга во время работы с веб-документами.
W3C не только создает Сетевые стандарты, но и активно способствует в их соблюдении.
W3C имеет онлайн-сервисы для проверки кода HTML/XHTML и CSS на валидность.
Проверить код на соответствие стандартам W3C при помощи валидаторов W3C - лучший выход.

Бесплатные онлайн-сервисы от W3C для проверки кода на валидность.
Валидаторы от W3C имеют интуитивно понятный интерфейс. Работать с ними легко и просто.
Сервисы дают возможность проводить проверку в трех режимах и имеют, соответственно, всего три кнопки:
Проверить URL
(для проверки нужно указать адрес любой страницы сайта, доступного в Сети)
Проверить загруженный файл
(для проверки нужно указать путь к проверяемому файлу)
Проверить набранный текст
(для проверки нужно скопировать и вставить в окно валидатора проверяемый код)

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

Как пользоваться онлайн-валидаторами от W3C .
обращаемся к валидатору, по адресу:
(http://validator.w3.org/ - для проверки HTML или XHTML
http://jigsaw.w3.org/css-validator/ - для проверки CSS)
в открывшемся окне валидатора выбираем один из трех способов проверки
(url-адрес страницы сайта, локальный файл или набранный текст)
переходим на соответствующую вкладку
указываем объект проверки
(вводим url-адрес проверяемой веб-страницы,
либо путь к файлу на локальном компьютере,
либо вставляем проверяемый код, соответственно)
жмем кнопку «Проверить» и смотрим на результат проверки

Сервисы от W3C проверяют код на валидность и сразу указывают на ошибки, буде таковы имеются. Каждая ошибка будет прокомментирована. Комментарии, к сожалению, на инглиш. Так что, Google-переводчик - в помощь.Остается только, при необходимости, исправить код и снова проверить его на соответствие.
Валидаторы от W3C полностью бесплатны и автоматизированы. Поэтому, долбить их своей работой над ошибками можно долго и безнаказанно. Для этого, эти сервисы и созданы.

Нормальная альтернатива валидаторам W3C.
Кроме онлайновых серваков W3C по проверке веб-кода, очень хороший результат дает расширение HTML Validator для браузера Mozilla Firefox. Наличие такого дополнения в браузере облегчает работу веб-мастера и лишний раз доказывает, что Mozilla Firefox - «рульный» браузер.
Скачать расширение для мазилки можно здесь: http://users.skynet.be/mgueury/mozilla/

Установить расширение можно так:
- Запускаем Firefox.
Дальше: Меню - Инструменты - Дополнения - Расширения.
И, просто перетаскиваем мышью загруженный файл (расширение xpi) в открывшееся окно.
После этого, расширение установится автоматически.

или (второй способ):
- Запускаем Firefox.
Дальше: Меню - Файл - Открыть файл - указать путь к скачанному файлу.
После этого, расширение, опять-таки, установится автоматически.

После завершения установки - нужно будет перезапустить браузер.
При перезапуске - появится окно с выбором способа проверки веб-страниц:
"HTML Tidy", или "SGML Parser", или "Serial"
Выбираем способ "SGML Parser", как наиболее удобный и приемлемый вариант. Жмем соответствующую кнопочку.Теперь, в окне браузера, будет отображаться ярлык-значок дополнения, а рядом с ним - кнопка меню настройки дополнения.
У меня - вверху и справа:

HTML Validator для браузера Mozilla Firefox работает полностью в автоматическом режиме. Ему не нужно показывать, что проверять. Он проверяет все документы, которые будут открыты в Mozilla Firefox. Это очень удобно. Достаточно взглянуть на цвет ярлычка программы, чтобы понять, есть или нет проблемы в открытом документе.
В зависимости от результатов проверки, цвет значка может быть зеленый, желтый или красный, что обозначает следующее:
зеленый - «нет ошибок», все «ОК»
желтый - «нет ошибок, но есть предупреждения»
красный - «есть ошибки»

При клике по ярлычку будет открываться окно, содержащее исходный код просматриваемой страницы с пояснения и комментариями к ошибкам и предупреждениям, если таковы будут иметь место.
Примерно, такое.

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

Разработчиком языка стилей CSS является Консорциум Всемирной паутины (World Wide Web Consortium, сокращённо W3C) — это организация, которая разрабатывает и внедряет технологические стандарты в интернете.

CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) - это формальный язык, предназначенный для описания внешнего вида документа с использованием языка разметки.

Для проверки стилей существует очень полезный сервис, который предлагает Консорциум W3C. Давайте перейдём на главную страницу сервиса CSS Validation Service и проверим валидность CSS.

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

Здесь нас ждёт приятное удивление, всё на русском языке! Кроме того, есть возможность выбора любого другого языка из более 20 доступных. На странице расположены вкладки, предлагающие выбрать вариант проверки:

1. Проверить по URI - достаточно указать адрес страницы;
2. Проверить загруженный файл — требуется выбрать локальный файл CSS;
3. Проверить набранный текст — нужно ввести код CSS для проверки на корректность.

Дополнительные возможности позволяют указывать параметры расширенной проверки. Привожу краткую справку по каждому из них:

• Профиль — перечисляет все особенности и возможности реализации на конкретной платформе. Выбор по умолчанию соответствует наиболее часто используемому стандарту третьего уровня CSS3.
• Предупреждения — настройка подробности отчётов: все или наиболее важные предупреждения, обычный отчёт, без показа предупреждений. Сервис может выдавать два типа сообщений: ошибки и предупреждения. Если проверяемый CSS не соответствует рекомендации — это ошибка. Предупреждения отличаются от ошибок тем, что не относятся к проблемам выполнения спецификации.
• Среда — указать где применяются стили, например, на портативном устройстве, дисплее, телевизоре или странице для печати. Рекомендуется проверять все среды применения стилей.
• Расширения поставщика — желательно оставить по-умолчанию, есть возможность отображения только ошибок или только предупреждений. Поставщики браузеров иногда реализуют экспериментальные CSS свойства, для их поддержки используются префиксы: -moz- (для Firefox), -webkit- (для Chrome), -ms- (для Internet Explorer), -o- (для Opera) и другие.

Указываю URL адрес, настраиваю дополнительные параметры проверки и нажимаю на кнопку «Проверить» для старта. Ура! Результат проверки CSS: ошибок не обнаружено!

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

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

Обратите внимание, в списке предупреждений приведён номер строки, в которой найдено неизвестное свойство. При обнаружении ошибок вы увидите таблицу со свойством и описанием проблемы. Например, такой результат проверки имеет главная страница Яндекса:

Ниже представлена информация о корректном проверенном CSS. Не спешите его копировать и использовать на своём сайте! Да, в приведённом варианте корректного CSS нет ошибок и свойств, использование которых вызывает предупреждения, код 100% пройдёт полную проверку. Но эффект достигается путём удаления этих свойств, поэтому на сайте могут возникнуть проблемы с отображением или ожидания не совпадут с реальностью.

Данный сервис размещается и обслуживается на сервере W3C, но в то же время не является официальным инструментом проверки CSS.

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

При веб-разработке сайтов обращайтесь к актуальным спецификациям и справочникам по таблицам каскадных стилей. Рекомендую воспользоваться валидатором CSS и проверить свой сайт, делитесь результатами в комментариях!