3 Теоретичні відомості
3.1. “Голова” документа
Д
ля
оголошення назви сторінки служать
команди:
<HEAD><TITLE> текст </TITLE></HEAD>
Назва - необов'язкова частина в документі, але окрім відображення в заголовку браузера імені сторінки, може включати необмежену кількість дуже корисних META-інструкцій. Звичайно вони розташовуються між двома першими мітками <head> і <title>. META-інструкція цей стандартний опис теми документа(для пошукових систем) або ж пряма вказівка для браузера. Приклад:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html"> - інструкція дає вказівку браузеру інтерпретувати документ як HTML-текст (кодування сучасні браузери розпізнають автоматично, тому використовувати в метах параметр charset більше не рекомендується.)
Простір між закриваючими мітками </title> і </head> часто використовується для зберігання операторів JavaScript и VBScript <scripts.htm> використовуючих глобальні змінні і функції, а також при упровадженні Каскадных таблиц стилей <style.htm> або для оголошення скажемо нестандартного розміру шрифту сторінки за допомогою тега <basefont size="5">
3.2. "Тіло" документа
Основний текст сторінки знаходиться після необов'язкового заголовка, між так само необов'язковими мітками: <BODY>...тіло сторінки...</BODY>.(Сучасні браузеры самі розпізнають де кінчається заголовок і починається тіло документа... але ми, дотримуватимемо традиції побудови web сторінок)
До того ж відкриваючу мітку можна використовувати для задання кольору або шпалер для сторінки :
<BODY BGCOLOR=GREEN> - зелений колір сторінки; або
<body background=Image.gif> для використовування як шпалери, фонового малюнка, наприклад з ім'ям Image.gif
Якщо сторінка займає місця більш ніж вікно браузера, то зсовуючи смугу прокрутки ви зсовуватимете так само і шпалери. Для того, щоб вони не уповзали використовуйте наступний синтаксис:
<body bgcolor="red" background="fon.jpg" bgproperties="fixed">
В даному прикладі ще до завантаження фонового зображення (fon.jpg) сторінка матиме червоний колір (підбирається в тон фонової картинки, адже зображення може мати великий час завантаження, а може і зовсім не завантажитись при поганому зв'язку.
3.3. Таблиці
Таблиці є найчудовішою особливістю HTML. Озброївшися невеликою кількістю знань, ви зможете використовувати їх, щоб створювати вражаюче різноманітність ефектів при проектуванні сторінок. Таблиця розміщується між тегами <table>...</table> . Наприклад:
|
<TABLEBORDER> |
|
|
|
<TR> |
<TH> Це |
<TD> приклад |
|
<TR> |
<TD> звичайної |
<TH> таблиці |
|
</TABLE> |
|
|
|
Це |
приклад |
|
звичайної |
таблиці |
<TR> -Новая рядок для необмеженого числа елементів таблиці.
< TH > -Ячейка для заголовків.
<TD> -Ячейка для звичайного тексту.
ROWSPAN - задає кількість осередків з'єднаних в колонку, COLSPAN - теж, в строчку. (З об'єднанням доведеться потренуватися: при об'єднанні, осередки, що залишилися(з'єднані в одну), повинні бути пропущені тобто якщо ви оголосили, що сполучаєте 6 осередків в рядку, наступний тег осередки вноситиме дані відразу в сьомий осередок цього рядка. Теж і з колонками.)
Складніший приклад:
<CENTER> <TABLE BORDER="15" BGCOLOR="YELLOW" width="75%">
<TR> <TH> rowspan="2">
В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений.
<TD bgcolor="lime"> <img src="lego.gif">
<TD>3 осередок першого рядка
<TR> <TD colspan="2">
Вторая рядок таблиці теж складається з трьох осередків, але оскільки тег першого осередку пропущений через оголошення в першому рядку, а 2 останні осередки теж з'єднані в одну, то в другому рядку використовується тільки одна мітка осередку.
</TABLE></CENTER>
Дає на екрані:
|
В першому рядку осередків в колонку з'єднано 2 осередки заголовків. В другому рядку таблиці тег першого осередку повинен бути пропущений. |
|
3 осередок першого рядка |
|
|
Другий рядок таблиці теж складається з трьох осередків, але оскільки тег першого осередку пропущений через оголошення в першому рядку, а 2 останні осередки теж з'єднані в одну, то в другому рядку використовується тільки одна мітка осередку. |
|
"BGCOLOR" – кольор фона- можна використовувати як для таблиці в цілому,так і для кожного осередку окремо. Це відноситься і до можливості
використовування як фон графічного файлу. Наприклад: <TD BACKGROUND="Image.jpg"> Таблиці автоматично розтягуються залежно від вмісту, але також можливе і оголошення їх розмірів. WIDTH - ширина таблиці
можна у відсотках, можна в пікселях. HEIGHT-висота.(теж і до осередків)
Також таблицею можуть управляти атрибути CELLPADDING="n" - визначає відступ від вмісту усередині осередків, і CELLSPACING="n" -ширина меж між осередками -все в пікселях. (Значення BORDER проте визначає, будуть межі присутній взагалі.)
|
1 |
2 |
|
3 |
4 |
Залишається додати, що таблиця як і картинки має можливість обтікання текстом (відносного вирівнювання) при використовуванні властивості ALIGN в теге TABLE з параметрами left, right Наприклад:
<table width="100" align="right" bgcolor="lime" cellpadding="20">
<tr> <td> 1 <th><font color="blue"> 2 </font>
<tr> <td bgcolor="red"> 3 <td> 4
</table>