Siti HTML5 CSS3 esempi, esercizi HTML5 CSS3

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:

1. Personalizzare i colori delle pagine (testo, titoli, sottotitoli, sfondo).
2. Personalizzare le immagini di sfondo e di testata.
3. "Giocare" con l'opacità delle immagini di testata e sfondo.
4. Inserire i video spostandoli a piacimento.
5. 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:

1. Realizzazione in HTML5 con file "index.html".
2. Realizzazione in CSS3 con foglio di stile "style.css".
3. Utilizzo delle principali "media queries" ("max-width" e "min-width") per ottimizzare la pagina sui principali device: Desktop, Laptop, Tablet e Smartphone.
4. Link a menù responsive realizzato da W3Schools.
5. Link a Google font.

Scarica il file.zip con il sito esempio ed esercitati!

Vuoi imparare a creare siti in HTML/CSS - responsive?

Frequenta i nostri corsi in Web Development!