HTML Riassunto

Caratteristiche HTML
HTML (Hyper Text Markup Language) non è un linguaggio di programmazione

ma un semplice linguaggio per la costruzione di pagine WEB.
È costituito da un insieme di comandi che permettono di definire la struttura
e l’aspetto di un ipertesto, di inserire oggetti (immagini, tabelle, moduli) e di
creare link ipertestuali interni al documento oppure ad altri documenti.
Un documento HTML è costituito da un semplice testo che in quanto tale può
essere visualizzato attraverso un qualsiasi editor di testo.
Per vedere il documento HTML come ipertesto è necessaria un’applicazione
(il browser- Google Chrome-Mozzilla Firefox- Internet Explorer) che
interpreta i comandi contenuti nel testo producendo la visualizzazione
definita rispetto a questi comandi.
Ipertesto
È formato da un insieme di documenti, collegati tra loro
tramite riferimenti ipertestuali, denominati link. Questi
documenti possono essere costituiti da testo, immagini e
suoni. I link permettono a chi naviga l’ipertesto di accedere
alle sue componenti in un ordine non rigido, ma seguendo un
percorso a piacere tra quelli possibili al suo interno.
 • Per creare un file HTML si può utilizzare un editor di testo
(Blocco note, Notepad++Portable).
 • Il file HTML creato tramite l’editor deve essere salvato come
documento testuale con estensione .html oppure .htm.
 • i comandi HTML sono detti tag e devono essere scritti
all’interno di parentesi uncinate (<NOME-TAG>).
 Molti comandi hanno tag di chiusura </ tag >
<P> delimita il paragrafo </P>

Struttura di un documento:
Un documento HTML è interamente contenuto all’interno del tag
<HTML> e si compone di due parti:
• head (intestazione)
• body (corpo del documento)
L’intestazione (head) può contenere il titolo, oltre ad alcune

informazioni generali relative all’editor utilizzato o al contenuto del
documento.
Il corpo del documento (body) contiene il documento vero e proprio,
che viene visualizzato nella finestra del browser.
All’interno del body è possibile inserire testo, liste, tabelle, immagini e
collegamenti.
<HTML>
<HEAD>
<TITLE>
La mia prima pagina Web
</TITLE>
</HEAD>
<BODY>
ciao a tutti
</BODY>
</HTML>
Formato dei caratteri:
<b> testo </b> testo in grassetto
<I> testo </I> testo in corsivo
<U> testo </U> testo sottolineato
Tag <br>
 Tag che permette di andare a capo in qualunque
momento (br= BREAK)
 Il browser provvede a visualizzare a capo un testo quando
incotra il tag <br>
 Non determina chiusura del tag
<HTML>
<HEAD>
<TITLE>
La mia prima pagina
Web
</TITLE>
</HEAD>
<BODY>
<b> ciao a tutti </b><br>
<i> ciao a tutti </i><br>
<u> ciao a tutti </u>
</BODY>
</HTML>
FORMATTAZIONE TESTO
paragrafo
<p> …… </p>
 Permette di creare un nuovo paragrafo
 Produce una spaziatura di riga per separare un
paragrafo dal precedente
 Determina un’andata a capo alla fine del TAG di
chiusura
 Tag utilizzato anche per definire l’allineamento del
testo grazie all’attributo ALIGN
ALLINEAMENTO
<p ALIGN=" left"> TESTO DEL PARAGRAFO A SINISTRA </P>
<p ALIGN="right"> TESTO DEL PARAGRAFO A DESTRA </P>
<p ALIGN=" center"> TESTO DEL PARAGRAFO CENTRATO </P>
<p ALIGN=" justify"> TESTO DEL PARAGRAFO GIUSTIFICATO </P>

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
ciao a tutti
<p align= "center" >ciao a tutti </p>
</BODY>
</HTML>
TAG di Paragrafo DIV
 Anche esso permette di marcare una parte del documento e

gestirne l’allineamento
 prevede il tag di chiusura
 l’unica differenza con il comando di paragrafo è che non

vengono inseriti spazi all’inizio e alla fine del paragrafo marcato
<div>………..</div>
• <div ALIGN=" left"> TESTO DEL PARAGRAFO A SINISTRA </div>
• <div ALIGN="right"> TESTO DEL PARAGRAFO A DESTRA </div>
• <div ALIGN=" center"> TESTO DEL PARAGRAFO CENTRATO </div>
• <div ALIGN=" justify"> TESTO DEL PARAGRAFO GIUSTIFICATO </div>

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
ciao a tutti
<div align= "right" >ciao a tutti </div>
</BODY>
</HTML>
Dimensione colore e tipo di carattere : IL FONT
Il tag FONT ha la funzione di formattare tipo colore e grandezza del testo limitatamente ad alcuni punti
del documento.
Si usa il tag <FONT> con tre possibili attributi:
 size (per cambiare la dimensione dei caratteri)

 Può essere espresso in valore assoluto con un intero tra 1 e 7
 Il valore di default è 3 e corrisponde a circa 12 punti tipografici
 color (per cambiare il colore dei caratteri)

 Permette di modificare il colore del testo marcato. La sintassi è molto semplice, basta scrivere
il nome del colore in inglese es. color = green
 face (per cambiare il tipo di font)

 Consente di mostrare un tipo di carattere
 Si consiglia di utilizzare font diffusi come ARIAL, TIMES NEW ROMAN, CALIBRI per evitare
problemi di compatibilità con il browser
Esempio:
<FONT size=“5”
color=“red”
face=“Arial”>
</FONT>
Il testo viene visualizzato in rosso,
con dimensione 5
font Arial.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<div align= “center“ >
<FONT size=“5” color=“green” face=“Arial”> <u> Fermi-Galilei Ciriè</u>
</FONT>
</div>
</BODY>
</HTML>
TAG <Hn>______</Hn>
 ha la funzione di fornire stili ai titoli di pagina, dando
maggiore o minore enfasi a secondo del numero inserito
 <Hn> dove n è il numero di 1 a 6 che è possibile

assegnare all’elemento
 Il tag Hn inserisce spaziature di paragrafo rispetto agli

elementi che seguono e determina tag di chiusura </Hn>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<div align= “center“ >
<h1>Fermi-Galilei</h1>
<h3>Terza DSIA</h3>
</div>
</BODY>
</HTML>
Linee orizzontali con <HR>
Le linee orizzontali sono un ottimo strumento per dividere parti del
documento e rendere il testo più leggibile.
<HR align= “ center “ size= “ 2 “ width= “ 400 “ color= “ red “>
Align definisce la posizione della riga (center, right, left)
Width definisce la larghezza orizzontale della linea, può essere espressa in percentuale
o in pixel
Size definisce lo spessore della riga espressa in pixel o in percentuale
Color definisce il colore

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
riga normale:
<hr>
righe di colore spessore e larghezza diverse:
<HR width="50%" size="20" COLOR="RED" align="LEFT">
<HR width="50%" size="30" COLOR="YELLOW" align="CENTER">
<HR width="50%" size="40" COLOR="GREEN" align="RIGHT">
</BODY>
</HTML>
<BODY> IMPOSTARE LO SFONDO E COLORE SFONDO
Il comando <BODY> ha degli attributi che permettono di stabilire il
colore dello sfondo.
< BODY bgcolor=“colore unitario di sfondo ”
background=“imposta come sfondo l’immagine indicata
Bgcolor
I colori possono essere impostati indicando il loro nome
in inglese (“white”, “red”, “green”…….)
<BODY bgcolor= "red " >
<BODY bgcolor= " yellow " >
<BODY bgcolor= " blue " >
<body background>
 Permette di visualizzare sullo sfondo un’immagine in formato grafico . gif ,
.jpg o.bmp
 Il browser visualizza l’immagine una sola volta su ogni punto dello schermo
disponibile e replica più volte la stessa immagine per riempire tutto lo spazio
disponibile.
 E’ assolutamente necessario creare uno sfondo che , se ripetuto, non

presenti soluzione di continuità, ma un aspetto il più possibile uniforme.
Esempio
L’immagine si chiama sfondo.jpg ed è

depositata nella stessa directory del
documento.
L’immagine si chiama renga.bmp ed è

depositata nella stessa directory del
documento.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY background="sfondo.jpg">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY background="Renga.bmp">
</BODY>
</HTML>
<IMG> inserire immagini nel documento
 Formati grafici più utilizzati:

 Il formato GIF ( Graphics Interchange Formato)
 Il formato JPEG o JPG ( Joint Photographic Expert Group)
 Il formato PNG ( Portable Network Graphics)
Il tag <img> non ha bisogno di chiusura e la sua corretta

sintassi è la seguente:
<IMG SRC="immagine.gif">
<IMG SRC="immagine.gif">
Dove SRC sta per SEARCH ed è il percorso dal quale il browser
ricava l’immagine.
 Si ottiene la visualizzazione dell’immagine nel punto esatto in cui

compare il tag senza lasciare spazi o a capo dopo l’immagine.
 Ricorda bene: i file delle immagini che vengono inserite nelle

pagine web dovrebbero (DEVONO) essere memorizzate
all’interno di una cartella separata rispetto a dove risiede la
pagina web.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<img src="../immagini/renga.bmp">
</BODY>
</HTML>
Attributi del tag <IMG>
 Border permette di specificare un bordo attorno all’immagine di
uno spessore espresso in pixel o in percentuale
 Width permette di variare le dimensioni della larghezza espressa

in pixel o in percentuale
 Height permette di variare le dimensioni dell’altezza espressa in

pixel o in percentuale
 Alt visualizza un commento testuale passando il mouse

sull’immagine
Elenchi ordinati numerati
• Gli elenchi rappresentano uno dei modi più diffusi per organizzare
informazioni all’interno di siti web
• Un elenco numerato ordinato è delimitato dal tag di apertura <ol>,

che significa ORDER LIST e dal tag </ol> di chiusura.
• Ogni elemento della lista deve inoltre essere preceduto dal tag
<li> (List Item)
• Mediante l’attributo type si possono modificare gli stili dell’elenco.

Elenchi ordinati numerati
Elenchi puntati
• Il tag che li identifica è <ul> (UNORDERED LIST, lista non

numerata e non ordinata)
• Elenchi non sono legati da stretti rapporti di successione

gerarchica.
• Mediante l’attributo type si possono modificare gli stili dell’elenco.
• Sia per gli elenchi numerati che per quelli puntati, è possibile
omettere il tag <br>,visto che è automaticamente inserito da <li>
Elenchi puntati
Le tabelle
• Sono formate da righe e colonne.
• Per disegnare una tabella in HTML è necessario utilizzare tre tag
 Di inizio e fine tabella <table> ……</table>
 Di inizio e fine riga <TR>…..</TR>
 Di inizio e fine colonna <TD>…..</TD>
• L’elemento <TR> delimita ciascuna riga orizzontale della tabella, i suoi

attributi modificano le caratteristiche della riga alla quale si fa riferimento
• L’elemento <TD>infine rappresenta la singola casella di cui è formata la

tabella.
Align e Border
• Una tabella può essere disposta all’interno della pagina secondo
diversi allineamenti che vengono definiti dall’attributo align
<table align="left"> <table align="center"> <table align="right">
• Le tabelle sono normalmente prive di bordo visibile, per attivare la

visualizzazione del bordo è necessario utilizzare l’attributo border
del tag <table> specificandone la dimensione nella forma:
<table border="1">
Allineare contenuto tabella
• Il contenuto di una tabella può essere allineato

orizzontalmente con l’attributo align all’interno del
tag <td>.
<td align="left | center | right">

Sintassi per colorare tabella
 <table bgcolor= " colore sfondo tabella " >
 <table background= " immagine sfondo tabella" >
Sintassi per colorare cella
 <td background= " immagine sfondo singola cella" >
 <td bgcolor= " colore cella tabella " >

I collegamenti ipertestuali
• Per definire un collegamento ipertestuale si usa il marcatore <a>
• Possiede alcuni attributi, il più importante è href che significa Hypertext
Reference, il quale ha il compito di definire la destinazione del link.
• Si può trattare di una pagina HTML ma anche di un immagine, di un file video
o audio, in generale di un oggetto che deve essere caricato al posto della
pagina quando si fa clic sul collegamento ipertestuale:
<a href="percorso/risorsa">testo cliccabile oppure immagine </a>

• Al posto di percorso/risorsa deve essere inserito il percorso e il nome del
file che si vuole richiamare al clic.
• Si supponga di voler richiamare la pagina denominata 4dsia.html

attraverso un link dalla pagina 3dsia.html, e che entrambe siano presenti
nella stessa cartella. Il codice relativo è il seguente:
<a href="4dsia.html">cliccare qui per richiamare la pagina 4dsia</a>
• Facendo clic sul link, l’utente richiamerà la pagina collegata che si

sostituirà a quella attuale nelle stessa finestra del browser.
I collegamenti a link esterni
I collegamenti ipertestuali possono anche essere diretti a
risorse presenti in URL esterni.
Per definire ad esempio un link al noto motore di ricerca

GOOGLE la sintassi è la seguente:
<a href="http://www.google.it">Vai a Google Italia</a>

Collegamento ipertestuale tramite un’immagine
• E’ possibile sostituire il testo che forma il link con un’immagine: si

supponga per esempio di voler usare l’immagine google_logo.jpg:
<a href="http://www.google.it"><img src=" google_logo.jpg"> </a>
• In questo caso è l’immagine il punto di ingresso alla risorsa collegata.

Collegamenti a punti specifici di una pagina
Per creare questo tipo di collegamento è necessario indicare la
destinazione del link inserendo un’etichetta con l’attributo name
del marcatore di àncora posto nel punto in cui si vuole "saltare":
<a name="nome etichetta"></a>
Per collegare il link all’etichetta è necessario inserire il nome

dell’etichetta destinazione preceduta dal (#):
<a href="#etichetta">"testo di collegamento"</a>

E’ altresì possibile richiamare un’etichetta presente in un documento
diverso secondo la sintassi:
<a href= " percorso/nome_pagina#nome_etichetta " >….</a>
L’attributo target rappresenta la finestra in cui il documento dovrà essere

collocato. Mediante il valore predefinito _new la pagina viene collocata in
una nuova finestra, senza chiudere la finestra che conteneva il link:
< a href="http://www.google.it" target="_new"> clicca qui per aprire una

finestra su Google!</a>

HTML Riassunto

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Riassunto

Caricato da

Copyright:

Formati disponibili

Caratteristiche HTML

HTML (Hyper Text Markup Language) non è un linguaggio di programmazione

<P> delimita il paragrafo </P>

L’intestazione (head) può contenere il titolo, oltre ad alcune

<p ALIGN=" left"> TESTO DEL PARAGRAFO A SINISTRA </P>

<p ALIGN="right"> TESTO DEL PARAGRAFO A DESTRA </P>

<p ALIGN=" center"> TESTO DEL PARAGRAFO CENTRATO </P>

<p ALIGN=" justify"> TESTO DEL PARAGRAFO GIUSTIFICATO </P>

 Anche esso permette di marcare una parte del documento e

 prevede il tag di chiusura

 l’unica differenza con il comando di paragrafo è che non

• <div ALIGN="right"> TESTO DEL PARAGRAFO A DESTRA </div>

• <div ALIGN=" center"> TESTO DEL PARAGRAFO CENTRATO </div>

• <div ALIGN=" justify"> TESTO DEL PARAGRAFO GIUSTIFICATO </div>

 size (per cambiare la dimensione dei caratteri)

 color (per cambiare il colore dei caratteri)

 face (per cambiare il tipo di font)

 <Hn> dove n è il numero di 1 a 6 che è possibile

 Il tag Hn inserisce spaziature di paragrafo rispetto agli

<HR align= “ center “ size= “ 2 “ width= “ 400 “ color= “ red “>

Align definisce la posizione della riga (center, right, left)

Size definisce lo spessore della riga espressa in pixel o in percentuale

Color definisce il colore

 E’ assolutamente necessario creare uno sfondo che , se ripetuto, non

L’immagine si chiama sfondo.jpg ed è

L’immagine si chiama renga.bmp ed è

 Formati grafici più utilizzati:

 Il formato JPEG o JPG ( Joint Photographic Expert Group)

 Il formato PNG ( Portable Network Graphics)

Il tag <img> non ha bisogno di chiusura e la sua corretta

 Si ottiene la visualizzazione dell’immagine nel punto esatto in cui

 Ricorda bene: i file delle immagini che vengono inserite nelle

 Width permette di variare le dimensioni della larghezza espressa

 Height permette di variare le dimensioni dell’altezza espressa in

 Alt visualizza un commento testuale passando il mouse

• Un elenco numerato ordinato è delimitato dal tag di apertura <ol>,

• Mediante l’attributo type si possono modificare gli stili dell’elenco.

• Il tag che li identifica è <ul> (UNORDERED LIST, lista non

• Elenchi non sono legati da stretti rapporti di successione

• Mediante l’attributo type si possono modificare gli stili dell’elenco.

• Per disegnare una tabella in HTML è necessario utilizzare tre tag

 Di inizio e fine tabella <table> ……</table>

 Di inizio e fine riga <TR>…..</TR>

 Di inizio e fine colonna <TD>…..</TD>

• L’elemento <TR> delimita ciascuna riga orizzontale della tabella, i suoi

• L’elemento <TD>infine rappresenta la singola casella di cui è formata la

<table align="left"> <table align="center"> <table align="right">

• Le tabelle sono normalmente prive di bordo visibile, per attivare la

• Il contenuto di una tabella può essere allineato

<td align="left | center | right">

 <table bgcolor= " colore sfondo tabella " >

 <table background= " immagine sfondo tabella" >

Sintassi per colorare cella

 <td background= " immagine sfondo singola cella" >

 <td bgcolor= " colore cella tabella " >

<a href="percorso/risorsa">testo cliccabile oppure immagine </a>

• Si supponga di voler richiamare la pagina denominata 4dsia.html

<a href="4dsia.html">cliccare qui per richiamare la pagina 4dsia</a>

• Facendo clic sul link, l’utente richiamerà la pagina collegata che si

Per definire ad esempio un link al noto motore di ricerca

<a href="http://www.google.it">Vai a Google Italia</a>

• E’ possibile sostituire il testo che forma il link con un’immagine: si

<a href="http://www.google.it"><img src=" google_logo.jpg"> </a>