COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI.

Presentazione sul tema: "COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI."— Transcript della presentazione:

1 COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI

2 INDICE CICLO DELLE LEZIONI LEZ. 1 INTRODUZIONE AL CORSO LEZ. 2 LA RETE INTERNET LEZ. 3 IL WEB LEZ. 4 LA POSTA ELETTRONICA LEZ. 5 LE RETI P2P LEZ. 6 CLASSI DI APPLICAZIONI WEB LEZ. 7 PORTALI E MOTORI DI RICERCA LEZ. 8 I SOCIAL NETWORKS LEZ. 9 CONCETTO DI IPERTESTO LEZ. 10 PROGETTO DI IPERTESTI LEZ. 11 IL LINGUAGGIO HTML LEZ. 12 ESERCITAZIONE SU HTML LEZ. 13 LABORATORIO DI SVILUPPO DI PAGINE WEB LEZ. 14 LABORATORIO DI SVILUPPO DI PAGINE WEB LEZ. 15 WEB 2.0 LEZ. 16 LABORATORIO DI SVILUPPO WEB 2.0 LEZ. 17 LABORATORIO DI SVILUPPO WEB 2.0 LEZ. 18 SOMMARIO DEL CORSO

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

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

5 SPECIFICA DEL FONT Il principale tag HTML per la formattazione del testo è il tag 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, 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:

6 FAMIGLIE DI FONT Famiglia di fontCaratteristicheEsempi di font serif Sono proporzionati e hanno le grazie Times, Georgia sans-serif Sono proporzionati e non hanno le grazie Helvetica, Geneva, Verdana, Arial monospace Non sono proporzionati, con o senza grazie Courier, Courier New cursiveHanno le grazieVivaldi, Comic Sans fantasyNon sono classificabiliWoodblock

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

8 ESEMPIO Esempio: Questo testo sarà di colore rosso

9 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 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 basefont size="valore" è di 3.

10 ESEMPI Questo testo sarà di dimensione 3 Questo testo sarà di dimensione 6 Questo testo sarà di dimensione 2

11 STILI Stile logicoStile fisicoEffetto (bold) rende il testo in grassetto; è usualmente (ma non sempre) visualizzato in grassetto (emphasis) (italic)Rende il testo in corsivo - (underline) Rende il testo sottolineato (è sconsigliato usare il sottolineato in una pagina web, quindi non esiste uno stile logico corrispondente) Rende il testo monospaziato Indica che il testo contenuto in questo tag è una o più linee di codice. Il testo viene monospaziato (keyboard) Rende il testo monospaziato come

12 STILI Stile logicoStile fisicoEffetto (abbreviation) Indica che il testo contenuto in questo tag è un'abbreviazione (nessun effetto di rendering) - Visualizza una porzione di testo barrato - (superscript) Visualizza una porzione di testo in apice - (subscript) Visualizza una porzione di testo in pedice - Indica che il testo contenuto in questo tag è un acronimo (nessun effetto di rendering) Indica che il testo contenuto in questo tag è un indirizzo fisico o e- mail. Il testo viene visualizzato in conrsivo

13 STILI Stile logicoStile fisicoEffetto - Indica che il testo contenuto in questo tag è una citazione. Il testo viene rientrato verso destra Indica che il testo contenuto in questo tag è una citazione. Il testo viene visualizzato in corsivo (definition) Indica che il testo contenuto in questo tag è una definizione. Il testo viene visualizzato in corsivo. (quote)- Indica che il testo contenuto in questo tag è una citazione all'interno di un testo (nessun rendering del testo) (sample)- Indica che il testo contenuto in questo tag è un esempio (nessun rendering del testo) (variable) Indica che il testo contenuto in questo tag è una variabile. Il testo viene visualizzato in corsivo

14 PARAGRAFI I paragrafi si introducono con tre operatori

15 PARAGRAFI TagSignificato Elemento block, di default ha dei margini superiori e inferiori che lo separano dal resto dei contenuti. Elemento block. Di default il testo non ha margini. Elemento in-line, serve a raggruppare il testo concettualmente

16 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 è. 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 è.

17 ESEMPIO Wikibooks ciao Questo è una guida a contenuto aperto

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

19 ELENCHI ORDINATI Elenchi ordinati Gli elenchi ordinati vengono definiti attraverso il tag che sta per Ordered List. Gli elementi dell'elenco, devono essere inclusi all'interno dei tag 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: 1° Elemento in ordine numerico 2° Elemento in ordine numerico 3° Elemento in ordine numerico

20 ELENCHI NON ORDINATI Elenchi non ordinati Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono definiti attraverso il tag che sta per Unordered List. Gli elementi dell'elenco, devono sempre essere inclusi all'interno dei tag. È 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).

21 ESEMPIO Elemento uno Elemento due Elemento tre

22 ESEMPIO Elemento con pallino Elemento con pallino 2 Elemento con pallino vuoto Elemento con pallino vuoto due Elemento con quadratino pieno Elemento con quadratino pieno 2

23 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.

24 ELENCHI DI DEFINIZIONI Per poterle usare sono necessari tre tag:, Definition List;, Definition Term; e, Definition Defined. 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.

25 ESEMPIO Wikibooks Stiamo sviluppando e distribuendo libri di testo, a contenuto aperto. Wikipedia Wikipedia è un'enciclopedia libera

26 ANCORAGGI Il tag da usare per i link è... ma da solo non serve a nulla; è fondamentale l'attributo HREF (acronimo che sta per Hypertext REFerence) La sintassi per creare un collegamento ipertestuale è molto semplice ed è la seguente: e qui la parola che risulterà cliccabile.

27 ESEMPIO Homepage di Wikibooks

28 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.

29 ESEMPIO Vai al paragrafo su Wikibooks Questo non è un link ma il testo a cui siamo stati rimandati

30 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: Parola da visualizzare

31 ESEMPIO Inviami una e-mail!

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