Aggiungi un'immagine con HTML

Autore: Christy White
Data Della Creazione: 4 Maggio 2021
Data Di Aggiornamento: 1 Luglio 2024
Anonim
6- Tutorial HTML: Inserire una immagine
Video: 6- Tutorial HTML: Inserire una immagine

Contenuto

L'aggiunta di immagini al tuo sito web o al profilo di un social network è un ottimo modo per abbellire la tua pagina web. HTML (HyperText Markup Language) ha molte funzioni per la creazione di pagine web, ma fortunatamente il codice necessario per aggiungere immagini non è troppo difficile.

Al passo

Metodo 1 di 1: inserimento di immagini con HTML

  1. Carica la tua immagine su un sito di hosting gratuito, come Photobucket o TinyPic, che consente l'hot linking. L'hot-linking consente un collegamento diretto di un'immagine al server del sito web; alcuni provider l'hanno vietato perché l'hot linking utilizza la loro larghezza di banda e occupa spazio sui loro server.
    • Se hai un account di hosting a pagamento, carica le immagini direttamente sul server in cui si trova il tuo sito web. Questo è sempre più affidabile di un sito gratuito e non deve essere affatto costoso.
  2. Apri un nuovo documento in un editor di testo (ad es., Blocco note / Blocco note) o apri la pagina nel tuo sito web / profilo dove puoi modificare direttamente il codice HTML.
  3. Inizia con il img etichetta. Il img tag è vuoto, il che significa che non è necessario alcun tag di chiusura. Tuttavia, per la convalida XHTML puoi ancora mettere uno spazio e una barra davanti ad esso più grande di cartello.
    • img />
  4. Ci sono molti attributi disponibili, ma solo uno è necessario:src. Questa è la posizione / indirizzo, o anche l'URL, della tua immagine.
    • img src = "URL dell'immagine" />
  5. Avanti devi alt Aggiungi attributo. Questo mostra un testo alternativo, nel caso in cui l'immagine non venga caricata. Questo è anche un servizio per i non vedenti che utilizza lettori di schermo.
    • Se passi il cursore su un'immagine, questo testo viene visualizzato anche come suggerimento, ma questo è solo il caso di Internet Explorer. La soluzione che funziona con tutti i browser (Firefox et al.) è ad esso titolo attributo da utilizzare in aggiunta a alt. (Puoi omettere quest'ultimo se non vuoi che l'immagine abbia un suggerimento.)

Come esempio:img src = "URL dell'immagine" alt = "Solo nel caso" title = "Tooltip" />


  1. Ora puoi indicare la dimensione dell'immagine con l'estensione altezza e larghezza attributo e specificando i pixel o una percentuale. Nota che il ridimensionamento in questo modo cambia solo la dimensione della vista, non la dimensione dell'immagine stessa. Per abbreviare il tempo di caricamento di un'immagine è meglio, soprattutto con immagini di grandi dimensioni, ridimensionarle preventivamente con un software di fotoritocco o con un servizio online come PicResize.com.
    • img src = "URL dell'immagine" alt = "Just in case" title = "Tooltip" height = "50%" width = "50%" />
    • img src = "URL dell'immagine" alt = "Just in case" title = "Tooltip" height = "25px" width = "50px" />

Suggerimenti

  • Il valore di questi attributi viene fornito in pixel o come percentuale, dall'1 al 100%.
  • L'immagine può essere posizionata ovunque sulla pagina web, utilizzando i vari attributi di formattazione come in alto, in basso, al centro, a destra, a sinistra ecc.
  • L'attributo hspace viene utilizzato per inserire spazio orizzontale a sinistra ea destra di un'immagine, mentre l'attributo vspace viene utilizzato per creare spazio nella parte superiore e inferiore delle immagini e di altri oggetti.
  • Non indulgere troppo con le immagini. Sembra disordinato e poco professionale.
  • Le immagini GIF vanno bene per loghi o cartoni animati, ma questo tipo di file è meno adatto per foto e altre immagini con molti colori.
    • Le immagini GIF supportano solo il colore a 8 bit con un massimo di 256 colori per un'immagine. È quindi prevedibile che la riproduzione di un'illustrazione o di una foto a colori a 16 o 24 bit non sarà altrettanto buona.
    • Le immagini GIF supportano anche la trasparenza. È possibile un po 'di trasparenza, il che significa che un colore può essere reso trasparente.
    • L'interlacciamento è supportato anche da immagini GIF, il che significa che il visitatore del sito avrà un'idea di come apparirà l'immagine prima che sia completamente caricata.
    • Il formato GIF supporta anche l'animazione.
  • Assicurati che l'URL indichi il formato del file dell'immagine (.webp .gif ecc.).

Avvertenze

  • Non Hotlink!