Crea sito

Separatori per abbellire e tenere in ordine siti e blog

Separatori


Come creare separatori per abbellire il vostro sito o blog utilizzando sia il linguaggio HTML sia inserendo delle immagini spaziatrici

Ultimo aggiornamento: maggio 2016






Avete un blog o un sito e vi sembra che il solo testo non dia abbastanza risalto al vostro articolo, magari vi piacerebbe abbellirlo inserendo dei separatori, magari animati come questo:

Separatori



oppure uno piu semplice e statico, magari per separare un paragrafo da un altro, come questo:





Esistono svariati sistemi per inserire dei separatori in un blog o sito
(trattandosi di una guida per neofiti, in questo articolo, parleremo dei sistemi piu semplici tralasciando quelli piu complessi che necessitano di conoscenze molto piu approfondite).
in questo articolo descriverò l’inserimento tramite una immagine e l’inserimento mediante un codice HTML

Inserimento di separatori tramite un codice HTML

Cominciamo dal piu semplice: una linea di colore nero dello spessore di 1px la cui larghezza equivale al 100% dello spazio disponibile


Esempio

<hr/>

Codice



Adesso complichiamo un po la cosa inserendo i comandi: width (larghezza espressa in PX), size (spessore espresso in PX), color (colore), align (posizione)


Esempio

<hr width="400" size="4" color="red" align="right">

Codice

Riguardo al comando color, al posto del nome del colore (red, green, ecc.) si puo inserire il corrispondente codice esadecimale (#FF0000, #00FF00, ecc.), vedi Lista dei colori
Riguardo al comando align, le stringhe possibili sono: left, center, right


Si puo provare anche quasta variante:


Esempio

<hr style="border: none 0; border-top: 20px ridge #66A9ED; width: 100%; ">

Codice

Lo spessore è dato dalla stringa “border-top: 20px
La larghezza è data dalla stringa “width: 100%” (al posto del valore espresso in “%” si puo utilizzare il valore espresso in “px“)
La srtinga “ridge” definisce le proprietà della barra,quelle possibili sono:
dotted, dashed, solid, double, groove, ridge, inset, outset
sotto vi mostro alcuni esempi


double


dotted


solid



Se volete inserire un testo all’interno di separatori provate questo:



testo testo testo testo testo testo testo testo

Esempio

<div style="border-width: 2px; border-style: solid; border-color: red; "> testo testo testo testo testo testo testo testo </div>

Codice

se volete ridurre la larghezza della barra aggiungere il valore “width: 50%;” subito dopo “border-color: red;”

Inserimento di separatori tramite immagini

Per creare dei divisori con immagini dobbiamo seguire una procedura completamente diversa
per prima cosa dobbiamo procurarci de immagini adatte
esistono molti siti che mettono a disposizione il download gratuito delle immagini
di seguito ne elenco alcuni

imageclick divisori web, emoticon, immagini animate
mondoglitter divisori web, nomi glitter
alcatraz divisori web glitterati
iltelaiodipenelope divisori web
dollydoll divisori web, alfabeto animato
picchina divisori web animati
glitter graphics divisori web, generatore di testi animati
buongiornoweb divisori web

Adesso bisogna trovare un sito hosting dove caricare le immagini, ad esempio:
imagevenue
uploads
imgbox

E’ arrivato il momento di sviluppare il codice HTML che permetterà di visualizzare il divisore in formato immagine e assemblare il tutto, il risultato potrebbe essere questo:



Separatori

Esempio

<img class="aligncenter" src="URL IMMAGINE" alt="Separatori">

Codice

Ho inserito anche il tag “alt” perche obbligatorio per le regole SEO