La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) Dott. Chiara Braghin

Presentazioni simili


Presentazione sul tema: "Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) Dott. Chiara Braghin"— Transcript della presentazione:

1 Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) Dott. Chiara Braghin

2 C. Braghin - HTML, Part 2 2 Elenchi allinterno di 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?

3 C. Braghin - HTML, Part 2 3 Elenchi non ordinati - Elenchi puntati da utilizzare quando vogliamo dei punti per il nostro elenco, senza un ordine ben preciso. - (Unordered List) tag per la definizione della lista, necessita anche del tag di chiusura - (List Item) ogni elemento di lista è compreso all'interno di un elemento, il tag di chiusura non è obbligatorio Elenchi puntati da utilizzare quando vogliamo dei punti per il nostro elenco, senza un ordine ben preciso. - (Unordered List) tag per la definizione della lista, necessita anche del tag di chiusura - (List Item) ogni elemento di lista è compreso all'interno di un elemento, il tag di chiusura non è obbligatorio CODICE: Oggi devo comprare: Mele Pere Angurie Limoni RISULTATO: Oggi devo comprare: Mele Pere Angurie Limoni

4 C. Braghin - HTML, Part 2 4 Elenchi ordinati - Elenchi numerati da utilizzare quando vogliamo dei punti che abbiano una gerarchia o un ordine ben preciso - ordered list, anche in questo caso richiede il tag di chiusura e ogni elemento di lista è compreso all'interno di un elemento (List Item) Elenchi numerati da utilizzare quando vogliamo dei punti che abbiano una gerarchia o un ordine ben preciso - ordered list, anche in questo caso richiede il tag di chiusura e ogni elemento di lista è compreso all'interno di un elemento (List Item) CODICE: Per piantare un chiodo devo: Prendere martello e chiodo Sollevare il martello Colpire ripetutamente il chiodo col martello finché questo non è piantato 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

5 C. Braghin - HTML, Part 2 5 Elenchi di definizioni - Elenchi in cui non si utilizza alcun tipo di punto, utili soprattutto per definire dei termini - definition list, tag principale che richiede il tag di chiusura; tutti gli altri tag sono inclusi al suo interno indica il termine da definire indica la definizione Esempio1: elenchi.html Elenchi in cui non si utilizza alcun tipo di punto, utili soprattutto per definire dei termini - definition list, tag principale che richiede il tag di chiusura; tutti gli altri tag sono inclusi al suo interno indica il termine da definire indica la definizione Esempio1: elenchi.html CODICE: Uomo Essere vivente, bipede. RISULTATO: Uomo Essere vivente, bipede.

6 C. Braghin - HTML, Part 2 6 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 (nellordine in cui li avete seguiti) i vostri hobbies 2) Creare un documento HTML allinterno del quale: creare un paragrafo allineato a sinistra creare una lista di definizioni che contenga i nomi di alcune regioni italiane come elemento ogni elemento 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 è 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 (nellordine in cui li avete seguiti) i vostri hobbies 2) Creare un documento HTML allinterno del quale: creare un paragrafo allineato a sinistra creare una lista di definizioni che contenga i nomi di alcune regioni italiane come elemento ogni elemento 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 è contenuto un elenco puntato

7 C. Braghin - HTML, Part 2 7 Tabelle (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: - tag principale che racchiude lintera tabella, opzionalemente specifica le dimensioni della tabella e ne definisce le proprietà; richiede il tag di chiusura - table raw, tag che definisce e racchiude lintera riga - table data, tag che definisce e racchiude una singola cella Nota: e 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 o le singole celle 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: - tag principale che racchiude lintera tabella, opzionalemente specifica le dimensioni della tabella e ne definisce le proprietà; richiede il tag di chiusura - table raw, tag che definisce e racchiude lintera riga - table data, tag che definisce e racchiude una singola cella Nota: e 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 o le singole celle

8 C. Braghin - HTML, Part 2 8 Tabelle (2) - Primo esempio Qui viene messo il contenuto della tabella Qui viene messo il contenuto della tabella tag di chiusura non obbligatori ma utili tag principale Esempio2: tabella1.html

9 C. Braghin - HTML, Part 2 9 Tabelle (3) - Altri tag opzionali contenuto in 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) (table header) Contenuto in al posto di Esempio3: tabella2.html contenuto in 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) (table header) Contenuto in al posto di Esempio3: tabella2.html titolo della tabella (facoltativo) intestazione della colonna …

10 C. Braghin - HTML, Part 2 10 Tabelle (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, 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 Esempio4: tabella3.html 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, 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 Esempio4: tabella3.html

11 C. Braghin - HTML, Part 2 11 Tabelle (5) - Attributi Principali WIDTH=n permette di definire la larghezza di una tabella puo venire utilizzato anche come attributo di, e (in questo caso esiste anche lattributo 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 lattributo BGCOLOR va specificato nel tag per assegnare un colore di sfondo solo ad una cella lattributo BGCOLOR va specificato nel tag o della cella in questione NOTA: NOTA: tanti attributi di sono stati deprecati dalla versione HTML 4.0 perché leffetto è 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, e (in questo caso esiste anche lattributo 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 lattributo BGCOLOR va specificato nel tag per assegnare un colore di sfondo solo ad una cella lattributo BGCOLOR va specificato nel tag o della cella in questione NOTA: NOTA: tanti attributi di sono stati deprecati dalla versione HTML 4.0 perché leffetto è ottenibile con fogli di stile Esempio5: tabella4.html

12 C. Braghin - HTML, Part 2 12 Tabelle (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 Esempio6: tabella5.html 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 Esempio6: tabella5.html

13 C. Braghin - HTML, Part 2 13 Tabelle (7) - Attributi di L'elemento 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 lallineamento orizzontale, i possibili valori sono left, right e center (sinistra, destra, centro) VALIGN controlla lallineamento 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, e, possono esse stesse prendere attributi per specificare l'allineamento dei dati al loro interno. Questo sovrascrive gli eventuali attributi associati all'elemento Esempio7: tabella6.html L'elemento 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 lallineamento orizzontale, i possibili valori sono left, right e center (sinistra, destra, centro) VALIGN controlla lallineamento 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, e, possono esse stesse prendere attributi per specificare l'allineamento dei dati al loro interno. Questo sovrascrive gli eventuali attributi associati all'elemento Esempio7: tabella6.html

14 C. Braghin - HTML, Part 2 14 Tabelle (8) - Attributi di e ROWSPAN=n e COLSPAN=m permettono di creare celle di più righe e/o colonne. di default, una casella è unintersezione 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 Esempio8: tabella7.html ROWSPAN=n e COLSPAN=m permettono di creare celle di più righe e/o colonne. di default, una casella è unintersezione 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 Esempio8: tabella7.html

15 C. Braghin - HTML, Part 2 15 Tabelle (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 e 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 per centrarle) Esempio9: tabella8.html 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 e 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 per centrarle) Esempio9: tabella8.html

16 C. Braghin - HTML, Part 2 16 Immagini in (1) Per inserire unimmagine si utilizza il tag e il suo attributo SRC per identificare quale immagine si vuole visualizzare Non aggiunge nessuna interruzione di riga nè prima nè dopo limmagine, pertanto essa risulta visualizzata in linea con il testo (altrimenti usare o, e se si vuole che limmagine sia centrata) Il comando completo è, dove: xxx è il nome dellimmagine 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 lindirizzo assoluto nel caso in cui limmagine 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 limmagine si trova nella cartella immagini del server Esempio10: immagine1.html Per inserire unimmagine si utilizza il tag e il suo attributo SRC per identificare quale immagine si vuole visualizzare Non aggiunge nessuna interruzione di riga nè prima nè dopo limmagine, pertanto essa risulta visualizzata in linea con il testo (altrimenti usare o, e se si vuole che limmagine sia centrata) Il comando completo è, dove: xxx è il nome dellimmagine 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 lindirizzo assoluto nel caso in cui limmagine 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 limmagine si trova nella cartella immagini del server Esempio10: immagine1.html

17 C. Braghin - HTML, Part 2 17 Immagini in (2) - Attributi Agli attributi possibili del tag, a parte SRC che è obbligatorio, sono: WIDTH stabilisce la larghezza dellimmagine HEIGHT stabilisce laltezza dellimmagine BORDER definisce laltezza del bordo intorno allimmagine ALT permette di specificare un testo alternativo che viene visualizzato al posto dellimmagine qualora essa non possa essere mostrata ALIGN=bottom| middle| top| left| right permette di disporre in diversi modi il testo attorno allimmagine. Di default il valore è BOTTOM Esempio11: immagine2.html Agli attributi possibili del tag, a parte SRC che è obbligatorio, sono: WIDTH stabilisce la larghezza dellimmagine HEIGHT stabilisce laltezza dellimmagine BORDER definisce laltezza del bordo intorno allimmagine ALT permette di specificare un testo alternativo che viene visualizzato al posto dellimmagine qualora essa non possa essere mostrata ALIGN=bottom| middle| top| left| right permette di disporre in diversi modi il testo attorno allimmagine. Di default il valore è BOTTOM Esempio11: immagine2.html

18 C. Braghin - HTML, Part 2 18 Esercizi (2) 3) Provare a scrivere una tabella con un aspetto simile alla seguente: GiornoOrarioCorso Lunedì9-13Inglese Martedì10-15Matematica Mercoledì8-12Latino

19 C. Braghin - HTML, Part 2 19 Esercizi (3) 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 unimmagine a piacere la terza cella della terza riga contenga un elenco non ordinato il testo allinterno delle celle della prima riga sia allineato al centro il testo allinterno delle celle dellultima 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 unimmagine a piacere la terza cella della terza riga contenga un elenco non ordinato il testo allinterno delle celle della prima riga sia allineato al centro il testo allinterno delle celle dellultima riga sia allineato a sinistra

20 C. Braghin - HTML, Part 2 20 Esercizi (4) 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.


Scaricare ppt "Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 – Progettazione pagine web statiche (50 ore) Dott. Chiara Braghin"

Presentazioni simili


Annunci Google