Le immagini sono una parte molto importante di una pagina web in quanto migliora l'aspetto di una pagina web e aumenta l'interazione con il cliente. L'USP di più siti Web è il modo in cui organizzano immagini diverse sulle loro pagine Web e aggiungono sapori ad esso. In questo Articolo sulle immagini, capiremo come incorporare immagini in una pagina web utilizzando HTML nel seguente ordine:
Come aggiungere un'immagine in HTML
Per incorporare un'immagine in una pagina web HTML ti dà etichetta. Un altro punto importante da ricordare è,
non ha un tag di chiusura. scr l'attributo viene utilizzato per specificare il percorso dell'immagine, che può essere un URL o un percorso dell'immagine dal sistema / server. Cominciamo prima con la sintassi di base dell'incorporamento di un'immagine in una pagina web utilizzando HTML.
Sintassi
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Codice di esempio
Immagine HTML incorporando immagini nella pagina web
Analogamente ad altri tag, ci sono vari attributi associati a etichetta. Diamo un'occhiata a ciascuno di essi uno per uno, comprendiamo le loro necessità e come usarli.
Tag immagini HTML
- Attributo alt
L'attributo alt è il testo alternativo per un'immagine. Il motivo per cui è stato introdotto l'attributo alt è che se per qualsiasi motivo l'immagine non potesse essere caricata, dovrebbe apparire un testo alternativo che dà un'idea dell'immagine. I motivi per cui l'immagine non viene caricata potrebbe essere una connessione Internet lenta o l'immagine non risiede nella fonte fornita, ecc.
Se l'immagine risiede nella stessa cartella in cui si trova il file HTML, è possibile specificare direttamente il nome del file. Altrimenti, devi fornire il percorso assoluto del file immagine.
Il valore dell'attributo alt dovrebbe descrivere l'immagine.
Esempio
Immagine HTML incorporando immagini nella pagina web
qual è la procedura in sql
- Larghezza e altezza di un'immagine
L'attributo Style viene utilizzato per impostare l'altezza e la larghezza di un'immagine. Nell'attributo style si specifica lo stile CSS.
Immagine HTML incorporando immagini nella pagina web
Alcuni dei punti importanti durante l'incorporamento di un'immagine in una pagina Web utilizzando HTML sono:
- Gli attributi di larghezza e altezza sono definiti in pixel.
- Puoi anche definire la larghezza e l'altezza di un'immagine in percentuale. Considererà la percentuale in base all'intera pagina web.
- Se ne specifichi solo uno, regola l'altro di conseguenza.
- Incorporamento di immagini tramite URL
L'HTML ti offre anche la flessibilità in cui puoi scegliere l'immagine da un altro server semplicemente specificando l'URL. È possibile utilizzare un server separato per ospitare le immagini e quindi incorporare tali immagini utilizzando l'URL.
Immagine HTML incorporando immagini nella pagina web
- Immagine come collegamento
È inoltre possibile utilizzare l'immagine come collegamento in cui l'utente può fare clic sull'immagine e accedere a una nuova pagina Web. Per farlo, devi solo mettere il file giorno dopo etichetta.
Immagine HTML incorporando immagini nella pagina web
- Immagine fluttuante
Puoi anche regolare l'allineamento dell'immagine usando la proprietà float CSS. Tutta la proprietà CSS deve essere specificata nell'attributo style.
Immagine HTML
- Mappe immagine
Questa è una delle caratteristiche importanti fornite da HTML. tag aiuta nella definizione di una mappa immagine. Ti starai chiedendo cos'è una mappa immagine. Una mappa immagine è un'immagine con aree cliccabili
Immagine HTML
- Immagine di sfondo
Puoi anche aggiungere un'immagine di sfondo in una pagina web. Devi solo usare la proprietà CSS, cioè l'immagine di sfondo nel tag di stile e aggiungerla all'elemento HTML.
Immagine HTMLImmagine di sfondo
Elemento BODY
implementare una lista collegata in c
Con questo arriviamo alla fine di questo blog di immagini HTML.Ora dopo aver eseguito gli snippet di cui sopra avresti capito come inserire l'immagine in HTML. Spero che questo blog sia informativo e un valore aggiunto per te.
Dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti consente di acquisire competenze per lavorare con tecnologie web back-end e front-end. Include formazione su sviluppo Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Hai domande per noi? Per favore, menzionalo nella sezione commenti del blog 'Immagini HTML' e ti risponderemo.