Siti HTML5 CSS3 esempi, esercizi HTML5 CSS3

Siti HTML5 CSS3 esempi: “Siti Responsive Web Design”

siti-html5-css3-esempi

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”.

nimble_asset_freccia-call-to-action

Sito HTML5 CSS3 Esempio

siti HTML5 CSS3 con media queries

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!

default img

Contattaci come preferisci

Oppure compila il Form

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.