Crearea unui hyperlink simplu în notepad. Ce este un link și cum se face un hyperlink în HTML

<а href="http://www.mysite.com/doc2.htm/anch3">

Adică, combinăm utilizarea URL-ului complet al documentului și, în același timp, indicăm un anumit fragment al acestuia, marcat ca „anch3”.

Orez. 1.16. Fereastra browserului care arată rezultatul fișierului afișat în Lista 1.16

Trebuie remarcat faptul că, dacă textul cu hyperlink este deja afișat în fereastra de vizualizare, așa cum a fost cazul în ultimul nostru exemplu, atunci nu vor avea loc modificări. Dar tot ce trebuie să faceți este să redimensionați verticală fereastra de vizualizare a browserului, astfel încât să ascundeți ultima linie de conținut, care este ceea ce indică hyperlinkul, iar rezultatul acțiunii sale poate fi demonstrat clar.

Desigur, toate numele acestor marcaje de marcaj, care sunt determinate folosind valoarea parametrului nume, trebuie să fie unice. Vă rugăm să rețineți că HTML nu face diferența între caracterele majuscule și majuscule. Prin urmare, dacă documentul nostru HTML definește două marcaje care ulterior vor fi referite prin hyperlink-uri care diferă doar în majuscule, atunci pentru analizatorul HTML încorporat în browser, acești identificatori vor fi considerați la fel și nu va procesa niciunul dintre ei.

Cu toate acestea, știm deja că puteți identifica orice element al unui document HTML folosind parametrul id, care poate fi folosit ca parte a oricărei etichete. În același timp, hyperlinkurile care indică fragmente de document pot folosi, de asemenea, acești parametri, adică pentru a seta un marcator de marcaj la orice etichetă, nu este necesară utilizarea etichetei<а>cu parametrul name, trebuie doar să utilizați parametrul id.

Valorile parametrului nume și ale parametrului id sunt identificatori unici ai elementelor din documentul HTML. Prin urmare, nicio valoare a parametrului name nu trebuie să se potrivească cu nicio valoare a parametrului id.

Dar ce opțiune ar trebui să alegeți pentru paginile dvs. Web, ce parametru ar trebui să utilizați? Lucrul important de realizat aici este că, deși parametrul id poate servi mai multor scopuri, cum ar fi identificarea unui marcator de marcaj, crearea de identificatori unici pentru scripturile DHTML care sunt executate și stilul, este posibil ca unele browsere vechi să nu accepte acești identificatori pentru direcționarea hyperlinkurilor.

Împreună cu eticheta<а>un parametru de titlu poate fi utilizat pentru a ajuta la identificarea hyperlinkului către utilizatorul de la distanță. Valoarea acestui parametru este un șir de text care va fi afișat ca un mic indiciu atunci când utilizatorul plasează cursorul mouse-ului peste hyperlinkul căutat. Un anunț pentru un astfel de hyperlink arată cam așa:

<а href="www.site.com" title="Foarte frumos site">

Folosind parametrul hreflang, putem specifica limba în care este scris conținutul text al resursei de Internet către care este scris acest hyperlink. Valoarea parametrului este una dintre notațiile de limbaj standard pe care le-am analizat puțin mai devreme în acest capitol.
Dar simpla indicare a limbii în care este scris conținutul text al unei pagini Web nu este suficientă. De asemenea, este necesar să se indice codificarea utilizată. Și aici ne poate ajuta parametrul de set de caractere deja familiar, a cărui valoare este desemnarea standard a codificării utilizate pentru a afișa conținutul text al resursei de Internet la care se face trimitere de hyperlinkul pe care îl căutăm.

Folosind parametrul gel, putem indica scopul documentului către care hyperlink-ul indică, adică valoarea acestui parametru denotă în mod explicit relația dintre documentul sursă și documentul la care ne conectăm. Utilizarea acestui parametru nu are niciun efect asupra modului în care este afișat hyperlinkul sau a modului în care este preluată resursa, dar poate fi utilă. Dacă paginile Web sunt destinate nu numai vizualizării utilizând un browser, ci și procesării de către unele aplicații specializate. Cum ar fi, de exemplu, motoarele de căutare avansate care sunt capabile să recunoască și să proceseze corect astfel de relații între documente, indicate prin hyperlinkuri.

Valoarea parametrului rel este unul dintre cuvintele cheie predefinite la care ne vom uita acum.

• Alterna. Valoarea indică faptul că documentul este o reprezentare alternativă a documentului original. Dacă un hyperlink utilizează un parametru lang cu o valoare care este diferită de limba documentului sursă, atunci un astfel de hyperlink este de obicei considerat a fi un link către o copie a documentului sursă într-o altă limbă.
• Foaia de stil. Indică faptul că documentul cu hyperlink este o foaie de stil. Mecanismul de utilizare a foilor de stil este descris în detaliu în al doilea capitol.
• Start. Este folosit pentru a desemna documentul inițial, de pornire, al unui anumit set de documente. Pentru un site Web, aceasta ar fi evident pagina de pornire.
• Următorul. Valoarea este utilizată dacă documentul de pornire și documentul cu hyperlink fac parte dintr-o secvență ordonată liniară de documente, iar acesta din urmă este următorul în secvență față de pagina Web originală.
• Prev. Valoarea este folosită în același caz cu cel precedent, dar acum indică faptul că documentul din lanț nu este următorul, ci anterior, în raport cu documentul de plecare.
• index. Folosit în hyperlinkuri care indică un document care este conținutul indexat al paginii Web originale.
• Glosar. Valoarea indică faptul că documentul conține un glosar de termeni folosiți în documentul sursă.
• drepturi de autor. Folosit dacă documentul cu hyperlink conține o notificare privind drepturile de autor pentru conținutul documentului original.
• capitol. Folosit în hyperlinkuri care indică către documente care sunt capitole separate dintr-un anumit set de documente.
• secțiune. Hyperlink cu această valoare a parametrului rel indică un document care este o secțiune dintr-un set general de documente care formează un singur întreg conținut.
• subsecțiunea. Sensul este o continuare a conceptului indicat de sensul anterior pe care l-am considerat. Înseamnă că documentul este deja subsecțiunea
• Apendice. Valoarea indică faptul că documentul cu hyperlink este un atașament la documentul original.
• Ajutor. Folosit pentru a lega la documente care oferă informații de fundal suplimentare la conținutul documentului original.
• Marcaj. Folosit pentru link-uri către documente HTML care conțin link-uri către unele fragmente cheie selectate ale documentului sursă.

Când utilizați aceste valori, vă rugăm să rețineți că analizatorii HTML vor fi sensibile la majuscule și minuscule, așa că trebuie să respectați cu strictețe ortografia care este dată în lista noastră.

De fapt, în HTML există posibilitatea de a crea propriile valori pentru atributul pe care îl luăm în considerare, dar pentru a utiliza pe deplin acest parametru este necesar să folosiți instrumente specializate pentru descrierea acestor noi valori și software care vizează recunoașterea acestor tipuri. de legături. Deoarece suntem interesați de browsere, nu este nevoie să creăm noi tipuri de link-uri.

Această tehnologie este de fapt un paliativ, care este conceput pentru a oferi cel puțin o parte din capacitățile oferite de noul limbaj pentru descrierea documentelor pe Internet - XML ​​(Extensible Markup Language), care se prevede a fi succesorul și „ucigașul” de HTML, dar nu există browsere și aplicații XML răspândite care procesează documente XML. Și această tehnologie nu va deveni general acceptată pentru o perioadă destul de lungă de timp, ceea ce înseamnă că tehnologia HTML are încă tot dreptul la viață și va fi folosită ca bază pentru paginile Web pentru o perioadă destul de lungă de timp.

Dar să revenim la luarea în considerare a atributelor etichetei<а>. Atributul rev este opusul atributului rel. În timp ce atributul rel specifică tipul de document către care hyperlink-ul indică, atributul rev specifică tipul documentului sursă care conține hyperlinkul. Același set de cuvinte cheie care a fost folosit pentru atributul rel este folosit ca valori ale acestui atribut.

Folosind parametrul țintă, specificăm în ce cadru dorim să afișam documentul către care indică hyperlinkul. Faptul este că, de obicei, un document este afișat într-o fereastră de vizualizare a browserului. Dar în HTML, este posibil să împărțiți fereastra de vizualizare în mai multe zone, numite cadre, fiecare dintre acestea va afișa propriul document HTML. Vom lua în considerare tehnologia utilizării cadrelor într-una din secțiunile următoare ale acestui capitol, dar deocamdată vom reține doar că parametrul țintă vă permite să specificați în mod explicit în ce cadru ar trebui să fie afișată pagina Web. Configurarea unui hyperlink folosind această opțiune ar arăta cam așa:

<а href="http://www.mysite.com/docl.html" target="_top">

Un astfel de hyperlink va determina browserul să încarce pagina Web a cărei URL este specificată ca valoare a parametrului href în cadrul superior al cărui nume este specificat în parametrul țintă. Valoarea ultimului parametru sunt cuvintele cheie definite în specificația HTML. Ne vom uita la acestea în secțiunea despre rame.

Unele organe de introducere a informațiilor și hyperlink-uri vă permit să mutați focalizarea de intrare între ele folosind tasta Tab, adică, o apăsare a acestei taste activează următorul organ de intrare inclus în secvența generală. Și ordinea de mișcare între controalele incluse în secvența generală este specificată folosind parametrul tabindex. Valoarea acestui parametru este un număr întreg pozitiv obișnuit și, cu cât acest număr este mai mare pentru orice organ de intrare de date sau hyperlink, cu atât va fi mai târziu la rândul său când se mută focalizarea de intrare. Desigur, nicio pereche de elemente de design de pagină Web nu ar trebui să aibă aceeași valoare pentru acest parametru, altfel browserul pur și simplu nu le va include în secvența de elemente când focusul de intrare se mișcă.

Totuși, pe lângă accesul prin apăsări succesive ale tastei Tab, putem folosi parametrul cheii de acces, a cărui valoare este un caracter. Când utilizatorul apasă tasta care este responsabilă pentru introducerea unui anumit caracter, focalizarea de intrare este transferată automat către hyperlinkul dorit, în declarația căreia este încorporat parametrul cheii de acces, iar utilizatorul îl poate activa fără a utiliza mouse-ul, doar prin apăsarea tastei . Să ne uităm la un mic exemplu:

<а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U">

Purtătorul unui hyperlink poate fi nu numai text, ci și o imagine grafică. Pentru a face acest lucru, trebuie să plasați o etichetă care declară inserarea graficelor în conținutul paginii Web între etichete<а>Și. Dar adevărul este că putem „atârna” nu unul, ci mai multe hyperlinkuri pe o imagine grafică, adică mai multe zone active sunt evidențiate în imagine, iar făcând clic pe fiecare dintre ele activează hyperlinkul corespunzător. Această tehnologie se numește grafică segmentată.

Etichetele specializate sunt folosite pentru a crea grafice similare asociate cu mai multe hyperlinkuri. În primul rând, sunt declarate zonele active ale desenului, numite și segmente. Întregul lor set alcătuiește o hartă a segmentelor active ale imaginii, căreia i se atribuie un anumit nume. Și apoi acest nume de card este asociat cu imaginea în sine, declarată folosind eticheta . Să ne uităm la un exemplu tipic.

Lista 1.17

!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN”
„http://www.w3.org/TR/htm!4/strict.dtd”>




<р>Acesta este un text normal.

În acest exemplu puteți vedea că atunci când declarați o imagine, în etichetă inserăm parametrul usemap, a cărui valoare este numele hărții segmentelor de imagine active asociate cu hyperlinkuri. Un simbol hash este inserat înaintea numelui hărții de segmente active utilizate. Descrierea acestei hărți este plasată între etichete . În același timp, eticheta de deschidere

Harta constă dintr-o descriere a segmentelor. Fiecare segment este descris folosind o etichetă<агеа>. Putem aplica segmente active în trei forme diferite: dreptunghiuri, cercuri și poligoane. Forma este specificată folosind parametrul de formă necesar. Putem folosi una dintre cele trei valori presetate ca valoare a acestui parametru.

• Sens rect folosit pentru a crea hotspot-uri dreptunghiulare.
• Sens cerc folosit pentru a crea un segment circular.
• Sens poli vă permite să creați segmente active sub formă de poligoane convexe.

După ce am specificat tipul de formular, trebuie să le determinăm cu exactitate dimensiunea și locația pe imaginea noastră grafică. Pentru a face acest lucru, utilizați parametrul coords, a cărui valoare este o listă de coordonate care definesc segmentul activ. În Lista 1.17 putem vedea că coordonatele din lista partajată sunt separate printr-o virgulă obișnuită. Coordonatele sunt numărate din colțul din stânga sus al imaginii, care are coordonatele (0;0).

Pentru segmentele dreptunghiulare, sunt specificate coordonatele colțurilor din stânga sus și din dreapta jos. Iar pentru poligoane, coordonatele tuturor punctelor sunt enumerate secvențial, în ordinea în care sunt conectate prin linii. Desigur, prima și ultima pereche de coordonate trebuie să coincidă, altfel poligonul va fi deschis și segmentul activ nu va fi procesat.

A eticheta<аrеа>Este inclus și parametrul href, a cărui valoare este adresa URL a resursei către care hyperlink-ul acestui segment indică.
Dar acest parametru, surprinzător, nu este necesar. În cazul în care un segment este creat, dar nu ar trebui să fie conectat la un hyperlink, trebuie utilizat parametrul nohref, care nu are sens.
Dar un parametru necesar pentru etichetă<аrеа>totul este chiar așa. Acesta este un parametru alt a cărui valoare este un șir de text care este o reprezentare alternativă a desenului. După cum știm, această linie este afișată ca un indiciu atunci când utilizatorul plasează cursorul mouse-ului peste un obiect. În cazul nostru, un astfel de obiect este un segment activ încorporat într-o imagine grafică.

De asemenea, în etichetă<агеа>, la fel ca etichetele obișnuite de hyperlink, sunt utilizați parametrii tabindex și cheie de acces, care vă permit să activați un hyperlink fără a utiliza un mouse, folosind doar tastatura. Ne-am uitat la structura valorilor acestor parametri puțin mai devreme. Săpând puțin din subiect, trebuie menționat că orice webmaster adecvat trebuie cu siguranță să folosească acești parametri, deoarece numai utilizarea lor poate garanta activarea hyperlinkurilor fără a utiliza mouse-ul.

Deci, ne-am dat seama de utilizarea tehnologiei grafice segmentate. Dar nu am aflat totul despre linkuri. Specificația HTML definește eticheta , care nu creează hyperlinkul obișnuit, ci un fel de conexiune între documentul afișat și un fișier suplimentar. Etichete poate fi plasat doar în secțiunea de cap a unui document HTML, între etichete Și Ca exemplu de utilizare a etichetei pe care o luăm în considerare Următorul fragment de cod poate fi dat:

Lista 1.18

„http://www.w3.org/TR/html4/strict.dtd”>

Cu acest fragment indicăm că această pagină Web conține al doilea capitol al unui document extins, și cu ajutorul etichetelor Indicăm link-uri către pagini Web care conțin un cuprins, precum și capitolul anterior și următorul. Tipul de document către care indică legătura este determinat folosind parametrul familiar rel. Un browser obișnuit, desigur, nu va putea procesa și afișa astfel de legături în niciun fel. Au fost introduse în HTML pentru a crea documente care să fie procesate folosind anumite aplicații specializate care au făcut posibilă crearea unor sisteme de management al documentelor pe baza acestui format. Dar capacitățile slabe încorporate ale HTML pentru a crea sisteme de gestionare a documentelor cu drepturi depline nu au fost în mod clar suficiente, iar când a fost dezvoltat standardul XML, dezvoltatorii și-au schimbat bucuroși favoritul.

Deci, se dovedește că în paginile Web obișnuite eticheta absolut inutil? Nu chiar. Doar cu ajutorul acestei etichete putem conecta paginile Web cu foi de stil externe, un mijloc puternic de control al afișajului unui document în browser. Dar despre foile de stil vom afla puțin mai târziu, în al doilea capitol. Acolo vom analiza și un exemplu de utilizare a etichetei . Deocamdată, tot ce trebuie să facem este să listăm parametrii acestei etichete. Toți acești parametri sunt aplicați în etichete<а>cu aceleași valori posibile, așa că nu vom lua în considerare fiecare parametru în detaliu, ci le vom enumera pe scurt:

• set de caractere- indică codificarea documentului către care indică legătura;
• href- URL-ul documentului către care se folosește link-ul ca valoare;
• hreflang- valoarea este denumirea de cod a limbii în care este scris documentul legat;
• tip- stabilește tipul de document către care indică legătura;
• rel- stabilește starea documentului indicat de link în raport cu documentul sursă;
• rev- stabilește starea documentului sursă în raport cu cel către care trimite această legătură;
• mass-media- indică tipul de dispozitiv pe care va fi afișat documentul către care indică legătura.

Documentele acceptate în prezent sunt afișate pe monitoare obișnuite, pe monitoare braille concepute pentru persoanele cu pierdere a vederii, pentru dispozitive de imprimare și pentru dispozitive de vorbire. Și, desigur, pe lângă acești parametri, se folosește un set de parametri de identificare suplimentari comuni tuturor etichetelor.

Rămâne să luăm în considerare doar o singură etichetă folosită pentru a difuza hyperlinkuri. După cum știm, este posibil să nu furnizăm adresa URL completă pentru documentele cu hyperlink, atâta timp cât documentul se află pe același site Web ca pagina Web originală. Dar se dovedește că putem face același lucru cu hyperlink-urile către pagini Web care fac parte din alte site-uri.

Folosind o etichetă stabilim baza pentru hyperlinkuri cu valori scurtate ale parametrilor href. Să încercăm să demonstrăm funcționarea acestui mecanism folosind un exemplu simplu și clar:

„http://www.w3.org/TR/html4/strict.dtd”>



<Р>Text<А href="/pages/birds.gif">Legătură

Ca valoare a parametrului etichetei href necesar definim un document care stă la baza conținutului paginilor Web ale site-ului nostru. Și acum, dacă în corpul documentului nostru HTML folosim un hyperlink cu o adresă URL scurtată, atunci numele de domeniu pentru această adresă URL nu va fi numele site-ului sursă, ci cel specificat în etichetă. . Deci, în exemplu, hyperlinkul indică un document

de la adresa URL www.mysite.com/pages/birds.gif.

Trebuie clarificat faptul că eticheta plasat în antetul documentului între etichete Și .

Și asta este tot ce vă putem spune despre utilizarea hyperlinkurilor în HTML.

Caracteristica principală a unui document HTML este prezența în el hyperlinkuri(sau doar linkuri) către alte documente, site-uri, fișiere, imagini etc. Abilitatea de a insera link-uri în pagini către obiecte din afara acestuia a făcut internetul atât de popular și ușor de utilizat. Prin urmare, atunci când vă creați site-ul, amintiți-vă întotdeauna de „magia” link-urilor.

În această lecție vom vorbi despre cum se creează un link către site, către pagina sau fișierul său separat. Veți învăța cum să schimbați textul unui link, cum să îl deschideți într-o fereastră nouă, cum să faceți un link către o imagine, ce sunt link-urile externe și interne și multe altele. În plus, aveți deja informații despre lucrul cu link-uri, despre care am atins în lecțiile anterioare (de exemplu, am vorbit despre cum puteți schimba culoarea unui link în).

În general, acest tutorial vă va face înțelegerea creării link-urilor completă și suficientă. Veți înțelege cum să creați un hyperlink în HTML și de ce. Și vei învăța să-i controlezi proprietățile.

§ 1. Link către fișier, link către site, link către pagină

Numeroase întrebări despre modul în care un link către un fișier diferă de un link către un site sau pagina sa individuală m-au forțat să pun răspunsul la acesta chiar la începutul acestei lecții. Răspunsul este: nimic. Toate linkurile enumerate sunt externe original pagină și sunt create în același mod.

Pentru a nu-mi lăsa gândurile să scape, vă voi arăta totul cu un exemplu.

În browser vom vedea asta:

În browser vom vedea asta:

După cum puteți vedea, toate tipurile de link-uri sunt create exact la fel. Singura diferență este abordare obiectul care trebuie referit. Acum să trecem la partea principală a lecției.

§ 2. Crearea de link-uri externe

Legăturile diferă unele de altele prin externȘi intern, precum și pe textȘi grafic. Link-urile externe duc în afara paginii html, link-urile interne duc la diferite părți aceeași pagini. Legăturile text sunt text (în mod implicit, este evidențiat cu albastru și subliniat), iar legăturile grafice conțin o imagine ca obiect pe care trebuie să faceți clic pentru a accesa. Toate aceste tipuri de link-uri sunt create în HTML folosind o etichetă (prescurtare de la anchor). Să aruncăm o privire mai atentă.

Pentru a crea un link extern către un site, o pagină sau un fișier, utilizați atributul etichetă - href. Valoarea acestui atribut este URL site, pagină sau fișier (am vorbit despre asta mai sus). Între etichete se află partea vizibilă a link-ului (link anchor), adică ceea ce vedem pe ecranul browserului. Ancora linkului poate fi fie text simplu (link text) fie o imagine grafică (link imagine). Un link de imagine este creat prin inserarea unei etichete cunoscute între etichete și. În general, sintaxa pentru crearea unui link arată astfel:

De exemplu, pentru a crea un link text către pagina de pornire a acestui site, trebuie să scrieți următorul cod HTML:

http://www.seoded.ru/"> Pagina de pornire a site-ului

În browser va arăta astfel:

După cum am scris chiar la începutul acestei lecții, culoarea textului linkului (ancoră) poate fi schimbată folosind . În general, puteți aplica aceleași reguli textului linkurilor ca și textului principal al paginii, adică evidențiați-l cu aldine, cursive, folosiți titluri etc.

§ 2.1 Legături grafice (legături cu imagini)

După cum am spus mai sus, pentru a crea un link de imagine, trebuie să utilizați . Un exemplu de astfel de link arată astfel:

Și browserul va afișa:

În mod implicit, browserul înconjoară imaginea într-o legătură grafică cu un cadru. Dacă acest lucru este nedorit, atunci atributul frontieră etichetă IMG trebuie să atribuiți valoarea 0:

border="0">

pagina principala

§ 3. Legături interne

Link-urile interne sunt folosite pentru a naviga confortabil prin pagini cu mult conținut. Cu ajutorul lor am realizat „Conținutul lecției” (vezi la începutul acestei pagini). Legăturile interne sunt create folosind același principiu ca și linkurile externe. Doar în valoarea atributului href este indicată ancora legăturii. Ancora este creată de atribut Nume:

name="nume ancora">text

Și numele ancorei este setat în mod arbitrar. Merită să spunem aici că nu toate browserele înțeleg numele ancorelor rusești, așa că recomand să folosești alfabetul latin. Textul dintre etichete pentru a crea o ancoră nu este necesar și de cele mai multe ori nu este specificat.

Eu rujeola sunt localizate in acele locuri de pe pagina in care ar trebui sa mearga utilizatorul dupa ce face clic pe link.

După cum am spus mai sus, în atribut href a unei legături interne, în locul unei adrese, numele ancorei dorite este indicat cu simbolul hash obligatoriu ( # ) in fata lui. Să ne uităm la asta cu un exemplu.

Am creat o ancoră cu numele zagolovokși l-a plasat lângă titlul acestei lecții („Hyperlink-uri în HTML”). Codul de ancorare este următorul:

name="zagolovok">

href="#zagolovok">Pentru titlu

Și în browser așa:

Dacă ați observat, după ce ați făcut clic pe linkul intern către titlu, adresa URL din bara de adrese a browserului s-a schimbat:

La adresa originală:

http://www..html

http://www..html#zagolovok

Și folosind această funcție, puteți face link către o anumită locație de pe pagină din orice resursă de pe Internet! Adică, să presupunem că ați creat o pagină cu un articol lung despre ceva (sau ați postat un număr mare de fotografii pe pagină) și ați marcat-o cu link-uri interne. În timp ce erați în , trebuia să faceți un link nu doar către pagina cu articolul (sau fotografiile), ci și către un anumit loc de pe acesta (sau o anumită fotografie). Folosind opțiunea cu un link intern în adresă, puteți obține cu ușurință ceea ce aveți nevoie.

§ 4. Referinţe absolute şi relative

pagina principala

Dar cu legături relative, este puțin mai complicat. În astfel de link-uri este indicată fie adresa relativ folderul rădăcină al site-ului (cel în care se află pagina principală) sau relativ la pagina sursă. Astfel de link-uri sunt necesare, de exemplu, dacă site-ul se află pe computerul dvs. de acasă. Sau acesta nu este un site, ci o pagină care este un pointer către alte documente.

Să lăsăm afară, trebuie să facem un link către pagină clienty.html care minte într-un singur folder cu pagina principală a site-ului. Apoi codul de link relativ va arăta astfel:

/klienty.html">Clienți

Acum să presupunem că există în același folder cu pagina principală folderul zakazy si deja în ea se află pagina klienty.html Apoi codul pentru link-ul relativ va arăta astfel:

/zakazy/klienty.html">Clienți

Acum să ne uităm la crearea de hyperlinkuri raportat la pagina originală. Să presupunem că avem o pagină pret.html(pagina sursă) și de la ea trebuie să faceți un link către pagină clienty.html Există următoarele opțiuni tipice:

1. Se află paginile price.html și clienty.html într-un singur folder.

klienty.html">Clienți




2. în folderul rădăcină al site-ului, pagina price.html se află în folderul zakazy cu un nivel mai sus).

Codul va arăta astfel:

../klienty.html">Clienți

Două puncte indică faptul că trebuie să vă mutați din folderul curent la un nivel superior.




3. Se află pagina klienty.html și folderul zakazy în folderul rădăcină al site-ului, folderul mebel se află în folderul zakazy, pagina price.html se află în folderul mebel(adică pagina klienty.html în raport cu pagina originală price.html se află două niveluri mai sus).

../../klienty.html">Clienți

Adică, fiecare nivel este indicat de două puncte și o bară oblică " / ».




4. în folderul rădăcină al site-ului, pagina clienty.html se află în folderul zakazy(adică acum se află pagina klienty.html în raport cu pagina originală price.html un nivel mai jos).

zakazy/klienty.html">Clienți

În acest caz, punctele și barele oblice nu sunt utilizate.




5. Se află pagina price.html (pagina originală) și folderul zakazy în folderul rădăcină al site-ului, folderul mebel se află în folderul zakazy, pagina clienty.html se află în folderul mebel(adică pagina klienty.html este acum relativă la pagina originală price.html se află la două niveluri mai jos).

zakazy/mebel/klienty.html">Clienți




6. În folderul rădăcină al site-ului sunt două foldere: zakazy si oplata. Pagina clienty.html se află în folderul zakazy, pagina originală price.html se află în folderul oplata(adică ambele pagini mint în foldere diferite cu un nivel mai jos din folderul rădăcină al site-ului).

../zakazy/klienty.html">Clienți

§ 5. Link către e-mail

Pentru a creați un link către e-mail, necesar în locul adresei URL din valoarea atributului href scrieți o adresă de e-mail care indică protocolul ( mailto:). Și atunci când faceți clic pe un astfel de link, se va deschide o fereastră de program de e-mail cu adresa de e-mail introdusă în câmpul „Către”. În codul HTML arată astfel:

mailto: [email protected]„>Poșta mea

Și în browser așa:

title="Accesați pagina principală">!} pagina principala

§ 7. Concluzie

Acestea sunt informațiile de bază despre crearea de link-uri în HTML. Aceasta încheie această lecție. Și acest fapt sugerează că ați stăpânit deja majoritatea elementelor de bază ale HTML.

Vă recomand să parcurgeți din nou secțiunile anterioare și apoi să creați o pagină HTML cu drepturi depline, dedicată, de exemplu, persoanei iubite. Conform designului tău și conform dorințelor tale. Apoi postați-l pe un site web (desigur, dacă aveți unul, atunci pe el) și admirați-vă pe deplin primul site.

Îl poți arăta prietenilor tăi sau oricui altcineva. În general, simțiți-vă ca proprietarul unui site web. Și apoi, după o mică desfătare cu ocazia unui astfel de eveniment, treceți la următoarea secțiune, în care vă voi povesti despre crearea tabelelor în HTML.

Și acesta va fi deja primul pas către transformarea paginii tale personale într-o resursă serioasă.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi vreau să vorbesc mai detaliat despre ce este un hyperlink în Html, cum le puteți plasa în textul de pe un site web, cum să faceți un link către o imagine, cum să utilizați corect eticheta „A” și atributele acesteia „ Href” și „Target blank” (deschide în fereastră nouă).

În general, un hyperlink este un element cheie. În plus, linkurile sunt acum unul dintre cei trei factori principali care influențează promovarea cu succes a unui site web. Folosirea lor corectă și înțelegerea, de exemplu, a modului în care sunt afectate de motoarele de căutare, poate afecta semnificativ traficul către resursa dvs.

Ce sunt hyperlinkurile și ancorele?

Deci, ne-am familiarizat deja cu etichete învechite care nu sunt recomandate pentru utilizarea de zi cu zi. Să continuăm cunoștințele noastre.

Pentru a realiza un hyperlink în cod HTML, va trebui să folosim și eticheta A. Pentru aceasta, putem folosi diverse atribute, setând, de exemplu, adresa URL a țintei pentru deplasarea de-a lungul acestui link (href) sau instruirea acesta să fie deschis într-o fereastră nouă (target= _blank). Dar să vorbim despre totul în ordine.

După cum am menționat mai sus, hyperlinkurile sunt un element cheie al limbajului HTML și vă permit să faceți link atât la paginile interne ale propriului site, cât și la alte resurse de pe Internet. Voi spune o banalitate - urmărirea unui link se realizează făcând clic pe el (ce ați crezut?).

Pe lângă faptul că pot fi împărțite în interne sau externe, și ele poate fi oficialși să fie folosit exclusiv pentru nevoile browserului cu care vor fi deschise paginile site-ului dumneavoastră.

În acest caz, acestea nu vor fi vizibile pe pagină, deoarece sunt scrise în zona Head a codului sursă al documentului, al cărui conținut nu este afișat pe pagină (am menționat structura codului limbajului de marcare hipertext în articolul despre).

Hyperlinkurile de servicii sunt create nu folosind eticheta „A” (ca cele obișnuite), ci folosind eticheta "Legătură". Există destul de multe sarcini pe care le execută, de exemplu, cu ajutorul lor, fișiere externe cu foi de stil în cascadă CSS sau, de exemplu, .

Dar astăzi nu vom lua în considerare modul în care pot fi create (încă va veni timpul pentru ei), ci ne vom opri în detaliu asupra link-uri vizibile, care pot fi create în interiorul zonei Corp și, în consecință, vor fi afișate pe pagina web.

Dar, cu toate acestea, toate hyperlinkurile (atât cele vizibile, cât și cele de serviciu) au un lucru în comun - toate conțin un atribut obligatoriu Href. În el, ca valoare, este scris un anumit loc în document (dacă a fost marcat anterior cu o ancoră) sau adresa documentului în sine pe Internet (în Href sau, cu alte cuvinte, calea către pagină sau se scrie un alt fișier).

Hyperlinkurile sunt elemente de navigare care sunt concepute pentru a vă transfera către alte documente din rețea sau pentru a naviga prin conținutul unei pagini web pe care o vizualizați deja folosind etichete prefabricate în corpul documentului, care se mai numesc și Html ancore(ancoră).

S-ar putea să existe o confuzie aici, pentru că... în SEO, cuvântul este , dar în Html, „ancoră” înseamnă o ancoră (traducerea cuvântului ancoră) sau un semn în text, care poate fi apoi referit.

De ce sunt folosite ancorele în HTML? Acest lucru este destul de convenabil atunci când creați navigare pe o pagină web destul de lungă. Probabil ati vazut-o pe internet cand pe pagina pe care o deschideti, imediat sub titlu sunt denumirile sectiunilor articolului publicat pe aceasta pagina.

În acest fel, cititorul va putea să meargă imediat la locul de pe pagină în care se află informațiile care îl interesează, în loc să se deranjeze să deruleze textul și să caute vizual locul potrivit. Convenabil și îmbunătățește.

Cum sunt create ancorele și hashurile de link

Deci, sarcina noastră în acest caz va fi să instalăm ancore în locurile potrivite pe pagină (document), care, în general, va arăta astfel:

Acestea. pentru a realiza o ancoră, trebuie să introduceți un singur atribut „Nume” în eticheta goală de hyperlink „A”, a cărui valoare folosește o etichetă unică care nu trebuie să conțină spații și în care puteți utiliza caractere latine, numere , cratime și liniuțe de subliniere (în analogie completă cu regulile prin care puteți crea URL-uri - ,,,[_],[-]).

În acest caz, ancora nu va fi vizibilă pe pagina însăși, deoarece Nu am scris niciun text în interiorul elementelor „A”. Cu toate acestea, ancorele create în acest fel vor polua codul HTML și, prin urmare, acum sunt folosite mult mai des decât ancorele un alt mod de a crea o etichetă.

În acest caz, nu trebuie să creați o etichetă „A” goală, dar puteți utiliza oricare dintre elementele deja disponibile în locul potrivit în text. De exemplu, acestea ar putea fi.

Acestea. pentru a crea un analog al unei ancore, este suficient să atribuiți un atribut ID universal oricărei etichete (poate fi folosit pentru toate etichetele și, apropo, funcționează pe baza acestuia), de exemplu, astfel:

Textul titlului

Așadar, acum, în loc să creăm numărul necesar de ancore care poluează codul și în prezent nu sunt valabile (nerecomandat de consorțiul W3C, care dezvoltă limbajul HTML), pur și simplu adăugăm Id.

Se pare că pentru aceasta va trebui, ca de obicei, să introduceți atributul necesar „Href” în interiorul hyperlinkului „A”, dar a cărui valoare va fi formată din numele etichetei (ancoră) dorite precedat de semnul hash „#”, care se mai numește și hash (de unde, apropo, cresc picioarele numelui frecvent folosit: link hash):

se va muta la locul paginii marcate cu ancora

Vă rugăm să rețineți că atunci când faceți clic pe un astfel de hyperlink, un document nou nu va fi deschis. Browserul va derula pagina deja deschisă într-o astfel de poziție încât locul din text în care ați inserat ancora să ocupe o poziție chiar în partea de sus a ecranului. Ar fi logic să presupunem că valorile tuturor etichetelor (ancorelor) de pe o pagină ar trebui să fie unice pentru a evita confuzia pentru browser.

Dacă faceți o ancoră folosind atributul ID într-o etichetă amplasată convenabil pentru aceasta, atunci trebuie să țineți cont de faptul că, pe lângă restricția privind tipul de simboluri utilizate (,,,[_],[-]), Valoarea ID este necesară trebuie să înceapă cu un caracter latine.

Apoi, toate caracterele valide pot fi plasate în orice cantitate, dar primul caracter al etichetei de ancorare din valoarea atributului ID trebuie să fie o literă (latina, desigur). În caz contrar, o astfel de ancoră inserată în codul HTML nu va funcționa (în majoritatea browserelor).

Dacă nu scrieți niciun nume al semnului de ancorare (href="#") după simbolul hash „#”, atunci un astfel de hyperlink derulează pagina în sus. Acesta este modul în care puteți crea un simplu buton „Înapoi la început” făcând un link din imagine (vom vorbi despre asta puțin mai târziu) și inserându-l în șablonul site-ului dvs., de exemplu, astfel:

Href este un atribut de etichetă obligatoriu al oricărui hyperlink

Acum să trecem de la navigarea în interiorul documentului (folosind ancore) la navigarea externă, adică. va trebui să facem link-uri care să conducă la alte documente pe site-ul nostru sau pe alt site. Acum, în atributul Href nu mai trebuie să specificăm etichete de ancorare, ci calea către fișierul care urmează să fie deschis (pagina, prin design, este un fișier încărcat în browser pentru afișare ulterioară).

ancoră

Aici ar trebui să vorbim mai departe, dar despre ele am scris deja mai detaliat în materialul menționat, așa că probabil că nu are sens să mă repet. Dar trebuie să știți cum să setați calea către fișier în atributul Href al hyperlinkului pe care l-ați creat. Prin urmare, nu încercați să vă familiarizați cu materialul oferit.

Totuși, permiteți-mi să vă reamintesc că atunci când creați adrese URL este de preferat să le utilizați doar următoarele personaje: (,,,[_],[-]) și nu folosiți spații. Dacă luăm în considerare conținutul atributului Href pentru legături absolute, atunci acesta poate fi reprezentat schematic după cum urmează:

Dacă aruncăm ceea ce veți folosi rar, atunci puteți prezenta același lucru într-o formă oarecum simplificată:

Protocol (de obicei http)://nume_domeniu (de exemplu, site web)/cale_la_fișier (pagini web)

Pe lângă protocolul http simplu, pe Internet puteți găsi legături cu protocolul https, care diferă prin faptul că folosește criptare. Acesta din urmă este utilizat pe site-urile unde este nevoie de a proteja canalul de schimb de date între server și browserul clientului. De exemplu, este folosit în serviciile de monedă electronică Web Money.

Pe Internet puteți găsi diferite versiuni ale conținutului Href, de exemplu, aceasta:

Https://site/videokursy

Sau aceasta (cu extensia de fișier):

Https://site/seo/kak-raskrutit-sajt.html

Acest lucru nu schimbă esența, dar dacă există o bară oblică la sfârșitul conținutului atributului Href în interiorul hyperlinkului, aceasta înseamnă că accesul nu mai este la fișier, ci la folderul în care va fi obiectul index corespunzător. fi căutat (pentru mai multe detalii, citiți articolul despre adresele URL menționat mai sus).

Descărcați ceva de pe link

După cum puteți vedea, acest hyperlink nu este diferit de unul obișnuit, browserul înțelege doar că trebuie să descarce fișierul cu extensia zip și să nu încerce să-l deschidă pentru vizualizare, cum ar fi, de exemplu, fișierele de document cu html extensie. Cu toate acestea, puteți personaliza toate acestea pur și simplu individual în browserul dvs., pentru a se potrivi nevoilor dvs. personale.

Descărcați de pe serverul Ftp

De asemenea, puteți, de exemplu, să creați unul (de e-mail) adăugând adresa URL corespunzătoare la Href:

Scrie o scrisoare

Când faceți clic pe un astfel de link, programul de e-mail implicit pe care îl utilizați se va deschide pe computer (puteți configura browserul astfel încât linkurile cu mailto în Href să se deschidă în Gmail etc.) și va apărea un dialog pentru crearea unei noi litere, în care în câmpul „Către” se va introduce adresa poștală dată în Href.

De fapt, puteți face linkuri de e-mail destul de complexe, cu ajutorul cărora vor fi completate alte câmpuri din dialogul de trimitere a e-mailului, dar acest lucru este folosit destul de rar.

Și, în general, webmasterii au încetat recent să mai folosească hyperlink-uri cu mailto în Href din cauza faptului că sunt analizați de spammeri cu toate consecințele care decurg. Este mai bine să-l creez pe site, deși încă am totul prezentat într-o formă clasică pe pagina de contact. Ar trebui să-l schimb pe îndelete (sau nu... mă voi gândi la asta).

Cum se deschide un link într-o fereastră nouă (țintă goală)

Când creăm link-uri în cod HTML, ne confruntăm adesea cu întrebarea - în ce fereastră de browser ar trebui să deschidem documentul către care duce? În mod implicit, se va deschide într-o fereastră existentă, suprapunând pagina de pe care a fost plasat acest hyperlink.

Personal, sunt un mare susținător Atribut țintă cu valoare goală, care vă permite să deschideți o pagină într-o fereastră nouă, lăsând deschis documentul în care a fost plasat acest link. Nu știu cum afectează acest lucru utilizarea blogului meu, dar îmi place mai mult această opțiune și o folosesc în aproape toate cazurile.

De asemenea, îmi place să configurez deschiderea linkurilor în motoarele de căutare. într-o fereastră nouă astfel încât problema să fie mereu la îndemână și să te poți întoarce oricând la ea. În aceste scopuri, așa cum sa menționat deja, HTML folosește un atribut special Target, care are implicit valoarea Self:

Deschide documentul în aceeași fereastră

Deși, desigur, nimeni nu scrie target="_self" în eticheta „A”, deoarece această valoare este folosită implicit, dar dacă trebuie să deschideți pagina într-o fereastră nouă, va trebui să scrieți target="_blank ":

Se deschide într-o fereastră nouă

Rețineți că valorile atributului țintă sunt scrise cu subliniere la început(_blank), deoarece acest lucru este stipulat în validatorul Wc3, care conține găuri în limbajul de marcare hipertext. Ceea ce este de remarcat este că HTML oferă posibilitatea de a schimba opțiunea implicită de deschidere a linkului.

De exemplu, dacă doriți ca toate hyperlinkurile de pe site-ul dvs. să se deschidă într-o fereastră nouă, atunci va trebui să scrieți în zona Head a șablonului pe care îl utilizați eticheta Base cu atributul target="_blank":

mai e ceva acolo

Și acum, dacă doriți să deschideți unul dintre linkurile în aceeași fereastră, atunci va trebui să adăugați target="_self" la eticheta „A”, deoarece în mod implicit utilizați acum _blank. Oh, cum.

Apropo, am folosit elementul de bază în modul descris mai sus, dar am inclus în el și o zonă de cod cu mai multe hyperlinkuri care trebuiau deschise într-o fereastră nouă. Acestea. Am folosit și eticheta de închidere Base în interiorul zonei Body și a funcționat. Deși un astfel de cod, desigur, se dovedește a fi invalid.

Hyperlink treceți cu mouse-ul și faceți clic pe culori - cum să le schimbați

Limbajul HTML a fost conceput astfel încât utilizatorul să poată naviga cu ușurință pe ce link a deschis-o deja și care a rămas neatins.

În acest scop, se folosește o culoare care se va schimba atunci când utilizatorul face clic pe hyperlink și documentul legat de acesta este deschis cu succes. Revenind la pagina originală, utilizatorul va constata că linkul pe care l-a vizitat și-a schimbat culoarea. Toate browserele pot face acest truc.

În mod implicit, în Html pur (fără a utiliza proprietăți CSS), linkurile sunt subliniate și pot avea trei opțiuni de culoare:

1. Albastrul este culoarea pentru link-urile neurmate pe care utilizatorul nu a făcut încă clic
2. Roșu - este acceptat de hyperlink imediat după ce faceți clic pe el și până când documentul solicitat este descărcat în browserul utilizatorului prin rețea (în condiții moderne, nu este deloc ușor să prindeți acest moment și totul este de vină peste tot)
3. Violet este culoarea pentru linkurile uzate pe care utilizatorul le-a urmat deja

În HTML 4.01 aceste culori sunt implicite pentru link-uri, dar pot fi schimbate folosind atribute speciale care sunt scrise în eticheta Body, pe care le puteți găsi într-unul dintre fișierele șablonului pe care îl utilizați. Pentru a schimba toate cele trei culori, se folosesc trei atribute, respectiv:

1. Link — setează culoarea unui link nevizitat
2. Alink - culoarea celei active în prezent, care este procesată de browser
3. Vlink - culoarea hyperlink-ului deja vizitat de utilizator

Amintiți-vă, am scris deja despre cum. În consecință, atributele menționate ar putea arăta astfel:

Desigur, ceea ce s-a înțeles aici a fost o opțiune Html pură, când din anumite motive nu este convenabil sau posibil să se folosească stilul, altfel toate aceste culori pot fi ușor setate și modificate folosind .

Cum să faci o imagine un link - în două moduri

Ei bine, totul este destul de simplu aici. Deoarece este un element cu litere mici, apoi în mare orice imagine poate fi considerată doar o literă, poate doar de o dimensiune mai mare.

În cazul Html pur în jurul imaginii pe care ați făcut un link, veți avea cadru de trei pixeli lățime. Mai mult, culoarea acestui cadru va corespunde pe deplin culorilor link-urilor acceptate pentru site-ul tau (am vorbit despre ele ceva mai sus in text).

Pentru a elimina adăugarea unui chenar la o imagine pe care ați creat-o hyperlink, trebuie să adăugați un atribut Border cu o valoare zero la eticheta Img:

Aceasta este o modalitate foarte simplă de a face din imagine un link, dar există și o opțiune mai complexă numită harta imaginilor. În acest caz, datorită utilizării unui număr destul de mare de etichete și atribute HTML, puteți realiza dintr-o singură imagine o hartă întreagă de legături cu zone active (pe care se poate face clic și având diferite forme - dreptunghi, cerc, poligon).

De exemplu, puteți plasa o fotografie mare pe pagina dvs. și o puteți avea astfel încât, atunci când faceți clic pe diferite părți ale acesteia, pagini diferite să se deschidă cu hyperlinkuri diferite. De fapt, ar dura destul de mult timp pentru a descrie o hartă imagine și este puțin probabil ca cineva să o folosească, așa că nu o voi face, pentru că „jocul nu merită lumânarea”.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

S-ar putea să fiți interesat

Selectați, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - Etichete HTML pentru forma de liste derulante și câmpuri de text
Cum să inserați un link și o imagine (foto) în etichetele HTML - IMG și A
Iframe și Frame - ce sunt acestea și cum să folosiți cel mai bine cadrele în Html
Caractere cu spații albe și formatarea codului lor în Html, precum și caractere speciale care nu se îndepărtează și alte mnemonice
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, ieșirea Yandex și alte programe

(Veți găsi mai multe exemple în partea de jos a acestei pagini)

Hiperlinkuri HTML (linkuri)

Etichetă poate fi folosit în două moduri: