Els llocs web no coincideixen amb cap mitjà de comunicació que els precedeix. Una de les principals coses que estableixen llocs web a part dels formats anteriors de mitjans com ara impressió, ràdio i fins i tot televisió és el concepte de " hipervincle ".
Els hipervincles, també comunament coneguts com a "enllaços", són el que fa que la web sigui tan dinàmica. A diferència d'una publicació impresa que pot fer referència a un altre article o altre recurs, els llocs web poden utilitzar aquests enllaços per enviar visitants a aquestes altres pàgines i recursos. Cap altre mitjà de difusió pot fer-ho. Podeu escoltar un anunci a la ràdio o veure-ho a la televisió, però no hi ha hipervincles que puguin portar-vos a les empreses d'aquests anuncis de la manera que aquest lloc web pot fer fàcilment. Els enllaços són realment una sorprenent eina de comunicació i interacció.
Moltes vegades, els enllaços que es troben en un lloc web són continguts de text que dirigeixen els visitants a altres pàgines d'aquest mateix lloc. La navegació d'un lloc web és un exemple d'enllaços de text a la pràctica, però els enllaços no necessiten ser basats en text. També podeu enllaçar fàcilment imatges al vostre lloc web. Vegem com es fa això, seguit d'alguns casos en què voleu utilitzar hipervincles basats en imatges.
Com enllaçar una imatge
El primer que heu de fer és col·locar la imatge en el vostre document HTML . Un ús comú d'un enllaç basat en imatges és el gràfic del logotip del lloc que després es vincula a la pàgina d'inici del lloc. En el nostre codi d'exemple a continuació, l'arxiu que estem utilitzant és un SVG per al nostre logotip. Aquesta és una bona opció ja que permetrà que la nostra imatge s'escala per a diferents resolucions, tot mantenint la qualitat d'imatge i una petita grandària de fitxer global.
A continuació us indiquem com situaria la vostra imatge al document HTML:
Al voltant de l'etiqueta d'imatge, ara afegiu el vincle d'ancoratge, obrint l'element d'ancoratge abans de la imatge i tancant l'àncora després de la imatge. Això és similar a com voldríeu enllaçar text, només en lloc d'embolicar les paraules que voleu ser un enllaç amb les etiquetes d'ancoratge, embolcalla la imatge. En el nostre exemple a continuació, estem enllaçant de nou a la pàgina d'inici del nostre lloc, que és "index.html".
Quan afegiu aquest codi HTML a la vostra pàgina, no col·loqueu cap espai entre l'etiqueta d'ancoratge i l'etiqueta d'imatge. Si ho feu, alguns navegadors afegiran petites paparres al costat de la imatge, que semblen estranyes.
La imatge del logotip ara també actua com a botó d'inici, que és pràcticament un estàndard web en aquests dies. Tingueu en compte que no incloem cap estil visual, com ara l'amplada i l'alçada de la imatge, al nostre marcat HTML. Anem a deixar aquests estils visuals a CSS i mantindrem una separació neta de l'estructura HTML i els estils CSS.
Una vegada que arribeu a CSS, els estils que escriviu per orientar aquest gràfic del logotip podrien incloure la mida de la imatge, inclosos els estils de resposta per a imatges amigables amb diversos dispositius, així com qualsevol visual que vulgueu afegir a la imatge / enllaç, com a vora o CSS caure ombres. També podeu donar la vostra imatge o enllaçar un atribut de classe si necessiteu "ganxos" addicionals per utilitzar-los amb els vostres estils CSS.
Utilitzeu els casos per als enllaços d'imatges
Així que afegir un enllaç d'imatge és bastant fàcil. Com acabem de veure, tot el que heu de fer és embolicar la imatge amb les etiquetes d'ancoratge adequades. La vostra pregunta següent podria ser "quan realment ho faria això a la pràctica, a més de l'exemple anterior de l'enllaç i el logotip anteriorment esmentat?"
Aquí teniu alguns pensaments:
- Imatges de miniatura en una galeria que es vincula a versions més grans d'aquestes imatges.
- Imatges que s'utilitzen soles per representar contingut, com ara fotos de productes per a un lloc web de comerç electrònic.
- Les imatges de teaser que formen part d'un altre contingut, com ara un article de bloc o un comunicat de premsa, que atrauen a la gent per adonar-se que el contingut els dóna una àrea de destinació per fer un toc o fer clic per llegir l'article complet.
- Icones que s'utilitzen com a botons per connectar-se a una funcionalitat específica o pàgines dins del lloc.
- Enllaços de mitjans socials que utilitzen els logotips reconeguts dels diferents llocs de xarxes socials que són importants per a aquest lloc o empresa.
- Imatges utilitzades com a botons per a determinades funcionalitats, com ara enviaments de formularis (nota de les millors pràctiques: des d'una perspectiva de rendiment de lloc web, els botons dissenyats exclusivament amb CSS són una opció millor que els botons d'imatge).
Un recordatori quan s'utilitzen imatges
Les imatges poden tenir un paper important en l'èxit d'un lloc web. Un dels exemples anteriors esmentats usen imatges al costat d'altres continguts per cridar l'atenció sobre aquest contingut i fer que la gent llegeixi.
Quan utilitzeu imatges, heu de tenir en compte que seleccioneu la imatge adequada per a les vostres necessitats , això inclou el tema de la imatge correcta, el format i assegureu-vos que les imatges que utilitzeu al vostre lloc web estiguin optimitzades correctament per a l'enviament del lloc web . Això pot semblar molta feina només per afegir imatges, però la recompensa val la pena! Les imatges realment poden afegir tant a l'èxit d'un lloc.
No dubteu a fer servir les imatges adequades al vostre lloc i enllaçeu-les quan sigui necessari per afegir-ne de manera interactiva al vostre contingut, però també tingueu en compte les pràctiques recomanades d'aquestes imatges i feu servir aquests gràfics i enllaços correctament i de manera responsable en el vostre treball de disseny web.