Siti HTML5 CSS3 esempi, esercizi HTML5 CSS3

Siti HTML5 CSS3 esempi: Siti responsive design

siti-html5-css3-esempi

Per tutti i giovani Webmaster,  ELEVEN MARKETING propone un’utile esempio di sito web responsive design in HTML5 e CSS3 (in puro codice no CMS).

I Webmaster ELEVEN MARKETING si sono “sbizzariti” nella creazione di un mini sito HTML5  e CSS3, ispirato ai mitici robottoni anni ’80i!

Ma procediamo con ordine: tutti gli “addetti ali 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: elementi 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.)

 

Oltre a questi elementi, sono stati utilizzati gli “attributi ARIA” (Web Accessibility Initiative – Accessible Rich Internet Applications). 

 

  • ROLE=”BANNER” (per inserire logo, ricerca interna … ecc);
  • ROLE=”NAVIGATION” (link di navigazione);
  • ROLE=”MAIN” (contenuto principale);
  • ROLE=”CONTENT INFO” (info sulla pagina web da inserire nel footer).

 

Siti HTML5 CSS3 esempi: modello pagina web.

Di seguito mostriamo la struttura web del sito modellinirobotanni80.altervista.org:

nell’esempio è riportato il modello della pagina web HTML5, con le sezioni principali, evidenziando gli elementi di apertura (in blu) ed i gli elementi di chiusura (in rosso).

 

<!DOCTYPE html>
<html lang=”it”>
<head>
<title>Modellini Robot anni 80, modellini Robot Giapponesi, Hangar HTML5</title>
<meta charset=”utf-8″/>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
<!– visualizzazione ottimale per le su device iphone che adotta browser Safari –>
<meta name=”description” content=”modellini robot anni 80: hangar robot html5, recensioni e novita modellini robot giapponesi”>
<meta name=”keywords” content=”modellini robot anni 80, modellini robot giapponesi, robot anni 80″>
<link rel=”stylesheet” href=”modellini_robot_anni_80.css”/>
</head>
<body>

<div id=”container”>
<header role=”banner”>
<a href=”http://www.modellinirobotanni80.altervista.org”><img class=”sopra” src=”logo-modellini-robot-anni-80-hangar-html5-2.png” alt=”robot anni 80, modellini robot anni 80″ width=”940″ height=”205″></a><!–in genere si sinserisce logo e/o strumento ricerca interna sito–>

&nbsp;

<a href=”http://www.modellinirobotanni80.altervista.org/gundam-hangar-diorama.html”><img alt=”danguard-custom” class=”displayed” src=”modellini-robot-hangar-diorama.jpg”></a>
<!– nel caso in cui voglio reinserire un video in testata, al posto dell’immagine statica: <video controls=”controls” autoplay=”autoplay”><source src=”http://modellinirobotanni80.altervista.org/gundam-hangar-html5.mp4″ type=”video/mp4″>
<source src=”http://modellinirobotanni80.altervista.org/gundam-hangar-html5.webm” type=”video/webm”>
</video> –>
<h1>Modellini Robot anni 80, Hangar Robot HTML5</h1>

<!–menu navigazione–>
<nav role=”navigation”>
<a href=”http://modellinirobotanni80.altervista.org”>Home</a>
<a href=”http://www.modellinirobotanni80.altervista.org/gundam-hangar-diorama.html”>Gundam</a>
<a href=”http://www.modellinirobotanni80.altervista.org/hangar-modellini-robot-giapponesi.html”>Robot</a>
<a href=”http://www.modellinirobotanni80.altervista.org/hangar-robot-diorama-machine-nest-base.html”>Kit Hangar</a>
<a href=”http://www.modellinirobotanni80.altervista.org/form.html”>Contatti</a>
</nav>
</header>
<div id=”content” role=”main”>
<p></p>
<article>
<h2><strong>Modellini robot giapponesi: Hangar Robot anni 80</strong></h2>

<img class=”destra” alt=”HTML5 siti esempio” src=”HTML5-TRASP.png” width=”103″ height=”236″/>
<a href=”http://80vogliadirobot.it/robot-anni-80″><strong>Modellini robot anni 80′ <strong>Hangar Robot HTML5</strong>, by 80vogliadirobot.it</strong></a>
<strong>Hangar Robot HTML5</strong> il sito web dedicato ai modellini robot giapponesi: Goldrake, Jeeg, Grande Mazinga, Mazinga Z, Danguard, Gundam e a tutti i mitici robot degli anni ’80.

<p><strong>Hangar Robot HTML5</strong> &egrave; il <a href=”https://11marketing.it/siti-html5-esempi”><strong>sito web Robot anni ’80 costruito con HTML5 e CSS3</strong></a>: i nuovi parametri di riferimento per la realizzazione dei siti web del futuro!</p>
<p>HTML5, anche grazie al supporto della versione CSS3 (forgli si Stile), valorizza la semantica, esaltando il contenuto: ed &egrave; proprio
sui contenuti che il nuovo sito sui Robottoni Giapponesi prover&agrave; a fare la differenza!</p>
</article>
&nbsp;
<article>
<h2><strong>Modellini Robot anni 80 recensioni: pregi e difetti</strong></h2>
<a href=”http://www.modellinirobotanni80.altervista.org/recensioni-modellini-robot-anni-80.jpg”><img class=”destra” alt=”recensione modellini robot anni 80″ src=”modellini-robot-giapponesi-hangar-html5.jpg” width=”103″ height=”236″/></a>
<strong>Hangar Robot HTML5</strong> realizza recensioni sui migliori modellini Robot Giapponesi: ogni settimana vengono registrati video su modellini vecchi e nuovi
di famose case produttrici: <strong>BANDAI, CM’S, YAMATO</strong> … ecc

<p>I <strong>modellini robot</strong> vengono messi ai “RAGGI X”: ad ogni modello sono dedicati 5 minuti, durante i quali vengono “messi a nudo” pregi e difetti di progettazione e costruzione!
Lo Scopo del sito web &egrave; diventare il punto di riferimento per tutti i collezzionisti, appassionati dei robot anni 70 – 80!</p>
</article>

&nbsp;

<article>
<h2><strong>Modellini Robot anni 80: prezzi modellini</strong></h2>
Nel sito web <strong>Hangar Robot HTML5</strong> trovate le ultime novit&agrave; sui <strong>robottoni giapponesi</strong>: periodicamente, grazie alla collaborazione con 80vogliadirobot.it
e con altri siti di settore, illustriamo le caratteristiche, i prezzi (minimo e massimo) e le uscite in distribuzione delle principali novità robotiche!
</article>

&nbsp;

<article>
<h2><strong>Robot anni 70 – 80 artigianali: robot fatti a mano!</strong></h2>
Nel nostro sito web, inoltre, daremo ampio spazio alle vostre creazioni! Attraverso immagini e video, racconteremo la storia delle vostre
creazioni, dando maggiore visibilita&grave; alle vostre passioni!
</article>

&nbsp;

&nbsp;

</div>

<!– menu laterale … –>
<div class=”sidebar”>
<aside role=”complementary”>
<header><strong>NUOVO DANGUARD CUSTOM!</strong>
<br>
<br>
<a href=”http://www.modellinirobotanni80.altervista.org/danguard-modellino-custom.html”><img src=”danguard-modellino-custom-80vogliadirobot.jpg” height=”250″ width=”250″ alt=”modellini robot giapponesi hangar”></a>
</header>
<br>
<br>

<header>
<a href=”http://80vogliadirobot.it/daikengo-modellino-immagini/”><strong>Daikengo 65 cm, trasformabile!</strong></a>
<br>
<br>
<video controls poster=”Daikengo-80vogliadirobot-poster.jpg”><source src=”http://modellinirobotanni80.altervista.org/Daikengo_presentazione,_modellino_robot_80vogliadirobot.it.mp4″ type=”video/mp4″>
<source src=”http://modellinirobotanni80.altervista.org/Daikengo_presentazione,_modellino_robot_80vogliadirobot.it.webm” type=”video/webm”>
<source src=”http://modellinirobotanni80.altervista.org/Daikengo_presentazione,_modellino_robot_80vogliadirobot.it.ogg” type=”video/ogg”>
</video>
</header>
<br>
<br>
<br>
<br>
<header>
<a href=”http://80vogliadirobot.it/trider-g7-2012-foto-immagini-trider-g7″><strong>Trider G7 65 cm, trasformabile!</strong></a>
<br>
<br>
<video controls poster=”trider-g7-modellino-80vogliadirobot-poster.jpg”><source src=”http://modellinirobotanni80.altervista.org/trider-g7-modellino-80vogliadirobot.it.mp4″ type=”video/mp4″>
<source src=”http://modellinirobotanni80.altervista.org/trider-g7-modellino-80vogliadirobot.it.webm” type=”video/webm”>
<source src=”http://modellinirobotanni80.altervista.org/trider-g7-modellino-80vogliadirobot.it.ogg” type=”video/ogg”>
</video>
</header>
</aside>

</div>

&nbsp;

&nbsp;

&nbsp;

&nbsp;

<footer id=”footer” role=”contentinfo”>
<p>
<a href=”http://jigsaw.w3.org/css-validator/check/referer”> <img alt=”CSS Valido!” src=”http://jigsaw.w3.org/css-validator/images/vcss-blue” style=”border:0;width:54px; height:20px”></a>
<a href=”http://validator.w3.org/check?uri=http%3A%2F%2Fwww.modellinirobotanni80.altervista.org%2F”>
<img src= “w3c-html5.jpg” height=”15″ width=”54″ alt=”w3c-html5″></a>

</p>
<p class=”prova2″><small>&copy;<a href=”https://11marketing.it”><b>ELEVEN MARKETING – Consulenza Marketing Roma</b></a></small></p>
</footer>
<!– end #container–>
</div>
<!–[if lt IE 8]>
<script src=”http://html5shiv.googlecode.com/svn/thrunk/html5.js”>
</script>
<![endif]–>
<!– internet explorer 8 e precedenti non supportano le query mediali …
… inserendo questo script, le query mediali min-width e max-width
funzionano anche nelle vecchie versioni di IE … –>
</body>
</html>

Siti HTML5 CSS3 esempi: la pagina di esercizio

siti html5 css3 esempi

Siti HTML5 CSS3 esempi: modello file.CSS

Per completezza, riportiamo il LINK PER SCARICARE IL FILE.CSS3 costruito secondo le direttive della tecnologia CSS3.

freccia-11marketing ok

 

>> DOWNLOAD FILE.CSS3

Grazie a questo file, abbiamo potuto personalizzare il nostro sito, dettando le stesse regole di formattazione a tutte le pagine web!

Con questi file.css p stato 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).

 

Siti HTML5 CSS3 esempi: media query CSS.

All’interno del file.css, potrete trovare le utilissime MEDIA QUERY: le query mediali permettono di mirare stili specifici di formattazione della pagina web, alle caratteristiche specifiche del dispositivo.

CON LE MEDIA QUERY, LA PAGINA WEB SI ADATTA ALLE DIVERSE DIMENSIONI DEGLI SCHERMI DEI PRINCIPALI DEVICE: Desktop, Tablet, cellulare, smartphone.

 

Siti HTML5 CSS3 esempi: siti validati W3C

Ovviamente, l’esempio descritto è stato progettato secondo i criteri di validazione W3C – “MARKUP VALIDATION SERVICE”

 

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.