Html per traduttori

3,291 views
3,171 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,291
On SlideShare
0
From Embeds
0
Number of Embeds
1,671
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ringraziamento AITI Ricordare precedente intervento Catania
  • Breve elenco delle principali date Dai militari al commercio passando per la scienza Guerra Fredda: ARPA (ricerche tecnologiche militari) Commutazione di pacchetto: ArpaNet – pacchetti in giro per la rete Protocollo TCP-IP (2 protocolli) - internetworking Tim Berners-Lee e il Web al CERN Futuro: per la rete Internet sempre più la connessione wireless e su dispositivi diversi (collegamento costante) con integrazione con altre tecnologie (cellulari, UMTS) Per il Web la nascita del Web semantico (Tim B-L e il world wide web consortium www.w3.org)
  • Breve elenco delle principali date Dai militari al commercio passando per la scienza Guerra Fredda: ARPA (ricerche tecnologiche militari) Commutazione di pacchetto: ArpaNet – pacchetti in giro per la rete Protocollo TCP-IP (2 protocolli) - internetworking Tim Berners-Lee e il Web al CERN Futuro: per la rete Internet sempre più la connessione wireless e su dispositivi diversi (collegamento costante) con integrazione con altre tecnologie (cellulari, UMTS) Per il Web la nascita del Web semantico (Tim B-L e il world wide web consortium www.w3.org)
  • Breve elenco delle principali date Dai militari al commercio passando per la scienza Guerra Fredda: ARPA (ricerche tecnologiche militari) Commutazione di pacchetto: ArpaNet – pacchetti in giro per la rete Protocollo TCP-IP (2 protocolli) - internetworking Tim Berners-Lee e il Web al CERN Futuro: per la rete Internet sempre più la connessione wireless e su dispositivi diversi (collegamento costante) con integrazione con altre tecnologie (cellulari, UMTS) Per il Web la nascita del Web semantico (Tim B-L e il world wide web consortium www.w3.org)
  • 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>

    ×