Лекція 3. Структура html-документа і елементи розмітки заголовка документа.

• Призначення заголовка

• Відображення змісту елемента TITLE

• Основні контейнери заголовка

  • Елемент розмітки HEAD

  • Елемент розмітки TITLE

  • Елемент розмітки BASE

  • Елемент розмітки META

  • Елемент розмітки LINK

  • Елемент розмітки STYLE

  • Елемент розмітки SCRIPT

У цій лекції розбираються типова структура HTML-документа і зміст його заголовка. Докладно описується зміст елементів розмітки, і розбираються формат і призначення кожного з елементів розмітки заголовка.

HTML-документ - це один великий контейнер, який починається з тега <HTML> і закінчується тегом </ HTML>:

<HTML> Зміст документа </ HTML>

Контейнер HTML або гіпертекстовий документ складається з двох інших вкладених контейнерів: заголовка документа (HEAD) і тіла документа (BODY). Розглянемо найпростіший приклад класичного документа.

<HTML>

<HEAD>

<TITLE> Найпростіший документ </ TITLE>

</ HEAD>

<BODY TEXT=#0000ff BGCOLOR=#f0f0f0>

<H1> Приклад простого документа </ H1>

<HR>

Форми HTML-документів

<UL>

<LI> Класична

<LI> Фреймова

</ UL>

<HR>

</ BODY>

</ HTML>

Компанія Netscape Communication розширила класичну форму документа можливістю організації фреймів (кадрів), що дозволяють розділити робоче вікно програми перегляду на кілька незалежних фреймів. У кожен кадр можна завантажити свою сторінку HTML. Наведемо приклад документа з фреймами.

<HTML>

<HEAD>

<TITLE> Документ із фреймами </ TITLE>

</ HEAD>

<FRAMESET COLS="30%,*">

<FRAME SRC=frame1.htm NAME=LEFT>

<FRAME SRC = frame2.htm NAME = RIGHT>

</ FRAMESET>

</ HTML>

Призначення заголовка

Тема HTML-документа є необов'язковим елементом розмітки. У HTML 2.0 пропонувалося взагалі відмовитися від елементів HEAD і BODY. У той час в HTML не було елементів, які використовувалися одночасно і в заголовку, і в тілі документа. Сучасна практика HTML-розмітки така, що майже в кожному документі є HTML-заголовок.

Спочатку існування заголовка визначалося необхідністю іменування вікна браузера. Це досягалося за рахунок елементу розмітки TITLE:

<HTML>

<HEAD>

 <TITLE> Це заголовок </ TITLE>

...

</ HEAD>

<BODY>

...

</ BODY>

</ HTML>

Відображення змісту елемента title

Однак замислювався заголовок для дещо інших цілей. Виходячи із загальних міркувань, пов'язаних з теорією і практикою розробки та експлуатації гіпертекстових систем, всі гіпертекстові зв'язки інформаційних вузлів прийнято розділяти на контекстні і загальні.

Контекстні гіпертекстові зв'язки відповідають певного місця документа - контексту. У HTML такі зв'язки реалізовані у вигляді гіпертекстових посилань (елемент A (anchor)). Фактично до реалізації таблиць описувачів стилів у сучасних браузерах це був єдиний вид зв'язків, якими міг керувати автор HTML-документа.

Загальні гіпертекстові зв'язки визначаються не частиною документа (контекстом), а всім документом цілком. Наприклад, бути попереднім по відношенню до іншого документа або наступним - це загальна гіпертекстова зв'язок, яка дозволяє організувати так званий "лінійний" перегляд інформаційних вузлів гіпертекстової мережі.

Реалізація такого сорту посилань вже давно є частиною проектів W3C (Arena, Amaya). У комерційних браузерах такий механізм реалізований тільки для описувачів стилів (елемент розмітки LINK).

Важливу роль заголовок HTML-документа грає в JavaScript. Існує принципова різниця між заголовком і тілом документа при використанні елемента розмітки SCRIPT. Вона полягає у визначенні зони видимості функцій і змінних. Змінні та функції, визначені в заголовку документа, відносяться до всього вікна браузера. Це означає, що до них можна звернутися з будь-якого місця документа і змінити їх значення. Крім того, до них можна звернутися з іншого вікна або фрейму. Фактично, це глобальні змінні. Працюючи із документами змінні і функції тіла відносяться до шарів, що робить доступ до них незручним.

Ще однією функцією заголовка HTML-документа є управління HTTP-обміном через елемент розмітки META. При сучасній практиці розміщення Web-вузлів компаній на серверах провайдерів адміністратори цих вузлів можуть не мати можливості керувати програмою-сервером. У цьому випадку для керування обміном залишається тільки одна можливість - через заголовок HTML-документа.

Не можна також не згадати ще про один важливий призначення заголовка HTML-документа - пошуковому образі документа для індексування роботами пошукових систем. Елемент META дозволяє зберігати списки ключових слів і опису документа, які будуть використовуватися для складання індексу пошукової системи і з'являтися як опис документа у разі видачі посилання на нього при пошуку за ключовими словами.