marco gribaudo - thanks to c. gena e r. damiano 1 le basi del linguaggio html marco gribaudo...

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

1

Le basi del linguaggio HTML

Marco Gribaudomarcog@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 Damiano(http://www.di.unito.it/~rossana).

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

2

HTMLHyperText 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, ...

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

3

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.

home page:

link1

link2

pagina papers:

link3

pagina di unito

pagina del coreplink4

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

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.

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

5

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

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)

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

Architettura client-server

Server clientrequest

response

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

URLUn 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

Come funziona il Web

protocollo nome di dominio del sito nome del filepath

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 clientrequest(pagina)

elaborazione Server client

Server clientresponse(pagina)

?

pagina

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

10

HTML - HyperText Markup

LanguageHTML è 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…

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 l’elenco dei comandi supportati ed il loro significato

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

12

Visualizzare il codice HTML

Presa una qualsiasi pagina web…

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

13

Visualizzare il codice HTML

Selezionando la voce HTML dal menu’ visualizza...

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

14

Visualizzare il codice HTML

E’ possibile visualizzare il codice che la compone!

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!

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

16

Creare un file htmlIl codice HTML e’ costituito da testo

semplice: basta quindi un qualsiasi strumento per scrivere testo.

Editor di testo : NotepadWordpad

Salvare il file con l’estensione .html: nome_file.html

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

17

Uso dell’editor 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)

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

18

Regole di HTML

Non è sensibile alle maiuscole / minuscoleRiconosce un solo spazioI tag devono essere chiusiI valori degli attributi devono essere tra

virgoletteI tag sconosciuti al browser sono ignorati

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

19

Salvare il documento

salvate il documento come documento di testo, assegnandogli l’estensione .html

nb ricordatevi il percorso!

salvate il documento come documento di testo, assegnandogli l’estensione .html

nb ricordatevi il percorso!

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

20

Visualizzare il documento Il’estensione .html viene automaticamente associata al browser dal S.O.:

facendo doppio clic sull’icona del file, il file viene aperto con il browser

l’estensione .html viene automaticamente associata al browser dal S.O.:

facendo doppio clic sull’icona del file, il file viene aperto con il browser

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

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

22

HTMLUn documento HTML è costituito da due parti** 

<html> <head>

descrizione delle caratteristiche del documento</head>

<body>documento vero e proprio

</body></html>

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

23

HTMLHEAD

Vi possono essere numerosi comandi all’interno 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.

<head><title>master in tecnologia e comunicazione

multimediale </title></head>

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

24

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…

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

25

BODY

Tutto il testo che viene scritto all’interno del Body, viene visualizzato nella pagina WEB. In piu’ i comandi vengono interpretati ed eseguiti.

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

26

Caratteristiche dei tagI tag possono essere accompagnati da un

insieme di attributi:<tag attributo=“valore”>

contenuto</tag>

I tag possono essere annidati:<tag1>

<tag2> contenuto

</tag2> </tag1>

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

27

Attributi/valoriGli attributi contengono informazioni

aggiuntive sul tag

<tag attributo=“valore”>

contenuto</tag>

I loro valori possono essere espressi in modi alternativi (es. colore)

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

28

Regole per l’inserimento di attributi

Gli attributi si inseriscono all’interno dell’apertura del comando

Il loro ordine e’ irrilevante

Vi sono attributi obbligatori e facoltativi

<img src = “…”> obbligatorio<div padding = “…”> non obbligatorio

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">

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 neroes. #FFFFFF biancoes. #FF0000 rosso

 Sebbene sia importantissimo sapere come specificare i colori mischiando assieme i tre elementi primari, in questo corso non lo vedremo.

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

31

HTMLHEADERS - I titoli

<h1> titolo1 </h1>...

<h6> titolo6 </h6> permettono di indicare quali parti di testo vengono usatecome titoli OSS: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli 

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

32

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. • HTML non è sensibile agli spazi e alle linee vuote

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

33

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>

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

34

HTMLFORMATO

Esistono vari modi per cambiare il formato dei caratteri 

• Stili fisici• Stili Logici

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

35

HTMLSTILI FISICI

<b> testo </b> testo in grassetto

<i> testo </i> testo in corsivo

<u> testo </u> testo sottolineato (sconsigliato..) 

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

36

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)}

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

37

HTML

INDICI E PEDICI 

a<SUB> 1 </SUB> produce a1

b<SUP> 2 </SUP> produce b2

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

38

HTMLIL 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”>

Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier</font>

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

39

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>

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

40

HTMLLinee 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”

>

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

41

HTMLListe di elementi

Può essere utile poter costruire liste di elementi

HTML fornisce 2 tag per creare le liste

• LISTE NON NUMERATE

• <ul> unordered list

1. LISTE NUMERATE

2. <ol> ordered list

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

42

HTML1) Liste non numerate: <UL>

 Servono per specificare un elenco non ordinato di elementi. Ad esempio, nel menu di un ristorante che prevede due primi:

<ul>

<li> penne all’arrabbiata </li>

<li> lasagne al forno </li>

</ul>

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

43

HTML2) Liste numerate:<OL>

Specificano delle liste, i cui elementi sono preceduti da un numero progressivo (assegnato automaticamente).

<ol>

<li> penne all’arrabbiata </li>

<li> lasagne al forno </li>

</ol>

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

<!-- Questo è un commento e non si vede -->

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 <img>

l'immagine deve essere memorizzata su un file a parte

I browser supportano formati quali GIF, JPEG, PNG

Il nome dell’immagine viene specificato in un attributo del tag.

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

46

HTML

<img src=“pathname o URL dell'immagine”>

Generalmente i file contenenti le immagini si salvano nella stessa cartella in cui si inserisce il file HTML.

In questo caso come nome dell’immagine 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.

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

47

IMMAGINI

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

48

IMMAGINI

Se una immagine non viene visualizzata controllare:

- Che l’immagine sia salvata nella stessa cartella in cui e’ contenuto il file HTML

- Che il nome dell’immagine 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.

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

49

HTMLSuoni

È 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/

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:

<bgsound src="suoni/pippo.wav" loop="3">