Все теги HTML представляют собой символы < и >, внутри которых находится имя тега, определяющее назначение тега. Закрывающий тег должен иметь то же имя, что и открывающий; единственное отличие закрывающего тега — символ /, который ставится между символом < и именем тега.
Рассмотренные нами теги <H1> и </H1> в HTML фактически считаются одним тегом <H1>. Такой тег называется парным.
Поехали дальше. Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)
Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P>. Это значит, что содержимое тега <STRONG> будет отображаться как часть абзаца (тега <P>).
Давайте ради интереса выделим слова "Web-дизайном" курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM>:
<P>Приветствуем на нашем Web-сайте всех, кто занимается
<EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех
.
Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>. Получилось! Да мы уже стали Web-дизайнерами!
Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.
— Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.
— Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.
— В обычном тексте, не являющемся тегом, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web- обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.
На этом пока закончим. Впоследствии, изучив другие языковые элементы HTML, мы пополним список этих правил.
Вложенность тегов
Если мы снова посмотрим на приведенный в листинге 1.2 фрагмент HTML-кода, то заметим, что одни теги вложены в другие. Так, тег <STRONG> вложен в тег <P>, являясь частью его содержимого. Тег <P>, в свою очередь, вложен в тег <BODY>, а тот — в "глобальный" тег <HTML>. (Теги <BODY> и <HTML> мы рассмотрим чуть позже.) Такая вложенность тегов в HTML — обычное явление.
Когда Web-обозреватель встречает тег, вложенный в другой тег, он как бы накладывает действие "внутреннего" тега на эффект "внешнего". Так, действие тега <STRONG> будет наложено на действие тега <P>, и фрагмент абзаца окажется выделенным полужирным шрифтом, при этом оставаясь частью этого абзаца.
Давайте для примера текст "Web-дизайн", который мы недавно поместили в тег <EM>, заключим еще и в тег <STRONG>. Вот так:
<P>Приветствуем на нашем Web-сайте всех, кто занимается
<EM><STRONG>Web-дизайном</STRONG></EM>! Здесь вы сможете найти
.
В этом случае данный текст будет выделен полужирным курсивом. Иными словами, действие тега <STRONG> будет наложено на действие тега <EM>.
Теперь — внимание! Порядок следования закрывающих тегов должен быть обратным тому, в котором следуют теги открывающие. Говоря иначе, теги со всем их содержимым должны полностью вкладываться в другие теги, не оставляя "хвостов" снаружи.
Если же мы нарушим это правило и напишем такой HTML-код (обратите внимание на специально перепутанный порядок следования открывающих тегов):
<P>Приветствуем на нашем Web-сайте всех, кто занимается
<EM><STRONG>Web-дизайном</EM></STRONG>! Здесь вы сможете найти
.
Web-обозреватель может отобразить нашу Web-страницу неправильно.
НА ЗАМЕТКУ
Нужно сказать, что современные Web-обозреватели "умеют" исправлять мелкие ошибки Web-дизайнера. Но именно мелкие!
Осталось выучить несколько новых терминов. Тег, в который непосредственно вложен данный тег, называется родительским, или родителем. В свою очередь, тег, вложенный в данный тег, называется дочерним, или потомком. Так, для тега <EM> в приведенном далее примере тег <P> — родительский, а тег <STRONG> — дочерний. Любой тег может иметь сколько угодно дочерних тегов, но только один родительский (что, впрочем, понятно — не может же он быть непосредственно вложен одновременно в два тега).