1.3. Структура документу
Отже, ми вивчили технологію створення HTML-документів, навчилися зберігати, відображати і змінювати вихідний код. Прийшла пора повернутися до мови HTML. У лістингу 1.2 представлена структура, характерна для будь-якого HTML-документа.
Лістинг 1.2. Структура HTML-документу
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Тег <HTML> дозволяє визначити Web-браузеру формат файлу і правильно відобразити всі його вказівки. Весь текст HTML-документа розташований між тегами <HTML> і </ HTML>.
HTML-документ складається з двох розділів - заголовка (між тегами < HEAD > і </ HEAD >) і змістовної частини (між тегами < BODY > і </ BODY >.
1.3.1. Розділ head. Технічна інформація про документ
Розділ HEAD містить технічну інформацію про сторінку - заголовок, її опис і ключові слова для пошукових машин, дані про автора і часу створення сторінки, базову адресу сторінки і т.д.
Єдиним обов'язковим тегом в розділі HEAD є тег TITLE. Текст, розташований між <TITLE> і </ TITLE>, відображається в рядку заголовка Web-браузера. Довжина тексту повинна бути не більше 60 символів, інакше він повністю не вміститься в заголовку Web-браузера.
<TITLE>Заголовок сторінки</TITLE>
ПОРАДА: Дуже часто текст між тегами <TITLE> і </ TITLE> використовується в результатах, які видаються пошуковим порталом, як текст посилання на цю сторінку. З цієї причини заголовок повинен максимально повно описувати зміст сторінки. Не слід писати щось на зразок «Головна сторінки» і т.п.
За допомогою одинарного тега <META> можна задати опис вмісту сторінки і ключові слова для пошукових машин. Якщо текст між тегами <TITLE> і </ TITLE> використовується як текст посилання на цю сторінку, то опис з тега <META> буде відображено під посиланням.
<META name="description" content="Опис вмісту сторінки">
<META name="keywords" content="Ключові слова через кому">
Крім того, тег <META> дозволяє заборонити або дозволити індексацію Web-сторінки пошуковими машинами.
<META name="robots" content="<Індексація>, <Перехід за посиланнями>">
У параметрі content вказується комбінація наступних значень:
· index - індексація дозволена;
· noindex – індексація заборонена;
· follow – дозволено переходити по посиланнях, які знаходяться на цій Web-сторінці
· nofollow – заборонено переходити по посиланнях;
· all – комбінація index і follow ;
· none – комбінація noindex плюс nofollow
За допомогою тега <META> можна вказати кодування тексту:
<META http-equiv="content-type" content="text/html; charset=windows-1251">
Для автоматичного перезавантаження сторінки через заданий проміжок часу слід скористатися властивістю refresh тега <META>:
<META http-equiv="refresh" content="30">
У цьому прикладі сторінка буде перезавантажена через 30 секунд.
Якщо необхідно відразу перекинути відвідувача на іншу сторінку, то можна вказати URL-адресу в параметрі url:
<META http-equiv="refresh" content="0" url="Нова URL-адреса">
1.3.2. Розділ body. Основна частина документу
У цьому розділі знаходиться весь вміст документа. Більшість тегів, розглянутих у цій главі, розташовуються саме між тегами <BODY> і </ BODY>.
Тег <BODY> має параметри:
· b gcolor - задає колір фону Web-сторінки. Навіть якщо кольором фону є білий, все одно слід вказати колір;
<BODY bgcolor="#FFFFFF">"Тіло" документу</BODY>
· b ackground - дозволяє задати фоновий малюнок для документа, шляхом вказівки URL-адреси зображення;
<BODY bа ck g round=”foto.gif” >"Тіло" документу</BODY>
· alink - визначає колір активного посилання;
· link - встановлює колір ще не переглянутого посилання;
· vlink - визначає колір вже переглянутого посилання;
· text - встановлює колір т екст у .
Лістинг 1.3. Параметри тегу BODY
<BODY bgcolor=”#CC2255” text=”000033” >
"Тіло" документу
</BODY>
Існують і інші параметри, які будемо розглядати по мірі вивчення мови.