http://tomasella.altervista.org/it/HTML/

HTML

Introduzione

Questa pagina vuole essere semplicemente un rapido tutorial sulle basi del linguaggio HTML, ma nulla di più. Verranno trattati i seguenti argomenti:

Struttura essenziale di una pagina HTML

Una pagina HTML è innanzitutto un file la cui estensione è appunto ".html". Tale file deve necessariamente presentare una certa struttura. Si pensi ad esempio ad un testo: esso ha un'impaginazione, un titolo, dei paragrafi, eccetera. Allo stesso modo una pagina HTML deve contenere degli elementi, chiamati "tags", che servono a definire l'inizio e la fine del file, il corpo della pagina, l'intestazione, i paragrafi e così via. Alcuni tags sono essenziali per definire la pagina HTML, altri invece vengono inseriti all'occorrenza, in base a ciò che deve effettivamente apparire nella pagina.

I tags principali sono:

<HTML>
</HTML>

i quali definiscono rispettivamente l'inizio e la fine del documento. Il primo tag si chiama tag d'apertura, mentre il secondo, che differisce dal primo per la barra "/", si chiama tag di chiusura. Va detto che non tutti i tags necessitano del tag di chiusura. Inoltre una cosa molto importante è che i tags non devono mai essere sovrapposti, cioè se viene aperto un tag e poi un secondo, prima di chiudere il primo si deve necessariamente chiudere il secondo.

I tags essenziali per un documento HTML sono:

<HTML>
<HEAD>
</HEAD>
</HTML>

Questi tags definiscono l'intestazione del documento HTML, dove trovano spazio il titolo ed altre informazioni.

Il corpo vero e proprio del documento HTML viene inserito all'interno dei tags:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

In definitiva la struttura di un documento HTML è (elementi essenziali):

  • <HTML></HTML>
    • <HEAD></HEAD>
      • <TITLE> Titolo </TITLE> (compare nell'intestazione del browser e nei bookmarks)
    • <BODY></BODY> (questo non è essenziale di per se, ma lo diventa se il documento non è un frame e contiene qualcosa)
      • <H1> Intestazioni (1-6) </H1> (ogni livello d'intestazione ha un'impostazione di carattere predefinita)
      • <P> Paragrafi </P>
      • <BR> (interruzione di riga)
      • <HR> (linea orizzontale)

torna all'inizio


Inserimento e formattazione del testo

Spesso una pagina HTML è formata essenzialmente da testo, perciò è fondamentale conoscere come inserirlo ed è utile sapere come gestire al meglio lo stile di formattazione.

Di per se il testo in una pagina HTML può essere semplicemente inserito così com'è all'interno del corpo della pagina. In questo modo però non si ha nessun controllo particolare sulla formattazione e quindi assume l'aspetto standard di default. Risulta invece molto più comodo e leggibile suddividere il testo in paragrafi. Esiste peranto un tag apposito all'interno del quale inserire il testo relativo a quel paragrafo, il tag <p>. Pertanto, per inserire un paragrafo di testo all'interno del nostro documento dovremo scrivere, nel punto desiderato, il codice: 

<p>
Questo è il testo del nostro paragrafo.
</p>
Esso assumerà le caratteristiche standard dell'elemento paragrafo. Naturalmente è possibile modificare tali caratteristiche, ma questo argomento verrà approfondito in seguito all'interno della sezione relativa ai fogli di stile.

Nel caso fosse necessario andare a capo il tag da usare è <br>, il quale non necessita del tag di chiusura. È essenziale sapere che il codice HTML ignora gli "a capo" inseriti all'interno del codice. Se infatti scrivessimo 

<p>
Questo
è
il
testo
del
nostro
paragrafo
</p>
otterremo il testo:

questo è il testo del nostro paragrafo

dove gli "a capo" sono diventati semplicemente spazi tra una parola e l'altra.

In maniera analoga vengono ignorati tutti gli spazi consecutivi e le tabulazioni. Se cioè scrivessimo 

<p>
Questo          è         il      testo
del    nostro         paragrafo
</p>
otterremo lo stesso risultato di prima.

Passiamo ora agli aspetti più "grafici" del testo, ovvero alla formattazione vera e propria. Di seguito viene presentata una tabella dove vengono elencati i tags per gestire l'aspetto del testo, relativamente all'effetto prodotto:
- tags per la formattazione del testo -
effetto desiderato tag necessario note
grassetto <b>testo</b>  
corsivo <i>testo</i>  
sottolineato <u>testo</u> desueto. si usi lo stile
spaziatura fissa <tt>testo</tt>  
colorato <font color="0000FF">testo</font> per conoscere i codici dei colori vai qui
diversa dimensione <font size=5>testo</font> le dimensioni possono andare da 1 a 7
font particolare <font face="impact">testo</font>  
È possibile condensare in un'unica scrittura gli ultimi tre tags, ottenendo la forma compatta: <font face="impact" size=5 color="0000FF">testo</font>. Inoltre si possono definire contemporaneamente più font, in modo che nel caso un utente non disponga di quello indicato, ne venga utilizzato un altro di nostro piacimento. Questo si ottiene scrivendo ad esempio: <font face="impact, comic sans ms, arial, courier new">testo</font>.

Per il testo si può utilizzare qualsiasi tipo di font. Naturalmente per poter visualizzare il testo con il font dichiarato, il visitatore della pagina web deve possedere quel font. Nel caso l'utente non possegga nessuno dei font dichiarati, il browser utilizzerà il font impostato per default, in modo tale da permettere comunque la corretta visualizzazione del contenuto della pagina.

Altri effetti utilizzabili verranno introdotti coi fogli di stile.

In alcuni casi è comodo inserire caratteri particolari, come lettere accentate, virgolette, apici eccetera. Per farlo si devono inserire dei codici HTML appositi. Alcuni esempi sono:

&nbsp;
spazio;
&lt;
minore (<);
&gt;
maggiore (>);
&amp;
"e" commerciale (&);
&quot;
virgolette (");
&times;
segno di moltiplicazione (×);
&Egrave;
"E" accentata (È);
&laquo; e &raquo;
virgolette per i discorsi (« e »);
&middot;
punto sospeso (·).
Lo spazio (&nbsp;) serve per ovviare al fatto che nel codice HTML gli spazi consecutivi vengono ignorati.

La tabella completa dei codici è disponibile qui o qui.


torna all'inizio


Inserimento ed impostazione di immagini

In un documento HTML, oltre al testo, trovano spazio delle immagini, dei loghi eccetera. Il loro inserimento è molto semplice ed ora ne illustreremo le modalità.

Il tag utilizzato per inserire un'immagine è <img>; il codice base per inserire un'immagine è: 

<img src="nome_e_indirizzo_immagine">
quindi, se ad esempio dovessimo inserire l'immagine "immagine.jpg" all'interno della nostra pagina, dovremo scrivere: 
<img src="immagine.jpg">
ottenendo il risultato seguente:
immagine
se invece l'immagine è contenuta nella cartella "immagini" sarà sufficiente scrivere: 
<img src="immagini/immagine.jpg">
mentre se proviene da internet si scriverà (tutto attaccato in un'unica riga): 
<img src="http://www.celluloide.it/home/
foto/orgoglio-e-pregiudizio.jpg">
Naturalmente è possibile utilizzare sia l'indirizzamento assoluto che quello relativo.

L'immagine presenta una serie di parametri che possono essere definiti a piacimento. Le dimensioni dell'immagine si possono specificare manualmente con: 

<img src="immagine.jpg" width=800 height=600 >
mentre impostando solamente uno dei due parametri, il parametro non specificato viene scalato in modo da mantenere le proporzioni originali; se, invece, nessun parametro viene specificato l'immagine assume le proprie dimensioni originali.

immagine È possibile anche immettere del testo a lato dell'immagine. Per far ciò il codice va modificato nel seguente modo: 

<img src="immagine.jpg" align="right">
dove i possibili parametri per "align" sono:
  • left;
  • center;
  • right.

Un altro parametro che si può definire è il testo alternativo. Esso è utile soprattutto nelle connessioni lente, per i browser che hanno disabilitata la funzione di visualizzazione delle immagini o per quelli testuali, nonchè in caso di link ad immagini non più disponibili. Infatti esso permette di definire del testo che verrà visualizzato al posto dell'immagine nei casi accennati. Il codice diventa perciò: 

<img src="immagine.jpg" alt="testo alternativo">
e l'effetto sarà il seguente:
testo alternativo

Nel caso si voglia inserire un'immagine di sfondo, dovremo inserire all'interno del tag <body> il codice background="sfondo.gif". Siccome non tutti i browser supportano la visualizzazione di un'immagine di sfondo, alternativamente è possibile indicare un colore di sfondo inserendo il codice bgcolor="#ccffff". Il codice complessivamente risulterà: 

<body bgcolor="#ccffff" background="sfondo.gif">

Caratteristiche delle immagini

I parametri principali che caratterizzano un'immagine digitale sono:

dimensione
larghezza e altezza dell'immagine misurata in pixel (px).
risoluzione
densità di punti per unità di lunghezza misurata in punti per pollice (dpi, dall'inglese "dot per inch").
profondità di colore
numero massimo di colori possibili. Spesso viene espressa in base al numero di bit con cui ogni colore è rappresentato e quindi più alto è il numero di bit, più alto è il numero di colori rappresentabili: ad esempio 8 bit corrispondno a 256 colori, 16 bit a 65'536 colori, 24 bit a 16'777'216 colori.
peso
spazio di memoria che il file occupa, misurato in kB (kiloByte).

Formato delle immagini

Esistono diversi formati (o codifiche) con cui possono essere salvate le immagini ed ognuno di essi presenta le proprie caratteristiche. È importante conoscerle per essere in grado di scegliere qual è quello in grado di offrire le migliori prestazioni in funzione dello scopo che hanno tali immagini.

Il formato diciamo base di un'immagine digitale è il formato bitmap (bmp), il quale descrive il colore assunto da ogni singolo pixel. Proprio per questo motivo, il bitmap risulta essere il formato più completo, ma anche il più pesante a parità di qualità e dimensione dell'immagine. Esistono perciò formati che consentono di ottenere un file più leggero, tramite l'applicazione di particolari algoritmi che comprimono l'immagine. Tali algoritmi si possono dividere in due categorie, ovvero quelli "non a perdita di informazione" e quelli "a perdita di informazione" (lossy). I primi garantiscono la ricostruzione fedele dell'immagine rispetto all'originale, mentre i secondi non sono in grado farlo, ma offrono elevati gradi di compressione e molti casi la differenza rispetto all'originale è quasi impercettibile o comunque accettabile.

I formati usati nel web per le immagini sono:

gif
Graphic Interchange Format. è un formato molto antico (risale agli anni '80), quindi ben collaudato e, soprattutto, supportato da tutti i browser. Sfrutta un algoritmo di compressione non a perdita di d'informazione ed ha una profondità di colore di 8 bit. Il grado di compressione, ossia la sua efficienza, è migliore se sull'immagine ci sono grandi aree dello stesso colore e se ci sono pochi colori. Ammette l'effetto interlacciato (quello per qui una immagine man mano che viene caricata assume una definizione sempre migliore, e che quindi già da subito da un'idea di ciò che rappresenta) e consente di definire un colore che il browser visualizzerà come trasparente.
jpeg
Joint Photographic Expert Group. Sfrutta un algoritmo di compressione di tipo lossy a 24 bit di profondità del colore. È stato sviluppato per soddisfare alle esigenze di avere immagini di alta qualità con un elevato numero di colori (ad esempio nel campo della fotografia, della grafica ecc.). Il grado di compressione dell'immagine può essere scelto, ma è chiaro che maggiore sarà la compressione, peggiore risulterà la qualità dell'immagine prodotta. Per immagini in cui i colori variano proressivamente e con continuità è possibile ottenere elevati gradi di compressione (anche di un centinaio di volte) senza degradare sensibilmente l'immagine.
png
Portable Network Graphics. Si tratta di un formato disponibile dal 1995 e creato appositamente per il web con l'intenzione di sostituire il formato gif, ma non è ancora molto diffuso perchè non tutti i browser lo supportano completamente. Appartiene alla categoria dei formati non a perdita di informazione, con 8, 16 o 24 bit di profondità di colore. L'algoritmo di compressione è più efficiente di quello usato per i file gif e può essere utilizzato per la stampa delle immagini. Supporta anch'esso le funzionalità di interlacciamento e trasparenza; inoltre permette di incorporare una stringa di testo, utile per effettuare ricerche di immagini.

torna all'inizio


Le pagine HTML hanno di estremamente comodo la possibilità di effettuare dei collegamenti tra punti diversi della stessa pagina oppure con altre pagine.

Per inserire un collegamento è sufficiente scrivere: 

questo è un <a href="URL_della_pagina">link</a>
Ad esempio, se volessimo inserire un collegamento alla pagina web dell'Università degli Studi di Padova, scriveremo: 
questo è il <a href="http://www.unipd.it/">link</a> alla
pagina web dell'Università degli Studi di Padova.
ottenendo il risultato:
questo è il link alla pagina web dell'Università degli Studi di Padova.

Il link ad uno specifico punto di una pagina HTML si effettua in due passi. Innanzitutto è necessario definire un codice identificativo del punto al quale si intende fare riferimento. Se ad esempio voglio fare riferimento alla parola "Introduzione" all'interno della mia pagina, dovrò modificare il punto dov'èra scritto "Introduzione" nel seguente modo: 

<a id="introduzione">Introduzione</a>
Fatto questo, aggiungiamo nel punto desiderato il link ad "Introduzione" con il codice: 
<a href="mia_pagina.html#introduzione">link all'introduzione</a>
Nel caso in cui intendiamo riferirci ad un punto della stessa pagina, è possibile omettere il nome della pagina, ossia scriveremo: 
<a href="#introduzione">link all'introduzione</a>

A volte è comodo utilizzare delle immagini come link, ovvero dare la possibilità ai lettori di andare in un'altra pagina semplicemente cliccando su di un'immagine. Il codice è: 

<a href="mia_pagina.html#introduzione">
<img src="immagine.jpg"></a>
In questo modo però comparirà un bordo attorno all'immagine. Volendo rimuoverlo dovremo specificare lo spessore del bordo dell'immagine: 
<a href="mia_pagina.html#introduzione">
<img src="immagine.jpg" border="0"></a>

Un'ultima tipologia molto importante di link è quella che ci da la possibilità di aggiungere un riferimento ad un indirizo e-mail. Scriveremo semplicemente: 

<a href="mailto:indirizzo_e_mail@provider.it">scrivimi</a>
È anche possibile predefinire l'oggetto dell'e-mail ed il suo contenuto attraverso le opzioni "subject" e "body": 
<a href="mailto:indirizzo_e_mail@provider.it?subject=Oggetto
%20dell'e-mail&body=testo%20del%20messaggio">scrivimi</a>
Naturalmente possiamo anche definire altri destinatari con il codice: 
<a href="mailto:indirizzo_e_mail@provider.it?
cc=indirizzo2@pippo.it&bcc=indirizzo3@pippo.it
&subject=Oggetto%20dell'e-mail&body=testo%20del
%20messaggio">scrivimi</a>
Quest'ultimo esempio risulta essere del tipo scrivimi.
torna all'inizio


Inserimento di video

L'inserimento di video si effettua includendo all'interno della pagina web il codice HTML che crea il collegamento al video. Ad esempio potrebbe essere: <embed src="http://www.youtube.com/v/pnP8pEmno4E" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed> oppure, se per esempio il video è su YouTube, potete semplicemente copiare il codice HTML scritto all'interno della casella "embed" che trovate accanto al video che volete visualizzare.


torna all'inizio


Inserimento di liste

Le liste in HTML si possono suddividere in tre categorie:

  • liste non ordinate (come questa);
  • liste ordinate;
  • liste di definizioni.

Liste non ordinate

Il codice usato per ottenere questa lista è 

<ul>
  <li>liste non ordinate (come questa);</li>
  <li>liste ordinate;</li>
  <li>liste di definizioni.</li>
</ul>

Liste ordinate

La lista ordinata si ottiene in questo modo: 

<ol>
  <li>elementari;</li>
  <li>medie;</li>
  <li>superiori;</li>
  <li>università;</li>
  <li>dottorato/master.</li>
</ol>
che verrà visualizzata così:
  1. elementari;
  2. medie;
  3. superiori;
  4. università;
  5. dottorato/master.

Liste di definizioni

Le liste di definizioni vengono usate generalmente per creare dei dizionari di termini. Il loro aspetto è del tipo:

D.E.I.
Dipartimento di Elettronica ed Informatica
D.I.E.
Dipartimento di Ingegneria Elettrica
Tale lista ha come codice sorgente: 
<dl>
  <dt>D.E.I.</dt>
    <dd>Dipartimento di Elettronica ed Informatica</dd>
  <dt>D.I.E.</dt>
    <dd>Dipartimento di Ingegneria Elettrica</dd>
</dl>

torna all'inizio


Inserimento di tabelle

Un altro elemento molto importante in HTML sono le tabelle. Infatti esse sono utili non solo per creare delle tabelle vere e proprie, ma anche per gestire insiemi di immagini, pulsanti e link, eccetera. Anch'esse sono costituite da una serie di tag, ad esempio, per creare la tabella
tabella
A B
C 1 2
D 3 4
dovremo scrivere: 

<table>
  <caption>tabella</caption>
  <tr>
    <th></th>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <th>C</th>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <th>D</th>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
dove il tag <table> delimita la tabella, <tr> indica una riga della tabella, <td> un elemento della riga e <th> un elemento che funge da titolo, mentre <caption> definisce la didascalia della tabella.

Si può anche fare in modo che una cella di una riga/colonna si estenda per più celle della riga/colonna successiva, ad esempio per avere:
tabella
colonne
righe 1 2
3 4
scriveremo: 

<table>
  <caption>tabella</caption>
  <tr>
    <th></th>
    <th colspan=2>colonne</th>
  </tr>
  <tr>
    <th rowspan=2>righe</th>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

torna all'inizio


Inserimento di linee orizzontali

Il tag html per inserire una linea orizzontale è semplicemente hr. Naturalmente è possibile sceglire la sua larghezza (in pixel oppure in percentuale rispetto alla larghezza della pagina), lo spessore, il colore e l'allineamento. Ad esempio il codice <hr width="80%" size="4" color="red" align="right"> produce il risultato seguente:


torna all'inizio


Inserimento di testo preformattato

Come detto in precedenza nella sezione inserimento e formattazione del testo, i browser ignorano la formattazione del testo creata con spazi consecutivi, "a capo" eccetera. Esiste tuttavia un tag, <pre>, all'interno del quale è possibile editare del testo e vederlo visualizzato esattamente come lo abbiamo editato (caratteri speciali esclusi). Se immettessimo all'interno del nostro documento il codice: 

<pre>

                           \|/ 
                          (@ @)
               +----oOO----(_)----------+
               |                        |
               |     che ve ne pare?    |
               |                        |
               |       facile, no?      |
               |                        |
               +-----------------oOO----+
                         |__|__|  
                          || ||
                         ooO Ooo

</pre>
vedremo visualizzato esattamente: 

                           \|/ 
                          (@ @)
               +----oOO----(_)----------+
               |                        |
               |     che ve ne pare?    |
               |                        |
               |       facile, no?      |
               |                        |
               +-----------------oOO----+
                         |__|__|  
                          || ||
                         ooO Ooo

torna all'inizio


Fogli di stile

I fogli di stile rappresentano un recente ed efficace metodo per scegliere una particolare visualizzazione del contenuto della pagina web. Essi permettono di scegliere vari parametri di formattazione del testo, delle immagini, tabelle, links ed, in generale, ogni possibile tipo di elemento di una pagina HTML.

Esistono vari modi con i quali è possibile definire i parametri di un oggetto HTML usando i fogli di stile. Possedendo già delle conoscenze sul linguaggio HTML, il più immediato è quello di specificare i parametri all'interno del tag desiderato, come avviene normalmente ad esempio quando si specifica il colore del testo nel modo classico in HTML. Ad esempio, per specificare il colore del testo di un paragrafo in HTML si usa il codice <p><font color="0000FF">paragrafo</font></p>, mentre con i fogli di stile si scrive <p style="color: #0000FF;">paragrafo</p>.

L'utilità dei fogli di stile si vede maggiormente quando si vogliono cambiare le caratteristiche di tutti gli elementi di uno stesso tipo all'interno della stessa pagina. Se infatti si desiderasse scrivere una pagina molto lunga dove la prima riga di tutti i paragrafi ha un rientro di 20 pixel rispetto al resto del paragrafo, sarà sufficente inserire all'interno del tag <head> il codice: 

<style type="text/css">
 P {text-indent: 20px;}
</style>

Ma ora che c'abbiamo preso gusto...perchè non fare le cose serie? I fogli di stile veri e propri sono appunto dei file appositi, distinti dalla pagina HTML, dove vengono raccolte tutte le preferenze sullo stile di visualizzazione che si desidera. Questa è una fantastica opportunità per chi desidera utilizzare uno stesso stile per più di una pagina web, senza dover inserire all'interno di ognuna le specifiche desiderate. Inoltre in questo modo risulterà estremamente semplice aggiornare lo stile o cambiarlo del tutto, semplicemente andando a modificare il foglio di stile.

Il foglio di stile è dunque un semplice file di testo avente estensione ".css", all'interno del quale viene scritto l'elenco delle preferenze. Un semplice esempio potrebbe essere il seguente: 

BODY
 {font-family: verdana, arial, times new roman;
  font-size: 12pt;
  color: black;
 }

H1
 {font-family: curlz mt, arial;
  font-size: 52pt;
  color: blue;
  text-align: center;
 }

H2
 {font-family: Bradley Hand ITC, papyrus, arial;
  font-size: 52pt;
  color: red;
 }

P
 {text-indent: 20px;
 }
Naturalmente all'interno della pagina web sarà necessario specificare il foglio di stile facendo riferimento a tale file. Per fare ciò si dovrà riportare all'interno del tag <head> il codice: 
<link rel="stylesheet" type="text/css"  title="principale"
href="foglio_di_stile.css" />

I parametri di cui si può scegliere il valore sono veramente molti e vanno dall'impostazione dei colori ai bordi, dalle immagini di sfondo all'interlinea del testo eccetera. Come penso avrete notato, anch'io all'interno di questo sito ho fatto ampio uso dei fogli di stile, infatti ne potete trovare ben sette, infatti è possibile scegliere lo stile di visualizzazione delle pagine tra sei stili differenti, mentre il settimo è riservato e ottimizzato per la stampa. Se vi può interessare potete vedere il contenuto dei miei fogli di stile cliccando sul relativo pulsante qui sotto:

A A A A A A A

Anche all'interno dei fogli di stile è possibile scrivere dei commenti, che, a differenza del linguaggio HTML, vanno inseriti tra i caratteri "/*" e i caratteri "*/", come per alcuni linguaggi di programmazione.


torna all'inizio


Visibilità su Google

Per far sì che il vostro sito web compaia nelle ricerche effettuate sul noto motore di ricerca Google, è necessario procedere all'indicizzazione del vostro sito. Troverete tutte le informazioni necessarie seguendo questo link.



torna all'inizio     Stampa

Valid HTML 4.01 Transitional    Valid CSS