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

HTML & HTML5

–Wikipedia

“L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive le modalità di

impaginazione, formattazione e visualizzazione grafica (layout) del contenuto, testuale e non,

di una pagina web”.

2

Linguaggio di marcatura Struttura semantica

3

<p>…</p>

4

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

5

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

6

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

7

<br />

8

<br>

9

StrutturaDefinizione e svolgimento

DTDOgni documento HTML deve averlo!

(Document Type Definition)

11

Il DTD è uno strumento utilizzato dai programmatori il cui scopo è quello di definire 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 file 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>

HeadingsIntestazioni

Sezioni principali di un testo. !

Raggruppati in ordine di importanza decrescente, da

<h1> a <h6>.

20

<h1>Ligula Commodo Fringilla.</h1> <h2>Ligula Commodo Fringilla.</h2> <h3>Ligula Commodo Fringilla.</h3> <h4>Ligula Commodo Fringilla.</h4> <h5>Ligula Commodo Fringilla.</h5> <h6>Ligula Commodo Fringilla.</h6>

21

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

22

TestoParagrafi 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, 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. !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

<p><strong>Raxacoricofallapatorius</strong>, first mentioned in <em>"World War Three”</em>, 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 <em>Monsters and Villains</em>, the planet is a paradise with burgundy seas and four polar regions.</p>

27

Testo


28

Testo

<p><strong>Raxacoricofallapatorius</strong>, first mentioned in <em>"World War Three”</em>, is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, 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


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>

- Definizione termine: <dfn></dfn>

- Marcatore generico: <span></span>

32

ListeOrdinate, non-ordinare, di definizione

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

LinksAncore e collegamenti ipertestuali

Links

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

41

Links

Go to the TARDIS

42

Links

<a href=“tardis.html”>Go to the TARDIS</a> <a href=“http://www.unit.co.uk”>Visit UNIT HQ</a> <a href=“mailto:[email protected]”>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

MediaImmagini, 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

50

Image of Davros.

Media

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

51

Media

<figure> <img src=“davros.jpg” alt=“Image of Davros.” title=“The creator of the Daleks, Davros.” /> <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.ogg” type=“video/ogg” /> <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” /> <source src=“dw_intro.ogg” type=“video/ogg” /> </audio>

56

Media

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

57

Contenitorie 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

TabelleDati, non layout!

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

FormsUser Interaction

Forms

69

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

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

iFramesInline Frames

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>

iFrames

78

2014 Giovanni Buffa - CC by-nd 3.0

http://creativecommons.org/licenses/by-nd/3.0/it/legalcode

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

Education

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