HTML-документы состоят из элементов, которые отмечены с помощью так называемых тегов. Теги можно распознать по угловым скобкам. Почти все элементы HTML отмечены начальным и конечным тегами. То, что находится между ними, называется областью действия.
Пример:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Этим синтаксисом в документе записывается заголовок первого порядка. Начальный тег <h1> извещает браузер о том, что речь идет о таком заголовке. Конечный тег </h1> завершает заголовок. Конечные теги узнаются по открывающей угловой скобке, за которой следует косая черта </.
Возникает вопрос о норме написания имени элемента: каково отношение к регистру? Как уже упоминалось, основное внимание в этой серии уделено HTML5. Здесь вы действительно можете выбирать между верхним и нижним регистром. Однако я предпочитаю последовательное использование нижнего регистра и буду придерживаться этого в данной серии. В принципе, с HTML5 будут правильны следующие варианты:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> <H1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>
Элементы, которые открываются, также должны быть закрыты. Таким образом, если вы устанавливаете <h1>, вам нужно закрыть его после окончания определения заголовка: </h1>. Хотя в HTML5 здесь также есть исключения, такие как элементы списка и абзацы, но об этом позже.
В HTML также есть так называемые автономные теги. Они состоят только из одного тега с начальным и заключительным тегами. Типичным примером такого тега является <br />.
Das ist eine Zeile.<br /> Das ist eine andere Zeile.
Это <br /> определяет перенос строки.
Такие пустые теги обычно закрываются с помощью косой черты, хотя в HTML5 это не обязательно. Здесь также возможно следующее:
<br>
Вам предстоит узнать еще о многих из этих автономных тегов по ходу этой серии.
Вложенные элементы
HTML-элементы также можно вкладывать. Представьте себе, что вы хотите выделить курсивом отрывок внутри заголовка. Для выделения курсивом используется элемент i.
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>
При вложенности обязательно соблюдайте правильный порядок. Последний тег, который вы открывали, должен быть закрыт в последнюю очередь. В данном случае это элемент h1.
Использование атрибутов
Можно определить атрибуты внутри открывающих тегов или самостоятельных тегов. Такие атрибуты могут назначать элементам дополнительные свойства. В более ранние времена HTML элементам присваивались сравнительно много атрибутов. Это просто связано с смешением структуры и дизайна. Например, определения цвета непосредственно передавались HTML-элементу через соответствующий атрибут. В настоящее время - конечно же, благодаря CSS - возможно строго разделять дизайн и структуру, что и следует делать. Поэтому сейчас применяется сравнительно небольшое количество атрибутов.
Важным атрибутом является id. Через этот атрибут можно назначить элементу HTML уникальное имя, по которому его можно адресовать, например, с помощью CSS или JavaScript.
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</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>
Результат должен выглядеть следующим образом:
Здесь все в порядке. (Эти два предупреждения в данном случае не имеют значения). Если появляется сообщение This document was successfully checked as HTML5!,, значит все в порядке. А что, если в коде ошибка? Для этого просто добавьте намеренную ошибку в синтаксис.
<h1 id=head">PSD-Tutorials.de – твой графический, веб- и учебный портал</h1>
Здесь была упущена открывающая кавычка у head. Если снова провести валидацию, ошибка будет обнаружена.
Валидатор выдаст соответствующее сообщение. Что именно пошло не так, можно увидеть в нижней части окна.
Здесь четко описывается, в чем заключается ошибка.
Строка 8, столбец 12: " в неподтвержденном значении атрибута. Причины: атрибуты идут подряд или URL-строка запроса находится в неподтвержденном значении атрибута.
<h1 id=head" >PSD-Tutorials.de</h1>
Таким образом, вы сразу видите, в какой строке был допущен неверный ввод, и можете его исправить. Поэтому валидатор помогает создавать чистый HTML-код. Всегда проверяйте свой код на валидность. Потому что браузеры часто правильно отображают HTML-код, хотя синтаксический анализ ошибочен. В других браузерах, которые вы не тестируете, это может выглядеть совершенно по-другому.
