MODULO 7 HTML MODULO 6 - HTML 1 HTML HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali Un sistema ipertestuale è un insieme di nodi connessi da collegamenti. A differenza di un libro, possiede una organizzazione non lineare. Un sistema ipermediale è un insieme di informazioni di diversi media: testo, immagini, musica, filmati MODULO 6 - HTML 2 1
Ipertesto MODULO 6 - HTML 3 Client-Server 1. Creazione documento in HTML 2. Upload su un WebServer (salvataggio del documento in una cartella raggiungibile via http dall esterno) 3. Richiesta di visualizzazione da parte di un client (http://www.servername.org/pagina.htm) 4. Il server risponde al client inviando il file html 5. Il client visualizza il file attraverso un browser MODULO 6 - HTML 4 2
Trasferimento HTML WebServer Request Client (browser) http://www.servername.com/page.html Response page.html MODULO 6 - HTML 5 TAG Ogni documento è rappresentato da una serie di tag che definiscono la funzione dell'elemento in esso contenuto Interpretando i tag un browser può visualizzare gli elementi del documento in diversi modi Sintassi dei tag: <nometag listaattributi> elemento contenuto </nometag> Esempio <font face= Arial color= #FF0000 > testo </font> I tag possono essere annidati <html> <body> </body> </html> MODULO 6 - HTML 6 3
INTESTAZIONE <HTML> inizio e fine del file descrizioni varie; come il titolo e i Meta Name <TITLE> nome del documento corpo del file MODULO 6 - HTML 7 Esempio - Prima pagina <HTML> <TITLE> Prima pagina </TITLE> Ciao attutti. MODULO 6 - HTML 8 4
Testo <H1>,<H2>,,<H6> titoli di diverse misure ed importanza <DIV> divisioni, porzioni di testo <B> bold (grassetto) <I> italic (italico) <U> underline (sottolineato) <PRE> preformattato <FONT> tipo di carattere FACE tipo: Arial, Helvetica, Times New Roman SIZE dimensione COLOR colore MODULO 6 - HTML 9 Immagini <IMG> SRC nome del file immagine HEIGHT altezza WIDTH larghezza HSPACE distanza orizzontale tra immagine e testo VSPACE distanza verticale tra immagine e testo ALIGN allineamento right, left, absmiddle,... ALT testo alternativo BORDER spessore del bordo MODULO 6 - HTML 10 5
Paragrafi e liste <P> definizione di paragrafo interruzione di riga <HR> linea orizzontale <UL> lista puntata <OL> lista numerata <LI> elementi di una lista MODULO 6 - HTML 11 Caratteri speciali Per inserire caratteri speciali, si usa la notazione coi simboli & e ; Codice Carattere à à è è > > < < MODULO 6 - HTML 12 6
Colori Definizione dei colori: #RRGGBB RR: quantità di rosso da 00 a FF GG: quantità di verde da 00 a FF BB: quantità di blu da 00 a FF Esempi: #FF0000 rosso pieno #0000FF blu pieno #000000 nero #FFFFFF bianco MODULO 6 - HTML 13 Tabelle <TABLE> definizione tabella BORDER dimensione del bordo CELLSPACING spazio tra le celle CELLPADDING spazio tra testo e bordo WIDTH larghezza <TR> riga ALIGN allineamento <TD> dato ALIGN allineamento ROWSPAN righe da occupare COLSPAN colonne da occupare WIDTH larghezza MODULO 6 - HTML 14 7
Link <A> NAME definizione di un ancora nel file HREF link ad un file (es. nomefile#nomeancora) TARGET destinazione Esempio <A HREF= http://www.w3c.org > clicka qui </A> MODULO 6 - HTML 15 Frame I frame permettono di divedere la finestra in sezioni <FRAMESET> documento a frame ROWS altezza delle righe COLS larghezza delle colonne BORDER = Yes No presenza bordo <FRAME> singolo frame NAME nome per identificarlo SRC documento da visualizzare I targetr dei link fanno riferimento al nome di un frame oppure a _blank (nuova), _parent (finestra parente),... MODULO 6 - HTML 16 8
Form (1) Per ottenere delle informazioni dall utente (cioè dal client verso il server) si ricorre ai moduli realizzati mediante FORM. <FORM> ACTION URL per la gestione del modulo METHOD = GET POST tipo di invio delle informazioni <INPUT> campo d immissione TYPE tipo TEXT PASSWORD CHECKBOX RADIO IMAGE HIDDEN SUBMIT RESET NAME nome identificatore VALUE valore contenuto nel campo MAXLENGTH lunghezza massima di caratteri MODULO 6 - HTML 17 Form (2) <SELECT> elenco di opzioni NAME nome identificativo MULTIPLE selezione multipla <OPTION> ogni singola opzione VALUE valore SELECTED opzione di default <TEXTAREA> finestra d immissione ROWS numero righe COLS numero colonne NAME nome identificativo MODULO 6 - HTML 18 9
Altro <CENTER> <MAP> <AREA> BGCOLOR, TEXT LINK, VLINK, ALINK BACKGROUND MODULO 6 - HTML 19 <HTML> es01.html <TITLE> Esempio 01 - Prima pagina </TITLE> Ciao attutti MODULO 6 - HTML 20 10
<HTML> <TITLE> Esempio 02 - Testo </TITLE> es02.html <H1>LABORATORIO ECDL</H1> <H2>Modulo 5 - HTML</H2> <H3>Testo</H3> <B>scritta in grassetto</b> <I>scritta in italico</i> <U>scritta sottolineata</u> <FONT FACE="Arial" SIZE="5" COLOR="#FF0000">prova di font</font> <FONT FACE="Times New Roman" SIZE="4" COLOR="#00FF00">prova di font</font> MODULO 6 - HTML 21 <HTML> <TITLE> Esempio 03 - immagini </TITLE> es03.html <CENTER> <B> IMMAGINI </B> </CENTER> <IMG SRC="palla.png"> palla.png <HR> <IMG SRC="palla.png" BORDER="2"> palla.png con bordo <HR> <IMG SRC="palla.png" WIDTH="150" HEIGHT="50"> palla.png ridimensionata <HR> <IMG SRC="palla.png" HSPACE="40"> palla.png con hspace=40 <HR> <IMG SRC="palla.png" ALIGN="absmiddle"> palla.png allineata verticalmente al centro con l'immagine <HR> MODULO 6 - HTML 22 11
<HTML> <TITLE> Esempio 04 - Paragrtafi e Liste </TITLE> <CENTER> <B> PARAGRAFI E LISTE </B> </CENTER> es04.html <P> paragrafo 1 paragrafo 1 paragrafo 1 paragrafo 1 </P> <P> paragrafo 2 paragrafo 2 paragrafo 2 paragrafo 2 </P> lista puntata (UL) <UL> <LI> aaa </LI> <LI> bbb </LI> <LI> ccc </LI> </UL> lista numerata (OL) <OL> <LI> primo </LI> <LI> secondo </LI> <LI> terzo </LI> </OL> MODULO 6 - HTML 23 <HTML> <TITLE> Esempio 05 - Colori </TITLE> <CENTER> <B> COLORI </B> </CENTER> es05.html <FONT COLOR="#000000"> nero </FONT> <FONT COLOR="#FF0000"> rosso </FONT> <FONT COLOR="#00FF00"> verde </FONT> <FONT COLOR="#0000FF"> blu </FONT> <FONT COLOR="#FFFF00"> giallo </FONT> <FONT COLOR="#FF00FF"> viola </FONT> <FONT COLOR="#00FFFF"> azzurro </FONT> <FONT COLOR="#000000"> sfumature di rosso </FONT> <FONT COLOR="#220000"> sfumature di rosso </FONT> <FONT COLOR="#440000"> sfumature di rosso </FONT> <FONT COLOR="#660000"> sfumature di rosso </FONT> <FONT COLOR="#880000"> sfumature di rosso </FONT> <FONT COLOR="#AA0000"> sfumature di rosso </FONT> <FONT COLOR="#DD0000"> sfumature di rosso </FONT> <FONT COLOR="#FF0000"> sfumature di rosso </FONT> <FONT COLOR="#000000"> sfumature di blu </FONT> <FONT COLOR="#000022"> sfumature di blu </FONT> <FONT COLOR="#000044"> sfumature di blu </FONT> <FONT COLOR="#000066"> sfumature di blu </FONT> <FONT COLOR="#000088"> sfumature di blu </FONT> <FONT COLOR="#0000AA"> sfumature di blu </FONT> <FONT COLOR="#0000DD"> sfumature di blu </FONT> <FONT COLOR="#0000FF"> sfumature di blu </FONT> MODULO 6 - HTML 24 12
<HTML> <TITLE> Esempio 06 - Tabelle </TITLE> <CENTER> <B> TABELLE </B> </CENTER> es06.html <TABLE BORDER=1> <TR> <TD> dato riga 1 colonna 1 </TD> <TD> dato riga 1 colonna 2 </TD> </TR> <TR> <TD> dato riga 2 colonna 1 </TD> <TD> dato riga 2 colonna 2 </TD> </TR> </TABLE> MODULO 6 - HTML 25 <HTML> <TITLE> Esempio 07 - Link </TITLE> <CENTER> <B> LINK </B> </CENTER> es07.html <A NAME="primo"> Inizio pagina <A NAME="secondo"> metà fine pagina <A HREF="#secondo"> torna in mezzo </A> <A HREF="#primo"> torna all'inizio </A> Visita il sito <A HREF="http://www.w3c.org">W3C</A> per ulteriori informazioni sull'html Se stai usando i frame prova <A HREF="http://www.w3c.org" TARGET="sopra">qui</A> l'utilizzo di TARGET. MODULO 6 - HTML 26 13
<HTML> <TITLE> Esempio 08 - Frame </TITLE> es08.html <FRAMESET ROWS="100,*"> <FRAME SRC="es05.html" NAME="sopra"> <FRAMESET COLS="200,*"> <FRAME SRC="es06.html" NAME="sinistra"> <FRAME SRC="es07.html" NAME="principale"> </FRAMESET> </FRAMESET> MODULO 6 - HTML 27 <HTML> <TITLE> Esempio 09 - Form </TITLE> <CENTER> <B> FORM </B> </CENTER> <FORM ACTION="check.php" METHOD="POST"> <B> LOGIN </B> login: <INPUT TYPE="TEXT" NAME="usr"> password: <INPUT TYPE="PASSWORD" NAME="pwd"> corso di laurea in: <SELECT NAME=""> <OPTION VALUE="ARC">architettura</OPTION> <OPTION VALUE="DIS" SELECTED>disegno industriale</option> <OPTION VALUE="ALT">altro</OPTION> </SELECT> <B> HOBBIES </B> <INPUT TYPE="CHECKBOX" NAME="cb1"> arte <INPUT TYPE="CHECKBOX" NAME="cb2"> sport <INPUT TYPE="CHECKBOX" NAME="cb3"> computer <INPUT TYPE="CHECKBOX" NAME="cb4"> lettura <B> COMMENTI </B> <TEXTAREA ROWS="10" COLS="20"> scrivi qui i tuoi commenti... </TEXTAREA> <B> INVIA </B> <SUBMIT> </FORM> es09.html MODULO 6 - HTML 28 14