Corso di HTML
Anno scolastico 2004-05
Classi IVBinf , IVAinf
I.T. I.S Torricelli Milano
SuperVisor Ing. Aristide Calcagno
1
Template and information based on data provided by DERI
Contenuti Lez.1
5.
Breve inrodizione ai documenti ipermediali
Cosa é L’Html
Istruzioni o elementi HTML
Cosa Occore per visualizzare documenti HTML
Cosa occorre per scrivere documenti HTML
6.
Elementi di Base di un documento HTML
7.
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
1.
2.
3.
4.
8.
9.
10.
11.
12.
13.
14.
15.
2
(Intro. All’HTML)
Template and information based on data provided by DERI
1) Breve introduzione ai documenti ipermediali
3
In un qualunque documento ipermediale si può facilmente individuare il
contenuto ossia le parti di testo , immagini , musica che contribuiscono
a trasmettere informazioni all’utente 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 l’organizzazione 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.
Template and information based on data provided by DERI
1) Breve introduzione ai documenti ipermediali
-- Riassumendo –
In un documento ipermediale possiamo pensare di individuare
Contenuto
Struttura
Presentazione
4
Template and information based on data provided by DERI
2)
Che cosa è L’HTML
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 è
L’HTML ( Hyper-Test-Markup-Language). 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 all’interno del
documento
Istruzioni : per dare una presentazione grafica
(estetica) al contenuto
5
Template and information based on data provided by DERI
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 : “ < “ , “ /> “ un esempio di tag ha il seguente Prototype:
<BODY>
………….
………….
…………..
</BODY>
La parte di documento racchiusa tra la coppia di istruzioni
<BODY> </BODY> delimita la parte di documento su cui
l’istruzione ha effetto.
6
Template and information based on data provided by DERI
3)
Istruzioni o elementi HTML
Altro Esempio:
<TITLE>
Titolo del Documento
Istruzione di Struttura
Contenuto
</TITLE>
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)
7
Template and information based on data provided by DERI
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
8
Template and information based on data provided by DERI
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 l’applicativo 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 l’estenzione “ .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.
9
Template and information based on data provided by DERI
6)
Architettura Client/Server del WEB
All’interno 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
all’interno 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
10
request
Template and information based on data provided by DERI
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 : l’elemento HTML.
<HTML>
……………….
</HTML>
N.B. <HTML> è l’elemento contenitore ovvero al suo interno può
contenere altri elementi (Tag). All’interno dell’elemento HTML è
possibile inserire 2 elementi di base fondamentali : BODY , HEAD
<HTML>
<HEAD>
……………..
</HEAD>
<BODY>
..............
< /BODY>
</HTML>
11
Template and information based on data provided by DERI
Contenuto dell’ elemento HEAD
Contenuto dell’ elemento BODY
7 bis)
Elementi di base di un documento HTML
N.B. L’elemento <BODY> contiene il corpo del nostro documento cioè
informazioni testuali ,immagini , suoni ecc.. Visualizzabili attraverso il
Brwser mentre l’elemento <HEAD> (Intestazione ) contiene
informazioni dichiarative o di impostazione globale del documento
12
Template and information based on data provided by DERI
7 bis.1)
ESEMPIO 1
Suppponiamo di avere scritto il seguente codice HTML
<HTML>
<HEAD>
<TITLE>
Parlare di Giuseppe Garibaldi
</TITLE>
</HEAD>
<BODY>
<P> Garibaldi fu un valoroso
condottiero egli fu ferito in una gamba
garibaldi che comanda che comanda il
battaglion
</P>
< /BODY>
</HTML>
N.B. L’elemento TITLE è contenuto nell’ elemento HEAD oiche essa è una informazione di tipo
dichiarativo. Il Browser iconosce il Tag e visualizza il suo contenuto all’interno della barra del
titolo della finestra del browser.
Continua…
13
Template and information based on data provided by DERI
7 bis.1)
Continua…
ESEMPIO 1
N.B. il Tag <P> 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 <HEAD> <BODY> nella costruzione dei documenti possono anche essere omessi
noi comunque li abbiamo specificati per completezza didattica.
14
Template and information based on data provided by DERI
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
Tag vengono ignorati dal Browser.
<!--
--> e tutti i caratteri compresi tra questi
Esepio Di Commento :
<HTML>
……………….<!– questo è un commento -->
</HTML>
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.
15
Template and information based on data provided by DERI
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.
L’HTML è 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. BR
Ad Es. TABLE
Ad Es. HREF
Ad Es. OBJECT
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…
16
Template and information based on data provided by DERI
9 bis) Contenuto , Struttura e presentazione di un documento
Documento HTML
<HTML>
Tag Apertura Elemento
<XX>
Nome Proprietà1=“valoreProprietà1”
NomeProprietà2=“valoreProprietà2”
……………………………………….
NomeProprietàN=“valoreProprietàN”
Elemento
CONTENUTO
</XX>
Tag di Chiusura
Elemento se Previsto
</HTML>
Opzionale
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.
17
Template and information based on data provided by DERI
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 all’HTML per permettere all’utente di creare documenti ipermediali con la stessa
bellezza grafica che si può ottenere con i word processor più evoluti.
Continua…
18
Template and information based on data provided by DERI
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:
All’interno di elementi del documento tra i tag del BODY.
Si parla in tal caso di fogli di stile in linea o inline style
All’interno del documento tra i tag el <HEAD> e
<BODY>. Si parla in tal caso di fogli di stile incorporati o
internal style sheet
All’esterno del documento , in un file separato. Si parla in
tal caso di fogli di stile esterni o external style sheet
19
Template and information based on data provided by DERI
12) Fogli di stile in linea
Riprendiamo l’Esempio 1 e cominciamo a dare una prima veste grafica applicando al
paragrafo “ Garibaldi…….” un nuovo formato ed un colore .
<HTML>
<HEAD>
<TITLE> Parlare di Giuseppe Garibaldi </TITLE>
</HEAD>
<BODY>
<P STYLE=“COLOR:RGB(0,0,255);FONT-SIZE:20pt”>
Garibaldi fu ferito fu ferito in una gamba garibaldi che comanda
che comanda il battaglion </P>
< /BODY>
</HTML>
Una volta visualizzato all’interno 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…
20
Template and information based on data provided by DERI
12 bis) Fogli di stile in linea
Una volta visualizzato all’interno 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 :
<TagInizioElementoSTYLE=
“ NomeProprietàSTY LE1: Valore1;
NomeProprietàSTYLE2: Valore2;
……………………………………..
NomeProprietàSTYLEN: ValoreN” >
Nel nostro caso abbiamo:
<P STYLE=
“COLOR : RGB(0,0,255);
FONT-SIZE: 20pt”
>
TagInizioElemento
NomeProprietàSTYLE1
Valore2
Continua…
21
Template and information based on data provided by DERI
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
22
Template and information based on data provided by DERI
12 bis) ESEMPIO 3
Consideriamo il seguente pezzo di codice
HTML :
<HTML>
<HEAD>
<TITLE> Parlare di Giuseppe Garibaldi </TITLE>
</HEAD>
<BODY><!—per colorare lo sfondo si usa<body bgcolor="#D5DADF"> -- >
<H1 STYLE=“COLOR:RGB(0,0,255); BACKGROUND:magenta”>esempio
di H1</H1>
<P STYLE=“COLOR:RGB(0,0,255);BACKGROUND:magenta”>esempio di
P </P>
<font face="Times New Roman"> ciccio pasticcio </font> <!-- questo nel mio
Browser funziona l'altro no
<font color="#FFFFFA"><b>Menu Dei Prodotti...</b></font>
-->
< /BODY>
</HTML>
23
Template and information based on data provided by DERI
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 H1…H6 per capire meglio si ha :
<HTML>
<HEAD>
<TITLE> Esempi di H1...H6</TITLE>
</HEAD>
<body bgcolor="#D5DADF">
<H1>esempio di H1</H1>
<H2>esempio di H2</H2>
<H3>esempio di H3</H3>
<H4>esempio di H4</H4>
<H5>esempio di H5</H5>
<H6>esempio di H6</H6>
</BODY>
</HTML>
Continua…
24
Template and information based on data provided by DERI
12 bis) Fogli di stile in linea
Utilizzando i fogli di stile in linea si ottiene :
<HTML>
<HEAD>
<TITLE> Esempi di H1...H6</TITLE>
</HEAD>
<body bgcolor="#D5DADF">
<H1 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:MAGENTA”>esempio di H1</H1>
<H2 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:MAGENTA”>esempio di H2</H2>
<H3 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:MAGENTA”>esempio di H3</H3>
<H4 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:MAGENTA”>esempio di H4</H4>
<H5 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:MAGENTA”>esempio di H5</H5>
<H6 STYLE=“COLOR:RGB(0,0,255);BACKGROUND:MAGENTA”>esempio di H6</H6>
</BODY>
</HTML>
Continua…
25
Template and information based on data provided by DERI
13) Fogli di stile incorporati
Supponiamo di avere due elementi P (Paragrafi <P></P>) , 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.
ESEMPIO:
Selettore Di Elemento
26
<HTML>
<HEAD>
<TITLE> Quinto
esempio</TITLE>
<STYLE TYPE=“TEXT/CSS”>
P{COLOR:RGB(255,0,0)
</STYLE>}
</HEAD>
<body bgcolor="#D5DADF">
<P> Quinto esempio : primo
P</P>
<P> Quinto esempio : secondo
P</P>
</BODY>
</HTML>
Template and information based on data provided by DERI
Continua…
13 bis) Fogli di stile incorporati
Generalizzandola sintassi per i fogli di stile incorporati è la seguente.
<STYLE TYPE=“TEXT/CSS”>
Selettore
{ NomeProprietàSTYLE1:Valore;
NomeProprietàSTYLE1:Valore1;
...........................................................
NomeProprietàSTYLEN:ValoreN;
}
</STYLE>
Dove conn Selettore si possono selezionare uno o più elementi all’interno 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 all’interno 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…
27
Template and information based on data provided by DERI
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 all’interno 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 l’elemento all’interno del documento.
ESEMPIO :
<P ID=“primo”……….>
<P ID=“Secondo”……>
N.B. per quanto appena detto non è possibile identificare 2 elementi con lo stesso valore
ID serve per identificare univocamente un elemento.
<H1 ID=“secondo”…..>
<!– non può essere - - >
Continua…
28
Template and information based on data provided by DERI
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.
<HTML>
<HEAD>
<TITLE> Sesto esempio</TITLE>
<STYLE TYPE=“TEXT/CSS”>
P.codice{ COLOR:RGB(255,0,0)}
P.pseudo{ COLOR:RGB(0,0,255)}
</STYLE>}
</HEAD>
<body bgcolor="#D5DADF"> <!—oppure BODY->
<P CLASS=“codice”> primo P</P>
<P CLASS=“pseudo”> secondo P</P>
</BODY>
</HTML>
Dire come verra visualizzata la pagina
Continua…
29
Template and information based on data provided by DERI
Contenuti Lez.2
30
(Intro. All’HTML)
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
Template and information based on data provided by DERI
Lez.2
Nell’esempio 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 l’elemento di tipo H1 che l’elemento 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…
31
Template and information based on data provided by DERI
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 : nell’appendice A del libro sono riportati alcuni esempi di selettori con una loro classificazione
Continua…
32
Template and information based on data provided by DERI
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 l’esempio N°6 (ottenendo l’Esempio n°7)
File prova.html
File esempio.css
<HTML>
<HEAD>
<LINK REL=“Stylesheet” HREF=“esempio.css”
TYPE=“TEXT/CSS”>
</HEAD>
P.codice{ COLOR:RGB(255,0,0)
<body bgcolor="#D5DADF">
P.pseudo { COLOR:RGB(0,0,255)
<P CLASS=“codice” > primo P</P>
<P CLASS=“pseudo” > secondo P</P>
</BODY>
</HTML>
N.B : notiamo la presenza dell’elemento LINK che serve ad indicare un collegamento
tra il nostro documento HTML ed un altro. L’attributo 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
33
Template and information based on data provided by DERI
Lez.2
Ricapitolando nei vari esempi precedenti abbiamo visto che con il CSS:
Utilizzando L’ inline style (all’interno del documento tra I tag BODY) ogni
elemento ha il suo stile,dunque non c’è condivisione di stili tra gli elementi.
Utilizzando L’internal style sheet (all’interno del documento tra I tag </HEAD>
e <BODY> 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
34
Template and information based on data provided by DERI
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 l’inizio e la fine di una tabella
caratterizzata dai tag <TABLE> </TABLE>
TR : indica l’inizio di una nuova riga <TR> </TR>
TD : indica l’inizio di una cella (o colonna) <TD> </TD>
35
Template and information based on data provided by DERI
Lez.2 Elementi di strutturazione di un documento
Esempio1 :
<HTML>
<HEAD>
<TITLE> primo esempio di tabella</TITlE>
<BODY>
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
</BODY>
</HTML>
36
Template and information based on data provided by DERI
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 dell’esempio precedente appartenga alla classe
“ risultati” :
<TABLE CLASS=“risultati”>
………
……….
</TABLE>
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.risultati:row[3]
37
Template and information based on data provided by DERI
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.column[3]
Ed in particolare :
Column-odd
table.risultati.column[3]
38
Selezioniamo le colonne dispari
Selezioniamo le colonne pari
Template and information based on data provided by DERI
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 “ double”di spessore
5punti e di colore verde.
<HTML>
<HEAD>
<TITLE> Secondo esempio </TITLE>
<STYLETYPE=“TEXT/CSS”>
table.risultati { borde-style:double;border-width:5pt;bordercolor:green }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
</BODY>
</HTML>
39
Template and information based on data provided by DERI
Lez.2 Elementi di strutturazione di un documento
Modifichiamo l’esempio precedente ,inserendo il frammento di codice indicato in grassetto:
<HTML>
<HEAD>
<TITLE> Secondo esempio </TITLE>
<STYLETYPE=“TEXT/CSS”>
table.risultati { borde-style:double;border-width:5pt;bordercolor:green }
</STYLE>
</HEAD>
<BODY>
<TABLE CLASS=“risultati”>
<CAPTION STYLE=“align:top”> Alfabeto</CAPTION>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
</BODY>
</HTML>
40
Template and information based on data provided by DERI
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 l’orario scolastico delle materie:
<HTML>
<HEAD>
<TITLE> Secondo esempio </TITLE>
<STYLETYPE=“TEXT/CSS”>
table.risultati { borde-style:double;border-width:5pt;bordercolor:green }
</STYLE>
</HEAD>
<BODY>
<!– tabella orario scolastico- ->
<TABLE CLASS=“risultati”>
<CAPTION STYLE=“align:top”> Orario scolastico della settimana</CAPTION>
<TR>
<TD>LUNEDI</TD>
<TD>MARTEDI</TD>
<TD>MERCOLEDI</TD>
<TD>GIOVEDI</TD>
<TD>VENERDI</TD>
<TD>SABATO</TD>
</TR>
<TR>
<TD>Prima ora</TD>
<TD>Italiano</TD>
<TD>Matematica</TD>
<TD>Storia</TD>
……………
……………
</TR>
</TABLE>
</BODY>
</HTML>
41
Template and information based on data provided by DERI
Lez.2 Elementi di strutturazione di un documento
Un Esempio di HTML e CSS:
Aggiungiamo ora qualcosa all’esempio riepilogativo di HTML + CSS utilizzando la tabella dell’orario scolastico
Appena definita.
L’esempio 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.
42
Template and information based on data provided by DERI
Scarica
