COMUNICAZIONE ONLINE, RETI E VIRTUALITA’

COMUNICAZIONE ONLINE, RETI E VIRTUALITA’ MATTEO CRISTANI

INDICE • CICLO DELLE LEZIONI

AGENDA • FORMATTAZIONE DEL TESTO • LINK • ORGANIZZAZIONE DEL TESTO • ESERCITAZIONE SUI PRIMI CONCETTI

FORMATTAZIONE • La formattazione del testo si effettua impiegando alcuni tag di base • FONT • COLORE • STILE

SPECIFICA DEL FONT • Il principale tag HTML per la formattazione del testo è il tag <font> che permette di definire diversi aspetti della visualizzazione del testo, quali il carattere da utilizzare, la dimensione e il colore. • È possibile scegliere l'aspetto che assumerà il testo (quale font utilizzerà) attraverso l'attributo face del tag <font>, i cui valori sono tutti i nomi di font esistenti. • Nome di un carattere (come potrebbe essere Arial, Verdana, Helvetica o Times); • Più font, separandoli con una virgola: se il primo font non è installato sul pc dell'utente, verrà usato il secondo, e così via; per questo, alla fine della lista di font è sempre preferibile scegliere anche una famiglia generica di font (ogni font appartiene a una famiglia) in maniera tale da garantire la massima compatibilità con tutta l'utenza:

FAMIGLIE DI FONT

COLORE • Il colore si può impostare attraverso l'attributo color i cui valori possono essere tutti i colori disponibili sia in forma nominale che in forma esadecimale.

ESEMPIO • Esempio: <body> <spanstyle="color:red">Questo testo sarà di colore rosso</span> <spanstyle="color:#FF0000">Questo testo sarà di colore rosso</span> • </body>

DIMENSIONI • Le dimensioni sono determinate, su una scala arbitraria, dal valore dell'attributo size, che può essere compreso tra 1 e 7. Il valore predefinito è 3. Qualora si inserisse un valore minore di uno o maggiore di sette, verranno interpretati dal browser come dimensione 1 o 7. • È possibile anche determinare una dimensione base del font attraverso il tag <basefont> e il suo attributo size e lo si può ingrandire come si desidera semplicemente inserendo gli operatori + e - seguiti dal valore per cui si desidera incrementare o decrementare la dimensione base. Se non viene determinato il valore base di basefontsize="valore" è di 3.

ESEMPI <body> <font size="3">Questo testo sarà di dimensione 3</font> </body> <body> <basefontsize="4"> <font size="+2">Questo testo sarà di dimensione 6</font> <font size="-2">Questo testo sarà di dimensione 2</font> </basefont> </body>

STILI

PARAGRAFI • I paragrafi si introducono con tre operatori • <p> • <div> • <span>

PARAGRAFI

HR E BR • Per impaginare meglio un testo si potrebbe rendere necessaria una linea che divida ad esempio un articolo dall'altro. Il tag che svolge questa funzione è <hr>. I suoi principali attributi sono: • width che ne indica la larghezza e richiede un valore in pixel o in percentuale, • size che ne regola le dimensioni ed il cui valore viene espresso in pixel (default 2 pixel), • align che ne permette l'allineamento rispettivamente a destra, al centro o a sinistra. • Il tag che svolge la funzione per andare a capo è <br>.

ESEMPIO <body> <h1>Wikibooks</h1> <hrwidth="100%" size="3">ciao</hr> <div>Questo è una guida a contenuto aperto</div> </body>

ELENCHI • Esistono tre tipi di elenchi • Elenchi ordinati • Elenchi non ordinati • Elenchi di definizione

ELENCHI ORDINATI • Elenchi ordinati • Gli elenchi ordinati vengono definiti attraverso il tag <ol> che sta per OrderedList. Gli elementi dell'elenco, devono essere inclusi all'interno dei tag <li></li> ossia List Item. Ogni elemento verrà automaticamente preceduto da un numero.È utile l'uso dell'attributo start, il quale specifica il numero da cui partirà la numerazione dell'elenco. • Esempio di elenco ordinato: • <body> <ol> <li>1° Elemento in ordine numerico</li> <li>2° Elemento in ordine numerico</li> <li>3° Elemento in ordine numerico</li> </ol> </body>

ELENCHI NON ORDINATI • Elenchi non ordinati • Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono definiti attraverso il tag <ul> che sta per UnorderedList. Gli elementi dell'elenco, devono sempre essere inclusi all'interno dei tag <li></li>. • È possibile anche cambiare l'immagine del pallino attraverso l'attributo type i cui possibili valori sono: • circle: visualizzarà un pallino vuoto dentro (bianco al suo interno). • disc: visualizzerà un pallino pieno (nero al suo interno) è il valore di default. • square: visualizzerà un quadratino pieno (nero al suo interno).

ESEMPIO <body> <ul> <li>Elemento uno</li> <li>Elemento due</li> <li>Elemento tre</li> </ul> </body>

ESEMPIO <body> <ultype="disc"> <li>Elemento con pallino</li> <li>Elemento con pallino 2</li> </ul> <ultype="circle"> <li>Elemento con pallino vuoto</li> <li>Elemento con pallino vuoto due</li> </ul> <ultype="square"> <li>Elemento con quadratino pieno</li> <li>Elemento con quadratino pieno 2</li> </ul> </body>

ELENCHI DI DEFINIZIONI • Gli elenchi di definizioni sono degli elenchi un po' particolari che prevedono due parti: • Un elemento di testo • Una spiegazione dell'elemento • Questa caratteristica renderà questo tipo di elenchi utili per piccoli glossari, o anche per la gestione delle FAQ sul proprio sito.

ELENCHI DI DEFINIZIONI • Per poterle usare sono necessari tre tag: • <dl>, DefinitionList; • <dt>, DefinitionTerm; e • <dd>, DefinitionDefined. • Il primo tag serve per contenere l'elenco ed indicare di che tipo è, in questo caso di definizione. Il secondo tag serve per specificare la parola che verrà spiegata o meglio definita. Il terzo tag serve per contenere la spiegazione che verrà rientrata rispetto alla parola da definire.

ESEMPIO <body> <dl> <dt>Wikibooks</dt> <dd>Stiamo sviluppando e distribuendo libri di testo, a contenuto aperto.</dd> <dt>Wikipedia</dt> <dd>Wikipedia è un'enciclopedia libera</dd> </dl> </body>

ANCORAGGI • Il tag da usare per i link è <a> ... </a> ma da solo non serve a nulla; è fondamentale l'attributo HREF (acronimo che sta per HypertextREFerence) La sintassi per creare un collegamento ipertestuale è molto semplice ed è la seguente: <a href="qui va inserito l'url">e qui la parola che risulterà cliccabile</a>.

ESEMPIO <body> <a href="http://it.wikibooks.org"> Homepage di Wikibooks </a> </body>

ETICHETTE • I segnalibri o etichette sono collegamenti che non rimandano a una pagina esterna come abbiamo visto in precedenza, bensì a un contenuto disponibile nella stessa pagina. La loro sintassi è leggermente più complicata dei collegamenti esterni. Per prima cosa, si deve creare un collegamento simile a quello appena visto, ma solamente con l'attributo name, il quale farà sì che il collegamento non venga visto come un reale link ma, al contrario, come un'àncora che useremo per definire un collegamento a quel determinato testo della pagina.

ESEMPIO <body> <a href="#wiki">Vai al paragrafo su Wikibooks</a> <a name="wiki">Questo non è un link ma il testo a cui siamo stati rimandati</a> </body>

POSTA ELETTRONICA • Attraverso un link è possibile anche far aprire il client di posta dell'utente affinché questo possa inviare una e-mail con il campo A: precompilato. Ovviamente l'indirizzo di posta elettronica che comparirà in tale campo sarà quello che andremo a specificare nel codice HTML. Ecco la sintassi: <a href="mailto:indirizzo mail">Parola da visualizzare</a>

ESEMPIO <body> <a href="mailto:prova@prova.it">Inviami una e-mail!</a> </body>

POSTA ELETTRONICA CON ATTRIBUTI • Volendo è possibile stabilire anche l'oggetto e il testo del messaggio di posta. <body> <a href="mailto:prova@prova.it?subject= Oggetto&body=Corpo del Messaggio">Prova ad inviarmi una e-mail da qui </a> </body>

COMUNICAZIONE ONLINE, RETI E VIRTUALITA’