Посилання на web-сторінках

Наша сторіночка може складатися з декількох документів. Один з них головний (index.html) - він відкривається першим і повинен обов'язково лежати на вашому сайті в інтернеті. Останні документи ви можете називати як завгодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Вони всі можуть лежати в одній директорії (теці), а можуть в різних.

За допомогою заслань ми зв'язуємо ці документи. Так з головної сторінки по засланнях ми можемо перейти на сторінку з фотографіями, з цієї сторінки ми можемо перейти назад на головну сторінку, або, допустимий, на сторінку з нашими віршами і так далі

Засланням на цих інші документи (частини нашої сторіночки) може бути текст (фраза, слово), а може бути і картинка. На цій сходинці ми розгледимо лише текстове заслання.

Спершу створимо новий документ (у нашому прикладі prf.html) в тій же директорії (теці) де знаходиться наш головний документ index.html.

Хай лекция1.html.doc - документ з вашими матеріалами. Тоді ми можемо безсоромно фразу "ознайомитися з теоретичним матеріалом по учбовому курсу" зробити засланням на лекция1.html.doc:

<a href="лекция1.html.doc"> фотографії </a>

Тег <a></a> робить засланням укладену в нього картинку або фразу (текст). Принципи прописування шляху ми вже знаємо:

(1) - <a href=" лекция1.html.doc "> ознайомитися з теоретичним матеріалом по учбовому курсу </a>

(2) - <a href="material/ лекция1.html.doc "> ознайомитися з теоретичним матеріалом по учбовому курсу </a>

(3) - <a href="http://www.NTUU.ua/лекция1.html.doc"> ознайомитися з теоретичним матеріалом по учбовому курсу </a>

У випадку (1) документ лежить в тій же директорії (теці), що і документ, в якому ми посилаємося на prf.html, у випадку (2) документ лежить в піддиректорії / material, у випадку (3) ми посилаємося на сайт http://www.NTUU.ua, де лежить потрібний нам документ.

Перші два приклади (1) і (2) - називають відносними дорогами. (3) - абсолютний, тобто вказаний повністю, включаючи ім'я сайту (у нашому випадку - http://www.homepage.ru/). Абсолютну дорогу ми використовуємо, коли посилаємося на чужі сторіночки, відносний ми використовуємо, коли посилаємося на документи усередині нашого сайту.

Для всіх заслань в нашому документі ми можемо прописати кольори: link - колір просто заслання, alink - колір активного заслання (що натискує), vlink - колір вже відвіданого заслання.

Як і колір для всього тексту в документі, кольори заслань ми прописуємо в <body>. У нашому прикладі кольору для просто заслання, активного і відвіданого, - однакові, але вони можуть бути різними - це на ваш розсуд.

Як ви пам'ятаєте, ми можемо задати різні кольори для різних блоків тексту в нашому документі (). Для текстових заслань ми теж можемо задати різний колір - це робиться за допомогою тега і його атрибуту color:

<а href="prf.html"> теоретичним матеріалом по учбовому курсу </a>

Звернете увагу, - прописується усередині тега <a></a>, якщо ви пропишіть інакше, то у вас не вийде задати вашому засланню колір відмінний від кольору інших заслань в документі.

У цій главі ми навчимося прописувати заслання на поштову скриньку (e-mail), а також взнаємо, як зробити підказку до текстового заслання, яке з'являтиметься при наведенні на неї.
Заслання на вашу поштову скриньку прописується небагато інакше, ніж заслання на інший документ (сторінку, сайт):

<а href=" mailto:[email protected]"> [email protected] </a>
Запам'ятаєте це раз і назавжди і не намагайтеся її прописати по іншому. Заслання на документ, картинку або файл - одна справа, а заслання на поштову скриньку - інше.

В mailto є ще деякі опції:

- ?subject=Тема листа

- &Body=Текст вашого повідомлення

- &[email protected],[email protected] (копії листа через кому)

- &[email protected],[email protected] (приховані копії листа через кому)

Всі разом це виглядатиме так:

<а href="mailto:[email protected]?subject=Hello&Body =text&cc= [email protected]&[email protected]"> [email protected] </a>

Тепер якщо ваш ненаглядний відвідувач натискуватиме таке заслання, то його поштова програма видасть йому бланк нового листа з вже заполнеными полями -

"Як зробити, аби при наведенні мишки на заслання була підказка?".

Атрибут title (не плутати з тегом <TITLE>) пропонує інформацію про елемент, для якого він встановлюється. Ми можемо встановити його, наприклад, для тега <a>:

<а href="ssilka.html" title="Ваша подсказка"> текст-заслання <file:///D:\Documents%20and%20Settings\user\ Мої%20документи\alex%20new\ НТУУ\ Прочие\steps\14step2.html> </a>

Наведіть курсор миші на слова "текст-заслання", і, якщо ваш броузер підтримує специфікацію Html 4.0, то ви побачите те саме бажане.

Справедливості ради, скажу, що читаючи специфікацію Html 4.0, я не обернула належної уваги на атрибут title (власне, до нових елементів і атрибутів я відношуся з великою обережністю, оскільки старі броузеры їх не розуміють).

Засланням може бути і картинка. Принцип заслання той же, що і у випадку з текстом, лише в тег <a></a> вставляється не текст, а картинка:

<а href="prf.html"><img src="primtocodephoto.gif"></a>

Якщо ви хочете зробити картинку засланням на вашу поштову скриньку, то принцип той же:

<а href="mailto:[email protected]"><img src="primtocodephoto.gif"></a>

Тепер поглянете в броузере, що у нас вийшло. Картинка primtocodephoto.gif стала засланням. Якщо ви відмітили (а якщо не відмітили, то звернете увагу): довкола картинки з'явилася рамочка. Цю рамочку можна залишити, якщо вам вона подобається, а можна прибрати, якщо ви задасте картинці атрибут border="0" (про нього ми вже говорили з вами).

Отже, питання перше: "Як задавати колір рамки довкола картинки?”

Колір рамки довкола картинки задається атрибутом bordercolor, наприклад:

У нашому прикладі я задала колір рамки червоним, ну, і, природно, що атрибут border (товщина рамки) не повинен дорівнювати нулю, якщо ви хочете бачити рамку довкола картинки.

Але, якщо ваша картинка буде засланням, то рамка довкола неї буде того кольору, який ми задали для заслань в тегу body за допомогою link, vlink, alink, тобто атрибут bordercolor в цьому випадку вже не впливає на колір рамки довкола картинки.

Питання другої: “Чи використовують професіонали рамки?”

Коли як, все залежить від ситуації. Може бути картинка, що обрамувала рамкою, додасть акуратності вашому сайту, і його оформлення лише виграє від цього. А може бути навпаки - вам ці рамки зовсім не потрібні, оскільки псують зовнішній вигляд вашого сайту, тоді їх можна прибрати. "Думайте самі, вирішуйте самі”, використовувати рамки довкола картинок чи ні.

Якщо ви вже досить помандрували по інтернету, то ви повинні були відмітити, що заслання може бути не лише на документ з розширенням *.html, але і на багато інших (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe і т.д:) Як це робиться? Та все за тим же відомим нам принципом:

<а href="http://www.melody.ru/music.mp3"> викачати пісню </a>

Знаєте, що буде при натисненні на таке заслання? У користувача з'явиться віконце, що пропонує зберегти йому музичний файл на його комп'ютері. Тобто якщо файл не є текстовим документом (*.doc, *.txt) або, наприклад *.html документом, то броузер вашого користувача обов'язково запропонує йому викачати такий файл. До чого я це? Відповідаю на дуже часте питання моїх читачів, як запропонувати відвідувачеві вашої сторінки зберегти музичний файл або програму.

До речі, ви, можливо, здивуєтеся, але якщо адреса вказана в такий спосіб:

<а href="http://www.melody.ru/"> музичний сайт </a>

То це означає, що у вказаному каталозі є файл начеб index.html, який завантажиться за умовчанням, коли користувач зайде за вказаною адресою.