HTML parte A - UniBG · B3 HTML Parte A Paolo Salvaneschi 1 B3_1 V1.6 HTML parte A Applicazioni...

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


• Tag– Stili– Blocchi– Separatori– Sfondo– Tabelle– Immagini– Link

INDICE


• 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


• Metalinguaggio• Permette di definire tipi diversi di documenti

(DTD - Document Type Definition)


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

</anthology>


< !ELEMENT anthology - - (poem+) >< !ELEMENT poem - - (title?, stanza+) >< !ELEMENT title - O (#PCDATA) >< !ELEMENT stanza - O (line+) >< !ELEMENT line O O (#PCDATA) >

DTD


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


• Significato della marcatura– Struttura– Semantica– Presentazione



• 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



• 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



• 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


Note Tab

Strumenti


Microsoft FrontPage

Strumenti


• <marcatore>• Due tipi di elementi:

– <marcatore>testo </marcatore>– <marcatore>

• Attributi• <marcatore nomeattributo="valore">• Attributi molteplici

Sintassi


Sintassi

http://www.w3.org/TR/html4


Sintassi


<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


• Funzione dei tag HTML– Struttura del documento– Formattazione dei testi– Inserimento di oggetti (immagini, link,…)

Struttura


à àè èé éì ìò òù ùÀ ÀÈ ÈÉ ÉÌ ÌÒ ÒÙ Ù

è èè

> >< <& &” "

Rappresentazione dei caratteri

NomeCodice equivalente numerico (decimale)

• Commenti HTML 

Commenti


<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


<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



<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



<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


<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


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


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


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


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


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


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


Stili fisici

<b>...</b> Grassetto<u>...</u> Sottolineato<i>...</i> Corsivo

Stili


<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


Sfondo

NB


<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


<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


…<body background="immagini\ada_sal.jpeg"><p><strong>Fondamenti di Informatica</strong></p>…

Sfondo


Sfondo

…<body bgcolor="#FFFF00" text="#0000FF"><p><strong>Fondamenti di Informatica</strong></p>…


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


Tabelle

…<table align="center" border="4" cellspacing="6" cellpadding="12" ><tr>

<td>prima cella</td><td>seconda cella</td>

</tr><tr>


</tr></table>…


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


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


<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


• <img src="file-grafico"> (es.: <imgsrc="tigre.gif">)

• pathname– tigre.gif– immagini\tigre.gif– ..\immagini\tigre.gif

Immagini


• 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


• 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


…<p align="center"><img src="immagini\ada_sal.jpeg" width="296" height="181"></p>…

Immagini


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


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


</tr>…

Immagini


Immagini


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


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


• 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


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


Link

…<body bgcolor="#FFFF00"><p>Mandami un messaggio di posta:<a href="mailto:[email protected]">Invia</a></p></body>…

HTML parte A - UniBG · B3 HTML Parte A Paolo Salvaneschi 1 B3_1 V1.6 HTML parte A Applicazioni...

Documents

Transcript of HTML parte A - UniBG · B3 HTML Parte A Paolo Salvaneschi 1 B3_1 V1.6 HTML parte A Applicazioni...