body e i suoi tag HTML 2

Il tag BODY <BODY> </BODY> Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK = #rrggbb link attivo (mentre e' cliccato) BACKGROUND =...URL... immagine di sfondo Tecnologie di Sviluppo per il WEB 2

Nota La specifica CSS aggiunge a quasi tutti i tag HTML gli attributi CLASS, ID e STYLE Questi attributi non saranno discussi per ogni tag HTML, ma li analizzeremo quando parleremo dei fogli di stile Tecnologie di Sviluppo per il WEB 3

Esempio <BODY BGCOLOR="#AFFFFF"> Qualcosa di divertente </BODY> AFFFFF è la traduzione esadecimale del colore celeste Tecnologie di Sviluppo per il WEB 4

Immagini di sfondo <BODY BACKGROUND="swirlies.gif"> Qualcosa di divertente </BODY> Questa è l'immagine di sfondo Tecnologie di Sviluppo per il WEB 5

Risultato blundo// Tecnologie di Sviluppo per il WEB 6

Il WEB ed i colori I colori in HTML possono essere specificati o attraverso un nome (red, yellow, green, ) <body bgcolor= black > oppure attraverso la notazione esadecimale, 6 cifre precedute dal carattere # <body bgcolor= #AA33CC > Le sei cifre decimali corrispondono alla codifica RGB per i colori Tecnologie di Sviluppo per il WEB 7

Teoria dei colori La gamma dei colori è determinata dal numero di bit (associati ad ogni pixel) usati per memorizzare i dati del pixel stesso 1 bit 2 colori 24 bit 16.777.216 colori (true color) corrispondono allo spettro dei colori distinguibili dall occhio umano Tecnologie di Sviluppo per il WEB 8

Codifica RGB 8 bit 8 bit 8 bit Red Green Blue Bianco (255,255,255) Nero (0,0,0) Giallo (255,255,0) Rosso (255,0,0) Verde (0,255,0) Blu (0,0,255) Tecnologie di Sviluppo per il WEB 9

Colori WEB-safe Computer e monitor differenti possono mostrare lo stesso colore in maniera molto differente Esistono 216 codici per i colori che sono safe (sicuri) nel senso che essi sono mostrati nello stesso modo (o quasi) su tutti i computer Tutti i monitor supportano i colori a 8 bit (256 colori) Dovendo rappresentare i colori con la codifica RGB si ha che 216 (6 3 ) è il cubo più vicino a 256 (valori) posti Tecnologie di Sviluppo per il WEB 10

Colori sicuri Un colore safe sarà composto da triple scelte nell insieme di cardinalità 6: {00, 33, 66, 99, CC, FF} (in esadecimale) 0,51,102,153,204,255 (in decimale) 0033FF oppure FF3366 sono colori safe 0033F3 oppure 3466FF non lo sono Un esempio dell insieme dei colori sicuri lo si può trovare al seguente indirizzo http://www.web-source.net/216_color_chart.htm http://www.cookwood.com/html4_4e/examples/appendices/colorcharthex.htm Tecnologie di Sviluppo per il WEB 11

Esempio di colori sicuri Tecnologie di Sviluppo per il WEB 12

Esempio di colori non sicuri Tecnologie di Sviluppo per il WEB 13

Nomi di colori standard Tecnologie di Sviluppo per il WEB 14

Tipi di tag Text-level (e.g., <B>) Si riferisce ad elementi che formattano solo del testo Non causano un'andata a capo alla chiusura del tag Possono contenere solo elementi text -level Block-level (e.g., <P>) Si riferisce ad elementi che formattano blocchi di testo Causano un'andata a capo alla chiusura del tag Possono contenere elementi sia text che blocklevel Tecnologie di Sviluppo per il WEB 15

Titoli/Intestazioni (heading) Esistono 6 livelli di titoli che si ottengono utilizzando i tag contenitori da <H1> a <H6> Servono per dividere il documento in capitoli, sezioni, sottosezioni, Non saltare un livello di intestazione nei documenti Esempio, partire con <H1> e continuare con <H3> Tecnologie di Sviluppo per il WEB 16

Esempio <BODY> <H1> Titolo di livello 1</H1> <H2> Titolo di livello 2</H2> <H3> Titolo di livello 3</H3> <H4> Titolo di livello 4</H4> <H5> Titolo di livello 5</H5> <H6> Titolo di livello 6</H6> </BODY> Tecnologie di Sviluppo per il WEB 17

Risultato Tecnologie di Sviluppo per il WEB 18

Attributo del tag <Hx> ALIGN : deprecated Valori: LEFT allinea a sinistra (default) RIGHT allinea a destra TOP allinea in alto BOTTOM non supportato Utilizzo <H5 ALIGN = LEFT > Titolo di livello 5 giustificato a sinistra </H5> Tecnologie di Sviluppo per il WEB 19

Paragrafi Il browser non riconosce da solo la formattazione del testo, dobbiamo indicargliela Se non viene indicato diversamente, il browser visualizza i caratteri uno dietro l'altro. Se si vuole andare a capo si deve utilizzare un tag specifico. Tecnologie di Sviluppo per il WEB 20

Esempio <BODY > Prova di formattazione del testo </BODY> Tecnologie di Sviluppo per il WEB 21

Il tag <BR> Indica al browser di andare a capo, non ha un tag di chiusura Attributo: CLEAR (opzionale, deprecated) Indica come disporre il testo seguente rispetto ad un immagine flottante presente nella pagina Maggiori dettagli in seguito Valori: LEFT, RIGHT, ALL Tecnologie di Sviluppo per il WEB 22

Esempio <BODY > Prova<BR> di<br> formattazione<br> del<br> testo </BODY> Tecnologie di Sviluppo per il WEB 23

Il tag <P> Definisce un nuovo paragrafo, oltre ad andare a capo inserisce un interlinea Il tag </P> può essere omesso, però abituatevi sempre ad aggiungerlo Attributo: ALIGN VALORI: LEFT RIGHT CENTER JUSTIFY allinea a sinistra (default) allinea a destra allinea a centro giustificato Tecnologie di Sviluppo per il WEB 24

Esempio <BODY > Prova<P> di<p> formattazione<p> del<p> testo </BODY> Tecnologie di Sviluppo per il WEB 25

Ancora su <P> Non si può usare più di un <P> alla volta; o meglio specificando <P><P><P> non si ottengono tre interlinee, ma soltanto una Per aggiungere più interlinee si utilizza un trucco: Si aggiunge un carattere speciale che significa spazio Tecnologie di Sviluppo per il WEB 26

Esempio <BODY > Prova <P> <P> <P> <P> <P> di formattazione </BODY> Tecnologie di Sviluppo per il WEB 27

Il tag <PRE> Si usa per testi preformattati. Attributo WIDTH= numero (deprecato) Indica l ampiezza (numero di caratteri) del testo Un testo racchiuso tra i tag <PRE> </PRE> mantiene gli spazi e le interruzioni di linea del documento HTML. Gli unici comandi accettati sono quelli di formattazione logica e fisica e quelli per la definizione dei link e.g. <b> Non possono comparire i caratteri >, <,, &, bisogna usare < - > - &quote; e & Tecnologie di Sviluppo per il WEB 28

Esempio <BODY> <PRE> Prova di formattazione del testo con il comando <STRONG> PRE </STRONG> </PRE> una sola linea Tecnologie di Sviluppo per il WEB 29

Il tag <BLOCKQUOTE> Usato per citazioni di blocchi di testo Attributo CITE Informa dell URL da dove ha origine la citazione La maggior parte dei browser fanno rientrare entrambi i margini di un testo Aggiunge un interlinea prima e dopo del testo Usare i fogli di stile se si vuole far rientrare i margini destro e sinistro di un paragrafo Tecnologie di Sviluppo per il WEB 30

Esempio <BODY> Riportiamo quanto segue <BLOCKQUOTE> Browser diversi che girano su hardware diversi forniscono una visualizzazione differente dei documenti HTML, usando font diversi, interruzioni di riga in punti diversi e, generalmente, impedendo di impostare layout più precisi. </BLOCKQUOTE> E questo è quanto. </BODY> Tecnologie di Sviluppo per il WEB 31

Il tag <ADDRESS> Tag contenitore usato per fornire informazioni sull autore della pagina Spesso i browser visualizzano il contenuto di ADDRESS in italico <ADDRESS> Prof. Mimmo Parente<BR> Dipartimento di Informatica ed Applicazioni <BR> Università degli Studi di Salerno <BR> I-84084 FISCIANO (SA) <BR> ITALY </ADDRESS> Tecnologie di Sviluppo per il WEB 33

Formattazione di testo HTML ha due tipi di stile per il testo Logico Formatta del testo a seconda del suo significato. Descrive l uso di una parte di testo Lascia al browser l interpretazione del comando secondo le proprie capacità Fisico Indica al browser il formato specifico del testo Forza il testo ad assumere un particolare aspetto Richiede uno specifico formato fisico e causa problemi se il browser non è in grado di gestire il formato specificato Tecnologie di Sviluppo per il WEB 35

Tipi di stile logico <EM> testo enfatizzato <STRONG> forte enfasi <ADDRESS> indirizzo (già visto) <CITE> citazione <BLOCKQUOTE> già visto <DFN> definizione di un termine <CODE> codice di un programma <KBD> indica testo da digitare Tecnologie di Sviluppo per il WEB 36

Come appare lo stile logico Tecnologie di Sviluppo per il WEB 37

Altri tipi di stile logico <SAMP> output di un programma <VAR> variabile in un programma <ACRONYM> acronimo <ABBR> indica un abbreviazione CODE, SAMP e KBD possono anche contenere pezzi di codice con >, < e & Tecnologie di Sviluppo per il WEB 38

Tipi di stile fisico <B> <I> <U> <BLINK> <STRIKE> <TT> <SUB> <SUP> grassetto italico sottolineato testo lampeggiante barrato spaziatura fissa E pedice E apice Tecnologie di Sviluppo per il WEB 39

Come appare lo stile fisico Tecnologie di Sviluppo per il WEB 40

Esempio <BODY > <U>Qualcosa</U > <I>di</I> <B>divertente</B > </BODY> Tecnologie di Sviluppo per il WEB 41

Altri stili fisici <BIG> carattere più grande <SMALL> carattere più piccolo <DEL> marca del testo cancellato da versioni precedenti del testo <INS> complemento di <DEL> <Q> quotazioni brevi Tecnologie di Sviluppo per il WEB 42

Come appare lo stile fisico Tecnologie di Sviluppo per il WEB 43

Combinazione di tag I tag possono essere annidati <BODY > Qualcosa di <I><B>divertente </B></I> </BODY> Esempio di tag annidati Tecnologie di Sviluppo per il WEB 44

Tag annidati I tag devono essere annidati e non interfogliati <THIS> <THAT> </THIS> </THAT> Tag sovrapposti... Sbagliato <THIS> <THAT> </THAT> </THIS> Tag annidati... giusto Tecnologie di Sviluppo per il WEB 45

Il tag <FONT> TAG deprecato, usare al suo posto i fogli di stile È possibile modificare la dimensione, il colore ed il tipo di carattere del testo. I caratteri possono avere varie grandezze, quella di default è 3. Si può specificare una grandezza relativa Un numero compreso tra 6 e +6 Tecnologie di Sviluppo per il WEB 46

Attributi di <FONT> SIZE= x x varia tra 1 e 7 (oppure, tra 6 e +6) COLOR= #rrggbb FACE= nome Non supportato da tutti i browser Si possono specificare vari tipi di carattere da usare: Arial, Comic Sans MS, Impact Quando è possibile usare grandezze relative (+x, -x) e non assolute Tecnologie di Sviluppo per il WEB 47

Esempio di FONT Tecnologie di Sviluppo per il WEB 48

Il tag <BASEFONT> Serve per fissare la grandezza dei caratteri di tutto il documento Ha un solo attributo SIZE Default settato a 3 <BASEFONT SIZE= 5 > Tutto il testo avrà caratteri di grandezza 5. Tecnologie di Sviluppo per il WEB 49

Esempio <BODY> Facciamo un po di <U> <I> <B> <FONT COLOR= RED" FACE="ARIAL SIZE="7"> pratica </FONT> </B> </I> </U> </BODY> Tecnologie di Sviluppo per il WEB 50

Il tag CENTER Tutto quello compreso tra la coppia di tag <CENTER> e </CENTER> risulterà centrato Può contenere qualsiasi tipo di tag Tecnologie di Sviluppo per il WEB 51

I commenti  Tutto ciò che compare all interno di questo tag viene ignorato Usato per inserire Messaggi nascosti Commenti Note per chi legge il codice che genera la pagina HTML Tecnologie di Sviluppo per il WEB 52

Esempio <BODY>  Un commento può essere inserito in qualsiasi punto del documento e il browser ignorerà qualsiasi cosa dentro questo tag. Puoi inserire messaggi nascosti, , note che ti possono servire,  o scrivere un messaggio che può essere utile a chi legge il sorgente della tua pagina  </BODY> Tecnologie di Sviluppo per il WEB 53

Tag <HR> - Linee orizzontali <HR> traccia una riga orizzontale Attributi: SIZE=valore specifica lo spessore della riga in pixel. WIDTH=valore specifica la larghezza in pixel o in percentuale (%) rispetto alla larghezza della finestra utilizzata NOSHADE impone che la riga sia solida (non effetto ombra) ALIGN= tipo tipo di allineamento:left, RIGHT, o CENTER. Tecnologie di Sviluppo per il WEB 55

Esempio <BODY > <HR WIDTH= 20% SIZE = 10 > <HR WIDTH= 50% > <HR WIDTH= 100% NOSHADE> <HR WIDTH= 20 > <HR WIDTH= 50 > <HR WIDTH= 100 NOSHADE SIZE = 4 > </BODY> Tecnologie di Sviluppo per il WEB 56