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

transcript

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”.

Linguaggio di marcatura Struttura semantica

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

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

<br />

StrutturaDefinizione e svolgimento

DTDOgni documento HTML deve averlo!

(Document Type Definition)

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>

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

</html>

<!DOCTYPE html>

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.

</html>

<!DOCTYPE html>

<head>

</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>.

<!DOCTYPE html>

<body>

HeadingsIntestazioni

Sezioni principali di un testo. !

Raggruppati in ordine di importanza decrescente, da

<h1> a <h6>.

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

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

TestoParagrafi e formattazioni

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

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.

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

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

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

- Apice|Pedice: <sup></sup>|<sub></sub>

- Linea orizzontale: <hr />

- Quotazione: <blockquote cite=“”></blockquote>

- Citazione: <cite></cite>

- Abbreviazione: <abbr title=“”></abbr>

- Indirizzo: <address></address>

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

ListeOrdinate, non-ordinare, di definizione

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

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

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

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

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

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.

LinksAncore e collegamenti ipertestuali

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

Go to the TARDIS

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

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

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

MediaImmagini, video, audio e interattività

The creator of the Daleks, Davros.

Image of Davros.

<figure> <img src=“davros.jpg” alt=“Image of Davros.” title=“The creator of the Daleks, Davros.” /> <figcaption>Davros from Doctor Who, © BBC</figcaption> </figure>

Davros from Doctor Who, © BBC

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>

Contenitori

- Sezione: <section></section>

- Intestazione: <header></header>

- Articolo: <article></article>

- Footer: <footer></footer>

- Navigazione: <nav></nav>

- Barra laterale: <aside></aside>

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>

Tabelle

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>

Tabelle

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>

Tabelle

Daleks 1963 2014

Cyberman 1966 2013

Villain First apperance Last apperance

FormsUser Interaction

<fieldset> <legend>Contact information</legend> </fieldset>

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

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

iFramesInline Frames

iFrames

iFrames

iFrames

2014 Giovanni Buffa - CC by-nd 3.0

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

Education