body ei suoi tag
Transcript
body ei suoi tag
HTML – 2 body e i suoi tag 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 Green Red Blue • Bianco (255,255,255) • Rosso (255,0,0) • Nero • Verde (0,255,0) (0,0,0) • Giallo (255,255,0) • Blu Tecnologie di Sviluppo per il WEB (0,0,255) 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 (63) è 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 RIGHT TOP BOTTOM allinea a sinistra (default) allinea a destra allinea in alto 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> 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: Non – 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 < - > - "e; 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 Risultato Tecnologie di Sviluppo per il WEB 32 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 Risultato 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 Tecnologie di Sviluppo per il WEB 35 Tipi di stile logico <EM> <STRONG> <ADDRESS> <CITE> <BLOCKQUOTE> <DFN> <CODE> <KBD> testo enfatizzato forte enfasi indirizzo (già visto) citazione già visto definizione di un termine codice di un programma 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 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 & <SAMP> Tecnologie di Sviluppo per il WEB 38 Tipi di stile fisico <B> <SUB> grassetto italico sottolineato testo lampeggiante barrato spaziatura fissa Epedice <SUP> Eapice <I> <U> <BLINK> <STRIKE> <TT> 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 <!-- questo è un commento --> 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> <!-- Questo è un commento --> Un commento può essere inserito in qualsiasi punto del documento e il browser ignorerà qualsiasi cosa dentro questo tag. Puoi inserire messaggi nascosti, <!--Ciao-->, note che ti possono servire, <!--Aggiungere immagine qui--> o scrivere un messaggio che può essere utile a chi legge il sorgente della tua pagina <!--Vietato copiare --> </BODY> Tecnologie di Sviluppo per il WEB 53 Risultato 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. 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 Risultato Tecnologie di Sviluppo per il WEB 57