html5 corso base (classi prime, mod 2)
TRANSCRIPT
![Page 1: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/1.jpg)
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
![Page 2: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/7.jpg)
Esempio schematizzato
7
![Page 8: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/8.jpg)
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
![Page 9: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/9.jpg)
ESERCIZIOConverti questo schema in una struttura html
9
Logo
Contenitore
Pulsanti di navigazione del sito
Articolo Banner pubblicitari
Piede della pagina
Articolo
![Page 10: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/11.jpg)
DOM
Document Object model
Matteo Ziviani – scuolagraficasanzeno.com
![Page 12: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/14.jpg)
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
![Page 15: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/15.jpg)
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
![Page 16: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/16.jpg)
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
![Page 17: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/18.jpg)
DOM ed attributi id
18
body
section#container
pheader footer#piede
p p
![Page 19: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/20.jpg)
nav#navigazione
ESERCIZIO
20
body
section#contenitore
header#testata article footer#piede
h1 h1 p p p
a
![Page 21: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/21.jpg)
Esercizi
Svolgere i seguenti esercizi1.51.61.7
Matteo Ziviani – scuolagrafica.sanzeno.org
![Page 22: HTML5 corso base (classi prime, mod 2)](https://reader036.vdocuments.site/reader036/viewer/2022062306/588107c71a28ab22368b56ab/html5/thumbnails/22.jpg)
Esercitazioni globali
Svolgere i seguenti esercizi1.81.91.101.11
Matteo Ziviani – scuolagrafica.sanzeno.org