HTMLslide html

Linguaggio HTML

HTML E’ UN LINGUAGGIO COMPOSTO DA MARCATURE

(markup) CHE PERMETTONO DI COSTRUIRE UNA PAGINA

Web CONTROLLANDO LA PRESENZA, LA DISPOSIZIONE E

L’ASPETTO DI TUTTO CIO’ CHE IN TALE PAGINA PUO’

COMPARIRE:

TESTO FORMATTATO

IMMAGINI

COLLEGAMENTI AD ALTRI DOCUMENTI

IMMAGINI DINAMICHE

VIDEO E SUONI

HTML (Hyper text Markup Language)

Utilizza istruzioni o marcatori detti Tag, per definire o marcare la struttura, l’impaginazione e la gestione di un testo

all’interno della pagina.

Una pagina in formato HTML è un file in formato ASCII contenente del testo e dei marcatori o tag che descrivono la

struttura del testo nella pagina.

<HTML>

<HEAD>

<TITLE>Primo esempio di pagina web</TITLE>

</HEAD>

<BODY>Qualcosa di divertente

</BODY>

</HTML>

marcatori

testo

- Per la scrittura si utilizza un semplice editor

(blocco note di windows) o Edit di MS-Dos

- Si salva il documento con un nome ed estensione html

Es. primo.html

SCRITTURA - ESECUZIONE DI UN DOCUMENTO HTML

Per passare dal testo HTML a quanto compare sul video

occorre un programma di visualizzazione detto

BROWSER

Tale programma legge in input i dati del file HTML e

produce in output sul video la visualizz. della pagina Web

I PROGRAMMI WEB EDITOR

facilitano la definizione e la progettazione di una Pagina Web.

I più diffusi : FrontPage (Microsoft)

Composer (Netscape)

DreamWeaver (Macromedia)

Adobe GoLive (Adobe)

Permettono di lavorare in modalità WYSIWYG

Si organizza in modo visuale la pagina Web agendo direttamente sugli

oggetti che la compongono, è possibile verificare immediatamente il

Risultato finale. Viene comunque prodotto un codice HTML.

La conoscenza del linguag. HTML resta comunque fondamentale

IL CONSORZIO W3C

Fondato nel 1994 dal MIT in collaborazione con il CERN

Definisce le regole e gli standard di utilizzo dell’ambiente WWW

e del linguaggio HTML

Effettua ricerche per sfruttare al massimo le potenzialità del

WWW sviluppando nuovi protocolli comuni.

Guida l’evoluzione tecnica producendo nuove specifiche tecniche

per l’usabilità del Web e per renderlo maggiormente affidabile

Struttura di un documento HTML

<HTML>

<HEAD>

…. Altri elementi dell’intestazione

<TITLE> titolo del documento</TITLE>

</HTML>

</HEAD>

<BODY>

….qui il contenuto del documento

</BODY>

intestazione

Corpo del documento Può contenere: ( per grandi categorie )

- titoli

- indirizzo

- Elementi che operano su paragrafi

- Elementi che operano direttamente sul testo

Compare nella barra superiore della finestra del browser

Tag di inizio

Tag di fine

<HTML>

<HEAD>

<TITLE>La prima pagina web del Sig. Rossi</TITLE>

<HEAD>

<BODY> <h1>Home page di Mario Rossi </h1>

Questa è la mia prima pagina in HTML

</BODY>

</HTML>

Esempio1.html

…un primo esempio di pagina HTML

ELEMENTI CHE OPERANO SUI PARAGRAFI

L’elemento <p>

Effetto visivo: ritorno a capo e riga vuota

- Richiede un tag di start

- Il tag di end può essere omesso

- Accetta l’attributo Align (default a sinistra)

L’elemento <br>

- Non ha un marcatore di chiusura

- Più tag <br> provocano spaziature verticali

Esempio4

Esempio5

Serve per suddividere il testo in paragrafi

Interrompe una riga e riprende il testo nella riga successiva

Attributi

Un attributo è una proprietà associata al Tag.

Permette di specificare una funzione aggiuntiva rispetto a quella di

base del tag. All’attributo deve essere assegnato un valore.

L’attributo e il suo valore associato deve essere indicato prima del

carattere “>” che chiude il tag iniziale.E’ possibile utilizzare più attributi

all’interno di Tag. Ogni tag ammette una lista di attributi e non altri

Es. <p align=center>Home page di Mario Rossi </p>

allineamento centrato del paragrafo :

Esempio di un attributo:

Es. <p align=Justify>Home page di Mario Rossi </p>

allineamento giustificato del paragrafo :

esempio

ATTIBUTO ALIGN

Permette di allineare il testo

(disposizione delle righe rispetto ai bordi della pagina)

Principali modalità di allineamento:

- left allineamento a sinistra

- right allineamento a destra

- center allineamanto centrato

- justify allineamento giustificato

Formati di Titolo e Attributi

Es. <h1>Home page di Mario Rossi </h1>

Il marcatore per codificare un titolo è del tipo <Hn>

<H1> livello più alto ( per marcare il titolo di un capitolo)

<H..> livelli intermedi (per marcare sottosezioni)

<H6> livello più basso (per piè di pagina)

Visualizza il testo col livello più altoTag di chiusura

Esempio2.htmlEsempio2.txt

Un titolo è l’elemento di un paragrafo che deve distinguersi dal testo

normale e deve risultare più evidente al lettore

Citazioni

E’ possibile inserire in un testo delle citazioni per riportare concetti

o brani di altri autori o per richiamare detti o espressioni famose.

TAG:

<q> quote citazioni breve tra apici

<cite> citation citazione breve in corsivo

<blockquote> blockquote citazione di un brano

esempio

Gli stili di carattere

I marcatori HTML per gli stili sono:• <I> testo in formato Italics, corsivo

• <B> testo in formato Bold, grassetto

• <U> testo sottolineato

• <S> barrato

• <EM> testo evidenziato; corsivo

• <STRONG> Testo evidenziato con maggiore enfasi; grassetto

• <BIG> testo ingrandito rispetto a quello normale

• <SMALL> testo rimpicciolito rispetto a quello normale

• <SUB> testo in formato di pedice

• <SUP> testo in formato di apice

• <SPAN> Delimitatore di un blocco di testo; fogli di stile esempio16

E’ possibile modificare l’aspetto dei caratteri di un testo

Elemento <FONT>

Accetta i seguenti attributi:

• color, fissa il colore del carattere es. color=red

• face, fissa il tipo di carattere es. face=arial

• size, fissa la dimensione del carattere

La dimensione può essere espressa in termini assoluti o relativi.

Nel primo caso si usa il marcatore: <font size=“n”>testo</font>

n è un numero compreso tra 1 e 7 es. <font size=“4>testo</font>

La dimensione normale del font è 3

Nel secondo caso si usa : <font size=+/- n>testo</font>

Esempio16.1

Permette di modificare il disegno del carattere (font)

http://esempio16.1.html/

Aqua (celestino) “#00FFFF”

Black “#000000”

Blue “#0000FF”

Fuchsia “#FF00FF”

Gray “#808080”

Green “#008000”

Red “#FF0000”

Silver (grigio chiaro) “#C0C0C0”

Teal “#008080”

White “#FFFFFF”

Yellow “#FFFF00”

Lime (verde chiaro) “#00FF00”

Maroon “#800080”

Navy (blu mare) “#000080”

Olive (verde oliva) “#808000”

Purple “#8000080”

COLORI

Attributi dell’elemento <BODY>

• Background=“file-grafico”, sfondo pagina (file gif o jpg) (esempio17)

• Bgcolor=colore, permette di assegnare un colore allo sfondo (esempio18)

• text=colore, colore del testo della pagina (esempio19)

• link=colore, colore dei link (esempio20)

• vlink=colore, colore dei link già attivati

• alink=colore, colore dei link mentre si attivano col mouse

Esclusivi

E’ POSSIBILE DEFINIRE IL COLORE DI SFONDO E DEL

TESTO PER L’INTERO CORPO DELLA PAGINA WEB :

Elemento <UL> unordered list (lista non numerata)

-richiede sia il tag di start che di end </UL>

- le voci della lista richiedono il marcatore <LI> (list item)

- il tag di end della voce di lista può essere omesso

- il tag <LI> o <LU> accetta uno dei seguenti attributi:

• se poniamo <LI type=disc> (per default)

se poniamo <LI type=square>

o se poniamo <LI type=circle>

esempio6 Esempio7

rappresenta un elenco ordinato di voci o liste

Elemento <OL> ordered list (lista numerata)

- Richiede sia il tag di start sia quello di end </OL>

- accetta l’attributo type (stile di numerazione)

- accetta l’attributo start (valore iniziale numerazione)

- per default lo stile è numerico,valore iniziale =1

Stili di numerazione di una lista numerata

Type Stile di numerazione1 Numeri 1,2,3,…

a Lettere minuscole a,b,c,…

A Lettere maiuscole A,B,C,..

i Numerazione Romana minuscola i,ii,iii,..

I Numerazione romana maiuscola I,II,III,…

Es. <OL type=a start=4> la numerazione inizia dalla quarta lettera dell’alfabeto, la d

Es. <LI type=i value=7> la numerazione inizia dal numero romano vii

Esempio8

Esempio9

Anche le voci di lista <LI> godono degli attributi type e value

Esempio10

Elemento <DL> (lista di definizione)

- richiede il tag di end </DL> (definition list)

- ogni voce della lista è marcata con <DT> (definition term)

- accetta uno o più definizioni marcate con <DD> (defin. Description)

Es. <DL>

<DT>Animali<DD<cane> <DD>gatto <DD>serpente

<DT>Piante<<DD>acero <<DD>palma <DD>pino

</DL>

esempio11

Ogni elemento è composto da due parti: una che indica il termine

da definire e una che indica il testo della definizione.

PRE, testo preformattato

Si utilizza il marcatore <PRE> quando è necessario che il testo non venga modificato nella sua formattazione, come ad esempio mantenere gli spazi nel testo

Esempio12 non formattato

Esempio13 con formattazione

Elemento HR, riga di separazione

accetta i seguenti attributi:

esempio14

Traccia delle righe per dividere il documento in sezioni

nome Valori ammessi descrizione

size = numero Spessore in pixel

width = numero

“N%”

Larghezza in pixel

Larghezza % rispetto alla pagina

align = left

= right

= center

Allineamento a sinistra

Allineamento a destra

Allineamento al centro

noshade presenta la linea in un solo colore;in assenza, bianca internamente e grigia la linea di contorno

Una tabella è composta da righe (elementi orizzontali) e colonne

(elementi verticali) :Riga 1

Colonna 1

Riga 1

Colonna 2

Riga 1

Colonna 3

Riga 1

Colonna 4

Riga 2

Colonna 1

Riga 2

Colonna 2

Riga 2

Colonna 3

Riga 2

Colonna 4

Riga 3

Colonna 1

Riga 3

Colonna 2

Riga 3

Colonna 3

Riga 3

Colonna 4

Elemento <Table>, tabella

PERMETTE DI PRESENTARE I DATI IN FORMA TABELLARE

(Organizzarli in modo ordinato inserendoli in una griglia)

L’intersezione di una riga con una colonna si chiama cella.

Ogni tabella deve avere almeno una riga e una colonna quindi una cella.

Le dimensioni di una tabella sono date dal numero di righe e di colonne;

una tabella 3x4 è formata da 3 righe e 4 colonne


Esempio20

NOME DESCRIZIONE

<TABLE> Definisce una tabella

TR (Table Row) Definisce una riga

TD (Table Data) Definisce i dati contenuti in una singola cella

TH (Table Heading) Definisce l’intestazione di una colonna

<TABLE>

<TR> <TH>Computer </TH> <TH>CPU </TH> </TR>

<TR> <TD>PC L-200 </TD> <TD>Pentium III 900Mhz </TD> </TR>

<TR> <TD>PC X-500 </TD> <TD>Pentium IV 1.5 Mhz </TD> </TR>

<TR> <TD>PC XE-1000 </TD> <TD>Pentium IV 2.0 Ghz </TD> </TR>

</TABLE>

Esempio

Esempio 20_1


Il formato di una tabella può essere modificato mediante gli attributi:NOME VALORI AMMESSI DESCRIZIONE

Border = N° di pixel Ampiezza del bordo, 0 senza bordo

Cellspacing = N° di pixel Spaziatura tra due celle consecutive

Cellpadding = N° di pixel Spazio in pixel tra il bordo della cella e il testo interno

Width = N° pixel

= N%

dimensione in larghezza della tabella nello schermo

Height = N° pixel

= N%

dimensione in altezza della tabella nello schermo

Align = Left, center, right allineamento della tabella

Bgcolor = Nome colore

= Numero colore

colore di sfondo della tabella

Bordercolor = Nome o numero colore Colore del bordo della tabella

Bordercolorlight

Bordercolordark

= Nome colore

= Numero colore

Colore lato sinistro e lato superiore

Colore lato destro e lato inferiore

es.21

es.22

es.23

es 23_1

es.23_2

es.23_3

es.26

es.26_2

es.26_3


Il formato di una cella può essere modificato mediante gli attributi:NOME VALORI AMMESSI DESCRIZIONE

Align = Left, center, right allineamento del testo di una cella della riga

Valign Top, middle, bottom allineamento verticale di una cella della riga

Nowrap non manda a capo il testo della cella

Width = N% dimensione in larghezza della cella

Height = N% dimensione in altezza della tabella nello schermo

Bgcolor = Nome colore

= Numero colore

colore di sfondo di una cella

Rowspan = N° fa sì che una cella sia alta n righe

Colspan = N° fa sì che una cella sia larga n colonne

TAG <Caption> Attributo Align = Top

Attributo Align = Bottom

Aggiunge dei titoli generali alla tabella

es.29

es.30

es.31

es.32

es.33

es.34

esempio35

es.31_1

esempio 35_1 esempio 35_2 ESEMPIO 35_3

NOME VALORI AMMESSI DESCRIZIONE

Src = URL – indica il file sorgente dell’immagine

Posizione del file

Alt = breve testo Testo alternativo alla figura

Align = top, middle, bottom Allineamento testo intorno all’immagine

Width = N° di pixel dimensione in larghezza

Height = N° di pixel dimensione in altezza

Hspace = N° di pixel Spazio vuoto orizzontale in pixel

lasciato intorno all’immagine

Vspace = N° di pixel Spazio vuoto verticale in pixel

lasciato intorno all’immagine

Border = N° di pixel Larghezza del bordo

Elemento IMG (Immagine)

Introduce un’immagine nel documentoAccetta i seguenti attributi:

esempio

esempio

esempio

esempio

esempio

esempio

esempio

esempio

Esempio tabella

Collegamenti ipertestuali in HTML

Gli Hyperlink o Link rappresentano il cuore delle pagine web

Grazie a questi è possibile spostarsi:

- all’ interno di una pagina

- da una pagina all’altra

- da un sito all’altro

E’ possibile collegare un testo, un’immagine, un file, un’applicazione ecc.

Nel Web , un collegamento ipertestuale è il meccanismo impiegato

per trasferire la lettura dell’utente da un punto di partenza a un altro

di arrivo.

Elemento A (Anchor)


Href = collegamento ipertestuale

URL

Indirizzo completo dove risiede la risorsa da collegare

Name = stringa di carattere Nome del punto di arrivo

Prevede i seguenti attributi:

Gli URL possono essere:

•Assoluti , quando definiscono l’indirizzo completo di una risorsa con la

seguente sintassi generale, i cui elementi non sono sempre tutti presenti

Protocollo//NomeDominioSitoWeb/Percorso/NomeFile/#NomeAncora

•Relativi , se descrivono la destinazione del collegamento relativamente alla

posizione corrente della pagina sorgente sul server

I Link interni

Un link interno è un collegamento ad una determinata posizione

dello stesso documento HTML.

I link interni si definiscono nel seguente modo:

<A HREF=“#nome_riferimento”>stringa</A>

Il nome dovrà essere definito all’interno dello stesso documento

con l’attributo NAME o ID: <A NAME=“nome_riferimento”>

<A HREF=“#calciatori”>I miei calciatori preferiti</A>

<A NAME=“calciatori”> </A

Nome del riferimentoriferimento

esempio

I Link esterni

I link esterni sono collegamenti ad altri documenti HTML o oggetti

multimediali (immagini, suoni, animazioni).

I link esterni si definiscono nel seguente modo:

<A HREF=“URL”>descrizione</A>

dove:

• URL identifica univocamente un file all’interno della rete;

• descrizione fornisce informazioni sul file

I Link esterni

Collegamento ad una pagina (stessa cartella pagina corrente) esempio

Collegamento ad una pagina (sottocartella cartella pagina corrente) esempio

esempioCollegamento ad una pagina (diversa cartella pagina corrente)

Collegamento ad una IMMAGINE esempio

esempioCollegamento ad una pagina su un altro sito

Collegamento ad un file esempio

I Frame

Permettono di suddividere una pagina Web in diversi riquadri

Ciascuna area in cui è suddivisa la pagina può visualizzare un diverso file HTML.

Ogni pagina può contenere un numero illimitato di frame, ma è buona norma non utilizzarne più di tre o quattro.

vantaggi

•Presentazione di più pagine in una sola videata (maggior numero di informazioni)

•Disposizione delle informazioni in modo ordinato (più facilità di consultazione)

Ogni pagina inserita in un frame può contenere tutti gli elementi

già descritti in precedenza (tag di fomattazione, tabelle, liste ecc.)

Elemento <Frameset>

È il tag che descrive il singolo frame presente nella pagina

Non richiede il Tag di chiusura

Elemento <Frame>

È il tag iniziale che descrive i frame presenti nella pagina

Quando la lista dei frame termina, s’inserisce il tag finale </Frameset>

Sostituisce a tutti gli effetti il tag <Body>

Per realizzare una pagine con Frame occorre dapprima costruire le

pagine HTML che riempiranno i diversi frame e successivamente

definire i frame all’interno della pagina principale

Esempio di pagina con frame

Realizzazione di una pagina Web suddivisa verticalmente in 2 frame

1° documento - nome file: esempio50_pag1.html

<html>

<head>

<title>Esempio pagina 1</title>

</head>

<body>

<h1><font color=“red”>Documento 1</font></h1>

<p>Questo è il documento nr. 1 e sarà inserito nel primo frame</p>

</body>

</html>



2° documento – nome file: esempio50_pag2.html

<html>

<head>

<title>Esempio pagina 2</title>

</head>

<body>

<h1><font color=“blue”>Documento 2</font></h1>

<p>Questo è il documento nr. 2 e sarà inserito nel secondo frame</p>

</body>

</html>



Pagina principale

<html>

<head>

<title>Esempio pagina con Frame</title>

</head>

<frameset cols=“*,*”>

<frame src=“esempio50_pag1.html>

<frame src=“esempio50_pag2.html>

</frameset>

</html>

Visualizza esempio

Gli attributi di Frameset


Src URL Posizione del file

Cols = Nr. di pixel

= N %

= *

Ampiezza del frame in pixel

Ampiezza frame in %

Ampiezza automatica (parti uguali)

Rows = N° di pixel

= N %

= *

Ampiezza del frame in pixel

Altezza del frame in %

Altezza automatica (parti uguali)

esempioPagina con tre frame di dimensioni variabili

Pagina con 2 frame, primo 30% e il secondo la parte restante esempioPagina con 2 frame, il primo ha un’ampiezza pari alla parte lasciata libera dal

secondo che ha una ampiezza di 160 pixel esempioPagina con due frame orizzontali di uguale altezza esempio

Pagina con due frame orizzontali con il primo pari al 16% dell’ altezza totaleesempio

Gli attributi di Frame


Frameborder = 0

= 1

Senza bordo

Bordo richesto

MarginWidth = N° di pixel Larghezza del margine

MarginHeight = N° di pixel Altezza del margine

Scrolling = “yes”

= “no”

Presenza della barra di scorrimento

Assenza della barra di scorrimento

Name = “stringa” Nome del frame

Per una migliore impaginazione del contenuto è possibile anche definire dei margini vuoti

sia verticali sia orizzontali. esempio

L’attributo name viene utilizzato per identificare un frame e viene

definito al momento della definizione del Frame

Gli attributi di Frame

Il nome del frame diventa importante se utilizzato in associazione

con l’attributo Target del Tag <a…

Permette di caricare una pagina in un frame, il cui nome è specificato

dall’attributo target del tag <A..

Esempio:

<Frame src=“home.html” name=”corpo”>

<A href=“didattica.html” target=“corpo”><Didattica</a>

Assegna il nome corpo al frame

Effettua un link al file didattica

e lo carica nel frame corpo

Target = stringa

=_blank

=_top

=_parent

Carica nel frame specificato

Carica in nuova finestra

Carica nella finestra corrente

Carica in zona della finestra contenente il Frameset della pagina con link


Esempio

Frameset annidati

Per definire nella stessa pagina segmentazioni sia verticali che orizzontali

Si parla anche di annidamento dei Frameset

intestazione

corpo

Piè di pagina

menu

Si supponga di voler realizzare una pagina con la seguente struttura

Si definiscono i tre frame

orizzontali e quindi si divide

il secondo frame orizzontale

in due “sottoframe” verticali

Esempio 2

Esempio 1 Senza ancore

Collegamento a punti specifici del documento (ancore)

Elemento <FORM>, modulo

Sono dei contenitori di elementi HTML che

opportunamente organizzati e strutturati permettono

all’utente di interagire con il sistema.L’interazione tramite i form avviene attraverso due fasi:

• creazione del form con i suoi elementi e attributi per

l’acquisizione

• elaborazione dei dati sul client mediante programmi di

scripting oppure inviati ed elaborati da un programma di

script sul server.

Elemento <FORM>, modulo

<FORM [NAME=“Nomemodulo”] [ACTION=“URL_script”][METHOD=“GET | POST”]>

ElementiHTML

</FORM>

NAME specifica il nome simbolico del modulo

ACTION specifica l’indirizzo ipertestuale della pagina web script (pagina ASP,

pagina PHP, pagina JSP) a cui vengono spediti i dati registrati nel modulo.

Si può utilizzare un indirizzo di posta elettronica.

METHOD specifica il metodo GET oppure POST utilizzato per trasferire le

informazioni al programma sul server. Con GET i dati inviati sono aggiunti all’URL

dello script. (lunghezza max 255 carattere). Con POST i dati vengono inviati allo

script lato server come flusso separato (nessun limite nella quantità di informazioni)

ElementiHTML sono i possibili elementi di un form

I MODULI – Elemento INPUT

<INPUT TYPE=“TipoElemento” NAME=“NomeElemento” VALUE =“ValoreIniziale”>

• NAME rappresenta il nome che identifica l’elemento

• VALUE assegna un valore iniziale all’elemento

• TYPE specifica il tipo di elementoTipi dell’elemento INPUT

TEXT Campi di testo

PASSWORD Campo di testo invisibile

HIDDEN Campo nascosto

CHECKBOX Caselle di controllo del tipo si/no

RADIO Casella di scelta alternativa

BUTTON Pulsante

SUBMIT Invia il contenuto degli elementi del form al Server

IMAGE Come SUBMIT ma utilizza una immagine grafica

RESET riporta i valori di tutti i campi al loro valore iniziale

– Elemento INPUT -

Type= TEXT Campo di testo

E’ un elemento grafico in cui è possibile inserire valori di tipo stringa

<INPUT TYPE=“TEXT” NAME=‘NomeCampo’ SIZE=Larghezza VALUE=Valore MAXLENGHT=Lunghezza>

dove:

NAME nome al campo

SIZE dimensione del campo (per default 20) in caratteri

VALUE valore iniziale del campo

MAXLENGHT lunghezza max; se maggiore di SIZE attiva lo

scrolling

ESEMPIO


Type = CHECKBOX Caselle di controllo del tipo si/no

E’ un elemento grafico in cui è possibile inserire un’informazione

del tipo si/no, oppure la scelta fra più opzioni disponibili

<INPUT TYPE=“CHECKBOX” NAME=‘NomeCasella” [CHECKED]>

dove:

NAME nome del campo

CHECKED imposta a TRUE il valore del campo (default false)

ESEMPIO


Type = RADIO Casella di scelta alternativa

Permettono una selezione esclusiva di una sola casella all’interno di

un gruppo di caselle.

<INPUT TYPE=“RADIO” NAME=‘NomeCasella” [CHECKED]>

dove:

NAME nome della casella

CHECKED imposta a TRUE il valore della casella(default false)

ESEMPIO

• la casella scelta assume valore logico True, altrimenti false

• all’ interno del gruppo una casella può essere impostata CHECKED

• se più caselle di un gruppo vengono impostate a CHECKED verrà

selezionata solo quella relativa all’ultimo CHECKED


Type = BUTTON Pulsante

Elemento grafico a cui è possibile associare un programma di script.

Il programma viene eseguito se viene premuto il pulsante.

<INPUT TYPE=“BUTTON” NAME=‘nome” VALUE=“Etichetta”>

dove:

NAME nome del pulsante

VALUE imposta l’etichetta del pulsante

ESEMPIO

<INPUT TYPE=“BUTTON” NAME=‘puls1” VALUE=“ESEGUI”>

ESEGUIESEGUIVisualizzerà:

Ad esempio:

ESEMPIO

Senza evento

Con evento


Type= PASSWORD Campo di testo invisibile

E’ un elemento grafico in cui è possibile inserire valori di tipo stringa

non visibili sullo schermo poiché mascherati da caratteri *

<INPUT TYPE=“PASSWORD” NAME=‘NomeCampo’ SIZE=Larghezza VALUE=Valore MAXLENGHT=Lunghezza>

dove:

NAME nome al campo

SIZE dimensione del campo (per default 20) in caratteri

VALUE valore iniziale del campo

MAXLENGHT numero max di caratteri

ESEMPIO


Type= HIDDEN Campo di testo nascosto

E’ un elemento a cui è possibile assegnare un valore di tipo stringa

ma l’intero campo non è visibile nel form. Sono utiizzati per passare

informazioni agli script del documento o del Server.

<INPUT TYPE=“HIDDEN” NAME=‘NomeCampo’ SIZE=Larghezza VALUE=Valore MAXLENGHT=Lunghezza>

<BODY>

<FORM>

<INPUT TYPE="HIDDEN" NAME="UTENTE" VALUE="MICHELE">

</FORM>

</BODY>

ESEMPIO

L’esempio permette di passare il nome MICHELE agli script senza che il campo sia visualizzato

SUBMIT


Type = SUBMIT pulsante di invio dati

Particolare pulsante che permette, se premuto, di inviare il contenuto di

degli elementi del Form al Server dal quale ha ottenuto la pagina HTML

<INPUT TYPE=“SUBMIT” NAME=‘nome” VALUE=“Etichetta”>

dove:


VALUE imposta l’etichetta del pulsante

Esempio

SUBMIT


Type = IMAGE pulsante grafico di invio dati

Pulsante GRAFICO che permette, se premuto, di inviare il contenuto

degli elementi del Form al Server dal quale ha ottenuto la pagina HTML

<INPUT TYPE=“IMAGE” NAME=‘nome” SRC=“fileGrafico”>

dove:


SRC nome del file grafico

Esempio


Type = RESET reinizializza i campi ai valori iniziali

Pulsante che permette, se premuto, di riportare i valori di tutti

i campi del Form al valore iniziale (di default)

<INPUT TYPE=“RESET” VALUE=“annulla i dati immessi”>

dove:

VALUE etichetta del pulsante

Esempio

– Elemento TEXTAREA-

E’ un campo di testo che utilizza più righe, consentendo di immettere

più informazioni

<TEXTAREA NAME=“utente” ROWS= NumRighe COLS=NumColonne >

ContenutoDiDefault

</TEXTAREA>

dove:

NAME nome del campo

ROWS numero di righe

COLS numero di colonne

ContenutoDiDefault testo di default

ESEMPIO

– Elemento SELECT -

Visualizza un menù di voci (pop-down) da cui è possibile

effettuare una selezione

<SELECT NAME=‘NomeSelect’ SIZE=NumeroRighe [MULTIPLE]>

<OPTION VALUE=Nome1 [SELECTED]>Stringa1

<OPTION VALUE=Nome2 [SELECTED]>Stringa2

<OPTION VALUE=NomeN [SELECTED]>StringaN

</SELECT>

dove:

SIZE numero di righe della lista

MULTIPLE possibilità di scelta multipla

OPTION permette di definire i singoli elementi della lista

VALUE valore da restituire per l’elemento selezionato

SELECTED identifica il valore di default

ESEMPIO

Formattazione di un FORM

Elemento FIELDSET

PERMETTE DI RAGGRUPPARE UN GRUPPO DI ELEMENTI

DI UN FORM IN UNA CORNICE

Esempio: < FIELDSET>

<LEGEND>Etichetta della cornice</LEGEND>

<!– Elemento del form da raggruppare -- >

<FIELDSET>

Elemento LEGEND

DEFINISCE L’ETICHETTA DELLA CORNICE

Esempio

I n d i r i z z o

È contenuto nel tag <Address>

Racchiude tutte le informazioni sull’autore del documento

Es. <ADDRESS>

Vito Pepe<br>

Via Roma, 10<br>

70022 altamura (BA)<br>

Tel: 080/3141414<br>

</ADDRESS>

Esempio3.html

esempio15

Elemento <DIV>, divisioni interne

Questo esempio permette l’allineamento rispetto ai margini

di più elementi contemporaneamente.

- richiede il tag di end </DIV>

Specifica le caratteristiche comuni di più elementi

all’ interno di un contenitore strutturale.

HTMLslide html

Documents

Transcript of HTMLslide html