HTML for TRANSLATORS by Andrea Spila <HTML> <HEAD> <b>   </b> <i> <u>
Agenda <ul><li>A brief history of Internet and the web </li></ul><ul><li>Introduction to HTML </li></ul><ul><li>My first H...
A brief history of Internet and the web <ul><li>PREHISTORY </li></ul><ul><li>1836  Telegraph (Cooke & Wheatstone)  </li></...
<ul><li>THE NET AS A MEANS  OF COMMUNICATION </li></ul><ul><li>1971  E-mail is born </li></ul><ul><li>1973  FTP (File Tran...
<ul><li>BIRTH OF THE WEB </li></ul><ul><li>1989  The Web is born </li></ul><ul><li>1991  First version of the WWW (CERN) <...
What is HTML? <ul><li>An acronym of  HyperText Markup Language   </li></ul><ul><li>IT IS  NOT  a programming language (suc...
A metaphor <ul><li>  The web page </li></ul><ul><li>HTML </li></ul>
Another metaphor <ul><li>  The web page </li></ul><ul><li>HTML </li></ul>
Features of HTML <ul><li>Platform independent (may be read on any computer) </li></ul><ul><li>Text format   (may be writte...
HTML tags <ul><li>Structure <TAG  attributes> content </TAG> or  <TAG attributes>  (stand-alone tag) </li></ul><ul><li>Nes...
Basic tags <ul><li><HTML> </HTML>  indicates the type of document  </li></ul><ul><li><HEAD> </HEAD>  information on the do...
My first HTML page <ul><li><HTML>  </li></ul><ul><li><HEAD>  </li></ul><ul><li><TITLE> Page title </TITLE>  </li></ul><ul>...
Nesting: chinese boxes... <ul><li><HTML>   </li></ul><ul><li><HEAD>   </li></ul><ul><li><TITLE> Page title </TITLE>   </li...
...or  matryoshka  dolls <ul><li><HTML>   </li></ul><ul><li><HEAD>   </li></ul><ul><li><TITLE> Page title </TITLE>   </li>...
My first HTML page
Meta tags <ul><li><meta name=&quot;keywords&quot; content=&quot;keyword1, keyword2, keyword3,…&quot; /> </li></ul><ul><li>...
Formatting tags <ul><li>Style </li></ul><ul><li><b> </b> bold (also <strong>) </li></ul><ul><li><i> </i>  italic  (also <e...
Formatting tags (2) <ul><li>Headings </li></ul><ul><li><Hn align=left|right|center|justify> ...</Hn>   </li></ul><ul><li>H...
Paragraphs <ul><li>New paragraph  <p>...</p>  </li></ul><ul><li><p align=left|right|center|justify>   </li></ul><ul><li>Co...
Lists <ul><li>Two types of lists:  </li></ul><ul><li><ol>...</ol> (ordered lists) Or </li></ul><ul><li><ul>...</ul> (unord...
Images <ul><li><IMG SRC=“terra.gif” ALT=“Earth seen from the satellite” WIDTH=90 HEIGHT=90 BORDER=0>   </li></ul>
Tables <table border=&quot;1&quot;>    <tr>      <th>Month</th>      <th>Savings</th>   </tr>   <tr>      <td>January</td>...
Last (but not least): hypertext links <ul><li>Link to another document/resource </li></ul><ul><li><A HREF=“URL” TITLE=“Lis...
Code analysis: useit.com
Thank you for your attention! <ul><li>Links can be found here: </li></ul><ul><li>http://delicious.com/andrea.spila/proz-we...
Upcoming SlideShare
Loading in …5
×

Html for translators

2,147 views

Published on

HTML for translators webinar for Proz.com (18 June 2010)

Published in: Education, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,147
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
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 for translators

    1. HTML for TRANSLATORS by Andrea Spila <HTML> <HEAD> <b> </b> <i> <u>
    2. Agenda <ul><li>A brief history of Internet and the web </li></ul><ul><li>Introduction to HTML </li></ul><ul><li>My first HTML page </li></ul><ul><li>Code analysis </li></ul>
    3. A brief history of Internet and the web <ul><li>PREHISTORY </li></ul><ul><li>1836 Telegraph (Cooke & Wheatstone) </li></ul><ul><li>1858-1866 First transatlantic cable </li></ul><ul><li>1876 Telephone (Bell /Meucci) </li></ul><ul><li>THE BIRTH OF THE NET </li></ul><ul><li>1957 Sputnik is launched </li></ul><ul><li>1958 ARPA ( Advanced Research Project Agency ) </li></ul><ul><li>1962-68 Packet switching </li></ul><ul><li>1969 Birth of the Internet (ARPANET) </li></ul>
    4. <ul><li>THE NET AS A MEANS OF COMMUNICATION </li></ul><ul><li>1971 E-mail is born </li></ul><ul><li>1973 FTP (File Transfer Protocol) </li></ul><ul><li>1974 TCP/IP </li></ul><ul><li>COMPUTERS BECOME PERSONAL </li></ul><ul><li>1976 The first Apple is born </li></ul><ul><li>1981 The first IBM PC is born </li></ul><ul><li>1984 Apple Macintosh is born </li></ul>A brief history of Internet and the web
    5. <ul><li>BIRTH OF THE WEB </li></ul><ul><li>1989 The Web is born </li></ul><ul><li>1991 First version of the WWW (CERN) </li></ul><ul><li>1993 Mosaic (first HTML browser) </li></ul><ul><li>THE WEB REVOLUTION </li></ul><ul><li>1994 Commercial use of the web </li></ul><ul><li>1995 100.000 websites </li></ul><ul><li>1996 500.000 websites </li></ul><ul><li>1997 1.000.000 websites </li></ul><ul><li>2009 231,5 million websites </li></ul>A brief history of Internet and the web Tim Berners-Lee
    6. What is HTML? <ul><li>An acronym of HyperText Markup Language </li></ul><ul><li>IT IS NOT a programming language (such as C, Pascal, Java) nor a scripting language (such as PHP, ASP, PERL) IT IS a markup language that indicates how content elements should be presented on a page </li></ul><ul><li>Indications are supplied by means of markers called TAGS </li></ul>
    7. A metaphor <ul><li> The web page </li></ul><ul><li>HTML </li></ul>
    8. Another metaphor <ul><li> The web page </li></ul><ul><li>HTML </li></ul>
    9. Features of HTML <ul><li>Platform independent (may be read on any computer) </li></ul><ul><li>Text format (may be written in any text editor) </li></ul><ul><li>Simple (you only need a few basic tags to compose an HTML page) </li></ul>
    10. HTML tags <ul><li>Structure <TAG attributes> content </TAG> or <TAG attributes> (stand-alone tag) </li></ul><ul><li>Nesting <TAG1 attributes> content 1 <TAG2> content 2 </TAG2> </TAG1> </li></ul>
    11. Basic tags <ul><li><HTML> </HTML> indicates the type of document </li></ul><ul><li><HEAD> </HEAD> information on the document </li></ul><ul><li><TITLE> </TITLE> title of the document (in the HEAD) </li></ul><ul><li><BODY> </BODY> page content (viewable in the browser) </li></ul>
    12. My first HTML page <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Page title </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Page content </li></ul><ul><li> </BODY> </li></ul><ul><li></HTML> </li></ul>
    13. Nesting: chinese boxes... <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Page title </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Page content </li></ul><ul><li> </BODY> </li></ul><ul><li></HTML> </li></ul>
    14. ...or matryoshka dolls <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Page title </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Page content </li></ul><ul><li> </BODY> </li></ul><ul><li></HTML> </li></ul>
    15. My first HTML page
    16. Meta tags <ul><li><meta name=&quot;keywords&quot; content=&quot;keyword1, keyword2, keyword3,…&quot; /> </li></ul><ul><li><meta name=&quot;description&quot; content=&quot;description of page content&quot; /> </li></ul>
    17. Formatting tags <ul><li>Style </li></ul><ul><li><b> </b> bold (also <strong>) </li></ul><ul><li><i> </i> italic (also <em>) </li></ul><ul><li><tt> </tt> teletype </li></ul><ul><li><u> </u> underlined </li></ul><ul><li><strike> </strike> strike-out </li></ul>
    18. Formatting tags (2) <ul><li>Headings </li></ul><ul><li><Hn align=left|right|center|justify> ...</Hn> </li></ul><ul><li>H1 </li></ul><ul><li>H2 </li></ul><ul><li>H3 </li></ul>
    19. Paragraphs <ul><li>New paragraph <p>...</p> </li></ul><ul><li><p align=left|right|center|justify> </li></ul><ul><li>Containers <div>...</div> </li></ul><ul><li> <span>...</span> </li></ul><ul><li>Line break <br> (stand-alone tag) </li></ul>
    20. Lists <ul><li>Two types of lists: </li></ul><ul><li><ol>...</ol> (ordered lists) Or </li></ul><ul><li><ul>...</ul> (unordered lists) </li></ul><ul><li>List items are then listed i nside these tags: <li>element</li> </li></ul>
    21. Images <ul><li><IMG SRC=“terra.gif” ALT=“Earth seen from the satellite” WIDTH=90 HEIGHT=90 BORDER=0> </li></ul>
    22. Tables <table border=&quot;1&quot;>   <tr>     <th>Month</th>     <th>Savings</th>   </tr>   <tr>     <td>January</td>     <td>$100</td>   </tr> </table>
    23. Last (but not least): hypertext links <ul><li>Link to another document/resource </li></ul><ul><li><A HREF=“URL” TITLE=“List of jobs”>link </li></ul><ul><li>description</A> </li></ul><ul><li>Link to an element within the same document </li></ul><ul><li><A HREF=“#name”>link description</A> </li></ul><ul><li><A name=“name&quot;>Destination</A> </li></ul>
    24. Code analysis: useit.com
    25. Thank you for your attention! <ul><li>Links can be found here: </li></ul><ul><li>http://delicious.com/andrea.spila/proz-webinar </li></ul><ul><li>I can be found here: </li></ul><ul><li>[email_address] </li></ul>

    ×