Un hyperlink poate lega pagini dintr-un singur site sau poate indica orice pagină de pe Internet. Când construiți link-uri către paginile altor persoane, ar trebui să utilizați întotdeauna adresa absolută a paginii (http://www.site.com/page.html). Dacă creați un link către o pagină dintr-un site, este de preferat să utilizați o adresă URL relativă (page.html, catalog/page.html). Când creați un hyperlink grafic, rețineți că este posibil ca elementele grafice să nu fie accesibile anumitor utilizatori, așa că asigurați-vă că includeți elemente de text adecvate.
Exemplu:
Hyperlink într-o pagină html
Uneori este necesar să se creeze un hyperlink într-o singură pagină. De exemplu, pe această pagină există hyperlinkuri la începutul lecției, permițându-vă să accesați o anumită întrebare și chiar în partea de jos a paginii, permițându-vă să mergeți în partea de sus a paginii.
Exemplu:
hyperlink poștal
Exemplu:
|
Cod HTML: |
Afișarea browserului: |
Deschiderea paginilor html într-o fereastră nouă
Folosind atributul TARGET, puteți încărca pagina într-o nouă fereastră de browser. Acest atribut este destinat să specifice numele ferestrei. Numele ferestrei este folosit în scopuri oficiale. Pentru a deschide o pagină într-o fereastră nouă, trebuie să utilizați constanta _blank.
Exemplu:
Culoarea textului hyperlinkului
Atributele LINK, ALINK, VLINK specifică culoarea fontului hyperlinkurilor.
Atributul LINK este folosit pentru a evidenția hyperlinkuri care nu au fost încă vizitate de utilizator.
Procedura pentru următoarele hyperlinkuri
Unele browsere pot accepta capacitatea de a naviga prin hyperlinkuri folosind tasta Tab. În acest caz, browserul evidențiază implicit hyperlinkurile în ordinea în care apar în textul paginii. Puteți modifica ordinea de tranziție utilizând atributul etichetei TABINDEX . Pentru a include un hyperlink în lista care descrie noua ordine de navigare, trebuie să atribui atributului TABINDEX un număr întreg pozitiv în intervalul de la 1 la 32767. Pentru a exclude un hyperlink din listă, trebuie să atribuiți orice număr negativ atributului. Când utilizatorul apasă tasta TAB, cursorul se deplasează la hyperlinkul cu cea mai mică valoare pozitivă a indexului. Dacă mai multor hyperlinkuri li se atribuie aceeași valoare de index, primul selectat este cel care apare mai sus în textul paginii.
Trebuie spus că atributul TABINDEX poate fi folosit pentru a selecta alte obiecte, de exemplu, imagini grafice.
Să ne uităm la utilizarea hyperlinkurilor folosind exemplul nr. 1.
Vedeți specificația HTML 5 poti aici.
Pagina se va deschide într-o fereastră nouă.
Puteți descărca tabele de elemente și atribute aici.
Exemplul nr. 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 documentul pe care trebuie să îl creați ancoră(din engleza ancoră), adică marcaj și specificați-l ca țintă a hyperlinkului. O ancoră este creată folosind un element gol „a” a cărui etichetă de deschidere specifică atributul. De asemenea, puteți utiliza elementul de marcare necesar ca ancoră, la care va duce ulterior un hyperlink intern. Pentru a face acest lucru, trebuie doar să specificați atributul în el. Apoi, în atributul href al hyperlinkului însuși, valoarea este simbolul hash „#” și valoarea atributului ancora. Pentru a fi mai clar, să luăm în considerare totul folosind exemplul nr. 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 nr. 2. Utilizarea hyperlink-urilor interne
Observați ancora î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.
Hiperlinkuri relative și construcția adresei relative
În concluzie, să luăm în considerare principiul construcției adrese relative. Lăsați hyperlinkul nostru să fie localizat într-un document situat pe un server 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 cu hyperlinkul, este luat automat drept bază pe care se bazează toate adresele. Asa de:
- Dacă doriți ca linkul să trimită către documentul țintă new_page.html, situat în același folder doc_n ca și documentul nostru sursă cu hyperlink, atunci trebuie pur și simplu să setați numele documentului țintă ca valoare a atributului href al link: href="new_page.html" .
- Pentru a naviga la documentul țintă new_page.html situat în dosar 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 sub 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 la un nivel mai mare decât cel original, utilizați o combinație specială de caractere „../” . 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 un link către documentul țintă http://localhost/site/doc_1/doc_2/ ... /doc_n-3/ new_page.html Atributul href al linkului ar trebui să aibă valoarea „../../../new_page.html” . Acest lucru îi spune browserului că ar trebui să meargă în folderul doc_n-1, apoi doc_n-2 și doc_n-3, apoi deschide documentul țintă new_page.html aflat acolo.
- Dacă este necesar nu numai să urcați mai multe niveluri, ci și să intrați într-un folder (sau mai multe subdosare) acolo pentru a obține acces la documentul țintă, atunci în valoarea atributului href al linkului, trebuie mai întâi pentru a specifica 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 hyperlinkat, apoi mergeți la folderul new_doc și deschideți documentul țintă new_page.html
De exemplu, puteți descărca un minisite de instruire construit în întregime pe adresare relativă. După vizualizare, experimentați prin modificarea și crearea de noi linkuri, foldere și pagini.
hyperlinkuri relative foarte convenabil pentru dezvoltarea aplicațiilor off-line bazate pe browser, cum ar fi ghidurile de ajutor. Cu toate acestea, ar trebui să vă amintiț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 în altă locație, toate legăturile din document vor rămâne în funcțiune.
Dacă trebuie să începeți să numărați calea relativă 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, de exemplu, Xampp , numărarea ar trebui să înceapă de la numele folderului rădăcină.
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.
- Deschide blocnotesul.
- Scriem cod în limbaj html. de exemplu, o pagină cu un număr de fotografii.
- Î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!!- 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:
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 forța atât întregul link, cât și părțile sale individuale (expresii, cuvinte, litere) să fie evidențiate color folosind 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. Faceți o regulă să scrieți și să numiți 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.
Linkurile pot fi împărțite în două categorii:
link-uri către resurse externe— sunt create folosind o etichetă și sunt folosite pentru a extinde capacitățile documentului curent atunci când este procesat de browser;
hyperlinkuri— 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 o etichetă asociată. Textul care va fi afișat pe pagina web este plasat în interiorul etichetei. Textul linkului este afișat în browser cu o subliniere, 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.
index de legăturiLegătura constă din două părți − indicatorȘi parte adresa. Index de legături este o bucată de text sau imagine vizibilă utilizatorului. Partea adresa Linkul nu este vizibil pentru utilizator; acesta reprezintă adresa resursei la care trebuie să mergeți.
Partea de adresă a linkului este formată din URL. URL(Uniform Resource Locator) - adresa uniformă a resursei. Când creați adrese, este recomandat să folosiți o cratimă mai degrabă decât o liniuță de subliniere pentru a separa cuvintele. În general, o adresă URL având următorul format:
Metoda de acces://nume server:port/cale
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 oferă citirea unui fișier de pe discul local:
Fișier:/gallery/pictures/summer.html
http oferă acces la o pagină web folosind 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 primi 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ă. este pe aceeași mașină cu documentul HTML care conține linkul.
Numărul portului TCP, pe care funcționează serverul web. Acesta este un număr care trebuie specificat dacă metoda necesită un număr de port (serverele individuale pot avea propriul număr de port distinct). Dacă nu este specificat niciun port, implicit este 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 un link specifică 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ă de foldere 2.1. Calea absolută
Calea absolută indică 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 (nume de domeniu sau adresa IP a computerului);
3) folder (numele folderului care indică calea către fișier);
4) fișier (nume fișier).
Există două tipuri de notație absolută a căii - cu și fără indicație de 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 va fi încărcată (așa-numitul fișier index).
http://site.ru/
De obicei, fișierul index este un document numit index.html. Prezența unei slash / înseamnă că accesul se duce la folder dacă nu este acolo, se duce direct la 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ă pe același server documentul specificat.
O cale relativă conține următoarele componente:
1) folder (numele folderului care indică 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 spune să începeți din directorul rădăcină al documentului și să mergeți în jos la 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 al folderelor părinte, ceea ce face adresa mai scurtă, iar dacă te muți de la un domeniu la altul, nu trebuie să introduceți 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ă tranziții către diferite secțiuni ale paginii web curente, permițându-vă să vă deplasați rapid între secțiuni. Acest lucru se dovedește a fi foarte convenabil 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 adresa URL. Numele indicatorului 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 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
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