Лекція 7
.pdf
<style>
a:link { color: blue; text-decoration: none } a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style>
</head>
<body>
Текст, <a href="2.html">
<span class=link>текст гіперпосилання</span>
</a>
</p>
</body>
</html>
Приклад 5д. Гіперпосилання різного кольору
<html>
<head> <title>HTML-гіперпосилання</title>
<style>
a { font-size: 14px; color: red } a.link1 { font-size: 12px; color: green } a.link2 { font-size: 14px; color: blue }
</style> </head> <body link=#0000ff>
<p><a href=link1.html>Перехід 1</a>
<p><a href=link2.html class=link1>Перехід 2</a> <p><a href=link3.html class=link2>Перехід 3</a>
</body>
</html>
|
Приклад 5е. Підкреслення гіперпосилання і зміна його кольору
<html>
<head> <title>HTML-гіперпосилання</title>
<style>
.Red { font-size: 14px; color: red }
</style>
</head>
<body link=#0000ff>
<a href="..."> <div class="Red"> Red Link </div> </a>
</body>
</html>
Вставка звуку у html-файл
Важливо пам'ятати, що звукові файли мають розширення назв .au, .wav,
.mid, .midi, а відеофайли - .avi, .vivo, .mpeg. Щоб вставити звук чи відео, достатньо як значення параметра HREF у тезі гіперпосилання задати шлях до відповідного звукового чи відеофайлу, який вже є на диску, наприклад, так:
Приклад 6. Вставляння звуку
<html> <!--Це файл file13.html-->
<head>
<title>Cторінка з звуком</title>
</head>
<body bgcolor="red" >
Тепер <А HREF="mysound.wav"> послухайте мене (150К) </А>.
</body>
</html>
Текст «послухайте мене (150К)» стане гіперпосиланням, клацнувши на якому можна почути привітання, застереження, деяку інформацію, яка була заздалегідь записана, наприклад, за допомогою програми Фонограф у файл "mysound.wav" обсягом 150 Кбайт. Оскільки звукові та відеофайли завантажуються довго, рекомендують зазначати у гіперпосиланнях їхні обсяги в кілобайтах.
Щоб звуковий чи відеоефект повторювався декілька разів, у тезі <А> використовують параметр LOOP=n, де п -кількість повторень.
Фоновий звук або музика на сайті
Щоб звук з деякого файлу пролунав у момент запуску сторінки, потрібно використати тег:
<BGSOUND SRC = "адреса звукового файлу">.
Приклад 7. Фоновий звук для Internet Explorer
<html>
<head>
<title>Звук</title>
</head>
<bgsound src="music.wav" loop="1" volume="-1000" balance="0">
</head>
<body>
<img src="../images/bg_sound_img.jpg" alt="Музика на сайті" >
</body>
</html>
Тег <bgsound> розміщується в тезі <head>…</head>. Атрибут src="" – вказує шлях до звукового файлу в форматі wav (для конвертування можна використовувавти спеціальні програми, наприклад Video Convert Master), loop="" – визначає кількість програшів, volume="-1000" – регулює силу звуку, в даному випадку вказана величина буде вирахувана із поточного рівня звуку, встановленого на комп’ютерові користувача, balance="0" – це значення забезпечує однаковий баланс звучання лівого і правого динаміків.
Описаний в даному прикладі метод вставки фонового звука в HTML сторінку застосовується лише для браузерів Internet Explorer.
Інший спосіб для вставки звукового файлу слід використати
тег- <EMBED SRC=" адреса звукового файлу">, який міститься в тезі
<body> …</body>
в цьому випадку крім звукового ефекту, отримаєте на екрані магнітофонну панель для регулювання тривалості й сили звуку, припинення звучання, продовження тощо.
Приклад 7а. Фоновий звук для всіх браузерів
<html>
<head> <title>Музика</title>
</head>
<body>
<embed src="music.wav" autostart="true" hidden="false" loop="false"
width="150" height="20" align="bottom"> </embed>
</body>
</html>
Зауваження. В даному прикладі параметр autostart="" – визначає чи буде музика програватися автоматично при відкритті сторінки чи ні; можливі значення: true – так або false – ні, loop="" – чи будуть повторюватися програші; можливі значення: true – так або false – ні, hidden="" – визначає чи буде прихована панель управління плеєра Quick Time (саме Quick Time вимагається по замовчуванню) чи ні; можливі значення: true – так або false – ні; якщо не буде, то вказуються розміри панелі: width="" height="". При чому браузер Opera не відображає пульт.
Поняття про динамічні ефекти.
Динамічними називаються ефекти, коли графічні зображення на webсторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст "біжить" уздовж екрана тощо.
Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT="висота в пікселях" і тло BGCOLOR ="колір тла". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме:
Приклад 8. Вставка бігучої стрічки
<html> <!--Це файл file14.html-->
<head>
<title>Cторінка з бігучою стрічкою</title>
</head>
<body bgcolor="red" >
<MARQUEE BGCOLOR="green" HEIGHT = 40> Хай завжди буде coнце!</MARQUEE>
</body>
</html>
Текст "Хай завжди буде сонце!" буде рухатись в смузі справа наліво, заходитиме за край екрана і з'являтиметься справа. Цей тег варто застосовувати до заголовків сторінки.
Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR="alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide".
Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік.
Обмеження кількості проходів задається параметром LOOP= n, де п - кількість проходів.
Смугу можна відцентрувати за допомогою параметрів HSPASE і VSPACE.
Швидкість руху задає параметр SCROLLAMOUNT=n, де п - конкретне значення, яке вибирають з діапазону від 1 (повільно) до 10 (швидко).
Таким самим чином можна переміщати і зображення: <marquee behavior="scroll" direction="right"> <img src="bird.gif"> </marquee>.
Зауваження. Інші динамічні ефекти створюють за допомогою процедур з використанням мов програмування Visual Basic Script чи JavaScript. Немає єдиного стандарту мови HTML. Деякі теги чи їхні параметри не діють у всіх браузерах. Деякі теги і параметри для різних браузерів називаються по-різному. Якщо в написанні тега, назви параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть.