legarea imaginii în HTML: cum se creează legături din imagini
vom arunca o privire prietenoasă pentru începători la modul de creare a legăturilor de imagine pe site-ul dvs. web.
vom analiza ce etichete HTML trebuie să utilizați în cod.dacă nu ați mai făcut acest lucru înainte, nu vă faceți griji! Te voi ghida prin întregul proces.până la sfârșitul acestui articol, veți crea legături de imagine pe toată pagina dvs. web și pe Internet.,de asemenea, vom analiza câteva tehnici mai avansate spre sfârșitul articolului dacă vă simțiți curajoși.
luați o cafea, să ne scufundăm!
cum creați un Hyperlink?
pentru a obține linkuri pe pagina dvs. de pornire, trebuie să creați un hyperlink. Pentru a face acest lucru în HTML, trebuie să utilizați o etichetă <a>. Fiecare etichetă <a> are două părți eticheta de deschidere și închidere.,
Aici este un exemplu:
<a href="..."> ...</a>În cele de mai sus, puteți vedea că deschide tag:
<a href="...">
Creează la început de hyperlink-ul. Apoi închidem eticheta cu:
</a>
orice text pe care îl scriem între eticheta deschidere și închidere este textul linkului. De Exemplu:
<a href="..."> My Great Link</a>Pentru a transforma acest lucru într-un link de care avem nevoie pentru a adăuga un URL. Pentru a face acest lucru, adăugăm URL-ul la atributul href., URL-ul poate indica oriunde pe internet. Pentru acest exemplu vom folosi PageDart pagina de start:
<a href="https://pagedart.com"> My Great Link</a>Asigurați-vă că pentru a include URL-ul complet cu HTTPS în față.
asta este tot ce există pentru a crea un link numai text în HTML. Apoi, să ne uităm la modul în care putem adăuga o imagine la o pagină web folosind HTML.
cum creați o imagine în HTML?
pentru a adăuga o imagine la pagina dvs. web, utilizați o etichetă img.,
această etichetă este puțin diferită de o etichetă a prin faptul că nu are o etichetă de deschidere și închidere.
pentru a crea o etichetă img trebuie să dați etichetei un fișier sursă. Utilizați src atribut pentru a face acest lucru:
<img src="https://pagedart.com/favicon-32x32.png">Acest lucru va adauga o imagine pe ecran ca acesta:
Acum avem o imagine de care avem nevoie pentru a transforma într-un link., Pentru a face acest lucru, trebuie să adăugăm o etichetă <img> în interiorul etichetelor <a> care creează o imagine de legătură în HTML.
să ne uităm la un exemplu următor.pentru a transforma o imagine într-un link, trebuie să adăugați eticheta <img> în eticheta <a>., Deci, luând noastre anterioare exemplu codul sursă ar arata astfel:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>Care s-ar produce acest HTML:
Prin adăugarea <img> tag-ul în interiorul unui <a> tag-ul browser-ul poate vedea că imaginea ar trebui să fie clickable. Ați transformat imaginea într-un link!
dacă utilizați WordPress, atunci puteți adăuga acest cod HTML la pagina dvs. folosind vizualizarea text din editorul de pagini.de asemenea, puteți adăuga text și imagini în interiorul linkului, să ne uităm la asta.,
imagine și Text ca Link
exemplul de mai sus a arătat cum să adăugați doar o imagine ca link.
ce se întâmplă dacă am dori să adăugăm atât o imagine, cât și un text la un link.
ei Bine, în acest caz, trebuie să ne asigurăm că vom adăuga text înainte de a închide <a> tag:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>În cele de mai sus, am adăugat „PageDart Acasă” în interiorul <a> tag-ul, împreună cu <img> tag-ul., Atunci când sunt afișate într-un browser web de pe pagină se va arata astfel:
mai este un atribut pe <img> tag-ul că nu am discutat și ar trebui să fie folosind.
este atributul alt.
link-uri de imagine și atributul Alt
imaginile de pe internet ar trebui să aibă un atribut alt. Aceasta este o descriere text a imaginii.cititoarele de ecran utilizează textul alt pentru a ajuta utilizatorii cu deficiențe de vedere. Cititorii de ecran vor citi descrierea textului atunci când găsește o imagine.,
Pentru a face acest lucru, vom adăuga un alt atributul img tag-ul astfel:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>Acum, când screen reader citește această imagine se va spune „PageDart.com” cu voce tare.este important să urmați cele mai bune practici atunci când scrieți text alt imagine.
asigurați-vă că vă gândiți la persoana care utilizează cititorul de ecran. Scrieți descrierea textului alt pentru ei și descrieți imaginea cât de bine puteți.
acesta este tot ce aveți nevoie pentru a crea imagini de legătură în HTML., Cu toate acestea, există câteva tehnici mai avansate pe care le puteți utiliza. Dacă vă simțiți curajoși, ne vom uita la acestea în continuare.
tehnica avansată: imagine ca un Link folosind CSS
o tehnică mai avansată este de a utiliza CSS. CSS reprezintă Cascading Style Sheet și vă permite să schimbați modul în care arată o pagină HTML.cu CSS puteți seta o imagine de fundal pe un element, cum ar fi eticheta noastră <a>.,
Aici ne-ar fi HTML care arata ca acest lucru:
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>Deci, de data aceasta nu este nimic în interiorul <a> tag-ul, dar imaginea este setat folosind stilul CSS. Acest lucru ar arăta următorul text în browser:
putem folosi o tehnică similară cu un <button> tag-ul.
Avansat Tehnica: cu Ajutorul unui Buton
În acest exemplu, vom folosi <button> tag-ul în loc de <a> tag-ul.,
putem crea aceeași ieșire ca exemplul de mai sus folosind acest HTML:
care creează această ieșire:
aici folosim JavaScript pentru a deschide o nouă filă browser. Trimiterea utilizatorului la pagina de pornire PageDart.
nu am nici o idee de ce v-ar face vreodată acest lucru! Dar, am vrut să vă arăt ce este posibil și cât de flexibile pot fi HTML, CSS și JavaScript.
ultimul exemplu pe care îl voi arăta este utilizarea unei hărți de imagini.
tehnică avansată: harta imaginii
hărțile imaginilor sunt imagini unice cu zone cu clic., Ei și-au pierdut popularitatea de-a lungul anilor, dar încă fac parte din specificația HTML5. Aceasta înseamnă că browserele precum Internet Explorer, Chrome și Safari le vor suporta.
Diagrame sunt bune exemple de Hărți de Imagini, cum ar fi organigrame, astfel:
Apoi, pentru a face fiecare roz zona un link ne-ar crea un map astfel:
Am adăugat atributul usemap la img tag-ul.,
apoi în eticheta mapavem o etichetă area. Fiecare dintre aceste zone creează o zonă cu clic care acționează ca un buton.am analizat cinci moduri diferite de a adăuga o imagine ca link pe pagina dvs. web:
- o imagine ca link
- imagine și text ca link
- folosind CSS pentru a seta o imagine ca link
- folosind un buton ca link
- folosind hărți de imagini
toate acestea pot transforma imaginile. Ar trebui să aveți acum încrederea de a încerca acest lucru singur.,de asemenea, am analizat accesibilitatea și modul de setare a textului Alt pentru a ajuta persoanele cu deficiențe de vedere.