Презентация: Графічні об ’ єкти і гіперпосилання у HTML – документах

Графічні об ’ єкти і гіперпосилання у HTML – документах Графічні об ’ єкти і гіперпосилання у HTML – документах Графічні об ’ єкти і гіперпосилання у HTML – документах Наприклад, Зображення в рамці Зображення в тексті Відеофільм 2. Адреси файлів 2. Адреси файлів 3. Вставляння гіперпосилань Вставляння гіперпосилань Вставляння гіперпосилань на текст Колір гіперпосилання Графічне зображення як гіперпосилання Посилання в межах сторінки Посилання в межах сторінки 4. Встановлення звуку і відеозображень Встановлення звуку і відеозображень 5. Поняття про динамічні ефекти Рухомий текст у смузі Рухомий текст у смузі Практична робота
1/22
Средняя оценка: 4.9/5 (всего оценок: 7)
Скачать (3119 Кб)
Код скопирован в буфер обмена
1

Первый слайд презентации: Графічні об ’ єкти і гіперпосилання у HTML – документах

2

Слайд 2

Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширенням bmp, jpg, gif, png та іншими і відображаються на web-сторінці за допомогою тега <IMG> з параметрами: <IMG SRC=”адреса графічного файлу” ALT=”альтернативний текст” ALIGN=”left” WIDTH=240 HEIGHT=200>

3

Слайд 3

<IMG SRC=”адреса графічного файлу” ALT=”альтернативний текст” ALIGN=”left” WIDTH=240 HEIGHT=200> Обов ’ язковим є лише перший параметр SRC Альтернативний текст – це текст, який виводитиметься замість картинки, якщо броузер не може прийняти графічний файл або якщо режим відображання графіки вимкнено. Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT – її розміри за шириною і висотою в пікселях або відсотках.

4

Слайд 4: Наприклад,

5

Слайд 5: Зображення в рамці

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

6

Слайд 6: Зображення в тексті

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

7

Слайд 7: Відеофільм

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

8

Слайд 8: 2. Адреси файлів

Для виклику віддалених файлів, тобто файлів які є на серверах у мережі Інтернет, адресу записують із зазначенням назви протоколу доступу http і URL адреси файлу, наприклад, SRC=” http://www.polynet.lviv.ua/ourpage.htm ” Для доступу file: SRC = " file :///диск:/шлях до файлу" Наприклад, SRC=”file:///d:/mycatalog/mypage.htm”. Назву протоколу можна інколи не писати, наприклад, SRC=”c:/windows98/forest.bmp”.

9

Слайд 9: 2. Адреси файлів

Якщо графічні чи інші файли є в тому ж каталозі, що основний html-файл, то достатньо зазначити лише назву файлу, наприклад, SRC=”myfoto.gif”. Якщо файл є в деякому сусідньому каталозі images, то шлях до нього подають так: “../images/myfoto.gif”. Отже, тег IMG може мати такий вигляд: <IMG SRC=”c:/windows98/forest.bmp” ALT=”Ліс”>.

10

Слайд 10: 3. Вставляння гіперпосилань

Гіперпосилання є двох видів: 1) на файл; 2) на деяке місце на певній сторінці: - початок сторінки (top), - кінець сторінки (bottom), - позначений текст.

11

Слайд 11: Вставляння гіперпосилань

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

12

Слайд 12: Вставляння гіперпосилань на текст

Приклад Мене звут <A HREF=”newinf.htm”>Світлана</A>. У наслідок цього на web-сторінці слово Світлана буде підкреслене і зображене іншим кольором.

13

Слайд 13: Колір гіперпосилання

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

14

Слайд 14: Графічне зображення як гіперпосилання

Для цього в середині тега <A>...</A> потрібно використати тег IMG. Наприклад, щоб фотографія Світлани, що є у файлі “svitlana.gif”, була в рамці й стала гіперпосиланням на файл newinf.htm, пишуть так: <A HREF=”newinf.htm” > <IMG SRC=”svitlana.gif” BORDER=8 > </A> Клацнувши на web- сторінці на фотографії Світлани, відкриємо файл newinf.htm з додатковою інформацією про неї.

15

Слайд 15: Посилання в межах сторінки

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

16

Слайд 16: Посилання в межах сторінки

Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так: <A HREF=”#початок” або “#кінець” або “#моя позначка”> </A>. наприклад, <A HREF=”#початок”>на початок</A>

17

Слайд 17: 4. Встановлення звуку і відеозображень

звукові файли мають розширення назв au, wav, mid, midi, ra, а відеофайли – avi, vivo, mpeg. наприклад, так: Тепер <A NAME=”mysound.wav”> послухайте мене (150К) </A>. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.

18

Слайд 18: Встановлення звуку і відеозображень

Щоб звуковий чи відеоефект повторювався декілька разів, у тезі <A> використовують параметр LOOP=n, де n – кількість повторень. Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег <BGSOUND SRC=”адреса звукового файлу”>. Інший спосіб – використайте тег <EMBED SRC=”адреса звукового файлу”> і, крім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.

19

Слайд 19: 5. Поняття про динамічні ефекти

Динамічними називаються ефекти, коли графічні зображення на web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст „біжить” уздовж екрана тощо.

20

Слайд 20: Рухомий текст у смузі

Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT=”висота в пікселях” і тіло BGCOLOR=”колір тла”. Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE> Наприклад, <MARQUEE BGCOLOR=”green” HEIGHT=40> Хай завжди буде сонце ! </MARQUEE> Текст „Хай завжди буду сонце !” буде рухатись в смузі справа наліво, заходитиме за край екрана і зявлятиметься справа. Цей тег варто застосовувати до заголовків сторінки.

21

Слайд 21: Рухомий текст у смузі

Ефект відбивання від країв екрана забзпечує параметр BEHAVIOR=”alternate ”, а зупинити рядок біля лівого краю екрана може значення цього параметра “slide”. Значення “right” параметра DIRECTION забезпечує ефект руху у протилежний бік. Обмеження кількості проходів задається параметром LOOP=n, де n – кількість проходів. Смугу можна відцентрувати за допомогою параметрів HSPASE i VSPASE. Швидкість руху задає параметр SCROLLAMOUNT=n, де n – конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко).

22

Последний слайд презентации: Практична робота

Похожие презентации

Ничего не найдено