PROGETTO… Internet Providers, registrazione del dominio Costruire una home page … e renderla visibile sul Web
HTML: i tag In un file HTML contiene indicazioni per il browser (che interpreta il linguaggio HTML ) sotto forma di tag: testo NB: HTML non è case-sensitive NB: Struttura di un documento HTML: inizio del file HTML fine del file HTML intestazione contenuto della pagina spesso funziona anche senza virgolette, ma è meglio metterle sempre!
HTML: l'intestazione L'intestazione di un file HTML può contenere vari tag; i principali sono: Master in Editoria Multimediale
HTML: l'intestazione Master in Editoria Multimediale titolo della finestra
HTML: l'intestazione Comunica al browser il set di caratteri usato Descrivono le parole-chiave e il contenuto della pagina (vengono generalmente usate dai motori di ricerca) NB: spesso il tag META non è chiuso (ma funziona lo stesso!)
HTML: il tag BODY All'interno del tag BODY si trova il documento vero e proprio (il contenuto della pagina Web) Gli attributi del tag BODY : <BODY BGCOLOR = colore dello sfondo BACKGROUND = immagine di sfondo TEXT = colore del testo LINK = colore dei link VLINK = colore dei link vistitati ALINK = colore dei link attivi >...
HTML: il tag BODY
HTML: il tag BODY
HTML: la codifica dei colori Ogni colore può essere rappresentato mediante tre numeri, compresi tra 0 e 255, che rappresentano la quantità di rosso (Red), verde (Green) e blu (Blue) presenti codifica RGB La codifica usata è quella esadecimale (base 16) Si possono rappresentare più di 16 milioni di colori diversi => nero = R:0, G:0, B:0 = # bianco= R:255, G:255, B:255 = #FFFFFF rosso= R:255, G:0, B:0= #FF0000 verde acqua = R:105, G:247, B:222 = #69F7DE Esistono dei nomi mnemonici per i colori più comuni (per es. “red”, “acquamarine”, “beige”, ecc.)
HTML: titoli Possiamo usare vari tag per strutturare il documento (cioè il contenuto della pagina Web), racchiuso all'interno del tag... I titoli (headers): Titolo di primo livello Titolo di primo livello Titolo di primo livello Titolo di secondo livello Titolo di primo livello Titolo di terzo livello
HTML: titoli La pubblicazione on-line Progettazione e costruzione di siti Web... Materiale e riferimenti bibliografici:... Informazioni generali:
HTML: paragrafi Paragrafo Allineamento (attributo di P): Paragrafo Per andare a capo senza creare un nuovo paragrafo: NB: Alcuni tag (per es. BR, HR e IMG) si possono scrivere senza chiusura (cioè senza..., o ). Questo, benché non sia formalmente corretto, viene interpretato correttamente dai browser, cioè:
HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... NB: equivale a (cioè "LEFT" è il valore di default dell'attributo ALIGN ) a capo
HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... a capo
HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... a capo
HTML: paragrafi L'esame si compone... La relazione scritta... La verifica orale... a capo
HTML: caratteri grassetto oppure grassetto grassetto corsivo oppure corsivo corsivo codice oppure codice codice testo grande 3 unità testo grande 3 unità testo in font Arial testo in font Arial testo blu testo blu
HTML: caratteri La pubblicazione on-line: progettazione e costruzione di siti Web... Principi di Interazione Uomo-Macchina... [Prof. Giovanna Petrone]...
HTML: elenchi (liste) Liste non numerate: Principi di Interazione Uomo-Macchina Progettazione di siti Web Architettura dell'informazione Realizzazione di siti Web statici e dinamici Cenni a usabilità e accessibilità
HTML: elenchi (liste) Liste numerate: Principi di Interazione Uomo-Macchina Progettazione di siti Web Architettura dell'informazione Realizzazione di siti Web statici e dinamici Cenni a usabilità e accessibilità
HTML: commenti e linee orizzontali Commenti (il browser NON legge il testo commentato) : Linee orizzontali: Esempio:
HTML: immagini <IMG SRC = nome del file che contiene l’immagine ALT = descrizione dell'immagine ALIGN = "CENTER/LEFT/RIGHT" "TOP/BOTTOM/MIDDLE" BORDER = spessore del bordo (in pixel) HEIGHT = altezza (in pixel) WIDTH = larghezza (in pixel) HSPACE = spazio a destra e a sinistra (in pixel) VSPACE = spazio in alto e in basso (in pixel) > NB: Il tag IMG si può scrivere senza chiusura; il browser lo interpreta come:
HTML: immagini <IMG SRC="img/Unilogo.jpg" ALT="Università di Torino" ALIGN="BOTTOM" BORDER="0" HSPACE="10">
HTML: suoni <BGSOUND SRC = nome del file che contiene il suono LOOP = numero di ripetizioni del suono (un numero, oppure "infinite") > NB: Anche il tag BGSOUND si può scrivere senza chiusura; il browser lo interpreta come:
HTML: link Link esterni e ancore interne: home.html: orario didattica Attività didattica: Bla, bla, bla, orario.html link esterno ancora interna NB: può essere un file sullo stesso server (nel qual caso basta indicare il nome del file, con l'eventuale path), oppure un file su un server diverso (nel qual caso occorre specificare l'intero URL)
HTML: link Link esterni: link link Per esempio: orario orario = vai alla pagina orario.html (NB: deve trovarsi nella stessa cartella della pagina corrente!) <A HREF=" masterEM/orario.html">orario orario = vai alla pagina orario.html, che si trova nella cartella masterEM, nell'area dell'utente goy, sul server e utilizza il protocollo http (HyperText Transfer Protocol, utilizzato di default dai browser principali)
HTML: link Ancore interne: ancora creo l'ancora link link (interno) all'ancora Per esempio: Attività didattica non ha effetti visibili... didattica didattica = Vai al testo contrassegnato con l’etichetta dida (paragrafo “Attività didattica”) in questa pagina didattica didattica = Vai al testo contrassegnato con l’etichetta dida (paragrafo “Attività didattica”) nella pagina home.html
HTML: tabelle TR = riga (Table Row) TD = cella (Table Data) TABLE = tabella contenuto cella 1 contenuto cella a riga 1 a colonna 2 a colonna
HTML: tabelle Attributi del tag TABLE : <TABLE BGCOLOR = colore dello sfondo della tablella ALIGN = "CENTER/LEFT/RIGHT" BORDER = spessore del bordo (in pixel) BORDERCOLOR = colore del bordo WIDTH = larghezza (in pixel) o in % CELLSPACING = spazio tra celle CELLPADDING = spazio tra testo e bordo cella > NB: La maggioranza degli attributi di TABLE possono essere applicati anche a TR e a TD Attributi esclusivi del tag TD : <TD COLSPAN = estensione della cella su più colonne ROWSPAN = estensione della cella su più righe VALIGN = posizione del testo nella cella >
HTML: tabelle Docenti del modulo di Informatica Nome Cristina Gena cgena[at]di.unito.it
HTML: tabelle... Anna Goy goy[at]di.unito.it Giovanna Petrone giovanna[at]di.unito.it
HTML: tabelle <TABLE BGCOLOR="#CCFFFF" BORDER="1" CELLPADDING="5"> spazio intorno al testo <TD COLSPAN="4"... <TD ALIGN="LEFT"> <TD ALIGN="CENTER">
HTML: tabelle Le tabelle possono essere usate per il layout, per esempio: <TABLE... <TD WIDTH="20%"...<TD WIDTH="60%"... <TABLE...
HTML: tabelle Nido L'Aquilone - Via Oltrebrenta, Noventa Padovana (PD) Per informazioni: Alessandra: Maria Carla: Stefania: (continua…)
HTML: tabelle (… continua) Nido per bimbi da 0 a 3 anni AVVISI: Nel periodo maggio-giugno l'asilo chiuderà alle Nei mesi giugno-luglio si accolgono bambini provenienti dagli asili comunali che in quel periodo resteranno chiusi Inoltre l'asilo resterà chiuso dal 5 al 30 di agosto Per appuntamenti e informazioni contattateci !
HTML: frame I frame servono a suddividere la finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti (file HTML ) diversi
HTML: frame Il file HTML che rappresenta l’intera pagina contiene le istruzioni per la suddivisione della finestra: title.html left.htmlmain.html "upperbar" (20%) "mainarea" (70% di 80% ) "leftbar" (30% di 80% ) 80%
HTML: frame Attributi del tag FRAME : <FRAME SRC = il file da visualizzare nel frame NAME = il nome del frame SCROLLING = presenza delle barre di scorrimento NORESIZE = per inibire il ridimensionamento MRGINWIDTH = margine destra/sinistra (in pixel) MRGINHEIGHT = margine sopra/sotto (in pixel) >
HTML: frames L’attributo TARGET : "upperbar" "leftbar""mainarea"... pubblicazioni... Ipotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina: Pubblicazioni... Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea": Pubblicazioni... "upperbar" "leftbar" "mainarea" Pubblicazioni...
HTML: frames Ipotesi 1: voglio caricare la pagina pubblicazioni.html al posto dell'intera pagina: Pubblicazioni... Ipotesi 2: voglio caricare la pagina pubblicazioni.html nel frame "mainarea": Pubblicazioni... "upperbar" "leftbar" "mainarea" Pubblicazioni... pubblicazioni = <A HREF="pubblicazioni.html" TARGET="_top">pubblicazioni carica nella finestra intera pubblicazioni = <A HREF="pubblicazioni.html" TARGET="_self">pubblicazioni carica nel frame in cui ti trovi (NB: equivale a non indicare il TARGET )
HTML: l'attributo TARGET L’attributo TARGET può essere usato anche indipendentemente dai frame, per aprire una nuova finestra; per esempio voglio che le home page si aprano in nuove finestre: <A HREF=" TARGET="_blank">... carica in una nuova finestra
HTML: image map click qui per caricare kit.html click qui per caricare tex.html click qui per caricare tiger.html click qui per caricare carson.html Un’image map è un’immagine suddivisa in “aree sensibili” che, al click del mouse, si comportano come link. Per es, consideriamo l’immagine contenuta nel file willer.gif
HTML: image map Per costruire un image map: 1.Si dichiara che, in corrispondenza di una certa immagine, verrà usata una certa "mappa" (con l'attributo USEMAP ) 2.Si definisce la "mappa" (con il tag MAP ) <AREA SHAPE="rect" COORDS="55,25,100,70" HREF="kit.html"> <AREA SHAPE="rect" COORDS="125,25,160,70" HREF="tiger.html"> <AREA SHAPE="rect" COORDS="165,25,220,70" HREF="tex.html"> <AREA SHAPE="rect" COORDS="80,75,125,125" HREF="carson.html"> NB: Come si fa a conoscere le coordinate?
HTML: image map Si può caricare l'immagine con l'attributo ISMAP e poi leggere le coordinate sulla barra di stato, muovendosi con il mouse ( NB : l'origine delle coordinate è in alto a sinistra): <IMG SRC="willer.gif" ISMAP> NB: Gli strumenti di sviluppo (come Dream- weaver, FrontPage,...) generalmente forniscono metodi per costruire automaticam. le mappe!
HTML: form Le form (moduli) sono un meccanismo per rendere interattiva una pagina Web, richiedendo informazioni (dati) all’utente e inviandole al server per l’elaborazione
HTML: form... campi del modulo... Attributi del tag FORM : METHOD: specifica il modo in cui vengono inviati i dati: GET = "in chiaro" (in coda all' URL specificato nell'attributo ACTION ) POST = "nascosti" (all'interno dlel'oggetto che viene inviato al server)
HTML: form ACTION: è un URL che contiene il richiamo di un’azione, cioè un programma; può essere, per es.: mailto:indirizzo-di- invia una all’indirizzo specificato, con i dati del modulo una Servlet Java o uno Script CGI invia i dati del modulo ad un programma che è in grado di riceverli e decodificarli una pagina ASP, PHP, JSP (cioè una pagina contenente un programma in grado di riceverle i dati del modulo e di decodificarli)
HTML: form I pulsanti: viene eseguita l’azione specificata in ACTION vengono cancellati tutti i dati già inseriti
HTML: form Campi del modulo (ovvero le modalità per richiedere i dati):
HTML: form fino a 5 anni da 6 a 11 anni...
HTML: struttura gerarchica I tag in un documento HTML definiscono una struttura gerarchica: HTML HEADBODY H1P... BA IMG l'elemento HTML è "genitore" degli elem. HEAD e BODY ; HEAD e BODY sono "figli" si HTML ; ecc...
TO DO!!!
Modalità per applicare una trasformazione XSL ad un documento XML (cioè per invocare il processore XSLT): 1.Il browser (per es. IE6) contiene un processore XSLT: il file XML viene caricato come una normale pagina; il foglio di stile da applicare è indicato nel file XML; il risultato viene visualizzato dal browser stesso 2.Un programma (per es. Java) standalone applica il foglio di stile XSL al file XML 3.Un Web Server applica il foglio di stile XSL al file XML e spedisce il risultato al client (browser) che ha originato l'applicazione Vedremo degli esempi delle prime due modalità vedi proveXSL\readme.txt XML: XSL - IV
1.Il browser (per es. IE6) contiene un processore XSLT: il file XML viene caricato come una normale pagina nel file XML indichiamo qual è il foglio di stile da applicare: nel file XSL indichiamo il namespace specifico usato dal browser: Esempi:coffees.dtd listino.xml listinoWeb.xsl listinoCarta.xsl XML: XSL - V
2.Un programma (per es. Java) standalone applica il foglio di stile XSL al file XML: utilizziamo un programma Java (NB: una classe, contenente il metodo main) fornito negli esempi del tutorial di JWSDP (leggermente modificato) in questo programma indichiamo il file XML di partenza, il foglio di stile XSL da applicare e il nome del file in cui scrivere il risultato (nel nostro caso un file HTML) Esempi:coffees.dtdlistinoWebJ.html listinoJ.xmllistinoCartaJ.html listinoWebJ.xslMyStylizer.java (e.class) listinoCartaJ.xsl XML: XSL - VI