Структура документов HTML. Строение страницы.

Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.

Понятие тэга и элемента:

HTML - это язык тэгов.

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

Например тэгом абзаца является < P>, а тэгом горизонтальной линии - < HR>.

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

Сам документ условно разделен на две части - заголовок документа (теги < head> < /head> ) и тело документа (теги< body> < /body> ).

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

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

· Дать документу название

· Определить отношения между несколькими документами

· Дать указание браузеру создать форму для поиска

· Определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра

Раздел HEAD открывается тэгом < HEAD>. Обычно этот тэг следует сразу же за тэгом < HTML>. Закрывающий тэг < /HEAD> показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа.

Название документа TITLE:

Единственным обязательным элементом заголовка документа являются теги < title> < /title> . Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера.

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

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

Все, что отображается на web-странице, находится в тегах < body> < /body> . Это текст, картинки и исполняющиеся скрипты, а также теги для оформления всего этого.
Пример:

< HTML>
< HEAD>
< TITLE> ….< /TITLE>
< /HEAD>
< BODY>
Enter body text here
< /BODY>
< /HTML>

Шаблон открывается тэгом < HTML>, который необходим для каждого HTML - документа. Следующим идет тэг < HEAD>, начинающий заголовок документа. Заголовок содержит элемент TITLE, вводящий название документа. Заголовок закрывается тэгом < /HEAD>. Далее идет тэг < BODY>, после которого помещается текст (тело) документа. Тэг < /BODY> означает конец тела, а тэг < /HTML> - конец всего документа.

Атрибуты элемента BODY:

Элемент BODY может содержать большое количество атрибутов.

Атрибут BGCOLOR отвечает за цвет фона документа.

Атрибут TEXT определяет цвет текста документа.

Атрибут LINK используется браузером для показа еще непросмотренных ссылок. Атрибут VLINK служит для показа уже просмотренных ссылок.

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

Атрибуты LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера.

Атрибут LEFTMARGIN устанавливает расстояние между левым краем окна браузера, которое измеряется в пикселах.

Атрибут TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера.

 

Структурные теги HTML. Содержание области HEAD.

Структурные теги:

·Теги форматирования

·Теги таблиц

·Теги изображения

·Теги гиперссылок

·Метатеги

-Структурные теги: Теги для задания структуры документа.

-Теги форматирования: Теги для управления текстом.

-Теги таблиц: Теги для управления таблицами.

-Теги изображений: Теги для управления изображениями.

-Теги гиперссылок: Теги для управления гиперссылками.

-Метатеги: Теги для записи дополнительной информации.

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

< html> —корневой тег документа HTML— < /HTML>

Тип этого тега – контейнерный. Открывающий тег < html> ставится в самом начале документа, а закрывающий
< /html> – в конце.

Внутри контейнера < html>. .... < /html> содержатся все остальные теги документа. Именно поэтому тег и называют корневым (вы ведь знаете, что такое корневая папка? ).

Контейнерный тег можно сравнить с папкой операционной системы. В каждую такую папку могут быть вложены другие папки, а в них, в свою очередь – еще папки, и.т.д.

У открывающего тега < html> при необходимости могут быть следующие параметры:

lang — определяет язык документа

title — определяет всплывающую подсказку для всей страницы

Пример:

< html lang=" ru" title=" Моя страница" >;

 

< html>;

Если вы посмотрите результат, то увидите, что при наведении курсора на страницу, всплывает подсказка «Моя страница»

Содержание области HEAD.

Раздел < head> содержит техническую информацию о странице:

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

< head> — головной тег html-страницы, внутри которого располагаются мета-теги, тег < title> и другие теги, помогающие браузеру в обработке страницы — < /head>

Тип тега – контейнерный. Это первый из двух глобальных контейнеров, расположенных внутри конструкции < html>.....< /html>

< title> — контейнерный тег, позволяющий задать наименование веб-страницы — < /title>

Заглавие, которое создает этот тег, отображается в строке заголовка окна браузера.

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

< html>
< head>
< title> Моя страница< /title>
< /head>
< /html>

Тег < title> выполняет несколько функций, одна из которых – сообщить посетителю, о чем страница. Благодаря тексту заголовка пользователь может понять, что это за сайт и как называется текущая страница. Если посетитель будет сворачивать окна, то заголовки отобразятся на панели задач – по ним проще сориентироваться, где какая страница.

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

Еще одна важная функция тега < title> – продвижение страницы в поисковиках. Поисковые системы выводят заголовки в поисковую выдачу, а, кроме того, оценивают по ним релевантность.

Завершая разговор о контейнере тега < head>, можно сказать, что название тега соответствует его функциям. Контейнер тега < head> действительно является своего рода головой для веб страницы.

Структурные теги HTML. Содержание области BODY.

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

Тег < body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

Часто тег < body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

⇐ Предыдущая78910111213141516Следующая ⇒

Поделиться: