Линкове: Свързване на две страници

Линковете са най-често срещания елемент във всеки уеб сайт. Те са в основата на Интернет и чрез тях имаме възможност да посетим много и най-различни уеб страници, които по друг начин не бихме открили. Ежедневната ни работа в Интернет ни кара да се сблъскваме с линкове, които ни водят до най-различни ресурси. Някои от тях ни водят до снимки, други до новини, трети до видео клипове, но общото между тях е, че ни помагат да бъдем свързани със света и да откриваме полезна информация.

Освен това, линковете са страшно лесни за създаване. Отнема не повече от няколко секунди да създадем един линк, но ползите от него могат да бъдат безкрайни. В този урок ще видим как успешно да свържем две страници от нашия уеб сайт.

Структура на урока:

Какво представляват линковете?

Най-общо казано линка е елемент, който ни позволява да свържем две уеб страници (фиг.1). Също така линка ни дава възможност да “прескочим” до определен раздел в настоящата страница (фиг. 2).

В този урок ще разгледаме начини, чрез които да свържем две отделни страници.

Линковете ни свързват с различни ресурси от нашия сайт.

За да поставим линк на нашата страница, трябва да използваме елемента <a>.

Този елемет идва под формата на двойка отварящ и затварящ таг и принадлежи към групата на инлайн елементите.

Структурата на един линк изглежда така:

Линка има лесна и разбираема структура

  1. Отварящ таг – Начало на линка. Всичко, което е поставено между отварящия и затварящия таг се счита за съдържание на линка и се третира като такова;
  2. href атрибут – Този атрибут не е задължителен, но използването му е от съществено значение. Стойността на href е мястото, в което ще отведем посетителя, ако той кликне върху линка.
  3. Текст на линка – Това е визуалното представяне на линка. Може да бъде текст или изображение (графичен елемент). Обикновенно, когато преместим мишката върху линка тя се превръща в ръчичка (с показалец изпънат напред), което ни подсказва, че там може да бъде кликнато.

    Мишката се превръща в показалец, за да ни каже, че тук може да бъде кликнато.

  4. Затварящ таг – Край на линка.

По подразбиране браузъра прилага свой стил върхи всички линкове на страницата като ги прави сини и ги подчертава. Това прави линковете да се отличават от останалата част от текста. Счита се за добра практика да се стилизираме линковете на нашата страница по подобен начин, защото това е едно от нещата, с които всеки е свикнал и очакваниятата на потребителите това да бъде линк.

Стилизирането на обикновен текст да изглежда като линк подвежда посетителите и ги кара да се чувстват излъгани.

Най-често линка може да ни отведе към:

  • друга уеб страница от нашия сайт;
  • конкретен раздел в настоящата страница;
  • документ;
  • изображение;
  • видео;
  • аудио;

Упражнение

В това упражнение ще използваме линкове, за да свържем две страници от нашия уеб сайт. Линка от “Страница 1” ще ни отведе до “Страница 2”, а линка от “Страница 2” ще ни върне обратно в “Страница 1”. Резултата ще изглежда така:

Две страници, които са свързани посредством линкове

Стъпка 1

Като начало трябва да създадем два отделни HTML документа. За да бъдат нещата максимално прости и ясни, ще създадем двете почти идентични страници, но в реален уеб сайт съдържанието им може да се различава коренно едно от друго. Нека започнем.

Началната страница на нашия уеб сайт ще се казва index.html. В нея ще добавим едно h1 заглавие и кратък текстов параграф, в който ще направим линка отвеждащ ни към другата страница.

index.html

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Начало</title> 
  8.     </head>
  9.     <body>
  10.         <h1>Начало</h1>
  11.         <p>Линк към втора страница</p>
  12.     </body>
  13. </html>

Втората страница ще се казва info.html и структурата ѝ ще бъде напълно идентична с първата.

info.html

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Информация</title> 
  8.     </head>
  9.     <body>
  10.         <h1>Информация</h1>
  11.         <p>Линк към началната страница</p>
  12.     </body>
  13. </html>
Стъпка 2

Запази двата html документа в една и съща папка.

Резултата до сега е следния:

Две нормални страници, които съдържат h1 заглавие и кратък текст.

Стъпка 3

Сега нека свържем тези две страници чрез линкове.

Отвори index.html и промени параграфа по следния начин:

ИзчистенПрозорец
  1. ...
  2. <body>
  3.     <h1>Начало</h1>
  4.     <p><a href="info.html">Линк към втора страница</a></p>
  5. </body>

Както виждаш в атрибута href на елемента <a> въвеждаме името на страницата, която искаме посетителя да отвори, в случай че кликне върху линка.

Интересно е да отбележа, че имаме възможност да видим къде ще ни отведе даден линк още преди да кликнем върху него. Нужно е само да поставим мишката върху линка, но без да го натискаме. Тогава в долния ляв ъгъл на прозореца можем да видим адреса на новата страница. Виж следващото изображение.

При поставяне на мишката върху линка имаме възможност да видим неговата дестинация.

Както казах по-рано, когато посетителя постави мишката си върху линк, стрелката се превръща в ръчичка с изпънат показалец (виж снимката горе), което дава ясна индикация, че това текст, върху който може да бъде кликнато.

Чрез CSS имаме възможност да променим иконката на мишката, но това може да доведе до объркване, затова е добра идея да оставим този визуален индикатор непроменен.

Ok, обратно към упражнението.

Виж резултата, който имаме до сега и пробвай да кликнеш върху линка. Той ще ни отведе в страницата info.html.

При клик върху линк се отваря нова страница

Стъпка 4

След като пристигнахме успешно във втората страница на нашия сайт е време да се върнем обратно. За сега това няма как да стане, защото в страницата все още няма линк. Нека го създадем.

Отвори info.html и промени кода по следния начин:

ИзчистенПрозорец
  1. ...
  2. <body>
  3.     <h1>Информация</h1>
  4.     <p><a href="index.html">Линк към начална страница</a></p>
  5. </body>

Тук като стойност на атрибута href въвеждаме само името на началната страница, защото двата html документа са в една и съща папка.

Резултата е работещ уеб сайт с две страници свързани една към друга.

Две страници, които водят една към друга посредством линкове

Понякога ситуацията изисква използването на изображение като линк. Причините могат да бъдат най-различни, но най-често използваме изображение за линк, в случаите когато имаме галерия от снимки. Те обикновенно са в два варианта - малки (наречени още thumbnails) и големи, които ни предоставят по-подробен изглед. При кликане върху някоя от малките снимки се отваря нова страница, в която можем да видим същата снимка обаче в по-голям размер.

Друг път използваме графични елементи, които ни подсказват какво би се случило, ако взаимодействаме с тях (например иконката на принтер ни подсказва, че ще се отвори прозорец, от който можем да принтираме настоящата страница).

Използването на изображение (графичен елемент) като линк е изключително лесно в HTML. Всичко, което трябва да направим е да комбинираме елементите <а> (за линк) и <img /> (за изображение). Нека видим как става това.

Добра практика е, в случаите когато използваме изображение за линк, alt атрибута на изображението да описва мястото, в което линка ще ни отведе, а не самата снимка. По този начин даваме допълнителна информация на търсачките за дестинацията на съответния линк.

В това упражнение отново ще създадем две страници. В “Страница 1” ще сложим малка снимка, която ще служи като линк към “Страница 2”, където посетителя ще има възможност да види уголемен вариант на същата тази снимка (виж следващото изображение). В “Страница 2” ще добавим текстов линк, който да ни отведе обратно към “Страница 1”.

Упражнение с използване на изображение за линк

Ще създам 2 варианта на изображението. Първият вариант ще бъде малко по размери, което ще използваме в началната страница. То ще ни отведе към втора страница, където ще използваме по-голямото и детайлно изображение.

Обикновенно голяма част от уеб сайтовете използват едно и също изображение и за двата случая като контролират размерите му чрез CSS или чрез атрибутите width и height в елемента <img />. Това също е доста често срещана практика и има своите предимства и недостатъци. Тук обаче реших да използвам два отделни варианта на едно и също изображение.

Стъпка 1

Това е кода на двете страници.

index.html

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Линк чрез изображение</title> 
  8.     </head>
  9.     <body>
  10.         <h1>Линк чрез изображение</h1>
  11.         <p><img src="images/malka-snimka.jpg" 
  12.             alt="Жълта кола" /></p>
  13.         <p>Отвори голям вариант на снимката.</p>
  14.     </body>
  15. </html>

snimka.html

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Голямо изображение</title> 
  8.     </head>
  9.     <body>
  10.         <h1>Голямо изображение</h1>
  11.         <p><img src="images/golqma-snimka.jpg" 
  12.             alt="Жълта кола" /></p>
  13.         <p>Линк към началната страница.</p>
  14.     </body>
  15. </html>

Резултата до тук е две приятно изглеждащи страници.

Две отделни една от друга страници страници.

Остава да само да ги свържем.

Стъпка 2

Отвори index.html и огради изображението с елемент <а>. Също така нека направим текста “голям вариант” също линк, който да води към втора страница. Кода ще придобие следния вид:

ИзчистенПрозорец
  1. ...
  2. <h1>Линк чрез изображение</h1>
  3. <p><a href="snimka.html"><img src="images/malka-snimka.jpg" 
  4.     alt="Жълта кола" /></a></p>
  5. <p>Отвори <a href="snimka.html">голям вариант</a> 
  6.     на снимката.</p>

Сега отвори snimka.html и нека направим текста “началната страница”, който се намира в текстовия параграф под снимката, също линк който да води обратно към първа страница. Кода ще остане почти непроменен, освен новосъздадения линк.

ИзчистенПрозорец
  1. ...
  2. <p><img src="images/golqma-snimka.jpg" alt="Жълта кола" /></p>
  3. <p>Линк към <a href="index.html">начална страница</a></p>
Стъпка 3

Отвори началната страница в браузър и пробвай да кликнеш върху линковете. Всичко трябва да работи нормално.

Вече можем да видим голям вариант на снимката и да се върнем обратно в предишната страница.

В следващия урок ще разгледаме подробно няколко начина за стилизиране на линкове чрез CSS. Също така ще въведем още един изключително полезен атрибут към елемента <a>, който служи за предоставяне на допълнителна информация.