Laboratorio di Web Design Base - 2014/15 - HTML/5

–Wikipedia
“L'HTML non è un linguaggio di
programmazione, ma un linguaggio di
markup, ossia descrive le modalità di
impaginazione, formattazione e visualizzazione
graﬁca (layout) del contenuto, testuale e non,
di una pagina web”.
2

Linguaggio di marcatura
Struttura semantica
3

<p>Questo è un paragrafo.</p>
5

<p lang=“it”>Questo è un paragrafo.</p>
6

<p lang=“it”>Questo è un paragrafo.</p>
7

Struttura
Deﬁnizione e svolgimento

DTD
Ogni documento HTML deve averlo! 
(Document Type Deﬁnition)
11

Il DTD è uno strumento utilizzato dai programmatori il
cui scopo è quello di deﬁnire le componenti ammesse
nella costruzione di un documento XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
12

DTD
- set di elementi leciti da usare (vocabolario);
- struttura logica di ogni elemento (grammatica);
- attributi e valori ammessi;
- utilizzato dai parser.
13

<html lang=“it”>
</html>
<!DOCTYPE html>
<head></head>
<body></body>
14

All’interno del tag <head> troveremo:
- <title>Titolo della pagia</title>
- meta-dati per applicazioni esterne (es.: motori
di ricerca);
- collegamenti a ﬁle esterni (stili, script, ecc.);
- stili/script inline.
15

<html lang=“it”>
</html>
<!DOCTYPE html>
<head>
<body></body>
16
</head>
<title>Chi siamo</title>
<meta charset=“utf-8”>

All’interno del tag <body> troveremo tutta la parte
di front-end (interfaccia) del nostro sito.
!
Testo, multimedia, e tutto ciò che l’utente potrà
vedere si trova esclusivamente all’interno di
<body>.
17

18
<!DOCTYPE html>
<html>
<head>
<body>

Sezioni principali di un testo.
!
Raggruppati in ordine di
importanza decrescente, da
<h1> a <h6>.
20

<h1>Ligula Commodo Fringilla.</h1>
21

Deve esserci sempre e solo
un <h1> in ogni pagina.
22

Testo
Paragraﬁ e formattazioni

Testo
<p>Raxacoricofallapatorius, first mentioned in "World War
Three", is the home planet of the Raxacoricofallapatorians,
including the criminal Slitheen, Blathereen and Hostrazeen
families. The difficulty characters have in pronouncing its name
is a recurring joke in the show.</p>
<p>According to the book Monsters and Villains, the planet is a
paradise with burgundy seas and four polar regions.</p>
24

Testo
Raxacoricofallapatorius, ﬁrst mentioned in "World War Three",
is the home planet of the Raxacoricofallapatorians, including
the criminal Slitheen, Blathereen and Hostrazeen families. The
difﬁculty characters have in pronouncing its name is a recurring
joke in the show.
!
According to the book Monsters and Villains, the planet is a
paradise with burgundy seas and four polar regions.
25

Testo
<p><strong>Raxacoricofallapatorius</strong>, first mentioned
in "World War Three", is the home planet of the
Raxacoricofallapatorians, including the criminal Slitheen,
Blathereen and Hostrazeen families. The difficulty characters
have in pronouncing its name is a recurring joke in the show.</
p>
<p>According to the book Monsters and Villains, the planet is a
paradise with burgundy seas and four polar regions.</p>
26

Testo
in <em>"World War Three”</em>, is the home planet of the
Blathereen and Hostrazeen families. The difficulty characters
have in pronouncing its name is a recurring joke in the show.</
p>
<p>According to the book <em>Monsters and Villains</em>, the
planet is a paradise with burgundy seas and four polar
regions.</p>
27

Testo
the criminal Slitheen, Blathereen and Hostrazeen families. The
difﬁculty characters have in pronouncing its name is a recurring
joke in the show.
!
28

Testo
in <em>"World War Three”</em>, is the home planet of the
Blathereen and Hostrazeen families. <br />The difficulty
characters have in pronouncing its name is a recurring joke in
the show.</p>
<p>According to the book <em>Monsters and Villains</em>, the
planet is a paradise with burgundy seas and four polar
regions.</p>
29

Testo
the criminal Slitheen, Blathereen and Hostrazeen families. 
The difﬁculty characters have in pronouncing its name is a
recurring joke in the show.
!
30

Testo
- Apice|Pedice: <sup></sup>|<sub></sub>
- Linea orizzontale: <hr />
- Quotazione: <blockquote cite=“”></blockquote>
- Citazione: <cite></cite>
- Abbreviazione: <abbr title=“”></abbr>
- Indirizzo: <address></address>
31

Testo
- Testo incorretto: <s></s>
- Testo rimosso|Testo sostituito: <del></del>| <ins></ins>
- Blocco di codice: <code></code>|<kbd></kbd>|<samp></samp>
- Preformattato: <pre></pre>
- Deﬁnizione termine: <dfn></dfn>
- Marcatore generico: <span></span>
32

Liste
Ordinate, non-ordinare, di deﬁnizione

Liste
<ol>
<li>Sara-Jane Smith</li>
<li>Brigadier Lethbridge-Stewart</li>
<li>Bad Wolf</li>
<li>K-9</li>
<li>Captain Jack Harkness</li>
</ol>
34

Liste
1. Sara-Jane Smith
2. Brigadier Lethbridge-Stewart
3. Bad Wolf
4. K-9
5. Captain Jack Harkness
35

Liste
<ul>
<li>Sara-Jane Smith</li>
<li>Brigadier Lethbridge-Stewart</li>
<li>Bad Wolf</li>
<li>K-9</li>
<li>Captain Jack Harkness</li>
</ul>
36

Liste
• Sara-Jane Smith
• Brigadier Lethbridge-Stewart
• Bad Wolf
• K-9
• Captain Jack Harkness
37

Liste
<dl>
<dt>The Doctor</dt>
<dd>The Doctor is a Time Lord, an extraterrestrial from the
planet Gallifrey, who travels in a time machine called the
TARDIS. Sometimes he is accompanied by companions who have
chosen to travel with him for a variety of reasons.</dd>
<dt>Dalek</dt>
<dd>Iconic villain from the British TV series Dr Who. Though
their appearance is robotic, the Daleks are actually little green
blobs mutated from members of the Kaled species by their
chief scientist, Davros, and placed in robotic armoured travel
machines.</dd>
</dl>
38

Liste
The Doctor
The Doctor is a Time Lord, an extraterrestrial from the planet
Gallifrey, who travels in a time machine called the TARDIS.
Sometimes he is accompanied by companions who have
chosen to travel with him for a variety of reasons.
!
Dalek
Iconic villain from the British TV series Dr Who. Though their
appearance is robotic, the Daleks are actually little green
blobs mutated from members of the Kaled species by their
chief scientist, Davros, and placed in robotic armoured travel
machines.
39

Links
Ancore e collegamenti ipertestuali

Links
<a href=“tardis.html”>Go to the TARDIS</a>
41

Links
<a href=“tardis.html”>Go to the TARDIS</a>
<a href=“http://www.unit.co.uk”>Visit UNIT HQ</a>
<a href=“mailto:master@time.com”>Mail to the Master</a>
<a href=“#cyberman”>Read about Cyberman</a>
43

Links
<a href=“tardis.html” target=“_blank”>Go to the TARDIS</a>
44

Links
<a href=“tardis.html” title=“Go to the TARDIS and escape from
Skaro.”>Go to the TARDIS</a>
45

Media
Immagini, video, audio e interattività

Media
<img src=“davros.jpg” />
47

Media
<img src=“davros.jpg” alt=“Image of Davros.” title=“The
creator of the Daleks, Davros.” />
48

Media
49
The creator of the Daleks, Davros.

Media
<figure>
</figure>
51

Media
<figure>
<figcaption>Davros from Doctor Who, © BBC</
figcaption>
</figure>
52

Media
53
Davros from Doctor Who, © BBC

Media
<video poster=“tardis_video_poster.jpg” controls autoplay
loop>
<source src=“dw_intro.mp4” type=“video/mp4” />
<source src=“dw_intro.ogg” type=“video/ogg” />
<source src=“dw_intro.webm” type=“video/webm” />
</video>
54

Media
<video poster=“tardis_video_poster.jpg” controls autoplay
loop>
<source src=“dw_intro.mp4” type=“video/mp4” />
<source src=“dw_intro.webm” type=“video/webm” />
<track kind=“subtitles” srclang=“it” src=“dw_intro_it.vtt” />
</video>
55

Media
<audio controls autoplay loop>
<source src=“dw_intro.mp3” type=“audio/mpeg” />
</audio>
56

Media
<canvas width=“” height=“” id=“”></canvas>
57

Contenitori
e contenitori semantici

Contenitori
<div>
<p>Time And Relative Dimentions In Space. A time/space
machine concieved by the Time Lords. It has infinate rooms
inside, including several console rooms, from which the ship
can be piloted.</p>
</div>
59

Contenitori
- Sezione: <section></section>
- Intestazione: <header></header>
- Articolo: <article></article>
- Footer: <footer></footer>
- Navigazione: <nav></nav>
- Barra laterale: <aside></aside>
60

Tabelle
<table>
<tr>
<td>Daleks</td>
<td>Cyberman</td>
<td>Masters (The)</td>
</tr>
<tr>
<td>1963</td>
<td>1966</td>
<td>1971</td>
</tr>
<tr>
<td>2014</td>
<td>2013</td>
<td>2009</td>
</tr>
</table>
62

Tabelle
63
Daleks 1963 2014
Cyberman 1966 2013
Master (The) 1971 2009

Tabelle
<table>
<thead>
<tr>
<th>Viallain</th>
<th>First apperance</th>
<th>Last apperance</th>
</tr>
</thead>
<tr>
<td>Daleks</td>
<td>Cyberman</td>
<td>Masters (The)</td>
</tr>
</table>
64

Tabelle
65
Villain First apperance Last apperance
Daleks 1963 2014
Cyberman 1966 2013

Tabelle
<table>
<tr>
<td>2014</td>
<td>2013</td>
<td>2009</td>
</tr>
<tfoot>
<tr>
<td>Viallain</td>
<td>First apperance</td>
<td>Last apperance</td>
</tr>
</tfoot>
</table>
66

Tabelle
67
Daleks 1963 2014
Cyberman 1966 2013
Villain First apperance Last apperance

Forms
70
<form action=“” method=“get|post”>…</form>

Forms
71
<fieldset>
<legend>Contact information</legend>
</fieldset>

Forms
72
<label for=“name”>Nome</label>

Forms
73
<input type=“” id=“” name=“” />
!
<textarea id=“” name=“”></textarea>
!
<select id=“” name=“”>
<option value=“”>Option</option>
</select>
!
<button type=“”>Send</button>

Forms
74
http://www.w3schools.com/html/html5_form_input_types.asp

iFrames
76
<iframe width=“” height=“” src=“” scrolling=“”
frameborder=“”></iframe>

iFrames
77
<iframe src="https://www.google.com/maps/embed?pb=!
1m16!1m10!1m3!1d621.0341897165755!
2d-0.19329364309344388!3d51.49235780221063!2m1!3f0!3m2!
1i1024!2i768!4f13.1!3m3!1m2!1s0x48760f8b6737b9db
%3A0x8f5a4c580bbfd4d7!2sTARDIS!5e0!3m2!1sit!2sit!
4v1410612406742" width="600" height="450" frameborder="0"
style="border:0"></iframe>

2014 Giovanni Buffa - CC by-nd 3.0

Laboratorio di Web Design Base - 2014/15 - HTML/5

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Laboratorio di Web Design Base - 2014/15 - HTML/5

Similar to Laboratorio di Web Design Base - 2014/15 - HTML/5 (8)

More from Giovanni Buffa

More from Giovanni Buffa (20)

Recently uploaded

Recently uploaded (20)

Laboratorio di Web Design Base - 2014/15 - HTML/5