Marco Gribaudo - thanks to C. Gena e R. Damiano 1 Le basi del linguaggio HTML Marco Gribaudo

Presentazione sul tema: "Marco Gribaudo - thanks to C. Gena e R. Damiano 1 Le basi del linguaggio HTML Marco Gribaudo"— Transcript della presentazione:

1 Marco Gribaudo - thanks to C. Gena e R. Damiano 1 Le basi del linguaggio HTML Marco Gribaudo marcog@di.unito.it@di.unito.it http://www.di.unito.it/~marcog/Savigliano P.s.: Queste slide sono state adattate da quelle della Prof. Cristina Gena (http://www.di.unito.it/~cgena), con spunti tratti dal materiale della Prof. Rossana Damianohttp://www.di.unito.it/~cgena (http://www.di.unito.it/~rossana).http://www.di.unito.it/~rossana

2 Marco Gribaudo - thanks to C. Gena e R. Damiano 2 HTML HyperText Markup Language E il linguaggio base per produrre documenti per World Wide Web (Internet) Documenti WEB: pagine ipertestuali che contengono contenuti multimediali: testo immagini suoni legami ipertestuali a -altre pagine -programmi -immagini, suoni,...

3 Marco Gribaudo - thanks to C. Gena e R. Damiano 3 HTML HyperText 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.testiparolehyperlinkrimandi home page: link1 link2 pagina papers: link3 pagina di unito pagina del corep link4

4 Marco Gribaudo - thanks to C. Gena e R. Damiano 4 HTML HyperText 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. informatico mezzi di comunicazione di massavideofotografie musica

5 Marco Gribaudo - thanks to C. Gena e R. Damiano 5

6 6 HTML HyperText 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)

7 Marco Gribaudo - thanks to C. Gena e R. Damiano 7 Un server è programma in ascolto su una porta TCP. Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con laiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con laiuto 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. Architettura client-server Server client request response

8 Marco Gribaudo - thanks to C. Gena e R. Damiano 8 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) è lindirizzo di una risorsa, per es., di una pagina Web. Ha la seguente forma: http://www.di.unito.it/cgena/index.html Come funziona il Web protocollo nome di dominio del sito nome del filepath

9 Marco Gribaudo - thanks to C. Gena e R. Damiano 9 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 Come funziona il Web Server client request (pagina) elaborazion e Server client Server client response (pagina) ? pagina

10 Marco Gribaudo - thanks to C. Gena e R. Damiano 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 informazioni I comandi (tag) generalmente hanno nomi mnemonici e significativi…

11 Marco Gribaudo - thanks to C. Gena e R. Damiano 11 Specifiche HTML 4 http://www.w3.org/TR/html4/ A questo indirizzo si trovano le specifiche del linguaggio: vale a dire lelenco dei comandi supportati ed il loro significato

12 Marco Gribaudo - thanks to C. Gena e R. Damiano 12 Visualizzare il codice HTML Presa una qualsiasi pagina web…

13 Marco Gribaudo - thanks to C. Gena e R. Damiano 13 Visualizzare il codice HTML Selezionando la voce HTML dal menu visualizza...

14 Marco Gribaudo - thanks to C. Gena e R. Damiano 14 Visualizzare il codice HTML E possibile visualizzare il codice che la compone!

15 Marco Gribaudo - thanks to C. Gena e R. Damiano 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 in questo corso non li vedremo!

16 Marco Gribaudo - thanks to C. Gena e R. Damiano 16 Creare un file html Il codice HTML e costituito da testo semplice: basta quindi un qualsiasi strumento per scrivere testo. Editor di testo : Notepad Wordpad Salvare il file con lestensione.html: nome_file.html

17 Marco Gribaudo - thanks to C. Gena e R. Damiano 17 Uso delleditor di testo scrivete il codice html senza usare nessun tipo di formattazione (grassetto, corsivo, colore) (eccetto a capo, spazi e maiuscole) scrivete il codice html senza usare nessun tipo di formattazione (grassetto, corsivo, colore) (eccetto a capo, spazi e maiuscole)

18 Marco Gribaudo - thanks to C. Gena e R. Damiano 18 Regole di HTML Non è sensibile alle maiuscole / minuscole Riconosce un solo spazio I tag devono essere chiusi I valori degli attributi devono essere tra virgolette I tag sconosciuti al browser sono ignorati

19 Marco Gribaudo - thanks to C. Gena e R. Damiano 19 Salvare il documento salvate il documento come documento di testo, assegnandogli lestensione.html nb ricordatevi il percorso! salvate il documento come documento di testo, assegnandogli lestensione.html nb ricordatevi il percorso!

20 Marco Gribaudo - thanks to C. Gena e R. Damiano 20 Visualizzare il documento I lestensione.html viene automaticamente associata al browser dal S.O.: facendo doppio clic sullicona del file, il file viene aperto con il browser lestensione.html viene automaticamente associata al browser dal S.O.: facendo doppio clic sullicona del file, il file viene aperto con il browser

21 Marco Gribaudo - thanks to C. Gena e R. Damiano 21 Visualizzare il documento II il browser analizza il documento html e ne visualizza il contenuto secondo le istruzioni fornite dai comandi che accompagnano il testo il menu Visualizza -> HTML di Explorer apre direttamente il file html con Notepad il browser analizza il documento html e ne visualizza il contenuto secondo le istruzioni fornite dai comandi che accompagnano il testo il menu Visualizza -> HTML di Explorer apre direttamente il file html con Notepad

22 Marco Gribaudo - thanks to C. Gena e R. Damiano 22 HTML Un documento HTML è costituito da due parti** descrizione delle caratteristiche del documento documento vero e proprio

23 Marco Gribaudo - thanks to C. Gena e R. Damiano 23 HTML HEAD Vi possono essere numerosi comandi allinterno di un blocco head, ma noi vedremo solamente il comando title, utilizzato per specificare il titolo del documento che verrà visualizzato come titolo nella finestra del browser. master in tecnologia e comunicazione multimediale

24 Marco Gribaudo - thanks to C. Gena e R. Damiano 24 HTML BODY Contiene tutto quello che verrà visualizzato secondo le direttive di formattazione. corpo della pagina Vediamo cosa si può inserire allinterno di body…

25 Marco Gribaudo - thanks to C. Gena e R. Damiano 25 BODY Tutto il testo che viene scritto allinterno del Body, viene visualizzato nella pagina WEB. In piu i comandi vengono interpretati ed eseguiti.

26 Marco Gribaudo - thanks to C. Gena e R. Damiano 26 Caratteristiche dei tag I tag possono essere accompagnati da un insieme di attributi: contenuto I tag possono essere annidati: contenuto

27 Marco Gribaudo - thanks to C. Gena e R. Damiano 27 Attributi/valori Gli attributi contengono informazioni aggiuntive sul tag contenuto I loro valori possono essere espressi in modi alternativi (es. colore)

28 Marco Gribaudo - thanks to C. Gena e R. Damiano 28 Regole per linserimento di attributi Gli attributi si inseriscono allinterno dellapertura del comando Il loro ordine e irrilevante Vi sono attributi obbligatori e facoltativi obbligatorio non obbligatorio

29 Marco Gribaudo - thanks to C. Gena e R. Damiano 29 HTML ATTRIBUTI DI BODY Il tag BODY ha della opzioni che permettono di stabilire…. <body bgcolor="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">

30 Marco Gribaudo - thanks to C. Gena e R. Damiano 30 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 Sebbene sia importantissimo sapere come specificare i colori mischiando assieme i tre elementi primari, in questo corso non lo vedremo.

31 Marco Gribaudo - thanks to C. Gena e R. Damiano 31 HTML HEADERS - I titoli titolo1... titolo6 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

32 Marco Gribaudo - thanks to C. Gena e R. Damiano 32 HTML HyperText Markup Language COMANDI PER ANDARE A CAPO a capo senza saltare una riga a capo saltando una riga per ogni paragrafo (separato da una linea) HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi. HTML non è sensibile agli spazi e alle linee vuote

33 Marco Gribaudo - thanks to C. Gena e R. Damiano 33 HTML L ALLINEAMENTO il tag possiede un attributo align per l'allineamento del testo nel paragrafo testo allineato a sinistra testo allineato a destra testo allineato al centro Lallineamento al centro si può ottenere anche con il tag testo da centrare

34 Marco Gribaudo - thanks to C. Gena e R. Damiano 34 HTML FORMATO Esistono vari modi per cambiare il formato dei caratteri Stili fisici Stili Logici

35 Marco Gribaudo - thanks to C. Gena e R. Damiano 35 HTML STILI FISICI testo testo in grassetto testo testo in corsivo testo testo sottolineato (sconsigliato..)

36 Marco Gribaudo - thanks to C. Gena e R. Damiano 36 HTML STILI LOGICI testo {grassetto} testo {emphasized (corsivo)} testo {per codice di computer (font con caratteri a grandezza fissa)}

37 Marco Gribaudo - thanks to C. Gena e R. Damiano 37 HTML INDICI E PEDICI a 1 produce a 1 b 2 produce b 2

38 Marco Gribaudo - thanks to C. Gena e R. Damiano 38 HTML IL CARATTERE … Questo tag supporta 3 attributi size per cambiare la dimensione color per cambiare il colore face per cambiare il font Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier

39 Marco Gribaudo - thanks to C. Gena e R. Damiano 39 HTML HyperText Markup Language IL CARATTERE … dimensioni dei caratteri da 1 (piccolo) a 7 (grande) testo a dimensione 3 dim+1 del carattere stabilito prima

40 Marco Gribaudo - thanks to C. Gena e R. Damiano 40 HTML Linee orizzontali Per separare parti di testo si può usare il tag 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 >

41 Marco Gribaudo - thanks to C. Gena e R. Damiano 41 HTML Liste di elementi Può essere utile poter costruire liste di elementi HTML fornisce 2 tag per creare le liste LISTE NON NUMERATE unordered list 1.LISTE NUMERATE 2. ordered list

42 Marco Gribaudo - thanks to C. Gena e R. Damiano 42 HTML 1) Liste non numerate: Servono per specificare un elenco non ordinato di elementi. Ad esempio, nel menu di un ristorante che prevede due primi: penne allarrabbiata lasagne al forno

43 Marco Gribaudo - thanks to C. Gena e R. Damiano 43 HTML 2) Liste numerate: Specificano delle liste, i cui elementi sono preceduti da un numero progressivo (assegnato automaticamente). penne allarrabbiata lasagne al forno

44 Marco Gribaudo - thanks to C. Gena e R. Damiano 44 HTML Commenti Può essere utile inserire dei commenti nel documento che non sono visualizzati dal browser

45 Marco Gribaudo - thanks to C. Gena e R. Damiano 45 HTML Immagini Fino ad ora abbiamo visto come si può formattare il testo; HTML permette di inserire immagini usando il tag l'immagine deve essere memorizzata su un file a parte I browser supportano formati quali GIF, JPEG, PNG Il nome dellimmagine viene specificato in un attributo del tag.

46 Marco Gribaudo - thanks to C. Gena e R. Damiano 46 HTML Generalmente i file contenenti le immagini si salvano nella stessa cartella in cui si inserisce il file HTML. In questo caso come nome dellimmagine e sufficiente inserire il nome del file. Se i file contenenti le immagini sono salvati in posizioni diverse, occorre specificire il percorso con cui raggiungerli – cosa decisamente piu complicata.

47 Marco Gribaudo - thanks to C. Gena e R. Damiano 47 IMMAGINI

48 Marco Gribaudo - thanks to C. Gena e R. Damiano 48 IMMAGINI Se una immagine non viene visualizzata controllare: -Che limmagine sia salvata nella stessa cartella in cui e contenuto il file HTML -Che il nome dellimmagine sia corretto (i.e. che nel comando IMG ci sia scritto lo stesso nome del file contenuto nella cartella, compresi spazi ed estensione). - Che si siano chiuse correttamente le virgolette ed il tag.

49 Marco Gribaudo - thanks to C. Gena e R. Damiano 49 HTML Suoni È possibile associare suoni alla presentazione di una pagina usando il tag 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/

50 Marco Gribaudo - thanks to C. Gena e R. Damiano 50 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: