Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.

Transcript

1 Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a /01/2015 dott. 1

2 La struttura del testo in html L'HTML fornisce una serie di tag che consentono di dividere il testo in sezioni per permettere una miglior leggibilità dello stesso. Questi tag sono: Intestazioni <H1>... </H1> Paragrafi <P>... </P> Interruzione riga <BR/> Blocchi <DIV>... </DIV> Intestazioni Le intestazioni sono normalmente utilizzate per dare un titolo ad una determinata sezione del testo. Sono definiti 6 livelli differenti che vengono specificati dal numero che compare di seguito alla H. È possibile, con l'attributo align=, specificare l'allineamento che si desidera. Ecco alcuni esempi: <H1 align="left">esempio 1</H1> <H3 align="center">esempio 2</H3> <H5 align="right">esempio 3</H5> 27/01/2015 dott.

3 Cartella prova esempio 4 Tag <h1> 27/01/2015 dott.

4 Cartella prova esempio 5 Tag <h1 h2 h3> 27/01/2015 dott.

5 Cartella prova esempio 7 Allineamento testo al centro pagina 27/01/2015 dott.

6 L impostazione dei caratteri Per impostare il tipo di carattere <FONT FACE= tipo di carattere"> testo </FONT> Esempio: <FONT FACE= " Verdana, Arial, Helvetica, sans-serif"> testo </FONT> Per impostare il colore <FONT COLOR= "#colore"> testo </FONT> Per impostare le dimensioni <FONT SIZE= "valore"> testo </FONT> Le dimensioni possono essere espresse: In px (pixel) in pt (punti tipografici) in em (font scalabile in proporzione) <FONT FACE= "tipo di carattere" COLOR= "#colore" SIZE= "dimensione"> testo </FONT> 27/01/2015 dott.

7 I colori in html I colori in HTML si possono esprimere in due modi: - in formato RGB (Red Green Blue); - indicandone il nome Il primo è sicuramente il più flessibile ed è anche il metodo utilizzato da gran parte degli editor per le elaborazioni delle immagini. Si basa sulla combinazione dei tre colori fondamentali Rosso, Verde e Blu per ottenere un qualsiasi colore nella gamma di quelli disponibili. A ciascuno di questi tre colori è possibile assegnare un valore esadecimale compreso tra "00" e "FF" (corrispondenti a 0 e 255) combinandoli in modo da ottenere la tonalità desiderata. Si ottengono in questo modo dei codici di sei cifre che vanno sempre preceduti dal simbolo # e compresi tra apici /01/2015 dott.

8 I codici esadecimali dei colori I colori, all'interno del codice HTML, sono indicati con numeri esadecimali. I numeri esadecimali sono numeri in base 16 e più precisamente sono: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, dove zero è pari a 0 e F è paria a 15. La base esadecimale è usata nella maggior parte dei programmi di grafica per identificare inequivocabilmente un colore ben specifico. Il numero esadecimale con valore più alto è FF che equivale al valore decimale 255. Per quanto riguarda il linguaggio HTML i colori sono indicati con un codice a 6 caratteri preceduto dal simbolo # che indica appunto un colore. Prendiamo in esame il colore bianco, in base esadecimale è indicato come #FFFFFF è composto da: FF = 255 Rosso FF = 255 Verde FF = 255 Blu 255 parti di rosso, 255 parti di verde e 255 parti blu Nonostante il numero massimo di colori ottenibile sia pari a (256*256*256) possiamo usare solo 216 colori che vengono indicati come i colori sicuri ossia colori che verranno visualizzati allo stesso modo da tutti i browser disponibili. Per convertire i valori RGB in codice esadecimale ci serve solo una calcolatrice che possa eseguire i calcoli nel campo esadecimale, per provare si può usare la calcolatrice di Windows in visualizzazione scientifica. Per comodità prendiamo in esame il colore bianco che ha un valore di RGB uguale per tutti e tre i componenti ossia 256, moltiplichiamo 256*256*256 otteniamo il valore di al quale sottraiamo 1 perché il primo colore risulta nullo. Convertendo da numero decimale in numero esadecimale otteniamo il valore FFFFFF che indica, appunto, il colore bianco. Nel codice HTML possiamo anche indicare i colori con il loro nome, anziché col codice esadecimale. White=#FFFFFF Black=# Red=#FF Blue=#0000FF Green=# Yellow=#FFFF Magenta=#FF00FF /01/2015 dott.

9 R G B (sintesi additiva) Una larga percentuale dello spettro visibile può essere rappresentata mescolando luci di colore rosso, verde e blu (RGB) in varie proporzioni e intensità. Quando i colori si sovrappongono, essi creano ciano, magenta, giallo e bianco. Dato che i colori RGB si combinano per creare il bianco, sono anche detti colori additivi. Codice decimale del bianco Codice esadecimale #FFFFFF 27/01/2015 dott. Codice decimale del nero Codice esadecimale # Questi colori sono usati per illuminazione, video, e monitors.

10 R G B (sintesi additiva)) R: B9 G: 84 B: EA #B984EA Codice esadecimale Codice decimale 27/01/2015 dott.

11 I colori delle pagine e del testo <HTML> <BODY BGCOLOR= "#FFFF00" > <CENTER> <H1> Testo </H1> </CENTER> </BODY> </HTML> Genera una pagina tutta gialla con scritto in nero, al centro la parola Testo 27/01/2015 dott.

12 Cartella prova esempio 10 Dimensione font Colore Font posizione Foglio di stile incorporato 27/01/2015 dott.