16. Хиперлинк (текст, слика, Е-маил)

Права моћ HTML докумената  налази се у њиховој способности да  се повезују са другим документима, деловима текста, сликама, видео и аудио записима. Везе (линкови) су обично подвучени или наглашени у документима да се истакне њихова појава. Када корисник кликне на неки линк аутоматски се отвара нови прозор са приказом документа на који линк указује.

Линковање на друге документе

Линковање на други документ (други URL) постиже се на следећи начин:

<a href="http://informatika.oshrs.edu.rs">Информатика и рачунарство</a>

Текст који се налази између <a> и </a> тагова ("Информатика и рачунарство") је текст на који корисник треба да кликне како се отворила нова URL адреса ( http://informatika.oshrs.edu.rs ).

Ево шта је значење појединих елемената при линковању:

<a

означава почетак линка

href

означава "hypertext reference"

http://informatika.oshrs.edu.rs

ово је URL документа на који се повезујемо

Основе програмирања       

текст који се појављује и на који можемо кликнути

/a>

крај линка

Дакле, све што вам је потребно да ваш документ повежете са неким другим документом јесте УРЛ адреса тог другог документа.

Линковање на именовану везу

Повезивање унутар истог документа

Да се линкујете на неки посебан део вашег документа, потребно је да најпре дефинишете место за линковање (anchor - сидро), а затим да направите линк до тог места. На пример, ако желите да се са врха вашег документа преместите на прву реченицу из четвртог параграфа вашег документа, ви ћете том вашем четвртом параграфу дати неко име, на пример "vazno" и креирати линк на то име.

Ево како би то постигли:

Најпре на почетку четвртог параграфа дефинишемо везу (anchor, сидро):

<a name="vazno">Прва реченица из четвртог параграфа</a>

А онда на врх нашег документа поставимо линк

<a href="#vazno">Линк на важну напомену</a>

Знак # који се појављује у линку заправо показује претраживачу да треба да оствари везу унутар истог документа, а не да иде на другу URL адресу (као код повезивања са другим документима).

Именована веза у другом документу

Могу наступити ситуације у којима ви желите да се повежете на неки други документ, али не на његов почетак, већ на неки специфичан део тог документа. За пример, претпоставимо да ви из вашег документа желите да се повежете са параграфом 2 из једног другог документа чија је URL адреса "drugiDokument.html".

Као прво, потребно је да поставите везу (anchor, сидро) у документ на који се повезујете (drugiDokument.html). Да то урадите, идете на други параграф тог документа и направите везу, рецимо овако:

<a name="drugiparagraf">Неки текст</a>

Сада, да би креирали линк на ову везу у вашем првом документу, идете на место у документу са којег желите да остварите линк направите линк на следећи начин:

 <a href="drugiDokument.html#drugiparagraf">Важна напомена</a>

Корисник ће приметити да је текст "Важна напомена" наглашен и да представља линк. Ако на њега кликне добиће на екрану други параграф из другог документа.

Апсолутно и релативно линковање

Ако у вашој улици сретнете суседа којег до тада нисте знали и који вас пита где станујете, ви му вероватно нећете издиктирати целу вашу адресу, већ ћете му рецимо рећи "друга кућа одавде". То се назива релативним адресирањем, јер сте му саопштили позицију (адресу) ваше куће у односу на место на којем се налазите. За разлику од тога, ваша пуна поштанска адреса, је довоља да вас нађе било ко, са било које позиције. То је ваша апсолутна адреса.

Исти се концепт користи и за адресирање на интернету помоћу УРЛ адреса. Ако се документи које повезујемо налазе у истом фолдеру (директоријуму) није потребно да саопоштавано целу адресу. На пример:

<a href="drugi_dokument.html">Иди на следећу страну</a>

Ово ће вас линковати на drugi_dokument.html који се налази у истом фолдеру као и документ који га позива.

Можете се линковати и на друге суседне фолдере, као у овом примеру:

<a href="../treci_dokument.html">Idi na treću stranu</a>

Ово ће вас линковати на документ који се налази у фолдеру за један ниво вишем од тренутног фолдера.

Препоручује се употреба релативног линковања кад год је то могуће, јер то олакшава манипулацију вашим страницама.

Отварање странице у новом прозору

Ако се жели да се повезана страна преко хyперлинк-а отвори у новом прозору, користи се атрибут target са вредношћу елемента "_blank“ 
target="_blank"

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Линк на друге врсте докумената

Осим на html стране, хиперлинк може да показује и на неке друге документе – филе-ове који нису типа html.
Ако броузер не уме да отвори такав документ, понудиће могућност преузимања (download) таквог документа или избор апликације која евентуално може да отвори такав документ – pdf документ или mp3, avi итд.
Такође, може да се направи линк за слање емаил-а на неку адресу
Линк за слање емаил-а

Оквир за текст

<html>
<body>
<p> Ово је линк за е-маил за наставника информатике и рачунарства:
<a href="mailto:informatika@oshrs.edu.rs?subject=Поздрављамо вас наставниче"> Пошаљи е-маил
</a>
</p>
</body>
</html>

Изглед на екрану је следећи:

Вежба

Отворите програм Notepad (Start->Accessories->Notepad)
У њему унесите следећи код
<html lang="sr">
<head>
<title>Документ HTML-у ученика </title>
</head>
<body BGCOLOR="#FFFF00">
<p> Ово је линк за е-маил за наставника информатике и рачунарства:
<h1><a href="mailto:informatika@oshrs.edu.rs?subject=Поздрављамо вас наставниче"> Пошаљи е-маил
</a></h1>
<p> Аутор
<address>
Милан Милошевић/milanmilosevic@oshrs.edu.rs
</p>
</address>
<p>
 <h1><a href="http://www.oshrs.edu.rs/">Основна школа "Херој Радмила Шишковић"</a> </h1>
 </p>
</body>
</html>
  • Замените текст у адресном тагу својим именом и презименом и својом е-маил адресом.
  • Сачувајте на диск рачунара фајл под својим именом и презименом користећи енглеску латиницу без размака са екстензијом  html.
  • Отворите у свом броузеру ову датотеку.
  • Позовите наставника

Comments