Post on 20-Jan-2017
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
Nuovi elementi strutturali #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
Nuovi elementi strutturali #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
Nuovi elementi strutturali #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
Nuovi elementi strutturali #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>
<head>...</head><body>
<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>
<head>...</head><body>
<section id=”container”><header>
<h1>Sito</h1></header>
<p> testo ….</p>
<footer id=”piede”><p>Copyright</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>
<head>...</head><body>
<section id=”container”>
<header><h1>Sito</h1>
</header>
<p> testo ….</p>
<footer id=”piede”><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
16
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?
3. Si ripete il processo per tutti gli elementi trovati
<!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>
body
section
header pfooter
DOM Esempio #5
17
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?
3. Si ripete il processo per tutti gli elementi trovati
<!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>
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
Matteo Ziviani – scuolagrafica.sanzeno.org
Esercitazioni globali
Svolgere i seguenti esercizi1.81.91.101.11
Matteo Ziviani – scuolagrafica.sanzeno.org