Come creare separatori per abbellire il vostro sito o blog utilizzando sia il linguaggio HTML sia inserendo delle immagini spaziatrici
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:
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
ecco un esempio di separatore completamente personalizzabile: spessore, stile, colore, lunghezza.
Esempio
| <hr style="border-top: 20px; border-style: ridge; border-color: #000000; width: 100%;"> |
Codice
La voce “border-top” determina lo spessore,
La voce “border-style” determina lo stile (dotted, dashed, solid, double, groove, ridge, inset, outset)
La voce “border-color” determina il colore espresso in valore esadecimale (vedi Lista dei colori).
La voce “width” determina la lunghezza
Se volete inserire un testo all’interno di separatori provate questo:
Esempio
| <div style="border-width: 2px; border-style: solid; border-color: #007FFF; width: 100%;">testo testo testo testo testo testo testo testo </div> |
Codice
Si noti che eliminando il testo, il separatore, si compatta e diventa una semplice linea
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
alcatraz – divisori web glitterati
iltelaiodipenelope – divisori web
picchina – divisori web animati
glitter graphics – divisori web, generatore di testi animati
Adesso bisogna trovare un sito hosting dove caricare le immagini, ad esempio:
imagebam
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:
Esempio
| <img class="aligncenter" src="URL IMMAGINE" alt="Separatori" title="Separatori"> |
Codice
Ho inserito anche i tag “alt” e “title” perche obbligatori per le regole SEO
Esempio
| <img class="aligncenter" src="URL IMMAGINE" width="100%" alt="Separatori" title="Separatori"> |
Codice
Se volete decidere di impostare la larghezza dell’immagine potete aggiungere il pezzo di codice evidenziato
