Un riferimento al linguaggio è disponibile presso w3scool.

Una panoramica sul linguaggio HTML

Il World Wide Web è un insieme di documenti e di risorse contenute in calcolatori sparsi nel mondo, collegati tramite Internet.

Ciascun documento può contenere collegamenti (link, in inglese) ad altri documenti e risorse disponibili su altri computer.

L'insieme di tutti i collegamenti forma una maglia che viene paragonata idealmente ad una ragnatela. Web significa appunto ragnatela.

Il Web nacque per migliorare la distribuzione delle informazioni tra le università e i centri di ricerca. L'esigenza dei ricercatori era ostacolata dalla difficoltà di distribuire risorse eterogenee. Ad esempio il trasferimento di file, la partecipazione ad un Newsgroup, ad una discussione su forum, e così via.

Il Web consente l'accesso a tutte queste risorse tramite un solo strumento: il browser, cioè il programma utilizzato per "sfogliare" i contenuti della rete.

I documenti che costituiscono il Web, denominati pagine Web, vengono scritti in HTML (Hyper Text Markup Language, Linguaggio Ipertestuale a Marcatori), un linguaggio descrittivo basato sulla presenza nel documento di marcatori, questi elementi svolgono la funzione di parentesi, nel senso che racchiudono parti che vengono interpretate dal programma, che legge il documento, e vengono elaborate in modo appropriato.

La pagina HTML, a differenza delle pagine cartacee, non ha delle dimensioni fisiche prestabilite: si tratta di una entità contenente informazioni. Quindi, una pagina HTML può corrispondere a svariate pagine cartacee.

Un computer della rete è identificato da un nome (o anche da un indirizzo). Il computer ospita (Host in inglese) documenti e risorse, che nel loro insieme costituiscono un sito Web. La pagina principale, predefinita dall'autore, viene chiamata Home Page e rappresenta il punto di partenza per l'esplorazione del sito.

Breve storia

La prima versione dell'HTML si rivolgeva prevalentemente ad un ristretto numero di utenti, tutti con conoscenza e cultura scientifica. Il linguaggio serviva unicamente per formattare le relazioni ed i documenti della comunità scientifica.

Era fortemente limitativo, e permetteva di descrivere la pagina "a grandi linee", senza scendere effettivamente nei "particolari". Tramite il ristretto set di tag disponibili era possibile indicare il titolo, formattare i paragrafi e realizzare delle liste puntate e numerate. Era anche possibile evidenziare porzioni di testo, introdurre delle immagini, e soprattutto introdurre dei collegamenti ipertestuali, detti "link", in modo che una pagina che parlasse - ad esempio - di "botanica", desse la possibilità di "saltare" verso altri siti che trattavano lo stesso argomento (o altri argomenti correlati).

Nonostante queste limitazioni e la ridottissima banda passante che caratterizzava la Rete ai primi anni '90, il Web ebbe un successo strepitoso. Il successo presso il grande pubblico di utenti non tecnici fece sorgere nuove necessità, mentre il Web iniziava ad assumere una nuova natura commerciale.

Per rispondere alle nuove esigenze, furono introdotti nuovi tag per la formattazione delle immagini e del testo e, soprattutto, le tabelle, impiegate anche per posizionare gli elementi sulla pagina. Furono inoltre introdotte le texture di sfondo che vivacizzano l'aspetto.

Nonostante i grandi cambiamenti, però, si era ancora lontani dal completo controllo dell'aspetto, ancora fortemente dipendente dal browser.

La competitività tra i produttori di browser cominciò a manifestarsi con le incompatibilità delle pagine. Infatti, elementi innovativi come i Frame (letteralmente "cornici") tramite i quali era possibile visualizzare ed organizzare contemporaneamente più pagine HTML in una stessa finestra non erano riconosciuti da tutti i browser. La mancanza di compatibilità per un tag ha come conseguenza che un documento diventa accessibile ad un più ristretto bacino di utenza.

I Marcatori

Il concetto di Marcatore nasce nelle tipografie e si riferisce alle note scritte dall'impaginatore intorno al documento per descrivere l'impaginazione finale del documento stesso. Un linguaggio basato su marcatori è un insieme di istruzioni che definiscono come debbono essere elaborati ed organizzati i dati del documento.

I marcatori vengono anche chiamati tag. In generale si utilizza un tag per indicare l'inizio del testo da trattare ed un tag per definirne la fine. Il linguaggio a marcatori si occupa di definire la struttura ed il contenuto del documento stesso. Tramite i tag si procede nella definizione delle parti del documento.

Per dare un esempio di elemento si pensi a dei numeri di telefono contenuti nel documento. Tramite i tag

<telefono>.... </telefono>

sarà possibile riconoscere immediatamente il tipo delle informazioni e procedere ad una rappresentazione che le metta in evidenza.

Ovviamente, per poter utilizzare e leggere una pagina scritta in HTML serve un browser che ne consenta la lettura.

In definitiva, l'HTML è un linguaggio ideato per organizzare ed archiviare informazioni di natura scientifica consentendone il reperimento facilmente e velocemente. Un'altra caratteristica che ha influenzato la stesura dell'HTML è l'indipendenza dalla piattaforma su cui si legge il documento.

Tra gli elementi che l'HTML consente di definire all'interno di un documento vi sono: titolo, intestazione, corpo del testo, elenchi numerati e puntati e collegamenti ipertestuali;

Ciascun elemento viene individuato tramite un tag iniziale, racchiuso tra i segni di minore e maggiore (< e >), ed un tag finale, racchiuso tra i caratteri (</ e >). Il tag è case insensitive, cioè può essere scritto sia maiuscolo che minuscolo, ma in genere è buona norma scriverli tutti nella stessa maniera per facilitare la lettura e la manutenzione del documento. I tag possono essere raggruppati per tipologia:

Dichiarazione DOCTYPE

La stesura di un documento prevede prima di tutto l'identificazione del documento tramite il tag speciale <!DOCTYPE ...>

La dichiarazione DOCTYPE deve essere la prima riga di ogni documento HTML e deve precedere qualsiasi altro tag.

La dichiarazione DOCTYPE non è un tag HTML, è un'informazione rivolta al browser relativa alla versione del linguaggio usato per scrivere la pagina.

La dichiarazione DOCTYPE fa riferimento ad un Document Type Definition (DTD) che specifica le regole del linguaggio, affinchè i browser possano rappresentare correttamente la pagina. Per gli esempi qui proposti la dichiarazione può essere omessa, oppure si può adottare la seguente:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Per una comprensione del significato dei vari campi (peraltro inutile perchè la linea non consente modifiche) consultare la tabella: W3C

Dopo la dichiarazione DOCTYPE seguono i tag <html> ... </html>, all'interno di questi viene riportata l'intestazione <HEAD>...</HEAD>, comprendente il titolo del documento e le informazioni sull'autore e sul contenuto della pagina. e il corpo del documento delimitato dai tag <BODY>...</BODY>. All'interno di quest'ultimo risiederanno le informazioni che dovranno essere rappresentate. Un documento di base è quindi:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
   <HEAD>
      <TITLE> </TITLE>
   </HEAD>
   <BODY>
      <P>
   </BODY>
</HTML>

La regola di rispettare una corretta indentazione e l'aggiunta di commenti esaustivi facilitano la manutenzione dei documenti stessi.

La dichiarazione DOCTYPE denota il fatto che l'HTML si evolve, e nella sua trasformazione molti attributi e tag sono stati dichiarati deprecated, intendendo che si presume che essi saranno aboliti in una versione finale dell'HTML.

L'indirizzo di una pagina web

indirizzo: Un URL (acronimo di Uniform Resource Locator) è il metodo usato nei file HTML per indicare la posizione di una risorsa a cui si vuole accedere.

Spesso questa risorsa è il nome di un file ottenibile comunicando con un server mediante un protocollo, cioè un insieme di convenzioni che permettono di capirsi durante un colloquio. Un URL ha la seguenti parti:

protocollo://server.dominio[:porta]/path/nomefile[#sezione]

dove Protocollo vale spesso http per indicare che nomefile va prelevato da server.dominio.

Altri protocolli sono ftp, news, mailto oppure telnet.

Il numero della porta va specificato solo se è diverso da quello che per default gestisce il protocollo indicato.

Se il documento è HTML, il suo nome potrebbe essere seguito dal carattere # e dal nome di una sezione all'interno del file richiesto.

Negli URL è obbligatorio separare le varie componenti con il carattere "/", indipendentemente da quello che si fa nel proprio sistema operativo.

Se un URL termina con "/" significa che si sta specificando una directory. È bene considerare l'URL sempre case sensitive, anche se il sistema operativo che si sta usando non fa differenza tra maiuscole e minuscole nei nomi dei file. Quindi, bisogna sempre scrivere i nomi con le lettere maiuscole e minuscole in esatta corrispondenza a quanto è memorizzato sul server.

Nella maggior parte dei sistemi operativi esiste il concetto di directory corrente; lo stesso avviene per gli URL che possono essere assoluti o relativi all'URL corrente, cioè la pagina che mostra il browser al momento.

Un URL assoluto contiene sempre tutte le informazioni necessarie alla sua localizzazione: protocollo, server, path assoluto e nome del documento. In un URL relativo invece si specifica solo un path relativo per individuare il documento, partendo dal path del documento corrente.

I Commenti sono delimitati da <!-- e -->. Possono apparire in qualsiasi punto, all'esterno dei tag.

L'HTML trasforma in spazio le tabulazioni, i vai a capo e più spazi consecutivi.

I nomi dei tag e degli attributi sono case insensitive, quindi possono essere scritti indifferentemente in maiuscolo o in minuscolo. Il valore degli attributi invece non è sempre case insensitive.

Caratteri speciali

Consulta la tabella di codifica dei caratteri speciali

I caratteri "<" e">" non possono essere usati in un file HTML, perchè sono riservati a individuare i tag del linguaggio. Al loro posto di usano "&lt;" e "&gt;" che sono le abbreviazioni di "less than" e "greater than". Per questo motivo, anche "&" è un carattere speciale: serve a introdurre i caratteri riservati.

Per scrivere "&" nel proprio documento HTML, è necessario digitare la sequenza "&amp;" (abbreviazione di ampersand).

La Tabella mostra i nomi di altri caratteri riservati. Questi nomi sono case sensitive.

Per forzare più spazi consecutivi si usa la sequenza &nbsp; (non breakeble space).

l'apice, codificato con &quot; serve quando bisogna inserire delle virgolette dentro il valore di un attributo, che già è delimitato da virgolette. ad esempio:

value="ITI &quot;F. Giordani&quot"

I colori

Black Green
Silver Lime
Gray Olive
White Yellow
Maroon Navy Red
Blue Purple
Teal Fuchsia
Aqua

Consulta la tabella dei colori.

Alcuni tag permettono di specificare un colore come attributo.

In HTML i colori si possono esprimere in due modi:

Struttura di una pagina Web

La pagina Web viene scritta usando il linguaggio HTML (HyperText Markup Language), che consiste in una descrizione dell'aspetto che si vuole dare alla pagina. Il linguaggio Html non è un linguaggio di programmazione.

Il codice HTML può essere scritto tramite il Blocco Note di Windows oppure tramite un editor specifico.

Gli elementi di HTML sono chiamati TAG, o marcatori, e sono racchiusi tra i simboli minore di (<) e maggiore di (>). Normalmente è indifferente scrivere i tag in maiuscolo o in minuscolo. Quasi tutti i tag hanno un corrispondente tag di chiusura, per indicare il punto in cui deve terminare l'applicazione di una caratteristica del testo. Il tag di chiusura ha lo stesso nome del tag di apertura con l'aggiunta del carattere slash:

Esempio:
<body>
...
</body>

Un tag può specificare anche degli attributi (o proprietà).
Esempio: <font size="2">

Gli attributi sono contenuti solo nel tag di apertura. Il valore all'attributo viene assegnato specificandolo tra le virgolette dopo il segno di =.

La struttura di un documento HTML è composta da due sezioni: Intestazione e area del documento:

<html>
<head>

informazioni varie (titolo del documento, autore,
argomenti trattati, stili, ecc..)

</head>
<body>

In questa sezione viene inserito tutto quello che
deve apparire nell'area principale della finestra del browser.

</body>
</html>

Commenti

un commento inizia con la sequenza di caratteri

<!--

ed è terminato con la sequenza:

-->

I commenti servono all'autore della pagina per inserire dei promemoria che non devono essere mostrati nel browser

il documento

Il tag <body> descrive il documento, cioè il contenuto della pagina web.
attributi del tag body:

L'uso di questi attributi è stato dichiarato deprecato, cioè si suggerisce di ricorrere ai fogli di stile e di non usare gli attributi.

intestazione del documento

il tag <head> viene collocato nella parte iniziale del codice html del documento

contiene la descrizione del documento, quale ad esempio, l'autore, i riferimenti agli script e ai fogli di stili esterni, ecc.
il contenuto della sezione head non viene mostrato dal browser

Attributi del carattere

grassetto
Il tag <b> (Bold) applica il <b>grassetto</b> al testo compreso tra i tag b.

applicare il corsivo
Il testo da mostrare in corsivo viene racchiuso tra i tag <i> (italic)

il seguente esempio mostra un testo in <i>corsivo</i>

Il browser mostra un testo in corsivo

ingrandire il carattere
il tag <big> aumenta l'altezza del font.

il testo compreso tra i tag <big> viene mostrato ingrandito </big>

Il tag big applica la dimensione del font immediatamente superiore a quella in uso. I tag big possono essere nidificati.

ridurre l'altezza del testo
Esempio:
Il testo racchiuso tra i tag small <small> viene mostrato con un'altezza minore </small>

il browser mostra:
Il testo racchiuso tra i tag small viene mostrato con un'altezza minore

Tipo del carattere Il tag <font> permette di cambiare il tipo del carattere ad esempio il tag

<font face="Courier New">

mostra la parte di testo che segue, fino alla chiusura del tag, con il carattere Courier New
Altri attributi del tag font: size e color

stile H1

stile H2

...
stile H6

Titoli

Per assegnare uno dei titoli predefiniti ad un paragrafo si usa il tag <hn> ... </hn>, dove n è un numero compreso tra 1 e 6.

Ci sono 6 stili per i titoli: da h1 ad h6.

L'ordine della numerazione si riferisce alla gerarchia degli argomenti. Ad esempio si sceglie il titolo H1 per il titolo del capitolo, si sceglie il titolo H2 per i titoli dei paragrafi contenuti nel capitolo, e così via.

Esercizio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Lezioni di HTML</title>
</head>

<body bgcolor="#80A055">
<h6>introduzione al linguaggio HTML</h6>
<h1>Pagina Web di prova</h1>
<h6>Provare i tag</h6>
<p>
i tag <p> ... </p> delimitano un <i>paragrafo</i>, ovvero una sezione 
compresa tra due caratteri <i>vai a capo</i>
</p>

<p>
i tag <b> ... </b> delimitano una <b>parte di testo che viene mostrata in grassetto.</b> 
La b del tag è l'iniziale della parola bold, che significa grassetto. 
</p>;

i tag <i> ... </i> delimitano una <i>parte di testo che viene mostrata in corsivo.</i> 
La i del tag è l'iniziale della parola italic, che significa corsivo.
</p>

<p> 
i tag <big> ... </big> delimitano una <big>parte di testo che viene 
mostrata in una dimensione ingrandita.</big> I tag possono essere nidificati.
</p>

<p> 
i tag <small> ... </small> delimitano una <small>parte di testo che viene 
mostrata in una dimensione ridotta.</small> I tag possono essere nidificati.
</p>

</body>
</html>

Problemi:
Modificare il colore di sfondo usando altre combinazioni di colori RGB, oppure usare i nomi mnemonici (ad esempio "gray")

Creare un'immagine (gif o jpg) di dimensione 80x80 pixel (ad esempio un quadrato) e salvarla nella stessa cartella della pagina web. Usarla poi come immagine di sfondo.

Inserire un tag font per modificare il colore di una parte del testo.

Utilizzare i tag big nidificati per ottenere un effetto del tipo: ABCDEFG

Musica, Video, ...

Il tag <embed> inserisce un oggetto.

ad esempio inserendo il tag:

<embed src="musica.mid" autostart="true" hidden="false" loop="false">

Quando la pagina viene aperta inizia un brano audio e compare una barra che permette di fermare la riproduzione del brano.

il tag img

Inserimento di immagini nella pagina Web.

sintassi:

<img src="indirizzo" alt="messaggio" title="descrizione">

mostra un'immagine.
Il tag img non possiede il tag di chiusura.

Attributi del tag img:

Attributi di paragrafo

inserire una linea
Il tag: <hr> (Horizontal Rule) inserisce una linea orizzontale, il cui scopo potrebbe essere quello di evidenziare una separazione tra sezioni del documento.

Il tag hr non possiede il tag di chiusura.

Attributi del tag hr sono:

Allineamento a centro

Il tag <center> ... </center>
mostra il testo al centro della riga successiva.

<center>testo centrato</center>

alcuni tag riconoscono l'attributo ALIGN che specifica l'allineamento. Il tag <CENTER> consente di allineare a centro un blocco di contenuto, evitando di specificare l'allineamento di ciascun elemento.

Il valore dell'attributo ALIGN di un tag ha la priorità sull'allineamento specificato con il tag <CENTER>.

Passare alla riga successiva

il tag <br> (line break) Inserisce un vai a capo, senza aggiungere spazi.

Il tag BR Non richiede il tag di chiusura.

Incorniciare l'immagine:

Dopo il tag IMG c'è il testo di questo paragrafo. Solo la prima linea del paragrafo si trova allineata con l'immagine. Se si inserisce un tag BR l'immagine e il testo occupano righe separate. Ci sono situazioni in cui si desidera che il testo si trovi accanto all'immagine.

Ad esempio, in questo paragrafo l'immagine è allineata a sinistra.

Le linee del testo vengono scritte sul lato destro dell'immagine e continuano al di sotto dell'immagine. Per ottenere questo effetto, è stato assegnato il valore LEFT alla proprietà ALIGN del tag IMG.

Questa è una linea separata dal paragrafo precedente.

In questo paragrafo l'immagine è allineata a destra (con l'attributo ALIGN="RIGHT"), segue il testo

Questo testo inizia su una nuova linea.

SPAN

Il tag SPAN delimita un testo a cui si vogliono modificare le proprietà attualmente applicate al testo.

Esempio:

Questo è un normale paragrafo. Sembra scritto bene, ma potrebbe essere migliorato se fosse in grassetto, corsivo, blu.

Esempio:
<P>Questo è un normale paragrafo. Sembra scritto bene, ma potrebbe essere migliorato se fosse <SPAN STYLE="color:blue; font-weight:bold; font-style:italic"> in grassetto, corsivo, blu </SPAN></p>

Problemi

Riferendosi al testo di esempio del problema precedente:

Allineare al centro tutti i titoli della pagina (tag h1 e h6)

Dopo l'ultimo titolo inserire una linea che occupi la terza parte della finestra, abbia uno spessore di 3 pixel e sia di colore rosso.

Inserire un'immagine e fare in modo che il testo compaia su uno dei lati, destro o sinistro, dell'immagine.