View
636
Download
0
Category
Preview:
DESCRIPTION
Citation preview
HTML perbibliotecari
di Andrea Spila
Corso di scrittura e comunicazione web per bibliotecariUniversità 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
Breve storia di Internet e del web
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
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 webIl 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 suldocumento
<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> <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
Proviamo a scriverla nel nostroeditor di testi
<meta name="keywords" content=“parola chiave1, parola chiave2, parola chiave3,…" />
<meta name="description" content="descrizione del contenuto della pagina" />
Metatag
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 -->
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>
H1H2
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>
Analizziamo il codice
Grazie per la vostra attenzione! E buon divertimento con
andrea.spila@gmail.com
Recommended