Хід роботи:

1. Створіть html-файл із розповіддю про себе. Скористайтесь зразком прикладу 1. У списках зазначте свої уподобання, місця навчання, праці тощо.

2. Збережіть файл на диску як file3.htm і перегляньте його у броузері.

3. Переробіть файл file3.htm, використавши два види списків. Новий файл назвіть file4.htm. Перегляньте його.

4. Проведіть на сторінці лінії різної ширини.

5. У файлі file4.htm створіть таблицю з даними про себе. Новий файл назвіть file5.htm. Перегляньте його у броузері.

6. Поекспериментуйте з параметрами тега TABLE.

7. Об'єднайте деякі дві клітинки таблиці в одну.

8. Створіть ще одну таблицю без рамок, використавши тег <PRE>...</PRE>.

9. Удоскональте свою сторінку якнайліпше.

Основна література

1. Береза А. М. Основи створення інформаційних систем: Навч. по­сібник. — К.: КНБУ, 2001. — 214 с.

2. Березин С., Раков С. Internet у вас дома. –Спб.: ВНV. 1999. –736с.

3. Богумирский Б. Энциклопедия Windows 98. –СПб.: Питер Ком, 2000. –896с.

Питання та завдання для самоконтроля та самоперевірки

1. Яке призначення тега FONT?

2. Яких значень можуть набувати параметри тега FONT?

3. Які є типи списків?

4. Як створити ненумерований список?

5. Як створити нумерований список?

6. Як створити список означень?

7. Яке призначення тега TABLE?

8. Які параметри може мати тег TABLE?

9. Які теги формують у таблиці рядки, клітинки-заголовки і звичайні клітинки?

10. Як у таблиці об'єднати декілька клітинок в одну?

11. Який параметр використовують для вирівнювання елементів?

12. Яка особливість пари тегів <PRE>...</PRE>?

Лабораторна работа№3

Тема: Графічні об'єкти і гіперпосилання

Питання для обговорення: створити сторінку з гіперпосиланнями і динамічними ефектами.

Методичні вказівки для обговорення

1. Вставляння графічних і відеофайлів. Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширеннями bmp, jpg, gif та іншими і відображаються на web-сторінці за допомогою тега <IMG> з параметрами:

<IMG SRС="адреса графічного файлу"

ALT = "альтернативний текст"

ALIGN="left"

WIDTH=240 HEIGHT=200>

Дія тега. Обов'язковим є лише перший параметр SRC. Альтернативний текст - це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT - її розміри за шириною і висотою в пікселях або відсотках.

Зображення можна подати в рамці. Це рекомендують робити, якщо його використовуватимуть як гіперпосилання. Для створення рамки навколо зображення призначений параметр BORDER="товщина рамки в пікселях".

Праворуч і ліворуч від картинки, яку обгортає текст, можна зробити вільний простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".

За допомогою тега IMG можна вставити також відео-фільм, який запускатиметься в момент відкриття web-сторінки:

<IMG DYNSRC="адреса відеофайлу">

2. Адреси файлів. Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Інтернет, адресу записують із зазначенням назви протоколу доступу http і URL- адреси файлу, наприклад,

SRC = "http://www.polynet.lviv.ua/ourpage.htm".

Для доступу до файлів на локальному диску використовують протокол доступу file: SRC = "Ше:///диск:/шлях до файлу". Наприклад, SRC= "file:///d:/mycatalog/mypage.htm". Назву протоколу можна інколи не писати, наприклад, SRC = " с: / windows98 /forest .bmp".

Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC = "myfoto.gif". Якщо файл є в деякому сусідньому каталозі images, то шлях до нього подають так: "../images/myfoto.gif". Отже, тег IMG може мати такий вигляд:

<IMG SRC="c:/windows98/forest.bmp" АLТ="Ліс">

3. Вставляння гіперпосилань. Гіперпосилання є двох видів:

1. на файл;

2. на деяке місце на певній сторінці:

• початок сторінки (top),

• кінець сторінки (bottom),

• позначений текст.

Гіперпосилання вставляють за допомогою парного тега <А параметр>...</А>, де параметр HREF= “адреса файлу”. Тут замість адреси можуть бути слова top чи bottom чи текст, що є позначкою.

Гіперпосиланням може бути текст або картинка.

Розглянемо випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звуть Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "file2.htm" чи "newinf.htm", що містить додаткові відомості про Світлану. Це роблять так:

Мене звуть <А HREF = "newinf.htm"> Світлана</А>.

У наслідок цього на web-сторінці слово Світлана буде підкреслене і зображене іншим кольором.

Параметри LINK, VLINK, ALINK тега BODY. Колір гіперпосилання визначають у тезі BODY параметрами:

LINK = "колір"	Колір гіперпосилання
VLINK="колір"	Змінює колір гіперпосилання після першого його використання
ALINK = "колір"	Змінює колір активізованого гіперпосилання

Як деяке графічне зображення зробити гіперпосиланням? Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб фотографія Світлани, що є у файлі "svitlana.gif", була в рамці й стала гіперпосиланням на файл newinf.htm, пишуть так:

<А HREF = "newinf .htm">

<IMG SRC = "svitlana.gif" BORDER =8 >

</A>

Клацнувши на web-сторінці на фотографії Світлани, відкриємо файл newinf.htm з додатковою інформацією про неї.

Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі.

Інший тип гіперпосилань - посилання в межах сторінки. Насамперед потрібно позначити місце на сторінці, куди відбуватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файлу, що відповідає точці посилання, вводять тег, який називається якорем:

<А NAME="#початок"> </А>.

Аналогічно позначають деяке місце в кінці файлу:

<А NАМЕ="#кінець"> </А>.

Якір можна кинути в будь-якому місці тексту так:

<А NАМЕ="#мояпозначка"> </А>.

Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так:

<А HREF= "#початок" або "#кінець"

або "#моя позначка">

текст гіперпосилання

</А>

Якщо одна сторінка займає декілька екранів, то в кінці сторінки можна вставити гіперпосилання для переходу на початок, наприклад, розглянемо фрагмент тексту: А тепер можете перейти <А НREF="#початок">на початок</А> сторінки. На екрані броузера отримаємо речення з гіперпосиланням: