Lezione N 5

““Come Come CREARE CREARE E E

GESTIRE UN BLOG”GESTIRE UN BLOG”

a cura di Anna Guarracinoa cura di Anna Guarracino

La competenza digitaleLa competenza digitale

nella Scuola, nell’era del WEB 2.0nella Scuola, nell’era del WEB 2.0

Corso di Formazione -Anno scolastico 2009/10-

LEZIONE 5LEZIONE 5..Semplice approccio all’html per decodificare le caratteristiche delle Semplice approccio all’html per decodificare le caratteristiche delle immagini attraverso la lettura dei tag più significativi nei codici immagini attraverso la lettura dei tag più significativi nei codici applicativi.applicativi.




Trasformazione di un’immagine in codice html Trasformazione di un’immagine in codice html mediante i Servizio di hosting come mediante i Servizio di hosting come TinyPicTinyPic

I Servizi hostingServizi hosting servono per caricare sul web immagini, musica e/o video nel blog o sito web.

Per alcuni servizi si richiede la sola registrazioneregistrazione e poi si può accedere alle diverse funzioni, per altri si richiede l’acquisto del software (versioni a pagamento),mentre altri ancora sono del tutto gratuiti e senza limiti.

Per capire come funzionano è consigliabile iniziare a usare TinyPicTinyPic per la sua italianità e per la sua semplicità. Il suo Sito web è: http://tinypic.com/http://tinypic.com/



nella Scuola, nell’era del WEB 2.0nella Scuola, nell’era del WEB 2.0 Come funzionano i servizi hosting…Come funzionano i servizi hosting…

I Servizi hostingServizi hosting caricano le immagini e le convertonoconvertono in link, in codice html o in tag che copiati permettono di trasferirle nel proprio blog o sito nel formato che si desidera.

In home page è presente la barra di upload; cliccare su "sfoglia" per caricare il file dal proprio pc. Quindi decidere di che tipo è il file caricato e selezionare la dimensione fra quelle disponibili: 100x75, 160x120, 320x240, 640x480, 800x600 e 1024x768. E' possibile anche inviare il file hostato tramite mail; basta selezionare la casellina e inserire i vari indirizzi e-mail separati da uno spazio. Per terminare l'operazione di hosting cliccare sul pulsante "carica ora". TinyPic fornisce il codice html per incorporare il file su un sito, il link diretto al file e il codice per i forum.

Come funziona TinyPicCome funziona TinyPic


Esempio di Tag html utili nella gestione dell’immagine in un postEsempio di Tag html utili nella gestione dell’immagine in un post

Per inserire un’immaginePer inserire un’immagine

<img src="Qui metti l'indirizzo dell'immagine" />

Per allineare un’immagine a sinistra del postPer allineare un’immagine a sinistra del post

<div align=left> <img src="Qui metti l'indirizzo dell'immagine" /></div>

Per rendere operante il codice occorre immettere il link diretto dell’immagine caricata con servizio hosting al posto della scritta in nero tra le due virgolette, poi si pubblica il tutto e appare nel post la foto scelta con l’effetto programmato.






Per inserire un’immagine sfocataPer inserire un’immagine sfocata

<DIV align=center><IMG style="FILTER: alpha(Opacity=80, FinishOpacity=20, Style=3)" src="LINK DIRETTO

DELL'IMMAGINE"> </DIV></TD></TR></TBODY></TABLE>

Per modificare la dimensione di un’immaginePer modificare la dimensione di un’immagine

<img src="Qui metti l'indirizzo dell'immagine" width=200 height=300 />

(n.b.width=larghezza-height=lunghezza)



nella Scuola, nell’era del WEB 2.0nella Scuola, nell’era del WEB 2.0 Per inserire uno sfondo in un interventoPer inserire uno sfondo in un intervento

<table height="100%" background="indirizzo immagine.jpg o gif" border="2" bordercolor="#cccc00" cellpadding="20" cellspacing="0" width="100%">

<tbody align="center"> <tr>

<td style="text-align: center;"> <font align="center" color="#ff0000">

Inserisci il testo o inserisci ulteriori codici HTML </font> </td> </tr>

</tbody> </table>



nella Scuola, nell’era del WEB 2.0nella Scuola, nell’era del WEB 2.0 Per inserire un collegamento ad un sitoPer inserire un collegamento ad un sito

<a href="url del sito da collegare" target="_blank">TITOLO DEL SITO</a>

Se si vuole inserire al posto del titolo del sito un’ immagine:Se si vuole inserire al posto del titolo del sito un’ immagine:

<a href="url del sitolo da collegare" target="_blank"> <img src="Indirizzo dell'immagine">

</a>

Esempio di un tag html utile per un collegamento on line ad un altro Esempio di un tag html utile per un collegamento on line ad un altro sitosito

Buon Buon lavoro! lavoro!


Education

Lezione N 5