Siti HTML5 CSS3 esempi: “Siti Responsive Web Design”
Siti HTML5 CSS3 Esempi: per tutti i giovani Webmaster, ELEVEN MARKETING propone un’utile esempio di sito web “one page” responsive design in HTML5 e CSS3 (in puro codice no CMS).
Tutti gli “addetti ai lavori”, ormai sanno che HTML5 (linguaggio di markup) e CSS3 (fogli di stile) hanno sorpassato il vecchio HTML4 e CSS2, proiettandoci nel futuro del web.
Il vantaggi dell’HTML5, uniti alla potenza dei CSS3, sono molteplici: primo su tutti quello di ESALTARE I CONTENUTI, rendendo i siti web più “leggeri” e “SEO friendly”.
Siti HTML5 CSS3 esempi: principali TAG HTML di una pagina web
In basso riportiamo l’elenco dei principali elementi HTML5 utilizzati nella pagina web:
- <header>: una pag. può avere diversi elementi header;
- <article>: articolo – una parte di contenuto determinata;
- <section>: una sezione di un’ articolo;
- <nav>: menù navigazione;
- <aside>: contenuti marginalmente collegati al contenuto principale (es. menu laterale);
- <footer>: il “piede” della pagina web (per copyright e info.)
La funzione dei “CSS” (Fogli di Stile) e le peculiarità di “CSS3”
Qual’è la funzione dei “fogli di stile” e quali sono le peculiarità dei CSS3?
Grazie ai “fogli di stile” (i cui file hanno un’estensione “.css”), è possibile personalizzare il tuo sito, dettando con un unico file.css, le stesse regole di formattazione per tutte le pagine web.
Mentre i TAG HTML sono responsabili della struttura principale della pagina web, le specifiche CSS ci permettono di “fare il trucco” al nostro sito, rendendolo originale ed unico!
Con un file.css è infatti possibile:
- Personalizzare i colori delle pagine (testo, titoli, sottotitoli, sfondo).
- Personalizzare le immagini di sfondo e di testata.
- “Giocare” con l’opacità delle immagini di testata e sfondo.
- Inserire i video spostandoli a piacimento.
- Rendere il sito Responsive (adattabile a tutti i principali dispositivi).
Le nuove specifiche “CSS3” inoltre, hanno portato diverse novità, vediamo le principali:
- introduzione di nuovi selettori.
- Inntroduzione nuove pseudo-classi.
- nuove proprietà per la gestione dei colori e trasparenze.
- nuovi metodi per la gestione di sfondi e bordi.
- possibilità di impiegare font non standard (@font-face).
- possibilità di creare layout a più colonne.
- Introduzione delle “Media Queries” per ottimizzazione siti sui diversi dispositivi.
- Utili effetti dinamici quali transizioni, trasformazioni e animazioni.
Siti HTML5 CSS3 esempi: media query CSS
Secondo noi, la novità più rivoluzionaria portata dai CSS3 è stata l’introduzione delle “Media Queries”.
Con le Media Queries, è possibile intervenire sulla struttura e l’aspetto di una pagina web, ottimizzandola su tutti i dispositivi.
Grazie alle “Media Queries”, la pagina web può adattarsi alle diverse dimensioni degli schermi dei principali devices: desktop, laptop, tablet, smartphone.
Con le Media Queries, pertanto, i Webmaster possono progettare pagine web “responsive” che si adattano perfettamente alle esigenze dei “navigatori in movimento”, esaltando le potenzialità dei siti web nati per l’e-commerce e/o ottimizzati per la SEO Local.
Siti HTML5 CSS3 esempi: esempio sito “Responsive” con “Media Queries”
Di seguito riportiamo i link alla nostra pagina web realizzata in HTML5 e CSS3, “responsive” ottimizzata con l eproncipali Media Queries (che pui visualizzare e scaricare alla fine dell’articolo).
Nel nostro esempio, abbiamo utilizzato le seguenti Media Queries:
/* Smartphone o piccoli Tablet */
@media screen and (max-width: 480px) {
}
/* Tablet in modalità verticale */
@media all and (min-width: 481px) and (max-width: 736px) {
}
/* Tablet in modalità orizzontale */
@media all and (min-width: 737px) and (max-width: 1279px) {
{
/* Laptop */
@media all and (min-width: 738px) and (max-width: 1600px) {
}
/* Large Desktop */
@media screen and (min-width: 1900px) {
}
Per l’utilizzo delle Media Queries, non c’è una “regola” precisa; tutto dipende dalle caratteristiche della pagina web che vogliamo ottimizzare.
Nel nostro esempio, abbiamo utilizzato le soprattutto le Media Queries “max-width” e “min-width”.
Sito HTML5 CSS3 Esempio
Questa pagina web è un esempio di sito “one page”, con dei link “ancora” sul menù principale.
Le principali caratteristiche della pagina sono:
- Realizzazione in HTML5 con file “index.html”.
- Realizzazione in CSS3 con foglio di stile “style.css”.
- Utilizzo delle principali “media queries” (“max-width” e “min-width”) per ottimizzare la pagina sui principali device: Desktop, Laptop, Tablet e Smartphone.
- Link a menù responsive realizzato da W3Schools.
- Link a Google font.
Scarica il file.zip con il sito esempio ed esercitati!
