HTML хипервръзка към друга страница. Как да вмъкна хипервръзка в HTML? Създаване и използване на хипервръзки в HTML

"Хипервръзки в HTML" е петият урок от урока по HTML. Този урок ще се фокусира върху използването на хипертекстови връзки. Хипертекстовите връзки се основават на всякакви уеб документ, така че всеки уеб администратор трябва да може да работи с връзки.

Правила за използване на хипертекстови връзки.

Хипервръзки в HTMLса необходими за свързване на различни документи, както в рамките на един и същи сайт, така и в целия Интернет. За създаване на хипертекстови връзки (хипервръзки) се използва дескриптор :

Целевият атрибут на етикета определя как ще се отвори нова страница и приема следните стойности:

• Връзка - определя появата на непосетени връзки.
• Alink - определя външния вид на вече посетените връзки.
• Vlink - определя външния вид на избраните връзки.

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

Здравейте скъпи посетители!

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

Нека започнем с най-простото и да преминем към по-сложното.

Редовна връзка и хипервръзка

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

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

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

Главната страница на моя ресурс трябва да се отвори в нов раздел. За да приложите тази опция, трябва или да използвате инструментите на вашия двигател, или да напишете следния ред в HTML кода.

Натисни тук

Връзката се създава с обикновен таг , вътре в който е самият адрес, към който трябва да бъде пренасочен потребителят, както и анкорът на линка (в примера по-горе котвата е фразата „кликнете тук“), който уточнява текста на линка, обясняващ какво искате ще получите, когато отидете на този адрес.

Вътре в етикета за връзка има и атрибут за отваряне на страницата в нов раздел.

Добра идея е да добавите таг за заглавие, така че посетителите да виждат тази подсказка при задържане на мишката и да разбират накъде отиват. Това се прави просто, вътре в отварящия таг , както в примера по-долу.

Ако погледнете изходния код на бутона, тогава всички сте много прости. Единствената разлика от обикновената хипервръзка е наличието на идентификатор, който се добавя в отварящия таг а към него от своя страна се записват стилове във файла style.css.

Виждаме това веднага след отваряне на етикета за връзка Посочен е id="button", който има зададени собствени стилове на дизайн. Останалата част от структурата е идентична с хипервръзката.

Здравейте скъпи читатели на сайта на блога. Днес ще говорим за как да създадете хипервръзки в html, научете как да използвате маркера и неговите атрибути href и target, нека научим как да превърнем изображение във връзка.

Нека започнем просто и да разгледаме създаването на редовни текствръзки. За да създадете текстова хипервръзка, е достатъчно да оградите всеки текст, който трябва да стане връзка таг за двойка . И в href атрибутЗа този етикет трябва да посочите адреса на целевата уеб страница в Интернет:

Ако страницата не използва css стиловеи не се прилагат допълнителни атрибути, тогава хипервръзките на страницата се показват по подразбиране, както следва:

• редовните връзки се показват в синьо;
• посетените връзки са маркирани в лилаво;
• активна хипервръзка (в която е щракнато този момент) се показва в червено, но тъй като времето между щракването върху връзката и началото на зареждането на нов документ е доста кратко, това състояние на връзката е много краткотрайно;
• Текстът на връзката е подчертан.

Интернет адреси

Пълният адрес съдържа съдържа интернет адреса на уеб сървъра и пътя до файла, който трябва да бъде извлечен. Например:

http://www.site.ru/catalog/page15.html

Тук www.site.ru е адресът на уеб сървъра, а /catalog/page15.html е пътят до файла на този сървър. По принцип пълните интернет адреси обикновено се използват само ако е необходимо да се създаде хипервръзка, сочеща към някои ресурси, разположени на друг уебсайт.

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

Интернет адресите са съкратени абсолютенИ роднина. Абсолютният адрес указва пътя до целевия файл спрямо основната папка на сайта. Такъв адрес започва със знака / (наклонена черта), което означава основна папка. Например адресът "/page15.html" сочи към файла page15.html, който се съхранява в основната папка на сайта. Или адресът "/catalog/page.html" сочи към файла page.html, който се намира в папката на каталога, вложена в основната папка на сайта.

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

Например адресът "page.html" сочи към файл, който е в същата папка като файла на текущата уеб страница. И адресът "catalog/page.html" ще отвори файла page.html, съхранен в папката на каталога, вложен в папката, където се съхранява текущата страница. Използвайки две точки в началото на адреса, можете да посочите папки от предишното ниво на влагане. Така например адресът ".../page.html" сочи към page.html, съхранен в папката, в която е вложена папката с текущата уеб страница.

Линк към пощата

С помощта на езика html можете да създавате пощенски хипервръзки, щракването върху което стартира програмата пощенски клиент. При посочване на адрес в атрибут hrefпоставете преди имейл "mailto:", т.е. нещо подобно: href="mailto: [имейл защитен]". И след дебелото черво преди пощенски адресне трябва да има интервали.

Напиши писмо

Как да направите изображение връзка

Тук приключвам да говоря за създаването на хипервръзки, само ще ви напомня основните точки:

1. Използва се за създаване на връзки таг за двойка със задължителен атрибут href, чиято стойност съдържа адреса на целевата страница: Текст;
2. Когато създавате връзка към поща в атрибута href, трябва да поставите „mailto:“ преди пощенския адрес: напишете писмо;
3. Ако трябва да създадете връзка изображение,след това просто поставете img тага вътре в тага : .

Хипертекстовите връзки са предназначени да свързват текст, изображения или други елементи на страница с други хипертекстови документи. Всички елементи на страницата на сайта, включително връзките, се създават от браузъра, който получава подробни инструкцииот кода на страницата, изпратен му от сървъра. Това е кодът за HTML език(HyperText Markup Language - „език за маркиране на хипертекст“) се състои от „тагове“, които описват вида, външния вид и местоположението на всички елементи на уеб страница. Стандартна хипервръзка се създава от браузъра, когато срещне например следния таг в кода на страницата: Text linkHere - началният таг за връзка, - затварящият. Отварящият етикет може да съдържа Допълнителна информация- "атрибути". В тази проста връзка атрибутът href съдържа адреса на страницата или документа, който ще бъде поискан, ако посетителят кликне върху връзката. Понякога не е необходимо да се уточнява пълен адрес- ако исканият документ се намира на сървъра в същата папка (или подпапка), тогава е достатъчно да посочите само името му или пътя до подпапката. Те се наричат ​​"относителни", те трябва например да изглеждат така: Текстова връзка Когато щракнете върху тази връзка, документът moreText.html ще бъде зареден от същата папка. И абсолютните адреси на връзки започват с протокола, например: Текстова връзка Тук "http" (HyperText Transfer Protocol - "протокол за прехвърляне на хипертекст") е обичайният адрес на документ в мрежата. И ако посочите протокола "mailto", тогава хипервръзката ще стартира вашия пощенска програма, вместо да отидете на: email-linkIn връзки към файлове на FTP сървъра, съответно посочете FTP протокола (File Transfer Protocol - „протокол за прехвърляне на файлове“): Връзка към архива

Друг атрибут на хипервръзка, който указва кой прозорец трябва да зареди това нов документ, като "цел". Ако можете да въведете правилен адрес в атрибута href, тогава target може да има само четири стойности: _self - страницата трябва да бъде заредена в същия прозорец или рамка. „Рамки“ се отнася до една част от прозорец, разделен на няколко части; _parent – ​​ако самата текуща страница е заредена от друг прозорец (или рамка), тогава тя има прозорец „родител“. И стойността _parent изисква страницата, към която сочи връзката, да бъде заредена в този родителски прозорец; _top - новата страница трябва да бъде заредена в същия прозорец. Ако този прозорец е разделен на рамки, те ще бъдат унищожени при зареждане и нова страницаще бъде единствената рамка в този прозорец; _blank - ще се отвори отделен прозорец за следване на връзката; Например:
Връзката ще се отвори в нов прозорец

Възможно е да направите хипервръзка, за да отидете не към друга страница, а към определен раздел от същия документ. За да се посочи такава „дестинация“ в html кода на документа, се използва anchor връзка: И връзката, която превърта документа до тази котва, изглежда така: Връзка към първата котва на страницата на страницата Разбира се, в html кода на друг документ, трябва да има такава връзка с котва с атрибут name="Anchor1".

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

Хипервръзката може да свързва страници в рамките на един и същ сайт или да сочи към всяка страница в Интернет. Когато създавате връзка към страници на други хора, винаги трябва да използвате абсолютния адрес на страницата (http://www.site.com/page.html). Ако се създава връзка към страница в рамките на сайт, за предпочитане е да използвате относителен URL (page.html, catalog/page.html). Когато правите графична хипервръзка, имайте предвид, че графиките може да не са достъпни за някои потребители, така че не забравяйте да включите подходящи текстови елементи.

Пример:

Хипервръзка в html страница

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

Пример:

Хипервръзка към пощата

Пример:

Отваряне на html страници в нов прозорец

Използвайки атрибута TARGET, можете да заредите страницата в нов прозорец на браузъра. Този атрибут се използва за задаване на името на прозореца. Името на прозореца се използва за сервизни цели. За да отворите страница в нов прозорец, използвайте константата _blank.

Пример:

Цвят на текста на хипервръзката

Атрибутите LINK, ALINK, VLINK задават цвета на шрифта за хипервръзките.

Атрибутът LINK се използва за подчертаване на хипервръзки, които все още не са били посетени от потребителя.

Ред на хипервръзка

Някои браузъри може да поддържат възможността за следване на хипервръзки с помощта на клавиша Tab. В този случай браузърът по подразбиране подчертава хипервръзките в реда, в който се появяват в текста на страницата. Можете да промените реда на преход, като използвате атрибута TABINDEX на етикета . За да включите хипервръзка в списъка, който описва новия ред на навигация, трябва да присвоите на атрибута TABINDEX положително цяло число в диапазона от 1 до 32767. За да изключите хипервръзка от списъка, трябва да присвоите произволно отрицателно число на атрибута. Когато потребителят натисне клавиша TAB, курсорът се премества към хипервръзката с най-ниската положителна стойност на индекса. Ако на няколко хипервръзки е присвоена една и съща стойност на индекса, първата избрана ще бъде тази, която е по-високо в текста на страницата.