Файл: Курсовая работа Web, Матвиенко. Вариант 0033.doc

3.3. Таблиці

Таблиці є найчудовішою особливістю HTML. Озброївшися невеликою кількістю знань, ви зможете використовувати їх, щоб створювати вражаюче різноманітність ефектів при проектуванні сторінок. Таблиця розміщується між тегами <table>...</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>

Дає на екрані:

"BGCOLOR" – кольор фона- можна використовувати як для таблиці в цілому,так і для кожного осередку окремо. Це відноситься і до можливості

використовування як фон графічного файлу. Наприклад: <TD BACKGROUND="Image.jpg"> Таблиці автоматично розтягуються залежно від вмісту, але також можливе і оголошення їх розмірів. WIDTH - ширина таблиці

можна у відсотках, можна в пікселях. HEIGHT-висота.(теж і до осередків)

Також таблицею можуть управляти атрибути CELLPADDING="n" - визначає відступ від вмісту усередині осередків, і CELLSPACING="n" -ширина меж між осередками -все в пікселях. (Значення BORDER проте визначає, будуть межі присутній взагалі.)

Залишається додати, що таблиця як і картинки має можливість обтікання текстом (відносного вирівнювання) при використовуванні властивості 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>

3.4. Абзаци

На відміну від текстових документів переривання рядків в HTML-файлах не істотні. При прогляданні HTML-джерела в текстовому редакторі обривши рядки може відбуватися в будь-якому місці, але при перегляді в браузері це переривання буде проігноровано. Замість 68 пропусків браузер покаже в тексті тільки один, так що в цьому плані особливо можете не напружуватися, якщо тільки ви не використовуєте Авторський стиль.

Розбиття документа на складові задається за допомогою таблиць, міток форматування: <p> і </p> (від paragraf) а також <br> (від break). (Окрім цього можлива вставка примусових пропусків за допомогою команди:   (no break space) - для кожного пропуску.)

Звичайний текст рекомендується розташовувати в абзацах:

<p> текст</p>

В цьому випадку він буде виділений новим рядком. (Закриваючий тег необов'язковий. У випадку якщо він пропущений, наступний абзац почнеться з наступною відкриваючою мітки <P>, проте його вживання іноді доцільне, напри

клад для переривання вирівнювання)

Редагування тексту усередині абзацу може проводиться із застосуванням Логічних і Фізичних стилів форматування, причому Фізичні стилі для Чайника як бальзам на душу... Логічні - же вимагають чималого досвіду в обігу з різними браузерами.

Величезне значення в HTML має нагоду вирівнювання. Наприклад наступний рядок: <P ALIGN="CENTER"> Вирівнювання по центру</P> видасть на екрані :

Вирівнювання по центру

Для align допустимі значення: "сеnter", "right" і "justify"(рівномірний розподіл по всій довжині рядка. тільки для тексту). За умовчанням, браузер сам рівняє всі елементи по лівому краю. Вирівнювання може застосуються до тегам: <p>,<table>, до картинок і заголовків .

Так-же в HTML існує спеціальний тег вирівнювання: <сеnter>...</center> . Все що розташовано між цими мітками буде вирівняно так, як і по команді <p align="center">

3.5. Розмір шрифту

Для виділення заголовків в тексті існує мітка <Hрозмір>...заголовок...</H Hрозмір > (від head- голова). Де розмір заголовка міняється від 1 до 6 в порядку убування.(1- найкрупніший) Наприклад заголовок цього параграфа в HTML виглядає так:

<h4>розмір шрифта</h4>

Приведений тег виділяє свій заголовок відступом рядків. До нього можна застосовувати вирівнювання:

<h5 align="right">Заголовок п'ятого рівня</h5> (Закриваючий тег обов'язковий.)

Розмір шрифту в решті тексту задається за допомогою команд <font

size="n"> ... </font> Теги можуть бути вкладені один в одного в нескінченній

кількості. (не забувайте тільки їх правильно закривати!) Значення для n можуть лежати в межах від 1 до 7 за збільшенням розміру шрифту (протилежно розмірам заголовків) наприклад:

<p align="center"> <font size="5">Розмір шрифту = 5</font></p> .

Також можливе завдання розміру шрифту щодо шрифту "за умовчанням" у вигляді: size=+2 або size=-1. Звичайний «експлорерівський» розмір це 3, але у кожного користувача можуть бути і свої настройки. Розмір шрифту "за умовчанням" для конкретної сторінки можна задати тегом <basefont size=5> -розташованним в голові <head.htm> сторінки, для установки даного розміру відповідно рівному 5 (якщо у Вас Гігантоманія).

Для тексту знаходиться в кожному з осередків таблиці <table.htm> слід застосовувати власний тег <FONT>(це торкається і кольору <color.htm> шрифту)

Розміщення тексту буває і зовсім без міток, в цьому випадку стає неможливим його вірівнювання <p.htm> (що у принципі буває і непотрібне), а шрифт приймає розмір відповідний <font size="3">.

Кольор шрифта <color.htm> задається параметром color="кольор <colors.htm>" наприклад:

<font color=green size=+2>Размер шрифту = 5 </font>

видасть той же рядок що і в попередньому прикладі, тільки зелену. (кінцево якщо у Вас за умовчанням не вибрано 7 розмір шрифту ;-)

(Черговість в завданні параметрів будь-кого тега неважлива.)

3.6. З'єднання з іншими документами

Browser виділяє кольором або підкресленням ключові слова, що є зверненням до документа, або до частини документа позначеної «закладкой». Ця видима

частина посилання - вказівник, що дозволяє натисненням однієї клавіші миші швидко переміщатися від одного документа до іншого. Прихована частина посилання -адресна, дає інструкцію самому браузеру і описує адресу ресурсу.

Наприклад: Ссылка на Main.htm <приклад> -це видима частина посилання.

В текстовому редакторі дане посилання може виглядати так:

<а HREF="Main.htm">Ссылка на Main.htm</A>.

Тут ключові слова Посилання на Main.htm є гіперпосиланням на файл лежачий в тій же директорії, що і поточний документ. Посилання на файл NJStats.htm, що лежить у вкладеній теці AtlanticStates можна описати використовуючи слеш:

<а HREF="AtlanticStates/NJStats.htm">New Jersey</A>

Це так звані відносні посилання - даючі адреси ресурсів знаходяться на одному комп'ютері. Ви також можете використовувати абсолютне ім'я файлу (повна мережна адреса) ніби:

<а href="http://www.Atlantic.com/AtlanticStates/NJStats

.htm"> New Jersey</a>

Посилання які ви даєте на документи знаходяться в мережі повинні бути абсолютними. Всі внутрішні посилання (забезпечуючі роботу вашої сторінки) повинні бути відносними, що б уникнути постійних виправлень сторінки при перенесенні її в іншу теку.

Гіперпосилання можна давати не тільки на зображення і текст, а абсолютно на будь-які файли. Наприклад якщо ви хочете розмістити у себе посилання на піратський архів з грою Doom2 що знаходиться в одній директорії з вашою сторінкою то пишіть приблизно так: <а href="doom2.zip">Doom2</a> В цьому випадку браузер відкриває вікно з питанням про збереження даного файлу на диску користувача.

3.7. Фрейми

Подібно таблицям <table.htm> фрейми ділять екран браузера на частини. Відмінність полягає в тому, що сторінка містить фрейми, взагалі не є сторінкою,

оскільки не має тіла тобто тега BODY. В ній повинні розташовуються теги FRAMESET які створюють розмітку для завантаження на екран одночасно декількох WEB-сторінок. Ліва частина цього підручника що містить зміст є фреймом

в який постійно завантажена самостійна сторінка -contents.htm Правий фрейм за

вантажується різними документами залежно від викликаного гіперпосилання. Розглянемо приклад фреймового документа: