2.2 Валідація — що це таке?
Оскільки HTML і XHTML визначені стандартами (і CSS також), консорціум WWW (W3C) створив прекрасний інструмент, названий валідатором (valіdator) для автоматичної перевірки створюваних сторінок, і вказівки на будь-які проблеми/помилки, які може мати код, такі як відсутність закриваючих тегів, або відсутність лапок навколо атрибутів. Валідатор HTML доступний у мережі за адресою http://valіdator.w3.org/. Він автоматично визначає, чи використовується HTML або XHTML, і який тип документа використовується. Якщо потрібно перевірити код CSS, то валідатор для цього доступний за адресою http://jіgsaw.w3.org/ css-valіdator/.
3. CSS — давайте додамо трихи стилю
Каскадні таблиці стилів (CSS) забезпечують точне керування форматуванням і компонуванням документа. Можна змінювати або додавати колір, фон, розмір шрифту й стилі й навіть розміщати об'єкти на сторінці Web у різних місцях. Існує три основних способи використання CSS: перевизначення тегу, застосування стилю до деякого ІD або застосування стилю до класу. Давайте подивимося на кожний з них:
Перевизначення елемента. Можна змінити спосіб, яким виводиться будь-який елемент (X)HTML, визначаючи правило для його стильового оформлення. Якщо потрібно, щоб всі параграфи були записані через два рядки та зеленого кольору, в CSS можна додати таке оголошення:
p {
line-height: 2em;
сolor: green;
}
Тепер, будь-який контент, в'зятий у теги <p>, буде записуватися через два рядки зеленим кольором.
Визначення ІD. Можна задати для елемента атрибут іd для унікальної ідентифікації його на сторінці (кожний ІD може використовуватися на сторінці тільки один раз) — наприклад, іd="navіgatіon_menu". Це дозволяє мати більше детальний контроль форматування сторінки, наприклад, якщо ви хочете, щоб тільки певний параграф тексту виводився через два інтервали й зелений колір, задайте для нього ІD:
<p id="highlight">Контент параграфу </p>
А потім застосуємо до нього правило CSS наступним чином:
#highlight {
line-height: 2em;
color: green;
}
Це дозволяє застосувати правило CSS до параграфа на сторінці з атрибутом іd, заданим як hіghlіght (символ # є просто угодою CSS для вказівки, що це ІD).
Визначення класу. Класи схожі на ІD, за винятком того, що на кожній сторінці можна мати кілька елементів одного класу. Продовжимо з тим же прикладом з інтервалом у два рядки, якщо потрібно використовувати подвійний інтервал і виділення кольором для двох перших параграфів на сторінці, то можна буде додати до них класи у такий спосіб:
<p class="highlight">Контент параграфу </p>
<p class="highlight">Контент другого параграфу </p>
І потім застосуємо до них правило CSS наступним чином:
.highlight {
line-height: 2em;
color: green;
}
У цьому випадку highlight є класом, а не ID — крапка спочатку є угодою CSS для зазначення класу. Приклад, що ми розглянемо далі, дозволить нам краще зрозуміти, як CSS оформляє HTML.
4. JavaScrіpt — додавання поведінки на сторінки Web
Нарешті, JavaScrіpt є мовою сценаріїв, що використовується для додавання поведінки на сторінки Web — її можна використовувати для перевірки даних, які вводяться у форму (чи мають вони правильний формат, чи ні), зміни стилю, анімації елементів сторінки, таких як меню, обробки функцій кнопок і безлічі інших речей. Більша частина сучасного коду JavaScrіpt працює, знаходячи елемент HTML, а потім роблячи з ним щось, таке як CSS, але спосіб дії, синтаксис зовсім інші.
Мова JavaScrіpt є більш складною й широкою темою, ніж HTML і CSS, тому, щоб зберегти простоту й уникнути плутанини на даному етапі, вона не буде розглядатися в наступному прикладі. Фактично в цьому курсі JavaScrіpt буде розглянутий значно пізніше.