Html per bibliotecari

HTML
per
bibliotecari
di Andrea Spila
Corso di scrittura e comunicazione web per bibliotecari
Università di Modena e Reggio Emilia

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
 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 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

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

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

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ò scrivere in qualsiasi editor di testo)
 Semplice
(sono sufficienti pochi tag di base per comporre
una pagina HTML)

Tag dell’HTML
 Struttura
<TAG attributi>contenuto</TAG>
oppure <TAG attributi /> (tag vuoti)
 Nidificazione
<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
(in HEAD)
 <BODY> </BODY> contenuto della pagina
(si vede nel browser)

La mia prima pagina HTML
<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
<BODY>
Contenuto della pagina
</BODY>
</HTML>

Nidificazione: scatole cinesi
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

… o matriosche
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

La mia prima pagina HTML
Proviamo a scriverla
nel nostro
editor di testi

Altri metadati: RDF Dublin Core
 
<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" />

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

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>
Rimando a capo <br /> (tag vuoto)

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>

Liste - 2
Codice
<ul>
<li>primo elemento</li>
<li> secondo elemento</li>
</ul>
Visualizzazione
 primo elemento
 secondo elemento

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 Eco</td>
</tr>
</table>
Visualizzazione

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>

Grazie per la vostra
attenzione!
E buon divertimento con
andrea.spila@gmail.com

Html per bibliotecari

Recommended

Recommended

More Related Content

Similar to Html per bibliotecari

Similar to Html per bibliotecari (13)

More from Andrea Spila

More from Andrea Spila (20)

Html per bibliotecari