HTML-документи складаються з елементів, які позначені так званими тегами. Теги ви впізнаєте по кутових дужках. При цьому майже всі HTML-елементи позначені початковим та заключним тегом. Це, що знаходиться між ними, називається областю визначення.
Приклад:
<h1>PSD-Tutorials.de – твій графічний, веб- та навчальний портал</h1>
Згідно з цим синтаксисом в документ записується заголовок першого рівня. Початковий <h1>-тег повідомляє браузеру, що це саме такий заголовок. Заключний </h1> закриває заголовок. Заключні теги відрізняються від початкових тим, що мають відкриваючу кутову дужку, за якою йде коса риска </.
З'являється питання щодо написання назв елементів: як взагалі виглядає регістр великих і малих літер? Як вже зазначалося, у цьому циклі наголос на HTML5. Тут ви насправді можете обирати між регістром великих і малих літер. Особисто я впереджую послідовність малих літер і буду дотримуватися цього і в цьому циклі. Загалом за HTML5 правильними є наступні речі:
<h1>PSD-Tutorials.de – твій графічний, веб- та навчальний портал</h1> <H1>PSD-Tutorials.de – твій графічний, веб- та навчальний портал</H1> <h1>PSD-Tutorials.de – твій графічний, веб- та навчальний портал</H1>
Елементи, які ви відкриваєте, повинні бути також закриті. Тож, якщо ви встановлюєте <h1>, ви повинні його закрити після закінчення визначення заголовка </h1>. Хоча в HTML5 тут також є винятки, наприклад, для списку та абзаців, про це подивимося пізніше.
У HTML також існують так звані самостійні теги. Вони складаються лише з одного тегу, а не з початкового та заключного тегів. Типовим прикладом є <br />.
Це один рядок.<br /> Це інший рядок.
Цей <br /> визначає перенесення рядка.
Такі пусті теги зазвичай закриваються за допомогою косої риски, хоча в HTML5 це не є обов'язковим. Тут також можливі такі варіанти:
<br>
У цьому циклі ви ще познайомитеся з іншими самостійними тегами.
Вкладеність елементів
До HTML-елементів також можна вкладати інші елементи. Уявіть, що ви хочете зробити певний текст курсивним всередині заголовка. Для курсивного виділення використовується елемент i.
<h1>PSD-Tutorials.de – <i>твій графічний, веб- та навчальний портал</i></h1>
При вкладенні важливо дотримуватися правильної послідовності. Останнім закрити елемент, який відкритий першим. У цьому випадку останнім є елемент h1.
Використання атрибутів
В межах відкриваючих тегів або самостійних тегів можна визначати так звані атрибути. Ці атрибути можуть надавати додаткові властивості елементам. В попередні часи HTML елементам надавали порівняно багато атрибутів. Це суто пов'язано з переплетенням між структурою та дизайном. Так, наприклад, визначення кольорів безпосередньо передавалося HTML-елементу через відповідний атрибут. Нинішньою часом – звісно, також завдяки CSS – можливе чітке розділення дизайну від структури, яке також слід дотримуватися. Тому зараз використовуються всього порівняно мало атрибутів.
Важливий атрибут – це id. Цей атрибут дозволяє надати HTML-елементу унікальне ім'я, за допомогою якого його можна звертатися, наприклад, через CSS або JavaScript.
<h1 id="head">PSD-Tutorials.de – твій графічний, веб- та навчальний портал</h1>
Щоб призначити атрибут, після h1 додається пробіл. Потім йде назва атрибута, яка зазвичай пишеться маленькими літерами. Після назви атрибуту йде знак рівності. В апострофах йде значення атрибуту.
До елементу також можна надати кілька атрибутів. Так, цілком прийнятно для елементу визначити як клас, так і ідентифікатор. Також наведено приклад: за допомогою id заголовок однозначно ідентифікований. Клас же призначений для того, щоб заголовок був віднесений до певної категорії. Так можна визначити, що всі елементи з класом blue будуть відображатися синім кольором. (Більше про цю тематику CSS та кольору, звісно, буде розглянуто докладніше пізніше).
<h1 id="head" class="blue">PSD-Tutorials.de – твій графічний, веб- та навчальний портал</h1>
Атрибути в цьому випадку розділяються пробілом.
Перевірка коду
Деякі основні синтаксичні правила ви вже познайомилися з. Особливо на початку навчання HTML важливо дотримуватися цих правил. Те, що ви навчитесь використовувати неправильно, важко виправити. Тому ви повинні завжди перевіряти або валідувати свій HTML-код на правильність. Це, звісно ж, не вам робити. Є відповідні онлайн-інструменти. Так, наприклад, ви знайдете такий інструмент під назвою http://validator.w3.org/.
Найкраще переходьте туди безпосередньо в реєстрацію Validate by direct Input. Тут можна безпосередньо вставити HTML-код, який слід перевірити, копіюванням і вставленням. Не забудьте вставити повний код файлу, включаючи вказівку DOCTYPE.
Додайте наступне до текстового поля, щоб перевірити валідатор, а потім натисніть кнопку Validate.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – твій графічний, веб- та навчальний портал</h1> </body> </html>
Результат має виглядати так:
Тут все в порядку. (Ці дві попередження в цьому випадку не мають значення). Таким чином, коли з'явиться повідомлення Цей документ успішно перевірений як HTML5!, все дійсно в порядку. Але як це буде в разі помилки? Для цього ви можете навмисно додати помилку в синтаксис.
<h1 id=head">PSD-Tutorials.de – твій графічний, веб- та навчальний портал</h1>
Тут було забуто властиве початкове лапки для head. Якщо тепер знову процінити синтаксис, помилка буде виявлена.
Валідатор видалить відповідну помилку. Що саме пішло не так, можна прочитати в нижній частині вікна.
Тут дуже чітко описано, що саме сталося помилка.
Рядок 8, Колонка 12: " у некованому значенні атрибута. Ймовірні причини: атрибути, що працюють разом, або URL-рядок запитів в некованому значенні атрибута.
<h1 id=head" >PSD-Tutorials.de</h1>
Тому ви зразу побачите, в якому рядку відбулася помилка, і зможете її виправити. Таким чином, валідатор допомагає вам створити чистий HTML-код. Ви повинні завжди перевіряти свій код на валідність. Оскільки браузери часто відображають HTML-код правильно, навіть якщо синтаксис невірний. Але в інших браузерах, які ви не тестуєте, це може виглядати зовсім по-іншому.
