1 / 42

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

Corso di HTML Anno scolastico 2004-05 Classi IVBinf , IVAinf I.T. I.S Torricelli Milano . SuperVisor Ing. Aristide Calcagno. Contenuti Lez.1 (Intro. All’HTML). Breve inrodizione ai documenti ipermediali Cosa é L’Html Istruzioni o elementi HTML

vahe
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Contenuti Lez.1(Intro. All’HTML) • Breve inrodizione ai documenti ipermediali • Cosa é L’Html • 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 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.

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

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

  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 : “ < “ , “ /> “ 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.

  7. 3) Istruzioni o elementi HTML Altro Esempio: Istruzione di Struttura <TITLE> Titolo del Documento </TITLE> 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 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.

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

  11. Contenuto dell’ elemento HEAD Contenuto dell’ elemento BODY 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>

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

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

  14. 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 orazioni Succesive elaborazioni. OSS: I tag <HEAD> <BODY> 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 <!-- --> 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.

  16. Ad Es. BR Ad Es. TABLE Ad Es. OBJECT 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. 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. Tag Apertura Elemento <XX> Nome Proprietà1=“valoreProprietà1” NomeProprietà2=“valoreProprietà2” ………………………………………. NomeProprietàN=“valoreProprietàN” CONTENUTO </XX> Elemento Tag di Chiusura Elemento se Previsto Opzionale 9 bis) Contenuto , Struttura e presentazione di un documento Documento HTML <HTML> </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.

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

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

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

  21. 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” > TagInizioElemento Nel nostro caso abbiamo: NomeProprietàSTYLE1 <P STYLE= “COLOR : RGB(0,0,255); FONT-SIZE: 20pt” > 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 : <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>

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

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

  26. 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. <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> ESEMPIO: Selettore Di Elemento Continua…

  27. 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.permotivi 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 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…

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

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

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

  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 :nell’appendice 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 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> <body bgcolor="#D5DADF"> <P CLASS=“codice” > primo P</P> <P CLASS=“pseudo” > secondo P</P> </BODY> </HTML> P.codice{ COLOR:RGB(255,0,0) P.pseudo { COLOR:RGB(0,0,255) 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

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

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

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

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

  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.column[3] Ed in particolare : Column-odd Selezioniamo le colonne dispari table.risultati.column[3] Selezioniamo le colonne pari

  39. Lez.2 Elementi di strutturazione di un documento È possibile applicare gli attributi di stile o a tutta la tabella,oppurealla singola riga e/o colonna Riassumendo possiamo dire che: 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>

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

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

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

More Related