Графічні об’єкти і гіперпосилання

Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширенням bmp, jpg, gif та іншими.

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

При виборі зображення в першу чергу приймають до уваги об'єм отриманого файла і другу - якість зображення. При завантаженні Web-документа більшу частину часу займає якраз завантаження ілюстрацій, так що вітається люба економія. При виборі формату рекомендується створити два файла: в форматі GIF і в форматі JPEG з мінімально придатною якістю, після чого вибрати варіант, що має менший розмір.

Відображаються графічні файли на web-сторінці за допомогою тега <IMG> з параметрами:

<IMG SRC=” адреса графічного файлу“

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

ALIGN=”left“

WIDTH=240 HEIGHT=200 >

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

Однак нормальний режим обтікання вимагає, щоб між текстом та зображенням зоставався деякий проміжок. Задати величину проміжку, який обгортає текст можна за допомогою атрибутів HSPACE=кількість пікселів (по горизонталі), а створити вільний простір також над і під рисунком за допомогою атрибуту VSPACE= кількість пікселів. Розміри задаються в пікселях.

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

Гіпертектові посилання.

Гіпертекстові посилання є двох видів: на файл та на деяке місце на певній сторінці. Гіпертекстові посилання являються фрагментом тексту документа і тому задаються текстовими елементами, що визначаються за допомогою парного тега <А> … </A>. Цей елемент містить обов'язковий атрибут HREF= адреса URL. Замість адреси можуть бути слова top (початок сторінки) чи bottom (кінець сторінки), чи текст що є позначкою.

Коли гіперпосиланням є текст, то запис гіперпосилання буте мати вид:

<А HREF=file7.htm> інформація </A>. – в результаті на web-сторінці слово інформація буде підкреслене і зображене іншим кольором.

Колір гіперпосилання визначаються у тезі BODY параметрами:

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

В якості атрибуту використовується адреса URL документа, на який вказує посилання. Це посилання може показувати на довільний документ, що розташовується на будь-якому загальнодоступному вузлі мережі (Web-вузол, архів FTP тощо). Наприклад, відкриваючий тег посилання може мати вигляд

<А HREF=http://www.site.com/index.htm>

Адреса URL може бути задана в абсолютній формі, тобто розпочинатися із вказівки протоколу та адреси Web-вузла. Такий запис адреси використовується, коли необхідно направити відвідувача на інший Web-вузол, і розглядається як зовнішнє посилання. При використанні відносної адреси в посиланні задається тільки відносний шлях пошуку для документа.

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

<А NAME=”#початок”> текст гіперпосилання </A>. Аналогічно позначають деяке місце в кінці файлу: <А NAME=”#кінець”> текст гіперпосилання </A>.

Гіперпосилання можна використовувати для посилання на мультимедійні файли. Це зручно, так як в цьому випадку не приходиться чекати завантаження мультимедійних файлів при роботі з даною сторінкою. Якщо ж потрібно інтегрування об'єктів мультимедіа в Web-сторінку, то використовують парний тег <OBJECT> або нестандартний непарний тег <EMBER>, який також підтримується найбільш розповсюдженими браузерами.

Крім того при створенні web-сторінки можливо скористатись динамічними ефектами. Динамічними називаються ефекти, коли графічні зображення на web-сторінці зміюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишкою, текст «біжить» уздовж екрана тощо. Динамічні ефекти створюються за допомогою тегу <MARQUEE>…</ MARQUEE> , наприклад

<MARQUEE BGCOLOR=”green” HEIGHT=40> Я вивчаю нову тему </ MARQUEE>

Текст Я вивчаю нову тему буде рухатись в смузі висотою 40 справа наліво, заходитиме за край екрана і з’являтиметься справа, колір смуги зелений. Цей тег можна застосовувати до заголовків сторінки.

Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR=”alternate”, а зупинити рядок біля лівого краю екрана може значення цього параметра ”slide”. Значення ”right” параметра DIRECTION забезпечить ефект руху у протилежний бік.

Обмеження кількості проходів задається параметром LOOP=n, де n – кількість проходів. Смугу можна відцентрувати за допомогою параметрів HSPASE i VSPACE. Швидкість руху задає параметр SCRОLLAMOUNT=n, де n- конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко).

Порядок виконання роботи

1. Створити Web-сторінку на якій розташувати таблицю за зразком, та зберегти її на гнучкий диск під іменем tab.html (див. зразок 1).

Зразок таблиці 1

Типи HDD та їх ємність

Тип вінчестера	Назва	Кількість секторів на треці
MFM	Modified Fregnency modulation
RLL	Run Length Limited	25-26
AT-BUS		32-45
ESDI	Extended Storege Device Interface	більше 30

2. Таблицю розташувати по центру сторінки та встановити наступні параметри:

· Фон таблиці – синій, зелений або жовтий;

· Вирівнювання тексту в комірках – по центру;

· Заголовки стовпчиків з типом накреслення – напівжирний курсив;

· Розмір символів вибрати самостійно.

3. Знайти, в якій папці на вашому комп’ютері зберігаються графічні файли типу .GIF та доповнити сторінку графічним файлом шириною 150 пікселів і висотою 100 пікселів.

4. Створити величину проміжку над та під рисунком розміром 35 піксеклів.

5. Зберегти зміни у файлі tab1.html.

6. На основі створеної таблиці створити нову таблицю, об'єднавши необхідні комірки (див. зразок 2).

7. Створити невеличкий малюнок у графічному редакторі Paint та зберегти його в папці Електронний диск диску D:\ як файл типу .bmp та файл типу .gif. Порівняти їх розміри.

8. Файл з меншим розміром вставити на Web-сторінку перед таблицею. Для малюнку створити альтернативний текст (у якості тексту взяти назву рисунку).

Зразок таблиці 2

Типи HDD та їх ємність

Тип вінчестера та назва	Кількість секторів на треці
MFM Modified Fregnency modulation
RLL Run Length Limited	25-26
AT-BUS	32-45
ESDI Extended Storege Device Interface	більше 30

9. Відключити завантаження об’єктів мультимедіа (Сервис → Свойства обозревателя встановити відповідний параметр на вкладинці Дополнительно) та впевнитися що замість рисунку на сторінці з’явиться альтернативний текст.

10. Доповнити сторінку будь яким текстом таким чином, щоб текст обтікав малюнок праворуч.

11. Створити гіперпосилання на документи f1.html, f2.html та сайт університету http://www.dstu.dp.ua .

12. Зберегти файл на гнучкому диску під ім’ям tab2.html.

13. Переглянути файли f1.html та f2.html у вікні браузера, який встановлено на вашому ПК.

У звіті по роботі повинні бути тема та мета роботи; порядок дій по кожному пункту завдання; висновок про роботу. Під час захисту роботи студентом повинні бути представлені файли tab.html, tab1.html на диску, який вкаже викладач.

Питання для самоконтролю

1. Вкажіть, яких типів бувають графічні файли і чим вони відрізняються між собою.

2. Як доповнити Web-сторінку графічним об’єктом та вкажіть, які способи обтікання малюнків ви знаєте?

3. Назвіть основні атрибути тега <IMG>.

4. Як задати фоновий рисунок на сторінці?

5. Що таке гіперпосилання? Записати приклад відповідного тега.

6. Для чого використовуються таблиці на Web-сторінках? Назвіть теги для створення таблиці.

7. Які теги можливо застосовувати при форматуванні таблиці на Web-сторінках.

8. Як об’єднати декілька комірок в рядках або в стовпчиках таблиці?

9. Як створити динамічні ефекти?

10. Як встановити обмеження кількості проходів при створенні динамічних ефектів?