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

658 views
577 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
658
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×