Sei sulla pagina 1di 58

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>
La mia prima pagina Web
</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>
La mia prima pagina Web
</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>
La mia prima pagina Web
</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>
La mia prima pagina Web
</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>
La mia prima pagina Web
</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>
La mia prima pagina Web
</TITLE>
</HEAD>
<BODY background="sfondo.jpg">
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>
La mia prima pagina Web
</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>
La mia prima pagina Web
</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>