Elemente de bază HTML: Lucrul cu link-uri. Tag A și atributele sale rel, target, name

Etichetă este unul dintre elementele importante ale HTML și este destinat creării de link-uri. În funcție de prezența parametrilor numele sau eticheta href setează o legătură sau o ancoră. O ancoră este un marcaj într-o pagină care poate fi specificat ca țintă de link. Când utilizați un link care indică o ancoră, sunteți direcționat către un marcaj din pagina web.

Opțiuni

Exemplu de utilizare a unei etichete

Uită-te la fotografia mea!

Descrierea parametrilor etichetei

Specifică adresa documentului la care să mergi. Deoarece un document de orice tip poate fi folosit ca adresă de link, rezultatul urmăririi linkului depinde de dosar final. Deci, arhivele (fișiere cu extensie zip sau rar) vor fi salvate în disc local. Mod implicit document nou este încărcat în fereastra curentă a browserului, dar această proprietate poate fi modificată folosind parametrul țintă.

Acesta este un parametru obligatoriu pentru legături.

Sintaxă

Argumente

Valoarea este calea completă sau relativă către fișier.

Exemplu de utilizare a parametrului href:

Legătură absolută

Parametrul NAME

Descriere

Parametru Nume folosit pentru a defini o ancoră în cadrul unei pagini. În primul rând, ar trebui să setați un marcaj în locul potrivit și să îi setați numele utilizând parametrul de nume al etichetei<А>. Numele linkului marcajului începe cu simbolul #, urmat de numele marcajului. Poate fi ales orice nume care se potrivește cu subiectul. Puteți, de asemenea, să faceți un link către un marcaj aflat pe o altă pagină web sau chiar pe un alt site. Pentru a face acest lucru, trebuie să indicați adresa sa în adresa linkului și să adăugați un simbol hash # și numele marcajului la sfârșit.

Între etichete Și Nu este necesar să scrieți text, deoarece trebuie doar să indicați locația linkului.

Acest parametru este necesar pentru ancore

Sintaxă

Exemplu de creare a unei ancore folosind parametrul name:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Top

parametru TARGET

Acesta nu este un parametru obligatoriu.

Sintaxă

Argumente

Argumentul este numele ferestrei sau cadrului, specificat de parametru Nume. Dacă este setat un nume inexistent, se va deschide o nouă fereastră. Următoarele sunt folosite ca nume rezervate.

• _gol- Încarcă pagina într-o nouă fereastră de browser.
• _de sine- Încarcă pagina în fereastra curentă.
• _mamă- Încarcă pagina în cadrul părinte, dacă nu există cadre, atunci acest parametru funcționează ca _de sine.
• _top- Anulează toate cadrele și încarcă pagina într-o fereastră completă a browserului, dacă nu există cadre, atunci această opțiune funcționează ca _de sine.

Valoarea implicită este _de sine.

Deschide într-o fereastră nouă

parametrul TITLE

Acesta este un parametru opțional.

Sintaxă

Exemplu de creare a unui tooltip:

Desene

Bună ziua, dragi cititori ai blogului. Am decis să dedic publicația de astăzi cel mai important aspect webmastering, unde voi încerca să explic în detaliu ce este un hyperlink, de care este indisolubil legat, care, la rândul său, fără exagerare, stă la baza Internetului.

Dar pentru a crea corect hyperlinkuri și a le insera în codul paginilor web (de exemplu, site-ul dvs.), trebuie să studiați zona relevantă a limbii marcare hipertext(), deoarece aceste elemente sunt formate folosind HTML o etichetă, care are , permițându-vă să modernizați linkul către forma dorită.

Așadar, astăzi ne vom uita la ce părți constă un hyperlink, cum folosirea atributului necompletat țintă face posibilă deschiderea unei pagini într-o fereastră nouă (filă), cum să faceți din orice imagine un link și multe alte detalii importante. Printre altele, aceste informații vă vor ajuta să învățați limbajul HTML.

Ce este un hyperlink și poate fi numit un link?

Răspunzând la întrebarea pusă în titlu, voi spune că termenul „link” are un spectru semantic mai larg (legătură cu Siberia, banca pentru identificarea plătitorului, text într-o carte etc.), inclusiv înțelesul inerent conceptului de „hyperlink” , care este asociat doar cu hipertextul, ceea ce face posibilă perceperea neliniară a informațiilor.

Prin urmare, hyperlink aceasta caz special link-uri, așa că este foarte posibil să le folosiți în subiectele de astăzi în mod egal. Acesta este ceea ce voi folosi în avantajul meu pe parcursul postării de astăzi, folosind ambii termeni pentru a evita spamul inutil de cuvinte cheie.

Dar există și servicii invizibile, create folosind și situat în interior, a cărui sarcină este să trimită numeroase semnale și comenzi către browsere pentru a îndeplini o anumită funcție.

De exemplu, folosind hyperlink-uri de serviciu este posibilă afișarea unei pictograme. Ele pot fi văzute doar ca parte a codului HTML (pentru a face acest lucru, faceți clic pe orice pagină deschisă în browser):

Deocamdată, să lăsăm linkurile de servicii în pace și să luăm în considerare modelul general de creare a hyperlinkurilor. Ceea ce au în comun este că toți au atribut necesar href, a cărei valoare este adresa documentului (). link HTML poate conduce ca pagina interioara site-ul și pe un document extern.

O alta notă importantă. Utilizarea atributului href face clic pe hyperlinkuri, adică permite utilizatorilor să meargă automat la pagina corespunzătoare a site-ului web ca urmare a clicului pe acestea.

Cum să faci un hyperlink în HTML folosind href

Deci, știm deja că pentru a crea un link de care aveți nevoie obligatoriu o etichetă a și un atribut href, ai căror parametri pot fi o adresă URL tipuri variate. Deoarece A asta, apoi intre deschidere si inchidere conține conținutul care va fi afișat pe pagina web.

Acest continutul se numeste ancorași poate fi prezentat sub formă de text sau imagine (vom vorbi mai multe despre cum să faceți o imagine un link mai jos). După cum am observat deja, ancora va putea fi făcută clic. Să ne uităm la un exemplu de hyperlink cu conținut text. Iată cum va arăta designul său în codul HTML:

putin despre ancore

Pe lângă HTTP, securizat Protocolul HTTP S. Link-ul nu trebuie să ducă la o pagină web. Totul depinde de valoarea href, care poate fi calea către un fișier:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

Descarca

Pe pagina web, acest link va avea următoarea formă:

Browserul „înțelege” că un obiect cu extensia .zip poate fi destinat doar descărcarii, ceea ce este solicitat utilizatorului să facă.

Apropo, calea către orice fișier este uneori indicată prin FTP(). Apoi, în adresa URL care este folosită ca parametru de atribut href, ar trebui să înlocuiți pur și simplu protocolul HTTP (HTTPS) cu FTP. Link-ul la fișier va arăta astfel:

descărcați de pe server

Dar asta nu este tot. Intr-un mod similar se creează un link către e-mail folosind pseudo-protocolul mailto Pentru acces rapid la instrumentul de scriere a scrisorii:

a scrie scrisori

După ce faceți clic pe un astfel de link, ar trebui să apară o fereastră cu instalarea implicită client de mail, în care puteți compune textul mesajului și îl puteți trimite deja către adresa specificată, luat, după cum probabil ați ghicit, din href.

În practică, hyperlinkurile către e-mail erau foarte des folosite anterior de webmasteri și deținătorii de resurse mari pentru a asigura confortul utilizatorilor și clienților care puteau accesa formularul de e-mail cu un singur clic.

Dar acest tip de comunicare pe resurse web nu mai este atât de popular (mai ales că se poate instala, de exemplu), pentru că deschideți în acest fel adrese postale este interceptat activ de software și utilizat de diferite tipuri de spammeri.

Am dat ca exemplu doar cele mai comune protocoale care fac parte din URL, care, la rândul său, este un parametru al atributului href la formarea unui hyperlink. Pe lângă HTTP (HTTPS), FTP și mailto, există și altele pentru rezolvarea unor probleme mai specializate. Poate că le vom analiza mai detaliat în alte publicații.

Tipuri de hyperlinkuri

Acum să încercăm să clasificăm linkurile în funcție de anumite criterii.

După sfera lor de aplicare:

1. Extern— conduce la pagini situate în afara site-ului pe care sunt postate;

2. Intern— conectați pagini web situate în aceeași resursă web.

După format:

2. Grafic e - în acest caz, ancora hyperlinkului este o imagine (inclusiv o miniatură), banner, buton etc.

După tipul de adresă URL care servește ca valoare a atributului href:

1. Absolut, care conțin o indicație explicită a protocolului de transfer de date (de exemplu, HTTP) și Numele domeniului site-ul web (totul despre domenii).

Astfel de link-uri sunt cel mai des folosite atunci când se face referire la pagini de resurse externe. În acest caz, valoarea href va include calea completă către fișierul dorit sau pagini web. Iată un exemplu de hyperlink absolut:

Context - ce este?

2. Relativ, una dintre opțiunile de creare care va fi calea specificată în raport cu folderul rădăcină al site-ului web (de unde și numele acestui tip de hyperlink). În același timp, din adrese URL Protocolul (HTTP) și domeniul site-ului vor fi retrase:

Context - ce este?

Hiperlinkurile relative de pe o pagină web pot furniza link-uri către pagini interne. În această formă sunt mai scurte, ceea ce face codul HTML mai ușor. Desigur, totul nu este atât de simplu și necesită o acoperire mai largă, lucru pe care îl puteți vedea dacă urmați linkul furnizat.

Atributele etichetei a

Acum să vedem ce alte atribute există, în afară de href-ul necesar, și cum pot afecta crearea unui hyperlink. Cele mai complete date în acest sens, ca să spunem așa, „de primă mână”, le puteți găsi pe site-ul oficial al Consorțiului Internațional W3C, unde informații reale apare cel mai rapid.

Sunt complet identice și inițiază deschiderea unei pagini web în fila curentă. Dacă doriți ca paginile să se deschidă într-o filă nouă când urmăriți link-uri, ar trebui să adăugați atunci când creați un link atribut target cu parametrul gol:

Context - ce este?

Deși unii webmasteri și specialiști SEO consideră că este mai bine dacă vizitatorului i se oferă posibilitatea de a alege (adică să nu specifice un gol țintă), deoarece, dacă este necesar, pagina poate fi deschisă într-o filă nouă folosind meniul contextual(mutați cursorul pe link, faceți clic dreapta și faceți clic pe elementul corespunzător):

Mai mult, după cum puteți vedea, în acest caz utilizatorul are avantajul că este posibil să deschidă pagina web nu numai într-o filă nouă, ci și într-o fereastră nouă(această opțiune nu poate fi implementată prin HTML, ci doar folosind scripturi).

Dar cred că nu toți utilizatorii începători sunt pe deplin familiarizați cu capacitățile și setările browsere populare(). Este destul de probabil ca un cititor, care a urmat un hyperlink extern și a pierdut din vedere pagina sursă (în schimb documentul destinatarului), să închidă pur și simplu fila frustrat.

Astfel, proprietarul unei resurse web poate nu numai să piardă un vizitator promițător, ci și să se înrăutățească factori comportamentali(), ceea ce va implica o pierdere a poziției paginii la clasare.

În plus, deschiderea unei pagini într-o filă adiacentă este foarte convenabilă din punct de vedere al utilizării (). Utilizatorul urmărește un hyperlink către o pagină web și primește Informații suplimentareși, de parcă nimic nu s-ar fi întâmplat, continuă să studieze materialul principal.

Pentru a crea o imagine obiectivă, ar trebui adăugat că aplicarea „target="_blank"” oricăror link-uri externe se dovedește a fi plină de anumite riscuri de securitate. Dacă cineva este interesat, puteți citi, unde sunt oferite recomandări pentru depanarea problemelor atunci când utilizați ținta goală și, de asemenea, prezentate opțiuni alternative implementarea sarcinii de deschidere a unei pagini web într-o filă nouă.

Se pare că am remarcat toate avantajele și dezavantajele utilizării valorii goale pentru a deschide un hyperlink într-o filă nouă. Dacă ați citit articole pe blogul meu, probabil că ați ghicit deja atitudinea mea față de acest parametru de atribut țintă.

Pe acest moment Pentru mine, avantajele sale depășesc dezavantajele și sunt un susținător necondiționat. Pe baza faptelor de mai sus, vă puteți forma propria opinie cu privire la această problemă. Deși... ținând cont de apariția unor noi circumstanțe, se poate schimba.

Cum se creează link-uri hash, ancore și de ce sunt necesare?

În continuare, aș dori să vă atrag atenția asupra unui alt tip de hyperlinkuri, care pot fi utile dacă materialul aflat pe o pagină web este destul de voluminos și ar trebui structurat pentru a îmbunătăți navigarea.

Nu trebuie să căutați departe un exemplu, priviți doar cuprinsul acestei publicații de la început. Vedeți că există o listă de secțiuni ale articolului? Hyperlinkurile către aceste secțiuni sunt doar legături hash. După ce faceți clic pe oricare dintre ele, browserul va derula pagina până la locul în care începe partea corespunzătoare.

Astfel de link-uri sunt create destul de simplu. Mai întâi trebuie să creați ancoră prin plasarea unei etichete corespunzătoare în locul dorit de pe pagină sub forma unui ID, care este unul dintre atributele globale aplicate oricărei etichete HTML.

Datorită universalității ID-ului, astfel de etichete de ancorare pot fi instalate aproape oriunde pe o pagină web. Deoarece textul este de obicei împărțit în paragrafe, acestea pot fi aplicate și la. Am pus în principal ancore cu care articolele sunt împărțite în părți logice:

După ce am marcat astfel toate locurile necesare în codul HTML, creăm apoi hyperlinkuri către acestea. Pentru a face acest lucru, la sfârșit, după ultima bară oblică „/” din URL (care, după cum știți deja, este valoarea atributului href), scriem secvențial semnul lire sterline „#” și numele etichetei (ID ):

Cum se formează link-uri hash și ancore?

Mai mult decât atât, dacă un astfel de link de ancorare este plasat pe aceeași pagină cu ancorele, atunci o parte a adresei URL până la ultima bară oblică înainte de hash poate fi omisă și doar „#” plus numele ID sunt folosite ca parametru href (în esență, aceasta este una dintre opțiunile pentru link-urile relative):

Cum se formează link-uri hash și ancore?

Adică, atunci când compilați un cuprins pentru un manual pentru a optimiza codul HTML, puteți utiliza cu ușurință această opțiune ușoară. Dacă puneți un singur semn hash ca URL, fără numele identificatorului, atunci din locul în care se află un astfel de link, pagina se va derula până la capăt:

Top

De fapt, asta cea mai simpla varianta, care servește din nou avantaj suplimentar capacitatea de utilizare a resursei, deoarece ușurează viața vizitatorilor săi. Puteți folosi o imagine atractivă ca ancoră pentru a crea un buton.

Cum să eliminați sublinierea și să schimbați culoarea linkului

Dezvoltatorii HTML s-au gândit la aproape toate nuanțele care pot ajuta la optimizarea unui aspect sau altul, același lucru este valabil și pentru hyperlinkuri. De exemplu, când urmărește un hyperlink către o altă pagină web și apoi revine înapoi, utilizatorul va vedea că hyperlinkul și-a schimbat culoarea.

Dacă trebuie să repete astfel de acțiuni în mod repetat, va putea determina rapid pe ce link-uri a făcut deja clic și pe care nu le-a făcut. Această opțiune este inclusă în aproape fiecare browser. Nu este nevoie să explici cât de convenabil este acest lucru și cât de mult timp se economisește.

Implicit și fără aplicație Instrumente CSS hiperlinkuri evidențiat cu subliniere și trei opțiuni de culoare, fiecare dintre ele având propriul atribut pentru:

• link — setează culoarea hyperlinkului pe pagina web (albastru în mod implicit, care este desemnat #0000ff);
• alink — culoarea hyperlinkului activ pentru perioada de timp în care acesta este procesat de browser-ul web (roșu #ff0000);
• vlink — culoarea link-ului vizitat de utilizator (violet, #800080).

Cum poți schimba culorile linkurilor pe care browserele le afișează pentru site-ul tău? Ei bine, pentru un site HTML simplu în care paginile sunt create manual (și cred că practic nu au mai rămas resurse complet funcționale de acest fel în realitățile moderne, cu excepția poate simple agende și pagini de destinație), trebuie doar să găsiți eticheta de deschidere și înregistrează-te pentru el parametrii necesari(apropo, puteți folosi și numele lui pentru a indica o culoare), de exemplu:

Dacă ați instalat un sistem de gestionare a conținutului () pentru a vă administra resursa web, atunci, indiferent de tipul de motor pe care îl utilizați, trebuie să deschideți pentru editare fișierul responsabil cu afișarea antetului (antetului), unde există o etichetă de deschidere .

Dacă resursa dvs. rulează WordPress, atunci implementare practică Puteți folosi această idee ca instrument pentru inserarea automată a unei imagini în interiorul unui hyperlink, de unde selectați mai întâi din bibliotecă sau descărcați imaginea dorităși lipiți-l în text:

Apoi selectați codul de imagine rezultat și apăsați butonul „link” al editorului, după care lipiți hyperlinkul dorit copiat în fereastra care apare:

Etichetă

Etichetă folosit pentru a crea legături și ancore („ancore”) într-un document HTML.

Ancoră („ancoră”) - concepută pentru a seta un marcaj într-un anumit loc pe o pagină web, pentru navigarea ulterioară către aceasta printr-un link. Mai mult, ancora poate fi fie în interiorul paginii curente, fie în interiorul unei alte pagini deschise printr-un link către ancoră. Pentru a seta o ancoră, utilizați atributul nume cu numele ancorei. De asemenea, orice etichetă cu un atribut id poate fi folosită ca ancoră, inclusiv eticheta .

• href - Necesar pentru linkuri. Indică adresa documentului sau ancorei către care va fi urmată legătura.
• nume - Necesar pentru ancore. Specifică numele ancorei.
• rel - Descrie relația directă dintre documentul curent și documentul deschis prin link.
• rev - Descrie părereîntre documentul curent și documentul deschis prin link.
• target - Specifică numele ferestrei sau cadrului în care va fi deschis documentul.

• accesskey - Setează tasta de comandă rapidă pentru focalizarea asupra elementului.
• class - Specifică numele clasei sau claselor etichetelor HTML utilizate în CSS (Cascading Style Sheets).
• dir - indică direcția textului în cadrul elementului.
• - specifică numele identificatorului etichetei, care poate fi folosit ca „ancoră” sau în foile de stil.
• lang - indică limba în care este scris textul din interiorul elementului HTML.
• stil - necesar pentru a utiliza încorporat Stiluri CSS la element.
• tabindex - stabilește ordinea tabulatorului între elemente (tasta Tab).
• title - afișează un sfat explicativ când treceți mouse-ul peste un element.

Tipul etichetei

Scop: linkuri.

Model de etichetă: inline (încorporat, la nivel de linie).

Poate conține: etichete inline, text simplu și Caractere speciale HTML(mnemonică).

Nu poate conține: alte etichete la orice nivel de cuibărire.

Exemplu HTML: Utilizarea etichetei A

Suport pentru versiunea HTML

Suport pentru browser

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. Ca ancoră (corp link) poate acționa ca text ( link text), și imaginea (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 setată de atribute în 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

De asemenea este si atributul titlului, pentru a crea un tooltip pentru un link:

Pagina de pornire a site-ului 1seo

text

Apropo, dacă specificați cutia poștală în adresa URL și specificați protocolul mailto:, atunci când faceți clic pe linkul dvs., se va deschide program de mail, unde în câmpul Către adresa dvs. va fi deja introdusă cutie poștală. În exemplu, 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ă ai citit articolele anterioare Tutorial 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 posta pe hosting gratuitși vezi roadele muncii tale. 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. Acest lucru este, de asemenea, foarte Informații importante, încercați să o absorbiți și să o digerați complet.