Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML per TRADUTTORI di Andrea Spila <HTML> <HEAD> <b>   </b> <i> <u>
Code is Poetry
Agenda <ul><li>Breve storia di Internet e del web </li></ul><ul><li>Introduzione all’HTML </li></ul><ul><li>La mia prima p...
Breve storia di Internet e del web <ul><li>PREISTORIA </li></ul><ul><li>1836  Telegrafo (Cooke e Wheatstone)  </li></ul><u...
<ul><li>LA RETE COME MEZZO DI COMUNICAZIONE </li></ul><ul><li>1971  Nascita della posta elettronica </li></ul><ul><li>1973...
<ul><li>NASCITA DEL WEB </li></ul><ul><li>1989  Nasce il web </li></ul><ul><li>1990 Nasce l’HTML (basato su SGML) </li></u...
Che cos’ è l’HTML? <ul><li>Acronimo di  HyperText Markup Language   </li></ul><ul><li>NON  è un linguaggio di programmazio...
Una metafora <ul><li>  La pagina web </li></ul><ul><li>HTML </li></ul>
Un’altra metafora <ul><li>  La pagina web </li></ul><ul><li>HTML </li></ul>
Caratteristiche dell’HTML <ul><li>Indipendente dalla piattaforma (si può leggere su ogni computer) </li></ul><ul><li>Forma...
Tag HTML <ul><li>Struttura <TAG  attributi> contenuto </TAG> o  <TAG attributi>  (tag vuoto) </li></ul><ul><li>Annidamento...
Tag di base <ul><li><HTML> </HTML>  indica il tipo di documento  </li></ul><ul><li><HEAD> </HEAD>  informazioni sul docume...
La mia prima pagina HTML <ul><li><HTML>  </li></ul><ul><li><HEAD>  </li></ul><ul><li><TITLE> Titolo della pagina </TITLE> ...
Annidamento: scatole cinesi... <ul><li><HTML>   </li></ul><ul><li><HEAD>   </li></ul><ul><li><TITLE> Titolo della pagina <...
...o matriosche <ul><li><HTML>   </li></ul><ul><li><HEAD>   </li></ul><ul><li><TITLE> Titolo della pagina </TITLE>   </li>...
La mia prima pagina HTML
Metatag <ul><li><META name=&quot;keywords&quot; content=&quot;parolachiave1, parolachiave2, parolachiave3,…&quot; /> </li>...
Tag di formattazione <ul><li>Stile </li></ul><ul><li><B> </B> grassetto (anche <STRONG>) </li></ul><ul><li><I> </I>  corsi...
Tag di formattazione (2) <ul><li>Titoli dei paragrafi (Heading) </li></ul><ul><li><Hn> Titolo del paragrafo </Hn>   </li><...
Paragrafi <ul><li>Nuovo paragrafo  <P>...</P>  </li></ul><ul><li>Contenitori  <DIV>...</DIV>  </li></ul><ul><li>  <SPAN>.....
Elenchi <ul><li>Due tipi di elenchi:  </li></ul><ul><li><OL>...</OL> (elenchi ordinati) oppure </li></ul><ul><li><UL>...</...
Elenco ordinato <ul><li><OL> </li></ul><ul><li><LI>Primo punto</LI> </li></ul><ul><li><LI>Secondo punto</LI> </li></ul><ul...
Elenco non ordinato <ul><li><UL> </li></ul><ul><li><LI>Primo punto</LI> </li></ul><ul><li><LI>Secondo punto</LI> </li></ul...
Immagini <ul><li><IMG src=“terra.gif” alt=“La terra vista dalla luna” title=“La terra vista dalla luna” width=“90” height=...
Immagini La terra vista dalla luna Attributo Title La terra vista dalla luna Attributo Alt
Tabelle <TABLE border=&quot;1&quot;>    <TR>      <TH>Mese</TH>      <TH>Risparmi</TH>   </TR>   <TR>      <TD>Gennaio</TD...
Tabelle
E infine… i link ipertestuali <ul><li>Link a un altro documento o altra risorsa </li></ul><ul><li><A href= &quot; URL &quo...
Analisi del codice: useit.com
Grazie per l’attenzione! <ul><li>Trovate i link qui: </li></ul><ul><li>http://delicious.com/andrea.spila/proz-webinar </li...
Upcoming SlideShare
Loading in …5
×

Html per traduttori

3,403 views

Published on

Introduzione ai principali elementi dell'HTML. Pensata per aiutare i traduttori a orientarsi nel codice delle pagine HTML. Ma anche per cercare di spiegare perché "il codice è poesia".

Published in: Education
  • Be the first to comment

  • Be the first to like this

Html per traduttori

  1. 1. HTML per TRADUTTORI di Andrea Spila <HTML> <HEAD> <b> </b> <i> <u>
  2. 2. Code is Poetry
  3. 3. Agenda <ul><li>Breve storia di Internet e del web </li></ul><ul><li>Introduzione all’HTML </li></ul><ul><li>La mia prima pagina HTML </li></ul><ul><li>Analisi del codice </li></ul>
  4. 4. Breve storia di Internet e del web <ul><li>PREISTORIA </li></ul><ul><li>1836 Telegrafo (Cooke e Wheatstone) </li></ul><ul><li>1858-1866 Primo cavo translatlantico </li></ul><ul><li>1876 Telefono (Bell /Meucci) </li></ul><ul><li>NASCITA DELLA RETE </li></ul><ul><li>1957 Lancio dello Sputnik </li></ul><ul><li>1958 ARPA ( Advanced Research Project Agency ) </li></ul><ul><li>1962-68 Commutazione di pacchetto </li></ul><ul><li>1969 Nasce Internet (ARPANET) </li></ul>
  5. 5. <ul><li>LA RETE COME MEZZO DI COMUNICAZIONE </li></ul><ul><li>1971 Nascita della posta elettronica </li></ul><ul><li>1973 FTP (File Transfer Protocol) </li></ul><ul><li>1974 TCP/IP </li></ul><ul><li>I COMPUTER DIVENTANO PERSONAL </li></ul><ul><li>1976 Nasce il primo Apple </li></ul><ul><li>1981 Nasce il primo PC IBM </li></ul><ul><li>1984 Nasce l’Apple Macintosh </li></ul>Breve storia di Internet e del web
  6. 6. <ul><li>NASCITA DEL WEB </li></ul><ul><li>1989 Nasce il web </li></ul><ul><li>1990 Nasce l’HTML (basato su SGML) </li></ul><ul><li>1991 Prima versione del WWW (CERN) </li></ul><ul><li>1993 Mosaic (primo browser HTML) </li></ul><ul><li>1997 Viene pubblicato l’HTML 4.0 </li></ul><ul><li>LA RIVOLUZIONE DEL WEB </li></ul><ul><li>1994 Uso commerciale del web </li></ul><ul><li>1995 100.000 siti web </li></ul><ul><li>1996 500.000 siti web </li></ul><ul><li>1997 1.000.000 siti web </li></ul><ul><li>2009 231,5 milioni di siti web </li></ul>Breve storia di Internet e del web Tim Berners-Lee
  7. 7. Che cos’ è l’HTML? <ul><li>Acronimo di HyperText Markup Language </li></ul><ul><li>NON è un linguaggio di programmazione (come C, Pascal, Java) né un linguaggio di scripting (come PHP, ASP, PERL) È un linguaggio di marcatura che indica il modo in cui devono essere presentati gli elementi di contenuto sulla pagina </li></ul><ul><li>Le indicazioni sono fornite tramite marcatori detti TAG </li></ul>
  8. 8. Una metafora <ul><li> La pagina web </li></ul><ul><li>HTML </li></ul>
  9. 9. Un’altra metafora <ul><li> La pagina web </li></ul><ul><li>HTML </li></ul>
  10. 10. Caratteristiche dell’HTML <ul><li>Indipendente dalla piattaforma (si può leggere su ogni computer) </li></ul><ul><li>Formato testo (può essere scritto in qualsiasi editor di testo) </li></ul><ul><li>Semplice (servono solo pochi tag di base per comporre una pagina HTML) </li></ul>
  11. 11. Tag HTML <ul><li>Struttura <TAG attributi> contenuto </TAG> o <TAG attributi> (tag vuoto) </li></ul><ul><li>Annidamento <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1> </li></ul>
  12. 12. Tag di base <ul><li><HTML> </HTML> indica il tipo di documento </li></ul><ul><li><HEAD> </HEAD> informazioni sul documento </li></ul><ul><li><TITLE> </TITLE> titolo del documento (nella HEAD) </li></ul><ul><li><BODY> </BODY> contenuto della pagina (visualizzato nel browser) </li></ul>
  13. 13. La mia prima pagina HTML <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Titolo della pagina </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Contenuto della pagina </li></ul><ul><li> </BODY> </li></ul><ul><li></HTML> </li></ul>
  14. 14. Annidamento: scatole cinesi... <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Titolo della pagina </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Contenuto della pagina </li></ul><ul><li> </BODY> </li></ul><ul><li></HTML> </li></ul>
  15. 15. ...o matriosche <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Titolo della pagina </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Contenuto della pagina </li></ul><ul><li> </BODY> </li></ul><ul><li></HTML> </li></ul>
  16. 16. La mia prima pagina HTML
  17. 17. Metatag <ul><li><META name=&quot;keywords&quot; content=&quot;parolachiave1, parolachiave2, parolachiave3,…&quot; /> </li></ul><ul><li><META name=&quot;description&quot; content=&quot;descrizione dei contenuti della pagina&quot; /> </li></ul>
  18. 18. Tag di formattazione <ul><li>Stile </li></ul><ul><li><B> </B> grassetto (anche <STRONG>) </li></ul><ul><li><I> </I> corsivo (anche <EM>) </li></ul><ul><li><TT> </TT> telescrivente </li></ul><ul><li><U> </U> sottolineato </li></ul><ul><li><STRIKE> </Strike> barrato </li></ul>
  19. 19. Tag di formattazione (2) <ul><li>Titoli dei paragrafi (Heading) </li></ul><ul><li><Hn> Titolo del paragrafo </Hn> </li></ul><ul><li>H1 </li></ul><ul><li>H2 </li></ul><ul><li>H3 </li></ul>
  20. 20. Paragrafi <ul><li>Nuovo paragrafo <P>...</P> </li></ul><ul><li>Contenitori <DIV>...</DIV> </li></ul><ul><li> <SPAN>...</SPAN> </li></ul><ul><li>Rimando a capo <BR> o <BR /> (tag vuoto) </li></ul>
  21. 21. Elenchi <ul><li>Due tipi di elenchi: </li></ul><ul><li><OL>...</OL> (elenchi ordinati) oppure </li></ul><ul><li><UL>...</UL> (elenchi non ordinati) </li></ul><ul><li>I punti elenco vengono inseriti all’interno di questi tag, in questo modo : <LI>contenuto del punto elenco</LI> </li></ul>
  22. 22. Elenco ordinato <ul><li><OL> </li></ul><ul><li><LI>Primo punto</LI> </li></ul><ul><li><LI>Secondo punto</LI> </li></ul><ul><li><LI>Terzo punto</LI> </li></ul><ul><li></OL> </li></ul><ul><li> </li></ul><ul><li>Primo punto </li></ul><ul><li>Secondo punto </li></ul><ul><li>Terzo punto </li></ul><ul><li> </li></ul>
  23. 23. Elenco non ordinato <ul><li><UL> </li></ul><ul><li><LI>Primo punto</LI> </li></ul><ul><li><LI>Secondo punto</LI> </li></ul><ul><li><LI>Terzo punto</LI> </li></ul><ul><li></UL> </li></ul><ul><li> </li></ul><ul><li>Primo punto </li></ul><ul><li>Secondo punto </li></ul><ul><li>Terzo punto </li></ul><ul><li> </li></ul>
  24. 24. Immagini <ul><li><IMG src=“terra.gif” alt=“La terra vista dalla luna” title=“La terra vista dalla luna” width=“90” height=“90” border=“0”> </li></ul>
  25. 25. Immagini La terra vista dalla luna Attributo Title La terra vista dalla luna Attributo Alt
  26. 26. Tabelle <TABLE border=&quot;1&quot;>   <TR>     <TH>Mese</TH>     <TH>Risparmi</TH>   </TR>   <TR>     <TD>Gennaio</TD>     <TD>€100</TD>   </TR> </TABLE>
  27. 27. Tabelle
  28. 28. E infine… i link ipertestuali <ul><li>Link a un altro documento o altra risorsa </li></ul><ul><li><A href= &quot; URL &quot; TITLE= &quot; Elenco dei lavori &quot; >descrizione del link</A> </li></ul><ul><li>Link a un elemento all’interno dello stesso documento </li></ul><ul><li><A href=&quot;#nome”>Descrizione del link</A> </li></ul><ul><li><A name=&quot;nome&quot;>Destinazione</A> </li></ul>
  29. 29. Analisi del codice: useit.com
  30. 30. Grazie per l’attenzione! <ul><li>Trovate i link qui: </li></ul><ul><li>http://delicious.com/andrea.spila/proz-webinar </li></ul><ul><li>La presentazione invece è qui: </li></ul><ul><li>http://www.slideshare.net/andreaspila/html-per-traduttori </li></ul><ul><li>E potete scrivermi qui: </li></ul><ul><li>[email_address] </li></ul>

×