Лекція 7
.pdf
Лекція №6
Поняття про динамічні об'єкти і гіперпосилання, вставка звуку в html-файл
Адреси файлів
Для виклику віддалених файлів, тобто файлів, які є на серверах у мережі Інтернет, адресу записують із зазначенням назви протоколу доступу http і URL-адреси файлу, наприклад,
SRC="http://www.polynet.lviv.ua/ourpage.htm".
Для доступу до файлів на локальному диску використовують
SRC="с:/windows98/forest.bmp".
Якщо графічні чи інші файли є в тому ж каталозі, що основний htmlфайл, то достатньо зазначити лише назву файлу, наприклад,
SRC="myfoto.gif".
Вставка гіперпосилань
Гіперпосилання є двох видів: 1)на файл;
2)на деяке місце на певній сторінці:
•початок сторінки (top),
•кінець сторінки (bottom),
•позначений текст.
Гіперпосилання вставляють за допомогою парного тега <А параметр>...</А>, де параметр HREF="адреса файлу". Тут замість адреси можуть бути слова top чи bottom чи текст, що є позначкою.
Приклад 1. Створення гіперпосилань на іншу сторінку
<html>
<body>
<p> <a href="page2.html"> Перехід </a> на іншу сторінку </p>
</body> </html>
Приклад 2. Створення гіперпосилань на web-сайт.:
<html>
<body>
<p> Відвідайте <a href="http://www.tk.te.ua"> ТЕХНІЧНИЙ КОЛЕДЖ ТНТУ </a>
</p>
</body> </html>
Гіперпосиланням може бути текст або картинка.
Розглянемо випадок, коли гіперпосиланням є текст. Нехай у реченні "Мене звуть Світлана" слово "Світлана" потрібно зробити гіперпосиланням на файл "file3.html", що містить додаткові відомості про Світлану. Це роблять так:
Приклад 3. Cтворення текстових гіперпосилань
<html> <!--Це файл file11.html-->
<head>
<title> Cторінка з гіперпосиланнями </title>
</head>
<body bgcolor="red">
Мене звуть <А HREF="file3.html"> Сергій </А>.
</body>
</html>
У наслідок цього на web-сторінці слово Сергій буде підкреслене і зображене іншим кольором.
Параметри LINK, VLINK, ALINK тега <BODY>.
Колір гіперпосилання визначають у тезі <BODY> параметрами:
LINK="колір" |
Колір гіперпосилання |
VLINK="колір" |
Змінює колір гіперпосилання після першого його |
ALINK="колір" |
використання |
Змінює колір активізованого гіперпосилання |
Приклад 4. Cтворення малюнків-гіперпосилань
<html>
<head>
<title>Cторінка з гіперпосиланнями</title>
</head>
<body bgcolor="red" > <А HREF="priroda.jpg">
<IMG SRC ="priroda.jpg" BORDER="8" style="color:blue; border:4px dotted" width=150 height=200>
</A>
</body>
</html>
Клацнувши на малюнку, відкриємо файл priroda.jpg, де цей же малюнок
розміщений у збільшеному вигляді.
Примітка. В даному прикладі атрибут border="8" задає рамку навколо файла. А параметр style="color:blue; border:4px dotted", дозволяє задати колір (color:blue), товщину (border:4px) та тип рамки навколо зображення (dotted – пунктирна лінія).
Будь-яку піктограму (картинку) можна вставити автономно чи як гіперпосилання, оскільки вона зберігається також у графічному файлі.
Приклад 5. Розміщення малюнків-гіперпосилань у блоці
<html>
<head>
<title>Cторінка з гіперпосиланнями</title>
</head>
<body bgcolor="red"> <div style="clear:left"> <a href="byket1.jpg">
<img src=" byket1.jpg" alt="" width="160" height="160" border="0"></a> <a href=" byket2.jpg">
<img src=" byket2.jpg" alt="" width="160" height="160" border="0"></a> <a href=" byket3.jpg">
<img src=" byket3.jpg" alt="" width="160" height="160" border="0" ></a>
</div> </body> </html>
Інші атрибути і параметри гіперпосилань
Атрибут HREF="" – обов’язковий атрибут тега <A>, який вказує адресу гіперпосилання використовує також і наступні параметри:
Параметр target="_blank" – відкриває гіперпосилання в новому вікні браузера:
Наприклад: <A HREF="inform.html" target="_blank"> вміст гіперпосилання </A>.
Параметр target="_self" – відкриває гіперпосилання в тому самому вікні, – це значення визначене по-замовчуванню і його можна не прописувати: <a href="page2.html" target="_blank"> </a>
Параметр title, який призначений для тексту спливаючої підказки, і який називається "заголовком гіперпосилання". Тому, якщо підвести
до посилання вказівник мишки, можна побачити відповідне спливаюче вікно.
Наприклад: <А HREF="priroda.jpg" title="Природа"> <IMG SRC ="priroda.jpg" BORDER=8 width=150 height=200> </A>.
Гіперпосилання в межах сторінки
Інший тип гіперпосилань - гіперпосилання в межах сторінки.
Насамперед потрібно позначити місце на сторінці, куди відбуватиметься перехід. Якщо з деякого місця перехід має виконуватися на початок сторінки, то в це місце html-файлу, що відповідає точці посилання, вводять тег, який називається якорем:
<А NAME="пoчаток"></A>.
Аналогічно позначають деяке місце в кінці файлу:
<А NAME="кінець"></А>.
Якір можна кинути в будь-якому місці тексту так:
<А NАМЕ="моя позначка"></А>.
Тепер на сторінці розміщують гіперпосилання на створені позначки (якори) так:
<A HREF="#початок" або "#кінець" або "#моя позначка"> текст гіперпосилання
</A>
Якщо одна сторінка займає декілька екранів, то в кінці сторінки можна вставити гіперпосилання для переходу на початок, наприклад, розглянемо фрагмент тексту:
Атепер можете перейти <А HREF="#Початок">Ha початок</А>
сторінки. На екрані браузера отримаємо речення з гіперпосиланням:
Атепер можна перейти на початок сторінки.
Приклад 5. Перехід на початок сторінки за допомогою зображення
<html>
<head>
<title>HTML зображення в ролі гіперпосилання</title>
</head>
<body>
<p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>текст</p> <p>
<p>текст</p> <a href="#"><img src="html-image-link.png" alt="" border="0"></a>
</p>
</body> </html>
Примітка. Згідно прикладу наведеного вище, натиснувши на кнопці зможемо перейти на початок сторінки.
Гіперпосилання на електронну пошту
Часто виникає необхідність включити до Web-сторінки посилання на адресу електронної пошти. Для цього в атрибуті HREF="" необхідно задати адресу електронної пошти у вигляді "mailto: адреса". Наприклад, щоб створити посилання на адресу kito@npu.kiev.ua, необхідно у код сторінки помістити такий контейнер: <A href="mailto: sait@npu.te.ua">. Текст, що розміщується у
контейнері <А>…</A>, може бути будь-яким, проте доцільно використовувати адресу E-mail, оскільки не всі користувачі сторінки можуть користуватись поштовими програмами, що встановлені на комп’ютері, з якого переглядається сторінка:
<A href="mailto: sait@npu.te.ua"> sait@npu.te.ua </A>
Гіперпосилання в CSS
CSS містить наступні параметри для зміни стилю гіперпосилань.
|
Властивістьо |
Значення |
|
|
|
|
A:link |
Визначає стиль для звичайного не відвіданого |
|
гіперпосилання. |
|
|
|
|
|
|
|
|
A:visited |
Визначає стиль для відвіданого гіперпосилання. |
|
|
|
|
|
Визначає стиль для активного гіперпосилання. |
|
A:active |
Гіперпосилання стає активним при натисненні на |
|
|
ньому. |
|
|
|
|
A:hover |
Визначає стиль для гіперпосилання при наведенні |
|
на нього мишкою. |
|
|
|
|
|
|
|
Приклад 5а. Підкреслення гіперпосилання і зміна його кольору
<html>
<head> <title>HTML-гіперпосилання</title> <style type="text/css">
A:link {text-decoration: none} // забирає підкреслення для гіперпосилань A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;} // робить гіперпосилання червоним і підкресленим при наведенні на нього курсора
</style>
</head>
<body>
<a href="2.html"> Текст гіперпосилання</a>
</p>
</body>
</html>
Приклад 5б. Підкреслені і надкреслені гіперпосилання
<html>
<head> <title>HTML-гіперпосилання</title> <style type="text/css">
A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;} // ссылка подчеркнутая, надчеркнутая и красного цвета
</style>
</head>
<body>
<a href="2.html"> Текст гіперпосилання</a>
</p>
</body>
</html>
Приклад 5в. Зміна розміру гіперпосилання при наведенні на неї курсора
<html>
<head> <title>HTML-гіперпосилання</title> <style type="text/css">
A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none}
A:hover {font-size: 24; font-weight: bold; color: red;} // ссылка изменит свой размер на больший
</style>
</head>
<body>
Текст, <a href="2.html"> текст гіперпосилання</a>
</body>
</html>
Приклад 5г. Зміна кольору підкреслення гіперпосилання
<html>
<head> <title>HTML-гіперпосилання</title>