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