Come distanziare le immagini html
Come distanziare le immagini in html con e senza l’uso di CSS.
In questo facile tutorial HTML imparerai come distanziare le immagini in html cosi da creare gallerie ordinate su qualsiasi pagina del tuo sito web. Trovi qui esempi pronti da copiare ed incollare nel codice html della tua pagina web, che puoi modificare a tuo piacimento. Inoltre, ti dirò come come distanziare le immagini in html utilizzando una libreria di CSS pronti per l’uso da installare gratis.
Per chi consiglio questo libro
Web Designer e programmatori
Editori di contenuti online (copywriter)
Team di marketing ed e-commerce
Blogger e appassionati
Cosa imparerai:
- Scrivere codice HTML e CSS3
- Strutturare siti e pagine web
- Lavorare con immagini, audi e video
- Controllare la tipografia e il layout
Distanziare le immagini in html
Prima di passare alla pratica html voglio dirti che distanziare le immagini con html è indispensabile se vuoi creare delle gallerie immagini e puoi usare o il metodo inline che il metodo con il CSS che consiglio per grandi gallerie immagini.
Per distanziare le immagini in html non ti serve essere un programmatore professionista ma sarà indispensabile conoscere alcuni tag della programmazione HTML per realizzare una galleria web con immagini distanziate tra loro. Se la tua intenzione è quella di creare un blog ti consiglio di leggere come fare un blog, ti sarà utile. Inoltre, visto che questo argomento ne richiama degli altri ti consiglio di leggere anche questa guida come inserire immagini da una cartella usando il codice html, che ti sarà utile per migliorare la UX e UI design del sito web.
Consiglio
Non sottovalutare queste informazioni! infatti, devi sapere che sempre meno siti web costruiscono le loro pagine usando html5 ma prima o poi avrai bisogno di distanziare le immagini sulla tua pagina e di certo non dovrai farlo con la barra spazio! quindi imparare le fondamenta di questo tipo di funzione è indispensabile nella costruzione di un sito web professionale.
Come distanziare le immagini in html
Eccoci qui finalmente siamo nel vivo della materia, siamo pronti a distanziare duo o più immagini nei due diversi modi. Ti mostrerò due vie percorribili che ti porteranno ad ottenere lo stesso risultato. Il primo modo è quella di allineare le immagini senza l’uso di CSS, quindi sfruttando tutto il potenziale del linguaggio di programmazione (HTML). Il Secondo modo, percorribile, è quello di utilizzare i CSS (Cascading Style Sheets) e come installare una libreria CSS nel tuo sito web.
Per staccare due foto html l’una dall’altra sei nel posto giusto. Ecco come fare.
- Distanziamento con HTML5
- Distanziamento con CSS
Distanziamento con HTML5
Per distanziare le immagini o altri elementi tra di loro contenuti in una pagina HTML hai bisogno di questi due tag HTML: hspace e vspace.
- hspace indica la distanza dal lato destro e sinistro dell’immagine o gli oggetti prossimi (testo, immagini, video o altro.).
- vspace indica la distanza top e bottom (sopra e sotto) dell’immagine o gli oggetti prossimi (testo, immagini, video o altro.).
In questo esempio, che puoi liberamente copiare ed incollare nel codice html della tua pagina, trovi tutto il necessario per distaccare gli elementi html.
Codice Html da inserire nel TAG <body> della tua pagina:
Distanziamento con CSS
Questo è un esempio che puoi liberamente copiare ed incollare nel codice html e CSS per distaccare la tua immagine tramite l’attributo CSS margin.
Codice Html Immagine:
CODICE HTML da inserire nel tag
CODICE CSS da aggiungere tra i tag
In questo caso useremo la percentuale come unità di misura cosi da evitare dimensioni prestabilite così da ottenere un sito web responsive.
display: inline-block;
height:auto;
width:100px;
border: 1px solid red;
padding: 3%;
margin:1%;
}
Distanziare le immagini CSS
Potresti aver bisogno di distanziare immagini aggiungendo elementi css più complessi capaci di migliorare il tuo sito web, questa libreria già pronta trasformerà la grafica del tuo sito in maniera facile e gratuita. Se hai voglia di personalizzazione, ti consiglio di installare GetBootstrap sul tuo sito web sono sicuro che otterrai risultati professionali.
Installa BooStrap CSS al tuo tema WordPress
Leggi questa guida Gratuita!
Se hai WordPress allora, inserire una immagine html è diverso, non avrai più bisogno di usare il codice html ma scoprilo in questo articolo che ti consiglio di leggere.
[amazonproducts asin=”B08TC94YPT”]
In questo articolo hai imparato come distanziare le immagini dagli altri elementi della pagina. Se ti è piaciuto questo articolo fammelo sapere lasciando un commento qui sotto ed se vuoi aiutarmi condividi questo articolo sul tuo social.
“Un sito è inutile se non puoi trovarlo facilmente” Francesco Monaco
