В первой статье про html я приводил список тэгов, которые, по моему мнению нужно знать верстальщику. Остальные тэги, по сути, являются избыточными или даже лишними, по моему мнению. В этой статье я хотел бы рассказать об основах html и о тэгах html, head, title, body, а так же о div и span. Эти теги, по моему мнению - хорошая основа для начала изучения html.
К сожалению, современные браузеры очень лояльно относятся к веб-верстальщикам. Они пытаются интерпретировать все, что им скармливают. Незакрытые тэги, тэги в разных регистрах, непонятные тэги, теги, стоящие там, где их быть не должно и т.д. Например, лично видел сайт, где контейнер head располагался внутри body, а тег title был даже вне контейнера head. При этом, внешне сайт выглядел нормально!
Я очень надеюсь, что когда-нибудь стандарты станут жесткими, и неправильно сверстанные страницы не будут отображаться верно. Правда, для этого нужно, чтобы все браузеры обрабатывали html и CSS одинаково… Ну да меня занесло.
Как обычно в таких случаях, сначала накидаем план занятия:
- Общие правила
- Структура документа
Общие правила
Для начала, стоит сказать, что html — довольно лояльный язык. Существует версия html, стандарт которой ужесточен, — xhtml. Я стараюсь придерживаться этого стандарта. В частности, этот стандарт предполагает, что все теги написаны в нижнем регистре и закрыты. Даже одиночные. Как — будет показано ниже. Все атрибуты написаны в нижнем регистре, а их значения заключены в двойные кавычки и имеют обозначение величины, в которой измеряется их значение. Будем придерживаться этих правил.
Стандартами предусмотрено определенное расположение некоторых элементов. Если элемент, который должен располагаться где-то, располагается в другом месте — это считается ошибкой. Вообще-то, такой документ не должен обрабатываться или должен обрабатываться с ошибкой. Но браузеры щадят нерадивых разработчиков. Точнее, своих пользователей, которые смотрят сайты, разработанные нерадивыми разработчиками.
Теперь о тегах. Теги бывают парные и одиночные. Парные теги делятся, так же, на блочные и внутристрочные. Пару тегов иногда называют контейнером.
Как можно догадаться, парные теги имеют пару, а одиночные стоят поодиночке. Пара тегов образуется из открывающего и закрывающего тега. Одиночные теги являются и открывающими и закрывающими одновременно.
Пример контейнера (парные теги):
содержимое контейнера
Пример одиночного тега
текст одной строки
этот текст уже на другой строке
В примере контейнера использовалась конструкция Это комментарий. Все, что заключено внутрь двух стрелочек не анализируется браузером и не выводится на экран. Эти комментарии иногда очень удобно использовать при верстке запутанных моментов, или для отделения логических частей макета в коде.
Блочные и внутристрочные теги
Различие между блочными и внутристрочными (inline) тегами состоит в том, что блочный элемент стремится занять весь экран по ширине (если не явно не указана его ширина) , а внутристрочный занимает ровно столько места, сколько занимает его содержимое. Кроме того, все, что следует за блочным элементом, будет отображаться с новой строки, а то, что за внутристрочным — прямо за ним. Контейнер div является по-умолчанию, блочным, а тег span - внутристрочным. (правда, это поведение легко изменить при помощи CSS). Проиллюстрируем поведение этих тегов.
Текст1. Этот текст занимает всю ширину страницы.
Этот текст идет уже ПОД первым текстом и весь тоже занимает всю страницу
целиком. Но красненький текст, заключенный
в тег span, не переносит следующий за ним текст на новую строку и занимает
ровно столько места, сколько нужно.
Теги должны следовать логически друг за другом, соблюдая иерархичность. При включении одного тега в другой, нужно следить, чтобы соблюдался порядок закрывающих тегов.
Неправильно:
Правильно:
Есть еще одна вещь, о которой хочу сказать: у тегов могут быть атрибуты. Атрибут задает определенное поведение или как-то дополняет тег. Атрибут пишется прямо в теге, через пробел от его названия, в формате: ИМЯ_АТРИБУТА="ЗНАЧЕНИЕ[мера]". ИМЯ_АТРИБУТА и ЗНАЧЕНИЕ, думаю, понятно что такое. А мера — это обозначение единиц измерения. Если единицы измерения нет, то и выдумывать ее не надо.
Здесь мы задаем атрибут высоты для контейнера div (вообще-то, это лучше делать при помощи CSS, но в данном случае, я написал это, чтобы показать как это вообще может выглядеть) . Атрибуты могут быть назначены только в открывающих тегах. Количество пробелов не имеет значения. Можно ставить пробелы между названием тега и атрибутом, между названием атрибута и знаком равенства, между знаком равенства и кавычкой. Можно ставить пробелы в кавычках, но только не между величиной и единицами ее измерения! Кавычки не обязательно должны быть двойными, можно применять "одинарные кавычки", но только в паре. Вариант "кавычки" не прокатит. В этом случае, одинарная кавычка, как и все, что следует после, будут интерпретированы как часть значения атрибута.
Вроде, это все, что я хотел сказать, в общем. Так что, к делу!
Структура документа
То, что будет описано ниже, как раз относится к разряду обязательного к соблюдению. Так что не стоит думать, что если "и так отображается", то это нормально. Это НЕ нормально.
Каждый документ должен быть заключен в теги Эти теги, как видно, парные. Так что не забывайте открывать такой тег в начале документа и закрывать в конце. По идее, все, что идет за закрвающим тегом