HTML 2. Il tag BODY. Nota. Esempio. body e i suoi tag

Transcript

1 body e i suoi tag HTML 2 Il tag 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 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 Esempio <BODY BGCOLOR="#AFFFFF"> Qualcosa di divertente AFFFFF è la traduzione esadecimale del colore celeste Tecnologie di Sviluppo per il WEB 3 Tecnologie di Sviluppo per il WEB 4

2 Immagini di sfondo <BODY BACKGROUND="swirlies.gif"> Qualcosa di divertente Questa è l'immagine di sfondo Risultato blundo// Tecnologie di Sviluppo per il WEB 5 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 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 colori (true color) corrispondono allo spettro dei colori distinguibili dall occhio umano Tecnologie di Sviluppo per il WEB 7 Tecnologie di Sviluppo per il WEB 8

3 Codifica RGB 8 bit 8 bit 8 bit Red Green Blue Bianco (255,255,255) Nero (0,0,0) Rosso (255,0,0) Verde (0,255,0) Giallo (255,255,0) Blu (0,0,255) 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 Tecnologie di Sviluppo per il WEB 9 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} 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 Esempio di colori sicuri Tecnologie di Sviluppo per il WEB 11 Tecnologie di Sviluppo per il WEB 12

4 Esempio di colori non sicuri Nomi di colori standard Tecnologie di Sviluppo per il WEB 13 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 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 15 Tecnologie di Sviluppo per il WEB 16

5 Esempio Risultato <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> Tecnologie di Sviluppo per il WEB 17 Tecnologie di Sviluppo per il WEB 18 Attributo del tag <Hx> ALIGN : deprecated Valori: LEFT allinea a sinistra (default) RIGHT allinea a destra CENTER allinea a centro Utilizzo <H5 ALIGN = CENTER > Titolo di livello 5 centrato </H5> 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 19 Tecnologie di Sviluppo per il WEB 20

6 Esempio <BODY > Prova di formattazione del testo 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 21 Tecnologie di Sviluppo per il WEB 22 Esempio <BODY > Prova<BR> di<br> formattazione<br> del<br> testo 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 (default) RIGHT CENTER JUSTIFY allinea a sinistra allinea a destra allinea a centro giustificato Tecnologie di Sviluppo per il WEB 23 Tecnologie di Sviluppo per il WEB 24

7 Esempio <BODY > Prova<P> di<p> formattazione<p> del<p> testo 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 25 Tecnologie di Sviluppo per il WEB 26 Esempio <BODY > Prova <P> <P> <P> <P> <P> di formattazione 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 Niente di speciale, li vedremo in seguito Non possono comparire i caratteri >, <,, &, bisogna usare < - > - &quote; e & Tecnologie di Sviluppo per il WEB 27 Tecnologie di Sviluppo per il WEB 28

8 Esempio <BODY> <PRE> Prova di formattazione del testo con il comando <STRONG> PRE </STRONG> </PRE> 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 una sola linea Tecnologie di Sviluppo per il WEB 29 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. Risultato Tecnologie di Sviluppo per il WEB 31 Tecnologie di Sviluppo per il WEB 32

9 Il tag <ADDRESS> Risultato Tag contenitore usato per fornire informazioni sull autore della pagina Spesso i browser visualizzano il contenuto di ADDRESS in italico <ADDRESS> Carlo Blundo<BR> Dipartimento di Informatica ed Applicazioni <BR> Università degli Studi di Salerno <BR> I Baronissi (SA) <BR> ITALY </ADDRESS> Tecnologie di Sviluppo per il WEB 33 Tecnologie di Sviluppo per il WEB 34 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 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 35 Tecnologie di Sviluppo per il WEB 36

10 Come appare lo stile logico 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 37 Tecnologie di Sviluppo per il WEB 38 Tipi di stile fisico <B> grassetto <I> italico <U> sottolineato <BLINK> testo lampeggiante <STRIKE> barrato <TT> spaziatura fissa <SUB> <SUP> E pedice E apice Come appare lo stile fisico Tecnologie di Sviluppo per il WEB 39 Tecnologie di Sviluppo per il WEB 40

11 Esempio <BODY > <U>Qualcosa</U> <I>di</I> <B>divertente</B> Altri stili fisici <BIG> <SMALL> <DEL> <INS> <Q> carattere più grande carattere più piccolo marca del testo cancellato da versioni precedenti del testo complemento di <DEL> quotazioni brevi Tecnologie di Sviluppo per il WEB 41 Tecnologie di Sviluppo per il WEB 42 Come appare lo stile fisico Combinazione di tag I tag possono essere annidati <BODY > Qualcosa di <I><B>divertente </B></I> Esempio di tag annidati Tecnologie di Sviluppo per il WEB 43 Tecnologie di Sviluppo per il WEB 44

12 Tag annidati I tag devono essere annidati e non interfogliati <THIS> <THAT> </THIS> </THAT> Tag sovrapposti... Sbagliato <THIS> <THAT> </THAT> </THIS> Tag annidati... giusto 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 45 Tecnologie di Sviluppo per il WEB 46 Attributi di <FONT> Esempio 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 (+/-) e non assolute Tecnologie di Sviluppo per il WEB 47 Tecnologie di Sviluppo per il WEB 48

13 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. Esempio <BODY> Facciamo un po di <U> <I> <B> <FONT COLOR= RED" FACE="ARIAL SIZE="7"> pratica </FONT> </B> </I> </U> Tecnologie di Sviluppo per il WEB 49 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 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 51 Tecnologie di Sviluppo per il WEB 52

14 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  Risultato Tecnologie di Sviluppo per il WEB 53 Tecnologie di Sviluppo per il WEB 54 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. 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 > Tecnologie di Sviluppo per il WEB 55 Tecnologie di Sviluppo per il WEB 56

15 Risultato Tecnologie di Sviluppo per il WEB 57