Html5 - classi prime - multimedia

Html5
corso 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 Multimediale
Classi prime
SECONDA PARTE

Nuovi elementi strutturali
<section>: è usato per raggruppare elementi che sono tematicamente relazionati
(sezioni generiche) ed in genere contiene un titolo introduttivo. 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>
<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
2

Nuovi elementi strutturali #2
<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>
3

<header>: tag che rappresenta un gruppo di elementi introduttivi (sito o altro
contenitore). Oltre che ad elementi h1-h6 può contenere un logo, un form di ricerca
ecc.
Questo tag non può contenere il tag footer.
<section>
<header>
<h1>HTML5</h1>
</header>
</section>
4

<footer>: questo tag deve contenere in genere informazioni sulla sezione che lo
contiene come: i dati di chi ha scritto i contenuti, collegamenti ai documenti correlati,
i dati di copyright, appendici, indici, note, accordi di licenza ecc..
Non necessariamente deve essere inserito solo alla fine del documento e non può
contenere il tag header
<section>
<header>
<h1>HTML5</h1>
</header>
<footer>
</footer>
</section>
5

<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. I link a piè di pagina
e le breadcrumb non devono essere inserite nel nav
<nav>
<ul>
<li><a href=”..”>home page</a></li>
<li><a href=”..”>contatti</a></li>
</ul>
</nav>
6

<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

ESERCIZIO
Converti 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>
<header>
...
</header>
<nav>
...
</nav>
<section>
<article>...</article>
<article>...</article>
</section>
<aside>...</aside>
<footer></footer>
</section>
</body>
</html>
10

Come fare uno schema
11
Come realizzeresti il codice?
section article

Come fare uno schema #2
12
A)
article
B)
C)
Qual è lo schema
corretto?
section

Come fare uno schema #3
13
A)
B)
C)
<section></section>
<article></article>
<article>
<section></section>
</article>
<section>
<article></article>
</section>

DOM
Document Object model
Matteo Ziviani – scuolagraficasanzeno.com

DOM
Il 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.
15

DOM Esempio #1
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<section id=”container”>
<header>
<h1>Sito</h1>
</header>
<p> testo ….</p>
<footer id=”piede”>
<p>Copyright</p>
</footer>
</section>
</body>
</html>
16

DOM Esempio #2
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
<h1>Sito</h1>
</header>
<p> testo ….</p>
<p>Copyright</p>
</footer>
</section>
</body>
</html>
17
1. Si parte dal <body>
body

DOM Esempio #3
18
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>
<head>...</head>
<body>
<header>
<h1>Sito</h1>
</header>
<p> testo ….</p>
<p>Copyright</p>
</footer>
</section>
</body>
</html>
In questo caso <body> prende il nome di
genitore e <section> di figlio
body
section

DOM Esempio #4
19
contiene body?
3. Si ripete il processo per tutti gli elementi trovati
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
<h1>Sito</h1>
</header>
<p> testo ….</p>
<p>Copyright</p>
</footer>
</section>
</body>
</html>
body
section
header p footer

DOM Esempio #5
20
contiene body?
3. Si ripete il processo per tutti gli elementi trovati
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>
<h1>Sito</h1>
</header>
<p> testo ….</p>
<p>Copyright</p>
</footer>
</section>
</body>
</html>
body
section
header p footer
h1 p

DOM ed attributi id
21
body
section#container
pheader footer#piede
h1 p

ESERCIZIO
<body>
<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>
<p>Copyright</p>
<p>Matteo Ziviani</p>
</footer>
</section>
</body>
22

nav#navigazione
ESERCIZIO
23
body
section#contenitore
header#testata article footer#piede
h1 h1 p p p
a

Esercizi
Svolgere i seguenti esercizi
1.5
1.6
1.7

Esercitazioni
globali
Svolgere i seguenti esercizi
1.8
1.9
1.10
1.11

Corsi per adulti in ambito
grafico e web
m.ziviani@sanzeno.org
fcs.sanzeno.org
Alcuni corsi
Html e CSS base/avanzato
Wordpress base/avanzato
Javascript e jQuery
SASS
Bootstrap
ecc...

Html5 - classi prime - multimedia

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html5 - classi prime - multimedia

Similar to Html5 - classi prime - multimedia (20)

Html5 - classi prime - multimedia