Тэги базовая структура html документа. Основные теги HTML. Название документа title

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

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

Теги могут вкладываться друг в друга, например,

Текст

Текст

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

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

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

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

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

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

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

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

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.

.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

...

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:

1.2.4. Элемент

Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

@import url(style.css);

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

В этом разделе располагается все содержимое документа. Для элемента доступны .

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

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

Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.

Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

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

На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

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

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.

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

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

Подключается файл следующим образом.

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.

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

Скрипты подключаются следующим образом.

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

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

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.

Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

Рассмотрим другие основные теги, которые указываются в разделе body.

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

Каждый HTML-документ должен начинаться тегом < HTML > и заканчиваться тегом . Эти теги обозначают, что находящиеся между ними строки представляют единый HTML-документ. Кроме того, можно заметить, что файл HTML в целом является элементом языка HTML.

Также в HTML-документе должны присутствовать элементы HEAD (информация о документе) и BODY (тело документа).

Раздел документа HEAD

Раздел документа HEAD определяет его заголовок, а также содержит дополнительную информацию о документе для броузера. Этот раздел не является обязательным, однако рекомендуется всегда использовать его в своих HTML-документах, так как правильно составленный заголовок может быть весьма полезен.

Раздел заголовка начинается тегом < HEAD > и следует сразу за тегом . Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.

Для того чтобы дать название HTML-документу, предназначен тег < TITLE > . Это название будет выведено в заголовок окна броузера. Название записывается между тегами и и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент TITLE должен находиться только в разделе HEAD.

Раздел документа BODY

В этом разделе документа располагается та информация, которая отображается в окне броузера. Раздел BODY должен начинаться тегом < BODY > и завершаться тегом , между которыми располагаются элементы HTML, из которых и состоит содержание документа.

Спецификация элемента BODY

Тег имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега .

TEXT="цвет текста"

BGCOLOR="цвет фона"

BACKGROUND="адрес фонового рисунка"

Атрибут TEXT задает цвет шрифта для всего документа в формате RGB или в символьной нотации. По умолчанию (если не указан этот атрибут) используются настройки броузера.

Атрибут BGCOLOR задает цвет фона окна броузера документа в формате RGB или в символьной нотации. По умолчанию используются настройки броузера.

Атрибут BACKGROUND позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа.

Атрибуты LINK, VLINK и ALINK задают цвета гиперссылок в формате RGB или в символьной нотации. По умолчанию используются настройки броузера. Непосещенная гиперссылка – гиперссылка, которая еще не использовалась для перехода к другому документу. Посещенная гиперссылка – гиперссылка, которая уже использовалась для перехода к другому документу. Активная гиперссылка – гиперссылка на документ, к которому в данный момент происходит переход.

Советы по использованию атрибутов тега BODY

 Если вы указываете хотя бы один цвет в теге BODY, то укажите и остальные. Это связано с тем, что пользователь может установить настройки цветов своего броузера как ему удобней. Указание только одного цвета может привести к ситуации, что у некоторых пользователей текст сольется с цветом фона. В результате просмотр документа будет затруднен.

 Выбирайте цвет текста так, чтобы он "работал" вместе с цветом фона или основными цветами изображения. Например, красное на зеленом может вызвать серьезные проблемы у значительного числа людей.

 В элементе BODY можно задать как BGCOLOR, так и BACKGROUND. В этом случае броузер отдает предпочтение BACKGROUND, но если изображение фона невозможно загрузить, будет использовано BGCOLOR. Поэтому старайтесь задавать цвет фона похожим на цвет фонового рисунка, чтобы не нарушился цветовой баланс документа.

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

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

Наименования тегов и их параметров могут быть написаны в любом регистре, как большими символами, так и строчными. Анализаторы HTML, встроенные в каждый браузер не обращают внимания на регистр символов, которыми написаны все служебные конструкции HTML-документов.

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

Любая Web-страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами и , а тело документа обозначается тегами и . Но по правилам хорошего стиля программирования перед заголовком ставится еще идентификатор применяемого стандарта HTML. Таким образом, структура любой Web-страницы выглядит следующим образом:

Заголовок документа


Тело документа

Первый тег со всеми его параметрами и является тем самым идентификатором, который сообщает браузеру, какая именно версия HTML была использована для создания данной Web-страницы. Эта достаточно громоздкая и непонятная конструкция на самом деле является пришельцем из языка более высокого уровня XML. Подразумевается, что в будущем браузеры смогут работать одновременно как с обычными Web-страницами, написанными на языке ХМL так и с HTML-документами. Поэтому с расчетом на это самое светлое будущее и используется данный тег-идентификатор. Точная дата наступления этого светлого будущего, как обычно, неизвестна, поэтому очень часто данным идентификатором пренебрегают без каких-либо последствий. Но предусмотрительность, как известно, лучше, чем непредусмотрительность, поэтому идентификатор лучше все-таки использовать.

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

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

Заголовок Web-страницы

Заголовком Web-страницы никогда не следует пренебрегать, так как это самое первое, что видит посетитель Web-сайта. Заголовок отображается еще до того, как произойдет окончательная загрузка содержимого страницы. Поэтому и выбирать его следует тщательно.

С первой частью структуры Web-страницы мы разобрались, теперь мы можем переходить к рассмотрению тела HTML-документа, его основной части. Как мы уже знаем, содержимое Web-страницы располагается между тегами и . В самом простейшем случае, это может быть обыкновенный текст. Браузер правильно интерпретирует его и отобразит. Попробуем увидеть это на примере.

Для создания нашей первой Web-страницы нам потребуется обычный текстовый редактор. Стандартный Блокнот вполне подойдет. Нам достаточно будет создать текстовый файл, содержимое которого приведено в листинге 1.1.

Моя первая Web-страница


Доброго времени суток, всем посетившим мой скромный сайт

Не следует забывать, что при сохранении файла, следует установить для него расширение htm или html. Если после этого запустить его на выполнение, просто щелкнув по его наименованию в Проводнике Windows, то автоматически будет запущен браузер, установленный по умолчанию в операционной системе, и в него уже будет загружен HTML-документ. Как выглядят наша первая Web-страница в браузере Internet Explorer видно на рис. 1.1.

Рис. 1.1. Результат просмотра в браузере файла, приведенного в листинге 1.1

Но следует отметить, что тег может содержать дополнительные параметры. Мы уже говорили немного ранее, что параметры включаются в состав стартового тега конструкции. Теперь пришло время увидеть, как это происходит на самом деле.

Чаще всего параметр представляет собой пару "наименование-значение".

Рассмотрим на простом примере. Параметр bgcolor позволяет задавать цвет фона, на котором будет отображаться содержимое Web-страницы. Например, если мы хотим использовать зеленый фон, то мы должны использовать следующую конструкцию:

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

О параметре bgcolor , который позволяет устанавливать цвет фона Web-страницы, мы уже знаем. Рассмотрим остальные параметры.

• Параметр background позволяет использовать в качестве фона какое-либо графическое изображение. Значением параметра является адрес этого изображения, т. е. его URL.
• Параметр text задает цвет шрифта, которым будет отображаться текстовое содержимое Web-страницы.
• Параметр link позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое Web-страницы.
• Параметр vlink задает цвет гиперссылок, которые пользователь уже проходил в текущем сеансе работы.
• Параметр alink указывает, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.
• Параметр lang указывает, на каком языке написано текстовое содержимое Web-страницы. В качестве значения используются кодовые двухбуквенные обозначения языков, приведенные в документе RFC 1766. На самом деле, нам не надо знать все эти обозначения. В подавляющем большинстве случаев мы будем использовать русский или английский язык. Их коды: "гu" и "en" соответственно.

Помимо вышеперечисленных параметров тег может обладать двумя идентифицирующими параметрами id и class , но на практике они к этому тегу почти никогда не применяются.

Как видно, все просто и незатейливо. Теперь самое время узнать, что же такое метаданные. Метаданные, скорее всего, можно определить как неотображаемая информация о документе. Она применяется для идентификации документа и указания режима отображения Web-страницы. Для внедрения метаданных в Web-страницу используется тег . Чаще всего он имеет следующий вид:

"http://www.w3.org/TR/html4 /strict.dtd">


Все о кормлеиии хомяков



О, эти маленькие, симпатичные животные - хомячки. ,

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

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

Также метаданные позволяют передавать так называемые заголовки HTTP. Здесь необходимо сделать маленькое техническое отступление. Все HTML-документы передаются при помощи специализированных программ, называемых Web-серверами, при помощи определенного набора правил. Этот набор правил приема и передачи информации в компьютерной индустрии называется протоколом. А набор правил для передачи Web-страниц и данных от удаленных пользователей называется протоколом HTTP (HyperText Transfer Protocol), Этот протокол обладает набором директив и переменных, которые часто называют заголовками HTTP-протокола.

Перед нами не стоит задача изучить всё переменные протокола HTTP, нам достаточно будет узнать о наиболее часто применяемых его заголовках. Прежде всего, стоит упомянуть о переменной Expires, которая позволяет устанавливать так называемый срок годности Web-страницы. Дело в том, что браузеры и некоторые другие коммуникационные программы сохраняют посещенные пользователем Web-страницы в кэше, а затем, когда пользователь запрашивает их снова, подсовывают ему эти копии, экономя, таким образом, время получения. Но Web-страницы все-таки достаточно часто обновляют. Поэтому, пользователь может получить устаревшую копию.

Конечно, существуют способы настройки правил работы с кэшем, но далеко не все их используют. Поэтому лучше подстраховаться, и указать "срок годности" Web-страницы. Если он прошел, то браузер вместо использования копии из кэша все-таки запросит документ из Сети.

Тег , приспособленный для указания срока годности Web-страницы, выглядит приблизительно следующим образом:

Из примера видно, что для указания наименования стандартной неременной HTTP-протокола используется параметр http-equiv , а для установки значения этой переменной - уже знакомый нам параметр content. Также легко заметить, что установка срока последнего использования документа производится при помощи переменной Expires, а значение ее должно быть указано в определенном текстовом формате со временем, указанным по гринвичскому меридиану.

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

Страница с подобной конструкцией в блоке заголовка будет автоматически перезагружаться каждые десять секунд.

На этом заканчивается рассмотрение структуры заголовка HTML-документа. Мы переходим к изучению структуры основного раздела Web-страницы. Как мы помним, вся отображаемая в окне просмотра браузера информация размещается между тегами и . О том, какие возможности по указанию правил отображения содержимого Web-страницы нам предоставляет язык HTML, мы узнаем в следующих разделах этой главы. Здесь мы рассматриваем лишь общую структуру HTML-документа.

HTML предоставляет нам возможность для каждого применяемого тега задать уникальный идентификатор. Скажем, если наш текст разбит на абзацы, то для каждого абзаца мы можем задать свое специфичное наименование, а затем, при помощи некоторых дополнительных средств языка HTML, управлять отображением этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет шрифта, т. е. изменять правила их отображения. Причем, это относится не только к абзацам, а ко всем частям содержимого Web-страницы которые заключены в те или иные теги.

Для идентификации какого-либо тега применяется параметр id. Вернемся к примеру с абзацами текста. Забегая немного вперед, можно сказать, что абзацы указываются при помощи пары тегов и . Таким образом, создание абзацев, которые мы сможем потом отличать, производится при помощи приблизительно следующей конструкции:

Первый абзац
Bторой абзац

Значения всех параметров id в HTML-документе обязаны быть уникальными. Если встречается пара одинаковых значений, то эти идентификаторы просто игнорируются. Естественно, применение параметра id не является обязательным. Имеет смысл использовать его только в тех случаях, когда конструкция с идентифицируемым тегом будет подвергнута стилевой обработке (о которой мы поговорим во второй главе), или этот тег будет являться закладкой в документе, на которую будет указывать какая-либо гиперссылка, либо идентифицируемая конструкция будет обрабатываться динамически, при помощи инструкций DHTML, о которых мы узнаем в третьей главе. Также идентификаторы применяются в тех случаях, когда HTML-документ обрабатывается специализированными приложениями, но это уже для совсем серьезных программистов. Нам это пока не так уж и нужно.

Если параметр id применяется для уникальной идентификации, то при помощи параметра class мы можем относить тег к той или иной группе. Этот параметр используется только для стилевого оформления. Мы просто некоторые элементы Web-страницы разбиваем на классы, а затем достаточно в одном месте изменить описание правил отображения класса, и это изменение автоматически распространится на все теги, которые вошли в данный класс.

Также нам доступны методы объединения соседних элементов Web-страницы в единые блоки. Все элементы оформления HTML-документов разделяются на два типа. Inline-элементы, которые чаще всего являются просто элементами текста, и блочные элементы. Inline-элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на Web-странице и обязаны начинаться всегда с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и inline-элементы. По вполне понятным причинам inline-элементы не могут включать в себя блочные элементы.

Объединение элементов Web-страницы в блоки позволяет применять к ним единое оформление, осуществлять некое подобие верстки. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента Web-страницы по отдельности.

Для объединения элементов блочного типа используется тег с его закрывающим близнецом . А для inline-элементов используется пара тегов и . С учетом вышесказанного, ясно, что блок с тегом не может располагаться внутри блока с тегом , так как блочные элементы не могут входить в состав inline-элементов.

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

Листинг 1.2

Отображение div-блоков



Доброго времени cyток, всем посетившим мой скромный сайт.

Результат отображения подобного HTML-файла браузером Internet Explorer показан на рис. 1.2. Теги и могут также иметь дополнительные параметры. Помимо уже знакомых нам идентифицирующих параметров id и class, могут использоваться параметры style и align . Параметр style применяется для установки стиля отображения содержимого блока, а параметр align позволяет устанавливать выравнивание данного блока относительно других элементов содержимого Web-страницы. Более детально применение этих параметров мы рассмотрим в следующих разделах этой главы.

Рис. 1.2. Окно браузера с результатом отображения файла, приведенного в листинге 1.2

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

Теги для обозначения заголовков чрезвычайно просты. Для заголовка первого уровня применяется тег с его закрывающей парой , заголовок второго уровня реализуется при помощи пары - , и так далее, вплоть до заголовка шестого уровня с тегом . Ниже, в листинге 1.3 приведен пример использования заголовков в HTML-документе.

Листинг 1.3

Отображение заголовков


Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
0бычный текст

А как это выглядит, хорошо видно на рис. 1.3.

Рис. 1.3. Окно браузера с результатом отображения файла, приведенного в Листинге 1.3

Теги заголовков обладают тем же набором параметров, что и недавно рассмотренные теги и , т. е. идентификационные id и class , параметр общего оформления style и параметр выравнивания align .

На этом и заканчивается рассмотрение структуры типичного HTML-документа. Как видно, никаких особых сложностей в этом нет. Все стройно и логично.

HTML - расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

• Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
• Как следует из названия, HTML - это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.

В следующем примере показан HTML-документ в простейшей форме:

Заголовок документа Заголовок

Здесь содержание документа...

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия и другие.

В приведенном выше примере используются следующие теги для создания HTML-документа:

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

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

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа

Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.

Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.