Link-urile pot fi împărțite în două categorii:
link-uri către resurse externe- sunt create folosind o etichetă și sunt folosite pentru a îmbunătăți capacitățile documentului curent atunci când este procesat de browser;
hiperlinkuri- link-uri către alte resurse pe care utilizatorul le poate vizita sau descărca.
Cum să faci hyperlink-uri pe un site web
1. Structura legăturii
Hyperlinkurile sunt create folosind etichetă asociată. În interiorul etichetei este plasat textul care va fi afișat pe pagina web. Textul linkului este afișat în browser subliniat, culoarea fontului este albastră, iar când treceți cu mouse-ul peste link, cursorul mouse-ului își schimbă aspectul.
Parametru de etichetă obligatoriu este atributul href, care specifică adresa URL a paginii web.
indicator de legăturăLegătura are două părți − indicatorși parte adresa. indicator de legătură reprezintă o bucată de text sau o imagine vizibilă utilizatorului. Partea adresa linkul nu este vizibil pentru utilizator, el reprezintă adresa resursei către care doriți să navigați.
Partea de adresă a linkului este formată din URL. URL(Uniform Resource Locator) - o adresă uniformă a resursei. Când creați adrese pentru cuvinte separate, este recomandat să folosiți o cratimă mai degrabă decât o liniuță de subliniere. În general, un URL are următorul format:
Metoda de acces://servername:port/path
Metoda de acces, sau protocol, schimbă date între stațiile de lucru din rețele diferite. Cele mai comune protocoale de transfer de date:
fișierul citește un fișier de pe discul local:
Fișier:/gallery/pictures/summer.html
http oferă acces la o pagină web utilizând protocolul HTTP:
http://site.ru/
https este o implementare specială a protocolului HTTP care utilizează criptare (de obicei SSL sau TLS)
https://site.ru/
ftp face o cerere către serverul FTP pentru a obține un fișier:
ftp://pgu/directory/library
mailto începe o sesiune de e-mail cu destinația și gazda specificate:
Mailto: [email protected]
Numele serverului descrie numele complet al mașinii din rețea, de exemplu, site.ru . Dacă numele serverului nu este specificat, atunci legătura este considerată locală, adică. se referă la aceeași mașină ca și documentul HTML care conține linkul.
Numărul portului TCP pe care rulează serverul web. Reprezintă numărul de specificat dacă metoda necesită un număr de port ( servere separate pot avea propriul număr de port distinct). Dacă nu este specificat niciun port, este utilizat implicit portul 80. Porturile standard sunt:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP
cale conține numele folderului în care se află fișierul.
2. Calea absolută și relativă
Când într-o legătură este specificat doar un nume de fișier, browserul presupune că fișierul se află în același folder cu documentul care conține hyperlinkul. În practică, site-urile web conțin sute de documente, care sunt plasate în foldere separate pentru a le face mai ușor de gestionat. Pentru a crea o legătură către un fișier în afara folderului care conține documentul curent, trebuie să specificați locația sau calea fișierului. HTML acceptă două tipuri de căi: absolută și relativă.
Orez. 1. Exemplu de structură a folderelor 2.1. Calea absolută
Calea absolută specifică locația exactă a fișierului în întreaga structură de foldere de pe computer (server). Calea absolută către fișier oferă acces la fișier din resurse terță parte și conține următoarele componente:
1) protocol, de exemplu, http (opțional);
2) domeniu ( Numele domeniului sau adresa IP a computerului);
3) folder (numele folderului indicând calea către fișier);
4) fișier (nume fișier).
Există două tipuri de înregistrări de căi absolute - cu și fără protocol:
http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Dacă fișierul se află în folderul rădăcină, atunci calea către fișier va fi următoarea:
http://site.ru/index.html
Dacă nu există un nume de fișier, pagina web care este setată implicit în setările serverului web (așa-numitul fișier index) va fi încărcată.
http://site.ru/
De obicei, fișierul index este un document numit index.html . Prezența unei slash / înseamnă că adresa merge în folder, dacă nu este prezentă, direct în fișier.
2.2. Calea relativă
Calea relativă descrie calea către documentul specificat în raport cu cel curent. Calea este determinată în funcție de locația paginii web pe care se află linkul. Legăturile relative sunt folosite atunci când se creează link-uri către alte documente de pe același site. Când browserul nu găsește protocolul http:// în link, caută documentul specificat pe același server.
O cale relativă conține următoarele componente:
1) folder (numele folderului indicând calea către fișier);
2) fișier (nume fișier).
Calea pentru legăturile relative are trei notații speciale:
/ indică directorul rădăcină și vă spune să începeți de la directorul rădăcină al documentului și să vă îndreptați spre următorul folder
./ indică folderul curent
../ urca un folder (director)
Principala diferență dintre o cale relativă și o cale absolută este că calea relativă nu conține numele folderului rădăcină și folderelor părinte, ceea ce face adresa mai scurtă, iar în cazul trecerii de la un domeniu la altul, nu aveți nevoie de pentru a scrie o nouă adresă absolută. Dar dacă o resursă terță parte se leagă, de exemplu, la imaginile dvs. cu adrese relative, atunci acestea nu vor fi afișate pe alt site.
3. Ancore
Ancore, sau link-uri interne, creează link-uri către diferite secțiuni pagina web curentă, permițându-vă să vă deplasați rapid între secțiuni. Acest lucru este util atunci când există prea mult text pe pagină. Link-urile interne sunt create și folosind eticheta cu diferența că atributul href conține numele pointerului – așa-numitul ancoră, nu o adresă URL. Numele unui indicator este întotdeauna precedat de semnul #.
Cred că nicio pagină HTML nu poate exista fără cel puțin un hyperlink (sau doar un link). Legăturile pot fi fie către alte pagini sau site-uri, fie către fișiere, imagini etc.
Legăturile sunt externe și interne, textuale și grafice. linkuri externe link-uri către alte site-uri sau obiecte obiecte de pe acestea, în timp ce cele interne, dimpotrivă, se referă la diferite părți ale site-ului dumneavoastră. Un link text este un text care, atunci când faceți clic, vă duce la un alt obiect sau îl deschide, iar un link grafic este un obiect (cel mai adesea o imagine) care servește și pentru a accesa o altă pagină, site sau, de exemplu, un 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 link HTML:
text link (ancoră)
Permiteți-mi să vă mai dau un exemplu ca să înțelegeți mai bine. Bazat pe site-ul meu:
Pe pagina html din browser va arăta astfel:
Culoarea textului linkului este setată de atributele din eticheta BODY. Pentru a spune simplu, aceleași atribute pentru editare sunt potrivite pentru link-uri ca și pentru textul de pe pagină. Aceasta este pentru a evidenția cu caractere aldine și cursive și pentru a folosi titluri etc.
Următoarele vor apărea pe pagina html:
Obținem rezultatul fără cadru:
Pagina principală 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 părinte (implicit este în aceeași fereastră), puteți utiliza următoarele atribut target Eticheta A:
- _blank - deschide pagina într-o fereastră nouă;
- _parent - încarcă linkul în fereastra părinte;
- _self este implicit. Deschide linkul în aceeași fereastră.
Pagina principală a site-ului 1seo
Există, de asemenea, un atribut title pentru a crea un sfat explicativ pentru link:
Pagina principală a site-ului 1seo
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 adresa dvs. va fi deja introdusă în câmpul Către cutie poștală. De exemplu, codul HTML ar arăta astfel:
Trimite-mi un mesaj
Am încercat să scriu lucrurile de bază 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 creezi o pagină, o poți pune pe o găzduire gratuită și poți vedea 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.
Data publicării: 15 mai 2012Hyperlinkurile au fost inventate pentru a lega documentele din rețea între ele, iar dacă site-ul tău nu este format dintr-o singură pagină, ci din mai multe, atunci le poți lega împreună doar prin crearea de hyperlinkuri. Să ne uităm direct la un exemplu despre cum arată.
Creați un hyperlink simplu
Accesați o altă pagină
Deschiderea unui link într-o pagină nouă
Există un alt atribut interesant pe care l-ați putea găsi util:
Accesați o altă pagină
Atributul target cu valoarea _blank deschide linkul într-o fereastră nouă, acesta este adesea folosit dacă nu doriți ca persoana să vă piardă pagina și, în același timp, să obțină informațiile de care are nevoie doar într-o filă sau fereastră nouă.
Link-uri imagini
Rezultat în browser:
Practic totul este simplu aici, am pus eticheta de imagine între eticheta de hyperlink de deschidere și de închidere , dar din nou, nu am inserat doar două imagini, am atribuit clasa img uneia în care resetez cadrul din jurul imaginii, deoarece atunci când devine hyperlink apare, dar nu în toate browserele, de exemplu IE veți vezi, dar nu în Google Chrome.
Sublinierea în linkuri
Accesați o altă pagină
Accesați o altă pagină
Pentru claritate, am oferit două opțiuni pentru rezolvarea acestei probleme, am atribuit-o unui selector de clasă și, prin prescrierea acestei clase, veți elimina sublinierea inutile în anumite locuri. A doua soluție la problemă este eliminarea sublinierii de pe toate linkurile din etichetă<а>, care desigur rareori provoacă o nevoie, dar totuși cunoștințele nu sunt de prisos.
Legături în cadrul unui document
Nu este neobișnuit ca un document să fie suficient de lung și se face un mic meniu la începutul paginii cu link-uri către subsecțiuni ale acestei pagini. Aceste link-uri sunt numite link-uri în document și toate acestea sunt implementate destul de simplu. Pentru început, ancorele sunt plasate în document, acestea sunt semne, sunt plasate în document unde va fi necesar să vă mutați când faceți clic pe un link intern, de regulă, acestea sunt titluri de secțiune, eticheta arată astfel:
Și ultimul lucru pe care trebuie să-l știm despre hyperlink-uri sunt link-urile către cutiile poștale electronice, este implementat foarte simplu, trebuie doar să adăugați o intrare mailto: la atributul href și adresa cutiei poștale:
Poșta mea< /a>
Aceasta se încheie lecția „Crearea de hyperlinkuri în html”, după cum probabil ați observat, nu ne-am făcut fără CSS aici, în general, materialul este destul de simplu, cred că totul va fi simplu și clar pentru dvs., scrieți întrebări.
Data publicării: 2014-04-23
Cum se creează linkuri într-un document HTML
(Veți găsi mai multe exemple în partea de jos a acestei pagini)
Hiperlinkuri HTML (linkuri)
Etichetă poate fi folosit în două moduri:
- Pentru a crea un link către alt document - folosind atributul href
- Pentru a marca în interiorul unui document - folosind atributul nume
Link-uri de sintaxă HTML
Exemplu
| Viziteaza site-ul |
va fi afișat de browser astfel:
Legături HTML - Atribut țintă
Atributul țintă (destinația) specifică unde se deschide documentul legat (cel la care se referă linkul).
Exemplul de mai jos va deschide un document legat într-o nouă fereastră sau filă de browser:
Legături HTML - Atribut de nume
Atributul nume este folosit pentru a crea un marcaj ("ancoră" / "ancoră") în cadrul unui document HTML.
Cometariu:
Pentru viitorul previzibil, standardul HTML5 sugerează utilizarea atributului id în loc de atributul name pentru a specifica numele unui link.
Utilizarea atributului id funcționează de fapt în HTML4 și în toate browserele moderne.
Marcajele nu sunt afișate într-un mod special. Ele nu sunt vizibile pentru cititor.
Cometariu: Adăugați întotdeauna o bară oblică finală la linkurile subdirectoarelor. Dacă creați un link ca acesta: href="http://site/html", atunci sunt generate două solicitări către server, mai întâi serverul adaugă o bară oblică la adresa, apoi creează o nouă solicitare: href="http ://site/html/" .
Sfat: Legăturile denumite sunt adesea folosite pentru a crea un „cuprins” la începutul unui document mare. Fiecărui capitol din document i se atribuie o legătură numită, iar linkurile către fiecare dintre aceste ancore denumite sunt inserate la începutul documentului.
Sfat: Dacă browserul nu găsește linkul numit specificat, acesta merge la începutul documentului. Nu apar erori.
Luați în considerare utilizarea hyperlinkurilor folosind exemplul nr. 1.
Vedeți specificația HTML 5 poti aici.
Pagina se va deschide într-o fereastră nouă.
Și puteți descărca tabelele de elemente și atribute de aici.
Exemplul #1. Utilizarea hyperlink-urilor
Utilizarea hyperlink-urilor pentru a crea ancore pe o pagină
Elementul „a” poate fi folosit și ca hyperlink pentru a naviga într-o pagină. Pentru a face acest lucru, în locul potrivit în document, trebuie să creați ancoră(din engleza. ancoră), adică marcaj și specificați-l ca țintă în hyperlink. O ancoră este creată folosind un element „a” gol, în eticheta de deschidere a cărei atribut este specificat. De asemenea, puteți utiliza elementul de marcare necesar ca ancoră, la care va duce un hyperlink intern în viitor. Pentru a face acest lucru, trebuie doar să specificați atributul în el. Apoi, atributul href al hyperlinkului specifică semnul lire sterline „#” și valoarea atributului ancora ca valoare. Pentru a fi mai clar, să ne uităm la exemplul #2.
Eu sunt primul paragraf.
Vizualizați tabelul cu atribute HTML 5 poate sa
pe site-ul oficial aici.
Pagina se va deschide într-o fereastră nouă și se va deschide
derulat la tabelul cu atribute.
Puteți merge la primul paragraf aici.
Exemplul #2. Utilizarea hyperlink-urilor interne
Observați prezența unei ancore în adresa absolută specificată ca valoare a atributului href în al doilea paragraf al exemplului. Când utilizați un astfel de hyperlink, browserul va merge mai întâi la adresa specificată și apoi va derula pagina până la locația ancorei specificate. Dacă nu există nicio ancoră pe pagină, pagina va fi afișată de la început.
Hyperlinkuri relative și construirea adresei relative
Pentru a încheia această secțiune, luați în considerare principiul construcției adrese relative. Lăsați hyperlinkul nostru să fie într-un document situat pe serverul local la http://localhost/site/ doc_1/ doc_2/ ... /doc_n/web_page.html, unde doc_n este folderul celui de-al n-lea nivel de imbricare. În acest caz, folderul doc_n, în care se află documentul nostru hyperlink, este luat automat ca bază pe care se construiește toate adresele. Asa de:
- Dacă doriți ca linkul să trimită către un document țintă new_page.html situat în același dosar doc_n ca și documentul nostru sursă hyperlinkat, atunci trebuie doar să setați atributul href al linkului la numele documentului țintă: href="new_page.html " .
- Pentru a naviga la documentul țintă new_page.html situat în folder http://localhost/site/ doc_1/ doc_2/ ... /doc_n/ doc_n_1/ ... doc_n_k/, valoarea atributului href al linkului ar trebui să includă doar folderele imbricate în doc_n și, desigur, numele documentului țintă: href="doc_n_1/ ... doc_n_k/new_page.html". Astfel, îi spunem browserului că ar trebui să meargă în folderul doc_n_1, aflat în folderul doc_n cu documentul sursă în care este scris hyperlinkul, apoi în folderul doc_n_2 și așa mai departe, până ajunge în folderul doc_n_k cu documentul țintă aflat acolo, pe care acesta și trebuie să îl deschidă.
- Pentru a ajunge la un folder cu un nivel mai înalt decât cel original, se folosește combinația de caractere speciale „../”. Pentru a urca de n niveluri, trebuie să scrieți combinația „../” de n ori la rând. Deci, în cazul nostru, să urmați linkul către documentul țintă http://localhost/site/ doc_1/ doc_2/ ... /doc_n-3/ new_page.html atributul href al linkului trebuie să fie „../../../new_page.html” . Aceasta îi spune browserului să urce în folderul doc_n-1, apoi doc_n-2 și doc_n-3 și apoi să deschidă acolo documentul țintă new_page.html.
- Dacă este necesar nu numai să urcați mai multe niveluri, ci și să intrați într-un folder (sau mai multe subfoldere) acolo pentru a obține acces la documentul țintă, atunci în valoarea atributului href al linkului, trebuie mai întâi să specificați numărul necesar de niveluri pentru a urca folosind simbolurile „. ./” și apoi adăugați calea din folderul rezultat la documentul țintă. De exemplu, dacă documentul țintă se află în folderul new_doc și calea adresei la acesta arată ca http://localhost/site/ doc_1/ doc_2/ ... /doc_n-3/new_doc/ new_page.html, atunci atributul href al link-ului trebuie să aibă valoarea „../../../new_doc/new_page.html”. Acestea. îi spunem browserului să urce cu trei niveluri din folderul sursă doc_n , care conține documentul cu hyperlink, apoi mergeți la folderul new_doc și deschideți documentul țintă new_page.html
De exemplu, puteți descărca un mini-site educațional construit în întregime pe baza unei adrese relative. După vizionare, experimentați prin modificarea și crearea de noi linkuri, foldere și pagini.
hyperlinkuri relative foarte util atunci când dezvoltați aplicații offline bazate pe browser, cum ar fi ghidurile de ajutor. Cu toate acestea, rețineți că atunci când mutați un document din folderul curent în altul, toate linkurile relative din acesta nu vor mai funcționa. Prin urmare, ele vor trebui rescrise. Dacă legăturile relative indică fișiere care se află și în interiorul folderului curent sau în subdosare, atunci după mutarea acestui folder într-o altă locație, toate legăturile din document vor rămâne funcționale.
Dacă trebuie să începeți contorizarea căilor relative de la rădăcina site-ului, ar trebui să scrieți o bară oblică „/” la începutul căii. De exemplu, linkul „ Acasă" indică un document care se află în folderul rădăcină al site-ului (nu cel actual!). Rețineți că numărarea de la rădăcina site-ului funcționează doar sub controlul unui server web real. Pe un server local, cum ar fi Xampp, trebuie să începeți să numărați de la numele folderului rădăcină.
