Un hyperlink este un element de bază al hipertextului, o caracteristică distinctivă a documentelor HTML care leagă paginile web și alte fișiere între ele. Mulți oameni asociază pe bună dreptate cuvântul „Link” cu cuvântul „Internet”.

Legături simple

HTML folosește eticheta pentru a crea linkuri și atributele sale.

Să trecem de la simplu la complex și să învățăm mai întâi cum să adăugați linkuri elementare la un document HTML. Vom avea nevoie de următoarele elemente de limbaj:

href- atributul etichetei , a cărei valoare va fi adresa linkului. Indiferent dacă conectați la un site, la o pagină web sau la un fișier, nu contează, doar valoarea acestui atribut va fi diferită.

Acum să ne uităm la linia de cod HTML:

Acum să ne uităm la fiecare element al liniei.

- aceasta este eticheta responsabilă pentru crearea linkului.

- eticheta de inchidere.

Între personaje > Și < se află textul Link. Utilizatorul care deschide pagina o va vedea și va face clic pe ea pentru a merge la adresa specificată în ea.

De exemplu, în partea de jos a unui document HTML, doriți să plasați un link „Înapoi la început” care va duce la începutul documentului - titlul „Înapoi la pagină”. Pentru a face acest lucru, trebuie să puneți o ancoră la începutul paginii și un link către aceasta în partea de jos a paginii.

Să fie numită ancora să înceapă. Apoi, în eticheta la conținutul căruia va duce linkul, trebuie să adăugați atributul id cu sens ÎNCEPE.

Începutul paginii

Ancora este instalată și acum tot ce rămâne este să adăugați linkul principal la ea. În cazul nostru, va arăta astfel:

Top

Vă rugăm să rețineți: există un hash în fața numelui ancorei - aceasta este o caracteristică distinctivă a legăturilor interne.

Link-uri grafice

Odată cu apariția etichetei HTML 5 s-a transformat într-un container capabil să conțină elemente bloc, astfel încât un link poate fi acum nu doar text sau imagine, ci chiar un tabel, listă sau o pagină întreagă.

Link-uri către e-mail și Skype

Pentru comoditatea vizitatorilor site-ului, puteți nu numai să indicați informațiile dvs. de contact pe pagină, ci și să le activați, astfel încât atunci când faceți clic pe o adresă de e-mail, clientul de e-mail al utilizatorului se deschide imediat și când faceți clic pe Conectare Skype, programul solicită imediat permisiunea de a suna.

Scrie pe email!

Sună-mă pe Skype

Cred că ați înțeles deja despre ce se va discuta în acest capitol.. și știți ce este un link, dacă nu, atunci faceți clic aici.. Există mai multe tipuri de link-uri, precum și „mecanisme” de a face clic pe ele. În acest capitol voi încerca să vorbesc în detaliu despre cum să înregistrez link-urile, precum și să intru în complexitatea lucrului cu ele.

Digresiune lirică:
Odată ajuns în armată, șeful de stat major a venit la mine și a dat un ordin, citez:
Adu-mi acel document, deși nu știu unde este sau ce este!! De ce stai in picioare? Să fugim!! Am întârziat!!!

Deci, ce vreau să spun prin asta, pentru ca browserul să nu cadă în stupoare, așa cum am făcut-o atunci, trebuie să știe: numele exact al documentului, calea către document și locul unde să-l aducă, sau mai degrabă, unde să-l deschid.

Momentan, folosind un notepad, am creat un singur document HTML, il am cu numele index.html (de ce ai ales un nume asa ciudat index.html si de ce este nevoie, vezi) nu stiu care unul, ai venit singur cu numele, dar cred că , Îl amintești și știi unde este, cu excepția cazului în care, desigur, ești șeful meu de cabinet :).. În acest document vom încerca să creăm un link către un alt document pe care nu o avem încă.. Deci, înainte de a vă conecta la el, trebuie să îl creați, din fericire știți deja cum să faceți acest lucru.

1. Deschide blocnotesul.
2. Scriem cod în limbaj html. de exemplu, o pagină cu un număr de fotografii.
3. Îl salvăm ca pagină html în același folder de lucru în care există deja primul document pe care l-am creat. Să-l numim primer.html pentru a evita confuzia și, probabil, să-l redenumim pe primul în index.html

Acum știu că aveți două documente html index.html și primer.html și că acum aveți un set minim pentru pregătire ulterioară.

Legături text.

Să ne întâlnim cu eticheta (din ancoră), puteți include text sau o imagine în el, care va deveni un link către anumite documente. Atributul etichetei href specifică numele și calea către documentul către care indică legătura.

Toate împreună este scris astfel:

Iata pozele mele!!

După cum probabil ați înțeles, primer.html este numele celui de-al doilea document al nostru html și inscripția „Iată fotografiile mele!!” aceasta este o bucată de text din fișierul index.html.

Prin analogie cu pozele, eticheta Calea linkului către documentul deschis este specificată folosind aceleași metode:

Iata pozele mele!!- Această intrare implică faptul că în directorul în care se află primul nostru document html există un folder stranica în care se află fișierul primer.html
Iata pozele mele!!- Aceasta înseamnă că fișierul primer.html este situat cu un nivel mai sus față de document
Iata pozele mele!!- documentul se află pe site-ul www.site.ru..

Ei bine, hai să încercăm? Mai jos este un exemplu de două documente care conțin legături care indică unul către celălalt.

Fișier index.html:

Spune-mi, dragă copilă: în ce ureche bâzâie?


ÎN dreapta sau stânga?

Fișier Primer.html:

Dar nu am ghicit bine! Am un bâzâit în ambele urechi.

Ei bine, eu nu joc așa...

Din exemplu puteți vedea că linkurile sunt evidențiate în culoare, în mod implicit albastrul este un link, iar roșu este un link deja vizitat, aceste culori pot fi schimbate folosind eticheta de deschidere care ne este deja bine cunoscută < body > și atributele sale.

legătură- culoarea link-ului.
o legătură- culoarea link-ului activ pe care s-a făcut clic.
vlink- culoarea link-ului vizitat.

Este scris astfel:

>

Continuând să vorbim despre culoarea unui link text, merită menționat că, dacă este necesar, puteți evidenția cu forță atât întregul link, cât și părțile sale individuale (expresii, cuvinte, litere) cu o etichetă familiară. si atributul acestuia culoare. Cu toate acestea, acest lucru se aplică nu numai culorii, puteți seta și dimensiunea, stilul și fontul textului separat. Dar rețineți că manipularea culorilor trebuie făcută în interiorul etichetei Aici și nu peste bord, altfel culoarea linkului va fi fie implicit, fie așa cum este specificat în etichetă

Fișier index.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

Priviți fraza care vă va ajuta să vă amintiți locurile de culori din curcubeu

R
A
D
U
G
A






Fișier Primer.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

Fiecare
vânător
dorințe
stiu
Unde
stă
fazan



Reveniți la pagina principală

Una dintre paginile tale de pe site Neapărat ar trebui chemat index.html. Este fișierul cu acest nume pe care programul robot îl va căuta pe site-ul dvs. web atunci când o persoană introduce numele site-ului dvs. De la pagina index.html se va deschide primul, fă-l cel principal. Restul paginilor le poți numi cum vrei... nu mai există nuanțe cu nume.

Despre registru... Când scrieți calea și numele documentelor, amintiți-vă că, de exemplu: Page.html, page.html și PAGE.html sunt numele diferitelor documente! Același lucru este valabil și pentru numele marcajelor și imaginilor. Luați în considerare întotdeauna cazul când scrieți codul, există o mare probabilitate ca astfel de nume să nu fie recunoscute de un browser sau altul. Fă o regulă să scrii și să numești totul cu litere mici latine, atunci riscul factorului uman și capriciile programelor vor fi reduse la zero.

Regula celor trei clicuri...

Încercați să formați un „arborele de legături” în așa fel încât un vizitator al site-ului să poată ajunge de la orice pagină la orice loc de pe site într-un număr minim de clicuri. Mai mult de trei tranziții la locul dorit de pe site nu mai sunt bune. Încărcarea fără sfârșit a paginilor inutile pentru o persoană poate duce la o criză nervoasă și la închiderea prematură a site-ului. Economisiți timpul, banii și nervii oamenilor.

O zi bună tuturor, dragii mei prieteni și cititori. Sper că te-ai hotărât să participi la competiția mea și deja scrii despre călătoria ta de blogging. Ei bine, aș dori să continuăm studiul nostru despre limbajul html și astăzi aș vrea să vă povestesc despre una dintre cele mai importante componente și anume hyperlink-urile.

Da, fără astfel de hyperlinkuri, internetul nu ar fi atât de convenabil. Nu, mint. Nu ar fi deloc ușor de navigat. Vă puteți imagina internetul fără ele? Eu personal nu.

Și astăzi vom învăța cum să inserăm un hyperlink în html. Dar mai întâi aș dori să vă întreb: știți ce este un hyperlink și cum diferă de un link obișnuit? Totul este de fapt simplu aici: un link este o simplă informație care se referă la un document. În același timp, nu poți da clic pe acest text (nu se va întâmpla nimic), dar știi unde să cauți informații.

Exemplu: puteți afla cum să evidențiați părul în Photoshop la //site/adobe-photoshop/kak-vydelit-volosy/

Un hyperlink este același text, doar că esența lui este că poți să dai clic pe acest text și să ajungi la pagina, site-ul sau orice alt obiect dorit. Mai mult, textul în sine poate fi orice, în timp ce adresa este scrisă separat în interior și poate fi complet diferită. Dar oricum ar fi, în vorbirea colocvială ele sunt încă numite pur și simplu link-uri. Iată un exemplu de hyperlink:

Puteți citi despre cum să evidențiați corect părul în Photoshop într-unul dintre tutorialele mele.

Oricum. Bună teorie. Acum să trecem la practică și să vedem care sunt responsabili pentru toate aceste chestiuni.

Eticheta asociată este responsabilă pentru hyperlink, dar în sine nu reprezintă nimic. Merge întotdeauna în legătură cu un atribut. Și în acest caz, trebuie să scriem constant același href. În valoarea atributului punem link-ul către resursa dorită în sine. Și în conținutul însuși scriem textul în sine, care ar trebui să devină clicabil (funcționează atunci când se face clic). Uită-te la exemplu și cred că vei înțelege totul.

Motorul de căutare Yandex

După cum înțelegeți, în acest exemplu am scris că atunci când faceți clic pe o bucată de text „Motor de căutare Yandex”, o persoană va fi direcționată către adresa scrisă în valoarea atributului href.

Cred că mulți dintre voi știți că există legături interne și externe. Legăturile interne se desfășoară într-un singur director, adică site-ul, iar linkurile externe conduc la o resursă terță parte. Și acum vă voi arăta cum să le faceți pe amândouă.

Tranziții interne

Fișier în același folder

Dar o astfel de tranziție va funcționa cu condiția ca fișierul la care faceți legătura să fie localizat în același folder cu fișierul în care plasați legătura. Pentru alte opțiuni, totul este puțin diferit.

Fișier într-un alt folder

1. Deschideți fișierul pushkin.html în Notepad++
2. Acum găsiți cuvântul fotografie și înfășurați-l în etichete<a href> .
3. Acum atentie! În valoarea atributului specificăm calea relativă la fișierul care se editează, adică pushkin.html însuși. Ar trebui să ajungi cu ceva de genul acesta:

Fotografie

Ce am făcut acum? Și am făcut următoarele: deoarece calea către fotografie se află într-un folder img separat, care se află în același folder cu fișierul pushkin.html, atunci în valoarea atributului trebuie mai întâi să scriem numele folderului și apoi printr-o bară oblică (/) numele complet al documentului (în cazul nostru fotografii).

Acum salvați și rulați fișierul pushkin.html în browser. Veți vedea că cuvântul „Foto” a devenit evidențiat în albastru și a devenit clicabil, ceea ce înseamnă că făcând clic pe acest link vom fi duși la fișierul fofo.jpg, care se află în folderul img.

Așa cum? Tot clar? Dacă se întâmplă ceva, nu ezitați să întrebați.

Tranziții externe

Și bineînțeles, nu putem să nu menționăm link-uri externe, după ce facem clic pe care vom fi duși către un cu totul alt site. Dar nu este nimic complicat aici. Ideea este că puneți adresa completă a site-ului sau a paginii web în valoarea href. Am arătat un exemplu cu Yandex mai sus. Dar iată un alt exemplu:

Voi studia pentru a deveni un maestru al proiectelor sociale.

Aici ajungem la o anumită pagină a unui anumit site.

Se deschide într-o fereastră nouă

În mod implicit, când faceți clic pe un link, documentul se deschide în aceeași fereastră cu pagina dvs., adică pagina ta se va închide. Și asta nu este bine. În special, pentru proiectele de conținut promovat sau bloguri, se recomandă ca atunci când dați clic pe un link, documentul să se deschidă într-o fereastră sau filă nouă fără a vă închide pagina.

Atributul țintă cu valoarea „_blank” ne va ajuta în acest sens. Nu este nimic complicat aici. Va trebui doar să introduceți acest lucru în interiorul etichetei de deschidere după valoarea atributului href. Să luăm acel fragment din fișierul lukomorye.html, unde am făcut un link către pagina pushkin.html, abia acum vom scrie tocmai acest atribut. Ar trebui să arate așa:

Din poemul Ruslan și Lyudmila (Autor - A.S. Pușkin)

Ei bine, totul este clar aici. Acum, când dați clic pe conținut, pagina dorită se va deschide într-o fereastră nouă. Acest lucru este foarte necesar, deoarece dacă nu îl înregistrați, utilizatorul va părăsi pur și simplu pagina dvs. Și așa, în orice caz, va rămâne pe el, doar dacă nu îl închide în mod specific. Încercați să faceți totul singur, doar să faceți totul frumos cu propriile mâini. Nu este nevoie să copiați și să lipiți.

Cumva așa. Se pare că ți-am spus toate cele mai importante lucruri, dar dacă vrei să mergi în această direcție și să înveți HTML și CSS pentru a crea site-uri web profesionale, bloguri și chiar magazine online, atunci asigură-te că le verifici. curs video excelent despre această temă. Lecțiile sunt cu adevărat excelente și sunt într-adevăr spuse pentru oamenii care sunt încă puțin familiarizați cu construirea site-ului web sau nu sunt familiarizați deloc.

Ei bine, asta încheie lecția noastră de astăzi. Sper că ți-a plăcut articolul meu și te vei bucura dacă vei deveni cititorul meu obișnuit. Așa că nu uitați să vă abonați la actualizările blogului meu pentru a nu pierde nimic interesant. Ei bine, vă doresc succes în toate eforturile voastre. Pa! Pa!

Cu stima, Dmitri Kostin.

- 4,3 din 5 pe baza a 13 voturi

Vezi pagina

Acesta este cazul dacă fișierul razdel.html se află în același folder cu fișierul index.html. Dacă se află, de exemplu, în folderul pagini, atunci adresa va arăta astfel:

Vezi pagina

Tot codul din fișierul index.html va arăta astfel:

Vezi pagina

Puteți deschide fișierul index.html în browser și urmați linkul, care va deschide o nouă pagină. După cum ați observat, în acest caz pagina s-a deschis în fereastra curentă. Puteți face astfel încât, atunci când faceți clic pe un link, o pagină nouă să se deschidă într-o fereastră nouă pentru aceasta în eticheta de deschidere trebuie să adăugați atributul target="_blank" Va arăta astfel:

Vezi pagina

Pe lângă acestea, există și link-uri interne. Legăturile interne sunt destinate navigării într-un singur document deschis. Acest lucru poate fi util dacă, de exemplu, decideți să creați un document mare și să plasați conținutul în partea de sus. Sau trebuie doar să direcționați rapid vizitatorul către o parte a paginii dvs.

Să presupunem că trebuie să facem un link care, făcând clic pe el, va duce vizitatorul în partea de sus a acestei pagini. Pentru a face acest lucru, primul cuvânt sau frază de pe această pagină trebuie să fie inclus într-o etichetă primul cuvânt. Unde între ghilimele trebuie să indicați un nume.

De exemplu, pentru pagina în care vă aflați acum, puteți face acest lucru:

Toate paginile

Cu aceasta am definit ancora, adică locul în care va merge utilizatorul când face clic pe linkul nostru. Acum, în locul în care este necesar, trebuie să indicați linkul în sine. Acest lucru se face astfel:

Dute sus

Vă rugăm să rețineți că înainte de cuvântul verh trebuie să existe semnul hash # între ghilimele. Pentru a vedea cum funcționează, puteți da clic pe următorul link: .

Puteți lega nu numai fișiere cu extensia html, ci și fișiere cu alte extensii. Pentru a face acest lucru, trebuie să specificați numele și extensia de fișier corespunzătoare în adresa linkului. De exemplu, un link html către un fișier arhivă va arăta astfel:

Descărcați arhiva

Descarcă ton de apel

Puteți încerca să copiați orice arhivă sau fișier muzical într-un folder cu fișiere create anterior și să furnizați un link către acestea. În acest caz, când faceți clic pe link, browserul vă va solicita să deschideți sau să salvați fișierul. Atributul target="_blank" poate fi aplicat și acestor legături.

Acum să ne uităm la ce tipuri de legături există. Se disting următoarele tipuri de legături: absolute și relative. Link-urile absolute sunt link-uri care conțin adresa completă a documentului. Astfel de legături sunt folosite pentru a comunica cu resurse externe ale rețelei. Un exemplu de astfel de link:

Portal pentru webmasteri

Vezi pagina

http:// este cel mai comun protocol, oferă acces la pagini web, linkul arată astfel:

Portal pentru webmasteri

mailto: - protocol de acces la e-mail. Acesta trebuie folosit dacă doriți să vă conectați la un e-mail. Codul de link este scris astfel:

a trimite o scrisoare

Pe lângă aceste protocoale, există și protocolul ftp://, care este folosit pentru a transfera fișiere prin FTP folosind un program client FTP. Protocolul file:// este folosit și pentru a specifica un link către o pagină situată pe computerul local.

Când creați pagini web, va trebui să vă ocupați în principal de primele două protocoale. Și ultimul lucru pe care trebuie să-l luăm în considerare în această lecție este cum să facem un link dintr-o imagine. De fapt, totul este foarte simplu. În loc de textul inclus în etichete, trebuie să inserați adresa imaginii. Am analizat cum să inserăm o imagine în lecția Cum să inserăm imagini și să le poziționăm în html.

Salvați imaginea pe care o vedeți în stânga în folderul în care se află fișierele pe care le-am creat anterior. Acum vom face din această imagine un link. Pentru a face acest lucru, trebuie să scriem următoarele în fișierul nostru index.html:

În timp ce rătăciți pe Internet, este posibil să fi observat acest efect atunci când, când faceți clic pe un link sub forma unei imagini mici, este încărcată o altă imagine mare. Pentru a crea acest efect, trebuie să specificați adresa unei imagini mari ca adresă în link.

Cred că nicio pagină HTML nu poate exista fără cel puțin un hyperlink (sau doar un link). Legăturile pot fi către alte pagini sau site-uri, precum și către fișiere, imagini etc.

Legăturile pot fi externe și interne, text și grafice. Legăturile externe se referă la alte site-uri sau obiecte de pe acestea, în timp ce linkurile interne, dimpotrivă, se referă la diferite părți ale site-ului dumneavoastră. Un link text este un text care, atunci când dai clic, te duce către un alt obiect sau îl deschide, în timp ce un link grafic este un obiect (de obicei o imagine) care servește și pentru a merge la altă pagină, site sau, de exemplu, imagine. Legăturile în HTML sunt create folosind o etichetă (din engleză anchor - anchor). În continuare vă voi spune mai multe despre link-uri.

Eticheta are un atribut href important și principal. Valoarea sa este calea către obiectul sau site-ul la care se referă linkul nostru sub forma unui URL. Ancora (corpul linkului) poate fi text (link text) sau imagine (link grafic). Dacă trebuie să creați o legătură grafică, trebuie să utilizați eticheta IMG între etichete ca ancoră. Iată un exemplu simplu de cod HTML pentru un link:

text link (ancoră)

Vă dau un alt exemplu ca să înțelegeți mai bine. Voi folosi site-ul meu ca bază:

Pe pagina html din browser va arăta astfel:

Culoarea textului linkului este stabilită de atributele din eticheta BODY. Pentru a spune simplu, linkurile sunt supuse acelorași atribute de modificare ca și textul de pe pagină. Aceasta include caracterele aldine și cursive, utilizarea titlurilor etc.

Următoarele vor apărea pe pagina html:

Obținem rezultatul fără cadru:

Pagina de start 1seo

După cum ați observat, trecerea la o altă pagină se realizează în aceeași fereastră. Dacă doriți ca linkul să se deschidă într-o altă fereastră sau în fereastra părinte (în mod implicit este în aceeași fereastră), puteți utiliza următorul atribut țintă al etichetei A:

• _blank - deschide pagina într-o fereastră nouă;
• _parent - încarcă un link în fereastra părinte;
• _self - implicit. Deschide linkul în aceeași fereastră.

Pagina de pornire a site-ului 1seo

Există, de asemenea, un atribut title pentru a crea un sfat explicativ pentru un link:

Pagina de pornire a site-ului 1seo

text

Apropo, dacă specificați căsuța dvs. poștală în URL și specificați protocolul mailto:, atunci când faceți clic pe linkul dvs., se va deschide programul de e-mail, unde adresa căsuței dvs. poștale va fi deja introdusă în câmpul Către. Folosind exemplul, codul HTML ar fi astfel:

Scrie-mi un mesaj

Am încercat să scriu principalele lucruri de care aveți nevoie pentru a crea un link în HTML. Apropo, dacă ați citit articolele anterioare ale Tutorialului HTML, atunci pot spune cu încredere că știți deja minimul pentru a vă crea prima pagină HTML cu drepturi depline. După ce creați o pagină, o puteți încărca pe găzduire gratuită și puteți vedea roadele muncii dvs. Crede-mă, după ce vei face asta, vei avea un val și mai mare de energie creativă. În continuare, vă voi spune cum să creați un tabel în HTML. Aceasta este, de asemenea, o informație foarte importantă, încercați să o absorbiți și să o digerați complet.

Data publicării: 15 mai 2012