HTML Sintassi di HTML Tag principali per i contenuti I Forms

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "HTML Sintassi di HTML Tag principali per i contenuti I Forms"

Aureliano Morelli
5 anni fa
Visualizzazioni

1 Lezione 1

2 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms

3 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!!!

4 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>

5 <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

6 <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;

7 <HTML> <HEAD> <! informazioni di intestazione > </HEAD> <BODY> <! contenuto della pagina > </BODY> </HTML>

8 <TITLE> </TITLE> Contiene il titolo della pagina, che è possibile visualizzare sulla barra dei titoli, o nel nome della scheda, del browser;

9 <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;

10 <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.$ per inserire un immagine all interno del

11 <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;

12 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)

13 <HTML> <HEAD><TITLE>Esercizio 1</TITLE></HEAD> <BODY> Hello World! </BODY> </HTML>

14 <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>

15 <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

17 Creare una pagina HTML contenente una tabella con vostri nome, cognome, corso di laurea; (15 minuti)

18 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;

19 <FORM ACTION= richiesta.php METHOD= GET > controlli </FORM> oppure <FORM ACTION= richiesta.php METHOD= POST > controlli </FORM>

20 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;

21 <INPUT TYPE= text NAME= VALUE= ></INPUT> Permette al visitatore di inserire del testo, su una sola, riga;

22 <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!!!

23 <TEXTAREA NAME= > </TEXTAREA> Permette al visitatore di inserire del testo, su una o più, p righe;

24 <INPUTTYPE= CHECKBOX NAME= >Scelta</INPUT> Mostra a schermo una casella quadrata, che può essere spuntabile o meno;

25 <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!!

26 <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;

27 <INPUTTYPE= BUTTON NAME= VALUE= ></INPUT> Mostra un pulsante, al quale può essere associato un evento;

28 <INPUTTYPE= SUBMIT VALUE= Invia ></INPUT> Mostra un pulsante che invia i dati dei campi del form alla pagina pg di destinazione;

29 <INPUTTYPE= RESET VALUE= Cancella ></INPUT> Visualizza un pulsante che, se premuto, ripristina ai valori iniziali tutti i controlli del form.

30 <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>

31 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)

32 <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>

Documenti analoghi

HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto

HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione