Како да вметнете хиперврска во HTML? Креирање и користење хиперврски во HTML. Како да направите слика врска во HTML, Vkontakte, на форумот и користејќи CSS Image како хиперврска за
Во оваа лекција ќе зборуваме за тоа како да направите врска во HTML. Линковите многу често се користат на веб-локациите; тие ви дозволуваат да се движите од една страница на веб-локација на друга. Особеноста на врските е тоа што тие можат да доведат не само до веб-страница, туку и до датотеки, слики итн.
Врските можат да бидат внатрешни и надворешни. Внатрешните врски водат до страници и датотеки во една локација. Надворешните врски водат до страници, документи и датотеки од трети страни. Во исто време, овие типови на врски се поставени речиси идентично.
Како да направите врска во HTML, примери1. HREF - е одговорен за тоа каде треба да води врската. Стандардна врска е наведена на следниов начин: Текст на врската.
2. TARGET - е одговорен во кој прозорец ќе се отвори документот. Стандардно нов документсе отвора во тековниот прозорец на прелистувачот. Атрибутот „цел“ ви овозможува да отворите врска во нов прозорец на прелистувачот. Овој атрибут ги има следните параметри:
- _blank - ја вчитува страницата во нов прозорец;
- _self - ја вчитува страницата во тековниот прозорец;
- _parent - ја вчитува страницата во матичната рамка;
- _top - ги откажува сите рамки и ја вчитува страницата во нов прозорец.
3. ИМЕ - се користи за навигација до одредена област во рамките на страницата. По симболот за хаш, клучниот збор (обележувач или ознака) е означен во наводници. За да отидете на оваа ознака, користете ја врската во која е напишана оваа ознака.
Пример за надворешна врскаОдете на веб-страницата
Одете на страницата Бесплатни лекции за WordPressПример 4: Сликите како врски.
Пример слика како референца
Одете на текст
Текстот на страницата...
Во овој пример, страницата е означена како „список“ користејќи го атрибутот „име“. Поврзувањето со оваа ознака ќе ве однесе до одредена област на страницата.
Преземи датотека Напиши писмоМожете да ја поставите бојата на врските користејќи атрибути што се наведени во ознаката „тело“ како параметри. Размислете за овие атрибути:
- врска - непосетена врска, по дифолт се прикажува сино;
- alink - активна врска, стандардно црвена;
- vlink - посетена врска, стандардно виолетова.
Така, го сфативме принципот со кој се создаваат врски во HTML. На линковите може да им се дадат специфични стилови. Можете да видите за тоа во лекцијата следејќи ја врската.
Мислам дека веќе разбираш што сакам да кажам ќе разговарамево ова поглавје.. и знаете што е врска, ако не, тогаш кликнете овде.. Постојат неколку видови на врски, како и „механизми“ за кликнување на нив. Во ова поглавје ќе се обидам детално да зборувам за тоа како да регистрирате врски, како и да навлезам во сложеноста на работата со нив.
Лирска дигресија:
Еднаш во војска, началникот на Генералштабот дојде кај мене и даде наредба, цитирам:
Донесете ми го тој документ, иако не знам каде е и што е!! Зошто стоите? Ајде да трчаме!! Доцнам!!!
Значи, што сакам да кажам со ова, за да не падне прелистувачот во ступор, како што направив тогаш, треба да знае: точното име на документот, патеката до документот и местото каде да се донесе, или подобро, каде да го отворите.
На овој моментсо помош на бележник направивме само еден HTML документ, јас го имам со име index.html (зошто избра толку чудно име index.html и зошто е потребно, види) не знам кој, ти излезе со името сам, но мислам дека си го користел запомни и знаеш каде е, освен ако не си ми шеф на кабинет :).. Во овој документ ќе се обидеме да направиме врска до друг документ што сè уште го немаме .. Значи, пред да се поврзете со него, треба да го креирате, бидејќи веќе знаете како да го направите тоа.
Сега знам дека имаш двајца html документи index.html и primer.html и дека сега имате минимален сет за понатамошна обука.
Текстуални врски.Ајде да се сретнеме таг (од сидро), можете да приложите текст или слика во него, што ќе стане врска до одредени документи. Атрибут на ознака href го специфицира името и патеката до документот до кој води врската.
Сè заедно е напишано вака:
Еве ги моите фотографии!!Како што веројатно разбравте, primer.html е името на нашиот втор html документ и натписот „Еве ги моите фотографии!!“ ова е дел од текст од датотеката index.html.
По аналогија со сликите, ознаката Патеката за врска до документот што се отвора е наведена со користење на истите методи:
Еве ги моите фотографии!! - Ова значи дека датотеката primer.html се наоѓа едно ниво повисоко од документот
Еве ги моите фотографии!! - документот се наоѓа на веб-страницата www.site.ru..
Па, ајде да го пробаме? Подолу е пример на два документи кои содржат врски кои укажуваат еден на друг.
Index.html датотека:
Правење врска до парче текст
Кажи ми, драго дете: во кое уво зуе?
Десно или лево?
Primer.html датотека:
Следете ја врската овде
Но, не погодив правилно! Имам зуење во двете уши.
Па јас не играм така...
Од примерот може да се види дека врските се означени во боја, стандардно сината е врска, а црвената е веќе посетена врска, овие бои може да се менуваат со помош на ознаката за отворање што ни е веќе добро позната< body >и неговите атрибути.
врска - боја на врската.alink - боја на кликната, активна врска.
vlink - боја на посетената врска.
Напишано е вака:
Продолжувајќи да зборуваме за бојата на текстуалната врска, вреди да се спомене дека, доколку е потребно, можете да натерате и целата врска и нејзините поединечни делови (фрази, зборови, букви) да бидат означени во боја користејќи позната ознака и нејзината боја атрибут. Сепак, ова не се однесува само на бојата, туку можете и одделно да ги поставите големината, стилот и фонтот на текстот. Но запомнете дека манипулацијата со боја мора да се направи внатре во ознаката овдеи не прекумерно, инаку бојата на врската ќе биде или стандардно или како што е наведено во ознаката
Index.html датотека:
Виножито
Погледнете ја фразата што ќе ви помогне да ги запомните местата на боите во виножитото
Р
Д
У
Г
Primer.html датотека:
Виножито
Секој
ловец
желби
знае
Каде
седи
фазан
Вратете се на главната страница
Една од вашите страници на страницата мора да се вика index.html. Тоа е датотеката со ова име што програмата робот ќе ја бара на вашата веб-страница кога некое лице ќе го внесе името на вашата веб-страница. Бидејќи страницата index.html ќе се отвори прва, направете ја главната страница. Останатите страници можеш да ги нарекуваш како сакаш... нема повеќе нијанси со имиња.
За регистарот... Кога ги пишувате патеката и имињата на документите, запомнете дека, на пример: Page.html, page.html и PAGE.html се имиња на различни документи! Истото важи и за имињата на обележувачите и сликите. Секогаш имајте го предвид случајот кога пишувате код; постои голема веројатност таквите имиња да не бидат препознаени од еден или друг прелистувач. Направете правило да пишувате и да го нарекувате сè мало со латински букви, тогаш ризикот од човечки фактор и програмски каприци ќе се сведе на нула.
Правило со три кликнувања...
Обидете се да формирате „дрво на врски“ на таков начин што посетителот на страницата може да стигне од која било страница до кое било место на страницата со минимален број кликови. Повеќе од три премини до посакуваното место на страницата веќе не се добри.Безкрајното вчитување на непотребни страници за некоја личност може да доведе до нервен слом и предвремено затворање на страницата. Заштедете време, пари и нерви на луѓето.
Главната карактеристика на HTML документот е присуството во него на хиперврски (или едноставно врски) до други документи, локации, датотеки, слики итн. Тоа е способноста да се вметнат врски до објекти надвор од страницата што го направи Интернетот толку популарен и удобен за употреба. Затоа, при креирањето на вашата веб-страница, секогаш запомнете ја „магијата“ на врските.
Во оваа лекција ќе зборуваме за тоа како да креирате врска до веб-локација, до нејзината индивидуална страница или датотека. Ќе научите како да го менувате текстот на врската, како да ја отворите во нов прозорец, како да направите врска до слика, што се надворешни и внатрешни врски и многу повеќе. Плус, веќе имате информации за работа со врски, кои ги допревме во претходните лекции (на пример, разговаравме за тоа како можете да ја промените бојата на врската во).
Генерално, ова упатство ќе го направи вашето разбирање за создавањето на врската целосно и доволно. Ќе разберете како да креирате хиперврска во HTML и зошто. И ќе научите да ги контролирате неговите својства.
Услови § 1. Врска до датотека, врска до страница, врска до страница
Многубројните прашања за тоа како врската до датотеката се разликува од врската до страницата или нејзината индивидуална страница, ме принудија да го дадам одговорот на истиот на самиот почеток на оваа лекција. Одговорот е: ништо. Сите наведени врски се надворешни на оригиналната страница и се креирани на ист начин.
За да не ги оставам мислите да дивеат, ќе ви покажам сè со пример.
Во прелистувачот ќе го видиме ова:
Во прелистувачот ќе го видиме ова:
Како што можете да видите, сите видови врски се креирани сосема исто. Единствената разлика е адресата на објектот што треба да се референцира. Сега да преминеме на главниот дел од лекцијата.
§ 2. Креирање надворешни врскиВрските се разликуваат едни од други во надворешни и внатрешни, како и текст и графички. Надворешните врски водат надвор од html страницата, внатрешните врски водат до различни делови од истата страница. Текстуалните врски се текст (по дифолт, тој е означен со сино и подвлечен), а графичките врски содржат слика како објект на кој треба да кликнете за да отидете. Сите овие типови на врски се креирани во HTML користејќи ознака (кратенка од сидро). Ајде да го разгледаме подетално.
За да креирате надворешна врска до локација, страница или датотека, користете го атрибутот ознака href. Овој атрибут ја зема како своја вредност URL-то на страницата, страницата или датотеката (за ова разговаравме погоре). Помеѓу ознаките е видливиот дел од врската (сидро на врската), односно она што го гледаме на екранот на прелистувачот. Сидрото на врската може да биде или обичен текст (текстуална врска) или графичка слика(врска-слика). Врската со слика се создава со вметнување позната ознака помеѓу ознаките и. Во принцип, синтаксата за создавање врска изгледа вака:
На пример, за да креирате текстуална врска до почетната страница на оваа страница, треба да го напишете следниов HTML код:
http://www.seoded.ru/">Главна страница на веб-страницата на страницата
Во прелистувачот ќе изгледа вака:
Како што напишав на самиот почеток на оваа лекција, бојата на текстот на врската (сидро) може да се смени со помош на . Во принцип, можете да ги примените истите правила за текстот на врските како и за главниот текст на страницата, односно да го означите со задебелени букви, закосени, да користите наслови итн.
§ 2.1 Графички врски (врски со слики)Како што реков погоре, за да креирате врска со слика, треба да користите . Пример за таква врска изгледа вака:
И прелистувачот ќе покаже:
Стандардно, прелистувачот ја опкружува сликата во графичка врска со рамка. Ако ова не е посакувано, тогаш граничниот атрибут на ознаката IMG треба да се постави на 0:
border="0">
Почетна страница
§ 3. Внатрешни врскиВнатрешните врски се користат за удобно навигација низ страници со многу содржина. Со нивна помош ја направив „Содржината на лекцијата“ (види на почетокот на оваа страница). Внатрешните врски се креираат со истиот принцип како и надворешните врски. Само вредноста на атрибутот href го одредува „сидрото“ на врската. „Сидрото“ се создава со атрибутот име:
name = "сидро име">текст
И името на „сидрото“ е поставено произволно. Овде вреди да се каже дека не сите прелистувачи ги разбираат руските имиња на „сидра“, затоа препорачувам да ја користите латинската азбука. Текстот помеѓу ознаките за да се создаде „сидро“ не е потребен и, најчесто, не е наведен.
„Јас сум сипаница“ се наоѓа на оние места на страницата каде што корисникот треба да оди откако ќе кликне на врската.
Како што реков погоре, во атрибутот href на внатрешна врска, наместо адресата, името на саканото „сидро“ е означено со задолжителниот хаш симбол (#) пред него. Да го погледнеме со пример.
Направив „сидро“ наречено zagolovok и го ставив во кодот на страницата веднаш до насловот на оваа лекција (Хиперврски во HTML). Кодот за прицврстување е како што следува:
name="zagolovok">
href="#zagolovok">До наслов
И во прелистувачот вака:
Ако забележавте, откако ќе кликнете на внатрешната врска до насловот, URL-то во лентата за адреси на прелистувачот се промени:
До оригиналната адреса:
http://www..html
http://www..html#zagolovok
И користејќи ја оваа функција, можете да се поврзете до одредена локација на страницата од кој било ресурс на Интернет! Односно, да речеме дека сте создале страница со долга статија за нешто (или сте објавиле голем број фотографии на страницата) и сте ја означиле со внатрешни врски. Додека бевте во , требаше да се поврзете не само со страницата со статијата (или фотографиите), туку и со одредено место на неа (или одредена фотографија). Користејќи ја опцијата со внатрешна врска во адресата, можете лесно да го постигнете она што ви треба.
§ 4. Апсолутни и релативни референциПочетна страница
Но, со релативни врски, тоа е малку покомплицирано. Во такви врски, адресата е означена или во однос на основната папка на страницата (онаа во која се наоѓа главната страница) или во однос на изворната страница. Таквите врски се потребни, на пример, ако страницата се наоѓа на домашен компјутер. Или ова не е страница, туку страница што е покажувач на други документи.
Да речеме дека треба да се повикаме на страницата klienty.html, која е во истата папка со почетна страницасајт. Тогаш релативниот код за врска ќе изгледа вака:
/klienty.html">Клиенти
Сега да претпоставиме дека во истата папка со главната страница има папка zakazy и страницата klienty.html е веќе во неа. Тогаш релативниот код на врската ќе стане вака:
/zakazy/klienty.html">Клиенти
Сега ајде да погледнеме како креираме хиперврски во однос на изворната страница. Да речеме дека имаме страница price.html (изворна страница) и од неа треба да се поврземе со страницата klienty.html. Постојат следниве типични опции:
1. Страниците price.html и klienty.html се наоѓаат во истата папка.
klienty.html">Клиенти
2. во root фолдерот на страницата, страницата price.html се наоѓа во папката zakazy едно ниво погоре).
Кодот ќе изгледа вака:
../klienty.html">Клиенти
Две точки покажуваат дека треба да се преселите од тековната папка на повисоко ниво.
3. Страницата klienty.html и папката zakazy се наоѓаат во root фолдерот на страницата, папката mebel е во папката zakazy, страницата price.html е во папката mebel (т.е. страницата klienty.html во однос на оригиналната цена.html страница е за две нивоа повисока).
../../klienty.html">Клиенти
Тоа е, секое ниво е означено со две точки и коса црта „/“.
4. во основната папка на страницата, страницата klienty.html лежи во папката zakazy (т.е. сега страницата klienty.html во однос на оригиналната страница price.html лежи едно ниво пониско).
zakazy/klienty.html">Клиенти
Во овој случај, точките и косиите не се користат.
5. Страницата price.html (оригинална страница) и папката zakazy се наоѓаат во root фолдерот на страницата, папката mebel е во папката zakazy, страницата klienty.html е во папката mebel (т.е. сега клиентот .html страницата е во однос на оригиналната цена.html страницата се наоѓа на две нивоа подолу).
zakazy/mebel/klienty.html">Клиенти
6. Во root фолдерот на страницата има две папки: zakazy и oplata. Страницата klienty.html е во папката zakazy, оригиналната страница price.html е во папката oplata (односно, двете страници се во различни папки едно ниво под основната папка на страницата).
../zakazy/klienty.html">Клиенти
За да креирате врска до е-пошта, треба да ја замените URL-то во вредноста на атрибутот href со адреса на е-пошта што го означува протоколот (mailto:). А потоа кога ќе кликнете на оваа врска, ќе се отвори прозорец програма за поштасо е-маил адресата внесена во полето „До“. Во HTML кодот изгледа вака:
mailto: [заштитена е-пошта]"> Мојата пошта
И во прелистувачот е така.
Здраво, драги читатели на блог-страницата! Како што знаете, за успешно промовирање на веб-локација и зголемување на нејзината позиција во резултатите од пребарувањето, неопходно е да се изврши висококвалитетна оптимизација на веб-страницата. Концептот „“, кој, пак, е поделен на внатрешен и надворешен, е нераскинливо поврзан со концепти како „внатрешни и надворешни врски на страницата“. Затоа, за нас е многу важно да знаеме колку линкови треба да има на страницата, како да го провериме нивниот број, како да ги отстраниме непотребните линкови од страницата и да ги блокираме од индексирање, како да ја зголемиме масата на линковите итн. За да одговориме на сите овие и други прашања во врска со внатрешните и надворешните врски, ајде прво да разбереме што е врска (или хиперврска) во HTML.
Во оваа статија ќе ви кажам што е врска, како да направите хиперврска во HTML на веб-локација, како да отворите врска во нов прозорец, како да креирате врска до е-пошта (e-mail) и како да направи линк до слика. Ние, исто така, ќе ги допреме концептите како html ознаки и атрибути на хиперврска, сидро за врски, HTML сидро и хаш врски. Значи, да започнеме.
Што е врска (хиперврска).Ако хиперврската води до веб-страница или датотека што не постои (избришана, преместена) или нејзината адреса е неточна, тогаш таквата врска се нарекува расипана врска. Не треба да има скршени врски на страницата, бидејќи тие ги доведуваат во заблуда посетителите и, откако кликнале на таква врска, лицето веројатно нема да се врати на вашата страница. Ќе зборуваме повеќе за тоа зошто се појавуваат скршени врски, како да ги најдете и поправите, во посебна статија. Сега да продолжиме.
Како да направите врска (хиперврска) во HTML на веб-локација.Многу е лесно да се поврзете со друга страница на вашата или друга страница. За да креирате хиперврска, треба да му кажете на прелистувачот која е врската и да ја наведете адресата на документот до кој ќе води. Ова е направено со користење на HTML ознака и потребниот атрибут href:
Овде, URL е адресата на документот на кој треба да се оди. И текстот за хиперврска лоциран помеѓу ознаките И, се нарекува сидро за врски и е видливо за посетителот на веб-страницата. Покрај фактот што текстот на врската (сидро) го информира читателот каде ќе се изврши транзицијата, исто така е многу важен во оптимизацијата на пребарувачите (SEO), бидејќи служи како еден од одлучувачките фактори кои влијаат на рангирањето на вашата страница. за клучните зборови содржани во ова сидро. Обично овој тип на рангирање се нарекува рангирање на врски.
Апсолутна врска
Тие се користат за посочување на документ на друга локација (врската е надворешна).
Исто така, можно е да се направат апсолутни врски во рамките на една локација, но поправилно е да се користат релативни адреси, кои изгледаат пократки, за да се создадат внатрешни врски. Но, додека анализирав различни сајтови, забележав дека огромното мнозинство на веб-администратори прават внатрешни врски со апсолутни адреси. Ова има своја предност, бидејќи ако вашата страница е копирана, тогаш на овој начин ќе добиете работни линкови.
Како што можете да видите, со апсолутни врски сè е едноставно. Потешко е со релативните, бидејќи кога ги креирате, треба да разберете која вредност на атрибутот href треба да се наведе, бидејќи зависи од оригиналната локација на документите. Како што веќе реков, никој навистина не се замара со ова и ги прави сите врски на страницата апсолутни. Меѓутоа, ако сте заинтересирани да дознаете повеќе за тоа како правилно да креирате релативни врски за веб-страница, можам да препорачам статија од Дмитриј, автор на блогот ktonanovenkogo.ru. Никогаш не сум видел подетално и разбирливо објаснување.
На пример, ќе ви покажам како ќе изгледа врската што води до датотека во однос на коренот на страницата (едноставно отсекуваме сè лево од третата коса црта во слична апсолутна врска):
Релативна врска
На главната
Текст за врска (сидро)
Боите и дизајнот на текстот што се појавува зависат само од поставките операционен системи прелистувач.
Како да отворите врска во нов прозорец.Стандардно, кога ќе кликнете на врската, ќе се отвори нов документ во тековниот прозорец. Меѓутоа, кога прелистувам веб-страници, ова не ми е погодно лично. Кога читам статија и следам врска, ми е погодно страницата да се отвори во нов прозорец и можам да продолжам со читање на претходната статија во секое време. Друга причина да се отвори врска во нов прозорец е тоа што кога одите на туѓа страница, постои голема веројатност дека читателот нема да се врати назад. Особено ако направи неколку транзиции и едноставно не се сеќава каде беше пред неколку минути.
Целниот атрибут на ознаката ќе ни помогне да ја отвориме врската во нов прозорец . Стандардно ја има вредноста _self, која обично не е одредена. За да го отворите документот во нов прозорец, сменете ја вредноста на целниот атрибут во _blank:
| 1 | Нов прозорец |
Нов прозорец
Што треба да направите ако, при посета на туѓа страница, каде што се отвораат врски во тековниот прозорец, сакате да ги отворите во нов? Само треба да кликнете на нив не со копче, туку со тркалото на глувчето. Во овој случај нова страницасе отвора во нов прозорец.
Како да направите врска до е-пошта (адреса на е-пошта).Со кликнување на оваа врска ќе се отвори програмата за работа со преку е-маил, стандардно инсталиран, каде полето „До“ веќе ќе биде пополнето. За да може предметот на писмото автоматски да се пополни, треба да направите врска до е-пошта од овој тип:
Дмитриј KtoNaNovenkogo советува друг начин за поставување обележувачи во текстот на веб-страница, без користење на html сидра. За да го направите ова, правиме обележувач од која било HTML ознака достапна на страницата, доделувајќи му го атрибутот универзален id. На пример, ајде да обележиме ознака за наслов h3:
Насловниот текст
Важно е да вклучите латинска буква во атрибутот id како прв знак од името на сидрото, а потоа можете да ги користите сите други дозволени знаци.
Ајде, на пример, да се вратиме на насловот „ “ и потоа да продолжиме.
Можете да користите хаш-врски за да отидете до саканата локација не само на една страница, туку и за да отидете на друга страница на страницата. За да го направите ова, го поставивме html сидрото на вистинското место на вистинската страница, а во самата хаш врска ја пишуваме адресата на оваа страница пред симболот за хаш. На пример:
Поврзете го текстот со обележувачот за прицврстување на html
Видови и бои на хиперврски во HTML.- Непосетената врска е сина и подвлечена.
- Активна врска - станува црвено за време помеѓу кликнувањето на глувчето на врската и почетокот на вчитувањето на нова страница. Јасно е дека таа е во оваа состојба само кратко време.
- Посетена врска – ја менува својата боја во виолетова откако ќе кликнете на неа.
Можете да ја промените бојата на хиперврските во HTML документ користејќи ознака и нејзините следните атрибути:
- Врска – боја на непосетени врски.
- Alink – боја на активната врска.
- Vlink – боја на посетените врски.
Сите горенаведени атрибути може да се комбинираат:
| 1 |
Се надевам дека сега е јасно како да креирате хиперврска на HTML страница и до е-пошта, како од слика да направите врска, што се прицврстувачите на текст, хеш-линкови и HTML сидра, што се HTML ознаки и атрибути на врски. Се обидов, најдобро што можев, детално да кажам што се врски во HTML и што се тие. Дозволете ми да ве потсетам дека вметнувањето хиперврски во текст се врши само во HTML режим.
Никогаш порано не сум напишал толку долги статии, повеќе од 10.000 карактери. Но, тука не е крајот на темата за линкови, за да продолжиме.
Ако оваа статија ви беше корисна, ве молиме кликнете на копчињата за социјалните медиуми подолу. Се гледаме повторно на страниците!
Добар ден на сите, драги мои пријатели и читатели. Се надевам дека решивте да учествувате во мојот натпревар и веќе пишувате за вашето блогирање. Па, би сакал да го продолжиме нашето проучување на јазикот html и денес би сакал да ви кажам за една од најважните компоненти, имено хиперврски.
Да, без такви хиперврски Интернетот не би бил толку удобен. Не, лажам. Воопшто не би било лесно да се движите. Можете ли да го замислите интернетот без нив? Јас лично не.
И денес ќе научиме како да вметнеме хиперврска во html. Но, прво би сакал да ве прашам: Дали знаете што е дури хиперврска и како таа се разликува од обична врска? Сè е всушност едноставно овде: врската е едноставна информација што се однесува на документ. Во исто време, не можете да кликнете на овој текст (ништо нема да се случи), но знаете каде да барате информации.
Пример: Можете да дознаете како да ја истакнете косата во Photoshop на //site/adobe-photoshop/kak-vydelit-volosy/
Хиперврска е истиот текст, само неговата суштина е дека можете да кликнете на овој текст и да стигнете до саканата страница, страница или кој било друг објект. Покрај тоа, самиот текст може да биде што било, додека адресата е напишана посебно внатре и може да биде сосема поинаква. Но, како и да е, во разговорниот говор тие сè уште се нарекуваат едноставно врски. Еве пример за хиперврска:
Можете да прочитате за тоа како правилно да ја истакнете косата во Photoshop во едно од моите упатства.
Како и да е. Добра теорија. Сега да продолжиме да вежбаме и да видиме кои се одговорни за сите овие работи.
Спарената ознака е одговорна за хиперврската, но сама по себе не претставува ништо. Секогаш оди во врска со атрибут. И во овој случај, треба постојано да го пишуваме истиот href. Во вредноста на атрибутот ја ставаме врската до самиот саканиот ресурс. А во самата содржина го пишуваме самиот текст кој треба да стане кликабилен (работа кога ќе се кликне). Погледнете го примерот и мислам дека сè ќе разберете.
Пребарувач Yandex
Како што разбирате, во овој пример напишав дека кога ќе кликнете на парче текст „пребарувач Yandex“, едно лице ќе биде насочено кон адресата напишана во вредноста на атрибутот href.
Мислам дека многумина од вас знаат дека има внатрешни и надворешни врски. Внатрешните врски се вршат во еден директориум, односно страницата, а надворешните врски водат до некој ресурс од трета страна. И сега ќе ви покажам како да ги направите и двете.
Внатрешни транзиции Датотека во истата папка
Но, таквата транзиција ќе функционира под услов датотеката со која се поврзувате да се наоѓа во истата папка како и датотеката во која ја ставате врската. За други опции, сè е малку поинаку.
Што направивме сега? И го направивме следново: бидејќи патеката до фотографијата лежи во посебна папка img, која се наоѓа во истата папка со датотеката pushkin.html, тогаш во вредноста на атрибутот прво треба да го напишеме името на папката и потоа преку коса црта (/) целото име на документот (во нашиот случај фотографии).
Сега зачувајте ја и стартувајте ја датотеката pushkin.html во вашиот прелистувач. Ќе видите дека зборот „Фотографија“ е означен со сино и станал кликачки, што значи дека со кликнување на овој линк ќе бидеме однесени во датотеката fofo.jpg која се наоѓа во папката img.
Па како? Се е чисто? Ако нешто се случи, не двоумете се да прашате.
Надворешни транзицииИ секако, не можеме да не ги споменеме надворешните врски, откако ќе кликнеме на кои ќе бидеме однесени на сосема друга страница. Но, тука нема ништо комплицирано. Целата поента е да ја ставите целосната адреса на страницата или веб-страницата во вредноста на href. Погоре покажав пример со Yandex. Но, еве уште еден пример:
Ќе учам за да станам мајстор на социјални проекти.Овде доаѓаме до одредена страница на одредена локација.
Стандардно, кога ќе кликнете на врска, документот се отвора во истиот прозорец како вашата страница, т.е. вашата страница ќе се затвори. И ова не е добро. Особено, за проекти со промовирана содржина или блогови, се препорачува кога ќе кликнете на врската, документот да се отвори во нов прозорец или таб без да ја затворите вашата страница.
Целниот атрибут со вредност „_blank“ ќе ни помогне во ова. Тука нема ништо комплицирано. Ќе треба само да го вметнете ова во ознаката за отворање по вредноста на атрибутот href. Да го земеме тој извадок од датотеката lukomorye.html, каде што направивме врска до страницата pushkin.html, дури сега ќе го напишеме токму овој атрибут. Треба да изгледа вака:
Од песната Руслан и Људмила (Автор - А.С. Пушкин)
Па, овде се е јасно. Сега, кога ќе кликнете на содржината, саканата страница ќе се отвори во нов прозорец. Ова е многу неопходно, бидејќи ако не го регистрирате, корисникот едноставно ќе ја напушти вашата страница. И така, во секој случај, тој ќе остане на него, само ако конкретно не го затвори. Обидете се да направите сè сами, само направете сè убаво со свои раце. Нема потреба од копирање и залепување.
Некако вака. Се чини дека ви ги кажав сите најважни работи, но ако сакате да се движите во оваа насока и да научите HTML и CSS за да креирате професионални веб-страници, блогови, па дури и онлајн продавници, тогаш не заборавајте да погледнете одличен видео курс на оваа тема. Лекциите се навистина одлични и се навистина кажани за луѓе кои сè уште малку се запознаени со градењето веб-страници или воопшто не се запознаени.
Па, ова ја завршува нашата лекција за денес. Се надевам дека ви се допадна мојата статија и ќе ми биде драго ако станете мој редовен читател. Затоа, не заборавајте да се претплатите на ажурирањата на мојот блог за да не пропуштите ништо интересно. Па, ви посакувам успех во сите ваши напори. Чао чао!
Со почит, Дмитриј Костин.
