Site-urile web sunt diferite de orice mediu de comunicare care le-a venit înainte. Unul dintre principalele lucruri care au pus site-urile în afară de formatele media precedente, cum ar fi imprimarea, radioul și chiar televiziunea, este conceptul de " hyperlink ".
Link-urile hyperlink-uri, de asemenea, de obicei cunoscute sub numele de "link-uri", fac ceea ce face din Web atât de dinamic. Spre deosebire de o publicație tipărită care poate face trimitere la un alt articol sau la altă resursă, site-urile web pot folosi aceste linkuri pentru a trimite vizitatori către alte pagini și resurse. Nici un alt mediu de difuzare nu poate face acest lucru. Puteți auzi un anunț pe radio sau pe televizor, însă nu există hyperlink-uri care să vă ajungă la companiile din acele anunțuri așa cum poate face acest site cu ușurință. Link-urile sunt într-adevăr un instrument uimitor de comunicare și interacțiune!
Adesea, legăturile care se găsesc pe un site web sunt conținut de text care direcționează vizitatorii către alte pagini ale aceluiași site. Navigarea unui site web este un exemplu de legături text în practică, dar link-urile nu trebuie să fie bazate pe text. De asemenea, puteți să conectați ușor imaginile de pe site-ul dvs. web. Să vedem cum se face acest lucru, urmat de câteva situații în care doriți să utilizați hyperlink-uri bazate pe imagine.
Cum să conectați o imagine
Primul lucru pe care trebuie să-l faceți este să plasați imaginea în documentul dvs. HTML . O utilizare obișnuită a unei legături bazate pe imagine este reprezentată de graficul site-ului, care este apoi legat înapoi la pagina de pornire a site-ului. În codul nostru de mai jos, fișierul pe care îl folosim este un SVG pentru sigla noastră. Aceasta este o alegere bună, deoarece va permite ca imaginea noastră să scadă pentru diferite rezoluții, menținând în același timp calitatea imaginii și o mărime mică a fișierului.
Iată cum ați plasa imaginea în documentul HTML:
În jurul etichetei imaginii, acum adăugați legătura de ancorare, deschizând elementul de ancorare înaintea imaginii și închizând ancora după imagine. Acest lucru este similar cu modul în care ați lega textul, numai în loc să înfășurați cuvintele pe care doriți să le legați cu etichetele de ancorare, înfășurați imaginea. În exemplul nostru de mai jos, revenim la pagina de pornire a site-ului nostru, care este "index.html".
Când adăugați acest HTML în pagină, nu introduceți niciun spațiu între eticheta de ancorare și eticheta imaginii. Dacă faceți acest lucru, unele browsere vor adăuga căpușe alături de imagine, ceea ce va părea ciudat.
Imaginea logo-ului ar acționa acum și ca un buton de pagină de pornire, care este destul de mult un standard web în aceste zile. Rețineți că nu includem în marca noastră HTML stiluri vizuale, cum ar fi lățimea și înălțimea imaginii. Vom lăsa aceste stiluri vizuale în CSS și vom păstra o separare curată a structurii HTML și a stilurilor CSS.
Odată ce ajungeți la CSS, stilurile pe care le scrieți pentru a viza această grafică a logo-ului ar putea include dimensionarea imaginii, inclusiv stiluri receptive pentru imagini prietenoase cu mai multe dispozitive, precum și orice vizualizări pe care doriți să le adăugați la imagine / legătură, cum ar fi frontierele sau CSS arunca umbrele. De asemenea, ați putea da imaginea dvs. sau legați un atribut de clasă dacă aveți nevoie de "cârlige" suplimentare pe care să le utilizați cu stilurile dvs. CSS.
Utilizați cazuri pentru link-uri imagine
Deci, adăugarea unui link de imagine este destul de ușoară. După cum tocmai am văzut, tot ce trebuie să faceți este să înfășurați imaginea cu etichetele corespunzătoare de ancorare. Următoarea dvs. întrebare ar putea fi "când ați face acest lucru în practică, în afară de exemplul de link / pagina de start menționat mai sus?"
Iată câteva gânduri:
- Imagini miniatură dintr-o galerie care leagă versiunile mai mari ale acestor imagini.
- Imagini care sunt folosite singure pentru a reprezenta conținut, cum ar fi fotografii despre produse pentru un site de comerț electronic.
- Imaginile teaser care fac parte dintr-un alt conținut, cum ar fi un articol de blog sau un comunicat de presă, care îi atrage pe oameni să observe că conținutul le dă o zonă țintă pentru a atinge sau a da clic pentru a citi întregul articol.
- Icon imagini care sunt utilizate ca butoane pentru a se conecta la funcționalități specifice sau pagini din site.
- Social media link-uri care folosesc logo-urile recunoscute ale diferitelor site-uri de social media care sunt importante pentru acel site sau companie.
- Imagini utilizate ca butoane pentru anumite funcționalități, cum ar fi trimiterile de formular (nota celor mai bune practici - dintr-o perspectivă a performanței site-ului, butoanele pur și simplu cu CSS sunt o alegere mai bună decât butoanele de imagine).
O atenționare la utilizarea imaginilor
Imaginile pot juca un rol important în succesul unui site web. Unul dintre exemplele de mai sus a fost menționat prin folosirea imaginilor alături de alte conținuturi pentru a atrage atenția asupra acelui conținut și pentru ai face pe oameni să îl citească.
Când utilizați imagini, trebuie să aveți grijă să selectați imaginea potrivită pentru nevoile dvs. , aceasta include aspectul corect al imaginii, formatul și, de asemenea, să vă asigurați că toate imaginile pe care le utilizați pe site-ul dvs. sunt optimizate corespunzător pentru livrarea site-ului web . Acest lucru poate părea ca o mulțime de muncă doar pentru a adăuga imagini, dar câștigul salarial este în valoare de ea! Imaginile pot adăuga atât de mult succesului unui site.
Nu ezitați să utilizați imagini adecvate pe site-ul dvs. și să le conectați atunci când este necesar pentru a adăuga conținut interactiv la conținutul dvs., dar și să aveți grijă de aceste exemple de bune practici și să utilizați aceste grafice / link-uri în mod corect și responsabil în lucrul dvs. de web design.