Сайт о телевидении

В первой статье про html я приводил список тэгов, которые, по моему мнению нужно знать верстальщику. Остальные тэги, по сути, являются избыточными или даже лишними, по моему мнению. В этой статье я хотел бы рассказать об основах html и о тэгах html, head, title, body, а так же о div и span. Эти теги, по моему мнению - хорошая основа для начала изучения html.

К сожалению, современные браузеры очень лояльно относятся к веб-верстальщикам. Они пытаются интерпретировать все, что им скармливают. Незакрытые тэги, тэги в разных регистрах, непонятные тэги, теги, стоящие там, где их быть не должно и т.д. Например, лично видел сайт, где контейнер head располагался внутри body, а тег title был даже вне контейнера head. При этом, внешне сайт выглядел нормально!

Я очень надеюсь, что когда-нибудь стандарты станут жесткими, и неправильно сверстанные страницы не будут отображаться верно. Правда, для этого нужно, чтобы все браузеры обрабатывали html и CSS одинаково… Ну да меня занесло.

Как обычно в таких случаях, сначала накидаем план занятия:

1. Общие правила
2. Структура документа

Общие правила

Для начала, стоит сказать, что html — довольно лояльный язык. Существует версия html, стандарт которой ужесточен, — xhtml. Я стараюсь придерживаться этого стандарта. В частности, этот стандарт предполагает, что все теги написаны в нижнем регистре и закрыты. Даже одиночные. Как — будет показано ниже. Все атрибуты написаны в нижнем регистре, а их значения заключены в двойные кавычки и имеют обозначение величины, в которой измеряется их значение. Будем придерживаться этих правил.

Стандартами предусмотрено определенное расположение некоторых элементов. Если элемент, который должен располагаться где-то, располагается в другом месте — это считается ошибкой. Вообще-то, такой документ не должен обрабатываться или должен обрабатываться с ошибкой. Но браузеры щадят нерадивых разработчиков. Точнее, своих пользователей, которые смотрят сайты, разработанные нерадивыми разработчиками.

Теперь о тегах. Теги бывают парные и одиночные. Парные теги делятся, так же, на блочные и внутристрочные. Пару тегов иногда называют контейнером.

Как можно догадаться, парные теги имеют пару, а одиночные стоят поодиночке. Пара тегов образуется из открывающего и закрывающего тега. Одиночные теги являются и открывающими и закрывающими одновременно.

Пример контейнера (парные теги):

Пример одиночного тега

текст одной строки
этот текст уже на другой строке

В примере контейнера использовалась конструкция Это комментарий. Все, что заключено внутрь двух стрелочек не анализируется браузером и не выводится на экран. Эти комментарии иногда очень удобно использовать при верстке запутанных моментов, или для отделения логических частей макета в коде.

Блочные и внутристрочные теги

Различие между блочными и внутристрочными (inline) тегами состоит в том, что блочный элемент стремится занять весь экран по ширине (если не явно не указана его ширина) , а внутристрочный занимает ровно столько места, сколько занимает его содержимое. Кроме того, все, что следует за блочным элементом, будет отображаться с новой строки, а то, что за внутристрочным — прямо за ним. Контейнер div является по-умолчанию, блочным, а тег span - внутристрочным. (правда, это поведение легко изменить при помощи CSS). Проиллюстрируем поведение этих тегов.

Теги должны следовать логически друг за другом, соблюдая иерархичность. При включении одного тега в другой, нужно следить, чтобы соблюдался порядок закрывающих тегов.

Неправильно:

Есть еще одна вещь, о которой хочу сказать: у тегов могут быть атрибуты. Атрибут задает определенное поведение или как-то дополняет тег. Атрибут пишется прямо в теге, через пробел от его названия, в формате: ИМЯ_АТРИБУТА="ЗНАЧЕНИЕ[мера]". ИМЯ_АТРИБУТА и ЗНАЧЕНИЕ, думаю, понятно что такое. А мера — это обозначение единиц измерения. Если единицы измерения нет, то и выдумывать ее не надо.

Здесь мы задаем атрибут высоты для контейнера 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.

Если вам понравился данный мини-курс, или он вызвал вопросы или пожелания, если вы хотите поспорить о чем-то - я был бы рад вашему отзыву в комментариях или по почте.

Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы . С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).

Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором , согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.

Модель визуального форматирования CSS

1. Модель визуального форматирования

Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных боксов в соответствии с блочной моделью CSS. Положение этих боксов на странице определяется следующими факторами:
— размером элемента (с учётом того, заданы они явно или нет);
— типом элемента (строчный или блочный);
— схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
— отношениями между элементами в DOM;
— внутренними размерами содержащихся изображений;
— внешней информацией (например, размеры окна браузера).

Положение и размеры бокса(ов) каждого элемента рассчитываются относительно краёв прямоугольной блока, так называемого «содержащего блока» (containing block). Размеры бокса не ограничиваются размерами содержащего блока, поэтому при определённых условиях он может выходить за его границы.

2. Блочная модель

В блочной модели элемент рассматривается как прямоугольный контейнер, имеющий область содержимого и необязательные рамки и отступы (внутренние и внешние). Свойство display определяет тип контейнера элемента. Для каждого элемента существует значение браузера по умолчанию.

Область содержимого — это содержимое элемента, например, текст или изображение.

Внутренний отступ задаётся свойством padding . Внутренний отступ — это расстояние между основным содержимым и его границей (рамкой). Если для элемента задать фон, то он распространится также и на поля элемента. Внутренний отступ не может принимать отрицательных значений, в отличие от внешнего отступа.

Внешний отступ задаётся свойством margin . Он добавляет расстояние снаружи элемента от внешней границы рамки до соседних элементов, тем самым разделяя элементы на странице. Внешние отступы всегда остаются прозрачными и через них виден фон родительского элемента.

Значения padding и margin задаются в следующем порядке: верхнее, правое, нижнее и левое.

Граница , или рамка элемента, задаётся с помощью свойства border . Если цвет рамки не задан, она принимает цвет основного содержимого элемента, например, текста. Если рамка имеет разрывы, то сквозь них будет проступать фон элемента.

Внешние, внутренние отступы и рамка элемента не являются обязательными, по умолчанию их значение равно нулю. Тем не менее, некоторые браузеры добавляют этим свойствам положительные значения по умолчанию на основе своих таблиц стилей. Очистить стили браузеров для всех элементов можно при помощи универсального селектора:

* { margin: 0; padding: 0; }

3. Блочные элементы и блочные контейнеры

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.