Bună, astăzi vom vorbi despre hiper-linkuri sau linkuri,
așa cum sunt numite mai frecvent.
Și cum le puteți folosi pentru a lega documentul dvs. cu alte documente.
Linkurile sunt ceea ce face web-ul sa fie web.
Ideea este ca linkurile creează acest tip de informație cu conținut relativ
de care motoarele de căutare sau chiar dvs.
puteți beneficia accesând pagină după pagină.
Haideți să trecem direct si să vă arat cum se creează un link in pagină.
Linkurile se numesc linkuri de ancoră si de aceea eticheta de link se numește a.
Când folosiți o etichetă de ancorare, eticheta a,
este necesar să vă asigurați că aveți două părți diferite.
Aveți nevoie de o referință hiper și de conținut.
Deci referința hiper face referință la locația
noului conținut.
În acest caz eu am folosit http://www.umich.edu.
Asta spune unui browser,
dacă cineva face clic pe acest link de aici vreau sa încarc noul material.
De asemenea trebuie să avem conținut.
Conținutul este ceea ce noi numim partea pe care se poate face clic.
În acest caz, este de tip text.
Eu aș face de fapt clic pe un text subliniat numit Universitatea din Michigan.
Dar, în unele cazuri, ar putea fi o imagine.
Deci, ce tipuri de linkuri putem avea?
Unele dintre cele mai comune sunt numite linkuri absolute.
De asemenea avem linkuri relative,
linkuri interne și
linkuri grafice. În cele ce urmează voi da cate un exemplu din fiecare.
Într-un link cu o referință absolută, in secțiunea a href trebuie sa punem o adresă URL completă.
Trebuie să puneți http sau https, domeniul și
numele complet al documentului dorit.
Dacă vă amintiți o adresă URL este formată din trei părți:
protocolul, domeniul și documentul.
Trebuie să le includeți pe toate dacă aveți un link cu referință absolută, da ?
Toate celelalte au rămas la fel.
La o referință relativă trebuie să facem o schimbare mică la ceea ce punem in href.
In loc sa puneți linkul complet al unei pagini externe
sau chiar interne, vom pune doar numele complet al fișierului pe care dorim sa-l accesăm.
În cazul nostru vom face legătura la pagina2.html.
Ar deveni mai complicat decât atât dacă
ar trebui să includeți si un nume de folder.
În acest caz vom accesa pagina numita pagina2.html dar
este într-un folder diferit numit docs. Al treilea mod in care in care
putem folosi o referință relativă este să folosim ceea ce se numește eticheta ID.
Daca într-un link aveți ca valoare href=#nume înseamnă
că aceasta locație este existentă în fișierul curent.
Linkuri absolute versus linkuri relative.
Când se folosesc acestea ?
Când folosiți linkurile absolute, practic specificați ca nu sunteți
responsabil de această pagină.
Dacă vă conectați la pagina altcuiva, folosiți
absolut, folosiți linkul absolut cu referința completă acolo.
Linkul relativ îl folosiți atunci când vă dezvoltați propriul dvs. site web.
Este foarte util să folosiți linkurile relative in detrimentul celor absolute,
în acest fel dacă vă mutați site-ul pe un alt domeniu
sau îl mutați într-un alt folder, nu este necesar să redenumiți totul.
Acestea sunt unele dintre beneficiile folosirii linkurilor locale.
De asemenea nu trebuie sa actualizați pagina la fel de mult.
Unul dintre lucrurile pe care trebuie să vă asigurați ca nu le faceți
este sa aveți un link care include ceea ce vom numi un fel de structură de fișiere.
Verificați-vă linkurile.
Asigurați-vă ca nu aveți linkuri de genul C:pagina sau DocumenteleMelePagina sau
orice specific calculatorului dvs.
Motivul pentru care nu doriți acest lucru este
că dacă vă puneți pagina pe web,
pe un server sau un serviciu de găzduire, și
lumea face clic pe link
nu are nici un sens ca aceștia să poată accesa fișierele
de pe calculatorul dvs.
Deci, niciodată sa nu aveți o referința care sa includă ceva local, specific calculatorului dvs.
În regula ? Un alt lucru pe care îl puteți face este
să folosiți imagini ca link.
Componenta pe care se poate face clic nu trebuie sa fie neapărat de tip text.
Cu siguranța ați observat acest lucru.
Pot fi pictograme, imagini
si altele pe aceasta idee.
În acest caz, eu am folosit o referință obișnuită H și am pus o imagine.
Ceea ce am schimbat nu este referința H, ci
conținutul care se află intre
eticheta de deschidere si cea de închidere.
Asigurați-va ca folosiți textul alt atunci când puneți o imagine.
Într-un alt caz am făcut ceva similar dar am folosit
referința absoluta. Singura diferența este ca am pus
o referința locala pentru imagine.
Am introdus întreaga adresă URL.
Să vorbim despre probleme de utilizare si accesibilitate.
Dacă aveți de gând sa folosiți un component pe care se poate face clic
vreți să vă asigurați că are un nume informativ.
Există programe care pot lista toate linkurile dintr-o pagină
pentru oameni care caută lucruri si nu pot folosi tipicul;
tipicul înseamna mijloacele de accesare a paginii.
Nu le este deloc util dacă linkurile sunt numite faceți
clic aici, clic aici, nu ?
Vreți să-i dați un nume informativ.
De asemenea, vreți să vă asigurați că dacă utilizați o imagine
pentru partea pe care se poate face clic,
aceasta trebuie să aibă un alt text sau
alte informații disponibile celor care nu pot vedea imaginea.
Permiteți-mi să vă arăt câteva tipuri de linkuri.
În regulă ?
După cum puteți vedea aici, am o referință la referințe absolute,
referințe relative, imagini ca linkuri, și apoi câteva linkuri încorporate, de asemenea.
Deci, dacă aș face clic pe Washtenaw Dairy sau Rosie's Coffee Bar and Bakery, sau
Dexter's Bakery etc., de fapt, m-ar duce la paginile lor.
Înapoi.
Unul dintre trucurile pe care vreau să le arăt in timp ce fac asta este,
în timp ce trec peste fiecare dintre aceste linkuri, dacă vă uitați
în partea de jos a browserului, nu pot fi afișate in același timp dar,
pe măsură ce le evidențiați vă arată la ce adresă URL veți merge.
De altfel cred că este foarte important să știți
că dacă la menținerea cursorului pe un link
informația din partea de jos a paginii nu se potrivește cu ceea ce vă așteptați, să nu faceți clic.
Deci, referințele absolute accesează un link extern.
Referințele relative accesează o resursa dintr-un folder local.
Chiar aici, am o imagine cu niște gogoși
care este într-un folder local.
Asa că am putut sa fac legătura folosind doar numele imaginii.
În regulă?
De asemenea putem folosi imagini și ca linkuri.
In loc sa scriu Gogoașe de la Magazinul Squire,
am făcut să se poată vizualiza mai mare făcând clic pe imagine.
Aceasta idee a linkurilor imbricate este destul de interesantă.
Să revenim la cod pentru doar o secundă să vă arăt,
chiar aici
avem ceva aici numit referințe relative cu ID="relative".
Aici avem linkuri incorporate cu ID="embedded" și
aici div id="absolute".
Linkurile incorporate îmi permit să navighez in aceeași pagină.
Nu mă va trimite pe o altă pagină,
si nu se va deschide un nou tab.
In schimb voi putea sări la locuri diferite in aceeași pagina.
Am mers la absolute.
Acum la relative. Dacă merg la referințe incorporate
nu se întâmplă nimic pentru
ca suntem deja acolo.
Așa funcționează aceste referințe incorporate sau linkuri interne.
Dacă vreodată sunteți confuz cu privire la cum funcționează codul
puteți accesa view din bara de unelte,
Developer si view source de unde se poate vizualiza si face o idee
despre cum se creează paginile si linkurile acestora.
În continuare vom vorbi despre atributul ținta.
Ancorele pot avea, de asemenea, un atribut ținta.
Avem sursa deja, sa adăugăm ancora.
Deci suntem ținta.
S-ar putea să aveți ținta egală cu sine.
Acesta este acțiunea implicită.
Asta se va întâmpla dacă nu puneți nimic.
Dacă nici măcar atributul target nu este inclus. Dacă faceți asta atunci când faceți clic pe un link
se va deschide in tabul sau fereastra curentă.
Dacă aveți target=blank,
pagina curentă va rămâne neschimbată
și se va deschide un nou tab sau fereastra cu pagina accesată.
Acest lucru are avantaj si dezavantaj.
Avantajul este ca siteul dvs. este încă deschis in fereastra cuiva.
Dezavantajul este ca multor persoane nu le place
sa se tot deschidă taburi noi
pe măsura ce navighează in pagina dvs.
Sunt alte două opțiuni, top si parent, pe care
le puteți folosi dacă doriți să aveți
mai multe taburi, frame-uri etc.
Dar nu vom intra în detalii despre acestea.
Asigurarea că înțelegeți este extrem de importantă pentru succesul dvs in acest curs sau chiar
pentru a înțelege doar HTML. Să facem o recapitulare.
Primul lucru pe care trebuie sa-l știți este ca paginile fără linkuri sunt foarte rare.
Să fim sinceri, aproape că nu este o pagină web.
Este doar un document.
Linkurile pot fi absolute, relative si interne.
Și cele interne, în caz că nu vă amintiți sunt cele marcate cu diez.
Cred că s-ar putea să mă fi referit la ele ca relative dar
vreau să mă asigur că sunt înțeleasă, diezul le face interne.
Trebuie sa fiți precaut atunci când folosiți imagini in linkuri.
Nu că nu ar fi un lucru grozav de făcut dar nici nu spun sa o faceți.
Spun doar să vă asigurați că o faceți cu atenție pentru a vă asigura că fiecare
are parte de același conținut si experienta ca toată lumea.