Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico

Transcript

1 HTML - Hyper Text Markup Language Enrico Cavalli Anno Accademico Lo scenario e l ambiente Architettura a tre livelli 1 Server 6 Web Php 4 Database Server DB 1. Il browser richiede una pagina Web a un server Web: 2. Il Web server invia al browser la pagina richiesta in formato HTML, ovvero un file di testo che viene interpretato dal browser 1

2 Riferimento ipertestuale Protocollo / percorso Server Path name del documento nel file system del server Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 4 HTML: Hyper Text Markup Language Linguaggio per la scrittura di documenti ipertestuali e multimediali di Internet, interpretati da un browser Una pagina Web è un documento ipertestuale (collegato ad altri mediante link) Una pagina Web è un testo di soli caratteri HTML è un linguaggio di marcatura HTML non è un linguaggio di programmazione Ogni prodotto office produce documenti HTML Ogni documento presentato corrisponde ad un file Terminologia Presentazione web: raccolta di una o più pagine web contenenti testo, grafica e altri materiali multimediali, collegate fra di loro Server web: macchina collegata in rete che invia le pagine richieste Pagina web: singolo elemento di una presentazione, contenuta in un singolo file - NomeFile.html Home page: punto di ingresso di una presentazione Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 6 2

3 Localizzazione dei documenti Il caso del server web dell università di Bergamo: Se, nel configurare il server web si è stabilito che i documenti HTML sono collocati, nella directory: /usr/www/lib/docs/ Poiché per definizione l home page ha nome: Index.html, la richiesta: causa l invio della pagina: /usr/www/lib/docs/index.html Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 7 Localizzazione dei documenti Inoltre, sempre nel caso dell università di Bergamo : / biblioteca visualizza la home page della biblioteca collocata in / usr / www / lib / docs / biblioteca / index.html La home page della biblioteca può essere indicata con: <A HREF = biblioteca / index.html > <A HREF = biblioteca > <A HREF = / biblioteca / index.html > Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 8 Struttura di una presentazione Gerarchie Strutture lineari o circolari Combinazioni di strutture lineari e gerarchie Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 9 3

4 Organizzazione gerarchica Home page Le Pagine sono legate ad una pagina indice (Es: Schede Tecniche) Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 10 Organizzazione Lineare (Circolare) Home Page Tutti i documenti sono collegati alla prima pagina ed alla successiva (Es: Libro) oppure alla pagina successiva e alla precedente (Es: Eventi di una manifestazione) Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 11 Combinazione di strutture Home page Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 12 4

5 Preparazione di pagine Web Un qualunque editor testuale (Notepad, Wordpad) Web integrato in Office Microsoft FrontPage (commerciale): Adobe PageMill, (commerciale): Prodotti professionali Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 13 Il linguaggio HTML Si veda anche: L aspetto dei file HTML Le pagine HTML contengono due tipi di oggetti: il testo del documento TAG HTML, le marcature tipografiche che specificano come deve essere visualizzato il testo medesimo Il documento si presenta come una successione di elementi ( se necessario annidati ) del tipo: <NomeTag> Testo influenzato dal Tag </NomeTag> Sintassi delle marcature definita dal: W3C World Wide Web Consortium Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 15 5

6 Struttura generale di un documento <HTML> <HEAD> <TITLE>Titolo</TITLE>  </HEAD> <BODY>... ... </BODY> </HTML> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 16 Meta Tag Meta Tag: tag con metadati che contengono informazioni sul contenuto della pagina, alcuni motori di ricerca usano i metadati per indicizzare i documenti <META NAME=.. CONTENT= > NAME: description, keywords, author,... <HEAD>... <META NAME= description CONTENT= Esempio sui link > <META NAME= keywords CONTENT= HTML, WEB,... > <META NAME= author CONTENT= webmaster@unibg.it > </HEAD> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 17 Esempio Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 18 6

7 Visualizzare il codice HTML Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 19 Formattazione del testo di una pagina Formattazione della pagina <P> testo </P> - Identifica un paragrafo <BR> - Vai a capo <br /> <H1>testo</H1> <H6>testo</H6> <I> testo </I> <B> testo </B> <U> testo </U> - Titolo di dimensione max - Titolo di dimensione min - Corsivo - Grassetto - Sottolineato Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 21 7

8 Formattazione della pagina <HR> - Inserisce una riga <hr /> <S> testo </S> <PRE>..</PRE> - Testo sbarrato - Mantiene formattazione <SUP>..</SUP> - Esponente: 4 in 2 4 <SUB>..</SUB> <CITE>..</CITE> - Indice: 2 in H 2 O - Citazione.. Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 22 Colore dello sfondo o dei caratteri Colore RGB definito da 6 cifre esadecimali #hhhhhh Colore dello Sfondo: <BODY BGCOLOR= #hhhhhh > Colore del testo: <BODY TEXT= #hhhhhh > Colore dello Sfondo e del testo: <BODY BGCOLOR= #hhhhhh TEXT= #hhhhhh > Colore del testo: <FONT COLOR= #hhhhhh > Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 23 Colore dello sfondo o dei caratteri "#RRGGBB" 256 valori : 00.. FF "rgb(r,g,b)" 256 valori : "FFFFFF "rgb(255,255,255)" Bianco "FF0000" "rgb(255,0,0)" Rosso "00FF00" "rgb(0,255,0)" Verde "0000FF" "rgb(0,0,255)" Blu "000000" "rgb(0,0,0)" Nero <BODY BGCOLOR="#0000FF" TEXT="#FFFF00"> Produce uno sfondo blu e testo giallo Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 24 8

9 Colore dello sfondo o dei caratteri I colori possono essere indicati anche simbolicamente: <BODY BGCOLOR= blue TEXT= yellow > aqua #00FFFF navy # black olive blue purple fucsia red gray # silver #C0C0C0 green # teal lime #00FF00 yellow maroon white... Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 25 Caratteri speciali HTML usa solo i primi 128 caratteri ASCII. Per i caratteri accentati e molti altri bisogna ricorrere a sequenze di escape della forma: &nome; oppure &#codice; dette entità < < < > > > & & & " A A è è & & é è % % È È À À Ì Ì Codici decimali Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 26 Esercizio Preparare un documento HTML con un testo libero, organizzato in paragrafi, ricordandosi di definire <TITLE>. Il documento deve contenere del testo, i diversi paragrafi devono avere titoli evidenziati con <Hn> e devono essere incluse righe di separazione, con <HR>, ed a capo, con <BR>. Sviluppare il documento per passi controllando l effetto dei differenti tag In particolare controllare come va a capo, cosa succede omettendo <Title> e lasciandolo vuoto, come vengono trattati gli spazi Preparare un secondo documento con testo sottolineato, evidenziato in differenti modi e colorato. Preparare un terzo documento con testo preformattato e inserendo caratteri speciali. Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 27 9

10 Elenchi numerati e puntati <OL> <LI> Uno </LI> <LI> Due </LI> <LI> Tre </LI> </OL> <UL> <LI> Uno </LI> <LI> Due </LI> <LI> Tre </LI> </UL> 1. Uno 2. Due 3. Tre Uno Due Tre Le liste si possono annidare Vedi: Liste.html Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 28 Link tra pagine HTML Link tra documenti HTML file1 file2 <A HREF= file2 >... <A HREF= file2#sezione1 >.. <A NAME = sezione1 > xxx LINK <A HREF =..> ANCORA <A NAME=...> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 30 10

11 Link tra documenti HTML <A HREF= NomeFile#Sezione1 >XXXXX</A> XXXXX viene visualizzato come : XXXXX Cliccando su: XXXXX si attua il trasferimento a NomeFile nel punto identificato come: Sezione1 tramite un ancora, definita con l attributo NAME del tag A nel file NomeFile: <A NAME= Sezione1 >Nome della sezione</a> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 31 Link tra documenti HTML: esempi <A HREF= #prefazione >Prefazione</A> <A HREF= cap1.html >Capitolo 1</A> La collocazione di un file è specificata con un posizionamento relativo al file di partenza <A HREF= cap2.html >Capitolo 2</A> <A HREF= /figure/indice.html >Indice figure</a> <A HREF= >Bibliografia</A> <A HREF= >Bibliografia</A> <A HREF= >Bibliografia</A> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 32 Inserimento di Immagini Per includere un immagine si usa il Tag: <IMG > definendo NomeFile (SRC), Allineamento Immagine rispetto al testo (ALIGN) e Titolo a scomparsa della figura (ALT). <IMG SRC= NomeFile ALIGN= Top ALT= Scritta > Esempi: <IMG SRC= Figura.gif ALT= Mappamondo > <IMG SRC= Figura.gif ALIGN= Bottom ALT= Mappamondo > <A HREF= AltroFile.html > <IMG SRC= Figura.gif ALT= Mappamondo > </A> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 33 11

12 Esercizio Costruire una pagina che faccia da menu di scelte con link a altre pagine con esempi di liste ordinate, non ordinate, miste, annidate, con immagini e alle pagine preparate in precedenza Home Page Costruite un elenco di siti di vostro interesse e rendete il loro nome cliccabile Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 34 Tabelle, Frame e Form Tabelle <TABLE BORDER> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR> <TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR> </TABLE> Intestazioni nella tabella: <TH>.. </TH> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 36 12

13 Frame Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 37 Frame Contenuto di Frame_menu.htm... <a href= Frame_a.htm" target= FrameScelto">Frame a</a><br> <a href= Frame_b.htm" target= FrameScelto">Frame b</a><br> <a href= Frame_c.htm" target= FrameScelto">Frame c</a>... Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 38 Frame Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 39 13

14 Esercizio Una pagina con due frame: un menu nella colonna di sinistra e la pagina scelta nella colonna di destra. Le scelte includono alcune liste, la tabella in figura, la medesima tabella senza le celle sulla diagonale e alcune pagine preparate nei precedenti esercizi. Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 40 FORM: caselle di testo <FORM ACTION=" METHOD="GET"> Nome <INPUT Type="text" NAME="nome" SIZE="20"> Cognome <INPUT Type="text" NAME="cognome SIZE="20"> <BR> <HR> <BR> <INPUT TYPE="submit" VALUE="Spedisci modulo"> <INPUT TYPE="reset" VALUE="Cancella modulo"> </FORM> ACTION precisa il programma di risposta sul server Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 41 FORM: metodo GET METHOD precisa come inviare i parametri al server due metodi: GET e POST Nella modalità GET i parametri vengono codificati automaticamente dal browser come parte dell indirizzo e sono visualizzati insieme all URL della pagina Web. Modalità inadatta quando il dato da trasmettere è riservato oppure bisogna trasmettere molti dati I parametri vengono appesi alla URL inviata al server: Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 42 14

15 FORM: metodo POST Nella modalità POST i parametri non sono trasmessi come parte della URL ma con una modalità che li rende invisibili all utente. La modalità POST è utilizzata per spedire grandi quantità di dati in modo che non siano visibili all utente. Una pagina generata da un modulo che ha usato il metodo GET può essere salvata nei bookmarks con il corretto valore dei parametri trasmessi ( in quanto fanno parte della URL della pagina) Una pagina generata con il metodo POST non può essere salvata nei bookmarks. Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 43 FORM: radio C è anche un... TYPE = HIDDEN... Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 44 FORM: checkbox Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 45 15

16 FORM: casella combinata <SELECT NAME=lezioni> <OPTION VALUE="una">una <OPTION SELECTED="Selected">due <OPTION VALUE="tre">tre </SELECT> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 46 FORM: password e textarea Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 47 FORM etabelle Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 48 16

17 Esercizio ( 1 ) Realizzare il modulo in figura cercando di migliorare il colore dello sfondo. Per la scelta dei colori si veda anche: Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 49 Esercizio ( 2 ) Realizzare un modulo analogo a quello in figura sfruttando una tabella per migliorare l aspetto del form e mantere i dati incolonnati Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 50 Pagine Dinamiche Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 51 17

18 Pagine Dinamiche Lato Server: Php, ASP, ASP.NET ASP usa VBScript <% Dim Cognome, Nome Nome=Request.Form( nome ) Cognome=Request.Form( cognome ) %> La richiesta di <%response.write Nome%> <%response.write Cognome%>... Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 52 I fogli di stile CSS Si veda anche: Fogli di stile CSS Il CSS ( Cascading Style Sheet, foglio di stile a cascata) è un documento che definisce la visualizzazione delle pagina HTML secondo una sintassi specificata nei documenti del W3C: In particolare i vantaggi nell uso dei fogli di stile sono: Separazione dei contenuti dalle caratteristiche di visualizzazione Maggiore controllo sulla rappresentazione di documenti omogenei Indipendenza dal dispositivo e quindi migliore accessibilità Utilizzo dei CSS all interno di documenti HTML: Fogli di stile inline Fogli di stile incorporati Fogli di stile collegati Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 54 18

19 Fogli di stile CSS - sintassi Sintassi: Esempi: TagSelettore {proprietà: valore} body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red} p { text-align: center; color: black; font-family: arial } h1,h2,h3,h4,h5,h6 {color: green} input[type="text"] {background-color: blue} Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 55 Fogli di stile CSS : classe di stile Classe di stile: Esempi: selettore.classe {proprietà: valore}.classe {proprietà: valore} p.destra {text-align: right} p.centra {text-align: center}.sinistra {text-align: left} <p class= destra">paragrafo allineato a destra</p> <p class="centra">paragrafo centrato</p> <p class= sinistra">testo allineato a sinistra</p> <h1 class= sinistra">intestazione a sinistra</h1> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 56 Fogli di stile CSS - reference Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 57 19

20 Fogli di stile inline <! - Uso degli stili inline --> <HTML> <HEAD> <TITLE>Fogli di stile inline</title> </HEAD> <BODY> <H2>Foglio di stile inline</h2> <P>Paragrafo al quale non è stato applicato alcun stile</p> <P STYLE="font-family: Arial; font-size: 9px; color: #FF0000; background-color: #FFFF33">Paragrafo con font Arial, dimensione e colore del carattere, colore dello sfondo</p> <P STYLE="font-size: 20pt"> Paragrafo al quale è stato applicato uno stile di 20 punti</p> <P>Paragrafo finale senza stile</p> </BODY> </HTML> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 58 Fogli di stile incorporati <! - Uso degli stili incorporati --> <HTML> <HEAD> <TITLE>Fogli di stile incorporati</title> <STYLE TYPE="text/css"> H1 { font-family: Arial; font-size: 23pt; color: #0099CC } P { font-family: Arial; font-size: 14pt }.special { color: blue } </STYLE> </HEAD> <BODY> <H1>Foglio di stile incorporato</h1> <P>Primo paragrafo con stile incorporato</p> <H2 class = "special">titolo con stile special</h2> <P class = "special">paragrafo con stile special</p> <P>Ultimo paragrafo con stile incorporato</p> </BODY> </HTML> Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 59 Fogli di stile esterni Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 60 20

21 Esempi(1) Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 61 Esempi(2) Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 62 Esempi(3) Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 63 21

22 Esempi(4) Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 64 Esempi(5) <style type="text/css"> ol {list-style-type: decimal} ol ol ol{list-style-type: lower-roman} ol ol {list-style-type: lower-alpha} </style> Altri esempi in: Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 65 Fogli di stile CSS: priorità nei conflitti Fogli di stile a cascata In caso di conflitto di stile vale la seguente scala di priorità ( priorità crescenti ) 1. Lo stile definito dal Browser 2. Lo stile definito dal foglio collegato esterno 3. Lo stile definito dallo stile incorporato 4. Lo stile definito dagli stili inline Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 66 22

23 Grazie per la vostra attenzione Fine della presentazione Il linguaggio HTML - Enrico Cavalli - Università di Bergamo 67 23