Creiamo un tema di base con i nuovi standard HTML 5
Ormai il web si evolve in continuazione, e il nuovo HTML5 è sempre più aggiornato. Vediamo quindi come creare un semplice tema sviluppato con i nuovi standard del linguaggio.
Prima di tutto scriviamo lo schema della pagina utilizzando l’html5:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | < !doctype html> <html> <head> <title>HTML5 layout</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <header class="head"> <h1>HTML5 layout</h1> <nav> <ul class="navul"> <li class="navli"><a href="#">link 1</a> | </li> <li class="navli"><a href="#">link 2</a> | </li> <li class="navli"><a href="#">link 3</a></li> </ul> </nav> </header> <section> <article> <hgroup> <h1>Post title</h1> <h2>Subtitle and info</h2> </hgroup> <p>Content goes here.</p> </article> <article> <!-- Another article here --> <h1>Post title</h1> <p>altro articolo</p> </article> </section> <aside> <!-- Sidebar here --> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </aside> <footer>Theme by <a href="http://www.geckozone.altervista.org">Geckozone</a></footer> </div> </body> </html> |
Come potete vedere il nuovo linguaggio è leggermente diverso da quelli standard in semplice html: i tag “header”, “section”, “article” e tutti gli altri prendono posto dei soliti div, dando così alla pagina uno schema semantico che faciliterà la lettura dei motori di ricerca e dando ad esso una migliore positione nella serp.
Ora diamo al tema un semplice tema, quindi nel file CSS inseriamo queste righe di codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | body{ background:#EEE; font-family:Verdana, Geneva, sans-serif; } #container{ margin:0 auto; width:1020px; padding:5px; } header.head{ width:98%; background:#CCC; border:1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; margin:5px; clear:both; float:left; } header h1{ font-size:28px; float:left; } header nav{ background:#AAA; border:1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; float:right; position:relative; top:10px; right:50px; } header .navul, .navli{ padding:0px; margin:0px; list-style:none; float:left; font-size:12px; } section{ width:70%; background:#CCC; border:1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; margin:5px; clear:both; float:left; } section article{ background:#AAA; border:1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin:5px; padding:5px; } section article h1{ font-size:28px; margin:0px; padding:0px; } section article h2{ font-size:20px; margin:0px; padding:0px; } section article p{ font-size:12px; } aside{ width:25%; background:#CCC; border:1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; margin:5px; float:left; } footer{ width:98%; background:#CCC; border:1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:5px; margin:5px; clear:both; text-align:center; } |
Il gioco è fatto! Come potete vedere il tema è molto semplice e intuitivo, possiamo infatti lavoraci sopra e modificarlo a nostro piacimento. Se provate infatti a modificare la larghezza del “container” (width:1020px) il contenuto si ridimensionerà a seconda della dimensione assegnata.
Attraverso qualche attributo speciale, con un minimo di CSS3 ho aggiunto qualche dettaglio per dargli un aspetto leggermente migliore
CSS3, HTML5, layout, style, theme