2. 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)
3. 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
4.
5. 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
6. 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
7.
8. <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
9.
10. 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
11.
12. 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
13. 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
14.
15.
16.
17.
18.
19.
20.
21. 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
22. 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
23. 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
24. 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
25. 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
26. 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
27. 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
28.
29.
30. 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
31.
32. 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
33.
34. 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
35. 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>
36. 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>
37. 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
38. 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
39. 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
40. 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
41. 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)
42.
43. 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
44.
45. – 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
46. – 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
47.
48. – 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
49. – 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
50. – 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
51. 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
52. 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
53. – 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
54. – 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
55. – 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
56. 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
57. 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
58. 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.
