Текстови хипервръзки към други сайтове
Текстовите хипервръзки се задават в следния формат:
<a href="Тук се изписва адреса, към който ще води връзката">Тук се изписва названието на връзката, което ще се вижда на екрана</a>
Например ако желаете да пуснете връзка от страницата си към страницата на PC-Tools, която да носи названието "Връзка към www.pc-tools.ucoz.com" ще трябва да напишете следния код:
<a href="www.pc-tools.ucoz.net">Връзка към www.pc-tools.ucoz.net</a>
В този случай в прозореца на браузъра ще се вижда оцветен в синьо и подчертан текста "Връзка към www.pc-tools.ucoz.net".
Наименованието на хипервръзката може да бъде всякакво, но е добре то да бъде подбрано така, че посетителите на страницата да разбират накъде ще ги отведе тя.
Връзката от примера води "навън" от вашата страница - към страницата на PC-Tools. Когато правите такива връзки е задължително да укажете пълния уеб-адрес, към който връзката отвежда. Това означава да започнете адреса с http:// както е в примера.
Ако хипервръзката води не към началната страница на някакъв сайт (например www.some-site.com), а към някаква вътрешна страница (например page3.html), тогава трябва да изпишете пълния адрес на тази страница, т.е. да укажете целия път по който се стига до нея:
<a href="http://www.some-site.com/page3.html">Връзка към страница page3.html от сайта www.some-site.com</a>
Текстови хипервръзки към страници от един и същ сайт
Освен към други сайтове хипервръзките могат да водят към други страници на вашия сайт - по този начин той ще изглежда като един цял документ. В този случай не е задължително да указвате пълния адрес на дадена страница. Как точно ще зададете адреса зависи от това в коя точно папка се намира страницата, към която пускате връзка.
Нека да имаме следната структура на сайт:
- файл index.html, който се намира в основната директория (папка)
- файл page1.html, който се намира също в основната директория
- файл page2.html, който се намира в папка folder1
Основна директория (основна папка)
index.html
page1.html
folder1 (папка, вложена в основната)
page2.html
Тогава хипервръзките между тези страници трябва да изглеждат така
- Връзката от началната страница index.html към страница page1.html, която се намира в същата директория (папка), съдържа само названието на страницата, към която води:
<a href="page1.html">Връзка към страница page1.html от началната страница index.html</a>
- Връзката от началната страница index.html към страницата page2.html, намираща се в папка folder1, трябва да съдържа наименованието на папката (folder1) и наименованието на страницата (page2.html), отделени с наклонена надясно черта:
<a href="folder1/page2.html">Връзка към страница page2.html, намираща се в папка folder1, от началната страница index.html</a>
- Връзката от страницата page2.html, намираща се в папка folder1, към началната страница index.html, трябва да съдържа две точки, наклонена надясно черта и наименованието на страницата, към която води (index.html):
<a href="../index.html">Връзка към страница index.html от страницата page2.html, намираща се в папка folder1</a>
Текстови хипервръзки към части от една и съща страница
Освен към външни страници и към страници от един и същ сайт хипервръзките могат да водят и към различни места от една и съща страница. Това е особено подходящо за дълги страници с разнообразна информация.
Хипервръзка към друга част от една страница се прави по следния начин:
- Първо трябва да създадете т.нар. котва и да я поставите на мястото от страницата, към което пускате връзка. Котвата трябва да има следния формат:
<a name="Произволно зададено название на котвата"></a>
Да речем, че искате да направите връзка към долната част на страницата си. Тогава създавате котва, която трябва да изглежда така:
<a name="bottom"></a>
Bottom означава "дъно" на английски, но това название е избрано само за удобство - то може да бъде и всякакво друго, например kotva1, dolu и т.н.
Сега поставяте така направената котва в долната част на секцията BODY на страницата. (Не забравяйте, че за да има ефект тази хипервръзка страницата трябва да е дълга.)
- След това в горната част на страницата поставяте самата хипервръзка, която ще води към вече направената котва. Тя трябва да изглежда така:
<a href="#bottom">Връзка към долната част на страницата</a>
Т.е. хипервръзката съдържа названието на котвата със знака диез (#) отпред.
Котвата която създадохме в горния пример е невидима - между началния таг <a name="bottom"> и затварящия таг </a> не изписахме никакъв текст. Ако желаете може да зададете название на котвата, което да се вижда на екрана, например:
<a name="bottom">Това е название на "котва", което ще се вижда на екрана</a>
Ако в една страница са използвани такива хипервръзки може да направите връзка към точно определено място от определена страница по този начин:
<a href="http://www.some-site.com/some-page.html#bottom">Връзка към долната част на страницата some-page.html от сайта some-site.com</a>
Текстови хипервръзки към е-mail адрес и файл на FTP сървър
Съществуват и други видове хипервръзки. Това са връзки към e-mail адреси и връзки към файлове, намиращи се върху FTP сървър.
- Кода за връзка към e-mail адрес е следния:
<a href="mailto:some-name@some-where.com">some-name@some-where.com</a>
Имайте предвид, че ако посетителя на страницата ви няма на компютъра си праграма за електранна поща няма да може да ви изпрати директно e-mail, а ще трябва да препише или копира адреса. Затова е препоръчително във видимата част на връзката да изписвате електранния си адрес, а не "изпратете имейл" или нещо подобно.
- Кода за връзка към файл, разположен на FTP сървър е:
<a href="ftp://some-address.com/some-file.zip">Връзка към файл в zip формат от FTP сървър</a>
Имайте предвид, че някои от FTP сървърите не са предоставени за публично ползване и изискват потребителско име и парола. Ако вие имате достъп до такъв сървър ще може да направите връзка към някакъв файл от сървъра, но ако посетителя на страницата ви няма име и парола за достъп няма да успее да изтегли файла.
Хипервръзки които се отварят в отделен прозорец
Повечето хипервръзки върху които щракате се отварят в същата страница, която гледате в момента на щракането. Така губите от поглед първата страница и трябва да натиснете "Back"-бутона от горното меню на браузъра, за да се върнете на нея. Понякога е много удобно дадена хипервръзка да се отвори в отделен прозорец. Вие може да отваряте всяка хипервръзка в интернет в отделен прозорец ако преди да щракнете върху нея натиснете бутон "Shift" (с надпис Shift и/или дебела стрелка, сочеща нагоре). Но много потребители в интернет не познават пълните възможности на клавиатурата.
HTML дава възможност да зададете отваряне на хипервръзка в нов прозорец чрез използване на атрибута target. Той може да приема няколко стойности.
- За да зададете отваряне на хипервръзка в нов прозорец трябва да присвоите на атрибута target стойност _blank.
Нека например да направим хипервръзка, която ще отваря в отделен прозорец сайта на Yahoo. Трябва да напишем следния код:
<a href="http://www.yahoo.com" target="_blank">Връзка към Yahoo, която ще се отвори в нов прозорец</a>
Ето я същата връзка в прозореца на браузъра: Връзка към PC-Tools, която ще се отвори в нов прозорец
Натиснете върху нея, за да видите ефекта.
- Другата стойност на target е _self. Тази стойност задава отваряне на хипервръзката в същия прозорец, който е отворен в момента на щракането върху нея, т.е. ефекта е същия, който е и по подразбиране.
- Като стойност на таргет може да се зададе и произволно избрано от вас име. Например target="myname" и т.н. По този начин всички връзки (например 5 на брой), на които присвоите атрибута target със стойност myname ще се отварят в един и същ прозорец.
Промяна на цвета на текстовите хипервръзки
По подразбиране всички хипервръзки са сини на цвят и подчертани. В урока за атрибутите на тага <body> научихте как се задава цвета на хипервръзките - това става чрез атрибутите
- link - задава цвят на непосетените връзки
- alink - задава цвят на връзките в момента на щракането в/у тях
- vlink - задава цвят на вече посетени връзки
Например, за да зададете бял фон, черен текст, син цвят на връзките (той е и по подразбиране - може да не се задава), червен цвят при щракане върху тях и отново син цвят за посетени връзки, трябва да напишете следния код:
<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff">
Сигурно сте забелязали, че в много сайтове връзките сменят цвета си когато отидете с мишката върху тях или от неподчертани се превръщат в подчертани и обратно /тези ефекти могат да се видят и в настоящия сайт/. Това се постига чрез използването на CSS (Cascading Style Sheets) - Каскадни набори от стилове. По-късно ще бъдат въведени уроци за използването на CSS.
Използване на изображения като хипервръзки
Освен текст за хипервръзки могат да служат и изображенията (картинки, снимки и др.). За да използвате изображения като хипервръзки трябва да напишете код, подобен на следния:
<a href="http://www.some-site.com"><img src="some-image.gif" /></a>
В случая използваме изображението some-image.gif за да направим връзка към сайта some-site.com
Повече за работата с изображения ще научите в урока за изображения.
