body e i suoi tag HTML 2

Transcript

1 body e i suoi tag HTML 2

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

3 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

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

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

6 Risultato blundo// Tecnologie di Sviluppo per il WEB 6

7 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

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

9 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

10 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

11 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 Tecnologie di Sviluppo per il WEB 11

12 Esempio di colori sicuri Tecnologie di Sviluppo per il WEB 12

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

14 Nomi di colori standard Tecnologie di Sviluppo per il WEB 14

15 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

16 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

17 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

18 Risultato Tecnologie di Sviluppo per il WEB 18

19 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

20 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

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

22 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

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

24 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

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

26 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

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

28 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

29 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

30 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

31 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

33 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 FISCIANO (SA) <BR> ITALY </ADDRESS> Tecnologie di Sviluppo per il WEB 33

35 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

36 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

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

38 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

39 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

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

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

42 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

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

44 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

45 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

46 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

47 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

48 Esempio di FONT Tecnologie di Sviluppo per il WEB 48

49 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

50 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

51 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

52 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

53 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

55 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

56 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