Come inserire un'immagine in HTML sul tuo sito web

L'aggiunta di immagini al tuo sito web o profilo di social network è un ottimo modo per decorare la tua pagina. HTML (Hypertext Markup Language) si distingue per un numero elevato di funzionalità di sviluppo Web e il codice necessario per aggiungere immagini è abbastanza semplice.

Quindi, come inserire un'immagine in HTML?

Carica la tua immagine su un sito di hosting gratuito di immagini, come Photobucket o TinyPic, che fornisce accesso costante al file scaricato. Dopo aver copiato il link all'immagine apparirà direttamente sul sito di hosting. Tuttavia, se si paga per servizi premium di tale servizio, è meglio utilizzare funzionalità aggiuntive. Questo è più affidabile, poiché nell'hosting di immagini gratuito, a volte le immagini non si aprono a causa del sovraccarico. Dopo aver caricato un'immagine su uno dei servizi online, apri un nuovo documento sul tuo computer in un editor di testo (ad esempio, in Blocco note) o vai al riquadro di modifica della pagina desiderata del tuo sito (dove puoi modificare il codice HTML).

Scrivere tag

Continuando a parlare di come inserire un'immagine in HTML, inizia con il tag IMG. Dopo di ciò, è necessario aggiungere uno spazio e un carattere barra prima del carattere di chiusura. Pertanto, devi comporre la seguente combinazione: <img />. Inoltre, ci sono molti attributi disponibili, ma solo uno di essi è assolutamente necessario. Questo è l'indirizzo o l'URL della tua immagine. È specificato come segue: <img src = "URL_ dell'immagine" />.

Testo alternativo

Successivamente, cercando di inserire un'immagine in HTML, devi aggiungere l'attributo Alt. Questo definisce il testo alternativo nel caso in cui l'immagine non venga caricata. Tale testo è destinato anche agli utenti ipovedenti che utilizzano screen reader. Se si passa il mouse cursore del mouse sull'immagine, il testo alternativo apparirà in un suggerimento, ma questa funzione è presente solo in Internet Explorer. Per vederlo in altre applicazioni, avrai bisogno di plugin speciali. Per inserire un suggerimento, inserirlo oltre a Alt. (Puoi facoltativamente saltare questo passaggio). Se si utilizza questa funzione, il collegamento sarà simile a questo:

<img src = "URL_your_of_article" alt = "pop-up_text" "title =" Tooltip "/>

Dimensioni e parametri dell'immagine

Continuando a seguire le istruzioni su come inserire un'immagine in HTML, è possibile specificare ulteriormente la dimensione dell'immagine utilizzando gli attributi di altezza e larghezza che indicano in pixel o in percentuale. Si noti che l'immagine verrà visualizzata a causa del ridimensionamento all'avvio. Il browser utilizzerà ancora inizialmente la dimensione effettiva dell'immagine. Per questo motivo, se la tua foto è troppo grande, è meglio cambiarla. dimensione con assistenza programmi di fotoritocco e non solo l'indirizzo del link. Ora il tuo codice potrebbe apparire in questo modo:

<img src = "URL della tua immagine" alt = "tooltip text" title = "Tooltip" height = "50%" width = "50%" />

<img src = "URL della tua immagine" alt = "tooltip text" title = "Tooltip" height = "25px" width = "50px" />

Altri attributi

Il valore di questi attributi è un valore di pixel positivo o una percentuale con l'originale (1-100%). Parlando di come inserire un'immagine in HTML, puoi anche notare che può essere posizionata ovunque su una pagina web con un attributo di allineamento: alto, basso, medio, a destra, a sinistra, ecc. L'attributo HSPACE viene utilizzato per inserire le immagini orizzontalmente sul lato sinistro e destro, VSPACE - per caricare verticalmente tra la parte superiore e inferiore della pagina e rispetto ad altri contenuti. Se parliamo in generale di HTML - come inserire un'immagine e come aggiungere contenuto alla pagina, la cosa principale è non esagerare. Altrimenti, la tua risorsa sembrerà sciatta e troppo "colorata". GIF sarà la soluzione migliore per la visualizzazione di loghi o animazioni e JPEG è più adatto per immagini e foto di alta qualità.