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 2005

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 2005

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, per tramite di 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 2005

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 2005

5. cristina gena - matec 2005

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

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 2005

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 2005

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 2005

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 parti multimediali • link ipertestuali I comandi (TAG) hanno una forma sintattica particolare <nome-tag> informazioni </nome-tag>  I comandi (tag) generalmente hanno nomi mnemonici e significativi… cristina gena - matec 2005

11. Specifiche HTML 4 http://www.w3.org/TR/html4/ cristina gena - matec 2005

12. Pagina visualizzata nel browser Codice html della pagina cristina gena - matec 2005

13. 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 2005

14. 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 2005

15. HTML • HEAD • contiene 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 2005

16. HTML 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 2005

17. 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… cristina gena - matec 2005

18. 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 2005

19. 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 2005

20. 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 2005

21. 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 2005

22. HTMLHyperText Markup Language COMANDI PER ANDARE A CAPO <br> a capo senza saltare una riga <p> a capo saltando una riga <p></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 2005

23. 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 2005

24. 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 2005

25. 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 2005

26. 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 2005

27. 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 2005

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

29. 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 2005

30. 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 2005

31. 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 2005

32. 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 2005

33. 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 2005

34. 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 2005

35. 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 2005

36. 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 2005

37. 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 2005

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

39. 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 2005

40. 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 2005

41. 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 2005

42. 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 2005

43. HTML ES: file:HTML/pippo.html {collegamento al file pippo.html in directory 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 2005

44. 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 2005

45. HTML • telnet://pianeta.di.unito.it • {attiva finestra di interazione remota} cristina gena - matec 2005

46. HTML CREAZIONE DEL LEGAME IPERTESTUALE Sono coinvolti 2 elemeti • il testo o l’immagine che fungono da LINK • il collegamento da attivare tag ANCHOR: <a>…</a> <a href="URL servizio da attivare"> testo o immagine che funge da link </A> cristina gena - matec 2005

47. HTML <a href="http://www.di.unito.it/index.html"> questo testo funge da hotword </a> <a href="mailto:cgena@di.unito.it"> spedisce una mail a cristina gena </a> <a href="http://www.di.unito.it/cgena/teaching.html"> <img src="pippo.jpg“ alt=“vai alla pagina teaching”> </a> <a href="file:c:\pippo.html"> collegamento al file locale pippo</a> cristina gena - matec 2005

48. HTML • LINK A IMMAGINI SUONI E ANIMAZIONI ESTERNE • Si possono visualizzare immagini, suoni, animazioni specificando nella URL il nome di un file corrispondente • I formati riconosciuti sono: • immagini: GIF, JPEG, BITMAP, PNG • suoni: AIFF, AU, WAV, MP3 • animazioni: .MOV (QuickTime) .AVI .MPEG cristina gena - matec 2005

49. HTML <a href="pippo.jpg"> apre l’ immagine di pippo </a> <a href="pippo.mpeg"> fa partire il filmato di pippo </a> <a href=“pippo.mp3"> fa partire la canzone di pippo </a> cristina gena - matec 2005

50. HTML • ATTRIBUTI DEL TAG A • <a href=“pippo.html” title=“vai all’home page di pippo” target=“_blank”> • href indirizzo del collegamento • title descrizione della destinazione • target destinazione: • _top, _parent, _self,  per ora non ci interessano • _blank  apre il collegamento in una nuova pagina cristina gena - matec 2005