HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>..."

Carmelo Graziani
8 anni fa
Visualizzazioni

1 HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... </HTML> <HEAD>... </HEAD> <BODY>... </BODY>

2 Struttura di un documento HTML Questi TAG sono alla base della struttura ad albero di un documento HTML: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> L elemento HTML L elemento HTML identifica il documento come un ipertesto HTML. Esso racchiude tutto il documento: <HTML> contenuto del documento </HTML>

elemento HTML L elemento HTML identifica il documento come un ipertesto

3 L elemento HEAD L elemento HEAD comprende una serie di informazioni riguardanti il documento, ad esempio il titolo che dovrà essere visualizzato sulla barra del titolo del browser: <HEAD> <TITLE> La mia prima pagina WEB </TITLE> </HEAD> L elemento HEAD oppure per inserire nella pagina delle parole chiave (keywords) che servono per farsi rintracciare dai motori di ricerca o altri metadati (informazioni sulla pagina stessa): <HEAD> <META name="autore" lang="it,en" content= nomeautore"> <META name= keywords" content= giochi, musica"> </HEAD>

inserire nella pagina delle parole chiave (keywords) che servono per farsi rintracciare dai motori di ricerca o altri metadati

4 L elemento HEAD Altri elementi che possono trovarsi inclusi tra i tag HEAD sono: <BASE>: indica l'indirizzo di base a cui fanno riferimento tutti gli indirizzi contenuti nella pagina; <LINK>: consente di creare dei collegamenti predefiniti ad altre pagine L elemento BODY Tutto ciò che è racchiuso tra i tag <BODY> e </BODY> definisce ciò che verrà visualizzato quando il client scarica la pagina. Proviamo a digitare il seguente codice HTML: <HTML> <HEAD> <TITLE> Pagina di prova </TITLE> </HEAD> <BODY> Ciao a tutti </BODY> </HTML>

elemento BODY Tutto ciò che è racchiuso tra i tag <BODY> e </BODY> definisce ciò che verrà visualizzato quando il client scarica la

5 Attributi dell elemento BODY Per utilizzare l immagine Sfondo.gif come sfondo: <BODY BACKGROUND= Sfondo.gif > Per definire il colore dello sfondo: <BODY BGCOLOR= #RRGGBB > Per attribuire un colore ai link ipertestuali: <BODY LINK= #RRGGBB > Per attribuire un colore ai link attivati: <BODY ALINK= #RRGGBB > Per attribuire un colore ai link ipertestuali: <BODY LINK= #RRGGBB > Formattazione del testo <I> Testo </I> Testo <B> Testo </B> Testo <U> Testo </U> Testo <Q> Testo </Q> Testo <S> Testo </S> Testo <I><B><U> Testo </U></B></I> Testo <FONT SIZE= 32 FACE= Times New Roman COLOR="#0066FF"> Testo </FONT> Testo

un colore ai link attivati: <BODY ALINK= #RRGGBB > Per attribuire un colore ai link ipertestuali: <BODY LINK= #RRGGBB > Formattazione del testo <I> Testo

6 Formattazione del testo I tag <P> </P> delimitano un paragrafo. L allineamento è definito dall attributo ALIGN. L andare a capo nel testo contenuto tra i due tag è determinato dalla larghezza della finestra del browser e dal tipo di allineamento scelto. Per forzare l interruzione di una linea si può usare il comando <BR>. <P ALIGN= CENTER > Primo paragrafo </P> <P ALIGN= LEFT > Secondo<BR>Paragrafo </P> <P ALIGN= RIGHT > Terzo Paragrafo </P> Creazione di una tabella Una tabella è racchiusa entro i tag <TABLE> </TABLE>, le righe tra i tag <TR> </TR> e le colonne tra i tag <TD> </TD>: <TABLE ALIGN= CENTER BORDER= 2 > <TR> <TD ALIGN= RIGHT >riga1,colonna1</td> <TD HEIGHT= 5% > riga1,colonna2 </TD> </TR> <TR> <TD VALIGN= TOP > riga2,colonna1 </TD> <TD WIDTH= 20 > riga2,colonna2 </TD> </TR> </TABLE>

Per forzare l interruzione di una linea si può usare il comando <BR>.

7 Collegamenti tra pagine I punti di collegamento sono definiti entro i tag <A> </A>. L attributo HREF specifica il documento e la posizione a cui la stringa contenuta tra i tag rimanda. L attributo NAME dà un etichetta alla posizione del documento in cui è posizionata la coppia di tag <A> </A>.Consideriamo i seguenti esempi: <A HREF= \pippo.htm > Clicca qui </A> <A HREF= \pippo.htm#pos > Clicca qui </A> <A NAME= pos > </A> Inserimento di un immagine L elemento che inserisce un immagine in una pagina HTML è IMG. Tale istruzione dispone di diversi attributi, tra i quali: SRC (è obbligatorio ed indica il percorso ed il nome del file da visualizzare) ALT (indica cosa visualizzare al posto dell immagine se questa non viene caricato per qualche errore) ALIGN (indica come disporre l immagine nel documento) <IMG SRC= c:\cart1\a.bmp ALT= Nome immagine ALIGN= CENTER >

htm#pos > Clicca qui </A> <A NAME= pos > </A> Inserimento di un immagine L elemento che inserisce un immagine in una pagina HTML è IMG.

8 Inserimento di FORM Una form è definita entro i tag<form> </FORM> e consiste in un insieme di controlli (caselle di testo, combo-box, list-box, pulsanti, ecc.) che rendono interattiva la pagina HTML. Il nome e la posizione dell applicazione (ad esempio una ASP) che si occupa dell elaborazione dei dati inseriti nei controlli dall utente viene specificata nell'attributo ACTION. La modalità con cui tali dati vengono trasferiti all applicazione è definita dall'attributo METHOD. Se a METHOD è assegnato il valore GET i dati vengono trasferiti come stringhe accodate all indirizzo dell applicazione invocata. Se a METHOD è assegnato il valore POST all applicazione viene passata l area dati del modulo in modo trasparente. I controlli attivi di una FORM Quasi tutti i controlli attivi di una FORM sono realizzati tramite il tag <INPUT>. Il tipo di controllo è determinato dall attributo TYPE che può assumere uno dei seguenti valori: TEXT: casella di testo di una riga PASSWORD: casella di testo dove i caratteri inseriti vengono mascherati da asterischi FILE: casella di testo in cui inserire un file BUTTON : pulsante di invio RESET: pulsante che ripulisce i controlli della form SUBMIT: pulsante di invio dei dati al server IMAGE: per inserire un'immagine al posto del tasto

La modalità con cui tali dati vengono trasferiti all applicazione è definita dall'attributo METHOD.

9 I controlli attivi di una FORM Quasi tutti i controlli attivi di una FORM sono realizzati tramite il tag <INPUT>. Il tipo di controllo è determinato dall attributo TYPE che può assumere uno dei seguenti valori: CHECKBOX: casella da spuntare RADIO: simile a CHECKBOX, con la differenza che se ce ne sono una serie con lo stesso nome, non è possibile selezionare più di una casella HIDDEN: per creare dei dati non visibili dall'utente Ad ogni controllo è associata una variabile il cui nome è il valore dell attributo NAME. Il controllo SELECT L elemento SELECT crea una lista di opzioni definite dal tag <OPTION>. I suoi attributi principali sono: SIZE: numero di voci da visualizzare NAME: nome della variabile associata MULTIPLE: se attivato consente la selezione di più voci ESEMPIO: <SELECT NAME= sel" MULTIPLE SIZE="1"> <OPTION SELECTED>Programmi</OPTION> <OPTION >Giochi</OPTION> <OPTION >Utilità</OPTION> </SELECT>

con lo stesso nome, non è possibile selezionare più di una casella HIDDEN: per creare dei dati non visibili dall'utente Ad ogni controllo è associata una variabile il cui nome è il valore dell

10 Esempio di FORM La seguente form è composta da due caselle di testo (in cui l utente immette il proprio nome e la propria età) e da due pulsanti, con i quali può avviare la richiesta o ripulire le caselle di testo: <FORM ACTION= appl.asp METHOD= GET > Nome:<INPUT TYPE= TEXT NAME= nome ><BR> Città:<SELECT NAME= citta SIZE= 1 > <OPTION> Reggio </OPTION> <OPTION> Cosenza </OPTION> </SELECT> <INPUT TYPE= SUBMIT VALUE= Invio > <INPUT TYPE= RESET VALUE= Reimposta > </FORM>

appl.asp METHOD= GET > Nome:<INPUT TYPE= TEXT NAME= nome ><BR> Città:<SELECT NAME= citta SIZE= 1 > <OPTION> Reggio

Documenti analoghi

Metodologie Informatiche Applicate al Turismo

Metodologie Informatiche Applicate al Turismo 9. HTML Parte II Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Scienze