il linguaggio html - parte 2 corso ifts informatica, modulo 3 – progettazione pagine web statiche...

Il linguaggio HTML - Parte 2Il linguaggio HTML - Parte 2

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche

(50 ore)

Corso IFTSInformatica, Modulo 3 – Progettazione pagine web statiche

(50 ore)

Dott. Chiara Braghin [email protected]

Dott. Chiara Braghin [email protected]

C. Braghin - HTML, Part 2 2

Elenchi all’interno di <BODY>Elenchi all’interno di <BODY>

Un elenco è una sequenza di paragrafi, ognuno dei quali puo' essere preceduto da un carattere speciale

Elenco non ordinato da un numero crescente

Elenco ordinato oppure anche da nulla

Elenco di definizioni

Come vengono descritti gli elenchi in HTML?

Un elenco è una sequenza di paragrafi, ognuno dei quali puo' essere preceduto da un carattere speciale

Elenco non ordinato da un numero crescente

Elenco ordinato oppure anche da nulla

Elenco di definizioni

Come vengono descritti gli elenchi in HTML?


Elenchi non ordinati - <UL>Elenchi non ordinati - <UL>

Elenchi puntati da utilizzare quando vogliamo dei punti per il nostro elenco, senza un ordine ben preciso.

<UL> - (Unordered List) tag per la definizione della lista, necessita anche del tag di chiusura </UL>

<LI> - (List Item) ogni elemento di lista è compreso all'interno di un elemento <LI>, il tag di chiusura non è obbligatorio

Elenchi puntati da utilizzare quando vogliamo dei punti per il nostro elenco, senza un ordine ben preciso.

<UL> - (Unordered List) tag per la definizione della lista, necessita anche del tag di chiusura </UL>

<LI> - (List Item) ogni elemento di lista è compreso all'interno di un elemento <LI>, il tag di chiusura non è obbligatorio

CODICE:

Oggi devo comprare: <UL> <LI>Mele</LI> <LI>Pere</LI> <LI>Angurie</LI> <LI>Limoni</LI> </UL>

RISULTATO:

Oggi devo comprare: Mele Pere Angurie Limoni


Elenchi ordinati - <OL>Elenchi ordinati - <OL>

Elenchi numerati da utilizzare quando vogliamo dei punti che abbiano una gerarchia o un ordine ben preciso

<OL> - ordered list, anche in questo caso <OL> richiede il tag di chiusura e ogni elemento di lista è compreso all'interno di un elemento <LI> (List Item)

Elenchi numerati da utilizzare quando vogliamo dei punti che abbiano una gerarchia o un ordine ben preciso

<OL> - ordered list, anche in questo caso <OL> richiede il tag di chiusura e ogni elemento di lista è compreso all'interno di un elemento <LI> (List Item)

CODICE:Per piantare un chiodo devo:

<OL> <LI>Prendere martello e chiodo</LI> <LI>Sollevare il martello</LI> <LI>Colpire ripetutamente il chiodo col martello finché questo non è piantato</LI> </OL>

RISULTATO:

Per piantare un chiodo devo:

1. Prendere martello e chiodo

2. Sollevare il martello

3. Colpire ripetutamente il chiodo col martello finché questo non è piantato


Elenchi di definizioni - <DL>Elenchi di definizioni - <DL>

Elenchi in cui non si utilizza alcun tipo di punto, utili soprattutto per definire dei termini

<DL> - definition list, tag principale che richiede il tag di chiusura; tutti gli altri tag sono inclusi al suo interno <DT> indica il termine da definire

<DD> indica la definizione

Esempio1: elenchi.html

Elenchi in cui non si utilizza alcun tipo di punto, utili soprattutto per definire dei termini

<DL> - definition list, tag principale che richiede il tag di chiusura; tutti gli altri tag sono inclusi al suo interno <DT> indica il termine da definire

<DD> indica la definizione

Esempio1: elenchi.html

CODICE:

<DL> <DT>Uomo</DT> <DD>Essere vivente, bipede. </DD>

</DL>

RISULTATO:

UomoEssere vivente, bipede.


Esercizi (1)Esercizi (1)

1) Aggiungere alla pagina web contenente il vostro cv almeno due liste che indichino: i moduli del corso IFTS seguiti fino ad ora (nell’ordine in cui li

avete seguiti) i vostri hobbies

2) Creare un documento HTML all’interno del quale: creare un paragrafo allineato a sinistra creare una lista di definizioni che contenga i nomi di alcune

regioni italiane come elemento <DT> ogni elemento <DD> dovrà contenere una lista numerata con

un elenco di città e località della regione da visitare creare un paragrafo allineato al centro che contenga un

elenco numerato in cui, per ogni punto <LI> è contenuto un elenco puntato

1) Aggiungere alla pagina web contenente il vostro cv almeno due liste che indichino: i moduli del corso IFTS seguiti fino ad ora (nell’ordine in cui li

avete seguiti) i vostri hobbies

2) Creare un documento HTML all’interno del quale: creare un paragrafo allineato a sinistra creare una lista di definizioni che contenga i nomi di alcune

regioni italiane come elemento <DT> ogni elemento <DD> dovrà contenere una lista numerata con

un elenco di città e località della regione da visitare creare un paragrafo allineato al centro che contenga un

elenco numerato in cui, per ogni punto <LI> è contenuto un elenco puntato


Tabelle (1) - Tag PrincipaliTabelle (1) - Tag Principali

Le tabelle servono per tabulare colonne di dati ma anche come contenitori per testi ed immagini per migliorarne la disposizione nella pagina (in questo caso la tabella deve essere resa invisibile)

I tag principali (ed essenziali!) per creare una tabella sono: <TABLE> - tag principale che racchiude l’intera tabella,

opzionalemente specifica le dimensioni della tabella e ne definisce le proprietà; richiede il tag di chiusura

<TR> - table raw, tag che definisce e racchiude l’intera riga <TD> - table data, tag che definisce e racchiude una singola cella

Nota: </TR> e </TD> sono facoltativi Intere tabelle possono poi essere a loro volta contenute in celle di altre

tabelle, quindi annidate come scatole cinesi Si possono formattare le tabelle con un gran numero di attributi (bordo,

larghezza, spaziatura, allineamento, ecc.) che riguardano la tabella nel suo insieme oppure le singole righe <TR> o le singole celle <TD>

Le tabelle servono per tabulare colonne di dati ma anche come contenitori per testi ed immagini per migliorarne la disposizione nella pagina (in questo caso la tabella deve essere resa invisibile)

I tag principali (ed essenziali!) per creare una tabella sono: <TABLE> - tag principale che racchiude l’intera tabella,

opzionalemente specifica le dimensioni della tabella e ne definisce le proprietà; richiede il tag di chiusura

<TR> - table raw, tag che definisce e racchiude l’intera riga <TD> - table data, tag che definisce e racchiude una singola cella

Nota: </TR> e </TD> sono facoltativi Intere tabelle possono poi essere a loro volta contenute in celle di altre

tabelle, quindi annidate come scatole cinesi Si possono formattare le tabelle con un gran numero di attributi (bordo,

larghezza, spaziatura, allineamento, ecc.) che riguardano la tabella nel suo insieme oppure le singole righe <TR> o le singole celle <TD>


Tabelle (2) - Primo esempioTabelle (2) - Primo esempio

<TABLE><TR><TD>Qui viene messo il contenuto della tabella </TD></TR></TABLE>

<TABLE><TR><TD>Qui viene messo il contenuto della tabella </TD></TR></TABLE>

tag di chiusura non obbligatori ma utili

tag principale

Esempio2: tabella1.html


Tabelle (3) - Altri tag opzionaliTabelle (3) - Altri tag opzionali

<CAPTION> contenuto in <TABLE> definisce il titolo della tabella puo' avere un attributo -- ALIGN -- che specifica dove va

posizionato, i valori possibili sono: "top" (sopra) "bottom"(sotto) "left" (a sinistra) "right" (a destra)

<TH> (table header) Contenuto in <TR> al posto di <TD>


<CAPTION> contenuto in <TABLE> definisce il titolo della tabella puo' avere un attributo -- ALIGN -- che specifica dove va

posizionato, i valori possibili sono: "top" (sopra) "bottom"(sotto) "left" (a sinistra) "right" (a destra)

<TH> (table header) Contenuto in <TR> al posto di <TD>


<TABLE BORDER="BORDER"> <CAPTION> titolo della tabella (facoltativo) </CAPTION> <TR> <TH> intestazione della colonna </TH> <TH> intestazione della colonna </TH></TR> …


Tabelle (4) - Attributi PrincipaliTabelle (4) - Attributi Principali

BORDER=“n” permette di impostare lo spessore del bordo perimetrale (esterno) che

contorna tutte le celle facenti parte della tabella, di default il valore è 0, quindi le linee divisorie della tabella non vengono mostrate. I bordi interni hanno sempre spessore 1 quando viene definito BORDER, uguale a 0 di default

la specifica HTML 4.0 definisce due attributi del tag <TABLE>, FRAME e RULES, che permettono di utilizzare delle combinazioni predefinite di bordi. Non tutti i browser riconoscono questi attributi.

FRAME ha 8 possibili valori (BOX, VOID, HSIDES, VSIDES, ABOVE, BELOW, LHS, RHS) che che impostano delle combinazioni per il bordo esterno

RULES ha quattro possibili valori (ALL, NONE, COLS, ROWS) che impostano delle

combinazioni per le linee interne della tabella


BORDER=“n” permette di impostare lo spessore del bordo perimetrale (esterno) che

contorna tutte le celle facenti parte della tabella, di default il valore è 0, quindi le linee divisorie della tabella non vengono mostrate. I bordi interni hanno sempre spessore 1 quando viene definito BORDER, uguale a 0 di default

la specifica HTML 4.0 definisce due attributi del tag <TABLE>, FRAME e RULES, che permettono di utilizzare delle combinazioni predefinite di bordi. Non tutti i browser riconoscono questi attributi.

FRAME ha 8 possibili valori (BOX, VOID, HSIDES, VSIDES, ABOVE, BELOW, LHS, RHS) che che impostano delle combinazioni per il bordo esterno

RULES ha quattro possibili valori (ALL, NONE, COLS, ROWS) che impostano delle

combinazioni per le linee interne della tabella



Tabelle (5) - Attributi PrincipaliTabelle (5) - Attributi Principali

WIDTH=“n” permette di definire la larghezza di una tabella puo’ venire utilizzato anche come attributo di <TR>, <TD> e <TH> (in

questo caso esiste anche l’attributo HEIGHT) diverse unità di misura:

valore assoluto in termini di pixel in termini percentuali

BACKGROUNG e BGCOLOR permettono rispettivamente di inserire un'immagine o un colore come

sfondo della tabella o del singolo elemento della tabella per assegnare uno stesso colore di sfondo a tutta la tabella l’attributo

BGCOLOR va specificato nel tag <TABLE> per assegnare un colore di sfondo solo ad una cella l’attributo BGCOLOR

va specificato nel tag <TD> o <TH> della cella in questione NOTA:NOTA: tanti attributi di <TABLE> sono stati deprecati dalla versione

HTML 4.0 perché l’effetto è ottenibile con fogli di stile Esempio5: tabella4.html

WIDTH=“n” permette di definire la larghezza di una tabella puo’ venire utilizzato anche come attributo di <TR>, <TD> e <TH> (in

questo caso esiste anche l’attributo HEIGHT) diverse unità di misura:

valore assoluto in termini di pixel in termini percentuali

BACKGROUNG e BGCOLOR permettono rispettivamente di inserire un'immagine o un colore come

sfondo della tabella o del singolo elemento della tabella per assegnare uno stesso colore di sfondo a tutta la tabella l’attributo

BGCOLOR va specificato nel tag <TABLE> per assegnare un colore di sfondo solo ad una cella l’attributo BGCOLOR

va specificato nel tag <TD> o <TH> della cella in questione NOTA:NOTA: tanti attributi di <TABLE> sono stati deprecati dalla versione

HTML 4.0 perché l’effetto è ottenibile con fogli di stile Esempio5: tabella4.html


Tabelle (6) - Altri AttributiTabelle (6) - Altri Attributi

CELLPADDING=“n” specifica la quantità di spazio vuoto lasciato tra i bordi delle

celle di una tabella e il dato vero e proprio in esse contenuto. Il valore viene espresso in numero di pixel, per default è 1

CELLSPACING=“m” specifica la quantità di spazio vuoto da lasciare tra le singole

celle di dati di una tabella (ossia fra le cornici interne delle diverse celle), e fra le celle e la cornice esterna. Il valore viene espresso in numero di pixel, per default è 2


CELLPADDING=“n” specifica la quantità di spazio vuoto lasciato tra i bordi delle

celle di una tabella e il dato vero e proprio in esse contenuto. Il valore viene espresso in numero di pixel, per default è 1

CELLSPACING=“m” specifica la quantità di spazio vuoto da lasciare tra le singole

celle di dati di una tabella (ossia fra le cornici interne delle diverse celle), e fra le celle e la cornice esterna. Il valore viene espresso in numero di pixel, per default è 2



Tabelle (7) - Attributi di <TR>Tabelle (7) - Attributi di <TR>

L'elemento <TR> definisce una riga della tabella. Puo' prendere gli attributi ALIGN e VALIGN, che definiscono le proprietà di allineamento per le celle contenute in quella riga:

ALIGN controlla l’allineamento orizzontale, i possibili valori sono left,

right e center (sinistra, destra, centro) VALIGN

controlla l’allineamento verticale, i possibili valori sono top, bottom e middle (alto, basso, centro)

I valori di default sono ALIGN="left" e VALIGN="middle" Le caselle della tabella, <TD> e <TH>, possono esse stesse

prendere attributi per specificare l'allineamento dei dati al loro interno. Questo sovrascrive gli eventuali attributi associati all'elemento <TR>


L'elemento <TR> definisce una riga della tabella. Puo' prendere gli attributi ALIGN e VALIGN, che definiscono le proprietà di allineamento per le celle contenute in quella riga:

ALIGN controlla l’allineamento orizzontale, i possibili valori sono left,

right e center (sinistra, destra, centro) VALIGN

controlla l’allineamento verticale, i possibili valori sono top, bottom e middle (alto, basso, centro)

I valori di default sono ALIGN="left" e VALIGN="middle" Le caselle della tabella, <TD> e <TH>, possono esse stesse

prendere attributi per specificare l'allineamento dei dati al loro interno. Questo sovrascrive gli eventuali attributi associati all'elemento <TR>



Tabelle (8) - Attributi di <TD> e <TH>Tabelle (8) - Attributi di <TD> e <TH>

ROWSPAN=“n” e COLSPAN=“m” permettono di creare celle di più righe e/o colonne. di default, una casella è un’intersezione tra una riga e una colonna.

A volte potreste volere una casella che occupa anche la riga sottostante oppure la colonna a destra di essa.

ROWSPAN indica quante righe (contando verso il basso) sono occupate dalla cella

COLSPAN indica quante colonne (verso destra) occupa la cella

Quando si usano questi attributi bisogna fare attenzione che in ogni riga il numero di colonne occupate corrisponda al numero effettivo di colonne della tabella, viceversa per le righe


ROWSPAN=“n” e COLSPAN=“m” permettono di creare celle di più righe e/o colonne. di default, una casella è un’intersezione tra una riga e una colonna.

A volte potreste volere una casella che occupa anche la riga sottostante oppure la colonna a destra di essa.

ROWSPAN indica quante righe (contando verso il basso) sono occupate dalla cella

COLSPAN indica quante colonne (verso destra) occupa la cella

Quando si usano questi attributi bisogna fare attenzione che in ogni riga il numero di colonne occupate corrisponda al numero effettivo di colonne della tabella, viceversa per le righe



Tabelle (9) - NoteTabelle (9) - Note

Le tabelle possono essere annidate tra loro a piacere Internet Explorer accetta 3 ulteriori attributi permettono di

selezionare il colore del bordo : BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT

Gli elementi <TD> e <TH> di solito non richiedono tag di chiusura. E’ consigliabile farlo -- il meccanismo che gestisce la formattazione delle tabelle di solito è confuso se mancano i tag di chiusura In particolare dovreste sempre usare i tag di chiusura se usate

tabelle all'interno di tabelle -- in questa situazione infatti, il browser senza tag di chiusura non riuscirà a visualizzare propriamente il vostro lavoro.

Di default le tabelle non hanno bordi visibili e sono allineate a sinistra nello schermo (usare <CENTER> per centrarle)


Le tabelle possono essere annidate tra loro a piacere Internet Explorer accetta 3 ulteriori attributi permettono di

selezionare il colore del bordo : BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT

Gli elementi <TD> e <TH> di solito non richiedono tag di chiusura. E’ consigliabile farlo -- il meccanismo che gestisce la formattazione delle tabelle di solito è confuso se mancano i tag di chiusura In particolare dovreste sempre usare i tag di chiusura se usate

tabelle all'interno di tabelle -- in questa situazione infatti, il browser senza tag di chiusura non riuscirà a visualizzare propriamente il vostro lavoro.

Di default le tabelle non hanno bordi visibili e sono allineate a sinistra nello schermo (usare <CENTER> per centrarle)



Immagini in <BODY> (1)Immagini in <BODY> (1) <IMG>

Per inserire un’immagine si utilizza il tag <IMG> e il suo attributo SRC per identificare quale immagine si vuole visualizzare

Non aggiunge nessuna interruzione di riga nè prima nè dopo l’immagine, pertanto essa risulta visualizzata in linea con il testo (altrimenti usare <P> o <BR>, e <CENTER> se si vuole che l’immagine sia centrata)

Il comando completo è <IMG SRC="xxx.yyy">, dove: xxx è il nome dell’immagine yyy la sua estensione. Le immagini consentite dal linguaggio html

sono .gif, .jpg e .png Il nome del file deve essere relativo al file da cui viene chiamato, oppure viene

dato l’indirizzo assoluto nel caso in cui l’immagine si trovi su di un altro server SRC="images/copper.gif" significa che l'immagine si trova in una

cartella posizionata sotto quella in cui si trova il documento html che la richiama. Ovviamente, si può scendere (o salire) di tanti livelli quanto sono necessari

SRC=“http://www.altrosito.it/immagini/foto.jpg” significa che l’immagine si trova nella cartella immagini del server www.altrosito.it

Esempio10: immagine1.html

<IMG> Per inserire un’immagine si utilizza il tag <IMG> e il suo attributo SRC per

identificare quale immagine si vuole visualizzare Non aggiunge nessuna interruzione di riga nè prima nè dopo l’immagine,

pertanto essa risulta visualizzata in linea con il testo (altrimenti usare <P> o <BR>, e <CENTER> se si vuole che l’immagine sia centrata)

Il comando completo è <IMG SRC="xxx.yyy">, dove: xxx è il nome dell’immagine yyy la sua estensione. Le immagini consentite dal linguaggio html

sono .gif, .jpg e .png Il nome del file deve essere relativo al file da cui viene chiamato, oppure viene

dato l’indirizzo assoluto nel caso in cui l’immagine si trovi su di un altro server SRC="images/copper.gif" significa che l'immagine si trova in una

cartella posizionata sotto quella in cui si trova il documento html che la richiama. Ovviamente, si può scendere (o salire) di tanti livelli quanto sono necessari

SRC=“http://www.altrosito.it/immagini/foto.jpg” significa che l’immagine si trova nella cartella immagini del server www.altrosito.it


http://www.altrosito.it/

























Immagini in <BODY> (2) - AttributiImmagini in <BODY> (2) - Attributi

Agli attributi possibili del tag <IMG>, a parte SRC che è obbligatorio, sono: WIDTH

stabilisce la larghezza dell’immagine HEIGHT

stabilisce l’altezza dell’immagine BORDER

definisce l’altezza del bordo intorno all’immagine ALT

permette di specificare un testo alternativo che viene visualizzato al posto dell’immagine qualora essa non possa essere mostrata

ALIGN=“bottom”| “middle”| “top”| “left”| “right” permette di disporre in diversi modi il testo attorno all’immagine. Di

default il valore è BOTTOM


Agli attributi possibili del tag <IMG>, a parte SRC che è obbligatorio, sono: WIDTH

stabilisce la larghezza dell’immagine HEIGHT

stabilisce l’altezza dell’immagine BORDER

definisce l’altezza del bordo intorno all’immagine ALT

permette di specificare un testo alternativo che viene visualizzato al posto dell’immagine qualora essa non possa essere mostrata

ALIGN=“bottom”| “middle”| “top”| “left”| “right” permette di disporre in diversi modi il testo attorno all’immagine. Di

default il valore è BOTTOM




3) Provare a scrivere una tabella con un aspetto simile alla seguente:

3) Provare a scrivere una tabella con un aspetto simile alla seguente:

Giorno Orario Corso

Lunedì 9-13 Inglese

Martedì 10-15 Matematica

Mercoledì 8-12 Latino



4) Realizzare una tabella di 4 righe e 3 colonne, in cui: ogni riga abbia un colore di sfondo diverso la seconda riga sia costituita da una singola cella la seconda cella della terza riga abbia come sfondo

un’immagine a piacere la terza cella della terza riga contenga un elenco non

ordinato il testo all’interno delle celle della prima riga sia allineato al

centro il testo all’interno delle celle dell’ultima riga sia allineato a

sinistra

4) Realizzare una tabella di 4 righe e 3 colonne, in cui: ogni riga abbia un colore di sfondo diverso la seconda riga sia costituita da una singola cella la seconda cella della terza riga abbia come sfondo

un’immagine a piacere la terza cella della terza riga contenga un elenco non

ordinato il testo all’interno delle celle della prima riga sia allineato al

centro il testo all’interno delle celle dell’ultima riga sia allineato a

sinistra



5) Attraverso un motore di ricerca (ad es. Google) recuperate un'immagine di alcuni pianeti del sistema solare (oppure utilizzate quelle nella cartella pianeti): creare una pagina HTML avente come sfondo una foto del cielo profondo nel corpo del testo inserire le immagini dei pianeti allineandole al centro, a

destra e sinistra provare ad allineare il testo alle immagini in vario modi utilizzando gli

attributi del tag IMG ciascuna immagine e il corrispondente testo deve essere separato dalla

successiva tramite una linea orizzontale

6) Fare esercizio descritto in file eserciziotabella.html in cartella esercizio_tabelle.

5) Attraverso un motore di ricerca (ad es. Google) recuperate un'immagine di alcuni pianeti del sistema solare (oppure utilizzate quelle nella cartella pianeti): creare una pagina HTML avente come sfondo una foto del cielo profondo nel corpo del testo inserire le immagini dei pianeti allineandole al centro, a

destra e sinistra provare ad allineare il testo alle immagini in vario modi utilizzando gli

attributi del tag IMG ciascuna immagine e il corrispondente testo deve essere separato dalla

successiva tramite una linea orizzontale

6) Fare esercizio descritto in file eserciziotabella.html in cartella esercizio_tabelle.

il linguaggio html - parte 2 corso ifts informatica, modulo 3 – progettazione pagine web statiche...

Documents