Tecnologia di Internet
 
Il linguaggio HTML
Liste numerate e non numerate in HTML. HTML è il linguaggio di formattazione del testo (da non confondere con un linguaggio di programmazione) utilizzato per descrivere pagine web. Oltre alle istruzioni di formattazione del testo, con HTML si possono creare collegamenti ipertestuali, inserire immagini, suoni e animazioni. L’evoluzione di HTML è molto rapida,e spesso le implementazioni hanno preceduto gli standard ufficiali. Ecco una minicronologia delle varie versioni di HTML.
  • 1989: Prima proposta di un sistema ipertestuale (Tim Berners-Lee)
  • 1991: HTML (1)
  • 1993: HTML + (mai standardizzato)
  • 1994: HTML 2
  • 1994: HTML 3 (mai standardizzato)
  • 1996: HTML 3.2
  • 1997: HTML 4
  • 2000: XHTML 1
HTML
Per indicare la formattazione del testo e tutte le altre caratteristiche della pagina, HTMl utilizza i cosiddetti tag, cioè metaindicazioni per la formattazione del testo e per dirigere il rendering da parte del browser.

Ecco un documento HTML molto breve ma completo

    <HTML>
    <HEAD>
    <TITLE>Esempio 1</TITLE>
    </HEAD>
    <BODY>
    <H1>Esempio 1</H1>
    Un documento molto poco interessante.
    <P>Secondo paragrafo di questo documento poco interessante che contiene un
    <A HREF=”un_altro_documento.html”>link ad un altro documento</A> poco interessante.
    <BODY>
    </HTML>

Queste istruzioni vengono registrate in un file di testo. Aprendo questo file di testo con un browser, per esempio Netscape Navigator, si ottiene la finestra riportata qui sotto.

Pagina generata dalle istruzioni HTML riportate in alto.

Un documento HTML consiste di testo con tag. I tag non appaiono nella finestra visibile all’utente, ma silenziosamente, dietro le scene, guidano il browser nella visualizzazione del testo.

I tag sono contenuti tra parentesi angolari, come <P>. Spesso, ma non sempre, un tag è fatto di due parti; apertura e chiusura, come <TITLE> e </TITLE>. In HTML, maiuscole e minuscole non contano, così come non contano le andate a capo e gli spazi dopo il primo.

Una pagina HTML inizia con un tag di apertura <HTML> e finisce con un tag di chiusura </HTML>. All'interno di questo tag ci sono due altri tag: il tag di apertura <HEAD> con il corrispondente tag di chiusura </HEAD> e il tag di apertura < BODY> con il corrispondente tag di chiusura </BODY>. Quindi un documento HTML consiste di due parti: l’head (la testata) e il body (il corpo).

<HEAD>

La testata di un documento HTML è compresa tra il tag di apertura <HEAD> e il tag di chiusura </HEAD> e contiene una serie di informazioni che non verranno visualizzate all’interno della pagina, per esempio il titolo della pagina

    <TITLE>Esempio 1</TITLE>

e altre eventuali informazioni come l’autore della pagina, il programma con cui è stata creata, le parole chiave per i motori di ricerca e così via.

<BODY>

Il documento HTML vero e proprio, cioè la parte che verrà visualizzata nella finestra del browser, è compresa tra il tag di apertura <BODY> e il tag di chiusura </BODY>. In questa zona appare il testo da visualizzare con le informazioni per la sua formattazione.
Aspetto del testo e link
Il testo normale, che non viene compreso tra due tag, appare con un corpo e una font prestabilite nelle preferenze del browser.

I tag <H> sono sei tag che consentono di formattare il testo, normalmente per farne dei titoli, in sei modi diversi.

Per esempio, queste istruzioni HTML generano la pagina illustrata più sotto:

    <html>
    <head>
    <title>tag H.hml</title>
    </head>
    <body>
    Testo normale scritto senza tag di nessun genere
    <h1>Titolo in formato H1</h1>
    <h2>Titolo in formato H2</h2>
    <h3>Titolo in formato H3</h3>
    <h4>Titolo in formato H3</h4>
    <h5>Titolo in formato H3</h5>
    <h6>Titolo in formato H3</h6>
    </body>
    </html>
Pagina generata dalle istruzioni HTML riportate in alto.

Questi tag consentono di formattare ulteriormente il testo

  • <B> e </B> bold, cioè neretto
  • <I> e </I> italic, cioè corsivo
  • <U> e </U> underline, cioè sottolineato
  • <TT> e </TT> teletype, cioè carattere non proporzionale
  • <SUB> e </SUB> subscript, cioè deponente (pedice), come in H2O
  • <SUP> e </SUP> superscript, cioè esponente (apice), come in mc2

Ci sono due tag per andare a capo

  1. <BR> ritorno a capo
  2. <P> nuovo paragrafo

Per creare un link testuale si usa il tag <A HREF=destinazione dl link>testo</A>
Liste
In HTML si possono generare liste non numerate e liste numerate. Ecco un esempio di entrambe:

    <UL>
    <LI>Aventino
    <LI>Campidoglio
    <LI>Celio
    <LI>Esquilino
    <LI>Palatino
    <LI>Quirinale
    <LI>Viminale
    </UL>

    <OL>
    <LI>Romolo
    <LI>Numa Pompilio
    <LI>Tullio Ostilio
    <LI>Anco Marzio
    <LI>Tarquinio Prisco
    <LI>Servio Tullio
    <LI>Tarquinio il Superbo
    </OL>
Tabelle
HTML permette di definire tabelle con righe e colonne utili per la visualizzazione di dati in colonna ma anche necessari per l’impaginazione del testo e delle immagini: in effetti l’uso delle tabelle è l’unico modo di impaginazione esistente in HTML. Ecco come appare una.tab in Netscape Navigator. In realtà, se la tabella si usa per impaginare, il web designer farà in modo che i bordi non si vedano.
Qui sopra, visualizzazione di una tabella HTML in Netscape. I bordi hanno spessore di 3 pixel, ma in realtà verranno resi invisibili (0 pixel) Per creare una tabella si usa il tag <TABLE> e </TABLE> che contiene un tag <TR> e </TR> per ogni riga, il quale a sua volta contiene un tag <TD> e </TD> per ogni colonna. La struttura della tabella presentata qui sopra è quindi

<TABLE>
<TR><TD>cella 1</TD><TD>cella 2</TD><TD>cella 3</TD></TR>
<TR><TD>cella 4</TD><TD>cella 5</TD><TD>cella 6</TD></TR>
<TR><TD>cella 7</TD><TD>cella 8</TD><TD>cella 9</TD></TR>
</TABLE>
XHTML
HTML 4 e i suoi predecessori sono definiti sulla base di SGML (Standard Generalized Markup Language), un metalinguaggio stabile e ben definito che consente di creare altri linguaggi di formattazione. SGML è molto potente e flessibile, ma è proprio questo che gli ha impedito di avere una vasta diffusione. Flessibilità e potenza si traducono, in SGML, in un livello di complessità che ne rende difficile la comprensione.

Così HTML è stato riscritto sulla base di XML (Extensible Markup Language), un sottoinsieme di SGML creato per Internet (i documenti XML sono documenti SGML). XML è un linguaggio più semplice di SGML (per dare un’idea, la documentazione di SGML è di circa 500 pagine, quella di XML di 30 pagine) e contiene tutto quello che può servire su Internet.

Il 26 gennaio 2000 sono state pubblicate le specifiche di XHTML (Extensible HyperText Matkup Language). Si tratta di una riformulazione di HTML 4 in termini di XML e può già funzionare con i browser esistenti.

XHTML è il primo passo verso un linguaggio per il web estensibile e modulare. E' molto simile a HTML 4 con qualche eccezione di rilievo, tra cui

  • tag e attributi devono essere scritti in minuscolo (<td bgcolor="#ffcc33">)
  • gli elementi devono nidificarsi, non sovrapporsi (<p>Be <b>bold!</b></p>)
  • tutti gli elementi non vuoti devono essere chiusi (<p>First paragraph</p>)
  • gli elementi vuoti devono essere terminati (<br />)
  • il valore di un attributo va tra virgolette (<img ... border="0" />
  • le coppie attributo-valore non possono essere minimizzate (<option ... selected="selected">)

La struttura di base di un documento XHTML è

    <!DOCTYPE ...>
    <html ... >
    <head> ... </head>
    <body> ... </body>
    </html>

e un documento minimale è questo:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Minimal document</title>
    </head>
    <body>
    <p>
    <a href="http://validator.w3.org/check/referer"> validate</a>
    </p>
    </body>
    </html>
Riferimenti online
   
Home | Commenti a Mauro Boscarol | Ultimo aggiornamento 22 dicembre 2000