.
В первой статье про 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, но в данном случае, я написал это, чтобы показать как это вообще может выглядеть)
. Атрибуты могут быть назначены только в открывающих тегах. Количество пробелов не имеет значения. Можно ставить пробелы между названием тега и атрибутом, между названием атрибута и знаком равенства, между знаком равенства и кавычкой. Можно ставить пробелы в кавычках, но только не между величиной и единицами ее измерения! Кавычки не обязательно должны быть двойными, можно применять "одинарные кавычки", но только в паре. Вариант "кавычки" не прокатит. В этом случае, одинарная кавычка, как и все, что следует после, будут интерпретированы как часть значения атрибута.
Вроде, это все, что я хотел сказать, в общем. Так что, к делу!
Структура документа
То, что будет описано ниже, как раз относится к разряду обязательного к соблюдению. Так что не стоит думать, что если "и так отображается", то это нормально. Это НЕ нормально.
Каждый документ должен быть заключен в теги Эти теги, как видно, парные. Так что не забывайте открывать такой тег в начале документа и закрывать в конце. По идее, все, что идет за закрвающим тегом уже не должно анализироваться брауезром. Но оно анализируется и даже отображается. Но не советую использовать это. Что примечательно, до открывающего тега может идти другое содержимое. Но в этой статье я не буду об этом говорить. Кто хочет, может
поискать про DOCTYPE.
Все остальное содержимое документа должно содержаться в контейнере html. Документ делится на две части. Одна несет управляющую функцию и дополнительную информацию для браузера. А другая — информацию для пользователя. Управляющая часть называется
, а содержательная — . Причем контейнер head должен стоят всегда перед body. Эти два контейнера не должны включать друг друга.
Каждый документ должен иметь название. Название документа является очень важным элементом страницы. Оно выводится в названии окна браузера, ему придают огромное значение поисковики. Название страницы можно задать с помощью контейнера
Название страницы. Этот контейнер должен обязательно располагаться в контейнере . Добавлю, что чем выше (по строкам) находится title, тем лучше страничка индексируется поисковиками.
Таким образом, простейший html-документ выглядит примерно так:
Название документа
Здесь тело документа
Можете скопировать этот текст в блокнот (или похожий текстовый редактор), сохранить этот файл с расширением.html и перетащить в окно своего браузера. Вы увидите, что текст, содержащийся в контейнере title, отобразился в заголовке страницы, а текст из body отобразился в пользовательской части.
Закончим рассмотрение основных тегов документа и возьмемся за теги представления содержимого.
Теги для логического разделения содержимого
Для начала скажу, что теги, которые я рассмотрю ниже, могут находиться только в теге body.
Этот контейнер предназначен для того, чтобы объединять некий текст в логический блок, отделенный от остального содержимого страницы. Если вы возьмете текст нашего простейшего документа и заключите текст из тела документа в этот контейнер, то никаких внешних изменений не заметите. Однако, они, все же, есть. Для текста, заключенного в контейнер div, можно задать одно стилевое оформление. Этот блок можно сделать определенной ширины, задать для него другой шрифт, сделать выравнивание по правому краю или что угодно еще. Вот пример использования тега div (для краткости, не буду приводить весь текст документа целиком. Но вы должны помнить, что нижестоящую конструкцию вы должны вставить в контейнер body для того, чтобы увидеть ее работу.):
Небольшой текст, который я хочу, чтобы отображался в правой части страницы и был оформлен немного иначе, нежели основной текст страницы.
Основной текст страницы. Наверное, он не должен быть длинным, ведь это всего-лишь тест.
Не стоит пугаться незнакомого атрибута style и непонятных слов в нем (таких ли уж непонятных?). Просто контейнер div лучше было показать вместе с этим атрибутом. Чаще всего, в правильной верстке, для контейнеров используются атрибуты id и class, которые служат для связи тега с CSS или идентификации его для JavaScript. Но это уже забегание вперед;)
Контейнер div является блочным элементом. Но это поведение легко изменить.
Контейнер span предназначен для выделения некоторой части текста. Его использование так же, заметно только после придания тегу особых свойств. Часто, нужного эффекта добиваются при помощи CSS. Простой пример применения тега span мы видели, когда изучали разницу между блочными и внутристрочными элементами, поэтому не будем на нем останавливаться.
Итог
В этой статье мы познакомились с общими правилами html, узнали о минимальной структуре документа html, о парных и непарных тегах, и о блочных и внутристрочных контейнерах. Мы увидели разницу между контейнерами разного типа, а так же, познакомились с логическими контейнерами div и span.
Если вам понравился данный мини-курс, или он вызвал вопросы или пожелания, если вы хотите поспорить о чем-то - я был бы рад вашему отзыву в комментариях или по почте.
Очевидно вы уже заметили, что элементы заголовков -
и абзацев
начинаются с новой строки. Это происходит потому, что они являются примерами блочных элементов различных уровней. Браузеры рассматривают блочные элементы так, словно они заключены в маленькие прямоугольные области – блоки, из которых складываются страницы. По умолчанию каждый блочный элемент начинается с новой строки и, как правило, ограничен сверху и снизу пустыми строками.
В следующем примере границы блочных элементов выделены зеленым цветом:
Пример: Блочные и встроенные элементы
Блочный элемент занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками
Блочный элемент
Начинается с новой строки, а встроенный элемент
Блочный элемент (h2) занимает всю ширину родительского элемента
и ограничен сверху и снизу пустыми строками
Блочный элемент (p) начинается с новой строки,
а встроенный элемент (em)
не начинается с новой строки, а остается в составе абзаца
Обратите внимание как выглядит текст, который мы пометили как курсивный (еm). Он не начинается с новой строки, а остается в составе абзаца. Это происходит потому, что элемент
является встроенным или строчным. Встроенные элементы не начинаются с новой строки, а находятся в составе блочных. Встроенным элементам достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в них.
Разница между блочными и строчными элементами следующая:
- Строчные элементы не могут хранить блочные элементы, а могут содержать только данные или другие строчные элементы.
- Блочные элементы могут содержать другие блочные элементы, строчные элементы, а также данные.
- Блочные элементы всегда начинаются с новой строки и, как правило, ограничены сверху и снизу пустыми строками.
- Блочные элементы занимают всю ширину родительского элемента, например, окна браузера.
- Строчные элементы занимают ширину равную их содержимому плюс значения отступов, полей и границ.
Примеры блочных элементов:
-
Примеры строчных элементов:
Общие элементы
и
Элемент
— это общий
блочный
элемент, который применяется для группировки одного или нескольких блочных элементов. Он указывает, что сгруппированные вместе элементы образуют некую смысловую единицу и должны рассматриваться, например таблицей
стилей CSS, как одна единица. Используя элемент
вместе с таблицами стилей CSS, вы сможете придать одинаковое стилевое оформление для всех элементов, помещенных в контейнер
.
Итак, тег
служит для того, чтобы:
– применять какие-либо настройки к отдельному
информационному блоку на сайте;
– быть контейнером для текста, изображений и других элементов HTML-документа.
Элемент
— это общий встроенный
элемент, который используется для встроенных элементов, которые не вводят переводов строк. Элемент
может содержать только текст и другие встроенные элементы (вы не можете поместить туда блочные элементы: заголовки, списки, элементы группировки контента и т. д.).
Так как элемент
— строчный
, то есть не требует для себя всей ширины окна браузера, то ему достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем. Поэтому элемент
часто используется для форматирования отдельных слов внутри абзаца.
В HTML большинство элементов можно разделить на две группы: блочные
(blok
) и строчные
(inline
).
Начинающему разработчику не всегда сразу удается разобраться - в чем разница между ними, а также запомнить принадлежность какого-либо элемента к конкретной группе. Но со временем, с опытом работы у Вас не возникнет и намека на подобные затруднения.
Строчные элементы
К строчным элементам относятся теги:
,
,
,
,
, ,
,
,
....
Строчные элементы в общем потоке располагаются последовательно на одной строке один за другим.
На другую строку строчный элемент или часть его содержимого переходит только в конце строки или когда что-то принудительно заставляет их перейти на новую строку.
Строчные элементы, естественно, могут располагаться внутри блочных.
Блочные элементы
К блочным элементам относятся теги:
,
,
...
,
,
,
,
,
....
Блок представляет собой как бы отдельную структурную единицу, выделенную абзацем. Блочные элементы в общем потоке располагаются последовательно один под другим
. По умолчанию два блочных элемента не могут располагаться на одной строке.
Один или несколько блоков также могут располагаться внутри другого (родительского
) блочного элемента.
В CSS блоки создаются на основе элементов HTML и имеют следующую структуру.
Любой блок имеет форму прямоугольника.
Блочный элемент имеет границу и содержимое: это может быть текстовая информация, фотографии, логотип фирмы и т.п., называемое контентом (англ. content
- содержание
).
Границе блока при помощи свойства border
можно придать необходимое оформление: задать толщину, цвет и стиль линий. По умолчанию граница невидима.
Между содержимым и границей существуют внутренние расстояния - поля
(свойство padding
). Ими необязательно пользоваться. То есть если их явно не установить при помощи свойства padding
, то граница будет вплотную примыкать к содержимому блока, либо отстоять от него на каком-то минимальном расстоянии. С другой стороны, поля могут иметь совершенно конкретные размеры, которые указывает разработчик.
Вокруг блока - за его границей существуют пустые, ничем не занятые области, называемые отступами
(свойство margin
). Отступы - это расстояния от границы блока, до ближайших элементов, или, если их нет, то до краев окна браузера. Отступы также, как и поля по умолчанию отсутствуют, либо имеют минимальную ширину, автоматически определяемую браузером.
Также для блока можно задать фиксированную ширину (свойство width
) и высоту (свойство height
), но лишь для его содержимого. Отступы, граница и поля туда не входят. По умолчанию как высота, так и ширина блока подстраиваются под размеры пространства, занимаемого контентом.
Фрагмент кода:
Строчные элементы
расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега
div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!
Результат:
Строчные элементы расположены на одной строке.
Они заключены в блочный элемент - абзац!
Перенос текста происходит автоматически - в конце строки.
Следующий блок - абзац, начинается с новой строки.
Два абзаца расположены.
Внутри блока - тега div
!
Отдельные фрагменты текста заключены в тег span. И для них задано стилевое оформление!