Corso di HTML Anno scolastico 2004-05 Classi IVBinf , IVAinf I.T. I.S Torricelli Milano - PowerPoint PPT Presentation

About This Presentation
Title:

Corso di HTML Anno scolastico 2004-05 Classi IVBinf , IVAinf I.T. I.S Torricelli Milano

Description:

Corso di HTML Anno scolastico 2004-05 Classi IVBinf , IVAinf I.T. I.S Torricelli Milano SuperVisor Ing. Aristide Calcagno Contenuti Lez.1(Intro. – PowerPoint PPT presentation

Number of Views:30
Avg rating:3.0/5.0
Slides: 43
Provided by: Holger73
Category:

less

Transcript and Presenter's Notes

Title: Corso di HTML Anno scolastico 2004-05 Classi IVBinf , IVAinf I.T. I.S Torricelli Milano


1
Corso di HTML Anno scolastico 2004-05Classi
IVBinf , IVAinfI.T. I.S Torricelli Milano
  • SuperVisor Ing. Aristide Calcagno

2
Contenuti Lez.1(Intro. AllHTML)
  • Breve inrodizione ai documenti ipermediali
  • Cosa é LHtml
  • Istruzioni o elementi HTML
  • Cosa Occore per visualizzare documenti HTML
  • Cosa occorre per scrivere documenti HTML
  • Elementi di Base di un documento HTML
  • Attributi Generici
  • I Commenti
  • Contenuto,Struttura e Presentazione di un
    Documento
  • Introduzione al CSS
  • Cominciamo ad utilizzare il CSS
  • Fogli di stile in linea con esempi
  • Fogli di stile incorporati
  • Identificazione e classi di elementi
  • Fogli di stile esterni

3
1) Breve introduzione ai documenti ipermediali
  • In un qualunque documento ipermediale si può
    facilmente individuare il contenuto ossia le
    parti di testo , immagini , musica che
    contribuiscono a trasmettere informazioni
    allutente che lo sta leggendo.
  • Il contenuto resta comunque solo una parte del
    documento
  • In un documento ipermediale si distinguono oltre
    al contenuto altri due elementi
  • - Struttura si intende lorganizzazione
    logica del documento,ovvero la sua suddivisione
    in capitoli,paragrafi,sottoparagrafi ecc..ed il
    modo in cui questi sono organizzati
    gerarchicamente.
  • - Presentazione si intende invece come il
    contenuto di un certo documento (organizzato
    secondo una certa struttura ) viene visualizzato
    dal punto di vista grafico. Per esempio è chiaro
    che il titolo di un capitolo deve essere piu in
    grassetto rispetto al titolo di un paragrafo.

4
1) Breve introduzione ai documenti ipermediali
  • -- Riassumendo
  • In un documento ipermediale possiamo pensare di
    individuare
  • Contenuto
  • Struttura
  • Presentazione

5
2) Che cosa è LHTML
  • Abbiamo introdotto I documenti Ipermediali ,
    resta comunque il fatto che essi sono nati per
    permettere una navigazione a tutti gli utenti del
    WEB. Affinche ciò accada è necessario che tali
    documenti siano scritti in un LINGUAGGIO che sia
    Universalmente riconosciuto da tutte I PC (di
    diversa Architettura..SOLARIS , INTEL , SPARC)
    tale Linguaggio è LHTML ( Hyper-Test-Markup-Langu
    age). Anche un documento HTML è formato da
  • Contenuto quello che si intende visualizzare
  • Struttura che è rappresentata dalle
    istruzioni che vengono date per
  • Gestire collegamenti con altri documenti
  • Includere oggetti multimediali
  • Includere programmi (Script) da eseguire
    allinterno del documento
  • Istruzioni per dare una presentazione
    grafica (estetica) al contenuto

6
3) Istruzioni o elementi HTML
  • Le Istruzioni in HTML sono
    rappresentati dai TAG (Contrassegno ) da cui
    deriva la parola Markup di HTML e sono dei
    caratteri ( o parole ) racchiuse tra I simboli
    lt , /gt un esempio di tag ha il
    seguente Prototype
  • ltBODYgt
  • .
  • .
  • ..
  • lt/BODYgt
  • La parte di documento racchiusa tra la coppia di
    istruzioni ltBODYgt lt/BODYgt delimita la parte di
    documento su cui listruzione ha effetto.

7
3) Istruzioni o elementi HTML
  • Altro Esempio

Istruzione di Struttura
ltTITLEgt Titolo del Documento lt/TITLEgt
Contenuto
N.B. in realtà i tag dell HTML non sono delle
vere istruzioni inquanto esse servono solo a
definire un documento , pertanto al fine di
evitare confusioni parleremo di tag che
racchiudono un elemento (del nostro documento)
8
4) Cosa occorre per visualizzare documenti
HTML
  • Tutti I Browser di rete attualmente
    disponibili sono in grado di visualizzare un
    documento HTML.
  • I tipi di Browser di rete più famosi
    sono
  • Microsoft Internet Esplorer 5.0 (o Superiore)
  • Netscape Comunicator 2.0 ( o superiore)

N.B. dunque i browser possono essere visti come
interpreti delle istruzioni HTML o meglio come
visualizzatori degli elementi HTML
9
5) Cosa occorre per scrivere documenti HTML
  • Le pagine WEB scritte in HTML sono dei
    semplici file di testo , e di conseguenza sono
    visibili e modificabili con un qualunque
    programma di Word Processig.
  • Ad esempio lapplicativo word (della
    suite Microsoft Office) permette di potere creare
    documenti che possono essere convertiti in modo
    automatico in pagine HTML. I file codificati in
    HTML si distinguono dagli altri tipi di file per
    lestenzione .html oppure .htm dunque
    riassumendo possiamo dire che le pagine HTML non
    sono altro che dei file Ascii alle quali sono
    state aggiunte delle istruzioni (HTML) per
    definirne la struttura e la loro presentazione.

10
6) Architettura Client/Server del WEB
  • Allinterno di una qualunque rete
    Telematica LAN , MAN ,WAN vi è la possibilità di
    realizzare programmi modulari, ovvero programmi
    le cui componenti possono non risiedere
    necessariamente su una macchina ma sono residenti
    in diverse macchine costituenti la rete stessa.
    Questo tipo di applicazioni (distribuite)
    utilizzano un meccanismo di comunicazione detto
  • CLIENT/SERVER
  • allinterno di una rete pertanto
    occorre individuare il/I client(s) ed il/I
    server(s), Il server è una macchina che deve
    offrire dei servizi (dati, file
    ,video,stampanti,scanner) ai client , mentre I
    client sono macchine che devono ottenere le
    risposte dal server per far fronte alle proprie
    esigenze. È utile osservare il fatto che in una
    rete di computer il ruolo dei client e dei server
    non è ASSOLUTO,cioè posso avere un PC che si
    comporta come CLIENT verso un PC2 e a sua volta
    PC si comporta da server per un PC3

  • PC
    server per PC2

  • PC2 request




  • response

  • response


  • PC3 Client per PC2
    request

11
7) Elementi di base di un documento HTML
  • Vedremo ora quali sono gli elementi di
    base (o Istruzioni di base ) indispensabili per
    la visualizzazione del nostro documento HTML in
    un qualsivoglia Browser rete.
  • Il documento minimo (o la pagina HTML
    più semplice) è quello che contiene un solo
    elemento lelemento HTML.

ltHTMLgt . lt/HTMLgt
N.B. ltHTMLgt è lelemento contenitore ovvero al
suo interno può contenere altri elementi (Tag).
Allinterno dellelemento HTML è possibile
inserire 2 elementi di base fondamentali BODY ,
HEAD
ltHTMLgt ltHEADgt ..
lt/HEADgt ltBODYgt
..............
lt
/BODYgt lt/HTMLgt
12
7 bis) Elementi di base di un documento HTML

N.B. Lelemento ltBODYgt contiene il corpo del
nostro documento cioè informazioni testuali
,immagini , suoni ecc.. Visualizzabili
attraverso il Brwser mentre lelemento ltHEADgt
(Intestazione ) contiene informazioni
dichiarative o di impostazione globale del
documento
13
7 bis.1) ESEMPIO 1

Suppponiamo di avere scritto il seguente codice
HTML
ltHTMLgt
ltHEADgt

ltTITLEgt
Parlare di Giuseppe Garibaldi
lt/TITLEgt
lt/HEADgt ltBODYgt ltPgt Garibaldi fu un
valoroso condottiero egli fu ferito in una gamba
garibaldi che comanda che comanda il battaglion
lt/Pgt

lt
/BODYgt lt/HTMLgt
N.B. Lelemento TITLE è contenuto nell elemento
HEAD oiche essa è una informazione di tipo
dichiarativo. Il Browser iconosce il Tag e
visualizza il suo contenuto allinterno della
barra del titolo della finestra del browser.
Continua
14
7 bis.1) ESEMPIO 1
N.B. il Tag ltPgt crea un nuovo paragrafo cioè fasi
che il testo Garibaldi. inizi da una certa
riga non ve elaborazioninga diviso delimitando
dunque una unita logica per orazioni Succesive
elaborazioni. OSS I tag ltHEADgt ltBODYgt nella
costruzione dei documenti possono anche essere
omessi noi comunque li abbiamo specificati per
completezza didattica.
Continua
15
8) I Commenti in HTML
in HTML come per qualunque altro linguaggio di
programmazione rappresentano un aspetto molto
importante perché aiutano a migliorare la
leggibilità. Tuttavia eistono delle regole che ci
dicono quali istruzioni vanno commentate noi
trascureremo questo aspetto ed useremo i commenti
di HTML per Buon Senso cioè commenteremo
quelle istruzioni HTML (Tag) che per noi sono
significative alla comprensione del testo. I
commenti in HTML sono racchiusi tra i Tag lt!--
--gt e tutti i caratteri compresi tra questi Tag
vengono ignorati dal Browser. Esepio Di Commento

ltHTMLgt .lt! questo è un commento --gt
lt/HTMLgt
OSS. Poiché non tutti i Browser sono in grado di
interpretare tutti i tag HTML (a causa delle
continue versioni e dialetti dell HTML ) un
Browser che incontra un Tag sconosciuto si limita
ad ignorarlo.
16
9) Contenuto , Struttura e presentazione di un
documento
  • Abbiamo introdotto gli elementi di base per
    scrivere l nostro primo documento HTML. Diamo ora
    una definizione più formale di documento HTML e
    dei suoi elementi costitutivi introducendo la
    Presentazione di un documento.
  • LHTML è un linguaggio per la descrizione della
    struttura di un documento,composto da degli
    elementi. In particolare possiamo considerare un
    documento HTML come un contenitore di elementi
    dove un elemento può essere
  • un elemento semplice
  • un contenitore di elementi
  • un link
  • Un oggetto multimediale

Ad Es. HREF
Ogni elemento è caratterizzato da un eventuale
insieme di proprietà ( attributi ) e da un
eventuale contenuto. Possiamo dunque riassumere
schematicamente la struttura di un elemento HTML
nel seguente modo
Continua
17
9 bis) Contenuto , Struttura e presentazione di
un documento
Documento HTML
ltHTMLgt lt/HTMLgt
N.B. come si evince dalla figura le proprietà ed
il contenuto di un elemento( Tag ) sono
opzionali. Il tag di chiusura di alcuni elementi
è obligatorio , per altri è opzionale , per altri
ancora è proibito.
18
10) Introduzione al CSS
Abbiamo introdotto gli elementi di base per
scrivere la struttura del nostro primo documento
HTML. Per la presentazione degli elementi ,ovvero
per dar loro una una veste grafica (puramente
estetica) si utilizza un altro linguaggio in
parallelo all HTML che prende il nome di CSS
( Cascading-Style-Sheets) . Il CSS è un
linguaggio di tipo dichiarativo che serve per
definire lo stile di presentazione di un
documento HTML o di alcuni suoi elementi.tale
linguaggio è stato affiancato allHTML per
permettere allutente di creare documenti
ipermediali con la stessa bellezza grafica che si
può ottenere con i word processor più evoluti.
Continua
19
11) Cominciamo a utilizzare il CSS
  • Vediamo ora come implementare la presentazione di
    un documento utilizzando espliciti comandi CSS.
    Premettiamo che la presentazione degli elementi
    viene genericamente chiamata stile e viene
    implementata da una delle più importanti
    proprietà degli elementi la proprietà STYLE.
  • Oss in quale parte del documento HTML è
    possibile inserire lo stile ovvero i comandi
    CSS?
  • I comandi CSS possono essere inseriti
  • Allinterno di elementi del documento tra i tag
    del BODY. Si parla in tal caso di fogli di stile
    in linea o inline style
  • Allinterno del documento tra i tag el ltHEADgt e
    ltBODYgt. Si parla in tal caso di fogli di stile
    incorporati o internal style sheet
  • Allesterno del documento , in un file separato.
    Si parla in tal caso di fogli di stile esterni o
    external style sheet

20
12) Fogli di stile in linea
Riprendiamo lEsempio 1 e cominciamo a dare una
prima veste grafica applicando al paragrafo
Garibaldi. un nuovo formato ed un colore .
ltHTMLgt
ltHEADgt


ltTITLEgt Parlare di Giuseppe Garibaldi lt/TITLEgt
lt/HEADgt
ltBODYgt ltP STYLECOLORRGB(0,0,255)FONT-SIZE
20ptgt Garibaldi fu ferito fu ferito in una gamba
garibaldi che comanda che comanda il battaglion
lt/Pgt

lt /BODYgt lt/HTMLgt
Una volta visualizzato allinterno del Browser
questo listato apparirà come illustrato qui a
lato la proprietà STYLE colorerà il testo el
paragrafo in blue ed aumenterà la dimensione del
corpo del carattere a 20pt in generale per i
fogli di stile in linea lo stile viene inserito
nel Tag di apertura di un qualsiasi elemento HTML
secondo la seguente sintassi di prototype
Continua
21
12 bis) Fogli di stile in linea
Una volta visualizzato allinterno del Browser
questo listato apparirà come illustrato qui a
lato la proprietà STYLE colorerà il testo el
paragrafo in blue ed aumenterà la dimensione del
corpo del carattere a 20pt in generale per i
fogli di stile in linea lo stile viene inserito
nel Tag di apertura di un qualsiasi elemento HTML
secondo la seguente sintassi di prototype
ltTagInizioElementoSTYLE
NomeProprietàSTY LE1 Valore1
NomeProprietàSTYLE2 Valore2
..
NomeProprietàSTYLEN ValoreN gt
TagInizioElemento
Nel nostro caso abbiamo
NomeProprietàSTYLE1
ltP STYLE COLOR RGB(0,0,255)
FONT-SIZE 20pt gt
Valore2
Continua
22
12 bis) Fogli di stile in linea
  • Analiziamo le proprietà utilizzate
  • COLOR ha tre parametri rappresentati da numeri
    interi compresi da 0 a 255 e che rappresentano i
    colori Red , Green, Blue.
  • FONT-SIZE ha un solo parametro ( un numero
    intero seguito da pt o px ) che indica la
    dimenzione del carattere

N.B. Un elenco delle proprietà di STYLE e
presente nell appendice del vostro libro di
testo (comunque li vedremo tutti in seguito)
possono essere visti come interpreti delle
istruzioni HTML o meglio come visualizzatori
degli elementi HTML
23
12 bis) ESEMPIO 3
Consideriamo il seguente pezzo di codice HTML
ltHTMLgt ltHEADgt ltTITLEgt Parlare di
Giuseppe Garibaldi lt/TITLEgt lt/HEADgt
ltBODYgtlt!per colorare lo sfondo si usaltbody
bgcolor"D5DADF"gt -- gt ltH1
STYLECOLORRGB(0,0,255) BACKGROUNDmagentagtese
mpio di H1lt/H1gt ltP STYLECOLORRGB(0,0,255)BACKG
ROUNDmagentagtesempio di P lt/Pgt ltfont
face"Times New Roman"gt ciccio pasticcio lt/fontgt
lt!-- questo nel mio Browser funziona l'altro
no ltfont color"FFFFFA"gtltbgtMenu Dei
Prodotti...lt/bgtlt/fontgt --gt lt /BODYgt lt/HTMLgt
24
12 bis) Fogli di stile in linea
Analiziamo le proprietà utilizzate dall
ESEMPIO3 Oltre alla proprietà BACKGROUND ha tre
parametri rappresentati da numeri interi che
serve fondamentalmente per colorare lo sfondo di
una stringa di testo abbiamo introdotto un
elemento della struttura H1 rappresenta un
particolare titolo ovvero un modo di evidenziare
un certo testo. Esistono ben 6 elementi di
differenti titoli da H1H6 per capire meglio si
ha
ltHTMLgt ltHEADgt ltTITLEgt Esempi di
H1...H6lt/TITLEgt lt/HEADgt ltbody bgcolor"D5DADF"gt
ltH1gtesempio di H1lt/H1gt ltH2gtesempio di
H2lt/H2gt ltH3gtesempio di H3lt/H3gt ltH4gtesempio di
H4lt/H4gt ltH5gtesempio di H5lt/H5gt ltH6gtesempio di
H6lt/H6gt lt/BODYgt lt/HTMLgt
Continua
25
12 bis) Fogli di stile in linea
Utilizzando i fogli di stile in linea si ottiene
ltHTMLgt ltHEADgt ltTITLEgt Esempi di
H1...H6lt/TITLEgt lt/HEADgt ltbody bgcolor"D5DADF"gt
ltH1 STYLECOLORRGB(0,0,255)BACKGROU
NDMAGENTAgtesempio di H1lt/H1gt ltH2
STYLECOLORRGB(0,0,255)BACKGROUNDMAGENTAgtesem
pio di H2lt/H2gt ltH3 STYLECOLORRGB(0,0,255)BACKG
ROUNDMAGENTAgtesempio di H3lt/H3gt ltH4
STYLECOLORRGB(0,0,255)BACKGROUNDMAGENTAgtesem
pio di H4lt/H4gt ltH5 STYLECOLORRGB(0,0,255)BACKG
ROUNDMAGENTAgtesempio di H5lt/H5gt ltH6
STYLECOLORRGB(0,0,255)BACKGROUNDMAGENTAgtesem
pio di H6lt/H6gt lt/BODYgt lt/HTMLgt
Continua
26
13) Fogli di stile incorporati
Supponiamo di avere due elementi P (Paragrafi
ltPgtlt/Pgt) , entrambi Blue. Se volessimo cambiare
colore di Background ad entrambi per esempio da
magenta a verde , dovremmo andare nel codice di
ogni elemento e modificarne lo stile. Un sistema
siffstto di stile è certamente funzionante ma che
di fatto non risponde alla filosofia tipica del
CSS. Il consiglio è dunque di servirsi di fogli
di stile in linea esclusivamente per piccoli e
circoscritti ritocchi , e non per la struttura
generale di un sito Web. Per ovviare a questo
problema ,(ovvero andare a modificare ogni volta
il codice sorgente modificando gli style sheet)
possiamo seguire una strada più semplice ed
efficace utilizzando i fogli di stile incorporati.
ltHTMLgt ltHEADgt ltTITLEgt Quinto esempiolt/TITLEgt
ltSTYLE TYPETEXT/CSSgt PCOLORRGB(255,0,0) lt/ST
YLEgt lt/HEADgt ltbody bgcolor"D5DADF"gt
ltPgt Quinto esempio primo Plt/Pgt ltPgt Quinto
esempio secondo Plt/Pgt lt/BODYgt lt/HTMLgt
ESEMPIO
Selettore Di Elemento
Continua
27
13 bis) Fogli di stile incorporati
Generalizzandola sintassi per i fogli di stile
incorporati è la seguente.
ltSTYLE TYPETEXT/CSSgt Selettore
NomeProprietàSTYLE1Valore
NomeProprietàSTYLE1Valore1
.............................................
..............
NomeProprietàSTYLENValoreN
lt/STYLEgt
Dove conn Selettore si possono selezionare uno o
più elementi allinterno del documento Ai quali
va applicato uno stile. Nell esempio abbiamo
applicato lo stile agli elementi di tipo P È
questo un esempio di Internal Style Sheet ,
ovvero lo stesso style sheet condiviso tra più
elementi dello stesso documento.relativamente al
nostro esempio abbiamo precise indicazioni sulla
presentazione di tutti gli elementi P allinterno
del documento HTML in particolare tutti gli
elementi Pavranno colore rosso. P.S. per motivi
espositivi useremo come sinonimi i termini Stile
e Style sheet.
Continua
28
14) Identificazione e classi di elementi
  • Sorge ora un altra esigenza se avessi 10
    paragrafi e ne volessi solo lcuni Blue , come
    potrei fare ?
  • Finora abbiamo genericamente parlato di elemento
    P intendendo con ciò tutti gli elementi di tipo
    P.
  • Vogliamo ora distinguere e/o raggruppare
    allinterno di tutti gli elementi di tipo P
    soltanto determinati elementi.
  • Per far ciò utilizziamo 2 importanti proprietà
    degli elementi
  • ID
  • CLASS

ID serve per identificare univocamente un
elemento. Ovvero il valore della proprietà ID
identifica univocamente lelemento allinterno
del documento. ESEMPIO
ltP IDprimo.gt ltP IDSecondogt
N.B. per quanto appena detto non è possibile
identificare 2 elementi con lo stesso valore ID
serve per identificare univocamente un elemento.
ltH1 IDsecondo..gt lt! non può essere - - gt
Continua
29
14) Identificazione e classi di elementi
Vediamo ora CLASS serve per far appartenere
più elementi di un documento alla stessa classe
. In generale si fanno appartenere elementi
distinti alla stessa classe quando riconosciamo
loro una proprietà comune. Riprendendo dunque l
ESEMPIO5 possiamo riscriverlo nel seguente modo.
ltHTMLgt ltHEADgt ltTITLEgt Sesto esempiolt/TITLEgt
ltSTYLE TYPETEXT/CSSgt P.codice
COLORRGB(255,0,0) P.pseudo COLORRGB(0,0,255)
lt/STYLEgt lt/HEADgt ltbody bgcolor"D5DADF"gt
lt!oppure BODY- -gt ltP CLASScodicegt
primo Plt/Pgt ltP CLASSpseudogt secondo
Plt/Pgt lt/BODYgt lt/HTMLgt
Dire come verra visualizzata la pagina
Continua
30
Contenuti Lez.2(Intro. AllHTML)
  • Finire I selettori di classe
  • Fogli di stile Esterni
  • Esercitazioni e verifica
  • Elementi di strutturazione di un documento
  • Le tabelle
  • Costruire le tabelle riga per riga
  • Un esempio di HTML e CSS
  • Strutturazione del testo
  • Come definire un area
  • I caratteri speciali
  • Gli elenchi

31
Lez.2
  • Nellesempio 6 abbiamo introdotto un altro tipo
    di selettore il selettore di classe
  • . ( nel nostro esempio P.pseudo e P.codice),al
    quale abbiamo potuto fare riferimento secondo
    il seguente prototype

TipoElemento.NomeClasse
Con questo tipo di notazione (nota come
Dot-Notation ci si riferisce a tutti gli elementi
P di classe codice e Pseudo attribuendo ad
essi differenti colori di ForeGround. È utile
osservare il fatto che sia lelemento di tipo H1
che lelemento di tipo P appartengono alla classe
Pseudo appare dunque evidente che una stessa
classe può essere assegnata a diversi elementi
con la seguente dicitura
.NomeClasse
Continua
32
Lez.2
  • Il carattere è detto selettore
    universale e viene spesso utilizzato con il
    selettore di classe questo carattere può essere
    sostituito al TipoElemento per estendere a
    tutti gli elementi una determinata classe.
  • Ad esempio la dicitura

.Codice
  • Indica che viene estesa a qualunque elemento la
    classe codice.
  • Riportiamo di seguito alcuni tra i più semplici
    selettori.
  • Lo stile viene applicato a
  • Un particolare tipo di elemento ( Selettore di
    Elemento) NomeElemento..
  • Tutti gli elementi di un certo tipo che
    appartengono alla stessa classe (Selettore di
    Classe) NomeElemento.NomeClasse.
  • Tutti gli elementi di qualsiasi tipo della stessa
    classe .NomeClasse

N.B nellappendice A del libro sono riportati
alcuni esempi di selettori con una loro
classificazione
Continua
33
14) Fogli di stile Esterni
  • Finora abbiamo trattato separatamente Struttura e
    presentazione del nostro documento ipermediale,
    ma di fatto queste due componenti sono inglobato
    in un unico file .html , vediamo dunque di
    separare in due file distinti la struttura dalla
    presentazione, precisamente
  • Prova.html dove risiede la struttura del
    documento HTML
  • Esempio.css dove risiede la presentazione del
    documento scritto nel linguaggio di stile css.

Vediamo dunque un esempio di fogli di stile
esterni riprendendo lesempio N6 (ottenendo
lEsempio n7)
File prova.html
File esempio.css
ltHTMLgt ltHEADgt ltLINK RELStylesheet
HREFesempio.css TYPETEXT/CSSgt lt/HEADgt ltbody
bgcolor"D5DADF"gt ltP CLASScodice
gt primo Plt/Pgt ltP CLASSpseudo gt secondo
Plt/Pgt lt/BODYgt lt/HTMLgt
P.codice
COLORRGB(255,0,0) P.pseudo
COLORRGB(0,0,255)
N.B notiamo la presenza dellelemento LINK che
serve ad indicare un collegamento tra il nostro
documento HTML ed un altro. Lattributo REL
indica la relazione con un foglio di stile il
cui nome è definito da HREF (esempio.css) ed il
cui tipo text è def. Da type
34
Lez.2
  • Ricapitolando nei vari esempi precedenti abbiamo
    visto che con il CSS
  • Utilizzando L inline style (allinterno del
    documento tra I tag BODY) ogni elemento ha il suo
    stile,dunque non cè condivisione di stili tra
    gli elementi.
  • Utilizzando Linternal style sheet (allinterno
    del documento tra I tag lt/HEADgt e ltBODYgt lo
    stesso stile viene condiviso da più elementi di
    documenti HTML diversi.

N.B Se per un particolare elemento (del nostro
documento) sono definiti più stili (ad esempio
uno interno per tutto il documento,uno in linea
ed uno esterno) quale di essi viene
applicato?? Esiste una priorità per gli stili
come mostrato
  • Browser default ( OGNI Brrowser ha un suo CSS di
    default
  • External style sheet
  • Internal style sheet
  • Inline style

Priorità Bassa
Priorità Alta
35
Lez.2 Elementi di strutturazione di un documento
  • Le Tabelle
  • Le tabelle rappresentano uno degli strumenti più
    utilizzati in HTML a livello professionale.
  • N.B nella sezione appendici di questo volume
    sono presenti tutti gli attributi di tali
    elementi.
  • Gli elementi fondamentali per definire la
    struttura fondamentale di una tabella sono
  • Table indica linizio e la fine di una tabella
    caratterizzata dai tag ltTABLEgt lt/TABLEgt
  • TR indica linizio di una nuova riga ltTRgt
    lt/TRgt
  • TD indica linizio di una cella (o colonna)
    ltTDgt lt/TDgt

36
Lez.2 Elementi di strutturazione di un documento
  • Esempio1
  • ltHTMLgt
  • ltHEADgt
  • ltTITLEgt primo esempio di tabellalt/TITlEgt
  • ltBODYgt
  • ltTABLEgt
  • ltTRgt
  • ltTDgtAlt/TDgt
  • ltTDgtBlt/TDgt
  • ltTDgtClt/TDgt
  • lt/TRgt
  • ltTRgt
  • ltTDgtDlt/TDgt
  • ltTDgtElt/TDgt
  • ltTDgtFlt/TDgt
  • lt/TRgt
  • lt/TABLEgt

37
Lez.2 Elementi di strutturazione di un documento
  • Vediamo ora in css come sia possibile
    definire la Presentazione di una tabella ,
    esaminando in particolare I selettori per le
    tabelle.

Supponiamo che la tabella dellesempio precedente
appartenga alla classe risultati
ltTABLE CLASSrisultatigt
. lt/TABLEgt
Per selezionare tutta la tabella scriveremo al
posto dei puntini
Table.risultati
Per selezionare tutta la terza riga della tabella
scriveremo al posto dei puntini
Table.risultatirow3
38
Lez.2 Elementi di strutturazione di un documento
  • In Particolare

row-odd
Selezioniamo le righe dispari
row-even
Selezioniamo le righe pari
In maniera analoga per selezionare la
terza colonna della tabella scriveremo
table.risultati.column3
Ed in particolare
Column-odd
Selezioniamo le colonne dispari
table.risultati.column3
Selezioniamo le colonne pari
39
Lez.2 Elementi di strutturazione di un documento
  • Riassumendo possiamo dire che

È possibile applicare gli attributi di stile o a
tutta la tabella,oppurealla singola riga e/o
colonna
Esempio supponiamo di voler dare
alla nostra tabella un bordo di stile doubledi
spessore 5punti e di colore verde.
ltHTMLgt ltHEADgt ltTITLEgt Secondo esempio
lt/TITLEgt ltSTYLETYPETEXT/CSSgt
table.risultati borde-styledoubleborder-width
5ptbordercolorgreen lt/STYLEgt
lt/HEADgt ltBODYgt ltTABLEgt ltTRgt
ltTDgtAlt/TDgt ltTDgtBlt/TDgt
ltTDgtClt/TDgt lt/TRgt ltTRgt ltTDgtDlt/TDgt
ltTDgtElt/TDgt ltTDgtFlt/TDgt
lt/TRgt lt/TABLEgt lt/BODYgt lt/HTMLgt
40
Lez.2 Elementi di strutturazione di un documento
Modifichiamo lesempio precedente ,inserendo il
frammento di codice indicato in grassetto
ltHTMLgt ltHEADgt ltTITLEgt Secondo esempio
lt/TITLEgt ltSTYLETYPETEXT/CSSgt
table.risultati borde-styledoubleborder-width
5ptbordercolorgreen lt/STYLEgt
lt/HEADgt ltBODYgt ltTABLE CLASSrisultatigt ltCAP
TION STYLEaligntopgt Alfabetolt/CAPTIONgt
ltTRgt ltTDgtAlt/TDgt
ltTDgtBlt/TDgt ltTDgtClt/TDgt lt/TRgt ltTRgt
ltTDgtDlt/TDgt ltTDgtElt/TDgt
ltTDgtFlt/TDgt lt/TRgt lt/TABLEgt lt/BODYgt lt/HTMLgt
41
Lez.2 Elementi di strutturazione di un documento
Costruiamo la Tabella riga per riga
In HTML una tabella è vista come un insieme di
righe e non un insieme di colonne , questo vuol
dire che si considerano tanti elementi TR
composti da tante celle (TD) dunque una tabella
in HTML va riempita per riga e non
diversamente. Ad esempio supponiamo di voler
riempire una tabella contenebte lorario
scolastico delle materie
ltHTMLgt ltHEADgt ltTITLEgt Secondo esempio
lt/TITLEgt ltSTYLETYPETEXT/CSSgt
table.risultati borde-styledoubleborder-width
5ptbordercolorgreen lt/STYLEgt
lt/HEADgt ltBODYgt lt! tabella orario
scolastico- -gt ltTABLE CLASSrisultatigt ltCAPTION
STYLEaligntopgt Orario scolastico della
settimanalt/CAPTIONgt ltTRgt
ltTDgtLUNEDIlt/TDgt ltTDgtMARTEDIlt/TDgt
ltTDgtMERCOLEDIlt/TDgt
ltTDgtGIOVEDIlt/TDgt ltTDgtVENERDIlt/TDgt
ltTDgtSABATOlt/TDgt lt/TRgt ltTRgt
ltTDgtPrima oralt/TDgt ltTDgtItalianolt/TDgt
ltTDgtMatematicalt/TDgt
ltTDgtStorialt/TDgt lt/TRgt lt/TABLEgt lt/BOD
Ygt lt/HTMLgt
42
Lez.2 Elementi di strutturazione di un documento
Un Esempio di HTML e CSS
  • Aggiungiamo ora qualcosa allesempio
    riepilogativo di HTML CSS utilizzando la
    tabella dellorario scolastico
  • Appena definita.
  • Lesempio consiste nell aggiungere una veste
    grafica (Presentazione) alla tabella
  • orario scolastico settimanale in modo da
    avere
  • i giorni della settimana con un font più grande
  • Le ore della settimana
  • Ogni materia con lo stesso colore di background
  • Lo stesso colore di foregroud per i laboratori di
    tutte le materie , indipendentemente dal
  • colore di background dato a quella materia.
Write a Comment
User Comments (0)
About PowerShow.com