HTMLslide

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 <H n > <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ù alto Tag di chiusura Esempio2. html Esempio2. 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 > 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 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 Stile di numerazione Type I,II,III,… Numerazione romana maiuscola I i ,ii,iii,.. Numerazione Romana minuscola i A,B,C,.. Lettere maiuscole A a ,b,c,… Lettere minuscole a 1,2,3,… Numeri 1

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 presenta la linea in un solo colore;in assenza, bianca internamente e grigia la linea di contorno noshade Allineamento a sinistra Allineamento a destra Allineamento al centro = left = right = center align Larghezza in pixel Larghezza % rispetto alla pagina = numero “ N%” width Spessore in pixel = numero size descrizione Valori ammessi nome

Una tabella è composta da righe (elementi orizzontali) e colonne (elementi verticali) : 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 Riga 2 Colonna 4 Riga 2 Colonna 3 Riga 2 Colonna 2 Riga 2 Colonna 1 Riga 3 Colonna 4 Riga 3 Colonna 3 Riga 3 Colonna 2 Riga 3 Colonna 1 Riga 1 Colonna 4 Riga 1 Colonna 3 Riga 1 Colonna 2 Riga 1 Colonna 1

Elemento <Table>, tabella Esempio20 <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 Definisce una tabella <TABLE> Definisce i dati contenuti in una singola cella TD (Table Data) Definisce una riga TR (Table Row) Definisce l’intestazione di una colonna TH (Table Heading) DESCRIZIONE NOME

Elemento <Table>, tabella Il formato di una tabella può essere modificato mediante gli attributi: es.21 es.22 es.23 es 23_1 es.23_2 es.23_3 es.26 es.26_2 es.26_3 Colore del bordo della tabella = Nome o numero colore Bordercolor allineamento della tabella = Left, center, right Align colore di sfondo della tabella = Nome colore = Numero colore Bgcolor Colore lato sinistro e lato superiore Colore lato destro e lato inferiore = Nome colore = Numero colore Bordercolorlight Bordercolordark dimensione in altezza della tabella nello schermo = N° pixel = N% Height dimensione in larghezza della tabella nello schermo = N° pixel = N% Width = N° di pixel = N° di pixel = N° di pixel VALORI AMMESSI Ampiezza del bordo, 0 senza bordo Border Spazio in pixel tra il bordo della cella e il testo interno Cellpadding Spaziatura tra due celle consecutive Cellspacing DESCRIZIONE NOME

Elemento <Table>, tabella Il formato di una cella può essere modificato mediante gli attributi: es.29 es.30 es.31 es.32 es.33 es.34 esempio35 es.31_1 e sempio 35_1 e sempio 35_2 ESEMPIO 35_3 fa sì che una cella sia larga n colonne = N° Colspan Aggiunge dei titoli generali alla tabella Attributo Align = Top Attributo Align = Bottom TAG < Caption> fa sì che una cella sia alta n righe = N° Rowspan colore di sfondo di una cella = Nome colore = Numero colore Bgcolor dimensione in altezza della tabella nello schermo = N% Height dimensione in larghezza della cella = N% Width Top, middle, bottom = Left, center, right VALORI AMMESSI allineamento del testo di una cella della riga Align non manda a capo il testo della cella Nowrap allineamento verticale di una cella della riga Valign DESCRIZIONE NOME

Elemento IMG (Immagine) Introduce un’immagine nel documento Accetta i seguenti attributi: esempio esempio esempio esempio esempio esempio esempio esempio Esempio tabella Allineamento testo intorno all’immagine = top, middle, bottom Align Larghezza del bordo = N° di pixel Border Spazio vuoto verticale in pixel lasciato intorno all’immagine = N° di pixel Vspace Spazio vuoto orizzontale in pixel lasciato intorno all’immagine = N° di pixel Hspace dimensione in altezza = N° di pixel Height dimensione in larghezza = N° di pixel Width = breve testo = URL – indica il file sorgente dell’immagine VALORI AMMESSI Posizione del file Src Testo alternativo alla figura Alt DESCRIZIONE NOME

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) 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 = stringa di carattere = collegamento ipertestuale URL VALORI AMMESSI Indirizzo completo dove risiede la risorsa da collegare Href Nome del punto di arrivo Name DESCRIZIONE NOME

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 riferimento riferimento 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 esempio Collegamento ad una pagina ( diversa cartella pagina corrente ) Collegamento ad una IMMAGINE esempio esempio Collegamento 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 esempio Pagina con tre frame di dimensioni variabili Pagina con 2 frame, primo 30% e il secondo la parte restante esempio Pagina con 2 frame, il primo ha un’ampiezza pari alla parte lasciata libera dal secondo che ha una ampiezza di 160 pixel esempio Pagina con due frame orizzontali di uguale altezza esempio Pagina con due frame orizzontali con il primo pari al 16% dell’ altezza totale esempio Posizione del file URL Src = N° di pixel = N % = * = Nr. di pixel = N % = * VALORI AMMESSI Ampiezza del frame in pixel Ampiezza frame in % Ampiezza automatica (parti uguali) Cols Ampiezza del frame in pixel Altezza del frame in % Altezza automatica (parti uguali) Rows DESCRIZIONE NOME

Gli attributi di 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 Nome del frame = “stringa” Name Altezza del margine = N° di pixel MarginHeight Presenza della barra di scorrimento Assenza della barra di scorrimento = “yes” = “no” Scrolling Larghezza del margine = N° di pixel MarginWidth = 0 = 1 VALORI AMMESSI Senza bordo Bordo richesto Frameborder DESCRIZIONE NOME

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 Esempio Carica nel frame specificato Carica in nuova finestra Carica nella finestra corrente Carica in zona della finestra contenente il Frameset della pagina con link = stringa =_blank =_top =_parent Target DESCRIZIONE VALORI AMMESSI NOME

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” ]> Elementi HTML </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 elemento Tipi 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”> ESEGUI Visualizzerà: 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.

HTMLslide

More Related Content

What's hot

Viewers also liked

Similar to HTMLslide

HTMLslide