Lezione 1
HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms
L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni attraverso il Web; È il linguaggio che rappresenta sullo schermo il documento multimediale, disponendo le immagini, i video, il testo, e i collegamenti ipertestuali; HTML NON E un linguaggio di programmazione!!!
L HTML fa uso di una sintassi del tipo: <tag attributo1= valore1 attributo2= valore2 > contenuto </tag> caratterizzata da parentesi angolari, un tag e un elenco di attributi chiave/valore; Può essere di tipo gerarchico: <padre attributo1= valore1 > <figlio1 attributo2= valore2 > pippo </figlio1> <figlio2 attributo3= valore3 > pluto </figlio2> </padre> Prevede una chiusura ridotta : <tag attributo= valore /> = <tag attributo= valore ></tag>
<HTML> </HTML> Specifica al browser WEB che il documento è stato scritto in linguaggio gg HTML; <HEAD> </HEAD> </HEAD> Contiene tutte le informazioni relative all intestazione del documento, come titolo della pagina, descrizione per i motori di ricerca, lingua della pagina, ecc
<BODY> </BODY> Contiene il corpo della pagina, cioè tutte le informazioni visualizzate a schermo, come testo, paragrafi, tabelle, immagini, video, pulsanti, caselle di testo, ecc;
<HTML> <HEAD> <! informazioni di intestazione > </HEAD> <BODY> <! contenuto della pagina > </BODY> </HTML>
<TITLE> </TITLE> Contiene il titolo della pagina, che è possibile visualizzare sulla barra dei titoli, o nel nome della scheda, del browser;
<P> </P> Contiene un paragrafo di testo <H1> </H1> Contiene un testo formattato con dimensione molto grande. Esistono anche <H2>, <H3>, <H4>, <H5>, <H6> che hanno dimensioni via via inferiori;
<FONT FACE= Arial SIZE= 32pt > </FONT> Utilizzato per la formattazione del testo <B> </B>, </B> <I> </I>, </I> <U> </U> </U> Utilizzati rispettivamente per il testo in grassetto Utilizzati rispettivamente per il testo in grassetto (bold), corsivo (italic), sottolineato (underline)
<IMG SRC= cartella\logo.jpg WIDTH= 200px HEIGHT= 50px > E usato per inserire un immagine all interno del documento; <HR> Disegna una linea orizzontale; <BR> Ritorno a capo;
Creare una pagina pg HTML con la struttura base, che contiene il testo Hello World! (5 minuti) Creare una pagina HTML contenente un titolo correttamente formattato, un immagine, e un piccolo paragrafo di testo; (10 minuti)
<HTML> <HEAD><TITLE>Esercizio 1</TITLE></HEAD> <BODY> Hello World! </BODY> </HTML>
<HTML> <HEAD><TITLE>Esercizio 2</TITLE></HEAD> <BODY> <H1>Mia foto</h1><br> <IMG SRC= foto.jpg ><BR> t j <P>Questa è una delle mie foto preferite!</p> </BODY> </HTML>
<TABLE> <TR> <! prima riga > <TD>1</TD> <! 1 colonna > <TD>2</TD> <! 2 colonna > </TR> <! fine prima riga > <TR> <! seconda riga > <TD>3</TD> <! 1 colonna > <TD>4</TD> <! 2 colonna > </TR> <! fine seconda riga > </TABLE> Inserisce una tabella
1 2 3 4
Creare una pagina HTML contenente una tabella con vostri nome, cognome, corso di laurea; (15 minuti)
I FORMS vengono utilizzati per permettere al visitatore di immettere dei dati, operare delle scelte, caricare dei files, ecc all interno della pg pagina web; Sono il primo vero e proprio strumento utilizzato nella transazione da Web statico a Web dinamico;
<FORM ACTION= richiesta.php METHOD= GET > controlli </FORM> oppure <FORM ACTION= richiesta.php METHOD= POST > controlli </FORM>
Metodo GET Invia le informazione dei vari controlli del form utilizzato un concatenamento di valori nella barra degli indirizzi; lunghezza massima: 256 caratteri; Metodo POST utilizza l intestazione HTTP per trasportare i dati in maniera trasparente; nessuna restrizione a livello ll di protocollo;
<INPUT TYPE= text NAME= VALUE= ></INPUT> Permette al visitatore di inserire del testo, su una sola, riga;
<INPUT TYPE= password NAME= VALUE= ></INPUT> Permette al visitatore di inserire del il testo di una password, nascondendone il valore; NOTA: NON CIFRA IN ALCUN MODO I DATI!!!
<TEXTAREA NAME= > </TEXTAREA> Permette al visitatore di inserire del testo, su una o più, p righe;
<INPUTTYPE= CHECKBOX NAME= >Scelta</INPUT> Mostra a schermo una casella quadrata, che può essere spuntabile o meno;
<INPUT TYPE= RADIO NAME= VALUE= /> <INPUT TYPE= RADIO NAME= VALUE= /> <INPUT TYPE= RADIO NAME= VALUE= /> Mostra a schermo una serie di scelte, tra le quali permette la selezioni di solo una. Nota: per far capire al browser i Nota: per far capire al browser i raggruppamenti, i controlli devono avere tutti lo stesso NAME!!
<SELECT NAME= > <OPTIONVALUE= 1 >1..</OPTION> <OPTIONVALUE= 2 >2..</OPTION> </SELECT> Consente al visitatore di operare delle di tipo esclusivo, ovvero di scegliere solo una tra le possibili scelte;
<INPUTTYPE= BUTTON NAME= VALUE= ></INPUT> Mostra un pulsante, al quale può essere associato un evento;
<INPUTTYPE= SUBMIT VALUE= Invia ></INPUT> Mostra un pulsante che invia i dati dei campi del form alla pagina pg di destinazione;
<INPUTTYPE= RESET VALUE= Cancella ></INPUT> Visualizza un pulsante che, se premuto, ripristina ai valori iniziali tutti i controlli del form.
<HTML> <HEAD><TITLE>Inserimento dati</title></head> <BODY> <FORM ACTION= script.php METHOD= POST > <FIELDSET ><LEGEND>Inserisci dati</legend> Nome:<INPUTTYPE= TEXT NAME= nome ><BR> Cognome: <INPUT TYPE= TEXT NAME= cognome ><BR><BR> Sesso: <INPUT TYPE= radio NAME= sesso VALUE= m >Maschio</INPUT> <INPUT TYPE= radio NAME= sesso VALUE= f >Femmina</INPUT> <BR><BR> <INPUT TYPE= SUBMIT VALUE= Invia > <INPUT TYPE= RESET VALUE= Reset > </FIELDSET> </FORM> </BODY> </HTML>
Creare una pagina pg per l inserimento dei dati di una RUBRICA TELEFONICA, con : Nome Cognome Categoria (Amico, Lavoro, Scuola, ecc) Numero Tipo numero (casa, cellulare, fax, ecc) Ecc (10 minuti)
<HTML> <HEAD><TITLE>Esercizio Form</TITLE></HEAD> <BODY> <FORM> Nome:<INPUT TYPE= text NAME= nome ><BR> Cognome:<INPUT TYPE= text NAME= nome ><BR> Categoria: <INPUTTYPE= RADIO NAME= cat VALUE= amico >Amico</INPUT> <INPUTTYPE= RADIO NAME= cat VALUE= lavoro >Lavoro</INPUT> <INPUTTYPE= RADIO NAME= cat VALUE= scuola >Scuola</INPUT><BR> Numero:<INPUTTYPE= TYPE= text NAME= numero ><BR> Tipo numero: <INPUTTYPE= RADIO NAME= tipo VALUE= casa >Casa</INPUT> <INPUTTYPE= RADIO NAME= tipo VALUE= cell >Cellulare</INPUT> <INPUTTYPE= RADIO NAME= tipo VALUE= fax >Fax</INPUT><BR> <INPUTTYPE= SUBMIT VALUE= Invia > </FORM> </BODY> </HTML>