HTML - Parte 22 CC BY DIAPOSITIVA 3 ALESSANDRO URSOMANDO HEADER HTML5 ELEMENTI ELEMENTI CONTENITORI ...

1

HTML

Elementi contenitori

[corso avanzato]

CC BY

ALESSANDRO URSOMANDODIAPOSITIVA 2

ELEMENTI CONTENITORI

� HTML5 � ELEMENTI

<head>

<body>

<title>

Oggi i siti organizzano lo

spazio del body in alcune aree

semantiche. HTML5 introduce degli

elementi contenitori per favorire

questa organizzazione.











Nel body ci sono elementi

vari (testi, immagini, moduli...)





2

CC BY


HEADER

� HTML5 � ELEMENTI � ELEMENTI CONTENITORI

<head>

<body>

<title>

header

Intestazione di una pagina o di un’area specifica. Tipicamente contiene i tag h1/h6 e hgroup.<header>

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

HEADER

07-00-13


header

Intestazione di una pagina o di un’area specifica. Tipicamente contiene i tag h1/h6 e hgroup.

<! -- omissis -- ><header >

<img src ="logo.png"alt ="Save the children" />

<hgroup ><h1>Save the children </h1><h6>Italia Onlus </h6>

</ hgroup ></ header ><! -- omissis -- >

3

CC BY


FOOTER


<head>

<body>

<title>

<header>

<footer>

footer

Ogni pagina (o area) può avere informazioni conclusive quali: autore, link, informazioni di copyright, ecc.

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

FOOTER

07-00-14


footer

Ogni pagina (o area) può avere informazioni conclusive quali: autore, link, informazioni di copyright, ecc.

<! -- omissis -- ><footer >

<strong>Save the Children dal 1919 lotta per i diritti dei bambini di tutto il mondo <br />

</strong>&copy ; Save the Children Italia 2000 - 2007 | Credits | <a href = "http://www.savethechildren.it/IT/ Page/t01/ view_html ?idp=340" >Privacy </a> | Via Volturno, 58 - 00185 Roma - Tel: (+39) 06.480.7001 - Fax: (+39) 06.480.700.39 <br />Codice Fiscale 97227450158 - Partita Iva 07354071008 - C.C. POSTALE n. 43019207

</ footer ><! -- omissis -- >

4

CC BY


ASIDE


<head>

<body>

<title>

aside

Definisce un’area laterale il cui contenuto è solo parzialmente correlato al tema principale (menu, link esterni, banner pubblicitari).

<header>

<footer>

<aside>

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ASIDE

07-00-15


aside


<! -- omissis -- ><aside >

<a href ="https://www.savethechildren.it/IT/Tool/ECommerce/" ><img src ="http://images.savethechildren.it/IT/f/banner/ban35.gif"

alt ="Aiuta un bambino adesso, Dona ora!" /></a><br /><img src ="http://www.savethechildren.it/ Img / bgNewsletter.gif " /><br /><embed src ="http://images.savethechildren.it/IT/f/banner/ban149.swf"

width ="258"height ="320" />

</ aside ><! -- omissis -- >

5

CC BY


ASIDE


<head>

<body>

<title>

<header>

<footer>

<aside>

<header>

<footer>

aside


Gli elementi header e footer

possono essere in qualsiasi area.





CC BY


ARTICLE


<head><title>

article

Definisce un’area del sito che contiene un contenuto autonomo e completo che può essere eventualmente ridistribuito

<header>

<footer>

<aside><article>

6

CC BY


ARTICLE


<head><title>

article


<header>

<footer>

<aside><article>

<header>

<footer>







CC BY



article








7

CC BY


SECTION


<head><title>

section

Definisce un’area generica del sito

<header>

<footer>

<aside><section>

CC BY


SECTION


<head><title>

<header>

<footer>

<aside><section>

<header>

<footer>







section


8

CC BY









Una section può contenere

un article ? E un article può

contenere una section ?







section


CC BY


SECTION VS ARTICLE


Section e article sono

contenitori semantici: raggruppano

contenuti che possono essere visti

come un tutt’uno.

Quindi nulla osta affinché si

contengano l’un l’altro, fermo

restando che in un article ci devono

essere contenuti eventualmente

ridistribuibili.




come un tutt’uno.





ridistribuibili.




come un tutt’uno.





ridistribuibili.

Pensiamo ad esempio

alla struttura di un blog

Pensiamo ad esempio


Pensiamo ad esempio


9

CC BY


SECTION VS ARTICLE


<article>

Un post con

tutti i suoi commenti

Un post con


Un post con


CC BY


SECTION VS ARTICLE


<article>

<header>

<footer>

contenuto dell’ articolo

<section>

Il postIl postIl post

I commentiI commentiI commenti

10

CC BY


SECTION VS ARTICLE


<article>

<header>

<footer>

contenuto dell’ articolo

<section>

<article>

<article>

<article>

<article>

<section>

Un commentoUn commentoUn commento

Il form per inserire

un nuovo commento


un nuovo commento


un nuovo commento

CC BY


NAV


<head><title>

nav

Definisce il menu delle sezioni del sito

<header>

<footer>

<aside><section>

<nav>

L’elemento nav può essere

sistemato in un elemento aside





11

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

NAV

07-00-16


<! -- omissis -- ><nav >

<a href ="http://www.savethechildren.it" >HOME

</a> |<a href ="" >COSA PUOI FARE TU</a> |<a href ="" >COSA FACCIAMO</a> |<a href ="" >INFORMATI</a> |<a href ="" >CHI SIAMO </a>

</ nav ><! -- omissis -- >

nav

Definisce il menu delle sezioni del sito

HTML

I form

12

CC BY


I FORMDAL PUNTO DI VISTA DELL’UTENTE

� HTML5 � FORM

Un form (modulo) permette all’utente di interagire con la pagina WEB.Un form (modulo) permette all’utente di interagire con la pagina WEB.Un form (modulo) permette all’utente di interagire con la pagina WEB.

CC BY


� HTML5 � FORM

L’utente inserisce uno o più input e poi conferma premendo un tasto..L’utente inserisce uno o più input e poi conferma premendo un tasto..L’utente inserisce uno o più input e poi conferma premendo un tasto..


13

CC BY


� HTML5 � FORM

..il browser reagirà in accordo con l’input...il browser reagirà in accordo con l’input...il browser reagirà in accordo con l’input.


CC BY


� HTML5 � FORM

Una pagina WEB può

avere uno o più elementi form.

Una pagina WEB può


Una pagina WEB può


I FORMDAL NOSTRO PUNTO DI VISTA

Alla pressione del tasto di conferma

viene eseguito il programma indicato in action

al quale verranno spedite le coppie (nome,

valore) con la strategia indicata in method.









Ogni form può contenere svariati

elementi di interazione e tra questi (di solito)

c’è almeno un pulsante di conferma.







Gli elementi form non

sono mai annidati l’uno nell’altro.




sono mai annidati l’uno nell’altro. Ogni elemento di interazione

ha un nome (nascosto all’utente) e un valore.

Ogni elemento di interazione




Ogni elemento form ha tre attributi:

name, method ed action.





14

CC BY


� HTML5 � FORM

Una pagina WEB può


Una pagina WEB può


Una pagina WEB può


I FORMDAL NOSTRO PUNTO DI VISTA



























sono mai annidati l’uno nell’altro. Ogni elemento di interazione












L’elaborazione può avvenire in due modi:L’elaborazione può avvenire in due modi:L’elaborazione può avvenire in due modi:

� PHP

� ASP

� Perl

� Java

� Javascript

Lato client Lato server

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

TEXT E PULSANTI

� HTML5 � FORM

07-00-19

<! -- omissis -- ><form >

<p>Cognome</p><input type ="text" name=" cognome" /><p>Nome</p><input type ="text" name=" nome" /><input type ="submit" value ="OK" />

</ form ><! -- omissis -- >

Tutti i campi di input possono avere l’attributo value.


<p>Cognome</p><input type ="text" name=" cognome" value =" Ursomando " /><p>Nome</p><input type ="text" name=" nome" value ="Alessandro" /><input type ="submit" value ="OK" />


15

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO


<label for ="cognome" >Cognome</ label ><input id =" cognome" type ="text" name=" cognome" /><label for ="nome" >Nome</ label ><input id =" nome" type ="text" name=" nome" /><input type ="submit" value ="OK" />


LABEL

� HTML5 � FORM

07-00-19


<p>Cognome</p><input type ="text" value =" Ursomando " name=" cognome" /><p>Nome</p><input type ="text" name=" nome" /><input type ="submit" value ="OK" />


Forse sarà

meglio strutturare la

nostra pagina HTML.

Forse sarà


nostra pagina HTML.

Forse sarà


nostra pagina HTML.

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

LABEL

� HTML5 � FORM

07-00-20

body {margin : 10px;

}form {

width : 208px;}div {

margin : auto;}input {

width : 100px;}label {

display : inline - block ;width : 100px;

}input #btn {

width : 150px;display : block;margin : 10px auto;

}

<form ><div >

<label for ="cognome" >Cognome</ label ><input id =" cognome" type ="text" name=" cognome" />

</ div ><div >

<label for ="nome" >Nome</ label ><input id =" nome" type ="text" name=" nome" />

</ div ><input id =" btn " type ="submit" value ="OK" />

</ form >

16

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

<form ><div >

<label for ="username" >Nome Utente </ label ><input id ="username" type ="text" name="username" />

</ div ><div >

<label for =" passwd " >Password </ label ><input id =" passwd " type ="password" name=" passwd " />

</ div ><input type ="submit" value ="OK" id =" btn " />

</ form >

PASSWORD

� HTML5 � FORM

07-00-21

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

RESET

� HTML5 � FORM

07-00-21

<form ><div >

<label for ="username" >Nome Utente </ label ><input id ="username" type ="text" name="username" />

</ div ><div >

<label for =" passwd " >Password </ label ><input id =" passwd " type ="password" name=" passwd " />

</ div ><input type ="submit" value ="OK" id =" btn " /><input type ="reset" value ="Svuota form " id =" btn " />

</ form >

17

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

<form ><label>

<input type ="radio" name=" Colore " value ="#000000" checked ="checked" />Default ( nero )

</label><label > <input type ="radio" name="Colore" value ="#FF0000" /> Rosso </ label ><label> <input type ="radio" name=" Colore " value ="#00FF00" /> Verde </label><label> <input type ="radio" name=" Colore " value ="#0000FF" /> Blu </label><label > <input type ="radio" name="Colore" value ="#FFFF00" /> Giallo </ label ><label > <input type ="radio" name="Colore" value ="#00FFFF" /> Ciano </ label ><input id =" btn " type =" submit " value ="Invia Dati " />

</ form >

RADIO BUTTON

� HTML5 � FORM

07-00-22

Per inserire un radio button nel nostro form

useremo un elemento di tipo input

con attributo type pari a radio.

I radio button di uno stesso gruppo condividono il valore

dell’attributo name e si differenziano grazie all’attributo value.











CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

CHECK BOX

� HTML5 � FORM

<form ><label > <input type ="checkbox" name="corso1" value ="true" /> HTML </ label ><label > <input type ="checkbox" name="corso2" value ="true" /> CSS </ label ><label > <input type ="checkbox" name="corso3" value ="true" /> JAVASCRIPT </ label ><label > <input type ="checkbox" name="corso4" value ="true" /> PHP </ label ><input id =" btn " type =" submit " value ="Invia Dati " />

</ form >

Per inserire un check box nel nostro form


con attributo type pari a checkbox.

Ogni casella avrà il suo nome (name) e il suo valore (value).









07-00-23

Anche qui è valido

l’attributo checked.

Anche qui è valido


Anche qui è valido


18

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

TEXTAREA

� HTML5 � FORM

07-00-24

<form ><textarea name="commenti" cols ="21" rows ="5" >

Testo da inserire dentro il textarea .</ textarea >

<input id =" btn " type =" submit " value ="Invia Dati " /> </ form >

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

MENU A TENDINA

� HTML5 � FORM

07-00-25

<form ><select name="sito" >

<option value ="http://www.vascorossi.net" > Vasco Rossi </option><option value ="http://www.soleluna.it" > Jovanotti </option><option value ="http://www.ligachannel.com/" > Ligabue </option><option value ="http://www.novenove.it/" > 99posse </option><option value ="http://www.24grana.it" > 24Grana </option>

</ select ><input id =" btn " type =" submit " value ="Invia Dati " />

</ form >

Un menu a tendina

viene realizzato mediante

l’elemento select (che fornisce

l’attributo name)

e i suoi elementi figlio option

(che hanno i valori).

Un menu a tendina



l’attributo name)



Un menu a tendina



l’attributo name)



Possiamo specificare una voce

attiva mediante l’attributo selected.





19

CC BY


Alcuni si sostituiscono

a un lavoro che in passato andava

fatto con Javascript:

� number

� range

� date

� time

� color




� number

� range

� date

� time

� color




� number

� range

� date

� time

� color

NUOVI TIPI DI INPUT

� HTML5 � FORM

HTML5 ha rivoluzionato i form introducendo

sia nuovi attributi che nuovi tipi di input. Tralasciamo gli attributi.





Altri sono propri

dell’ambito mobile:

� search

� email

� url

Altri sono propri


� search

� email

� url

Altri sono propri


� search

� email

� url

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

NUOVI TIPI DI INPUT: NUMBER

� HTML5 � FORM

07-00-26

<div ><label for =" number " >Una quantità </ label ><input id ="number" type ="number" name="number" />

</ div >

Qui possono essere utili gli attributi

min, max e step.

20

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

NUOVI TIPI DI INPUT: RANGE

� HTML5 � FORM

07-00-26

<div ><label for =" range " >Un intervallo </ label ><input id ="range" type ="range" name="range" />

</ div >

Qui possono essere utili gli attributi

min, max e step.

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

NUOVI TIPI DI INPUT: DATE

� HTML5 � FORM

07-00-26

<div ><label for ="date" >Una data </ label ><input id ="date" type ="date" name="date" />

</ div >

21

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

NUOVI TIPI DI INPUT: TIME

� HTML5 � FORM

07-00-26

<div ><label for =" time " >Un orario </ label ><input id ="time" type ="time" name="time" />

</ div >

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

NUOVI TIPI DI INPUT: COLOR

� HTML5 � FORM

07-00-26

<div ><label for ="color" >Un colore </ label ><input id ="color" type ="color" name="color" />

</ div >

22

CC BY


ESERCIZIO

ESERCIZIO

ESERCIZIO

ESERCIZIO

FIELDSET E LEGEND

� HTML5 � FORM

07-00-27

<fieldset ><legend >Dati anagrafici </ legend ><div >

<label for ="nome" >Nome</ label ><input id =" nome" type ="text" name=" nome" />

</ div ><div >

<label for ="cognome" >Cognome</ label ><input id =" cognome" type ="text" name=" cognome" />

</ div ><div >

<label for =" dataN " >Data di Nascita </ label ><input id =" dataN " type ="date" name=" dataN " />

</ div ></ fieldset >

<fieldset ><legend >Carta di credito </ legend ><div >

<label for ="numero" >Numero</ label ><input id =" numero " type ="text" name=" numero " />

</ div ><div >

<label for =" dataS " >Data di Scadenza </ label ><input id =" dataS " type ="date" name=" dataS " />

</ div ><div >

<label for =" csv " >Numero CSV</ label ><input id =" csv " type ="text" name=" csv " />

</ div ></ fieldset >

Per raggruppare

esteticamente più controlli

sotto un’unica etichetta

possiamo usare gli elementi

fieldset e legend.

Per raggruppare




fieldset e legend.

Per raggruppare




fieldset e legend.

CC BY


HIDDEN

� HTML5 � FORM

Presentiamo infine il controllo necessario ad aggiungere

ai dati inseriti dall’utente, eventuali dati inseriti dal programmatore.





<form ><input type ="hidden" name=" autore " value ="Alessandro Ursomando " />

</ form >

HTML - Parte 22 CC BY DIAPOSITIVA 3 ALESSANDRO URSOMANDO HEADER HTML5 ELEMENTI ELEMENTI CONTENITORI ...

Documents

Transcript of HTML - Parte 22 CC BY DIAPOSITIVA 3 ALESSANDRO URSOMANDO HEADER HTML5 ELEMENTI ELEMENTI CONTENITORI ...