Дефиницията на връзките в HTML се извършва с елемента a. Преди да ви покажа как се използва, имам някои общи съвети за хипервръзките. Не забравяйте да изберете добри текстове за връзката. Обикновено никой не се помага с простото назад. (Когато посетител идва от външна страница, той обикновено не знае какво означава назад). Опитайте да използвате описателни текстове за връзките.
HTML хипервръзките винаги проследяват един и същ принцип.
<a href="videos.html">Актуални видеа</a>
На a-елемента се присвоява атрибутът href. Този href от своя страна очаква целта на връзката като стойност. В предходния пример беше направена връзка към файла videos.html. Той се намира в същата директория като HTML файла, в който е дефиниран хипервръзката.
При дефинирането на хипервръзките важат същите правила, които бяха представени и в контекста на вграждането на графики.
Вие също не само можете да дефинирате вътрешни връзки към проекта. Също така може да се поставят хипервръзки и към външни файлове и домейни.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Текстът, който стои между отварящия <a> и затварящия </a> елемент, крайна сметка е текстът на връзката. По подразбиране този текст се представя подчертан от браузърите.
Укажете целевия прозорец
Когато кликнете върху хипервръзка, целевата му страница ще се отвори в текущия прозорец на браузъра. Това обикновено е напълно в ред. Обаче може да се окаже, че сте поставили връзка към външен домейн. Ако посетител кликне върху този линк, целевата страница трябва да се отвори в нов прозорец или раздел. Предимството на този метод е, че уебсайтът ви остава отворен на заден план.
Въпреки това не следва да отваряте всеки хиперлинк на вашата страница във външно прозорец, тъй като посетителите бързо стават нервни. Върху a-елемента се управлява целевият прозорец, в който да се отвори съответната цел. HTML първоначално предлага три стандартни стойности за target.
• _blank – Целевата страница се показва в нов браузърен прозорец.
• _self – Отваря целта в текущия браузърен прозорец.
• _parent – Можете да избягате от рамката. (Моля, обърнете внимание, че рамките в HTML5 не се поддържат. Все пак не бива да използвате тази техника повече, тъй като днес има по-добри алтернативи. Ако желаете да се запознаете по-подробно с рамките, ще намерите информация, например, на страницата http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Също така се използва във връзка с рамките. Можете да отворите целта извън набора от рамки.
Ето пример как да използвате атрибута target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
В този случай целевата страница http://www.psd-tutorials.de ще се отвори в нов прозорец/раздел. Същият ефект бихте постигнали, ако вместо резервираното име _blank използвате измислено име като halligalli. Въпреки това, когато използвате target, бих ви препоръчал да използвате едно от резервираните имена.
Задайте базата на връзките
Можете да зададете база на връзките в секцията head на HTML файла. Такава база провежда към това, че всички цели на връзките се показват в определен браузърен прозорец. Това отново е интересно, преди всичко във връзка с рамките. Все пак това е удобно също когато искате всички връзки да се показват в нов браузърен прозорец чрез _blank. За да представим това, помислете за списък с връзки. Целите им винаги трябва да се отварят в нов прозорец, щяха да изглеждат така:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Следователно трябва да зададете атрибута target на всяко a-дефиниране. Това, както виждате, не е особено ефективно. Особено неефективно става, ако след няколко месеца решите, че не искате целите на връзките вече да се отварят в нов прозорец. Тогава ще трябва да промените target атрибутите на всички връзки. Това може да се предотврати чрез споменатата база на целта. Тя се дефинира чрез елемента base в секцията head. На base елемента се присвоява атрибута target с желаната стойност. Ето пример за това как може да изглежда:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Това ви спестява много натискане на бутони.
Дефиниране на котва
Как можете да поставите хипервръзки към други файлове, вече сте виждали. Във HTML файл може се дефинират също така така наречени котви. След това можете да създавате връзки към тези котви. Практично е по-конкретно за обширни страници. Така че в началото на документа може да се дефинира съдържание, през което посетителите могат да прескочат до секциите, които са за тях важни, без да се налага да превъртат прозореца на браузъра.
Котвите се създават чрез елемента a. Всъщност дефинициите на котвите не получават атрибут href, а по-скоро се присвоява атрибут name.
<a name="seitenanfang">Съдържание</a> <a name="kapitel1">Съдържание Капител 1</a> <p>Тук следва много текст.</p> <a name="kapitel2">Съдържание Капител 2</a> <p>Тук следва много текст.</p>
Можете да изберете имената на котвите свободно. Препоръчвам обаче да ги избирате възможно най-кратки, да използвате само малки букви и да отбегнете от специални символи.
За да направите връзка към котва, трябва да дефинирате обикновена хипервръзка, както е показано в началото на този урок.
<a href="#seitenanfang">Към началото на страницата</a>
На атрибута href се присвоява като стойност името на котвата. Важно е обаче, че пред имената на котвите се добавя символа хаштаг.
Можете да поставите връзки към котви и между файлове. В следващия пример предполагам, че съществува файл news.htm, който се намира в същата директория като основния HTML файл. В news.htm е дефинирана котва с име seitenanfang. За да направите връзка към нея, след името на целевия файл (news.htm) се добавя решетка. След това следва името на котвата.
<a href="news.htm#seitenanfang">Към началото на страницата</a>
Така можете лесно да поставите връзки към котви във всяко произволно файла.
