Лабораторна работа№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 параметрами:
Як деяке графічне зображення зробити гіперпосиланням? Для цього в середині тега <А>...</А> потрібно використати тег IMG. Наприклад, щоб фотографія Світлани, що є у файлі "svitlana.gif", була в рамці й стала гіперпосиланням на файл newinf.htm, пишуть так: <А HREF = "newinf.htm"> <IMG SRC = "svitlana.gif" BORDER =8 > </A> Клацнувши на web-сторінці на фотографії Світлани, відкриємо файл newinf.htm з додатковою інформацією про неї. Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі. Інший тип гіперпосилань - посилання в межах сторінки. Насамперед потрібно позначити місце на сторінці, куди відбуватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в те місце html-файлу, що відповідає точці посилання, вводять тег, який називається якорем: <А NAME="#початок"> </А>. Аналогічно позначають деяке місце в кінці файлу: <А NАМЕ="#кінець"> </А>. Якір можна кинути в будь-якому місці тексту так: <А NАМЕ="#мояпозначка"> </А>. Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так: <А HREF= "#початок" або "#кінець" або "#моя позначка"> текст гіперпосилання </А> Якщо одна сторінка займає декілька екранів, то в кінці сторінки можна вставити гіперпосилання для переходу на початок, наприклад, розглянемо фрагмент тексту: А тепер можете перейти А тепер можна перейти на початок сторінки. 4. Вставляння звуку і відеозображення. Важливо пам'ятати, що звукові файли мають розширення назв au, wav, mid, midi, ra, а відеофайли — avi, vivo, mpeg. Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, так: Тепер <А HREF="mysound.wav"> послухайте мене (150К) </А>. Текст «послухайте мене (150К)» стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах. Щоб звуковий чи відеоефект повторювався декілька разів, у тезі <А> використовують параметр LOOP=n, де п -кількість повторень. Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC = "адреса звукового файлу">. Інший спосіб - використайте тег <EMBED SRC="адреса звукового файлу"> і, крім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо. 5. Поняття про динамічні ефекти. Динамічними називаються ефекти, коли графічні зображення на web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст "біжить" уздовж екрана тощо. Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT ="висота в пікселях" і тло BGCOLOR ="колір тла". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме: <MARQUEE BGCOLOR="green" HEIGHT = 40> Хай завжди буде coнцe!</MARQUEE> Текст "Хай завжди буде сонце!" буде рухатись в смузі справа наліво, заходитиме за край екрана і з'являтиметься справа. Цей тег варто застосовувати до заголовків сторінки. Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік. Обмеження кількості проходів задається параметром LOOP= n, де п - кількість проходів. Смугу можна відцентрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT= n, де п - конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко). Зауваження. Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script чи JavaScript. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх броузерах. Деякі теги і параметри для різних броузерів називаються по-різному. Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть. Хід роботи: 1. Відкрийте свою web-сторінку або створіть нову. 2. Вставте у свій файл гіперпосилання на об'єкти, описані у цьому параграфі: графічні, звукові та відеофайли, які доступні на вашому комп'ютері, а також на деякий html- файл, наприклад, file4.htm. 3. Застосуйте гіперпосилання для переходу на початок та кінець сторінки. 4. Застосуйте тег MARQUEE до одного з заголовків і поекспериментуйте із його параметрами. Основна література 1. Дэвид Маккормик Секреты работы в Windows Word, Excel. Полное руководство для начинающих. - Книжный Клуб «Семейного Досуга»: Харьков, 2007. – 238с. 2. Єрьоміна Н. В. Проектування баз даних: Навч. посібник. — К.: КНЕУ. 1998. —208 с. 3. Информатика для юристов и экономистов. / Симонович С.В. и др. - Спб: Издательство "Питер", 2001 - 620 с.: ил. Питання та завдання для самоконтролю та самоперевірки 1. Як вставити графічне зображення у web-сторінку? 2. Як вставити відеофільм у web-сторінку? 3. Які параметри може мати тег IMG? 4. За допомогою якого тега вставляють гіперпосилання? 5. Яке призначення параметрів LINK, VLINK, ALINK? 6. Як деяке графічне зображення зробити гіперпосиланням? 7. Які є види посилань у межах одної web-сторінки? 8. Що таке якори? 9. Як вставити у web-документ звук чи відеозображення? 10. Як запустити звук одночасно з відкриванням сторінки? 11. Як створити динамічний ефект рухомого тексту? 12. Які ви знаєте параметри рухомого тексту?
|
