.
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег
является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name
или href
тег
устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег
увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега
увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег
уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег
, но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на
, но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
- Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
- Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
- Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
В первой статье про 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, но в данном случае, я написал это, чтобы показать как это вообще может выглядеть)
. Атрибуты могут быть назначены только в открывающих тегах. Количество пробелов не имеет значения. Можно ставить пробелы между названием тега и атрибутом, между названием атрибута и знаком равенства, между знаком равенства и кавычкой. Можно ставить пробелы в кавычках, но только не между величиной и единицами ее измерения! Кавычки не обязательно должны быть двойными, можно применять "одинарные кавычки", но только в паре. Вариант "кавычки" не прокатит. В этом случае, одинарная кавычка, как и все, что следует после, будут интерпретированы как часть значения атрибута.
Вроде, это все, что я хотел сказать, в общем. Так что, к делу!
Структура документа
То, что будет описано ниже, как раз относится к разряду обязательного к соблюдению. Так что не стоит думать, что если "и так отображается", то это нормально. Это НЕ нормально.
Каждый документ должен быть заключен в теги Эти теги, как видно, парные. Так что не забывайте открывать такой тег в начале документа и закрывать в конце. По идее, все, что идет за закрвающим тегом