Contenuto

• Passi
• Suggerimenti
• Avvertenze

L'aggiunta di immagini a un sito Web o a un profilo di social media è un modo eccellente per migliorare l'aspetto visivo della pagina. Il codice HTML (Hypertext Markup Language) per l'aggiunta di immagini è abbastanza semplice e di solito è il primo ad essere appreso da uno studente HTML.

Passi

Parte 1 di 2: inserimento dell'immagine

1. 

   Invia l'immagine. Attualmente, ci sono diversi servizi di hosting di immagini gratuiti, come Picasa Web Album, Imgur, Flickr o Photobucket. Leggi attentamente i termini di utilizzo di ciascuno. Alcuni di questi servizi possono ridurre la qualità dell'immagine inviata o rimuoverla dopo aver raggiunto un certo numero di visualizzazioni (questo perché le immagini occupano spazio sui server di queste società).
   • Alcuni dei servizi di blog hosting consentono all'utente di caricare immagini utilizzando i propri strumenti di gestione del blog.
   • Se sei abbonato a un servizio di hosting a pagamento, carica le immagini sul tuo sito web utilizzando un servizio FTP (File Transfer Protocol). Si consiglia di creare una directory "immagini" per mantenere i file organizzati.
   • Se desideri utilizzare un'immagine di un altro sito, chiedi l'autorizzazione al creatore. Se l'ordine viene concesso, scarica e carica l'immagine su un sito di hosting di immagini.

2. 

   
   
   Apri il tuo file HTML. Apri il documento HTML corrispondente alla pagina web su cui verrà visualizzata l'immagine.
   • Se la tua intenzione è quella di inserire un'immagine in un forum, digita il codice direttamente nel tuo post. Diversi forum su Internet utilizzano un sistema personalizzato anziché HTML. Se non funziona, chiedi aiuto ad altri utenti.

3. 

   
   
   Inizia con il tag IMG. Trova la posizione nel corpo del file HTML in cui desideri inserire un'immagine. Scrivi il tag . Questo è un tag vuoto, cioè non ha un tag di chiusura. Tutto ciò che serve per visualizzare un'immagine deve andare all'interno delle due parentesi quadre.

4. 

   
   
   Trova l'indirizzo URL della tua immagine. Visita il sito web in cui hai ospitato l'immagine. Fai clic destro sull'immagine (su Mac, tieni premuto il tasto Control e fai clic con il mouse) e seleziona "Copia indirizzo immagine". Se preferisci, clicca su "Visualizza immagine" per aprirlo da solo su una pagina e copiare l'URL nella barra degli indirizzi.
   • Se hai caricato l'immagine nella directory delle immagini sul tuo sito web, collegala come segue / images /nome del tuofilequi. Se non funziona, è probabile che la directory dell'immagine si trovi in ​​un'altra cartella. Spostalo nella directory principale.

5. 

   Inserisci l'indirizzo URL nell'attributo SRC. Probabilmente sai già che gli attributi HTML vengono inseriti all'interno dei tag per modificarli. L'attributo SRC significa "fonte", ed è lui che dice al browser dove cercare per trovare l'immagine. Digita src = "" e incolla l'indirizzo URL dell'immagine tra virgolette. Ecco un esempio:
   • 

6. 

   Aggiungi un attributo ALT. Tecnicamente parlando, l'HTML ha tutto il necessario per visualizzare un'immagine. Tuttavia, è meglio aggiungere l'attributo alt anche. Indica al browser Internet il testo che verrà visualizzato quando l'immagine non può essere caricata. Ancora più importante, aiuta i motori di ricerca a scoprire approssimativamente il contenuto della tua immagine, consentendo ai lettori di schermo di descrivere l'immagine ai visitatori ipovedenti. Segui l'esempio di seguito e modifica il testo tra virgolette:
   • 
   • Se l'immagine non è importante per il contenuto della pagina, aggiungi l'attributo ALT senza testo al suo interno (alt = "").

7. 

   Salvare le modifiche. Salva il file HTML del sito web. Accedi alla pagina che hai appena modificato o aggiornala, se è già aperta. L'immagine dovrebbe essere visualizzata. Se è della taglia sbagliata o presenta un altro problema, passare alla sezione successiva.

Parte 2 di 2: impostazioni opzionali

1. 

   Modifica la dimensione dell'immagine. Per ottenere i migliori risultati, è sufficiente utilizzare un software di modifica delle immagini per ridimensionarle e quindi caricare la nuova versione. Definisci gli attributi larghezza (larghezza) e altezza (altezza) dell'HTML in modo che il browser riduca o ingrandisca l'immagine, il che può essere incoerente in molti browser Internet e persino causare errori di visualizzazione (raramente). Se vuoi effettuare una regolazione rapida e funzionale, utilizza il seguente formato:
   • (Numero di pixel o "pixel CSS" in HTML5.)
   • O (Percentuale della dimensione della pagina web o dell'immagine.)
   • Se inserisci solo uno dei due attributi (larghezza o altezza), il browser deve mantenere il rapporto larghezza: altezza.

2. 

   Aggiungi un suggerimento. Puoi usare l'attributo titolo (titolo) per aggiungere un commento extra o alcune informazioni sull'immagine. Ad esempio, puoi usarlo per accreditare l'autore della foto. Questo testo viene solitamente visualizzato ogni volta che un visitatore passa con il mouse sull'immagine.
   • 

3. 

   Crea un collegamento nell'immagine. Per rendere l'immagine anche un collegamento, inserire il codice dell'immagine all'interno del tag del collegamento . Ecco un esempio:

Suggerimenti

• Non dimenticare di includere l'estensione dell'immagine (.webp, .gif, ecc.) Nell'URL.
• Le immagini GIF funzionano bene per loghi o cartoni animati; Le immagini JPEG funzionano bene per immagini complesse, come le fotografie.
• Nella maggior parte dei casi, è consigliabile utilizzare immagini con formati.gif, .jpeg, .webp o.png. È improbabile che altri formati vengano visualizzati correttamente in tutti i browser.
• Conserva una copia di backup dell'immagine sul tuo computer, per ogni evenienza.

Avvertenze

• Non utilizzare immagini inserendo l'URL del sito Web di qualcun altro. Questo consuma la larghezza di banda Internet di quella persona senza generare visite al loro sito web. Oltre ad essere immorale, l'immagine scomparirà se il suo sito web originale non funziona. Se l'autore della pagina lo scopre, può persino cambiare l'immagine che appare sul tuo sito web.