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. I campi obbligatori sono contrassegnati *

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