Після створення сайту та наповнення його всім необхідним, сайт потребує перевірки помилок. Щоб знайти помилки написання в html і css вам допоможе валідатор W3 World Wide Web Consortium, що у перекладі: Консорціум Всесвітньої Павутини. Він знаходить всі помилки і вказує, де вони знаходяться, так само пропонує варіанти їх усунення.

Навіщо виправляти код Валідатором W3C

Насправді плюсів від цього не багато і всі вони умовні, але, на жаль, кожен сайт повинен мати мінімальну кількість помилок в ідеалі жодної. Що б ви вирішили, чи потрібно вам це, ось його плюси:

Підвищиться швидкість завантаження сторінки, але трохи це навіть не буде помітно.
У кожному браузері сайт відображатиметься однаково.
Коли сайт додають до каталогу, звертають увагу на грамотність написання html і css.

Плюсів небагато, але виправити помилки html та cssза допомогою валідатора W3C варто!

Як виправляти помилки Валідатором

Принцип виправлення помилок валідатором не складний і кожен зможе впоратися із цим! Переходимо за посиланням на , якщо важко зрозуміти англійську, раджу користуватися перекладачем, або користуєтеся цим, Що покаже російською вигляд помилок. Розглянемо приклад виправлення валідатором:

1.Набираємо в поле ім'я вашого сайту повністю.

2.У списку починаємо дивитися де і яка помилка і що потрібно для її усунення.

Як видно на картинки, моя помилка на засланні, цю проблему я знайшов у плагіні share buttons. Часто доводиться копатися у всіх файлах, щоб знайти помилку.

3.Додаємо елемент у рядок, де була знайдена помилка і перевіряєте валідатором знову.
Якщо помилка виправлена, це добре. Якщо ні, то доведеться шукати далі.

Перевірка веб-коду на валідність – це перевірка його на відповідність стандартам та сертифікатам 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. Це дуже зручно. Достатньо поглянути на колір ярлика програми, щоб зрозуміти, чи є проблеми в відкритому документі.
Залежно від результатів перевірки, колір значка може бути зеленим, жовтим або червоним, що означає:
зелений - "немає помилок", все "ОК"
жовтий – «немає помилок, але є попередження»
червоний - «є помилки»

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

Всім-всім привіт!

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

Одним із таких сервісів є валідатор validator.w3.org, він же, напевно, і найкращий. Він повністю англійською, тому у деяких можуть виникнути проблеми під час роботи, але Ви не лякайтеся: валідатор покаже Вам і номер рядка, і помилку.

Валідний код – це код, який відповідає всім стандартам.

Для уроку Вам знадобиться наступний матеріал:

Вищезгаданий онлайн-сервіс проводить перевірку HTML-коду онлайн на всьому сайті повністю. Вам потрібно просто вказати домен свого сайту та натиснути кнопку "Check", так Ви запустите перевірку HTML-коду сайту.

Також валідатор надає одну дуже цікаву можливість - перевірка файлів сайту локального комп'ютера. На мій погляд, цей інструмент стане в нагоді тим, хто робить сайти на замовлення. Перед здачею замовлення потрібно все перевірити ще раз, адже хочеться, щоб твоєю роботою були завжди були задоволені. Перевірити файли можна, перейшовши на вкладку “Validate by File Upload”:

Як виправити помилки в HTML-коді?

Сервіс Validator W3c вказав мені на дві помилки та зробив 8 попереджень. Спробую виправити їх і за одне покажу Вам як це робиться.

Виправляємо помилку “Element style no allowed as child of element div in this context. (Suppressing further errors від цього subtree.)”. Ця помилка говорить мені про те, що в HTML-коді, а саме в тезі

прописувати стилі не потрібно. Отже, стилі, які прописані в даному блоці

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

Валідатор також вказує, де саме знаходиться помилка:

Таким чином можна знайти та виправити помилки HTML коду. Але сайти складаються не тільки з коду розмітки, але ще CSS, тому проводимо ще й перевірку каскадних таблиць стилів веб-ресурсу.

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

У валідаторі W3c також можна перевірити CSS-код на валідність. Зробити це можна за цим посиланням. Принцип роботи той самий: вказуєте URL-сайту, або вибираєте файл на комп'ютері і натискаєте кнопку “Перевірити”.

На відміну від того ж валідатора HTML, валідатор CSS російською.

Помилки та попередження CSS

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

У моєму випадку більшість попереджень з 281 – це CSS-властивості для нормального відображення в різних браузерах:

Сервіс позиціонує такі теги, як "невідоме розширення постачальника". Тому якщо під час перевірки своїх CSS-файлів, Ви бачите велику кількість таких помилок, то не лякайтеся. Все нормально.

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

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

Сподіваюся, що уроки, які виходили протягом цього тижня, були для Вас корисними та допомогли у вирішенні певних проблем.

Ну а зараз, до побачення!

Попередня стаття
Наступна стаття

В одній із минулих статей я розповідав про . Однак, не всі знають, що крім валідатора для HTML, є валідатор та для CSS.

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

І, нарешті, зважаючи на взагалі рідкісне дотримання валідності, валідний код завжди викликає повагу, що важливо, якщо Ви займаєтеся цим професійно.

Щоб перевірити валідність CSS, треба скористатися ось цим W3-сервісом: http://jigsaw.w3.org/css-validator/ .

Я відразу скажу, що на відміну від HTMLзробити 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-коду. Тому повторюватись тут не будемо і на цьому закінчимо розгляд перевірок на валідацію.

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

А, займемося цим відразу після Новорічних свят.

І на завершення, можна всіх привітати з наступаючим Новим роком! І побажати у Новому році здоров'я, кохання, радості, добробуту та, звичайно, великих успіхів у створенні свого власного сайту для можливості успішної роботи в інтернеті!