Non è niente di troppo complicato, ma può sempre tornare utile a qualcuno; come potete vedere tutti i giorni sui siti che visitate, ogni pagina ha un logo che caratterizza il sito, e a volte questo è l’unico elemento presente nella testata. Questo articolo vi mostrerà come con l’utilizzo corretto e semantico dell’HTML si può far visionare il proprio logo tramite i CSS.
Iniziamo il tutto partendo con il codice HTML; questo deve molto semplice ma compiere il suo lavoro, quindi mostrerà solamente il nome del sito oppure il logo tramite un link, racchiuso all’interno della testata del sito.
[code lang=”html”]<h1><a href="http://www.sickbrain.org">Sickbrain.org</a></h1>[/code]
Adesso pensiamo al CSS:
[code lang=”css”]
h1 {
text-decoration:none;
border:0;
width : 200px;
height : 110px;
margin : 0;
padding : 0;
background : url(../img/logo.gif) no-repeat 0 0;
}
h1 a {
display : block;
height : 110px;
text-indent : -9999px;
}
[/code]
Questo foglio di stile “dice” al browser di creare una certa area, definita in precise dimensioni, per il vostro logo e di applicare un particolare sfondo.
Inoltre controlla il comportamento sul link miniaturizzando il testo che verrebbe generato dall’h1 a.
Quindi quando un vostro utente naviga sul sito e ha la visualizzazione immagini e CSS attiva, noterà e vedrà il vostro logo, ma senza il testo che lo carica; Mentre nel caso in cui l’immagine non viene caricata si avrà comunque un riferimento al logo del sito con testo di dimensioni importanti.
Si tratta di un semplice ma efficace metodo per garantire che il tuo logo venga visionato correttamente, rimanendo accessibile e più correttamente interpretabile dai motori di ricerca.
