B3 HTML Parte A Paolo Salvaneschi 1
B3_1 V1.6
HTML parte A
Applicazioni Internet B
Paolo Salvaneschi
Università di BergamoFacoltà di Ingegneria
Il contenuto del documento è liberamente utilizzabile dagli studenti, per studio personale e per supporto a lezioni universitarie.Ogni altro uso è riservato, e deve essere preventivamente autorizzato dall’ autore.
Sono graditi commenti o suggerimenti per il miglioramento del materiale
B3 HTML Parte A Paolo Salvaneschi 2B3 HTML Parte A Paolo Salvaneschi 2
• Linguaggi di marcatura e HTML• Strumenti• Sintassi• Struttura• Tag
– Lettere accentate e caratteri speciali– Commenti– Titoli– Paragrafi– Preformatted– Liste
INDICE
B3 HTML Parte A Paolo Salvaneschi 3B3 HTML Parte A Paolo Salvaneschi 3
• Tag– Stili– Blocchi– Separatori– Sfondo– Tabelle– Immagini– Link
INDICE
B3 HTML Parte A Paolo Salvaneschi 4B3 HTML Parte A Paolo Salvaneschi 4
• SGML Standard Generalized MarkupLanguage (1980)
• (ISO 8879 - International Organization for Standardization)• Standard internazionale per definire la
struttura ed il contenuto di tipi diversi di documenti elettronici
Linguaggi di marcatura e HTML
B3 HTML Parte A Paolo Salvaneschi 5B3 HTML Parte A Paolo Salvaneschi 5
• Metalinguaggio• Permette di definire tipi diversi di documenti
(DTD - Document Type Definition)
Linguaggi di marcatura e HTML
B3 HTML Parte A Paolo Salvaneschi 6B3 HTML Parte A Paolo Salvaneschi 6
<anthology><poem><title>The SICK ROSE</title>
<stanza><line>O Rose thou art sick.</line><line>The invisible worm,</line><line>That flies in the night</line><line>In the howling storm:</line>
</stanza><stanza>
<line>Has found out thy bed</line><line>Of crimson joy:</line><line>And his dark secret love</line><line>Does thy life destroy.</line>
</stanza></poem>
<!-- more poems go here --></anthology>
Linguaggi di marcatura e HTML
B3 HTML Parte A Paolo Salvaneschi 7B3 HTML Parte A Paolo Salvaneschi 7
< !ELEMENT anthology - - (poem+) >< !ELEMENT poem - - (title?, stanza+) >< !ELEMENT title - O (#PCDATA) >< !ELEMENT stanza - O (line+) >< !ELEMENT line O O (#PCDATA) >
DTD
Linguaggi di marcatura e HTML
Start tag End tag- deve essere presenteO può essere omesso
? 0 o 1+ 1 o più* 0 o più , nell’ordine scritto
& in un ordine qualsiasi| uno dei componenti
Parsed Character Data
B3 HTML Parte A Paolo Salvaneschi 8B3 HTML Parte A Paolo Salvaneschi 8
• Significato della marcatura– Struttura– Semantica– Presentazione
Linguaggi di marcatura e HTML
B3 HTML Parte A Paolo Salvaneschi 9B3 HTML Parte A Paolo Salvaneschi 9
• Utilità (differenza con standard di formattazione testi come TXT, CSV,…)– Definizione della struttura (gerarchica) di un
documento (testi e dati)– Comunicazione della struttura tra diversi sistemi
informativi con meccanismi standard (ordine, fattura, bonifico,…)
– Verifica automatica (controlli di corretta struttura)– Elaborazione automatica
Linguaggi di marcatura e HTML
B3 HTML Parte A Paolo Salvaneschi 10B3 HTML Parte A Paolo Salvaneschi 10
• Hyper Text Mark-up Language• Una specifica applicazione di SGML usata
nel World Wide Web• HTML è uno specifico Tipo di Documento• Descrive documenti di ufficio
– Capitoli, paragrafi, liste, illustrazioni,…– Funzioni ipertestuali– Multimedia
Linguaggi di marcatura e HTML
B3 HTML Parte A Paolo Salvaneschi 11B3 HTML Parte A Paolo Salvaneschi 11
• Con cosa scrivere– Testo e marcatori vanno memorizzati nel
semplice formato ASCII– Blocco note– Word processor: salvare il file in modalità “solo
testo”– Editor HTML
Strumenti
B3 HTML Parte A Paolo Salvaneschi 13B3 HTML Parte A Paolo Salvaneschi 13
Microsoft FrontPage
Strumenti
B3 HTML Parte A Paolo Salvaneschi 14B3 HTML Parte A Paolo Salvaneschi 14
• <marcatore>• Due tipi di elementi:
– <marcatore>testo </marcatore>– <marcatore>
• Attributi• <marcatore nomeattributo="valore">• Attributi molteplici
Sintassi
B3 HTML Parte A Paolo Salvaneschi 15B3 HTML Parte A Paolo Salvaneschi 15
Sintassi
http://www.w3.org/TR/html4
B3 HTML Parte A Paolo Salvaneschi 17B3 HTML Parte A Paolo Salvaneschi 17
<html><head>
<title>La prima pagina Web di Mario Rossi</title></head><body>
<h1>Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p>
</body></html>
Struttura
B3 HTML Parte A Paolo Salvaneschi 18B3 HTML Parte A Paolo Salvaneschi 18
• Funzione dei tag HTML– Struttura del documento– Formattazione dei testi– Inserimento di oggetti (immagini, link,…)
Struttura
B3 HTML Parte A Paolo Salvaneschi 19B3 HTML Parte A Paolo Salvaneschi 19
à àè èé éì ìò òù ùÀ ÀÈ ÈÉ ÉÌ ÌÒ ÒÙ Ù
è èè
> >< <& &” "
Rappresentazione dei caratteri
NomeCodice equivalente numerico (decimale)
B3 HTML Parte A Paolo Salvaneschi 20B3 HTML Parte A Paolo Salvaneschi 20
• Commenti HTML<!-- this is a comment --> <!-- and so is this one, which occupies more thanone line -->
Commenti
B3 HTML Parte A Paolo Salvaneschi 21B3 HTML Parte A Paolo Salvaneschi 21
<html><head><title>La prima pagina Web di Mario Rossi</title></head><body><h1>Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p><h1>Intestazione di primo livello</h1><h2>Intestazione di secondo livello</h2><h3>Intestazione di terzo livello</h3><h4>Intestazione di quarto livello</h4><h5>Intestazione di quinto livello</h5><h6>Intestazione di sesto livello</h6></body></html>
Titoli
B3 HTML Parte A Paolo Salvaneschi 22B3 HTML Parte A Paolo Salvaneschi 22
<html><head><title>La prima pagina Web di Mario Rossi</title></head><body>
<h1 align="center">Home page di Mario Rossi</h1><p>Questa è la mia prima pagina in HTML.</p><h1>Intestazione di primo livello</h1><h2>Intestazione di secondo livello</h2><h3>Intestazione di terzo livello</h3><h4>Intestazione di quarto livello</h4><h5>Intestazione di quinto livello</h5><h6>Intestazione di sesto livello</h6>
</body></html>
Titoli
B3 HTML Parte A Paolo Salvaneschi 23B3 HTML Parte A Paolo Salvaneschi 23
<html><head><title>La prima pagina Web di Mario Rossi</title></head><body>
<h1 align="center">Home page di Mario Rossi</h1><p>Questa riga</p><p>appare spezzata.</p><p>Quest'altrariga, invece,appare scritta tuttadi seguitononostante gli a capo.</p>
</body></html>
Paragrafi
B3 HTML Parte A Paolo Salvaneschi 24B3 HTML Parte A Paolo Salvaneschi 24
<html><head><title>La prima pagina Web di Mario Rossi</title></head><body>
<h1 align="center">Home page di Mario Rossi</h1>
<p> Quest'altra <br>riga, invece, <br>non appare scritta tutta <br>di seguito <br> </p>
</body></html>
Paragrafi
B3 HTML Parte A Paolo Salvaneschi 25B3 HTML Parte A Paolo Salvaneschi 25
<h1 align="center">Home page di Mario Rossi</h1>
<pre>Il materiale didattico è costituito da:
1. Per la parte generale:Luca Console, Marina RibaudoINTRODUZIONE ALL' INFORMATICAUTET Università, 1997
2. Per la parte su Internet:Marco Calvo, Fabio Ciotti,...INTERNET 2000 Manuale per l' uso della reteLaterza
</pre>
Preformatted
B3 HTML Parte A Paolo Salvaneschi 26B3 HTML Parte A Paolo Salvaneschi 26
Liste non ordinate<html><head><title>La prima pagina Web di Mario Rossi</title></head><body>
<h1 align="center">Home page di Mario Rossi</h1><ul><li>prima voce</li><li>seconda voce</li><li>terza voce</li></ul>
</body></html>
Liste
B3 HTML Parte A Paolo Salvaneschi 27B3 HTML Parte A Paolo Salvaneschi 27
Liste ordinate…
<h1 align="center">Home page di Mario Rossi</h1><ul><li>prima voce</li><li>seconda voce</li><li>terza voce</li></ul><ol><li>prima voce</li><li>seconda voce</li><li>terza voce</li></ol>
…
Liste
B3 HTML Parte A Paolo Salvaneschi 28B3 HTML Parte A Paolo Salvaneschi 28
Tipo di numerazione <OL TYPE=“1|I|i|A|a”> lista ordinata connumeri arabi, romani maiuscoli, minuscoli,lettere maiuscole,minuscole, l’ordine èascendente
Alterazione del tipo di numerazione
<LI TYPE=“1|I|i|A|a”> vale per la voce correntee le seguenti
Numero di partenza <OL START=“?*”> ?* numero di una o piùcifre. Valore espresso innumeri arabi, qualunque sia il tipo di numerazione scelto
Alterazione della numerazione
<LI VALUE=“?*”> vale per la voce correntee le seguenti
Liste
B3 HTML Parte A Paolo Salvaneschi 29B3 HTML Parte A Paolo Salvaneschi 29
Liste indentate…<ul><li>letteratura</li><li>cinema (qui sotto la classifica dei miei film preferiti)</li>
<ol><li>Blade Runner</li><li>Oltre il giardino</li><li>Delicatessen</li></ol>
<li>sport</li></ul>…
Liste
B3 HTML Parte A Paolo Salvaneschi 30B3 HTML Parte A Paolo Salvaneschi 30
Definition lists
…<p>Fondamenti di Informatica</p><dl>
<dt>Fondamenti di Informatica parte1</dt><dd>Come usare il PC e i tools software principali</dd><dt>Fondamenti di Informatica parte2</dt><dd>Apprendere nozioni teoriche di base</dd><dd>Apprendere le basi della programmazione procedurale</dd>
</dl>…
Liste
B3 HTML Parte A Paolo Salvaneschi 31B3 HTML Parte A Paolo Salvaneschi 31
Stili logici
<strong>...</strong>Testo molto rilevante.Viene reso di norma in grassetto<em>...</em>Testo enfatizzato. Viene reso di norma in corsivo<cite>...</cite>Testo citato. Viene reso di norma in corsivo<address>...</address>Indirizzo (utilizzato per includere informazioni sull’autore del documento).Viene reso in corsivo o in grassetto con un carattere piccolo,oppure impaginato a sinistra
Stili
B3 HTML Parte A Paolo Salvaneschi 32B3 HTML Parte A Paolo Salvaneschi 32
Stili fisici
<b>...</b> Grassetto<u>...</u> Sottolineato<i>...</i> Corsivo
Stili
B3 HTML Parte A Paolo Salvaneschi 33B3 HTML Parte A Paolo Salvaneschi 33
<basefont size="5"><p>La prima pagina Web di Mario Rossi: Dimensione dei caratteri: base 5</p><font size="1"><p>Dimensione dei caratteri: 1</p></font><font size="2"><p>Dimensione dei caratteri: 2</p></font>…</font><font size="6"><p>Dimensione dei caratteri: 6</p></font><font size="7" face="Arial, Garamond" color="#0000FF"><p>Dimensione dei caratteri: 7</p></font>
Stili
Alternativo EsadecimaleCodifica RGB
B3 HTML Parte A Paolo Salvaneschi 35B3 HTML Parte A Paolo Salvaneschi 35
<body><div align="center"><p>Breve descrizione degli scopi del corso</p><div align="justify"><p>Il primo obiettivo del corso è la
comprensione di come la rete Internet operi come tecnologiaabilitante per modificare i processi aziendali e far evolvere i sistemi informativi delle aziende. In questocontesto sono presentate le …..
</p></div><p>Segue il programma del corso</p></div></body>
Blocchi
B3 HTML Parte A Paolo Salvaneschi 36B3 HTML Parte A Paolo Salvaneschi 36
<p><strong>Fondamenti di Informatica</strong></p><hr size="10"><dl><dt><b>Fondamenti di Informatica parte1</b></dt><dd><i>come usare il PC e i tools software principali</i></dd><hr align="left" width="50%"><dt><b>Fondamenti di Informatica parte2</b></dt><dd><i>Apprendere nozioni teoriche di base</i></dd><hr align="left" width="50%"></dl>
Separatori
B3 HTML Parte A Paolo Salvaneschi 37B3 HTML Parte A Paolo Salvaneschi 37
…<body background="immagini\ada_sal.jpeg"><p><strong>Fondamenti di Informatica</strong></p>…
Sfondo
B3 HTML Parte A Paolo Salvaneschi 38B3 HTML Parte A Paolo Salvaneschi 38
Sfondo
…<body bgcolor="#FFFF00" text="#0000FF"><p><strong>Fondamenti di Informatica</strong></p>…
B3 HTML Parte A Paolo Salvaneschi 39B3 HTML Parte A Paolo Salvaneschi 39
Tabelle
…<table border="1"><tr>
<td>prima cella</td><td>seconda cella</td>
</tr><tr>
<td>prima cella della seconda riga</td><td>seconda cella della seconda riga</td>
</tr></table>…
B3 HTML Parte A Paolo Salvaneschi 40B3 HTML Parte A Paolo Salvaneschi 40
Tabelle
…<table align="center" border="4" cellspacing="6" cellpadding="12" ><tr>
<td>prima cella</td><td>seconda cella</td>
</tr><tr>
<td>prima cella della seconda riga</td><td>seconda cella della seconda riga</td>
</tr></table>…
B3 HTML Parte A Paolo Salvaneschi 41B3 HTML Parte A Paolo Salvaneschi 41
Tabelle
…<table border="1"><tr><td rowspan="2">prima cella, alta quanto due</td><td>seconda cella</td></tr><tr><td>seconda riga, con una sola cella</td></tr></table>…
B3 HTML Parte A Paolo Salvaneschi 42B3 HTML Parte A Paolo Salvaneschi 42
Tabelle
…<table border="1"><tr><td colspan="2">prima cella, larga quanto due</td></tr><tr><td>seconda riga, prima cella</td><td>seconda riga, seconda cella</td></tr></table>…
B3 HTML Parte A Paolo Salvaneschi 43B3 HTML Parte A Paolo Salvaneschi 43
<body bgcolor="#FFFF00"><p><strong>Fondamenti di Informatica</strong></p><hr size="10"><img src="immagini\ada_sal.jpeg"><dl>
<dt><b>Fondamenti di Informatica parte1</b></dt><dd><i>come usare il PC e i tools software principali</i></dd><hr align="left" width="50%">…
</dl></body>
Immagini
B3 HTML Parte A Paolo Salvaneschi 44B3 HTML Parte A Paolo Salvaneschi 44
• <img src="file-grafico"> (es.: <imgsrc="tigre.gif">)
• pathname– tigre.gif– immagini\tigre.gif– ..\immagini\tigre.gif
Immagini
B3 HTML Parte A Paolo Salvaneschi 45B3 HTML Parte A Paolo Salvaneschi 45
• GIF, JPEG, PNG• GIF (Compuserve Graphics Interchange Format)
– Problemi di brevetto– 256 colori– Compressione lossy (con perdita)– Interallacciamento (visione progressiva – a
strati – dell’immagine)– Trasparenza dello sfondo– Animazione
Immagini
B3 HTML Parte A Paolo Salvaneschi 46B3 HTML Parte A Paolo Salvaneschi 46
• PNG (Portable Network Graphics)– Sostituisce GIF – libero da brevetto– Compressione lossless (senza perdita)– Interallacciamento – Trasparenza dello sfondo– Non Animazione
• JPEG (Joint Photographic Experts Group)– 16,7 milioni di colori (24 bit)– Compressione lossy (con perdita) a più livelli
Immagini
B3 HTML Parte A Paolo Salvaneschi 47B3 HTML Parte A Paolo Salvaneschi 47
…<p align="center"><img src="immagini\ada_sal.jpeg" width="296" height="181"></p>…
Immagini
B3 HTML Parte A Paolo Salvaneschi 48B3 HTML Parte A Paolo Salvaneschi 48
…<body bgcolor="#FFFF00"><basefont size= "6"><p><strong>Obiettivi</strong></p><hr size="4"><p><img src="immagini\ada_sal.jpeg“
align="left" hspace="30" vspace="30" width="120" height="80">
Il primo obiettivo del corso…………</p>
</body>…
Immagini
B3 HTML Parte A Paolo Salvaneschi 49B3 HTML Parte A Paolo Salvaneschi 49
…<table border="1"><tr>
<td><img src="immagini\ada_sal.jpeg"hspace="30" vspace="30" width="120" height="80"></td><td>seconda cella</td>
</tr><tr>
<td>prima cella della seconda riga</td><td>seconda cella della seconda riga</td>
</tr>…
Immagini
B3 HTML Parte A Paolo Salvaneschi 51B3 HTML Parte A Paolo Salvaneschi 51
• <a href="url del documento di destinazione">testo attivo</a>
<p>Il museo di arte moderna di New York: <a href=“http://www.moma.org”> MOMA </a></p>
Link
B3 HTML Parte A Paolo Salvaneschi 52B3 HTML Parte A Paolo Salvaneschi 52
…<body bgcolor="#FFFF00" link="#0000FF" vlink="#800080" alink="#FF0000"><p>Il museo di arte moderna di New York: <a href="http://www.moma.org"> MOMA </a></p>…<p>Il sito delle Ferrovie dello Stato: <a href="http://www.fs-on-line.com"> <img src="immagini\fsnew.jpeg" width="100" height="50"> </a></p>…
Link
Vlink - visited linkAlink - active link
B3 HTML Parte A Paolo Salvaneschi 53B3 HTML Parte A Paolo Salvaneschi 53
• Link all’ interno del testo
<a name="etichetta"></a><a name="prima parte"></a><h3>La Rete ARPANET</h3>
<a href="#etichetta">testo attivo</a><a href="#prima parte"> ARPANET </a>
Link
B3 HTML Parte A Paolo Salvaneschi 54B3 HTML Parte A Paolo Salvaneschi 54
…<body bgcolor="#FFFF00"><a name="start"></a><p>Argomenti:</p><a href="#uno">HTML</a></p><p><a href="#due">Marcatore</a></p><br><br><br><br><a name="uno"></a><p>HTML è un linguaggio 'di marcatura':un linguaggio cioè composto di istruzioni(che definiamo tag o marcatori) che vannoinserite all'interno del testo da impaginare.</p><br>…
Link
B3 HTML Parte A Paolo Salvaneschi 55B3 HTML Parte A Paolo Salvaneschi 55
Link
…<body bgcolor="#FFFF00"><p>Mandami un messaggio di posta:<a href="mailto:[email protected]">Invia</a></p></body>…