Creare pagine in Html 5

creare-pagina-in-html5

Vediamo come costruire la prima pagina in Html 5. Si dice che l’Html 5 non sara’ completamente supportato fino al 2022, ma noi che viviamo di web, siamo convinti che si debbano gia’ imparare i nuovi tag di questo linguaggio. Html 5 introduce diversi elementi nuovi che renderanno le nostre pagine piu’ pulite e veloci.

Iniziamo. Apriamo Dreamweaver e scriviamo il codice Html5 della nosta pagina:


<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

I Web Designer

Notiamo il codice piu’ pulito e che manca l’attributo type nel richiamo del CSS.

</pre>
<div id="wrapper">
<header><a href="http://www.iwebdesigner.it"><img id="logo" src="images/logo.png" alt="" width="292" height="112" /></a>

	<li><a href="#">Home</a></li>
</header>
<header>
	<li><a href="#">Chi Siamo</a></li>
</header>
<header>
	<li><a href="#">Portfolio</a></li>
</header>
<header>
	<li><a href="#">Blog</a></li>
</header>
<header>
	<li><a href="#">Contatti</a></li>
</header>
<header><nav>
</nav> </header>

Notiamo che invece della classica

</pre>
<div id="header">

possiamo inserire solo il tag header. Va sottolineato che il tag header puo’ essere usato anche in altre parti della pagina, non solo nella parte superiore. Aggiungiamo il menu’ di navigazione:


<nav>
	<li><a href="#">Home</a></li>
</nav>
<nav>
	<li><a href="#">Chi Siamo</a></li>
</nav>
<nav>
	<li><a href="#">Portfolio</a></li>
</nav>
<nav>
	<li><a href="#">Blog</a></li>
</nav>
<nav>
	<li><a href="#">Contatti</a></li>
</nav>
<nav>
</nav>

Stessa cosa di prima per il tag NAV. Inseriamo il tag section:

<section>

<blockquote>

<h1>Abbiamo idee sempre nuove per aumentare il tuo businness...</h1>

Magoo</blockquote>
</section>

Quando si crea un layout Html 5, basta scegliere tra section o article. E poi chiudiamo il markup:

<aside> </aside>

<footer></footer>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Quindi il codice Html5 della nostra pagina e’:


<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

I Web Designer</pre>
<div id="wrapper">
<header><a href="http://www.iwebdesigner.it"><img id="logo" src="images/logo.png" alt="" width="292" height="112" /></a>

	<li><a href="#">Home</a></li>
</header>
<header>
	<li><a href="#">Chi Siamo</a></li>
</header>
<header>
	<li><a href="#">Portfolio</a></li>
</header>
<header>
	<li><a href="#">Blog</a></li>
</header>
<header>
	<li><a href="#">Contatti</a></li>
</header>
<header><nav>
</nav> </header>

<section>

<blockquote>

<h1>Abbiamo idee sempre nuove per aumentare il tuo businness...</h1>

Magoo</blockquote>
</section>

<aside> </aside>

<footer></footer></div>
<pre>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Ecco come si presenta la pagina:

creare-pagina-in-html5

Abbiamo visto le basi del codice Html 5, nel prossimo articolo costruiremo lo style.css relativo alla nostra pagina.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *