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
bibliotecari
di Andrea Spila
Corso di scrittura e comunicazione web per bibliotecari
Università di Modena e Reggi...
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 & Wheatstone)
 1858-1866 Primo cavo transatlantico
...
LA RETE COME MEZZO DI COMUNICAZIONE
 1971 Nasce la posta elettronica
 1973 FTP (File Transfer Protocol)
 1974 TCP/IP
I ...
NASCITA DEL WEB
 1989 Nasce il World Wide Web
 1990 Nasce l’HTML (basato su SGML)
 1991 Prima versione del WWW (CERN)
...
Che cos’è l’HTML?
 Acronimo di HyperText Markup Language
 NON È un linguaggio di programmazione (come C,
Pascal, Java) n...
Una metafora
La pagina web
Il codice HTML
Un’altra metafora
La pagina webIl codice HTML
Caratteristiche dell’HTML
 Indipendente dalla piattaforma
(si può leggere su qualsiasi computer)
 Formato testo
(si può ...
Tag dell’HTML
 Struttura
<TAG attributi>contenuto</TAG>
oppure <TAG attributi /> (tag vuoti)
 Nidificazione
<TAG1 attrib...
Tag di base
 <HTML> </HTML> indica il tipo di
documento
 <HEAD> </HEAD> informazioni sul
documento
 <TITLE> </TITLE> ti...
La mia prima pagina HTML
<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
<BODY>
Contenuto della pagina
</BODY>
</...
Nidificazione: scatole cinesi
<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
<BODY>
Contenuto della pagina
</BOD...
… o matriosche
<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
<BODY>
Contenuto della pagina
</BODY>
</HTML>
La mia prima pagina HTML
Proviamo a scriverla
nel nostro
editor di testi
<meta name="keywords" content=“parola
chiave1, parola chiave2, parola chiave3,…" />
<meta name="description" content="desc...
Altri metadati: RDF Dublin Core
 <!-- RTF dublin core dataset -->
<link rel="schema.DC" href="http://purl.org/dc/elements...
Tag di formattazione
Stile
<b> testo </b> grassetto (anche <strong>)
<i> testo </i> corsivo (anche <em>)
<tt> testo </tt> ...
Tag di formattazione - 2
Intestazioni
<Hn align=left|right|center|justify>
...</Hn>
H1
H2
H3
Paragrafi
Nuovo paragrafo <p>...</p>
<p align=left|right|center|justify>
Contenitori <div>...</div>
<span>...</span>
Riman...
Liste
Due tipi di liste
<ol>...</ol> (liste ordinate)
oppure
<ul>...</ul> (liste non
ordinate)
Gli elementi della lista ve...
Liste - 2
Codice
<ul>
<li>primo elemento</li>
<li> secondo elemento</li>
</ul>
Visualizzazione
 primo elemento
 secondo ...
Immagini
<IMG SRC=“terra.gif” ALT=“La terra vista dal
satellite” WIDTH=90 HEIGHT=90
BORDER=0>
Tabelle
Codice
<table border="1">
<tr>
<th>Titolo</th>
<th>Autore</th>
</tr>
<tr>
<td>Il nome della rosa</td>
<td>Umberto ...
Link ipertestuali
Link a un altro documento/risorsa
<A HREF=“URL” TITLE=“List of jobs”>descrizione del
link</A>
Link a un ...
Analizziamo il codice
Grazie per la vostra
attenzione!
E buon divertimento con
andrea.spila@gmail.com
Upcoming SlideShare
Loading in …5
×

Html per bibliotecari

764 views

Published on

Published in: Technology
  • Be the first to comment

Html per bibliotecari

  1. 1. HTML per bibliotecari di Andrea Spila Corso di scrittura e comunicazione web per bibliotecari Università di Modena e Reggio Emilia
  2. 2. Agenda  Breve storia di Internet e del web  Introduzione all’HTML  La mia prima pagina HTML  Analisi del codice
  3. 3. Breve storia di Internet e del web PREISTORIA  1836 Telegrafo (Cooke & Wheatstone)  1858-1866 Primo cavo transatlantico  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)
  4. 4. LA RETE COME MEZZO DI COMUNICAZIONE  1971 Nasce la posta elettronica  1973 FTP (File Transfer Protocol)  1974 TCP/IP I COMPUTER DIVENTANO PERSONALI  1976 Nasce il primo Apple  1981 Nasce il primo PC IBM  1984 Nasce l’Apple Macintosh Breve storia di Internet e del web
  5. 5. NASCITA DEL WEB  1989 Nasce il World Wide 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
  6. 6. 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 disporre gli elementi di contenuto sulla pagina  Le indicazioni vengono fornite tramite marcatori detti TAG
  7. 7. Una metafora La pagina web Il codice HTML
  8. 8. Un’altra metafora La pagina webIl codice HTML
  9. 9. Caratteristiche dell’HTML  Indipendente dalla piattaforma (si può leggere su qualsiasi computer)  Formato testo (si può scrivere in qualsiasi editor di testo)  Semplice (sono sufficienti pochi tag di base per comporre una pagina HTML)
  10. 10. Tag dell’HTML  Struttura <TAG attributi>contenuto</TAG> oppure <TAG attributi /> (tag vuoti)  Nidificazione <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1>
  11. 11. Tag di base  <HTML> </HTML> indica il tipo di documento  <HEAD> </HEAD> informazioni sul documento  <TITLE> </TITLE> titolo del documento (in HEAD)  <BODY> </BODY> contenuto della pagina (si vede nel browser)
  12. 12. La mia prima pagina HTML <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD> <BODY> Contenuto della pagina </BODY> </HTML>
  13. 13. Nidificazione: scatole cinesi <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD> <BODY> Contenuto della pagina </BODY> </HTML>
  14. 14. … o matriosche <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD> <BODY> Contenuto della pagina </BODY> </HTML>
  15. 15. La mia prima pagina HTML Proviamo a scriverla nel nostro editor di testi
  16. 16. <meta name="keywords" content=“parola chiave1, parola chiave2, parola chiave3,…" /> <meta name="description" content="descrizione del contenuto della pagina" /> Metatag
  17. 17. Altri metadati: RDF Dublin Core  <!-- RTF dublin core dataset --> <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" /> <meta name="DC.title" content="orari" /> <meta name="DC.description" content="" /> <meta name="DC.creator" content="Biblioteca Salaborsa" /> <meta name="DC.subject" content="" /> <meta name="DC.publisher" content="Biblioteca Salaborsa" /> <meta name="DC.contributor" content="Mara Benassi" /> <meta name="DC.date" content="2007-01-18" /> <meta name="DC.created" content="" /> <meta name="DC.modified" content="2010-09-13 14:45:59" /> <meta name="DC.type" content="doc" /> <meta name="DC.format" content="text/html" /> <meta name="DC.identifier" content="" /> <meta name="DC.language" content="IT" /> <meta name="DC.relation" content="" /> <meta name="DC.rights" content="Biblioteca Sala Borsa" /> <meta name="DC.license" content="Creative Commons Attribuzione 2.5 Italia" /> <!-- end -->
  18. 18. Tag di formattazione Stile <b> testo </b> grassetto (anche <strong>) <i> testo </i> corsivo (anche <em>) <tt> testo </tt> telescrivente <u> testo </u> sottolineato <strike> testo </strike> barrato
  19. 19. Tag di formattazione - 2 Intestazioni <Hn align=left|right|center|justify> ...</Hn> H1 H2 H3
  20. 20. Paragrafi Nuovo paragrafo <p>...</p> <p align=left|right|center|justify> Contenitori <div>...</div> <span>...</span> Rimando a capo <br /> (tag vuoto)
  21. 21. Liste Due tipi di liste <ol>...</ol> (liste ordinate) oppure <ul>...</ul> (liste non ordinate) Gli elementi della lista vengono identificati con il tag: <li>elemento</li>
  22. 22. Liste - 2 Codice <ul> <li>primo elemento</li> <li> secondo elemento</li> </ul> Visualizzazione  primo elemento  secondo elemento
  23. 23. Immagini <IMG SRC=“terra.gif” ALT=“La terra vista dal satellite” WIDTH=90 HEIGHT=90 BORDER=0>
  24. 24. Tabelle Codice <table border="1"> <tr> <th>Titolo</th> <th>Autore</th> </tr> <tr> <td>Il nome della rosa</td> <td>Umberto Eco</td> </tr> </table> Visualizzazione
  25. 25. Link ipertestuali Link a un altro documento/risorsa <A HREF=“URL” TITLE=“List of jobs”>descrizione del link</A> Link a un elemento interno allo stesso documento <A HREF=“#name”>link description</A> <A name=“name">Destination</A>
  26. 26. Analizziamo il codice
  27. 27. Grazie per la vostra attenzione! E buon divertimento con andrea.spila@gmail.com

×