Your SlideShare is downloading. ×
0
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Html for translators
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html for translators

1,527

Published on

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

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
1,527
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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)
  • Transcript

    • 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 &amp; 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 &lt;TAG attributes&gt; content &lt;/TAG&gt; or &lt;TAG attributes&gt; (stand-alone tag) </li></ul><ul><li>Nesting &lt;TAG1 attributes&gt; content 1 &lt;TAG2&gt; content 2 &lt;/TAG2&gt; &lt;/TAG1&gt; </li></ul>
    • 11. Basic tags <ul><li>&lt;HTML&gt; &lt;/HTML&gt; indicates the type of document </li></ul><ul><li>&lt;HEAD&gt; &lt;/HEAD&gt; information on the document </li></ul><ul><li>&lt;TITLE&gt; &lt;/TITLE&gt; title of the document (in the HEAD) </li></ul><ul><li>&lt;BODY&gt; &lt;/BODY&gt; page content (viewable in the browser) </li></ul>
    • 12. My first HTML page <ul><li>&lt;HTML&gt; </li></ul><ul><li>&lt;HEAD&gt; </li></ul><ul><li>&lt;TITLE&gt; Page title &lt;/TITLE&gt; </li></ul><ul><li>&lt;/HEAD&gt; </li></ul><ul><li>&lt;BODY&gt; </li></ul><ul><li>Page content </li></ul><ul><li> &lt;/BODY&gt; </li></ul><ul><li>&lt;/HTML&gt; </li></ul>
    • 13. Nesting: chinese boxes... <ul><li>&lt;HTML&gt; </li></ul><ul><li>&lt;HEAD&gt; </li></ul><ul><li>&lt;TITLE&gt; Page title &lt;/TITLE&gt; </li></ul><ul><li>&lt;/HEAD&gt; </li></ul><ul><li>&lt;BODY&gt; </li></ul><ul><li>Page content </li></ul><ul><li> &lt;/BODY&gt; </li></ul><ul><li>&lt;/HTML&gt; </li></ul>
    • 14. ...or matryoshka dolls <ul><li>&lt;HTML&gt; </li></ul><ul><li>&lt;HEAD&gt; </li></ul><ul><li>&lt;TITLE&gt; Page title &lt;/TITLE&gt; </li></ul><ul><li>&lt;/HEAD&gt; </li></ul><ul><li>&lt;BODY&gt; </li></ul><ul><li>Page content </li></ul><ul><li> &lt;/BODY&gt; </li></ul><ul><li>&lt;/HTML&gt; </li></ul>
    • 15. My first HTML page
    • 16. Meta tags <ul><li>&lt;meta name=&amp;quot;keywords&amp;quot; content=&amp;quot;keyword1, keyword2, keyword3,…&amp;quot; /&gt; </li></ul><ul><li>&lt;meta name=&amp;quot;description&amp;quot; content=&amp;quot;description of page content&amp;quot; /&gt; </li></ul>
    • 17. Formatting tags <ul><li>Style </li></ul><ul><li>&lt;b&gt; &lt;/b&gt; bold (also &lt;strong&gt;) </li></ul><ul><li>&lt;i&gt; &lt;/i&gt; italic (also &lt;em&gt;) </li></ul><ul><li>&lt;tt&gt; &lt;/tt&gt; teletype </li></ul><ul><li>&lt;u&gt; &lt;/u&gt; underlined </li></ul><ul><li>&lt;strike&gt; &lt;/strike&gt; strike-out </li></ul>
    • 18. Formatting tags (2) <ul><li>Headings </li></ul><ul><li>&lt;Hn align=left|right|center|justify&gt; ...&lt;/Hn&gt; </li></ul><ul><li>H1 </li></ul><ul><li>H2 </li></ul><ul><li>H3 </li></ul>
    • 19. Paragraphs <ul><li>New paragraph &lt;p&gt;...&lt;/p&gt; </li></ul><ul><li>&lt;p align=left|right|center|justify&gt; </li></ul><ul><li>Containers &lt;div&gt;...&lt;/div&gt; </li></ul><ul><li> &lt;span&gt;...&lt;/span&gt; </li></ul><ul><li>Line break &lt;br&gt; (stand-alone tag) </li></ul>
    • 20. Lists <ul><li>Two types of lists: </li></ul><ul><li>&lt;ol&gt;...&lt;/ol&gt; (ordered lists) Or </li></ul><ul><li>&lt;ul&gt;...&lt;/ul&gt; (unordered lists) </li></ul><ul><li>List items are then listed i nside these tags: &lt;li&gt;element&lt;/li&gt; </li></ul>
    • 21. Images <ul><li>&lt;IMG SRC=“terra.gif” ALT=“Earth seen from the satellite” WIDTH=90 HEIGHT=90 BORDER=0&gt; </li></ul>
    • 22. Tables &lt;table border=&amp;quot;1&amp;quot;&gt;   &lt;tr&gt;     &lt;th&gt;Month&lt;/th&gt;     &lt;th&gt;Savings&lt;/th&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;January&lt;/td&gt;     &lt;td&gt;$100&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt;
    • 23. Last (but not least): hypertext links <ul><li>Link to another document/resource </li></ul><ul><li>&lt;A HREF=“URL” TITLE=“List of jobs”&gt;link </li></ul><ul><li>description&lt;/A&gt; </li></ul><ul><li>Link to an element within the same document </li></ul><ul><li>&lt;A HREF=“#name”&gt;link description&lt;/A&gt; </li></ul><ul><li>&lt;A name=“name&amp;quot;&gt;Destination&lt;/A&gt; </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>

    ×