Помогни ни да направим Uroci.net по - богат! Добави урок

HTML Урок - №7 - Хипер връзки

MasteR95   трудност:    видян: 26159

Текстови хипервръзки към други сайтове

Текстовите хипервръзки се задават в следния формат:

<a href="Тук се изписва адреса, към който ще води връзката">Тук се изписва названието на връзката, което ще се вижда на екрана</a>

Например ако желаете да пуснете връзка от страницата си към страницата на Yahoo, която да носи названието "Връзка към www.yahoo.com" ще трябва да напишете следния код:

<a href="http://www.yahoo.com">Връзка към www.yahoo.com</a>

В този случай в прозореца на браузъра ще се вижда оцветен в синьо и подчертан текста "Връзка към www.yahoo.com".

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

Връзката от примера води "навън" от вашата страница - към страницата на Yahoo. Когато правите такива връзки е задължително да укажете пълния уеб-адрес, към който връзката отвежда. Това означава да започнете адреса с 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>

    Ето я същата връзка в прозореца на браузъра: Връзка към Yahoo, която ще се отвори в нов прозорец
    Натиснете върху нея, за да видите ефекта.

  • Другата стойност на 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.



Коментари (2)

irensh на 30.09 2010 в 11:08ч.
Искам да попитам , мога ли да задам на едно изображение две различни препратки , съответно в два различни прозореца?
WEBLaif4eto на 19.07 2011 в 21:29ч.
irensh ще стане ако сложиш изображението 2 пъти

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com