Geckozone

HTML,HTML5

Un semplice tema in HTML5

29 gen , 2012  

Logo dell'HTML5

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.

-DEMO-

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 ;)

, , , ,

Categorie

Meta

© Copyright 2024   Geckozone