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

Template and information based on data provided by DERI1

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

SuperVisor Ing. Aristide Calcagno


Contenuti Lez.1(Intro. All’HTML)

1. Breve inrodizione ai documenti ipermediali 2. Cosa é L’Html3. Istruzioni o elementi HTML4. Cosa Occore per visualizzare documenti HTML5. Cosa occorre per scrivere documenti HTML6. Elementi di Base di un documento HTML 7. Attributi Generici 8. I Commenti 9. Contenuto,Struttura e Presentazione di un Documento10. Introduzione al CSS11. Cominciamo ad utilizzare il CSS12. Fogli di stile in linea con esempi13. Fogli di stile incorporati14. Identificazione e classi di elementi15. Fogli di stile esterni


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


1) Breve introduzione ai documenti ipermediali

-- Riassumendo – In un documento ipermediale possiamo pensare di individuare

ContenutoStrutturaPresentazione


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 visualizzareStruttura : che è rappresentata dalle istruzioni che vengono date per:

Gestire collegamenti con altri documentiIncludere oggetti multimedialiIncludere programmi (Script) da eseguire all’interno del documento

Istruzioni : per dare una presentazione grafica (estetica) al contenuto


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.


3) Istruzioni o elementi HTML

Altro Esempio:

<TITLE>

Titolo del Documento

</TITLE>

Istruzione di Struttura

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)


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


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.


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 request


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>

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


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…


7 bis.1) 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 orazioniSuccesive elaborazioni.

OSS: I tag <HEAD> <BODY> nella costruzione dei documenti possono anche essere omessi noi comunque li abbiamo specificati per completezza didattica.

Continua…

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  e tutti i caratteri compresi tra questi Tag vengono ignorati dal Browser.

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.


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 linkUn oggetto multimediale

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 :

Ad Es. BRAd Es. TABLE

Ad Es. HREFAd Es. OBJECT

Continua…


9 bis) Contenuto , Struttura e presentazione di un documento

<HTML>

</HTML>

<XX> Nome Proprietà1=“valoreProprietà1” NomeProprietà2=“valoreProprietà2”……………………………………….

NomeProprietàN=“valoreProprietàN”

CONTENUTO

</XX>

Tag Apertura Elemento

Opzionale

Tag di Chiusura Elemento se Previsto

Elemento

Documento HTML

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.


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…


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


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…


12 bis) Fogli di stile in linea

<TagInizioElementoSTYLE= “ NomeProprietàSTY LE1: Valore1; NomeProprietàSTYLE2: Valore2; …………………………………….. NomeProprietàSTYLEN: ValoreN” >

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…

Nel nostro caso abbiamo:

<P STYLE= “COLOR : RGB(0,0,255); FONT-SIZE: 20pt” >

TagInizioElemento

NomeProprietàSTYLE1

Valore2



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

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

</HTML>



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…



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…


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

Selettore Di Elemento

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>

Continua…

Dove conn Selettore si possono selezionare uno o più elementi all’interno del documentoAi 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.


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

Continua…

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


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.

Continua…

<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


Contenuti Lez.2(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


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…


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{……}

Continua…

N.B : nell’appendice A del libro sono riportati alcuni esempi di selettori con una loro classificazione


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.

File prova.html<HTML> <HEAD><LINK REL=“Stylesheet” HREF=“esempio.css” TYPE=“TEXT/CSS”></HEAD><body bgcolor="#D5DADF"> <P CLASS=“codice” > primo P</P><P CLASS=“pseudo” > secondo P</P></BODY></HTML>

Vediamo dunque un esempio di fogli di stile esterni riprendendo l’esempio N°6 (ottenendo l’Esempio n°7)

P.codice{ COLOR:RGB(255,0,0) P.pseudo { COLOR:RGB(0,0,255)

File esempio.css

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


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


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>



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>



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]



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 :

table.risultati.column[3]

Column-odd Selezioniamo le colonne dispari

Selezioniamo le colonne pari


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>




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


Modifichiamo l’esempio precedente ,inserendo il frammento di codice indicato in grassetto:



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>



Un Esempio di HTML e CSS:

Aggiungiamo ora qualcosa all’esempio riepilogativo di HTML + CSS utilizzando la tabella dell’orario scolasticoAppena 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 backgroundLo stesso colore di foregroud per i laboratori di tutte le materie , indipendentemente dal

colore di background dato a quella materia.

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

Documents

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