Violetta Lonati
HTML
(Hyper Text Mark-up Language)
Informatica e laboratorio
Biotecnologie 2005-2006

Ipertesto

Un ipertesto è un testo che può essere letto sequenzialmente oppure seguendo i rimandi (link) associati alle sue diverse parti

Il lettore può scegliere il percorso di lettura che preferisce, assecondando liberamente i suoi interessi

Ipertesto

In ogni punto del documento può comparire un collegamento (link)

link ad un’altra parte del documento, hyperlink ad un altro documento

visualizzato dai browser in modo diverso (in genere sottolineato e cambia al passaggio del mouse)

la selezione (point-and-click) viene interpretata dal browser come una richiesta di visualizzare il documento specificato

HTML

HyperText Markup Language

permette la creazione di documenti multimediali ipertestuali

è il linguaggio per la creazione di pagine web

non è l’unico: PHP, JavaScript, … ciascuno ha il suo specifico settore di pertinenza.

è basato sull'uso di marcatori (tag), che specificano come il testo va formattato e/o strutturato

ogni pagina html ha una struttura gerarchica

HTML

Permette di

evidenziare nel testo elementi di struttura

elenchi, tabelle, intestazioni...

inserire collegamenti (link) ad altre risorse disponibili sul WWW

includere altri oggetti

Immagini, suoni, video...

(formattare graficamente il testo) --> CSS

(definire di maschere di inserimento dati)

Come produrre una pagina web usando html?

Due approcci diversi

Con programmi di tipo grafico
WYSIWYG (what you see is what you get = ciò che vedi è ciò che ottieni )

Word, OpenOffice, Nvu, Frontpage ...

salvare il file nel formato pagina web (html)

Scrivendo direttamente testo e marcatori (file sorgente o codice)

usare un editor (es: blocco note)

Inserire direttamente il testo e i suoi marcatori

salvare il file con estensione .html

Browser

I browser interpretano i tag e visualizzano di conseguenza la pagina html

I caratteri html sono codificati in ASCII

formato universale: può essere visualizzato da tipi differenti di computer e da tipi diversi di browser

formato aperto: è possibile vedere come è costruita una pagina web, modificarla, copiarla...

Es: con mozilla firefox
tasto destro -> visualizza sorgente

Es: con Explorer
tasto desto -> HTML

Tag

I Tag (marcatori) specificano come i contenuti del testo vanno formattati e visualizzati

Tag: porzioni di testo delimitate dai simboli “<“ e “>”.

La maggior parte dei comandi di formattazione richiedono di introdurre i tag di inizio e fine marcatura (start e end tag). Esempio:

<title> marca l'inizio del titolo

</title> marca la fine del titolo

La parte di testo compresa tra uno start tag e il corrispondente end tag si chiama elemento html

Altri invece richiedono un singolo tag

Es: <hr> (inserimento di una linea orizzontale)

Attributi dei tag

Molti tag hanno attributi speciali che permettono una scelta tra alcune opzioni

Il valore dell’attributo deve essergli assegnato:

Esempio: <hr width=“m”>

NOTA: i valori vanno racchiusi tra virgolette

L’uso di spazi, tabulazioni, maiuscole e minuscole ha il solo scopo di migliorare la leggibilità del codice

Non vengono considerati dal browser

Struttura di un documento

<html>

<head>

<title> Titolo della pagina </title>

Altre informazioni generali sulla pagina

</head>

<body>

Contenuto della pagina

</body>

</html>

Esempio 1: Intestazione

<html>

<head>

<title>My first HTML document</title>

</head>

<body>

</body>

</html>

Esempio 2: paragrafo

<html>

<head>

<title>Esempio di Paragrafo</title>

</head>

<body>

<p>Primo Paragrafo.</p>

</body>

</html>

Esempio 3: intestazioni (fino a 6 livelli)

<html>

<head><title>Esempio per gli elementi h1 ... h6</title> </head>

<body>

<h1>Primo capitolo</h1>

<p>Questo costituisce il primo capitolo.</p>

<h2>Prima sezione</h2>

<p>Questo costituisce una sezione.</p>

<h3>Prima sottosezione</h3>

<p>Questa costituisce una sottosezione.</p>

<h1>Secondo capitolo</h1>

<p>Questo costituisce il secondo capitolo.</p>

</body>

</html>

Esempio 4: Line Breaks (a capo)

<html>

<head>

<title>Indirizzo</title>	</head>

<body>

<p>	Mario Rossi<br>

Via Mazzini,	21<br>

20135 Milano<br>

Italia </p>

</body>

</html>

Esempio 5: Preformatted text

<pre>

Scrivo il testo

come mi pare:

vado a capo

e lascio gli spazi che voglio

</pre>

NOTA: Entity

Rappresentano in modo universale e indipendente dalla piattaforma i caratteri non coperti dalla codifica ASCII

lettere accentate (&egrave; = è)

lettere appartenenti ad altri alfabeti (&ccedil = ç)

simboli matematici (&larr; = )

A ogni simbolo è associato un nome scrivibile in caratteri ASCII, delimitato da & e ;

Tag per i caratteri

Tipo caratteri:
<font size=”10px” family=”arial” color=”red”></font>

Stile del testo

Grassetto: <b> </b>

Corsivo: <i> </i>

A spaziatura fissa: <tt> </tt>

Enfatizzato: <em> </em>

Sottolineato: <u> </u>

Apici: <sup> </sup>

Pedici: <sub> </sub>

Intermittente: <blink> </blink>

Ingrandimento della dim. del carattere: <big> </big>

E riduzione: <small> </small>

Commenti

È utile inserire commenti al codice per facilitarne la comprensione al momento di una rilettura o di una modifica

Sintassi: <!-- commenti -->

I commenti non vengono interpretati dal browser

<html>

<head>

<title> Pagina vuota </title>

</head>

<body bgcolor=#000000 text=#FFFFFF link=#FFFFFF>

<!– background nero, testo bianco, link bianchi>

</body>

</html>

Esempio

commento

Osservazione

Il browser:

non segnala né corregge gli errori. Infatti ignora:

interruzione di riga

spazi multipli

tags <p> (paragrafo) multipli

tags sconosciuti o scritti in modo errato (non visualizza niente oppure visualizza il contenuto del tag come testo)

commenti

Esempio 6: Liste (Unordered)

<ul type=circle>

<li> Primo elemento</li>

<li> Secondo elemento</li>

<li> Terzo elemento</li>

</ul>

…

<body>

<ul>

<li>Un esempio di lista,</li>

<li>che comprende vari elementi,</li>

<li>elencati in ordine.</li>

</ul>

</body>

Liste (Ordered)

<ol>

<li> Primo elemento</li>

<li> Secondo elemento</li>

<li> Terzo elemento</li>

</ol>

Liste Annidate:

<ol>

<li> Primo elemento</li>

<ol type=a>

<li> Secondo elemento</li>

</ol>

<li> Terzo elemento</li>

</ol>

Liste (definition List)

<dl>

<dt>Primo Elemento</dt>

<dd>Definizione del primo elemento</dd>

<dt>Secondo Elemento</dt>

<dd>Definizione del secondo elemento</dd>

</dl>

Liste ed elenchi

L’aspetto dei punti elenco dipende dal browser (e non dal tipo di carattere)

È possibile scegliere il tipo di punto elenco

<UL TYPE=…> con tipo CIRCLE, DISC, SQUARE…

<OL TYPE=…> con tipo a, A, i, I

<OL START=10> fissa a 10 il valore iniziale della numerazione

I contenitori <ul> …</ul> e <ol>…</ol> si possono annidare per creare elenchi su più livelli. Non si possono incrociare

Immagini

E’ possibile includere nella pagina delle immagini

E’ necessario indicare il nome del file in formato GIF o JPEG specificandone la collocazione

Si possono specificare anche altri attributi

dimensione, cornici, posizione...

<img src=path

[height=h] [width=w] [border=n]

[alt="testo alternativo“]

[align=left|center|right|top|middle|bottom]>

Percorso Immagini

Le immagini non sono integrate nella pagina Web ma sono chiamate da essa: nella pagina html è inserito il percorso d’accesso all’immagine:
<IMG SRC=percorso d’accesso>

Percorso:

Nome dell’immagine: l’img si trova nella directory (cartella) che contiene il codice HTML: SRC=“immagine.jpg”

Percorso relativo: l’img è ospitata dallo stesso host

in una sotto-cartella
SRC=“sottocartella/immagine.gif”

O in una cartella ad un livello superiore
SRC=“../immagine.gif”

URL assoluto: l’immagine si trova sul Web
SRC=“http:.//host/cartelle/nomefileimmagine.gif”

Esempio 7: Immagini

<html>

<head>

<title>Esempio per l'elemento img</title>

</head>

<body>

<p> Una Immagine: <img src="io.jpg" width=150	alt="io a Roma“ align=“middle”> Il testo può poi	continuare di lato all'immagine. <br clear=“all”>	Questo inizia una nuova riga</p>

<p>Oppure possiamo definire un nuovo paragrafo</p>

</body>

</html>

Collegamenti ipertestuali

Sintassi:
<a href="indirizzo URL"> testo </a>

Link ad un indirizzo di posta elettronica per l'invio di una e-mail
<a href="mailto:nome@dominio"> nome </a>

link

link

Collegamenti ipertestuali:
Indirizzi URL (esempio 8)

URL Assoluta:
<a href="http://www.unimi.it/">documento esterno</a>

URL relativa:
<a href="02-paragrafo.html">documento locale</a>

Collegamento ad un frammento del documento corrente:
<a href="#frammento">"parte" del documento presente</a>

Dove, da qualche parte, è stato definito:
<p id="frammento">Questo paragrafo costituisce un frammento del presente documento. </p>

Tabelle

delimitate dai tag: <table [border=n]> e </table> dove n indica lo spessore della cornice

Ogni riga è delimitata da <tr> …<tr>

Gli elementi di ogni riga sono poi organizzati in colonne, identificate dai tag <th> e </th> in caso di header, o <td> </td> in corrispondenza di dati (cella vuota: <td>&nbsp;</td>)

<table> <!--Inizio tabella-->

<tr> <!-- Inizio della I riga-->

<th> Anno</th> <!-- I cella-->

<th> Temperatura Media</th> <!-- II cella-->

</tr> <!-- Fine della I riga-->

<tr> <!-- Inizio della II riga-->

<td> 2001</td> <!--I cella-->

<td> 14&ordm;</td> <!--II cella-->

</tr> <!-- Fine della II riga-->

<tr> <!-- Inizio della III riga-->

<td> 2004</td> <!--I cella-->

<td> 18&ordm;</td> <!--II cella-->

</tr> <!-- Fine della III riga-->

</table>

Esempio 9: Tabelle

Attributi

Border: definisce se vogliamo il bordo e il suo spessore

Align: se applicato al tag <table> allinea la tabella; se applicato ai tag <tr> allinea il contenuto delle celle

Valign: per posizionare verticalmente il testo nella tabella (top|middle|bottom)

Cellpadding: per definire lo spazio tra testo e bordo della cella (es: cellpadding=“10”)

Cellspacing: definisce lo spazio tra celle

Width: definisce la larghezza della tabella. Può essere espressa in:

pixel (es: width=“100”)

percentuale rispetto alla larghezza totale della finestra
(es: width=80%)

Tabelle

Estendiamo la tabella delle temperature, dividendo le temperature medie tra nord e sud Italia e dando poi il totale.

<tr>

<th rowspan="2"> Anno</th>

<th colspan="3"> Temperatura Media</th> </tr>

<tr>

<th>Nord</th>

<th>Sud</th>

<th>Totale</th>

</tr>

ricerca google: colori formato esadecimale

cambia colori alla pagina

inserisci il commento nel BODY

copiare struttura paragrafo con titolo H2, nuovo titolo “qualche immagine”

creare tabella 2x2

Informatica per biotecnologie - html

vito Calabretta

2002-03-01T19:34:37