html per bibliotecari
DESCRIPTION
TRANSCRIPT
![Page 1: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/1.jpg)
HTML perbibliotecari
di Andrea Spila
Corso di scrittura e comunicazione web per bibliotecariUniversità di Modena e Reggio Emilia
![Page 2: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/2.jpg)
Agenda
Breve storia di Internet e del web
Introduzione all’HTML
La mia prima pagina HTML
Analisi del codice
![Page 3: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/3.jpg)
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)
![Page 4: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/4.jpg)
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
![Page 5: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/5.jpg)
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
![Page 6: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/6.jpg)
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
![Page 7: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/7.jpg)
Una metafora
La pagina webIl codice HTML
![Page 8: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/8.jpg)
Un’altra metafora
La pagina webIl codice HTML
![Page 9: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/9.jpg)
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)
![Page 10: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/10.jpg)
Tag dell’HTML
Struttura<TAG attributi>contenuto</TAG>oppure <TAG attributi /> (tag vuoti)
Nidificazione<TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1>
![Page 11: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/11.jpg)
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)
![Page 12: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/12.jpg)
La mia prima pagina HTML
<HTML> <HEAD> <TITLE>Titolo della
pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY> </HTML>
![Page 13: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/13.jpg)
Nidificazione: scatole cinesi
<HTML> <HEAD> <TITLE>Titolo della
pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY> </HTML>
![Page 14: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/14.jpg)
… o matriosche
<HTML> <HEAD> <TITLE>Titolo della
pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY> </HTML>
![Page 15: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/15.jpg)
La mia prima pagina HTML
Proviamo a scriverla nel nostroeditor di testi
![Page 16: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/16.jpg)
<meta name="keywords" content=“parola chiave1, parola chiave2, parola chiave3,…" />
<meta name="description" content="descrizione del contenuto della pagina" />
Metatag
![Page 17: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/17.jpg)
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 -->
![Page 18: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/18.jpg)
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
![Page 19: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/19.jpg)
Tag di formattazione - 2
Intestazioni
<Hn align=left|right|center|justify>...</Hn>
H1H2
H3
![Page 20: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/20.jpg)
Paragrafi
Nuovo paragrafo <p>...</p> <p align=left|right|center|justify>
Contenitori <div>...</div> <span>...</span>
Rimando a capo <br /> (tag vuoto)
![Page 21: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/21.jpg)
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>
![Page 22: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/22.jpg)
Liste - 2
Codice
<ul>
<li>primo elemento</li> <li> secondo elemento</li>
</ul>
Visualizzazione
primo elemento secondo elemento
![Page 23: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/23.jpg)
Immagini
<IMG SRC=“terra.gif” ALT=“La terra vista dal satellite” WIDTH=90 HEIGHT=90 BORDER=0>
![Page 24: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/24.jpg)
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
![Page 25: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/25.jpg)
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>
![Page 26: Html per bibliotecari](https://reader035.vdocumenti.com/reader035/viewer/2022081412/545c54acb0af9fae2c8b47aa/html5/thumbnails/26.jpg)
Analizziamo il codice