Introducere în Link Link în HTML

Link-ul de imagini În HTML se găsește în aproape toate paginile, deoarece ne ajută să navigăm de la o pagină la alta pe un site web. O combinație populară este de a utiliza eticheta de ancorare HTML cu eticheta img HTML . Cu această combinație, putem permite mișcarea utilizatorilor de la o pagină la alta, făcând clic pe o imagine. Înainte de a ne afunda mai departe pe acest subiect, să înțelegem mai întâi funcționarea și redarea elementelor de ancoră și imagine individual și apoi să le combinăm pentru a obține o imagine legată.

Etichetă de ancoră HTML

Eticheta HTML Anchor este utilizată pentru a crea hyperlinkuri HTML către alte pagini web sau conținut multimedia găzduit pe web. Să ne referim la sintaxa de mai jos pentru a înțelege cum funcționează etichetele ancoră și atributele lor de bază

Click aici!!

În exemplul de mai sus, atributul „href” specifică adresa URL a paginii web către care am dori să redirecționăm utilizatorul în timp ce faceți clic pe textul „Faceți clic aici !!”.

Să vedem codul complet de mai jos:

producție

->

Cu exemplul de mai sus, veți putea face următoarele observații

  1. Un link nevăzut va apărea subliniat și în culoare albastră. De ex. Acesta este un link nevăzut
  2. Un link vizitat va apărea subliniat și în culoare violet. De ex. Acesta este un link deja vizitat
  3. Un link activ apare subliniat și în culoare roșie. De ex. Acesta este un link activ

Etichetă de imagine HTML

În timp ce navigați pe internet, sunt sigur că trebuie să întâlniți mai multe pagini web care au diverse forme de multimedia incluse în ele. Mai ales imaginile sunt o formă populară de multimedia, care poate fi găsită în aproape toate paginile web și site-urile interactive astăzi. Să înțelegem eticheta de imagine și implementarea acesteia în HTML cu exemplul de mai jos:

Sintaxă

Să înțelegem acum cum funcționează fiecare dintre atributele din eticheta img:

  1. src: Atributul src definește calea fișierului de imagine pe care încercăm să îl încărcăm cu această etichetă. Poate fi o legătură către o imagine găzduită pe web cu formatul ca exemplu.com/images/dummy.png.webp sau poate fi un fișier imagine găzduit local pe același server ca pagina web.
  2. alt: atributul alt definește textul și descrierea imaginii pe care am dori să o afișăm în cazul în care imaginile nu reușesc să se încarce din cauza conectivității de rețea sau a oricărei alte probleme.
  3. Lățime și înălțime: Lățimea și înălțimea ambelor atribute definesc lățimea și înălțimea imaginii pe care am dori să o afișăm pe pagina web. În rest, imaginea ar funcționa implicit înălțime și lățime 100%.

Acum să vedem codul HTML complet necesar pentru încărcarea unei imagini pe o pagină web. Salvați următoarea imagine cu numele „sunset.png.webp” într-un folder numit „image_test” din unitatea dvs. locală.

Acum, în același dosar, să creăm un fișier HTML numit sunset.html cu următorul cod HTML:

Acum accesați un browser de pe mașina dvs. și introduceți calea fișierului .html. Fișierele mele sunt stocate în unitatea D, astfel încât calea pentru mine ar fi

D: /image_test/sunset.html

Și acum putem vedea că pagina HTML redată a încărcat imaginea de apus pe browserul nostru. Cu ajutorul CSS și

etichetă, putem afișa și textul conform cerințelor noastre în jurul imaginii. Atât etichetele anchor cât și cele img sunt compatibile cu toate browserele precum Google Chrome, Safari, Microsoft Edge, Firefox și Internet Explorer.

Imagini legate în HTML

Acum că am înțeles cu exemple, modul în care funcționează eticheta de ancoră și eticheta de imagine, să înțelegem acum cum putem combina cele două funcționalități pentru a realiza un scenariu în care am dori ca utilizatorii să fie redirecționați către o nouă pagină web cu un clic pe o imagine . Pentru ca o imagine să poată face clic și să redirecționeze utilizatorul către o altă pagină web, trebuie doar să cuibărăm imaginea într-o etichetă ancoră. În exemplul de mai jos, vom încerca să înscriem cele mai bune 3 motoare de căutare web utilizate pe tot globul. În lista noastră, vom arăta logo-urile celor 3 motoare de căutare și, făcând clic pe oricare dintre sigle, utilizatorul va fi redirecționat către pagina motorului de căutare respectiv. Să creăm un folder numit „test de redirecție” și în același dosar să salvăm imaginile de mai jos

1. Google

2. Yahoo

3. Bing

Acum vom crea un .html cu numele imageredirection.html în același fișier. Imageredirection.html va conține următorul cod

Acum trebuie să accesăm pagina HTML din browser, pentru care voi tasta calea mea locală „D: / redirectiontest / imageredirection.html”. apoi browserul va face fișierul HTML pentru a genera următorul rezultat:

->

Utilizatorii vor putea naviga către motorul de căutare respectiv făcând clic pe logo-ul lor. Din exemplul de mai sus, putem observa că HTML este un limbaj simplu și flexibil care ne permite să combinăm mai multe etichete împreună și să obținem o funcționalitate complexă ca aceasta. Combinația de a utiliza img și etichetă ancor este o combinație populară. Cu o codare HTML suplimentară putem adăuga, de asemenea, diferite elemente HTML, cum ar fi afișarea de imagini legate într-o listă ordonată sau neordonată folosind

    sau
      . Flexibilitatea și simplitatea extremă pe care HTML le oferă cu fiecare versiune lansată, ajută designerii UI și UX să proiecteze pagini web interactive și intuitive pe care le vedem în timp ce navigăm pe internet pentru activități de zi cu zi.

      Articol recomandat

      Acesta a fost un ghid pentru Image Link în HTML. Aici vom discuta despre diferitele tipuri de etichete HTML împreună cu sintaxa. Puteți parcurge și alte articole sugerate pentru a afla mai multe -
      1. Atribute HTML
      2. Etichete format HTML
      3. Avantajele HTML
      4. Etichete de imagine HTML
      5. Rame HTML
      6. Blocuri HTML
      7. Setați o culoare de fundal în HTML cu Exemplu
      8. Listă ordonată HTML | Tipuri de atribute cu sintaxă

Categorie:

Instrumente de dezvoltare web