Corso HTML Base

HTML
HyperText Markup Language:
Linguaggio utilizzato per creare pagine Web
R. C. Esposito 1
Introduzione
HTML è l'acronimo di HyperText Markup Language

HTML e’ il linguaggio standard per descrivere e definire il
contenuto e l'aspetto delle pagine sul World Wide Web
Markup codice che mantiene informazioni sulla
formattazione del testo
Hypertext il testo e’ disseminato di hyperlink, ossia di punti
speciali che ci permettono di collegarci ad una pagina nuova
semplicemente cliccando su una sezione di testo,
un’immagine, un bottone, …
R. C. Esposito 2
Introduzione
HTML non e’ un linguaggio di programmazione
HTML e’ un linguaggio di formattazione
R. C. Esposito 3
Struttura principale di un documento
Il codice HTML si basa su coppie di tag di apertura e di chiusura

che delimitano attributi e valori.
I tag definiscono ogni elemento di una pagina Web, quale un

paragrafo di testo, una tabella o un'immagine.
R. C. Esposito 4
Struttuta di un documento HTML
R. C. Esposito 5
Tag per definire la struttura di un documento
R. C. Esposito 6
Come appare un documento
R. C. Esposito 7
Come creare un documento HTML
I file HTML hanno estensione .html oppure .htm
Sono dei semplici file di testo e quindi possiamo crearli

utilizzando un qualunque editor
Dobbiamo ricordarci di salvarli con l’estensione giusta, se

vogliamo che siano interpretati correttamente dal browser Web.
R. C. Esposito 8
Come creare un documento HTML
Esistono degli applicativi che permettono di creare pagine HTML complesse
in modo abbastanza semplice. Esempi:
Microsoft Frontpage
Dreamweaver di Macromedia
Noi non li utilizzeremo! Questa e’una breve introduzione agli aspetti base di
HTML; questi strumenti potranno essere utili a chi di voi decidera’ di cimentarsi
con design di pagine strutturate.
R. C. Esposito 9
Sintassi: primi passi
Qualunque comando di formattazione ha la seguente forma:
<comando>
Body
</comando>
•E’ utile ricordare i comandi principali

•Esistono comunque molte guide online:
www.html.it/guida/
R. C. Esposito 10
Le parole scritte tra cunei si chiamano tag ; sono
parole speciali che creano la formattazione del
documento (il browser le interpreta e sa come
comportarsi). Sono divise in due gruppi principali:
oTag di inizio comando, ad esempio <HTML>
oTag di fine comando, ad esempio </HTML>
R. C. Esposito 11
Tutto quello che compare tra questi due tag è univocamente
definito e descritto dai tag stessi
Il testo contenuto tra <HTML> e </HTML> è un documento html.

Quindi OGNI file html inizia con <HTML> e finisce con </HTML>.
NOTA IMPORTANTE: i tag possono essere scritti

equivalentemente con lettere maiuscole o minuscole!
R. C. Esposito 12
Prova.html
<html>
<head>
<title> Pagina di Francesca </title>
</head>
<body>
<H1> Titolo del testo </H1>
Questa è una pagina di prova, scritta all'interno di Notepad seguendo le

prime
semplici istruzioni su HTML. Ho scelto di scrivere un titolo grande e un
testo stupido
</body>
</html>
R. C. Esposito 13
Cosa vedo
R. C. Esposito 14
Per fare le cose secondo gli standard...
Seguendo le indicazioni del W3C (consorzio internazionale che si occupa di
armonizzare l'utilizzo dell'HTML) Doctype deve essere il primo elemento ad
aprire il documento.
Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di

fornire informazioni al server Web che ospita la pagina:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">
HTML PUBLIC: il documento è pubblico
IETF: il tipo di HTML pubblico è gestito dalla Internet Engineering Task
Force
DTD HTML 4.0: la versione di HTML supportata è la 4.0
EN: la lingua del documento è l'inglese
R. C. Esposito 15
Arricchisco le proprieta’ di <body>
La sintassi corretta per l'elemento <BODY> è la seguente:
<BODY>
Contenuto del documento
</BODY>
Il tag <BODY> è utilizzato, oltre che per fornire al browser indicazioni

sulla posizione degli oggetti nel documento, anche per impostare vari
attributi di visualizzazione per il documento. Di seguito vediamo quali.
R. C. Esposito 16
<body
bgcolor=“colore sfondo”
Background=“immagine di sfondo”
Text=“colore del testo”
Link=“colore di un link da visitare”
Vlink=“colore di un link visitato”>
l’ordine degli attributi e’ ininfluente
R. C. Esposito 17
<html>
<head>
<title> Pagina di Francesca </title>
</head>
<body bgcolor=“yellow" text="blue">
<H1> Titolo del testo </H1>
Questa è una pagina di prova, scritta all'interno di Notepad seguendo le

prime
semplici istruzioni su HTML. Ho scelto di scrivere un titolo grande e un
testo stupido
</body>
</html>
R. C. Esposito 18
Come scegliere il colore dello sfondo
Impostare lo sfondo del documento L'attributo BGCOLOR imposta un
colore unitario di sfondo. <BODY BGCOLOR="red">
E' possibile sostituire al nome in inglese, valori esadecimali (in

base 16). Per esempio, il colore rosso (red) si sostituisce in
questo modo:
<BODY BGCOLOR="#ff0000">
L'utilità dei colori esadecimali si ha laddove non si vuole un

colore standard ma sfumato o con diversa tonalità.
R. C. Esposito 19
La rappresentazione esadecimale codifica le informazioni in RGB.

Vediamo prima cosa significa rappresentazione RGB in decimale:
Red Green Blue
Ogni campo di colore ha valori da 0 (nero o assenza di
colore) a 255 (bianco o valore massimo). Esempi:
Il rosso ha valori RGB=(255,0,0)
Il verde e’ RGB=(0,255,0)
Il blu e’RGB=(0,0,255)
Il bianco e’ RGB=(255,255,255)
R. C. Esposito 20
Possiamo usare il color editor di paint per selezionare un colore e

scoprire le componenti RGB
RGB=(0,164,242)
R. C. Esposito 21
Usiamo la calcolatrice per calcolare i valori esadecimali
0 -> 00
164 -> A4
242-> F2
<body bgcolor="#00A4F2 "

text="blue">
R. C. Esposito 22
Arricchisco le proprieta’ dei tag
• Ogni tag può essere

personalizzato da una
serie di attributi. <p align="left">
Questa è una pagina di prova, scritta
all'interno di Notepad seguendo le prime
semplici istruzioni su HTML.
</p>
Abbiamo definito un paragrafo di testo con i tag <P> e </P>.

Abbiamo anche aggiunto un attributo al tag <P>, ossia abbiamo specificato che
vogliamo allineare il testo rispetto al margine sinistro del documento.
L’attributo è stato scritto all’interno dei cunei di P.
R. C. Esposito 23
Arricchisco le proprieta’ dei tag
Non tutti i tag supportano attributi e non tutti gli
attributi sono uguali
Alcuni tag hanno degli attributi obbligatori. Ad esempio

il tag <A> </A> si chiama “tag ancora” e serve per
includere link all’interno della pagina. E’ obbligatorio
inserire l’attributo che specifica a cosa vogliamo fare
puntare questo link, altrimenti il tag è inutile.
R. C. Esposito 24
Formattazione di caratteri
Dimensione:
<h1></h1>
<...><...>
<h1></h6>
Stile:
<B> Testo grassetto</B>
<I> Testo corsivo </I>
<U> Testo sottolineato</U>
<STRIKE> Testo barrato </STRIKE>
R. C. Esposito 25
Formattazione di caratteri: i font
<FONT>
Il tag FONT è uno dei più usati e frequenti nell'attuale Web publishing.
Il tag FONT ha la funzione di formattare tipo e grandezza del testo
limitatamente ad alcuni punti del documento.
il tag FONT può definire: tipo di font utilizzato, grandezza e colore.
<FONT FACE=“arial" SIZE=5 COLOR=red>Carattere da formattare</FONT>
R. C. Esposito 26
Formattazione dei paragrafi
Andare a capo <BR>
Creare un paragrafo
<P> paragrafo...</P>:
Possiamo allineare il paragrafo a sinistra, a destra o al
centro, usando l’attributo ALIGN
R. C. Esposito 27
Inserire linee orizzontali
Il tag HR (acronimo che sta per Horizontal Rule) non ha bisogno di
chiusure successive.
<HR align="CENTER" size="2" width="400" color="Red" noshade>
Si compone di diversi attributi:
align="CENTER": definisce la posizione della riga (center, right,
left).
size="2": definisce l'altezza, in pixel, della riga.
width="400": definisce lunghezza orizzontale, in pixel, della linea.
Può anche esprimersi in percentuale di spazio disponibile:
width=80%.
color="RED": definisce il colore della linea.
noshade: se presente questo attributo elimina l'effetto 3D della
linea. Se omesso produce tale effetto.
R. C. Esposito 28
Formattazione di liste
Con HTML si possono costruire liste puntate o numerate:

Occorre definire l’inizio e la fine della lista e poi definire
ogni singolo elemento della lista.
Le liste numerate si costruiscono con il comando <ol>
</ol>
Le liste non numerate col comando <ul></ul>
Ogni elemento della lista e’ delimitato dai tag <li> </li>
R. C. Esposito 29
Formattazione di liste
Ora faccio una lista numerata:
<ol>
<li> questo è il primo elemento </li>
<li> e questo è il secondo... </LI>
</ol>
Ora faccio una lista numerata:

<ol>
<li> questo è il primo elemento, diviso in due
punti </li>
<ul>
<li> questo è uno </li>
<li> questo è l’altro </li>
</ul>
<li> e questo è il secondo... </LI>
</ol>
R. C. Esposito 30
Tag di testo logici e fisici
Un tag fisico ha il compito di formattare visivamente un
documento , cioè di renderlo grassetto, corsivo,
sottolineato ecc. La funzione di questi tag non è quella di
dare un aspetto al documento, ma di marcare determinati
punti per definirne una struttura.
Un tag logico, al contrario ha la funzione di definire una

struttura indipendentemente dal suo aspetto . Ovvero,
indipendentemente dal modo in cui il browser interpreterà
visivamente il contrassegno.
R. C. Esposito 31
Tag logici
<ADDRESS> Contrassegna informazioni di indirizzo
(mail, telefono ecc.)
<BLOCKQUOTE> Usato per citazioni più lunghe di
due o tre righe
<CITE> Usato per indicare la fonte della citazione
<DFN> Indica che il testo compreso è una
definizione.
<EM> Enfatizza il testo compreso all'interno del tag
<STRONG> Enfatizza il testo
R. C. Esposito 32
Inserire immagini
Il comando per inserire immagini e’ <img>
A differenza di molti editor di testo gli ipertesti non vengono

"fusi" con le immagini. I documenti HTML si limitano a prevedere
uno spazio al proprio interno entro il quale vanno inserite le
immagini richiamate.
Il tag <IMG> non ha bisogno di chiusura e la sua corretta sintassi

è la seguente:
<IMG SRC="immagine.gif">
Tra virgolette occorre specificare il nome dell’immagine
corredata dal cammino che occorre seguire per trovarla.
R. C. Esposito 33
Inserire immagini: attributi aggiuntivi
<img src=“cammino del file”

align=“top|middle|bottom| left|center|right”
border=“numero di pixel”
height=“numero di pixel”
width=“numero di pixel”
hspace=“numero di pixel”
vspace=“numero di pixel”
alt=“testo alternativo”>
R. C. Esposito 34
Inserire immagini: attributi aggiuntivi
Gli attributi WIDTH e HEIGHT permettono di definire in modo
esplicito le dimensioni delle immagini
Gli attributi HSPACE e VSPACE permettono di stabilire la distanza in

pixel dell'immagine dagli oggetti che si trovano ai quattro lati della
stessa
L'attributo ALIGN definisce la posizione dell'immagine rispetto al

testo posto immediatamente prima o dopo la stessa
R. C. Esposito 35
Inserire link
<a></a>
a sta per anchor
Ha un attributo obbligatorio, HREF,che permette di

specificare a cosa punta il link:
<a HREF=“http://www. unige.it/>Uni Genova </a>
<a HREF=“immagine.gif”>clicca qui</a>
<a HREF=http://www.html.it”><img src=“logo.gif”></a>
<a HREF=mailto:odone@disi.unige.it> scrivetemi!</a>
R. C. Esposito 36
Inserire link interni al documento
Inserisci il tag <A NAME="ancora"> nel punto del
documento da raggiungere. ancora è il nome
identificativo del punto in cui il browser dovrà
visualizzare la pagina.
Nel collegamento dal quale vuoi raggiungere il punto

del nuovo documento inserisci la seguente sintassi:
<A HREF="#ancora">Punta ad un’altra parte del
documento </A>
Il cancelletto (#) indica che si tratta di un link interno.
R. C. Esposito 37
Inserire link
<A HREF="http://www.unige.it" TITLE=“Universita’

di Genova">Universita’ di Genova </A>
questo comando permette di inserire un titolo
che compare quando si passa con il mouse sulla
scritta del link.
R. C. Esposito 38
Inserire tabelle
Definisco la tabella:<table></table>
Definisco una riga : <tr></tr>
Definisco una cella: <td></td>
decidete il numero di righe e colonne;

ogni riga è delimitata dai tag <tr> e </tr>
per ogni riga gli elementi delle colonne (celle) si
delimitano con
<td> e </td>
R. C. Esposito 39
Tabelle: attributi
<TABLE spessore della linea di bordo;

mettere 0 se non vogliamo linee
border=“numero”
align=left|center|right
cellspacing=“numero” spazio in pixel tra celle
cellpadding=“numero” spazio tra bordo e contenuto celle
width=“numero o %” larghezza della tabella in pixel

o %tuale di pagina
>
R. C. Esposito 40
Tabelle: attributi
allineamento orizzontale
<TR
valign=top|middle|bottom
align=left|center|right allineamento verticale
bgcolor=“colore”
> colore di sfondo per la riga
•<TH></TH> permette di aggiungere titoli (in grassetto e

centrati)
•<CAPTION></CAPTION> aggiunge didascalie
R. C. Esposito 41
Tabelle: attributi
Gli attributi di TD, TH e CAPTION sono analoghi a

quelli di TR.
Qui di seguito vediamo alcuni attributi aggiuntivi di TD
(che vanno bene anche per TH)
<TD larghezza della cella

width=“numero o %” in pixel o in % di pixel
colspan=“numero” numero di colonne su cui si

distribuisce la cella
rowspan=“numero”>
numero di righe su cui si
distribuisce la cella
R. C. Esposito 42
Tabelle: esempio 1
<table ALIGN=CENTER BORDER=1>
<CAPTION align="bottom"> Questa e' la didascalia </CAPTION>
<tr>
<th> Titolo della colonna1 </th>
</tr>
<tr>
<td ALIGN=LEFT> 1 </td> <td ALIGN=LEFT> 2 </td> <td ALIGN=LEFT> 3</td>
</tr>
<tr>
<td ALIGN=LEFT> 4 </td><td ALIGN=LEFT> 5 </td> <td ALIGN=LEFT> 6</td>
</tr>
<tr>
<td ALIGN=LEFT> 7 </td><td ALIGN=LEFT> 8 </td><td ALIGN=LEFT> 9</td>
</tr>
</table>
R. C. Esposito 43
Tabelle: esempio 1
R. C. Esposito 44
Tabelle: esempio 2
Le tabelle sono anche molto utili per centrare le immagini, quando
il browser non vuole collaborare
provate la differenza fra questi due modi (su una vostra immagine
a scelta ):
<img align="center" src=immagine a scelta>
<table align=CENTER>
<tr> <TD ALIGN=center><img align="center" src=immagine a
scelta></TD>
</TR>
</TABLE>
R. C. Esposito 45
Tabelle: esempio 3
tabelle per centrare immagini e testo
<table align=CENTER border=1>

<caption align=top> esempio di uso di tabelle per allineare immagini
e testo </caption>
<tr>
<td align=center> <img align="center" src=immagine></TD>
<td align=center> <img align="center" src=immagine></TD>
</TR>
<tr>
<td align=center> immagine originale</TD>
<td align=center> immagine negativo</TD>
</TR>
</table>
R. C. Esposito 46
Tabelle: esempio 3
R. C. Esposito 47
Tabelle: esempio 4
<table width=100% border=1 align=center>
<caption> Celle di dimensione variabile </caption>
<tr>
<td colspan=2 align=center> <b>mammiferi</b></td>
</tr>
<tr>
<td align=center> <b>Cani</b> </td>
<td align=center> <b>Gatti</b> </td>
</tr>
<tr>
<td align=center> fido </td> <td align=center> fuffi </td></tr>
<tr>
<td align=center> pluto </td> <td align=center> minu' </td></tr>
</table>
R. C. Esposito 48
Tabelle: esempio 4
R. C. Esposito 49
Tabelle: esempio 5
<table width=80% border=1 align=center>
<caption align=bottom> Tabella complessa </caption>
<tr>
<td rowspan=2 colspan=2></td>
<td colspan=2 align=center> <b>valori</b> </td> </tr>
<tr>
<td align=center> <b>temperatura</b> </td>
<td align=center> <b>umidita'</b> </td></tr>
<tr>
<td rowspan=2> <b>citta'</b></td>
<td align=left> Milano </td>
<td align=center> 18 </td>
<td align=center> 60% </td></tr>
<tr>
<td align=left> Genova </td>
<td align=center> 24 </td>
<td align=center> 80% </td></tr>
</table>
R. C. Esposito 50
Tabelle: esempio 5
R. C. Esposito 51
Frame
Servono per dividere il documento in più parti ognuna delle
quali può essere gestita in modo indipendente.
Sono molto utili nel caso di siti di dimensioni medio/grandi.

TAG importanti:
<FRAMESET> </FRAMESET> che sostituisce il tag
<BODY>
<FRAME> indica il singolo frame
R. C. Esposito 52
Frame
Se vogliamo organizzare le nostre pagine con una
struttura a frame dobbiamo prima di tutto pensare ad
una struttura.
Solitamente i frame sono composti da parti che

rimangono invariate e parti che cambiano:
avremo un file .htm principale, che punta a tutti gli
altri file
R. C. Esposito 53
Frameset: attributi
<FRAMESET> ha due attributi principali:

rows che divide lo schermo in zone orizzontali
cols che divide lo schermo in zone verticali
Posso usarli insieme, ma l’ordine in cui li
applico e’ importante
R. C. Esposito 54
Frameset: attributi
dimensioni in pixel
<FRAMESET
rows=“numero1,...,numeron”
dimensioni
“numero1%,...,numeron%” in percentuale
* resto della riga
cols=“numero1,...,numeron”
“numero1%,...,numeron%” *
frameborder=yes|no
>
R. C. Esposito 55
Frameset: esempi
<FRAMESET rows=“150,*” frameborder=“no”>...</...>
<FRAMESET cols=“30%,70%”>...</>
R. C. Esposito 56
Frame: attributi
<FRAME
src=URL, all’interno di ogni porzione
name=“nome finestra” posso aprire pagine diverse usando
scrolling=yes|no|auto
il tag FRAME
noresize
...
>
il nome e’ importante perché se voglio aprire un link su una finestra

specifica uso un target su questo nome (vedi esempio)
R. C. Esposito 57
Frame: esempi
<FRAMESET cols=“200,*”>
<FRAME src=“image.jpg” name=”win1”>
<FRAME src=“text.htm” name=”win2”>
</FRAMESET>
R. C. Esposito 58
Target
Se all’interno di un frame c’è un link, questo viene aperto nella
stessa finestra
Altrimenti si può usare l’attributo TARGET del TAG <a>:

<a target=“win2” href=“...”> clicca </a>
Valori base di TARGET sono:

target=“_self” (finestra stessa)
target=“_top” (finestra intera)
target=“_blank” (in una nuova finestra)
target=“_parent” (frameset in cui si trova il frame)
R. C. Esposito 59
Frame: un esempio
R. C. Esposito 60
Frame: esempio
per produrre una pagina funzionante come quella vista prima ci
servono 6 file .htm (o .html):
1. il file principale
2. il file del titolo
3. il file del menu
4. un file per ogni elemento cliccabile del menu (3 file, uno
per HOME, uno per TABELLE, uno per LINK)
R. C. Esposito 61
Frame: file principale (frame.html)
<html>
<head><title>Esercitazione 3, esercizio 2</title></head>
<frameset rows="140,*">
<FRAME src=logo.html name="logo" scrolling="no">
<frameset cols="25%,75%">
<FRAME src=“menu.html" name=“menu"scrolling="auto">
<FRAME src="intro.html" name="corpo" scrolling="auto">
</frameset>
</html>
R. C. Esposito 62
Frame: file del titolo (logo.html)
<html>
<head></head>
<body>
<img src="./Immagini/Esempio.jpg" width="100" height="100">
<font face="arial" size="10" color="blue"> Esercitazione su HTML
</body>
</html>
R. C. Esposito 63
Frame: file del menu (menu.html)
<html>
<head></head>
<body>
<h2> Menu </h2>
<ul>
<li><a href="esempio1.html" target="corpo">HOME</A></li>
<li><a href=" esempio2.html" target="corpo">TABELLE</A></li>
<li><a href=" esempio3.html" target="corpo">LINK</A></li>
</ul>
</body>
</html>
R. C. Esposito 64
MAP: attributi
<MAP name=“nome mappa”> dettagli </MAP>
I dettagli riguardano la forma (o le forme) della mappa
R. C. Esposito 65
AREA: attributi
<AREA
SHAPE=“rect|circle|polygon|default”
coords=“x1,y1,x2,y2” (rettangolo)
“x1,y1,...,xn,yn” (poligono)
“x,y,r” (cerchio)
href=“URL”
nohref
>
R. C. Esposito 66
MAP
<img src=“immagine.gif” usemap=“#mappa”>
<map name=mappa>
<area shape=“rect” coords=“50,50,100,100”
href=“...”>
<area shape=“polygon”
coords=“120,130,180,200,400,400” href=“...”>
</map>
R. C. Esposito 67
Come costruire le forme
Aprire l’immagine con
Paint e identificare le
zone in cui vogliamo
dividere la mappatura
Visualizzate le
coordinate (x,y)
degli angoli
dei rettangoli con paint
R. C. Esposito 68
Image map: esempio
<html>
<body>
<img src="mappa.gif" usemap="#mappa">
<map name="mappa">
<area shape "rect" coords="60,60,240,180" href="http://www.unige.it">
<area shape "rect" coords="248,60,430,180" href="http://www.arch.unige.it">
<area shape "rect" coords="60,190,430,240" href="http://www.disi.unige.it">
<area shape "rect" coords="60,250,428,311" href="http://www.dima.unige.it">
</body>
<html>
R. C. Esposito 69
Image map: esempio
R. C. Esposito 70

Corso HTML Base

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Corso HTML Base

Uploaded by

Copyright:

Available Formats

HTML

HyperText Markup Language:

Linguaggio utilizzato per creare pagine Web

HTML è l'acronimo di HyperText Markup Language

HTML non e’ un linguaggio di programmazione

HTML e’ un linguaggio di formattazione

Il codice HTML si basa su coppie di tag di apertura e di chiusura

I tag definiscono ogni elemento di una pagina Web, quale un

Sono dei semplici file di testo e quindi possiamo crearli

Dobbiamo ricordarci di salvarli con l’estensione giusta, se

•E’ utile ricordare i comandi principali

oTag di fine comando, ad esempio </HTML>

Il testo contenuto tra <HTML> e </HTML> è un documento html.

NOTA IMPORTANTE: i tag possono essere scritti

<H1> Titolo del testo </H1>

Questa è una pagina di prova, scritta all'interno di Notepad seguendo le

Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di

IETF: il tipo di HTML pubblico è gestito dalla Internet Engineering Task

EN: la lingua del documento è l'inglese

Il tag <BODY> è utilizzato, oltre che per fornire al browser indicazioni

l’ordine degli attributi e’ ininfluente

<body bgcolor=“yellow" text="blue">

<H1> Titolo del testo </H1>

Questa è una pagina di prova, scritta all'interno di Notepad seguendo le

E' possibile sostituire al nome in inglese, valori esadecimali (in

L'utilità dei colori esadecimali si ha laddove non si vuole un

La rappresentazione esadecimale codifica le informazioni in RGB.

Possiamo usare il color editor di paint per selezionare un colore e

Usiamo la calcolatrice per calcolare i valori esadecimali

<body bgcolor="#00A4F2 "

• Ogni tag può essere

Abbiamo definito un paragrafo di testo con i tag <P> e </P>.

Alcuni tag hanno degli attributi obbligatori. Ad esempio

<FONT FACE=“arial" SIZE=5 COLOR=red>Carattere da formattare</FONT>

Con HTML si possono costruire liste puntate o numerate:

Ogni elemento della lista e’ delimitato dai tag <li> </li>

Ora faccio una lista numerata:

Un tag logico, al contrario ha la funzione di definire una

A differenza di molti editor di testo gli ipertesti non vengono

Il tag <IMG> non ha bisogno di chiusura e la sua corretta sintassi

<img src=“cammino del file”

Gli attributi HSPACE e VSPACE permettono di stabilire la distanza in

L'attributo ALIGN definisce la posizione dell'immagine rispetto al

Ha un attributo obbligatorio, HREF,che permette di

Nel collegamento dal quale vuoi raggiungere il punto

Il cancelletto (#) indica che si tratta di un link interno.

<A HREF="http://www.unige.it" TITLE=“Universita’

Definisco una riga : <tr></tr>

Definisco una cella: <td></td>

decidete il numero di righe e colonne;

<TABLE spessore della linea di bordo;

cellpadding=“numero” spazio tra bordo e contenuto celle

width=“numero o %” larghezza della tabella in pixel

•<TH></TH> permette di aggiungere titoli (in grassetto e

Gli attributi di TD, TH e CAPTION sono analoghi a

<TD larghezza della cella

colspan=“numero” numero di colonne su cui si

tabelle per centrare immagini e testo

<table align=CENTER border=1>

Sono molto utili nel caso di siti di dimensioni medio/grandi.

Solitamente i frame sono composti da parti che

<FRAMESET> ha due attributi principali:

il nome e’ importante perché se voglio aprire un link su una finestra

Altrimenti si può usare l’attributo TARGET del TAG <a>: