In questo articolo, ti mostrerò come utilizzare il tag img in HTML per creare immagini, rendendo il sito più vivido.

C'è un detto " un bel sito web deve avere immagini, layout chiaro e molti effetti accattivanti ". Questa affermazione da sola ci basta per elencare le tecnologie che devono essere utilizzate per crearla.

• Crea bellissime forme => Usa tag HTML per costruire, tipicamente tag img.
• Cancella layout => Usa CSS per dividere il layout.
• Effetti accattivanti => Usa HTML5 e CSS3 o librerie Javascript come jQuery.

Troppa conoscenza, giusto? Ma non preoccuparti, dobbiamo andare piano, non di fretta, quindi in questo articolo impareremo come utilizzare i tag img per creare prima le immagini.

Che cos'è il tag img in HTML?

Img sta per image, è un tag HTML utilizzato per creare immagini sulle pagine web. Il 100% dei siti web utilizza questo tag.

Per visualizzare le immagini sul web, utilizzi il img con la seguente sintassi:

 <img src="link"/>

Dove il collegamento principale è il collegamento che punta all'immagine. Deve essere un collegamento esistente su Internet, non un collegamento sul computer del cliente. Quindi devi caricare l'immagine sull'hosting, qualsiasi computer che accede al sito Web può vederla.

Esempio : Crea un'immagine con il link dell'immagine già caricata sull'hosting di web888.

 <img src="https://web888.net/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Attributi del tag img in HTML

Per lavorare senza problemi con il tag a, devi capire il significato di tutti i suoi attributi, i più tipici sono i seguenti attributi:

attributo src

Questo è un attributo che contiene il percorso che punta al file immagine. Ci sono molti diversi tipi di immagini come png, jpg, gif , … e tutti possono essere visualizzati sul sito web. In particolare per il valore l'URL deve essere in una delle due forme, ovvero l'URL con il dominio o l'URL nella directory corrente ( tutto caricato su hosting ).

Attributo alternativo

Questa è la proprietà che verrà visualizzata nel caso in cui passi l'URL dell'immagine errato, questa volta visualizzerà questo testo invece dell'immagine.

 <img src="url_khong_ton_tai" alt="hình ảnh"/>

Per le persone SEO, questo attributo aiuta il motore bot di Google a conoscere il significato dell'immagine.

Proprietà di larghezza e altezza

Questa è la proprietà che imposta la larghezza ( larghezza ) e l'altezza ( altezza ) per l'immagine. Puoi anche usare CSS per configurarlo.

 <img width="500px" height="200px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/> <img width="200px" height="100px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Di solito useremo CSS per impostare la larghezza e l'altezza invece di usare le due proprietà sopra. Tuttavia, poiché non abbiamo ancora imparato i CSS, puoi invece utilizzare queste due proprietà.

Alcuni modi per utilizzare i tag img in html

Possiamo usare img in combinazione con altri tag per creare un'interfaccia del sito web.

Combina un tag per creare collegamenti immagine

Se lo desideri, quando l'utente fa clic sull'immagine, il browser reindirizzerà a un'altra pagina, quindi puoi utilizzare un tag attorno all'immagine.

 <a href="https://hocvietcode.com"> <img src="http://code.web888.vn/upload/config/images/hoc-lap-trinh-online.png" title="Học lập trình"/> </a>

Combina il tag della mappa per assegnare il collegamento a una piccola posizione nell'immagine

Diciamo che hai un'immagine satellitare e nell'immagine c'è un piccolo angolo che è una foto del sole. Vuoi quando fai clic sul piccolo angolo del sole in quell'immagine, passerà a un'immagine completa del sole, come farlo come nell'esempio qui sotto.

 <img src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/sun.gif"> </map>

Spiegazione :

• Nel img c'è un attributo usemap="#planetmap" che ha lo scopo di specificare la mappa da applicare a questa forma, perché il suo valore è #planemap quindi prenderà il tag map con name="planemap" .
• Nel tag map definisce area con attributi
  • shape="rect" cioè rettangolo
  • coords="0,0,82,126" cioè un elenco di coordinate che compongono l' area , prendendo l'immagine sopra come standard per misurare e misurare in pixel.
  • alt="sun" è quando si passa il mouse sopra la posizione con le coordinate sopra, questo titolo verrà visualizzato
  • https://freetuts.net/upload/tut_post/images/2014/08/14/123/sun.gif è il link quando si fa clic su quest'area per accedere.

Nell'articolo, ho introdotto come utilizzare img per creare semplici immagini in HTML e ho introdotto alcuni modi per utilizzare img in combinazione con altri tag come a tag, map tag per svolgere diverse funzioni utili. Infatti, quando lo fai, devi combinarlo con i CSS, la nuova interfaccia è bellissima e gli effetti sono accattivanti.