1.5. Урок 4: Робота з силками.

У першу чергу давайте поговоримо про посилання - переходах з однієї сторінки на іншу. Посилання це базовий елемент без якого неможливо уявити інтернет .

Створити html посилання дуже просто . Для цього використовується простенький елемент з одним атрибутом . Ну от наприклад :

<a href="http://www.vk.com"> Це посилання на сайт zvirec.com </ a >

буде виглядати в браузері :

Це посилання на сайт vk.com

Елемент а ( ancor ) є як би якорем , тобто текст , укладений між відкриває <a> і закриває </ a > тегом , буде текстом посилання .

Атрибут href це скорочення від " hypertext reference / гіпертекстове посилання " , спеціфірует місце , на яке виконується перехід за цим посиланням - зазвичай це internet -адресу та / або ім'я файлу.

Якщо потрібно зробити посилання між власними сторінками ?

Зробити html посилання між сторінками одного і того ж веб -сайту набагато простіше. Наприклад , якщо у нас є дві сторінки (наприклад page1.htm і page2.htm ) розташовані в одній папці , то код посилання з page1 на page2 буде виглядати так:

<a href="page2.htm"> Для переходу на page2 клацни тут ! </ a >

Тобто треба просто написати назву сторінки , на яку ми хочемо перейти .

Eсли сторінка page 2 знаходиться в папці " subfolder " , код посилання виглядає так:

<a href="subfolder/page2.htm"> Для переходу на page2 клацни тут ! </ a >

Так буде виглядати код html посилання зі сторінки page 2 на page1 ( у зворотний бік ) :

<a href="../page1.htm"> Для переходу на page1 клацни тут ! </ a >

Тобто поєднання " .. / " вказує як би на папку , розташовану на один рівень вище від даної позиції файлу , з якого робиться посилання .

А якщо треба зробити посилання всередині сторінки ?

Бувають випадки коли необхідно зробити посилання з початку сторінки в кінець або навпаки , або наприклад з змісту на глави і.т.д. Зробити її дуже просто! Необхідно помітити місце документа наступною конструкцією :

<! - Цей спосіб використовується при маркуванні заголовків - >

<h2 id="razdel1"> Розділ 1 </ h2 >

<! - А таку позначку можна поставити скрізь де знадобиться ->

<h2> <a name="razdel1"> </ a > Розділ1 : </ h2 >

Тепер ви можете посилатися на помічену область ( в даному випадку Розділ1 ) простою вказівкою її імені після клавіші #.

Ось як виглядатиме посилання на раздел1 :

<a href="#razdel1"> Посилання на Розділ 1 </ a >

Наведу більш наочний приклад:

<h1 > Зміст < / h1 > <br>

<a href="#razdel1"> Розділ 1: як стати багатим </ a > <br>

<a href="#razdel2"> Розділ 2: як стати щасливим </ a > <br>

<a href="#razdel3"> Розділ 3: як бути здоровим </ a >

<h2 id="razdel1"> Розділ 1: як стати багатим </ h2 >

<p> Для того , щоб стати багатим необхідно дуже багато трудитися ..... </ p >

<h2 id="razdel2"> Розділ 2: як стати щасливим </ h2 >

<p> Для того щоб стати щасливим , потрібно використовувати кожну хвилину ... </ p >

<h2> Розділ3 : <a name="razdel3"> </ a > як бути здоровим </ h2 >

<p> Для того щоб бути здоровим потрібно багато займатися фізкультурою ... </ p >

Ось результат в браузері :

Зміст

Розділ 1: як стати багатим

Розділ 2: як стати щасливим

Розділ 3: як бути здоровим

Розділ 1: як стати багатим

Для того щоб стати багатим необхідно дуже багато трудиться .....

Розділ 2: як стати щасливим

Для того щоб стати щасливим , потрібно використовувати кожну хвилину ...

Розділ3 : як бути здоровим

Для того щоб бути здоровим потрібно багато займатися фізкультурою ...

А можна зробити посилання на пошту ?

Як ви бачите , використовується mailto потім двокрапка і емаил одержувача . При натисканні на посилання запуститься поштова програма -клієнт із заповненим полем імені одержувача .

Парочка додаткових атрибутів:

TARGET - вказує де відкривати сторінку на яку веде html посилання . За умовчанням вона відкривається в тому ж вікні. Якщо хочеться щоб відкривалася в новому , слід написати target = " _blank" .

TITLE - вказує заголовок посилання , який з'являється при наведенні на неї.

Дивіться приклад:

<a href="http://www.zvirec.com" target="_blank">

Це посилання на сайт zvirec.com , відкриється в новому вікні

</ a > <br> <br>

<a href="http://www.zvirec.com" title="Учебнік створення сайту ">

Ця - теж на zvirec.com . При наведенні з'явиться заголовок.

</ a >

Дивіться на результат:

Це посилання на сайт zvirec.com , відкриється в новому вікні

Ця - теж на zvirec.com . При наведенні з'явиться заголовок.

Ну ось в принципі і все. Можете сильно не зациклюватися , у програмі Adobe Dreamweaver будь-яке посилання робиться одним натисканням мишки. Головне для Вас , зрозуміти що до чого , а зазубрювати не обов'язково ...

А чи можна змінити колір посилань?

Звичайно можна . Щоб змінювати колір посилань у всьому документі , існують спеціальні атрибути елемента BODY .

LINK - колір просто посилань.

ALINK ( Active Link ) - колір активних посилань (активна означає в момент натискання на неї)

VLINK ( Visited Link ) - колір вже відвіданих посилань

Всі кольори задаються або RGB - значенням в шістнадцятковій системі , або одним з 16 базових кольорів.

Приміром якщо при відкритті тіла документа , елементу body прописати :

<body link="red" vlink="green" alink="white">

то всі посилання в даному документі стануть червоними , вже відвідані посилання стануть зеленими а посилання в момент натиснення будуть білими.

А якщо потрібно щоб в якомусь місці посилання мала інший колір ? наприклад по всьому документу червоні , а саме в одному місці зелена?

Тоді потрібно всередині html посилання прописати вже знайомий елемент font з атрибутом кольору :

<a href="http://www.zvirec.com"> <font color="black"> Чорне посилання </ font > < / a >

Якщо зробити так , то дане посилання буде чорним .