Creazione di ipertesti in HTML

1. Creazione di ipertesti in HTML • Cristina Gena • cgena@di.unito.it • http://www.di.unito.it/˜cgena/master.html cristina gena - matec 2006/2007

2. HTMLHyperText Markup Language Linguaggio base per produrre documenti per World Wide Web (WWW o WEB, ragnatela mondiale di informazioni..) Documenti WEB pagine ipertestuali che contengono contenuti multimediali • testo • immagini • suoni • legami ipertestuali a - altre pagine - programmi - immagini, suoni, ...  Pagine localizzate su server web e visualizzate da un client (browser) cristina gena - matec 2006/2007

3. pagina papers: link3 home page: link1 link2 pagina di unito pagina del coreplink4 HTMLHyperText Markup Language L'Ipertesto è un insieme di testi o pagine leggibili con l'ausilio di un'interfaccia elettronica, in maniera non sequenziale, grazie a particolari parole che si chiamano hyperlink (rimandi), che costituiscono un rete raggiata o variamente incrociata di informazioni organizzate secondo criteri paritetici o gerarchici.(http://it.wikipedia.org/wiki/Ipertesto ) cristina gena - matec 2006/2007

4. HTMLHyperText Markup Language Si parla di contenuti multimediali, specie in ambito informatico, quando per comunicare un'informazione riguardo a qualcosa ci si avvale di molti media, cioè mezzi di comunicazione di massa, diversi: immagini in movimento (video), immagini statiche (fotografie), musica e testo. (http://it.wikipedia.org/wiki/Multimedialit%C3%A0) cristina gena - matec 2006/2007

5. cristina gena - matec 2006/2007

6. HTMLHyperText Markup Language Per visualizzare le pagine HTML si usano programmi chiamati Web browser (Netscape Navigator, Microsoft Internet Explorer, FireFox, Opera....) Le pagine HTML sono trasferite attraverso la rete Internet usando un protocollo particolare HTTP (HyperText Transfer Protocol) costruito al di sopra di TCP/IP (base di Internet) e localizzate mediante un ben preciso sistema di indirizzamento: URL (Uniform Resource Locator) cristina gena - matec 2006/2007

7. request Server client response Architettura client-server • Un server è programma “in ascolto” su una porta TCP. Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con l’aiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con l’aiuto di altri programmi ) e la invia al client. • Un client è un programma che si connette ad un server, fa una richiesta ed aspetta una risposta. • Un server, generalmente, può servire più client contemporaneamente. cristina gena - matec 2006/2007

8. Come funziona il Web • HTTP • Http (HyperText Transfer Protocol) è il protocollo di comunicazione utilizzato da un client (browser) e da un server (HTTP Server) per trasferire file ipertestuali • URL • Un URL (Uniform Resource Locator) è l’indirizzo di una risorsa, per es., di una pagina Web. • Ha la seguente forma: • http://www.di.unito.it/cgena/index.html protocollo path nome del file nome di dominio del sito cristina gena - matec 2006/2007

9. request (pagina) Server client elaborazione ? Server client  pagina response (pagina) Server client Come funziona il Web • Nel caso più semplice l'URL contiene l'indirizzo di una pagina HTML(per es. http://www.di.unito.it/~cgena/pub.html): • il contenuto è fisso, definito nel momento in cui la pagina HTML viene scritta • Pagine Web "dinamiche" (asp, php, jsp, …) = pagine il cui contenuto viene generato (selezionato, composto) al momento della richiesta cristina gena - matec 2006/2007

10. HTML - HyperText Markup Language HTML è un linguaggio di formattazione di documenti Un documento HTML è un file di testo (file ASCII) contenente dei comandi per • formattazione • strutturazione del layout • inserimento di parti multimediali • link ipertestuali cristina gena - matec 2006/2007

11. HTML - HyperText Markup Language I comandi (TAG) hanno una forma sintattica particolare <nomeTag>informazioni </nomeTag> <nomeTag attributo=“valore”>informazioni </ nomeTag >  I comandi (tag) generalmente hanno nomi mnemonici e significativi… cristina gena - matec 2006/2007

12. Specifiche HTML 4 http://www.w3.org/TR/html401/ cristina gena - matec 2006/2007

13. Pagina visualizzata nel browser Codice html della pagina cristina gena - matec 2006/2007

14. HTML Un documento HTML è costituito da due parti** <html> <head> descrizione delle caratteristiche del documento </head> <body> documento vero e proprio </body> </html> ** abituiamoci da subito a scrivere i tag minuscoli…(vedremo più avanti perché) cristina gena - matec 2006/2007

15. HTML Proviamo subito a costruire il nostro primo file HTML …. Ci servono… un editor testuale (Blocco Note, Word Pad, …)… un browser per visualizzare una pagina (Explorer, Firefox) Esistono dei programmi che creano automaticamente il codice (es. Macromedia Dreamweaver) in base ad azioni “user friendly”….ma li vedrete in un altro corso  cristina gena - matec 2006/2007

16. HTML • HEAD • Contiene informazioni molto importanti, per la maggior parte invisibili, tranne il titolo del documento che verrà visualizzato come titolo nella finestra del browser • <head> • <title> • master in tecnologia e comunicazione multimediale </title> • </head> • ATTN: poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo cristina gena - matec 2006/2007

17. HTML Informazioni invisibili IL TAG META <meta name=“…." content=“…"> N.B<nome-tag attributo=“valore”> <head> <metaname="keywords" content=“master, comunicazione, corep, torino"> <metaname="description" content=“master organizzato dal corep in collaborazione…"> <metaname=“author" content=“cristina gena"> </head> cristina gena - matec 2006/2007

18. HTML BODY Contiene tutto quello che verrà visualizzato secondo le direttive di formattazione. <body> corpo della pagina </body> Vediamo cosa si può inserire all’interno di body…ma prima cristina gena - matec 2006/2007

19. HTML ATTRIBUTI DI BODY Il tag BODY ha della opzioni che permettono di stabilire…. <bodybgcolor="colore sfondo" text="colore testo" background="pathname del file con immagine per lo sfondo" link="colore link da visitare" alink="colore link attivo“ vlink="colore link visitati"> cristina gena - matec 2006/2007

20. HTML Il colore può essere specificato con • parole chiave: red, yellow, ... • codice esadecimale: Rosso Verde Blu rosso verde blu vengono combinati numericamente per formare tutti i colori usando i numeri 0-9 e le lettere da A a F es. #000000  nero es. #FFFFFF  bianco es. #FF0000  rosso OSS: di default si ha sfondo bianco, testo nero, link da visitare blu, , link attiivi rossi, link visitati viola cristina gena - matec 2006/2007

21. HTML Tool per scegliere velocemente colori di primo piano e sfondo http://www.yoyodesign.org/outils/ncolor/ncolor8.html.en http://web-link.it/html/colori256.htm www.asciitable.it/colorihtml.asp cristina gena - matec 2006/2007

22. HTML I PATHNAME <bodybackground="file:///c:/wwwroot/cri/img/sfondo.gif“> Pathname assoluto Sconsigliato! cristina gena - matec 2006/2007

23. Pathname relativi HTML I PATHNAME <bodybackground="sfondo.gif“> ->è nella stessa cartella della pagina html <bodybackground=“img/sfondo.gif“> -> è in una cartella img contenuta nella cartella che contiene la pagina <bodybackground=“../img/sfondo.gif“>-> è in una cartella img che sta allo stesso livello della cartella che contiene la pagina (Sali di una cartella e riscendi) <bodybackground=“../../img/sfondo.gif“>-> si deve salire di due livelli e riscendere cristina gena - matec 2006/2007

24. HTML HEADERS - I titoli <h1> titolo1 </h1> ... <h6>titolo6 </h6> permettono di indicare quali parti di testo vengono usate come titoli OSS: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli cristina gena - matec 2006/2007

25. HTMLHyperText Markup Language COMANDI PER ANDARE A CAPO <br> a capo senza saltare una riga <p> a capo saltando una riga <p>testo e/o immagini</p> per ogni paragrafo (separato da una linea) • HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi. Ma XHTML si!! • HTML non è sensibile agli spazi e alle linee vuote cristina gena - matec 2006/2007

26. HTML IL CARATTERE <font>…</font> Questo tag supporta 3 attributi • size per cambiare la dimensione • color per cambiare il colore • face per cambiare il font <font size=“5” color="red" face=“Courier New, Courier, mono”> Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier </font> cristina gena - matec 2006/2007

27. HTMLHyperText Markup Language IL CARATTERE <font>…</font> dimensioni dei caratteri da 1 (piccolo) a 7 (grande) <font size=“3”> testo a dimensione 3 </font> <font size=“+1”> dim+1 del carattere stabilito prima</font> cristina gena - matec 2006/2007

28. HTML L’ ALLINEAMENTO il tag <p> possiede un attributo align per l'allineamento del testo nel paragrafo <p align=“left”> testo allineato a sinistra </p> <p align=“right”> testo allineato a destra </p> <p align=“center”> testo allineato al centro </p> L’allineamento al centro si può ottenere anche con il tag <center> testo da centrare </center> cristina gena - matec 2006/2007

29. HTML • FORMATO DEL CARATTERE • Esistono vari modi per cambiare il formato dei caratteri • Stili fisici (disuso…) • Stili Logici • STILI FISICI • <b> testo</b> testo in grassetto • <i>testo</i> testo in corsivo • <u>testo</u> testo sottolineato (sconsigliato..) cristina gena - matec 2006/2007

30. HTML • STILI LOGICI • <STRONG>testo</STRONG> {grassetto} • <EM> testo</EM>{emphasized (corsivo)} • <CODE>testo</CODE> • {per codice di computer (font con caratteri a grandezza fissa)} cristina gena - matec 2006/2007

31. HTML INDICI E PEDICI  a<SUB> 1 </SUB> produce a1 b<SUP> 2 </SUP> produce b2 cristina gena - matec 2006/2007

32. ESERCIZIO 1  Creare nella vostra cartella un documento HTML chiamato a piacere e con i seguenti elementi:           A) sfondo: arancio (trovare il codice esadecimale corrispondente).           B) colore per il testo: blu (utilizzare il nome del colore).           D) del testo di colore rosso e in corsivo           E) del testo in grassetto e colore a scelta           F) 1 paragrafo in carattere Arial con font dimensione 2 allineato al centro           G) 1 paragrafo interno al precedente con il font di dimensione maggiore in Verdana allineato a destra PS: Ricordatevi di salvare “.html” Il testo andate a scaricarlo da una qualsiasi pagina web!!! cristina gena - matec 2006/2007

33. HTML • Liste di elementi • Può essere utile poter costruire liste di elementi • HTML fornisce 2 tag per creare le liste • LISTE NON NUMERATE • <ul>  unordered list • LISTE NUMERATE • 2. <ol>  ordered list cristina gena - matec 2006/2007

34. HTML • 1) Liste non numerate: <UL> •  Il menu prevede due primi: • <ul> • <li> penne all’arrabbiata </li> • <li> lasagne al forno </li> • </ul> • <ul> supporta l’attributo type per modificare l’aspetto del punto elenco • <ul type=“disc”> • <ul type=“circle”> • <ul type=“square”> cristina gena - matec 2006/2007

35. HTML • 2) Liste numerate:<OL> • Il menu prevede due primi • <ol> • <li> penne all’arrabbiata </li> • <li> lasagne al forno </li> • </ol> • Produce • Il menu prevede due primi • 1. penne all’arrabbiata • 2. lasagne al forno   cristina gena - matec 2006/2007

36. HTML • Attributi di <ol> • type={1,A,a,I,i} • start=numero  • Il menu prevede due primi • <ol type=“i” start=“3”> • <li> penne all’arrabbiata </li> • <li> lasagne al forno </li> • </ol> •  Produce: • Il menu prevede due primi • iii penne all’arrabbiata • iv lasagne al forno cristina gena - matec 2006/2007

37. HTML Linee orizzontali Per separare parti di testo si può usare il tag <hr> che produce  _____________________________________________  Questo tag ha tre opzioni <hr size=“numero” {spessore in pixel} width=“numero | numero%” {larghezza in pixel o in percentuale} align={left | right} {allineamento} color=“codice esadecimale/colore” > cristina gena - matec 2006/2007

38. HTML Testo lampeggiante (SOLO CON NETSCAPE!!!) Testo, in qualunque forma, che lampeggia in fase di visualizzazione testo scorrevole (SOLO CON EXPLORER!!!) <blink> questo testo lampeggia </blink> <marquee> testo che scorre </marquee> cristina gena - matec 2006/2007

39. HTML Commenti Può essere utile inserire dei commenti nel documento che non sono visualizzati dal browser <!-- Questo è un commento e non si vede --> cristina gena - matec 2006/2007

40. HTML Immagini Fino ad ora abbiamo visto come si può formattare il testo; HTML permette di inserire immagini usando il tag <img> • l'immagine deve essere memorizzata su un file a parte i browser supportano formati quali GIF, JPEG BITMAP, PNG • il tag <img> ha vari attributi cristina gena - matec 2006/2007

41. HTML <img src=“pathname o URL dell'immagine” align=“left | right” {allineamento} alt=“text” {testo alternativo all'immagine} border=“numero” {larghezza in pixel del bordo}height=“numero” {altezza in pixel} width=“numero” {larghezza in pixel} hspace=“numero” {spazio orizzontale intorno all'immagine} vspace=“numero” {spazio verticale intorno l'immagine} > cristina gena - matec 2006/2007

42. HTML ATTENZIONE! per centrare l’immagine si può usare il tag <center>: <center> <img scr=“crifla.jpg”> </center> cristina gena - matec 2006/2007

43. HTML Suoni È possibile associare suoni alla presentazione di una pagina usando il tag <bgsound> Anche i suoni devono essere memorizzati su file a parte che possono essere di vari formati • .AU, .WAV, .MP3, … • MIDI (.mid) Esempi di suoni: http://www.di.unito.it/~cgena/suoni/ cristina gena - matec 2006/2007

44. HTML <bgsound src="pathname | URL del file sonoro" loop="numero di volte" | "infinite" > Il parametro LOOP serve per stabilire quante volte si deve ripetere il suono. Se assume valore infinite si ripete il suono fino a quando non si esce dalla pagina  ES: <bgsound src="suoni/pippo.wav" loop="3"> cristina gena - matec 2006/2007

45. ESERCIZIO 2 Creare una pagina HTML contenentr i seguenti elementi: - un immagine centrata - una barra orizzontale - un paragrafo in corsivo, in Verdana e allineato a destra - un esempio di apice e pedice SALVATE L’IMMAGINE NELLA CARTELLA IMG! cristina gena - matec 2006/2007

46. ESERCIZIO 3 Aggiungete alla pagina dell’esercizio 2: - una lista non ordinata di 3 elementi (scegliete il type) - un suono di sfondo che si ripete una volta - una lista ordinata di tre elementi type=A e che parta dal quarto elemento. - un testo scorrevole con dimensioni e colori a scelta SALVATE IL FILE SONORO NELLA CARTELLA SOUND!! cristina gena - matec 2006/2007

47. HTML LEGAMI IPERTESTUALI Vediamo ora come creare link ipertestuali in una pagina HTML Primo passo: Definizione precisa di URL standard Un URL è costituito da tre parti protocollo://indirizzointernet:porta/pathname#label http://www.di.unito.it:80/cgena/master.html#corep Il PROTOCOLLO descrive il tipo di collegamento da realizzare cristina gena - matec 2006/2007

48. HTML file: {per file locali} http:{attiva collegamento a server http} ftp: {attiva collegamento a server ftp} news: {attiva collegamento a server news} telnet: {attiva sessione di collegamento remoto} mailto: {attiva spedizione di mail} Il protocollo più importante per i collegamenti ipertestuali è http cristina gena - matec 2006/2007

49. HTML ES: file:HTML/pippo.html {collegamento al file pippo.html in cartella HTML locale}   http://www.di.unito.it/home.html {collegamento al file file home.html su server www.di.unito.it} ATTENZIONE! www in questo caso è il nome di una macchina nel dominio di.unito.it Di solito alle macchine server WWW viene dato il nome www cristina gena - matec 2006/2007

50. HTML • http://www.di.unito.it/cgena/wd.html • {file con pathname cartella/pagina.html} •  mailto:cgena@di.unito.it • {attiva il programma di invio mail} •  ftp://ftp.di.unito.it/pippo.htm • {attiva trasferimento del file pippo dal • serverftp.di.unito.it} • ATTENZIONE! anche in questo caso ftp è il nome della macchina ftp-server cristina gena - matec 2006/2007