Capitolo 6. Formattare il testo con HTML e CSS

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Capitolo 6. Formattare il testo con HTML e CSS"

Transcript

1 Capitolo 6 Formattare il testo con HTML e CSS 6.1 Elementi a livello di carattere 6.2 Formattazione dei caratteri con i CSS 6.3 Testo preformattato 6.4 Righelli orizzontali 6.5 Interruzioni di riga 6.6 Indirizzi 6.7 Citazioni 6.8 Caratteri speciali 6.9 Allineamento del testo 6.10 Font e dimensioni di font 6.11 <nobr> e <wbr> 6.12 Riepilogo 6.13 Laboratorio Nei capitoli 4 e 5 si sono appresi i fondamenti di HTML, compresi i tag utilizzati per descrivere la struttura della pagina e creare i collegamenti. Con questa conoscenza di base, ora si è pronti per imparare cosa possono fare HTML e CSS dal punto di vista della formattazione e del layout. In questo capitolo In questo capitolo verrà descritta in dettaglio gran parte dei tag rimanenti di HTML che è necessario conoscere per creare le pagine, compresi i tag di HTML 2.0 e fino a HTML 4.01, così come gli attributi HTML dei singoli browser. In particolare si apprenderà come: Specificare l aspetto dei singoli caratteri (grassetto, corsivo, sottolineato). Includere i caratteri speciali (caratteri con accenti, simboli di copyright e così via). Creare testo preformattato (testo che mantiene spazi e tabulazioni). Allineare il testo a sinistra, a destra e al centro. Modificare il font e le sue dimensioni. Creare altri elementi di testo HTML, comprese le interruzioni di riga, le linee dei righelli, gli indirizzi e le citazioni. HTML.indb /04/

2 126 C APITO L O 6 Inoltre, verranno esaminate le differenze tra HTML standard e le estensioni HTML, e quando scegliere quali tag utilizzare nelle pagine. Si apprenderà anche quali di questi tag sono sconsigliati in XHTML, e come sfruttare CSS per ottenere gli stessi effetti. Infine, si creerà una pagina Web completa che utilizza molti dei tag illustrati nel capitolo, così come le informazioni dei quattro capitoli precedenti. In questo capitolo verranno descritti diversi tag e numerose opzioni, quindi la lettura potrebbe risultare leggermente pesante. Per ora non ci si deve preoccupare di ricordare tutto, basta farsi un idea del tipo di formattazione che si può eseguire in HTML; i tag specifici si potranno esaminare più avanti. 6.1 Elementi a livello di carattere Quando si utilizzano i tag HTML per i paragrafi, i titoli o gli elenchi, tali tag influiscono sul quell intero blocco di testo: modificando il font e la spaziatura sopra e sotto la riga, o aggiungendo i caratteri (nel caso di elenchi puntati). Questi vengono chiamati elementi a livello di blocco. Gli elementi a livello di carattere sono i tag che influiscono sulle parole o sui caratteri all interno di altre entità HTML e modificano l aspetto di quel testo così che sia diverso da quello circostante: per esempio, trasformandolo in grassetto o sottolineandolo. Per modificare l aspetto di un set di caratteri all interno del testo, è possibile utilizzare uno di questi due tipi di tag: stili logici o stili fisici. Stili logici I tag di stile logico descrivono il significato del testo presente al loro interno, non come deve essere presentato. Sono simili ai comuni tag di elemento per i paragrafi o i titoli. Per esempio, i tag di stile logico possono indicare una definizione, una porzione di codice o una parola evidenziata. Tutto questo può essere leggermente fuorviante poiché esistono standard di fatto che collegano ciascuno di questi tag a un determinato stile visuale. In altre parole, anche se un tag come <strong> ha significati diversi per persone differenti, nei borwser Web significa grassetto. Utilizzando i tag di stile logico, il browser stabilisce la reale presentazione del testo, che sia grassetto, corsivo o qualsiasi altra modifica nell aspetto. Non è possibile garantire che il testo evidenziato attraverso questi tag sarà sempre grassetto o corsivo, quindi non si deve dipendere da esso. Oggi, i creatori di browser si sono abbastanza adattati al modo in cui ciascuno di questi tag logici viene visualizzato, ma è comunque importante comprendere che questi tag hanno un significato più profondo dei semplici stili fisici che applicano. HTML.indb /04/

3 F O RMATTARE IL TES T O CON HTML E CSS 127 Ciascuno stile di carattere dispone di tag di apertura e di chiusura e influisce sul testo all interno di questi due tag. Di seguito sono riportati gli otto tag di stile logico: <em> Questo tag indica che i caratteri devono essere evidenziati in qualche modo; in altre parole, vengono formattati in modo diverso rispetto al resto del testo. Solitamente, nei browser grafici <em> evidenzia il testo in corsivo. Per esempio: <p>the anteater is the <em>strangest</em> looking animal, isn t it?</p> <strong> Con questo tag, i caratteri devono essere evidenziati maggiormente rispetto a <em>: solitamente in grassetto. Si consideri quanto segue: <p>take a <strong>left turn</strong> at <strong>dee s Hop Stop</strong></p> <code> Questo tag indica che il testo al suo interno è un esempio di codice e deve essere visualizzato con un font a larghezza fissa come Courier. Per esempio: <p><code>#include trans.h </code></p> <samp> Questo tag indica un testo di esempio e solitamente viene presentato con un font a larghezza fissa, come <code>. Ecco un esempio di utilizzo di questo tag: <p>the URL for that page is <samp>http://www.cern.ch/</samp></p> <kbd> Questo tag indica che il testo deve essere inserito dall utente. Viene anche presentato con un font a larghezza fissa. Si consideri quanto segue: <p>type the following command: <kbd>find. -name prune -print</kbd></p> <var> Questo tag indica il nome di una variabile, o di una qualche entità, da sostituire con un valore reale. Spesso viene visualizzato in corsivo o sottolineato, e utilizzato nel modo seguente: <p><code>chown</code> <var>your_name for the_file</var></p> <dfn> Questo tag indica una definizione. <dfn> viene utilizzato per evidenziare una parola (solitamente in corsivo) che verrà definita o che è appena stata definita, come nell esempio seguente: <p>styles that are named after how they are actually used are called <dfn>logical styles</dfn></p> <cite> Questo tag indica una breve citazione, come illustrato di seguito: <p>eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> HTML.indb /04/

4 128 C APITO L O 6 NOTA Dei tag di questo elenco, tutti eccetto <dfn> fanno parte della raccomandazione ufficiale HTML 2.0. <dfn> è stato aggiunto nella raccomandazione HTML 3.2. Nella raccomandazione XHTML 1.0 sono ancora tutti validi. HTML 4.01 ha introdotto due ulteriori tag di stile logico molto utili per i browser audio. Un browser grafico, come Netscape o Internet Explorer, non li visualizzerà in modo diverso. Tuttavia, quando un browser audio legge il contenuto incluso in uno di questi tag, ciascuna lettera viene pronunciata singolarmente. Per esempio, fox viene pronunciata F-O-X. Anche questi tag dispongono di un apertura e di una chiusura e influiscono sul testo al loro interno. Quelli che seguono sono i nuovi tag: <abbr> Questo tag indica l abbreviazione di una parola, come nel seguente esempio: <p>use the standard two-letter state abbreviation (such as <abbr>ca</abbr> for California)</p> <acronym> Simile al tag <abbr>, <acronym> indica una parola formata dall unione delle lettere iniziali di diverse parole, come nel seguente esempio: <p>jonathan learned his great problem-handling skills from <acronym>steps</ acronym> (Simply Tackle Each Problem Seriously)</p> Sono stati memorizzati tutti i tag? Ottimo. Alla fine del capitolo è riportato un questionario. La seguente porzione di codice illustra ciascuno dei tag di stile logico, e la Figura 6.1 mostra come vengono visualizzati. <p>the anteater is the <em>strangest</em> looking animal, isn t it?</p> <p>take a <strong>left turn</strong> at <strong>dee s Hop Stop </strong></p> <p><code>#include trans.h </code></p> <p>the URL for that page is <samp>http://www.cern.ch/</samp></p> <p>type the following command: <kbd>find. -name prune -print</kbd></p> <p><code>chown </code><var>your_name the_file</var></p> <p>styles that are named after how they are used are called <dfn>logical styles</dfn></p> <p>eggplant has been known to cause nausea in some people<cite> (Lemay, 1994)</cite></p> <p>use the standard two-letter state abbreviation (such as <abbr>ca</abbr> for California)</p> <p>jonathan learned his great problem-handling skills from <acronym>steps</acronym> (Simply Tackle Each Problem Seriously) HTML.indb /04/

5 F O RMATTARE IL TES T O CON HTML E CSS 129 Output Figura 6.1 I vari stili logici visualizzati in un browser. Stili fisici Oltre a questi tag di stile, per modificare il reale stile di presentazione del testo (grassetto, corsivo o monospaziato) è possibile utilizzare un set di tag di stile fisico. Come i tag per lo stile di carattere, ciascun tag di formattazione dispone di un apertura e di una chiusura. HTML 2.0 standard ha definito tre tag di stile fisico: <b> Grassetto. <i> Corsivo. <tt> Font monospaziato. HTML 3.2 ha definito diversi ulteriori tag di stile fisico, tra cui: <u> Sottolineato (sconsigliato in HTML 4.0). <s> Barrato (sconsigliato in HTML 4.0). <big> Stampa più grande rispetto al testo circostante. <small> Stampa più piccola. <sub> Pedice. <sup> Apice. NOTA I browser basati sul testo, come Lynx e quelli associati ai dispositivi wireless, non possono visualizzare il testo in grassetto, corsivo o a cui sia stato applicato uno stile. Solitamente evidenziano il testo in qualche modo, ma questo varia a seconda del browser e della piattaforma. È possibile annidare i tag di carattere, per esempio utilizzando sia grassetto che corsivo per un set di caratteri, nel seguente modo: <b><i>text that is both bold and italic</i></b> HTML.indb /04/

6 130 C APITO L O 6 Tuttavia, il risultato a video dipende dal browser, come per tutti i tag HTML. Non apparirà necessariamente il testo sia in grassetto sia in corsivo; potrebbe venire visualizzato uno stile o l altro: <p>in Dante s <i>inferno</i>, malaboge was the eighth circle of hell, and held the malicious and fraudulent.</p> <p>all entries must be received by <b>september 26, 1999</b>.</p> <p>type <tt>lpr -Pbirch myfile.txt</tt> to print that file.</p> <p>sign your name in the spot marked <u>sign Here</u>:</p> <p>people who wear orange shirts and plaid pants <s>have no taste</s> are fashion-challenged.</p> <p>rcp floor mats give you <big>big</big> savings over the competition!</p> <p>then, from the corner of the room, he heard a <small>tiny voice </small>.</p> <p>in heavy trading today. Consolidated Orange Trucking rose <sup>1</sup>/<sub>4</sub> points on volume of 1,457,900 shares.</p> La Figura 6.2 mostra alcuni tag fisici e il loro aspetto. Output Figura 6.2 Gli stili fisici visualizzati in un browser. 6.2 Formattazione dei caratteri con i CSS È già stato descritto il modo in cui è possibile utilizzare gli stili per modificare l aspetto dei vari elementi. Uno qualsiasi di questi effetti associati ai tag introdotti in questo capitolo può essere creato anche utilizzando i CSS. Tuttavia, prima di descrivere queste proprietà, è meglio spiegare come utilizzarle. Come è già stato accennato, l attributo style può essere sfruttato con la maggior parte dei tag. Tuttavia, molti tag influiscono in qualche modo sull aspetto del testo che racchiudono. Esiste un tag che non ha alcun effetto sul testo che include: il tag <span>, che esiste solamente per essere associato ai fogli di stile; esso HTML.indb /04/

7 F O RMATTARE IL TES T O CON HTML E CSS 131 viene utilizzato esattamente come qualsiasi altro tag esaminato in questo capitolo. Basta inserirlo intorno a un testo, in questo modo: <p>this is an example of the <span>usage of the span tag</span>.</p> Utilizzato da solo, il tag <span> non ha alcun effetto. Se accoppiato con l attributo style, può sostituire qualsiasi tag di questo capitolo e può anche eseguire un ottimo lavoro. La proprietà di decorazione del testo La proprietà text-decoration viene utilizzata per specificare quale decorazione, se presente, verrà applicata al testo incluso nel tag su cui influisce. Valori validi per questa proprietà sono underline, overline, line-through e blink. L applicazione di ciascuno di essi è rispettivamente sottolineato, sovralineato, barrato e lampeggiante. Di seguito è riportato un esempio che illustra come utilizzare ognuno di questi valori: <p>here is some <span style= text-decoration: underline >underlined text</span>.</p> <p>here is some <span style= text-decoration: overline >overlined text</ span>.</p> <p>here is some <span style= text-decoration: line-through >line-through text</span>.</p> <p>here is some <span style= text-decoration: blink >blinking text</span>.</p> L utilizzo di <span> e della proprietà text-decoration per sottolineare il testo non è diverso dall impiego del tag <u>, a eccezione del fatto che alcuni browser più datati che non supportano i CSS potrebbero non supportare questa soluzione. La buona notizia è che è possibile utilizzare questa proprietà, e tutte le proprietà descritte in questo capitolo, con qualsiasi tag che racchiude il testo. Si osservi il seguente esempio: <h1 style= text-decoration: underline >An Underlined Heading</h1> Utilizzando l attributo style, è possibile specificare l aspetto del testo del titolo. La scelta tra questo approccio e il tag <u> è indifferente: se si desidera eliminare la sottolineatura dal titolo, è necessario tornare indietro e modificare il tag stesso, indipendentemente che sia stato utilizzato il tag <u> o l attributo style. Più avanti, si imparerà come i fogli di stile possono essere sfruttati per controllare contemporaneamente l aspetto di molti elementi. HTML.indb /04/

8 132 C APITO L O 6 Proprietà dei font Quando si desidera modificare l aspetto del testo, l altra grande famiglia di proprietà che si può utilizzare sono le proprietà dei font, che possono essere sfruttate per cambiare praticamente qualsiasi aspetto del carattere utilizzato per visualizzare il testo in un browser. Una delle peculiarità delle proprietà dei font è che sono molto più specifiche rispetto ai tag descritti finora. Innanzitutto, si osserveranno alcune delle sostituzioni dirette dei tag già esaminati. La proprietà font-style può essere utilizzata per applicare il corsivo al testo. Ha tre valori possibili, normal, che è quello predefinito, italic, che visualizza il testo allo stesso modo del tag <i>, e oblique, che rappresenta una via di mezzo tra lo stile corsivo e quello normale, e non è supportata dai browser quanto il corsivo. Ecco alcuni esempi: <p>here s some <span style= font-style: italic >italicized text</span>.</p> <p>here s some <span style= font-style: oblique >oblique text</span> (which may look like regular italics in your browser).</p> Ora si esaminerà come utilizzare i CSS per creare un testo in grassetto. Nel mondo di HTML, esistono due opzioni: grassetto e non grassetto. Con i CSS, in teoria si hanno più possibilità. In teoria perché il supporto del browser per la vasta gamma di pesi dei font disponibili attraverso i CSS non è omogeneo. Per specificare che il testo deve essere visualizzato in grassetto, si utilizza la proprietà font-weight, i cui valori validi sono normal (quello predefinito), bold, bolder, lighter, e da 100 a 900, in unità di 100. Ecco acuni esempi: <p>here s some <span style= font-weight: bold >bold text</span>.</p> <p>here s some <span style= font-weight: bolder >bolder text</span>.</p> <p>here s some <span style= font-weight: lighter >lighter text</span>.</p> <p>here s some <span style= font-weight: 700 >bolder text</span>.</p> È anche possibile impostare il carattere per il testo utilizzando la proprietà font-family. Si può anche impostare il font specifico per il testo, argomento che però verrà esaminato più avanti nel capitolo. Nel frattempo, si osservi come definire il font per un membro di una particolare famiglia di font. Il font specifico verrà preso dalle preferenze dell utente. La proprietà per la modifica è font-family, i cui valori possibili sono serif, sans-serif, cursive, fantasy e monospace. Quindi, se si desidera specificare che un font monospaziato deve essere utilizzato con i CSS al posto del tag <tt>, si scriverà il seguente codice: <p><span style= font-family: monospace >This is monospaced text.</span></p> Verrà ora esaminata un opzione non disponibile attraverso i normali tag HTML. Utilizzando la proprietà font-variant, è possibile visualizzare il testo HTML.indb /04/

9 F O RMATTARE IL TES T O CON HTML E CSS 133 in modo che le lettere minuscole vengano sostituite da lettere maiuscole più grandi. I due valori possibili sono normal e small-caps. Ecco un esempio: <p><span style= font-variant: small-caps >This Text Uses Small Caps.</span></ p> La finestra del browser mostrata nella Figura 6.3 contiene un testo che utilizza la proprietà font-variant e tutte le altre proprietà descritte in questo paragrafo. Output Figura 6.3 Il testo con gli stili applicati attraverso i CSS. 6.3 Testo preformattato La maggior parte delle volte, il testo di un file HTML viene formattato in base ai tag HTML utilizzati per marcarlo. Come accennato nel Capitolo 3, qualsiasi spazio vuoto supplementare (spazi, tabulazioni, ritorni a capo) inserito nel testo viene eliminato dal browser. L unica eccezione a questa regola è il tag per il testo preformattato, <pre>. Qualsiasi spazio vuoto inserito nel testo racchiuso tra i tag <pre> e </pre> viene mantenuto nell output finale. Con questi tag, la spaziatura del testo nel codice sorgente HTML viene conservata quando questo è visualizzato sulla pagina. Lo svantaggio è che solitamente il testo preformattato viene visualizzato (almeno nei browser grafici) con un font monospaziato come Courier. Il testo preformattato è adatto per la visualizzazione di esempi di codice in cui si desidera che il testo venga formattato esattamente con i rientri utilizzati dall autore. Poiché per allineare il testo inserendo gli spazi è possibile utilizzare HTML.indb /04/

10 134 C APITO L O 6 il tag <pre>, esso può essere sfruttato per semplici tabelle. Tuttavia, il fatto che le tabelle vengano presentate con un font monospaziato non lo rende la scelta migliore (nel Capitolo 8 si apprenderà come creare vere tabelle). Di seguito è riportato un esempio di una tabella creata con <pre>: <pre> Diameter Distance Time to Time to (miles) from Sun Orbit Rotate (millions of miles) Mercury days 59 days Venus days 244 days Earth days 24 hrs Mars days 24 hrs 24 mins Jupiter years 9 hrs 50 mins Saturn years 10 hrs 39 mins Uranus years 23 hrs Neptune days 15 hrs 48 mins Pluto years 6 days 7 hrs </pre> La Figura 6.4 mostra come appare in un browser. Output Figura 6.4 Una tabella creata con <pre>, mostrata in un browser. Quando si crea il testo per il tag <pre>, è possibile utilizzare i tag di collegamento e gli stili di carattere, ma non i tag di elemento come i titoli o i paragrafi. È necessario interrompere le righe con i ritorni a capo e cercare di mantenere 60 caratteri o meno per riga. Alcuni browser possono avere uno spazio orizzontale limitato in cui visualizzare il testo. Poiché solitamente i browser non riformattano il testo preformattato per adattarlo a tale spazio, HTML.indb /04/

11 F O RMATTARE IL TES T O CON HTML E CSS 135 occorre assicurarsi che il testo rimanga entro i limiti per evitare che i lettori debbano scorrere da un lato all altro. Occorre prestare attenzione alle tabulazioni nel testo preformattato: il numero reale di caratteri per ciascuna tabulazione varia da browser a browser. Un browser può avere una tabulazione ogni quattro caratteri, mentre un altro ogni otto. È necessario convertire in spazi qualsiasi tabulazione presente nel testo preformattato così che la formattazione non venga compromessa se il testo viene visualizzato con impostazioni di tabulazione diverse rispetto a quelle del programma utilizzato per inserirlo. Il tag <pre> è adatto anche per convertire velocemente e facilmente in HTML i file che in origine avevano una qualche forma di solo testo, come i messaggi di posta o gli invii di notizie Usenet. Basta circondare l intero contenuto dell articolo con i tag <pre> e si ottiene immediatamente HTML, come nel seguente esempio: <pre> To: From: Subject: Tales of the Move From Hell, pt. 1 I spent the day on the phone today with the entire household services division of northern California, turning off services, turning on services, transferring services and other such fun things you have to do when you move. It used to be you just called these people and got put on hold for and interminable amount of time, maybe with some nice music, and then you got a customer representative who was surly and hard of hearing, but with some work you could actually get your phone turned off. </pre> Un utilizzo creativo del tag <pre> consiste nel creare immagini ASCII per le pagine Web. I seguenti esempi di input e output HTML mostrano una semplice immagine di mucca ASCII: <pre> ( ) Moo (oo) \/------\ \ ---W * </pre> HTML.indb /04/

12 136 C APITO L O 6 Il risultato è visualizzato nella Figura 6.5. Output Figura 6.5 Un immagine ASCII che illustra il funzionamento del testo preformattato. 6.4 Righelli orizzontali Il tag <hr>, che in HTML non dispone di un tag di chiusura e non ha alcun testo associato, crea una riga orizzontale sulla pagina. Le linee dei righelli vengono utilizzate per separare visualmente le sezioni di una pagina Web, per esempio prima dei titoli, o per staccare il corpo del testo da un elenco di voci. L input seguente mostra una linea del righello e un elenco scritti in XHT- ML 1.0: <hr /> <h2>to Do on Friday</h2> <ul> <li>do laundry</li> <li>send FedEx with pictures</li> <li>have lunch with Mollie</li> <li>read </li> <li>set up Ethernet</li> Chiudere gli elementi vuoti In HTML, il tag <hr> non dispone di un tag di chiusura. Per convertire questo tag in XHTML e assicurare la compatibilità con i browsers HTML, aggiungere alla fi ne del tag uno spazio e una barra laterale: <hr /> Se la riga orizzontale dispone di attributi, la barra laterale appare comunque alla fi ne del tag, come mostrato nei seguenti esempi: <hr size= 2 /> <hr width= 75% /> <hr align= center size= 4 width= 200 /> HTML.indb /04/

13 F O RMATTARE IL TES T O CON HTML E CSS 137 Figura 6.6 Un esempio di utilizzo dei righelli orizzontali intorno a un elenco. </ul> <hr /> La Figura 6.6 mostra l aspetto in un browser. Output Attributi del tag <hr> In HTML 2.0, il tag <hr> ha l aspetto illustrato, senza tag di chiusura o attributi. Tuttavia, HTML 3.2 ha introdotto diversi attributi per il tag <hr> così da disporre di un maggiore controllo sull aspetto della riga disegnata. Nella specifica HTML 4.01, tutti questi attributi sono stati sconsigliati in favore dei fogli di stile. NOTA Sebbene gli attributi di presentazione come size, width e align siano ancora supportati in HTML 4.01, i fogli di stile rappresentano ora il metodo raccomandato per controllare l aspetto di una pagina. L attributo size indica lo spessore, in pixel, della linea del righello. Il valore predefinito è 2, che rappresenta anche la dimensione più piccola. La Figura 6.7 mostra gli spessori campione delle linee dei righelli creati con il seguente codice: <h2>2 Pixels</h2> <hr size= 2 /> <h2>4 Pixels</h2> <hr size= 4 /> <h2>8 Pixels</h2> <hr size= 8 /> <h2>16 Pixels</h2> <hr size= 16 /> HTML.indb /04/

14 138 C APITO L O 6 Output Figura 6.7 Esempi di spessori delle linee dei righelli. L attributo width specifica la larghezza orizzontale della linea del righello. È possibile indicare la larghezza esatta del righello in pixel. Si può anche specificare il valore come percentuale della larghezza del browser (per esempio, 30% o 50%). Se la larghezza di un righello orizzontale viene impostata su una percentuale, essa cambierà per adattarsi alle dimensioni della finestra se l utente ridimensiona la finestra del browser. La Figura 6.8 mostra il risultato del seguente codice, che visualizza alcune larghezze campione per le linee del righello: <h2>100%</h2> <hr /> <h2>75%</h2> <hr width= 75% /> <h2>50%</h2> <hr width= 50% /> <h2>25%</h2> <hr width= 25% /> <h2>10%</h2> <hr width= 10% /> HTML.indb /04/

15 F O RMATTARE IL TES T O CON HTML E CSS 139 Output Figura 6.8 Esempi di larghezze delle linee dei righelli. Se si specifica una larghezza inferiore a quella reale della finestra del browser, è anche possibile indicare l allineamento di quel righello con l attributo align, facendo in modo che venga allineato a sinistra (align= left ), a destra (align= right ), o che sia centrato (align= center ). Per impostazione predefinita, le linee dei righelli sono centrate. Infine, nella maggior parte dei browser odierni, l attributo noshade mostrato nell esempio seguente costringe il browser a disegnare la linea del righello come una semplice riga senza l ombreggiatura tridimensionale, come mostrato nella Figura 6.9. Output Figura 6.9 Le linee dei righelli senza ombreggiatura. HTML.indb /04/

16 140 C APITO L O 6 Gestire gli attributi senza valori In HTML 4.0 e nelle versioni precedenti, l attributo noshade non richiede alcun valore. Il metodo utilizzato per applicare questo attributo è il seguente: <hr align= center size= 4 width= 200 noshade> Tuttavia, per conformarsi a XHTML 1.0, tutti gli attributi necessitano di un valore. La specifi ca HTML 4.01 richiede che gli attributi booleani (come noshade) abbiano come valore solo il nome dell attributo stesso. L esempio seguente illustra come applicare l attributo noshade al tag <hr> in conformità alla specifi ca XHTML 1.0. <hr align= center size= 4 width= 200 noshade= noshade /> <hr align= center size= 4 width= 300 noshade= noshade /> <hr align= center size= 4 width= 400 noshade= noshade /> <h1 align= center >NorthWestern Video</h1> <hr align= center size= 4 width= 400 noshade= noshade /> <hr align= center size= 4 width= 300 noshade= noshade /> <hr align= center size= 4 width= 200 noshade= noshade /> <h2 align= center >Presents</h2> 6.5 Interruzioni di riga Il tag <br> interrompe una riga di testo nel punto in cui appare. Quando un browser Web incontra un tag <br>, fa ripartire il testo dopo il tag dal margine sinistro (qualunque sia il margine sinistro corrente per l elemento). È possibile utilizzare <br> all interno di altri elementi, come i paragrafi o le voci di elenco; <br> non aggiungerà spazio supplementare sopra o sotto la nuova riga o modificherà il font o lo stile dell entità corrente. Il suo compito consiste nel far ripartire il testo sulla riga successiva. Chiudere correttamente i tag singoli Come il tag <hr>, in HTML <br> non dispone del tag di chiusura. Per convertire questo tag in XHTML e assicurare la compatibilità con i browser HTML, aggiungere uno spazio e una barra laterale alla fi ne del tag e dei suoi attributi, come mostrato nell esempio seguente: And then is heard no more: it is a tale <br /> Told by an idiot, full of sound and fury, <br /> Signifying nothing.</p> L esempio seguente mostra un semplice paragrafo in cui ciascuna riga (a eccezione dell ultima, che termina con un tag <p> di chiusura) finisce con <br>: <p>tomorrow, and tomorrow, and tomorrow,<br /> Creeps in this petty pace from day to day,<br /> To the last syllable of recorded time;<br /> HTML.indb /04/

17 F O RMATTARE IL TES T O CON HTML E CSS 141 And all our yesterdays have lighted fools<br /> The way to dusty death. Out, out, brief candle!<br /> Life s but a walking shadow; a poor player,<br /> That struts and frets his hour upon the stage,<br /> And then is heard no more: it is a tale <br /> Told by an idiot, full of sound and fury, <br /> Signifying nothing.</p> La Figura 6.10 mostra come appare in un browser. NOTA clear è un attributo del tag <br> e viene utilizzato con le immagini circondate dal testo. Questo attributo verrà esaminato nel Capitolo 7. Output Figura 6.10 Interruzioni di riga. 6.6 Indirizzi Il tag di indirizzo <address> viene utilizzato sulle pagine Web per entità di tipo firma. I tag di indirizzo solitamente vengono inseriti nella parte inferiore di ciascuna pagina Web e vengono impiegati per indicare la persona che ha scritto la pagina Web, chi contattare per ulteriori informazioni, la data, qualsiasi informazione sul copyright o altri avvertimenti, e tutto ciò che sembri appropriato. Spesso gli indirizzi sono preceduti da una linea di righello (<hr>), e il tag <br> può essere utilizzato per separare le righe. Senza un indirizzo o un qualche altro metodo di firma delle pagine Web, è praticamente impossibile scoprire chi ha scritto la pagina o chi contattare per ulteriori informazioni. La firma di ciascuna pagina Web attraverso il tag <address> rappresenta un ottimo modo per assicurarsi che le persone possano contattare l autore. <address> è un tag a livello di blocco che mostra il testo al suo interno in corsivo. L input seguente illustra un indirizzo: <hr /> <address> HTML.indb /04/

18 142 C APITO L O 6 Laura Lemay <a href= /> A service of Laura Lemay, Incorporated <br /> last revised January 10, 2003 <br /> Copyright Laura Lemay 2003 all rights reserved <br /> Void where prohibited. Keep hands and feet inside the vehicle at all times. </address> La Figura 6.11 mostra il suo aspetto in un browser. Output Figura 6.11 Un blocco di indirizzo. 6.7 Citazioni Il tag <blockquote> viene utilizzato per creare un blocco di testo con rientro all interno di una pagina (a differenza del tag <cite>, che evidenzia brevi citazioni, <blockquote> viene impiegato per citazioni più lunghe che non devono essere annidate in altri paragrafi). Per esempio, il monologo del Macbeth utilizzato nell esempio delle interruzioni di riga avrebbe funzionato meglio come <blockquote> che come semplice paragrafo. Ecco un esempio di input: <blockquote> During the whole of a dull, dark, and soundless day in the autumn of the year, when the clouds hung oppressively low in the heavens, I had been passing alone, on horseback, through a singularly dreary tract of country, and at length found myself, as the shades of evening grew on, within view of the melancholy House of Usher. ---Edgar Allen Poe </blockquote> Come per i paragrafi, è possibile dividere le righe presenti in <blockquote> utilizzando il tag per l interruzione di riga, <br>. Il seguente esempio di input mostra questo impiego: <blockquote> Guns aren t lawful, <br /> nooses give.<br /> gas smells awful.<br /> HTML.indb /04/

19 F O RMATTARE IL TES T O CON HTML E CSS 143 You might as well live.<br /> ---Dorothy Parker </blockquote> La Figura 6.12 illustra come appare in un browser l esempio di input precedente. Output Figura 6.12 Una citazione. NOTA Il tag <blockquote> viene spesso utilizzato non per indicare le citazioni all interno del testo, ma per creare i margini su entrambi i lati di una pagina allo scopo di renderla più leggibile. Questa tecnica funziona, anche se rappresenta un utilizzo improprio del tag. Oggi, i margini vengono controllati con i Cascading Style Sheet, come descritto nel Capitolo Caratteri speciali Come si è appreso nei capitoli precedenti, i file HTML sono composti da testo ASCII e non devono contenere alcuna formattazione o strani caratteri. Infatti, gli unici caratteri che è possibile inserire nei file HTML sono quelli realmente presenti sulla tastiera. Se per produrre un singolo carattere occorre tenere premuto un tasto diverso da Maiusc, o digitare una strana combinazione di tasti, non è possibile utilizzare tale carattere nel file HTML. Questo comprende i caratteri utilizzati quotidianamente, come i trattini lunghi e le virgolette inglesi (se il word processor è impostato per eseguire automaticamente le virgolette inglesi, occorre disattivare questa funzione quando si scrivono i file HTML). Ma se è possibile digitare sulla tastiera un carattere come un pallino o una a accentata attraverso una speciale sequenza di tasti, lo si può includere in un file HTML, e il browser lo visualizza correttamente, qual è il problema? Il problema è che la codifica interna eseguita dal proprio computer per produrre quel carattere (che ne consente la corretta visualizzazione nel file HTML.indb /04/

20 144 C APITO L O 6 HTML e nel browser) probabilmente non verrà interpretata da altri computer. Chiunque su Internet legga il file HTML contenente quello strano carattere potrebbe vederne un altro o semplicemente trovarsi davanti a una sequenza di caratteri incomprensibile. Oppure, a seconda del modo in cui la pagina viene inviata su Internet, il carattere potrebbe andare perso prima che raggiunga il computer su cui verrà visualizzato il file. Quindi, cosa fare? HTML fornisce una soluzione ragionevole: definisce uno speciale set di codici, chiamati entità di carattere, che possono essere inclusi nei file HTML allo scopo di rappresentare i caratteri che si desidera utilizzare. Quando interpretati da un browser, queste entità di carattere vengono visualizzate come i caratteri speciali corretti per la piattaforma e il font. Alcuni caratteri speciali non provengono dal set di caratteri ASCII esteso. Per esempio, le virgolette e le & commerciali possono essere presentate su una pagina utilizzando le entità di carattere anche se sono presenti nel set di caratteri ASCII standard. Nei documenti HTML questi caratteri hanno un significato particolare in un determinato contesto, quindi possono essere rappresentati con le entità di carattere allo scopo di evitare di confondere i browser Web. Generalmente i browser moderni non hanno problemi con questi caratteri, ma è meglio utilizzare comunque le entità. Entità di carattere per i caratteri speciali Le entità di carattere hanno le due seguenti forme: entità con nome ed entità numerate. Le entità con nome iniziano con una & commerciale e terminano con un punto e virgola (;). Tra questi due simboli si trova il nome del carattere (o, più probabilmente, una versione abbreviata di quel nome, come agrave per una a con l accento grave, o reg per un simbolo di marchio registrato).a differenza di altri tag HTML, i nomi sono sensibili all utilizzo delle maiuscole, quindi occorre assicurarsi che siano scritti correttamente. Le entità con nome hanno il seguente aspetto: à " «Anche le entità numerate iniziano con una & commerciale e terminano con un punto e virgola, ma al posto di un nome, contengono il simbolo # e un numero. I numeri corrispondono alle posizioni dei caratteri nel carattere ISO-Latin-1 (ISO ). Ogni carattere che è possibile digitare o per cui si può utilizzare un entità con nome dispone anche di un entità numerata. Le entità numerate hanno il seguente aspetto: &#130; õ HTML.indb /04/

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Corso di Informatica di Base

Corso di Informatica di Base Corso di Informatica di Base LEZIONE N 3 Cortina d Ampezzo, 4 dicembre 2008 ELABORAZIONE TESTI Grazie all impiego di programmi per l elaborazione dei testi, oggi è possibile creare documenti dall aspetto

Dettagli

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e grafici, tutto nello stesso file di documento. Durante il lavoro testo e illustrazioni appaiono sullo schermo

Dettagli

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

3.3 Formattazione. Formattare un testo. Copyright 2008 Apogeo. Formattazione del carattere

3.3 Formattazione. Formattare un testo. Copyright 2008 Apogeo. Formattazione del carattere 3.3 Formattazione Formattare un testo Modificare la formattazione del carattere Cambiare il font di un testo selezionato Modificare la dimensione e il tipo di carattere Formattazione del carattere In Word,

Dettagli

Cos è un word processor

Cos è un word processor Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei

Dettagli

In questo capitolo verrà impostato un ambiente per

In questo capitolo verrà impostato un ambiente per Capitolo 3 Il primo script in JavaScript 3.1 Gli strumenti software 3.2 Impostazione dell ambiente di authoring 3.3 Cosa farà il primo script 3.4 Inserimento del primo script 3.5 Analisi dello script 3.6

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

MICROSOFT WORD INTRODUZIONE

MICROSOFT WORD INTRODUZIONE 1 MICROSOFT WORD INTRODUZIONE Word è il programma più diffuso per elaborazione di testi, il cui scopo fondamentale è assistere l utente nelle operazioni di digitazione, revisione e formattazione di testi.

Dettagli

USARE WORD. - non solo per scrivere - Un corso per chi vuole imparare ad usare Word senza fare fatica

USARE WORD. - non solo per scrivere - Un corso per chi vuole imparare ad usare Word senza fare fatica Pagina 1 di 32 USARE WORD - non solo per scrivere - Un corso per chi vuole imparare ad usare Word senza fare fatica Indice: - La finestra di Word pag. 2 - Barra del titolo pag. 3 - Barra dei menu pag.

Dettagli

USARE WORD - non solo per scrivere -

USARE WORD - non solo per scrivere - GUIDA WORD USARE WORD - non solo per scrivere - corso Word Un corso per chi vuole imparare ad usare Word senza fare fatica Indice: - La finestra di Word pag. 2 - Barra del titolo pag. 3 - Barra dei menu

Dettagli

UTILIZZO DI WORD PROCESSOR

UTILIZZO DI WORD PROCESSOR UTILIZZO DI WORD PROCESSOR (ELABORAZIONE TESTI) Laboratorio Informatico di base A.A. 2013/2014 Dipartimento di Scienze Aziendali e Giuridiche Università della Calabria Dott. Pierluigi Muoio (pierluigi.muoio@unical.it)

Dettagli

&RUVRGLLQWURGX]LRQH DOO LQIRUPDWLFD. Microsoft Word. Tutorial

&RUVRGLLQWURGX]LRQH DOO LQIRUPDWLFD. Microsoft Word. Tutorial &RUVRGLLQWURGX]LRQH DOO LQIRUPDWLFD Microsoft Word Tutorial Sommario Introduzione Formattazione del documento Formattazione della pagina Layout di pagina particolari Personalizzazione del documento Integrazione

Dettagli

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto Applicare bordi e sfondi ai paragrafi Word permette di creare un bordo attorno ad un intera pagina o solo attorno a paragrafi selezionati. Il testo risulta incorniciato in un rettangolo completo dei quattro

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

2.3 Cenni sui fogli di stile CSS per XML

2.3 Cenni sui fogli di stile CSS per XML Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE

Dettagli

Lavorare con i paragrafi

Lavorare con i paragrafi Capitolo 4 Lavorare con i paragrafi Utilizzare il pannello Paragrafo La maggior parte della formattazione relativa ai paragrafi è gestita dal pannello Paragrafo (Figura 4.1). In questo capitolo Utilizzare

Dettagli

Microsoft Word Nozioni di base

Microsoft Word Nozioni di base Corso di Introduzione all Informatica Microsoft Word Nozioni di base Esercitatore: Fabio Palopoli SOMMARIO Esercitazione n. 1 Introduzione L interfaccia di Word Gli strumenti di Microsoft Draw La guida

Dettagli

Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail.

Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail. Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail.com Indice: La finestra di Word Barra del titolo Barra dei menu Barra degli

Dettagli

Word Processor: WORD. Classificazione

Word Processor: WORD. Classificazione Parte 5 Word Processor: WORD Classificazione Esistono diversi strumenti per la realizzazione di documenti di testuali: Editor di testo (Es: Blocco Note) Word Processor (Es: MS Word, Open Office ) Applicazioni

Dettagli

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password.

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password. Uso del computer e gestione dei file Primi passi col computer Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password. Spegnere il computer impiegando la procedura corretta.

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

Indice PARTE PRIMA L INIZIO 1

Indice PARTE PRIMA L INIZIO 1 Indice Introduzione XIII PARTE PRIMA L INIZIO 1 Capitolo 1 Esplorare il World Wide Web 3 1.1 Come funziona il World Wide Web 3 1.2 Browser Web 10 1.3 Server Web 14 1.4 Uniform Resource Locators 15 1.5

Dettagli

MICROSOFT WORD. Funzioni ed ambiente di lavoro

MICROSOFT WORD. Funzioni ed ambiente di lavoro INFORMATICA MICROSOFT WORD Prof. D Agostino Funzioni ed ambiente di lavoro...1 Interfaccia di Word...1 Stesso discorso per i menu a disposizione sulla barra dei menu: posizionando il puntatore del mouse

Dettagli

APPUNTI DI HTML (SECONDA LEZIONE)

APPUNTI DI HTML (SECONDA LEZIONE) APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà

Dettagli

8 Word seconda lezione 1

8 Word seconda lezione 1 8 Word seconda lezione 1 Word incominciamo a digitare! È il momento di iniziare a scrivere, posizionandosi con il cursore all inizio o in mezzo al documento. Talvolta però può capitare di fare degli sbagli.

Dettagli

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

G. Pettarin ECDL Modulo 3: Word 43

G. Pettarin ECDL Modulo 3: Word 43 G. Pettarin ECDL Modulo 3: Word 43 3.4 Modificare e formattare i caratteri Word permette di formattare un testo, cioè attribuirgli l aspetto che desideriamo, rendendolo più leggibile ed elegante, o dandogli

Dettagli

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa WWW.ICTIME.ORG NVU Manuale d uso Cimini Simonelli Testa Cecilia Cimini Angelo Simonelli Francesco Testa NVU Manuale d uso EDIZIONE Gennaio 2008 Questo manuale utilizza la Creative Commons License www.ictime.org

Dettagli

Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 7.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML

Linguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup:

Dettagli

Il Foglio Elettronico. Microsoft Excel

Il Foglio Elettronico. Microsoft Excel Il Foglio Elettronico 1 Parte I Concetti generali Celle e fogli di lavoro.xls Inserimento dati e tipi di dati Importazione di dati Modifica e formattazione di fogli di lavoro FOGLIO ELETTRONICO. I fogli

Dettagli

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas Fogli di stile CSS Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout,

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

Abstract Questo documento descrive come è gestita la WYSIWYG tramite l editor di testi integrato in MOVIO.

Abstract Questo documento descrive come è gestita la WYSIWYG tramite l editor di testi integrato in MOVIO. Titolo Tutorial MOVIO: WYSIWYG Release MOVIO SCMS 1.00 Versione Tutorial 1.00 Data 02/03/14 Autori e affiliation Rubino Saccoccio (Gruppometa) Commenti Dichiarazione di copyright Abstract Questo documento

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

INDICE PROGRAMMA CORSO

INDICE PROGRAMMA CORSO INDICE PROGRAMMA CORSO PRIMA LEZIONE: Lo schermo di Word, modalità di visualizzazione. SECONDA LEZIONE: Tecniche di selezione e modifica dei testi. TERZA LEZIONE: Formato carattere (tipo, stile, grandezza,

Dettagli

Compatibilità del Portale Piaggio con Internet Explorer 10 e 11. Internet Explorer 10

Compatibilità del Portale Piaggio con Internet Explorer 10 e 11. Internet Explorer 10 Italiano: Explorer 10 pagina 1, Explorer 11 pagina 2 English: Explorer 10 page 3 and 4, Explorer 11 page 5. Compatibilità del Portale Piaggio con Internet Explorer 10 e 11 Internet Explorer 10 Con l introduzione

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

FORMATO PROVA FINALE

FORMATO PROVA FINALE FORMATO PROVA FINALE Il Consiglio di Corso di Laurea in Scienze dell Amministrazione ha deliberato di adottare un nuovo format per le tesi cui occorre dunque attenersi. Quelle qui riportate sono le regole

Dettagli

Word Elaborazione testi

Word Elaborazione testi I seguenti appunti sono tratti da : Consiglio Nazionale delle ricerche ECDL Test Center modulo 3 Syllabus 5.0 Roberto Albiero Dispense di MS Word 2003 a cura di Paolo PAVAN - pavan@netlink.it Word Elaborazione

Dettagli

I PRINCIPALI TAG DEL LINGUAGGIO HTML

I PRINCIPALI TAG DEL LINGUAGGIO HTML Struttura generica di una pagina Web: I PRINCIPALI TAG DEL LINGUAGGIO HTML Titolo

Dettagli

Sommario. Introduzione... xv. Capitolo 1 Gli elementi di base delle pagine web... 1. Capitolo 2 I file delle pagine web... 27

Sommario. Introduzione... xv. Capitolo 1 Gli elementi di base delle pagine web... 1. Capitolo 2 I file delle pagine web... 27 Sommario Introduzione........................ xv HTML e CSS in breve.................... xvi I browser web....................... xvii Gli standard e le specifiche web............. xviii Il progressive

Dettagli

Microsoft Word 2007. La BARRA DI ACCESSO RAPIDO, che contiene alcuni comandi sempre visibili e può essere personalizzata.

Microsoft Word 2007. La BARRA DI ACCESSO RAPIDO, che contiene alcuni comandi sempre visibili e può essere personalizzata. Microsoft Word 2007 Microsoft Office Word è il programma di elaborazione testi di Microsoft all interno del pacchetto Office. Oggi Word ha un enorme diffusione, tanto da diventare l editor di testi più

Dettagli

Struttura logica di un programma

Struttura logica di un programma Struttura logica di un programma Tutti i programmi per computer prevedono tre operazioni principali: l input di dati (cioè l inserimento delle informazioni da elaborare) il calcolo dei risultati cercati

Dettagli

Introduzione al Linguaggio HTML

Introduzione al Linguaggio HTML Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la

Dettagli

Creare e formattare i documenti

Creare e formattare i documenti Università di L Aquila Facoltà di Biotecnologie Esame di INFORMATICA Elaborazione di testi Creare e formattare i documenti 1 IL WORD PROCESSOR I programmi per l elaborazione di testi ( detti anche di videoscrittura

Dettagli

Concetti di base della Tecnologia dell'informazione e della Comunicazione. Studio Elfra sas Via F.lli Ruffini 9 17031 Albenga SV 0182596058

Concetti di base della Tecnologia dell'informazione e della Comunicazione. Studio Elfra sas Via F.lli Ruffini 9 17031 Albenga SV 0182596058 by Studio Elfra sas Concetti di base della Tecnologia dell'informazione e della Comunicazione Aggiornato a Aprile 2009 Informatica di base 1 Elaborazione testi I word processor, o programmi per l'elaborazione

Dettagli

Word Processor: WORD (livello base) Classificazione

Word Processor: WORD (livello base) Classificazione Parte 5 Word Processor: WORD (livello base) Elementi di Informatica - AA 2008/2009 - MS Word 1 di 60 Classificazione Esistono diversi strumenti per la realizzazione di documenti testuali: Editor di testo

Dettagli

Programma Corso Office ECDL

Programma Corso Office ECDL Programma Corso Office ECDL FASE DI AULA PRIMA LEZIONE MICROSOFT WORD Concetti generali: Primi passi Aprire (e chiudere) Microsoft Word. Aprire uno o più documenti. Creare un nuovo documento (predefinito

Dettagli

Il linguaggio HTML - Nozioni di base

Il linguaggio HTML - Nozioni di base Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)

Dettagli

LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, DI ATTILIO ABBIEZZI

LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, <HEAD> DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 1: INTRODUZIONE, ELEMENTI BASE, DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 Breve Introduzione Che cosa significa linguaggio HTML? HTML = HyperText Markup Language Il primo concetto

Dettagli

Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II

Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta

Dettagli

Il foglio elettronico

Il foglio elettronico Il foglio elettronico Foglio di calcolo, Spreadsheet in inglese, Permette di elaborare DATI NUMERICI. E una TABELLA che contiene numeri che possono essere elaborati con FUNZIONI matematiche e statistiche.

Dettagli

Definire gli attributi dei blocchi

Definire gli attributi dei blocchi CAPITOLO 1 Definire gli attributi dei blocchi Obiettivi Capire che cosa sono gli attributi e come definire gli attributi con un blocco Modificare i nomi delle etichette degli attributi Inserire blocchi

Dettagli

Costruzione di un sito web - HTML

Costruzione di un sito web - HTML Costruzione di un sito web - HTML Obiettivi. Presentare le caratteristiche di un sito Web ed i concetti base per la sua costruzione: fasi di realizzazione e linguaggio HTML. Illustrare gli elementi fondamentali

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

HTML HyperText Markup Language:

HTML HyperText Markup Language: HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto

Dettagli

Laboratorio di Informatica. Facoltà di Economia Università di Foggia. Prof. Crescenzio Gallo

Laboratorio di Informatica. Facoltà di Economia Università di Foggia. Prof. Crescenzio Gallo . Laboratorio di Informatica Facoltà di Economia Università di Foggia Prof. Crescenzio Gallo Word è un programma di elaborazione testi che consente di creare, modificare e formattare documenti in modo

Dettagli

Introduzione a PowerPoint

Introduzione a PowerPoint Office automation - Dispensa su PowerPoint Pagina 1 di 11 Introduzione a PowerPoint Premessa Uno strumento di presentazione abbastanza noto è la lavagna luminosa. Questo strumento, piuttosto semplice,

Dettagli

CORSO PRATICO WinWord

CORSO PRATICO WinWord CORSO PRATICO WinWord AUTORE: Renato Avato 1. Strumenti Principali di Word Il piano di lavoro di Word comprende: La Barra del Titolo, dove sono posizionate le icone di ridimensionamento: riduci finestra

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0

Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0 Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0 G. Pettarin ECDL Modulo 3: Word 2 Modulo 3 Elaborazione testi Word G. Pettarin ECDL

Dettagli

SCRIVERE TESTI CON WORD

SCRIVERE TESTI CON WORD SCRIVERE TESTI CON WORD Per scrivere una lettera, un libro, una tesi, o un semplice cartello occorre un programma di elaborazione testo. Queste lezioni fanno riferimento al programma più conosciuto: Microsoft

Dettagli

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi FONDAMENTI DI INFORMATICA 3 Elaborazione testi Microsoft office word Concetti generali Operazioni principali Formattazione Oggetti Stampa unione Preparazione della stampa Schermata iniziale di Word Come

Dettagli

Word 2007. Word 2007. Panoramica. Pagine 2 e 3. Pagina 4. Pagina 5 Pagina 6 B C

Word 2007. Word 2007. Panoramica. Pagine 2 e 3. Pagina 4. Pagina 5 Pagina 6 B C Your Quick Reference Expert Panoramica B C Riferimento rapido D Gruppi delle schede della barra multifunzione e barra di formattazione rapida Scheda Home Scheda Inserisci Scheda Layout di pagina Scheda

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

ISTITUTO DI ISTRUZIONE SUPERIORE STATALE M.K.GANDHI WORD 2007. Isabella Dozio 17 febbraio 2012

ISTITUTO DI ISTRUZIONE SUPERIORE STATALE M.K.GANDHI WORD 2007. Isabella Dozio 17 febbraio 2012 ISTITUTO DI ISTRUZIONE SUPERIORE STATALE M.K.GANDHI WORD 2007 Isabella Dozio 17 febbraio 2012 L IMPOSTAZIONE DI WORD 2007 PULSANTE - Fare clic qui per aprire, salvare o stampare il documento e per informazioni

Dettagli

Uso di un programma per elaborazione testi (con riferimento a Microsoft Word)

Uso di un programma per elaborazione testi (con riferimento a Microsoft Word) Uso di un programma per elaborazione testi (con riferimento a Microsoft Word) Sommario La barra dei menu e le barre degli strumenti 2 La formattazione dei caratteri 8 La formattazione del testo 11 Le tabelle

Dettagli

Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda

Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda Scopo: formattare un documento con Microsoft Word 2007. PAGINA LASCIATA BIANCA INTENZIONALMENTE A Convertire un documento da formato

Dettagli

Personalizzare l area di lavoro

Personalizzare l area di lavoro 1 Personalizzare l area di lavoro Panoramica della lezione In questa lezione conoscerai l interfaccia del programma Dreamweaver CS6 (Creative Suite 6) e imparerai come: Passare fra le viste documento Gestire

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE SYLLABUS VERSIONE 5.0

EUROPEAN COMPUTER DRIVING LICENCE SYLLABUS VERSIONE 5.0 Pagina I EUROPEAN COMPUTER DRIVING LICENCE SYLLABUS VERSIONE 5.0 Modulo 3 Elaborazione testi Il seguente Syllabus è relativo al Modulo 3, Elaborazione testi, e fornisce i fondamenti per il test di tipo

Dettagli

Informatica di Base. Programma Lezioni

Informatica di Base. Programma Lezioni Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi

Dettagli

WORD 97 SCRIVERE UNA TESI DI LAUREA

WORD 97 SCRIVERE UNA TESI DI LAUREA WORD 97 SCRIVERE UNA TESI DI LAUREA PASSO 1 Per prima cosa pensiamo al formato generale della pagina: i margini richiesti da una tesi sono quasi sempre più ampi di quelli di un testo normale. Apriamo ora

Dettagli

Un introduzione al linguaggio HTML e alla creazione di una pagina Web. Stefania Funari

Un introduzione al linguaggio HTML e alla creazione di una pagina Web. Stefania Funari Un introduzione al linguaggio HTML e alla creazione di una pagina Web Appunti per il corso di Informatica (idoneità) N-R a.a. 2001-2002 Stefania Funari Dipartimento di Matematica Applicata Università Ca

Dettagli

Programma di Informatica 2ªB. Anno scolastico 2013/2014

Programma di Informatica 2ªB. Anno scolastico 2013/2014 Istituto d Istruzione Liceo Scientifico G.Bruno Muravera (CA) Programma di Informatica 2ªB Anno scolastico 2013/2014 Docente Prof. ssa Barbara Leo Libri di Testo e Materiali didattici Il testo di informatica

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Tutorial di HTML basato su HTML 4.0 e CSS 2 1 Cos è HTML HTML (HyperText Markup Language) è un linguaggio che serve a specificare la formattazione di documenti ipertestuali, che possano essere pubblicati

Dettagli

Foglio elettronico (StarOffice)

Foglio elettronico (StarOffice) Modulo Foglio elettronico (StarOffice) Modulo - Foglio elettronico, richiede che il candidato comprenda il concetto di foglio elettronico e dimostri di sapere usare il programma corrispondente. Deve comprendere

Dettagli

Gestione dei contenuti web Ultimi eventi

Gestione dei contenuti web Ultimi eventi Gestione dei contenuti web Ultimi eventi Questo manuale illustra le operazioni più comuni per la manutenzione e aggiornamento del sito web http://terremoti.ingv.it/ultimi eventi/ tramite l interfaccia

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 3 Immagini in documenti HTML 3.1 Rappresentazione delle

Dettagli

Creare un Web di FrontPage con un modello

Creare un Web di FrontPage con un modello P RO G E T TO 1 Creare un Web di FrontPage con un modello OBIETTIVI In questo progetto imparerete a: Descrivere FrontPage e spiegare le sue funzioni principali Definire HTML e spiegare l uso dei tag HTML

Dettagli

eascom MANUALE per UTENTI A cura di eascom 2012 www.eascom.it

eascom MANUALE per UTENTI A cura di eascom 2012 www.eascom.it MANUALE per UTENTI A cura di eascom 2012 www.eascom.it Indice Introduzione... 3 Perchè Wordpress... 3 Pagina di accesso all amministrazione... 3 Bacheca... 4 Home... 4 Aggiornamenti... 5 Articoli... 6

Dettagli

G. Pettarin ECDL Modulo 3: Word 84

G. Pettarin ECDL Modulo 3: Word 84 G. Pettarin ECDL Modulo 3: Word 84 La scheda vai a La scheda Vai è probabilmente la meno utilizzata delle tre: permette di spostarsi in un certo punto del documento, ad esempio su una determinata pagina

Dettagli

LEZIONE NO. 2: E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI

LEZIONE NO. 2: <BODY> E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI HTML BASE LEZIONE NO. 2: E TAG DI FORMATTAZIONE DEL TESTO DI ATTILIO ABBIEZZI FONTI: HTML.IT 1 Impostare lo sfondo L'operazione successiva all'impostazione del documento è la definizione

Dettagli

mi ritrovai per una selva oscura Master Catalogazione AA 2009/10 Maria A. Alberti Gestione dell Informazione Testo e grafica a videa Il testo

mi ritrovai per una selva oscura Master Catalogazione AA 2009/10 Maria A. Alberti Gestione dell Informazione Testo e grafica a videa Il testo Il testo Testo ha una doppia natura rappresentazione visiva del linguaggio un segno grafico proprio a video Testo digitale Contenuto del testo i caratteri e le parole Aspetto del testo Master Catagolazione

Dettagli

Creazione e modifica di una pagina Web

Creazione e modifica di una pagina Web PROGETTO P RO G E T T O Creazione e modifica di una pagina Web OBIETTIVI In questo progetto imparerete a: Descrivere Internet e i suoi termini chiave. Descrivere il World Wide Web e i suoi termini chiave.

Dettagli

APPUNTI WORD PER WINDOWS

APPUNTI WORD PER WINDOWS COBASLID Accedemia Ligustica di Belle Arti Laboratorio d informatica a.a 2005/06 prof Spaccini Gianfranco APPUNTI WORD PER WINDOWS 1. COSA È 2. NOZIONI DI BASE 2.1 COME AVVIARE WORD 2.2 LA FINESTRA DI

Dettagli

Introduzione... 3 Accesso riservato area utente... 3 Gestione utenti... 4 Gestione pagine dinamiche... 6 Aggiungere una pagina...

Introduzione... 3 Accesso riservato area utente... 3 Gestione utenti... 4 Gestione pagine dinamiche... 6 Aggiungere una pagina... Introduzione... 3 Accesso riservato area utente... 3 Gestione utenti... 4 Gestione pagine dinamiche... 6 Aggiungere una pagina... 7 Ipulsantidell editor... 9 Comporre una pagina... 9 Pubblicazione della

Dettagli

STRUMENTI DI PRESENTAZIONE POWERPOINT 2003

STRUMENTI DI PRESENTAZIONE POWERPOINT 2003 STRUMENTI DI PRESENTAZIONE POWERPOINT 2003 INDICE 1 Strumenti di Presentazione... 4 2 Concetti generali di PowerPoint... 5 2.1 APRIRE POWERPOINT... 5 2.2 SELEZIONE DEL LAYOUT... 6 2.3 SALVARE LA PRESENTAZIONE...

Dettagli

U Corso di italiano, Lezione Quindici

U Corso di italiano, Lezione Quindici 1 U Corso di italiano, Lezione Quindici U Buongiorno, anche in questa lezione iniziamo con qualche dialogo formale M Good morning, in this lesson as well, let s start with some formal dialogues U Buongiorno,

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli