html_методичка
.pdf
відсотку, що означає відсоток поточної ширини вікна браузеру.
У прикладі 4.9 наведений лістинг вмісту файлу, котрий ілюструє використання тегу <HR> (рис. 4.9).
Рис. 4.9. Використання тегу <HR>
Приклад 4.9 <HTML> <HEAD>
<TITLE> Приклад використання тегу <HR> </TITLE> </HEAD>
<BODY>
<P>
Цей текст підкреслений простою горизонтальною лінією (тег HR) </P>
<HR>
<P>
Після цього тексту горизонтальної лінії немає. </P>
<P>
Зображена нижче горизонтальна лінія вирівняна за правим краєм вікна браузера і має довжину, рівну половині ширини вікна браузера:
</P>
<HR ALIGN=”RIGHT” WIDTH=”50%”>
20
<P>
Наступна лінія має висоту 5 пікселів, довжину 100 пікселів, не має відтінків: </P>
<HR ALIGN=”LEFT” NOSHADE SIZE=5 WIDTH=100> </BODY>
</HTML>
Питання для самоперевірки.
1.Чи існує різниця між відображенням документу в різних браузерах.
2.Які дескриптори використовуються для завдання рядку і абзацу. Чи є вони контейнерами.
3.Як у файлі HTML записується заголовок.
4.Який атрибут використовується для вирівнювання тексту.
5.Фізичні і логічні стилі. Їх відмінності.
6.Що задає дескриптор <VAR>.
7.В чому відмінності дескрипторів <FONT> і <BASEFONT>.
8.Як задається розмір шрифту.
9.Які параметри форматування тексту залишає дескриптор <PRE>.
10.За допомогою якого атрибута встановлюється товщина ліній.
Завдання до самостійної роботи.
1.Написати програму, котра б ілюструвала відмінності дескрипторів <P> i <BR>.
2.Написати програму, яка б наглядно відображувала можливості форматування тексту. Програма повинна містити різне вирівнювання тексту, текст різного розміру з використанням ефектів (підкреслення, закреслення, нахил, верхній, нижній індекс).
3.Написати програму, котра б наглядно відображала можливості додавання відформатованого тексту й ілюструвала необхідність застосування ліній для оформлення Web-сторінки.
21
§ 5. Гіпертекстові посилання (зв’язки). Контейнер <A>
Гіпертекстові посилання (гіперпосилання) встановлюють зв’язки між окремими частинами одного й того ж документу (внутрішні посилання) або різними документами. Будь-яке гіперпосилання можна розглядати як поєднання окремих точок в документі з іншими точками в тому ж самому чи в інших документах. Встановлення такого зв’язку передбачає, що при зверненні до вказаного посилання (клацанні по ньому мишкою), відбувається активація означеного в цьому посиланні об’єкта, тобто у вікні браузера відображається новий фрагмент тексту, запускається аудіо додаток, завантажується той чи інший файл тощо. Умовно можна сказати, що будьякий такий зв'язок (посилання) з’єднує дві точки: точку розташування початку зв’язку (саме посилання) і деяку іншу точку, названу метою (target) зв’язку. Остання часто є початком іншого документу.
Для організації гіперпосилань в HTML використовується контейнер <A> - скорочення від англійського anchors – якір. Нижче приведено опис двох синтаксичних конструкцій цього контейнеру – контейнер, що задає мету, і контейнер, котрий задає точку переходу:
Контейнер, що задає мету (якір)
<A HREF=”мета” TITLE=”текст”> якір </A>
Контейнер, що задає точку переходу
<A NAME=”ім’я”></A>
Атрибут TITLE не є обов’язковим. Текст, котрий задається в цьому атрибуті, відображається при наведенні на посилання вказівником мишки і зазвичай використовується для додаткового інформування користувачів про призначення посилання. Така інформація може знадобитися, наприклад, якщо замість текстового якоря буде використовуватися зображення.
Всі посилання, які містяться в документі, відображаються у вікні браузера іншим кольором – зазвичай синім, і виділяються підкресленням. При наведенні на посилання вказівника мишки в нижньому куті браузера відображається адреса, яка міститься в атрибуті HREF. У вікні браузера біде відображатися тільки вміст контейнера.
У прикладі 5.1 приведений лістинг вмісту файлу, котрий ілюструє найпростіший випадок завдання посилання (рис. 5.1)
Приклад 5.1 <HTML> <HEAD>
<TITLE> Приклад використання тегу <А> (завдання зовнішнього посилання)</TITLE>
</HEAD>
<BODY>
Тут можна подивитися різноманітні <A HREF=http://www.lib.ru> книги </A> за інтересами
<P>
22
Нижче приведене те ж посилання, але з використанням атрибуту TITLE: </P>
<P>
Тут можна подивитися різноманітні <A HREF=http://www.lib.ru TITLE=”книги в бібліотеці lib.ru”> книги </A> за інтересами
</P>
</BODY>
</HTML>
Рис. 5.1. Завдання посилання
В результаті натискання на посилання в прикладі 5.1 отримуємо
(рис. 5.2):
Рис. 5.2. Приклад зовнішнього посилання
Умовно всі посилання можна розділити на внутрішні, відносні (локальні) і зовнішні (віддалені).
Внутрішні – це посилання на об’єкти в межах одного документа. При використанні таких посилань необхідно задавати точку переходу, тобто використовувати контейнер <A> з атрибутом NAME. Внутрішні імена
23
задаються за визначеними правилами. По-перше, вони повинні бути унікальними в межах одного Web-документу. По-друге, перед посиланням на внутрішнє ім’я ставиться символ #. Наприклад, якщо кінцева точка задається контейнером <A NAME=”ім’я”> текст </A>, то посилання на цю точку буде задаватися контейнером <A HREF=”#ім’я1”> якір </A>.
Відносні – це посилання на інші ресурси (Web-сторінки чи інші файли) в межах одного й того ж Web-сервера.
Зовнішні – це посилання на ресурси інших Web-серверів.
В прикладі 5.1 використовується зовнішнє посилання. Слід звернути увагу на правильність завдання URL зовнішнього посилання. Для порівняння наведений наступний приклад, який відрізняється від попереднього тим, що URL зовнішнього посилання представлений не в повному форматі. Різницю можна замітити, якщо порівняти зміст, відображений в нижньому рядку вікна браузера. В даному випадку, в прикладі 5.2, вказані посилання будуть виглядати як локальні, тобто вони вказують на деякий ресурс www.lib.ru, що знаходиться в тому ж каталозі, що і файл самої Web-сторінки, яка містить лістинг приклада 5.2.
Рис. 5.3. Приклад неправильного завдання зовнішнього посилання
Приклад 5.2 <HTML> <HEAD>
<TITLE> Приклад неправильного завдання зовнішнього посилання
</TITLE>
</HEAD>
<BODY>
Тут можна подивитися різноманітні <A HREF=www.lib.ru> книги </A> за інтересами
<P>
Нижче приведене те ж посилання, але з використанням атрибуту TITLE:
24
</P>
<P>
Тут можна подивитися різноманітні <A HREF=www.lib.ru TITLE=”книги в бібліотеці lib.ru”> книги </A> за інтересами
</P>
</BODY>
</HTML>
В результаті натискання на посилання в прикладі 5.2 будемо мати наступну картину (рис. 5.3)
В прикладі 5.3 наведений лістинг вмісту файлу, котрий ілюструє найпростіший випадок завдання внутрішнього посилання (рис. 5.4)
Рис. 5.4. Завдання внутрішнього посилання
Приклад 5.3 <HTML> <HEAD>
<TITLE> Приклад завдання внутрішніх посилань)</TITLE> </HEAD>
<BODY>
Список рецептів <BR> Зміст <BR>
<A HREF=”#торти”> Рецепти тортів </A> <BR>
<A HREF=”#салати”> Рецепти салатів </A> <BR>
<A HREF=”#перші страви”> Рецепти перших страв </A> <BR> <BR>
<HR ALIGN=”LEFT” NOSHADE WIDTH=250 SIZE=5> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><B R><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR>
<A NAME=”торти”> Рецепти різноманітних тортів </A> <BR> (тексти рецептів)
25
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><B
R><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR>
<A NAME=”салати”> Рецепти різноманітних салатів </A> <BR> (тексти рецептів) <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><B R><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR>
<A NAME=”перші страви”> Рецепти різноманітних перших страв </A> <BR>
(тексти рецептів) <P> </BODY>
</HTML>
В результаті натискання на посилання, сторінка матиме вигляд (рис.
5.5)
Рис. 5.5. Внутрішнє посилання
Численні теги <BR>, присутні в цьому прикладі, вставлені для надання прикладу більшої ілюстративності, їх кількість може бути зменшено або збільшено.
Розглянемо випадок, коли маються окремі файли, що містять рецепти тортів (файл tort.html), салатів (файл salat.html) і перших страв (файл strav1.html). Для завдання посилань на ці файли створюється ще один файл, лістинг якого приведений в прикладі 5.4. Передбачається, що всі ці файли розташовані в тій же папці, що файл, текст якого наведений в прикладі 5.4 (рис. 5.6).
Приклад 5.4 <HTML> <HEAD>
<TITLE> Приклад завдання локальних посилань)</TITLE> </HEAD>
<BODY>
Список рецептів <BR> Зміст <BR>
<A HREF=”tort.html”> Рецепти тортів </A> <BR> <A HREF=”salat.html”> Рецепти салатів </A> <BR>
26
<A HREF=”strav1.html”> Рецепти перших страв </A> <BR> <BR>
<HR ALIGN=”LEFT” NOSHADE WIDTH=250 SIZE=5> </BODY>
</HTML>
Рис. 5.6. Приклад завдання локальних посилань
При натисканні, наприклад, на рецепти салатів, відкривається сторінка з рецептами, яка зберігається в тій же папці, що й основний файл (рис. 5.7).
Рис. 5.7. Результат локального посилання
В прикладі 5.5 наведений фрагмент файлу, котрий містить посилання на avi-файл і адресу електронної пошти. Передбачається, що avi-файл міститься у папці, яка знаходиться вище по відношенню до файлу лістингу
(рис. 5.8).
Приклад 5.5 <HTML> <HEAD>
<TITLE> Приклад посилання на avi-файл і адресу електронної пошти
</TITLE>
</HEAD>
<BODY>
<H1>Це сайт відмінника навчання курсанта Васькіна.</H1>
27
<P> Мені дуже подобається фільм про майбутніх захисників вітчизни <A HREF=”../Bezumtcy.avi”> Bezumtcy </A><BR>
Пишіть мені, хоч хто-небудь!!!
Моя адреса:
<A HREF=”mailto:vasya@ukr.net”> vasya@ukr.net </A> </BODY>
</HTML>
Рис. 5.8 Приклад посилання на avi-файл і адресу електронної пошти
В прикладі 5.6 наведений контейнер <A>, котрий містить внутрішнє посилання, розташоване в іншому html-документі поточного каталогу. Приклад 5.6
…
<A HREF=”tort_and_cakes.html#торти”> Рецепти тортів </A>
…
Питання для самоперевірки.
1.Призначення гіперпосилань. Який контейнер використовується для їх створення.
2.Що ще можна використовувати замість тексту в гіперпосиланнях.
3.Що таке якір.
4.Які типи посилань використовуються. Їх призначення і відмінності.
Завдання до самостійної роботи.
1.Написати програму, котра б створювала Web-сторінку з набором текстів пісень (не менше трьох, і одного виконавця). На початку сторінки необхідно навести перелік назв цих пісень, котрі будуть внутрішніми посиланнями на самі тексти пісень. Файл назвати song.html.
2.Написати програму з внутрішніми посиланнями. Основний файл з іменем singer.html, в котрому б приводилась інформація про виконавця-
28
співака і зовнішнє посилання на тексти його пісень. Вибір посилання повинен призводити до завантаження файлу song.html (завдання 1).
3.До наведених вище завдань додати зовнішні посилання на файли аудіо і відео. А саме, в кінці кожного тексту пісні йде посилання на саму пісню (файл avi), при активізації котрої відбувається загрузка звукового файлу або відеокліпу вказаної пісні.
29