Линкове: Свързване на две страници 1
Сподели урока
Линковете са най-често срещания елемент във всеки уеб сайт. Те са в основата на Интернет и чрез тях имаме възможност да посетим много и най-различни уеб страници, които по друг начин не бихме открили. Ежедневната ни работа в Интернет ни кара да се сблъскваме с линкове, които ни водят до най-различни ресурси. Някои от тях ни водят до снимки, други до новини, трети до видео клипове, но общото между тях е, че ни помагат да бъдем свързани със света и да откриваме полезна информация.
Освен това, линковете са страшно лесни за създаване. Отнема не повече от няколко секунди да създадем един линк, но ползите от него могат да бъдат безкрайни. В този урок ще видим как успешно да свържем две страници от нашия уеб сайт.
Структура на урока:
Какво представляват линковете?
Най-общо казано линка е елемент, който ни позволява да свържем две уеб страници (фиг.1). Също така линка ни дава възможност да “прескочим” до определен раздел в настоящата страница (фиг. 2).
В този урок ще разгледаме начини, чрез които да свържем две отделни страници.
За да поставим линк на нашата страница, трябва да използваме елемента <a>.
Този елемет идва под формата на двойка отварящ и затварящ таг и принадлежи към групата на инлайн елементите.
Структурата на един линк изглежда така:
- Отварящ таг – Начало на линка. Всичко, което е поставено между отварящия и затварящия таг се счита за съдържание на линка и се третира като такова;
- href атрибут – Този атрибут не е задължителен, но използването му е от съществено значение. Стойността на href е мястото, в което ще отведем посетителя, ако той кликне върху линка.
- Текст на линка – Това е визуалното представяне на линка. Може да бъде текст или изображение (графичен елемент). Обикновенно, когато преместим мишката върху линка тя се превръща в ръчичка (с показалец изпънат напред), което ни подсказва, че там може да бъде кликнато.
- Затварящ таг – Край на линка.
По подразбиране браузъра прилага свой стил върхи всички линкове на страницата като ги прави сини и ги подчертава. Това прави линковете да се отличават от останалата част от текста. Счита се за добра практика да се стилизираме линковете на нашата страница по подобен начин, защото това е едно от нещата, с които всеки е свикнал и очакваниятата на потребителите това да бъде линк.
Стилизирането на обикновен текст да изглежда като линк подвежда посетителите и ги кара да се чувстват излъгани.
Най-често линка може да ни отведе към:
- друга уеб страница от нашия сайт;
- конкретен раздел в настоящата страница;
- документ;
- изображение;
- видео;
- аудио;
Упражнение
В това упражнение ще използваме линкове, за да свържем две страници от нашия уеб сайт. Линка от “Страница 1” ще ни отведе до “Страница 2”, а линка от “Страница 2” ще ни върне обратно в “Страница 1”. Резултата ще изглежда така:
Стъпка 1
Като начало трябва да създадем два отделни HTML документа. За да бъдат нещата максимално прости и ясни, ще създадем двете почти идентични страници, но в реален уеб сайт съдържанието им може да се различава коренно едно от друго. Нека започнем.
Началната страница на нашия уеб сайт ще се казва index.html. В нея ще добавим едно h1 заглавие и кратък текстов параграф, в който ще направим линка отвеждащ ни към другата страница.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Начало</title> </head> <body> <h1>Начало</h1> <p>Линк към втора страница</p> </body> </html>
Втората страница ще се казва info.html и структурата ѝ ще бъде напълно идентична с първата.
info.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Информация</title> </head> <body> <h1>Информация</h1> <p>Линк към началната страница</p> </body> </html>
Стъпка 2
Запази двата html документа в една и съща папка.
Резултата до сега е следния:
Стъпка 3
Сега нека свържем тези две страници чрез линкове.
Отвори index.html и промени параграфа по следния начин:
... <body> <h1>Начало</h1> <p><a href="info.html">Линк към втора страница</a></p> </body>
Както виждаш в атрибута href на елемента <a> въвеждаме името на страницата, която искаме посетителя да отвори, в случай че кликне върху линка.
Интересно е да отбележа, че имаме възможност да видим къде ще ни отведе даден линк още преди да кликнем върху него. Нужно е само да поставим мишката върху линка, но без да го натискаме. Тогава в долния ляв ъгъл на прозореца можем да видим адреса на новата страница. Виж следващото изображение.
Както казах по-рано, когато посетителя постави мишката си върху линк, стрелката се превръща в ръчичка с изпънат показалец (виж снимката горе), което дава ясна индикация, че това текст, върху който може да бъде кликнато.
Чрез CSS имаме възможност да променим иконката на мишката, но това може да доведе до объркване, затова е добра идея да оставим този визуален индикатор непроменен.
Ok, обратно към упражнението.
Виж резултата, който имаме до сега и пробвай да кликнеш върху линка. Той ще ни отведе в страницата info.html.
Стъпка 4
След като пристигнахме успешно във втората страница на нашия сайт е време да се върнем обратно. За сега това няма как да стане, защото в страницата все още няма линк. Нека го създадем.
Отвори info.html и промени кода по следния начин:
... <body> <h1>Информация</h1> <p><a href="index.html">Линк към начална страница</a></p> </body>
Тук като стойност на атрибута href въвеждаме само името на началната страница, защото двата html документа са в една и съща папка.
Резултата е работещ уеб сайт с две страници свързани една към друга.
Използване на изображение за линк
Понякога ситуацията изисква използването на изображение като линк. Причините могат да бъдат най-различни, но най-често използваме изображение за линк, в случаите когато имаме галерия от снимки. Те обикновенно са в два варианта - малки (наречени още thumbnails) и големи, които ни предоставят по-подробен изглед. При кликане върху някоя от малките снимки се отваря нова страница, в която можем да видим същата снимка обаче в по-голям размер.
Друг път използваме графични елементи, които ни подсказват какво би се случило, ако взаимодействаме с тях (например иконката на принтер ни подсказва, че ще се отвори прозорец, от който можем да принтираме настоящата страница).
Използването на изображение (графичен елемент) като линк е изключително лесно в HTML. Всичко, което трябва да направим е да комбинираме елементите <а> (за линк) и <img /> (за изображение). Нека видим как става това.
Добра практика е, в случаите когато използваме изображение за линк, alt атрибута на изображението да описва мястото, в което линка ще ни отведе, а не самата снимка. По този начин даваме допълнителна информация на търсачките за дестинацията на съответния линк.
Упражнение
В това упражнение отново ще създадем две страници. В “Страница 1” ще сложим малка снимка, която ще служи като линк към “Страница 2”, където посетителя ще има възможност да види уголемен вариант на същата тази снимка (виж следващото изображение). В “Страница 2” ще добавим текстов линк, който да ни отведе обратно към “Страница 1”.
Ще създам 2 варианта на изображението. Първият вариант ще бъде малко по размери, което ще използваме в началната страница. То ще ни отведе към втора страница, където ще използваме по-голямото и детайлно изображение.
Обикновенно голяма част от уеб сайтовете използват едно и също изображение и за двата случая като контролират размерите му чрез CSS или чрез атрибутите width и height в елемента <img />. Това също е доста често срещана практика и има своите предимства и недостатъци. Тук обаче реших да използвам два отделни варианта на едно и също изображение.
Стъпка 1
Това е кода на двете страници.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Линк чрез изображение</title>
</head>
<body>
<h1>Линк чрез изображение</h1>
<p><img src="images/malka-snimka.jpg"
alt="Жълта кола" /></p>
<p>Отвори голям вариант на снимката.</p>
</body>
</html>
snimka.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Голямо изображение</title>
</head>
<body>
<h1>Голямо изображение</h1>
<p><img src="images/golqma-snimka.jpg"
alt="Жълта кола" /></p>
<p>Линк към началната страница.</p>
</body>
</html>
Резултата до тук е две приятно изглеждащи страници.
Остава да само да ги свържем.
Стъпка 2
Отвори index.html и огради изображението с елемент <а>. Също така нека направим текста “голям вариант” също линк, който да води към втора страница. Кода ще придобие следния вид:
... <h1>Линк чрез изображение</h1> <p><a href="snimka.html"><img src="images/malka-snimka.jpg" alt="Жълта кола" /></a></p> <p>Отвори <a href="snimka.html">голям вариант</a> на снимката.</p>
Сега отвори snimka.html и нека направим текста “началната страница”, който се намира в текстовия параграф под снимката, също линк който да води обратно към първа страница. Кода ще остане почти непроменен, освен новосъздадения линк.
... <p><img src="images/golqma-snimka.jpg" alt="Жълта кола" /></p> <p>Линк към <a href="index.html">начална страница</a></p>
Стъпка 3
Отвори началната страница в браузър и пробвай да кликнеш върху линковете. Всичко трябва да работи нормално.
В следващия урок ще разгледаме подробно няколко начина за стилизиране на линкове чрез CSS. Също така ще въведем още един изключително полезен атрибут към елемента <a>, който служи за предоставяне на допълнителна информация.
Надявам се, че намери много полезна информация в този урок. Ако имаш затруднение със стъпките в упражненията или искаш да добавиш нещо към урока, можеш да споделиш своя коментар чрез формата по-долу.
Използвани снимки
Снимка към урока: Jim Mead
Снимка към упражненията: Ben Fredericson
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Привет!
Написали сте нещата така, че да са ясни на Вас.
Я сега да се впуснем в по-важните подробности. Пояснете в подробности от т.1 до т.8 към index.html! Какво например означават думите около вмъкнатия сайт? Ние трябва ли да имаме собствен сайт, който да вмъкнем между таговете по посочения начин? Къде да прочетем кои думи и символи какво означават?
Също ужасно много ме интересува как да направя така, че когато купувачът натисне бутона за плащане чрез PayPal в моя сайт и плати, веднага на неговия имейл да пристигне моя продукт, който е просто Word документ с информация в него?