HTML5 corso base (classi prime, mod 2)

Html5corso base

Introduzione ai nuovi standard per web designers

● I tag strutturali

Matteo Ziviani – scuolagrafica.sanzeno.org

HTML5 is a latest iteration of this lingua franca.XHTML IS DEAD: long live xhtml syntax

Jeremy Keith*

Laboratorio MultimedialeClassi prime

SECONDA PARTE

Nuovi elementi strutturali<section>: è usato per raggruppare elementi che sono tematicamente relazionati

(sezioni generiche). Quando si utilizza questo tag la domanda da porsi è: “il contenuto è relazionato?”. Può contenere tag header, footer, nav e aside.<section>

<h1>HTML5</h1><p>Nuovi tag semantici e strutturali in arrivo con html5</p><p>by Matteo Ziviani</p>

</section>

<header>: tag che descrive la testata/introduzione di un contenitore o del sito. Oltre che ad elementi h1-h6 può contenere un logo, un form di ricerca ecc.<section>

<header><h1>HTML5</h1>

</header><p>Nuovi tag semantici e strutturali in arrivo con html5</p><p>by Matteo Ziviani</p>

</section>2

Nuovi elementi strutturali #2

<footer>: tag che rappresenta la sezione conclusiva di un contenitore di navigazione, introduzione o del sito. Un documento può contenere più tag footer. Solitamente contiene il nome dell’autore, il copyright o link a documenti correlati

<section><header>

<h1>HTML5</h1></header><p>Nuovi tag semantici e strutturali in arrivo con html5</p><footer>

<p>by Matteo Ziviani</p></footer>

</section>

3


<aside>: rappresenta una sezione il cui contenuto è connesso solo marginalmente alla pagina e che dovrebbe essere considerato separato dal resto del contenuto. Potrebbe essere utilizzato per pubblicità, la biografia dell’autore, applicazioni, informazioni di profilo o link correlati al contenuto

<header><h1>testata del sito</h1>

</header>

<section><p>sezione principale</p>

</section>

<aside><p>sezione collegata al sito</p>

</aside>

4


<nav>: L’elemento nav rappresenta una parte della pagina che contiene link ad altre pagine, o ad elementi presenti nella stessa pagina.

Una sezione con dei link di navigazione. Non tutti i gruppi di link devono essere posti in un elemento nav: solo i link principali sono appropriati

<nav><ul>

<li>home page</li><li>contattni</li>

</ul></nav>

5


<article>: è un elemento specializzato con le stesse funzioni di section ma non generico. Potrebbe essere un post di un forum, un articolo di giornale, un post di un blog, un commento da parte di un utente, un widget, o un altro contenuto indipendente ovvero che possa avere significato da solo anche estratto dal contesto.

<article><header>

<h1>testata del sito</h1></header><p>testo dell’articolo</p><footer>

<p>pubblicato il:<time datetime=“2010-11-11” pubdate>11

Nov</time>by matteo ziviani

</p></footer><article>eventuali articoli correlati o commenti</article>

</article> 6

Esempio schematizzato

7


<body><section id=”contenitore”>

<header><h1>Your Inspiration Web 4.0!!</h1>

</header>

<section><h1>Titolo per il mio contenuto principale</h1>

<p>Qui andrebbe il contenuto principale del mio sito.</p></section>

<aside><p>Qui tutto ciò che potrebbe essere legato mio contenuto.</p>

</aside>

<footer><p>Qui varie informazioni conclusive!</p>

</footer></section>

</body>

8

ESERCIZIOConverti questo schema in una struttura html

9

Logo

Contenitore

Pulsanti di navigazione del sito

Articolo Banner pubblicitari

Piede della pagina

Articolo

ESERCIZIO<!DOCTYPE html><html>

<head>...</head><body>

<section id=”contenitore”><header>

...</header><nav>

...</nav>

<section><article>...</article>

<article>...</article></section><aside>...</aside>

<footer></footer></section></body>

</html>10

DOM

Document Object model

Matteo Ziviani – scuolagraficasanzeno.com

DOMIl DOM (document object model) o anche DOM Tree è un sistema di

rappresentazione gerarchica del documento HTML.

Questa rappresentazione è molto importante per molti aspetti legati alle

pagine HTML

Per il nostro percorso di studi il DOM è importante per definire un percorso corretto per l’applicazione degli stili CSS. Noi studieremo una versione SEMPLIFICATA.

12

DOM Esempio #1<!DOCTYPE html><html>


<section id=”container”><header>

<h1>Sito</h1></header>

<p> testo ….</p>

<footer id=”piede”><p>Copyright</p>

</footer></section>

</body></html>

13

DOM Esempio #2<!DOCTYPE html><html>


<section id=”container”><header>

<h1>Sito</h1></header>

<p> testo ….</p>


</footer></section>

</body></html>

14

1. Si parte dal <body>

body

DOM Esempio #3

15

1. Si parte dal <body>2. Si scrivono i tag che discendono da lui

(solo quelli di primo livello). La domanda a cui si deve rispondere è: quali sono i tag che contiene body?

<!DOCTYPE html><html>


<section id=”container”>

<header><h1>Sito</h1>

</header>

<p> testo ….</p>


</footer></section>

</body></html>

In questo caso <body> prende il nome di genitore e <section> di figlio

body

section

DOM Esempio #4

16



3. Si ripete il processo per tutti gli elementi trovati





</header>

<p> testo ….</p>


</footer></section>

</body></html>

body

section

header pfooter

DOM Esempio #5

17



3. Si ripete il processo per tutti gli elementi trovati





</header>

<p> testo ….</p>


</footer></section>

</body></html>

body

section

header pfooter

pp

DOM ed attributi id

18

body

section#container

pheader footer#piede

p p

ESERCIZIO<body>

<section id=”contenitore”><header id=”testata”>

<h1>Sito</h1><nav id=”navigazione”>

<a href=”...”>Home</a></nav

</header><article>

<h1>Titolo dell’articolo</h1><p>testo dell’articolo</p>

</article><footer id=”piede”>

<p>Copyright</p><p>Matteo Ziviani</p>

</footer></section>

</body> 19

nav#navigazione

ESERCIZIO

20

body

section#contenitore

header#testata article footer#piede

h1 h1 p p p

a

Esercizi

Svolgere i seguenti esercizi1.51.61.7


Esercitazioni globali

Svolgere i seguenti esercizi1.81.91.101.11


Internet

HTML5 corso base (classi prime, mod 2)