SlideShare a Scribd company logo
1 of 8
Download to read offline
“ Come  CREARE  E  GESTIRE UN BLOG”   a cura di Anna Guarracino La competenza digitale nella Scuola, nell’era del WEB 2.0   Corso di Formazione -Anno scolastico 2009/10- LEZIONE 5 . Semplice approccio all’html per decodificare le caratteristiche delle immagini attraverso la lettura dei tag più significativi nei codici applicativi.  
La competenza digitale nella Scuola, nell’era del WEB 2.0   Corso di Formazione -Anno scolastico 2009/10- Trasformazione di un’immagine in codice html mediante i Servizio di hosting come  TinyPic I  Servizi hosting  servono per caricare sul web immagini, musica e/o video nel blog o sito web. Per alcuni servizi si richiede la sola  registrazione  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  TinyPic  per la sua italianità e per la sua semplicità.  Il suo Sito web è:  http://tinypic.com/
Corso di Formazione -Anno scolastico 2009/10- La competenza digitale nella Scuola, nell’era del WEB 2.0   Come funzionano i servizi hosting… I  Servizi hosting  caricano le immagini e le  convertono  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 TinyPic
Corso di Formazione -Anno scolastico 2009/10- Esempio di Tag html utili nella gestione dell’immagine in un post Per inserire un’immagine <img src=&quot; Qui metti l'indirizzo dell'immagine &quot; /> Per allineare un’immagine a sinistra del post <div  align=left >      <img  src=&quot; Qui metti l'indirizzo dell'immagine &quot;  /></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.  La competenza digitale nella Scuola, nell’era del WEB 2.0
La competenza digitale nella Scuola, nell’era del WEB 2.0   Corso di Formazione -Anno scolastico 2009/10- Per inserire un’immagine sfocata <DIV align=center><IMG style=&quot;FILTER: alpha(Opacity=80, FinishOpacity=20, Style=3)&quot; src=&quot; LINK DIRETTO DELL'IMMAGINE &quot;> </DIV></TD></TR></TBODY></TABLE> Per modificare la dimensione di un’immagine <img  src=&quot; Qui metti l'indirizzo dell'immagine&quot;  width=200 height=300  />     (n.b.width=larghezza-height=lunghezza)
Corso di Formazione -Anno scolastico 2009/10- La competenza digitale nella Scuola, nell’era del WEB 2.0   Per inserire uno sfondo in un intervento <table  height=&quot;100%&quot; background=&quot; indirizzo immagine.jpg o gif &quot; border=&quot;2&quot;      bordercolor=&quot;#cccc00&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; >     <tbody  align=&quot;center&quot; >     <tr>     <td  style=&quot;text-align: center;&quot; >     <font  align=&quot;center&quot; color=&quot;#ff0000&quot; >     Inserisci il testo o inserisci ulteriori codici HTML      </font>     </td>     </tr>     </tbody>     </table>   
Corso di Formazione -Anno scolastico 2009/10- La competenza digitale nella Scuola, nell’era del WEB 2.0   Per inserire un collegamento ad un sito <a href=&quot; url del sito da collegare &quot; target=&quot;_blank&quot;> TITOLO DEL SITO </a>    Se si vuole inserire al posto del titolo del sito un’ immagine: <a  href=&quot; url del sitolo da collegare &quot; target=&quot;_blank&quot; >     <img  src=&quot; Indirizzo dell'immagine &quot; >     </a>    Esempio di un tag html utile per un collegamento on line ad un altro sito
Buon  lavoro! Corso di Formazione -Anno scolastico 2009/10-

More Related Content

What's hot

7 plugin word press che devi installare
7 plugin word press che devi installare7 plugin word press che devi installare
7 plugin word press che devi installareVenetoformazione
 
Attivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprileAttivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprilelorenzoaresi
 
Come ottimizzare le foto per i vostri siti web
Come ottimizzare le foto per i vostri siti webCome ottimizzare le foto per i vostri siti web
Come ottimizzare le foto per i vostri siti webVenetoformazione
 
Guida in italiano a Prezi (Classic)
Guida in italiano a Prezi (Classic)Guida in italiano a Prezi (Classic)
Guida in italiano a Prezi (Classic)Lorenzo Amadei
 
Font awesome, più icone per i web designer
Font awesome, più icone per i web designerFont awesome, più icone per i web designer
Font awesome, più icone per i web designerVenetoformazione
 
Modificare i temi di WordPress
Modificare i temi di WordPressModificare i temi di WordPress
Modificare i temi di WordPressMarco Chizzali
 
Wordpress la guida
Wordpress la guidaWordpress la guida
Wordpress la guidalajonard
 
Corso Pratico di WordPress
Corso Pratico di WordPressCorso Pratico di WordPress
Corso Pratico di WordPressNicola Strumia
 

What's hot (10)

7 plugin word press che devi installare
7 plugin word press che devi installare7 plugin word press che devi installare
7 plugin word press che devi installare
 
Attivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprileAttivitá per il corso di autoformazione del 12 aprile
Attivitá per il corso di autoformazione del 12 aprile
 
Come ottimizzare le foto per i vostri siti web
Come ottimizzare le foto per i vostri siti webCome ottimizzare le foto per i vostri siti web
Come ottimizzare le foto per i vostri siti web
 
Guida in italiano a Prezi (Classic)
Guida in italiano a Prezi (Classic)Guida in italiano a Prezi (Classic)
Guida in italiano a Prezi (Classic)
 
Font awesome, più icone per i web designer
Font awesome, più icone per i web designerFont awesome, più icone per i web designer
Font awesome, più icone per i web designer
 
Modificare i temi di WordPress
Modificare i temi di WordPressModificare i temi di WordPress
Modificare i temi di WordPress
 
Tutorial Slideshare
Tutorial  SlideshareTutorial  Slideshare
Tutorial Slideshare
 
Prezi sabella
Prezi sabellaPrezi sabella
Prezi sabella
 
Wordpress la guida
Wordpress la guidaWordpress la guida
Wordpress la guida
 
Corso Pratico di WordPress
Corso Pratico di WordPressCorso Pratico di WordPress
Corso Pratico di WordPress
 

Similar to Lezione N 5

Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008ninam87
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008alexzaffi86
 
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...Roberto Ellero
 
Wordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginWordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginCity Planner
 
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chromeSviluppare estensioni per google chrome
Sviluppare estensioni per google chromeMarco Vito Moscaritolo
 
Pubblicare video sulla pagina web della tua Biblioteca
Pubblicare video sulla pagina web della tua BibliotecaPubblicare video sulla pagina web della tua Biblioteca
Pubblicare video sulla pagina web della tua BibliotecaVincenzo D'Aguanno
 
Come creare un progetto web
Come creare un progetto webCome creare un progetto web
Come creare un progetto webRiccardo Mares
 
Gestione Blog
Gestione BlogGestione Blog
Gestione BlogAluzio
 
Convegno gt 2006: Presentazione e Wordpress
Convegno gt 2006: Presentazione e WordpressConvegno gt 2006: Presentazione e Wordpress
Convegno gt 2006: Presentazione e Wordpressconvegnogt
 
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giustoGioacchino Cipriano
 
Guida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito webGuida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito web1minutesite
 
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...KEA s.r.l.
 

Similar to Lezione N 5 (20)

Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
 
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...
 
Wordpress 3/7. temi e plugin
Wordpress 3/7. temi e pluginWordpress 3/7. temi e plugin
Wordpress 3/7. temi e plugin
 
HTML5
HTML5HTML5
HTML5
 
Sviluppare estensioni per google chrome
Sviluppare estensioni per google chromeSviluppare estensioni per google chrome
Sviluppare estensioni per google chrome
 
Lezione N 3
Lezione N 3Lezione N 3
Lezione N 3
 
Pubblicare video sulla pagina web della tua Biblioteca
Pubblicare video sulla pagina web della tua BibliotecaPubblicare video sulla pagina web della tua Biblioteca
Pubblicare video sulla pagina web della tua Biblioteca
 
Come creare un progetto web
Come creare un progetto webCome creare un progetto web
Come creare un progetto web
 
Blogger & HTML
Blogger & HTMLBlogger & HTML
Blogger & HTML
 
Gestione Blog
Gestione BlogGestione Blog
Gestione Blog
 
Tvclients
TvclientsTvclients
Tvclients
 
Primo Convegno GT
Primo Convegno GTPrimo Convegno GT
Primo Convegno GT
 
Convegno gt 2006: Presentazione e Wordpress
Convegno gt 2006: Presentazione e WordpressConvegno gt 2006: Presentazione e Wordpress
Convegno gt 2006: Presentazione e Wordpress
 
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
3 Risorse per aiutarti a scrivere e formattare un articolo nel modo giusto
 
Guida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito webGuida completa 1 Minute Site: come creare un sito web
Guida completa 1 Minute Site: come creare un sito web
 
WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
Realizzare manuali di istruzioni in HTML5, e-manual e digital documentation d...
 
Lezione Infea Grosseto 4
Lezione Infea Grosseto 4Lezione Infea Grosseto 4
Lezione Infea Grosseto 4
 

More from Anna Guarracino

More from Anna Guarracino (17)

Lezione n.9
Lezione n.9Lezione n.9
Lezione n.9
 
C:\Documents And Settings\Anna\Desktop\Lezione N 9
C:\Documents And Settings\Anna\Desktop\Lezione N 9C:\Documents And Settings\Anna\Desktop\Lezione N 9
C:\Documents And Settings\Anna\Desktop\Lezione N 9
 
Lezione N 6
Lezione N 6Lezione N 6
Lezione N 6
 
Inkiostro Vivo N 2
Inkiostro Vivo N 2Inkiostro Vivo N 2
Inkiostro Vivo N 2
 
Inkiostro Vivo N 1
Inkiostro Vivo N 1Inkiostro Vivo N 1
Inkiostro Vivo N 1
 
Lezione N 4
Lezione N 4Lezione N 4
Lezione N 4
 
Questionario Genitori
Questionario GenitoriQuestionario Genitori
Questionario Genitori
 
Lezione N 2
Lezione N 2Lezione N 2
Lezione N 2
 
Lezione N 1
Lezione N 1Lezione N 1
Lezione N 1
 
Monitoraggio-prove d'ingresso-
Monitoraggio-prove d'ingresso-Monitoraggio-prove d'ingresso-
Monitoraggio-prove d'ingresso-
 
Organigramma-staff
Organigramma-staffOrganigramma-staff
Organigramma-staff
 
Calendario dell'Avvento 16° giorno
Calendario dell'Avvento 16° giornoCalendario dell'Avvento 16° giorno
Calendario dell'Avvento 16° giorno
 
La storia di Gesù
La storia di GesùLa storia di Gesù
La storia di Gesù
 
Gli esseri viventi
Gli esseri viventiGli esseri viventi
Gli esseri viventi
 
I Vegetali: dal Seme... la Vita
I Vegetali: dal Seme... la VitaI Vegetali: dal Seme... la Vita
I Vegetali: dal Seme... la Vita
 
Gli Animali: dalluovo...la Vita.
Gli Animali: dalluovo...la Vita.Gli Animali: dalluovo...la Vita.
Gli Animali: dalluovo...la Vita.
 
Patto Di Corresponsabilità Vico
Patto Di Corresponsabilità VicoPatto Di Corresponsabilità Vico
Patto Di Corresponsabilità Vico
 

Lezione N 5

  • 1. “ Come CREARE E GESTIRE UN BLOG” a cura di Anna Guarracino La competenza digitale nella Scuola, nell’era del WEB 2.0 Corso di Formazione -Anno scolastico 2009/10- LEZIONE 5 . Semplice approccio all’html per decodificare le caratteristiche delle immagini attraverso la lettura dei tag più significativi nei codici applicativi.  
  • 2. La competenza digitale nella Scuola, nell’era del WEB 2.0 Corso di Formazione -Anno scolastico 2009/10- Trasformazione di un’immagine in codice html mediante i Servizio di hosting come TinyPic I Servizi hosting servono per caricare sul web immagini, musica e/o video nel blog o sito web. Per alcuni servizi si richiede la sola registrazione 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 TinyPic per la sua italianità e per la sua semplicità. Il suo Sito web è: http://tinypic.com/
  • 3. Corso di Formazione -Anno scolastico 2009/10- La competenza digitale nella Scuola, nell’era del WEB 2.0 Come funzionano i servizi hosting… I Servizi hosting caricano le immagini e le convertono 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 &quot;sfoglia&quot; 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 &quot;carica ora&quot;. 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 TinyPic
  • 4. Corso di Formazione -Anno scolastico 2009/10- Esempio di Tag html utili nella gestione dell’immagine in un post Per inserire un’immagine <img src=&quot; Qui metti l'indirizzo dell'immagine &quot; /> Per allineare un’immagine a sinistra del post <div  align=left >    <img  src=&quot; Qui metti l'indirizzo dell'immagine &quot;  /></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. La competenza digitale nella Scuola, nell’era del WEB 2.0
  • 5. La competenza digitale nella Scuola, nell’era del WEB 2.0 Corso di Formazione -Anno scolastico 2009/10- Per inserire un’immagine sfocata <DIV align=center><IMG style=&quot;FILTER: alpha(Opacity=80, FinishOpacity=20, Style=3)&quot; src=&quot; LINK DIRETTO DELL'IMMAGINE &quot;> </DIV></TD></TR></TBODY></TABLE> Per modificare la dimensione di un’immagine <img  src=&quot; Qui metti l'indirizzo dell'immagine&quot;  width=200 height=300  />   (n.b.width=larghezza-height=lunghezza)
  • 6. Corso di Formazione -Anno scolastico 2009/10- La competenza digitale nella Scuola, nell’era del WEB 2.0 Per inserire uno sfondo in un intervento <table  height=&quot;100%&quot; background=&quot; indirizzo immagine.jpg o gif &quot; border=&quot;2&quot;     bordercolor=&quot;#cccc00&quot; cellpadding=&quot;20&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; >    <tbody  align=&quot;center&quot; >    <tr>    <td  style=&quot;text-align: center;&quot; >    <font  align=&quot;center&quot; color=&quot;#ff0000&quot; >    Inserisci il testo o inserisci ulteriori codici HTML    </font>    </td>    </tr>    </tbody>    </table>   
  • 7. Corso di Formazione -Anno scolastico 2009/10- La competenza digitale nella Scuola, nell’era del WEB 2.0 Per inserire un collegamento ad un sito <a href=&quot; url del sito da collegare &quot; target=&quot;_blank&quot;> TITOLO DEL SITO </a>   Se si vuole inserire al posto del titolo del sito un’ immagine: <a  href=&quot; url del sitolo da collegare &quot; target=&quot;_blank&quot; >    <img  src=&quot; Indirizzo dell'immagine &quot; >    </a>    Esempio di un tag html utile per un collegamento on line ad un altro sito
  • 8. Buon lavoro! Corso di Formazione -Anno scolastico 2009/10-