Ancoraggio Html di immagine

Ancoraggio Html di immagine

Il web è una giungla misteriosa, tutto ciò che noi guardiamo o clicchiamo è composto da un sotto strato capillare di codici, tag, e altre cose con paroloni strani che vanno a formare la struttura del web stesso…. Si potrebbe un po’ paragonare all’ interruttore della luce, lo guardiamo, può avere forma o colori differenti, se schiacciamo un bottone si accende una luce, se ne clicchiamo un altro apriamo il cancello, ma questo avviene grazie a ciò che c’è dietro… un reticolo di cavi, trasformatori ecc…. in un certo senso lo stesso vale per il web 
Andiamo a vedere in modo pratico cosa c’è sotto per avere un’idea di come è fatta questa struttura cercherò di spiegare alcune cose basilari nel modo più semplice possibile per cercare di far capire anche ai neofiti:

Immagini:
Ne esistono in diversi formati, i più usati sono: ‘’ .gif .jpg e .png’’
L'elemento <img> è necessario per richiamare una immagine, ma da solo non serve a nulla, necessita di diversi attributi uno è obbligatorio ovvero: src. Questo tag non necessita del tag di chiusura ma di solito i tag hanno bisogno di un tag di apertura e un altro di chiusura. (Vedremo come negli esempi)
L'attributo src (source) è indispensabile per l'elemento img, senza questo non funzionerebbe nulla. Permette di specificare il nome dell'immagine completo della sua estensione (.png , jpg ecc) E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL (indirizzi internet di un elemento) richiamanti l'immagine da altri siti.
Ma come facciamo a dare una url ad una immagine?
Occorre caricarla nel web, ci sono vari siti gratuiti per poter fare ciò https://imageshack.us è uno dei più noti ma ce ne sono molti altri, una volta caricata la nostra immagine nel sito ci verra fornito l’indirizzo della nostra immagine ecco questo indirizzo sarà la nostra url da mettere nel codice, nel mio caso ho caricato la foto di un fiore il suo indirizzo (URL) è il seguente: https://imageshack.com/a/img922/3872/09DNlh.jpg

Vediamo un esempio pratico da scrivere in una pagina web: 
<img src="nome_immagine.jpg"> 

Al posto di "nome immagine" dovremo mettere l’URL (indirizzo) della foto
<img src=" https://imageshack.com/a/img922/3872/09DNlh.jpg ">  

Ecco come risulterà nell’editor:

Ed ecco come risulterà nella vostra pagina:

Ci sono molti attributi che possiamo aggiungere a questo codice servono per allineare l’immagine a sinistra piuttosto che a destra, altri che ci permettono di aggiungere un bordo, altri ancora per cambiare la grandezza dell’immagine, ma di questo parlerò in futuro per  non complicarvi troppo le idee, spero che questo articolo sia abbastanza chiaro anche per chi si sta avvicinando per la prima volta  alla costruzione di una pagina web. 
Alla prossima!