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)
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
Elemento <Table>, tabella
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
Elemento <Table>, tabella
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
Elemento <Table>, tabella
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)
NOME VALORI AMMESSI DESCRIZIONE
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>
Esempio di pagina con frame
Realizzazione di una pagina Web suddivisa verticalmente in 2 frame
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>
Esempio di pagina con frame
Realizzazione di una pagina Web suddivisa verticalmente in 2 frame
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
NOME VALORI AMMESSI DESCRIZIONE
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
NOME VALORI AMMESSI DESCRIZIONE
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
NOME VALORI AMMESSI DESCRIZIONE
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
– Elemento INPUT -
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
– Elemento INPUT -
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
– Elemento INPUT -
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
– Elemento INPUT -
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
– Elemento INPUT -
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
– Elemento INPUT -
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:
NAME nome del pulsante
VALUE imposta l’etichetta del pulsante
Esempio
SUBMIT
– Elemento INPUT -
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:
NAME nome del pulsante
SRC nome del file grafico
Esempio
– Elemento INPUT -
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.