Структура html-документа
Будь-який HTML-документ має задану структуру, яка представлена на рис. 10.2.
Перший тег HTML-документа <html>.
Розділ заголовка (визначуваного елементом head):
Назва документа eлемент title.
Спеціальна група елементів meta, призначена для опису і індексування документа пошуковими машинами, а також для правильного відображення змісту сторінки у браузері.
Елемент style задає правила таблиць стилів документа.
Розділ змісту HTML-документа визначається елементом body. У разі формування фреймової структури сторінки використовується елемент frameset.
Кінцевий тег HTML-документа </html>.
<html>
</html> |
Рис. 10.2. Структура HTML-документа
Приклад. HTML-документ з повною структурою документа.
<html>
<head>
<title>Перший приклад HTML-документа</title>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="">
<meta name="keywords" content="Web-сторінка, HTML-документ, Internet Explorer">
<style>
p.normal
{
text-align: center;
font-family: Tahoma;
font-size: 14pt;
font-style: italic;
font-weight: bold
}
</style>
</head>
<body>
<p class="normal">Це Ваш перший HTML-документ !!!!</p>
</body>
</html>
Результат цього HTML-документа при перегляді в браузере Internet Explorer представлений на рисунку. 10.3.
Рис 10.3. Простий HTML-документ з назвою «Перший приклад HTML-документа» і з відформованим змістом
10.3.1.Елементи розділу заголовка <head> … </head>.
У розділі заголовка повинна розміщуватися інформація, що описує основні властивості всього документа в цілому:
зазначення назви HTML-документа у заголовку браузера
вказівка кодування сторінки;
перерахування ключових слів, для індексації і реєстрації в пошукових системах;
опис таблиць стилів.
Елемент title.
Назва HTML-документа в заголовку браузера задається за допомогою елементу <title></title>.
Приклад. Використання елемента title.
<head>
<title>Мій перший HTML-документ</title>
</head>
В результаті отримаємо відображення назви HTML-документа в назві Internet Explorer, що наведено на рис. 10.4.
Рис 10.4. Використання елементу title
Елемент meta.
Група інструкцій <meta> призначена в основному для опису і індексування документа пошуковими машинами. Всі дані тегов meta не видно в процесі проглядання документа. Елементи <meta> вносяться до розділу заголовка гіпертекстового документа всередину блока <head>...</head>. Формат елемента складається тільки з початкового тегу <meta>. Кінцевого тега </meta> у цього елемента немає, він заборонений.
Приклад. Призначення кодування HTML-документа
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Windows-1251">
Такий вид тега meta використовується браузером для правильного відображення змісту сторінки і для правильного визначення пошуковою машиною мовного кодування HTML-документа.
Приклад. Стислий опис HTML-документа.
<META name="description" content="Мій перший HTML-документ">
Задається короткий опис HTML-документа, використовуваний роботами пошукових серверів для індексування і формування опису вашої сторінки в списку знайдених посилань під час пошуку інформації, яка пересікається зі змістом HTML-документа. Довжина змісту тега meta "description" не повинна перевищувати 200 символів.
Приклад. Список ключових слів, що описують HTML-документ.
<meta name="keywords" content="Web, павутина, пошук, Internet Explorer">
Задається список термінів і ключових слів, які є головним інструментом, за індексування HTML-документа пошуковою машиною. Довжина змісту тегов meta "keywords" не повинна перевищувати 1000 символів.
Приклад. Вказання мови кодування тексту HTML-документа
<meta http-equiv="Content-Language" content="ru">
Тепер напишемо HTML-документ. Запустимо програму «Блокнот». У вікні, що з'явилось, напишемо наступний текст HTML-документа. Результат наведено на рис. 10.5
Приклад. Вказання мови кодування тексту HTML-документа
<html>
<head>
<title>Мій перший HTML-документ</title>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META name="description" content="Мій добрий HTML-документ">
<meta name="keywords" content="перша сторінка, HTML-документ">
</head>
<body>
<p>Mій перший HTML-документ !!!!</p>
</body>
</html>
Рис. 10.5. Мій перший HTML-документ
В браузері Internet Explorer отримаємо наступне представлення цього HTML-документа, що наведене на рисунку 10.6.
Рис. 10.6. Відображення HTML-документа в браузері Internet Explorer