Linguaggio di Markup HTML: Introduzione

Linguaggio di markup HTML

L'HTML (HyperText Markup Language, linguaggio a marcatori per ipertesi) è un linguaggio di markup che si utilizza per realizzare documenti ipertestuali del World Wide Web.

Il termine  Markup significa l' insieme delle regole che descrivono i processi di rappresentazione in un testo con convenzioni standard. Per comporre un testo con l' uso dei marcatori è necessario rispettare una serie di convenzioni.
In particolare l' Html è un linguaggio  di markup di tipo descrittivo,  vale a dire che la scelta del tipo di rappresentazione da applicare al testo è lasciata al software.
Nelle pagine web al testo può essere assegnata un tag  (etichetta) che ne descrive le  funzione, il colore, le dimensioni, il link o altre caratteristiche.
Le pagine web scritte in HTML vengono processate dal Browser (Navigare in rete: i Browser) che interpretandone il codice, la cui sintassi è stabilita dal World Wide Web Consortium, visualizza all' utente la pagina formattata secondo le scelte che il web designer ha realizzato.

La W3C negli anni ha rilasciato diverse versioni del' HTMl (2.0, 3.2, 4.0), fino ad arrivare all' ultima versione tuttora utilizzata che è l'HTML 4.01, rilasciata il 24 dicembre 1999! Anche se l'HTML rimane un linguaggio standard per realizzare le pagine web, nel tempo ci sono state delle evoluzioni con XHTML e il prossimo HTML5, i.

Il linguaggio HTML viene distinto con il punto HTML (.html) o punto HTM (.htm), che però è  considerata un' estensione deprecata. 

Capito cos'è questo linguaggio in linea teorica, entriamo nel vivo della lezione: abbiamo accennato ai TAG (marcatore), che servono nel linguaggio HTML per realizzare le diverse opzioni di visualizzazione. Hanno dei nomi standard che ne identificano la funzione. In un testo possiamo distinguerli facilmente in quanto sono inseriti in parentesi angolari <TAG>, la chiusura viene determinata con lo slash / in questo modo: </tag>. Tra l' apertura del TAG e la sua chiusura viene inserito il contenuto da formattare:

<TAG  attributi> contenuto </TAG>

Ecco un esempio di testo all'interno di un paragrafo allineato al centro:

<P  align="center"> contenuto </P>

Un TAG HTML puo avere più di un attributo:

<TAG  attributi1  attributo2> contenuto </TAG>

Alcuni TAG HTML possono non avere la chiusura, per esempio il markup per inserire un'immagine (HTML: inserimento di un'immagine):

<IMG SRC="root dell' immagine">

Nell' esempio precedente, dove abbiamo visto come inserire un' immagine in una pagina HTML, l'attributo SRC sta ad indicare la source (sorgente) dove viene caricata l'immagine (per comprendere la differenza tra percorso assoluto e percorso relativo puoi andare su  HTML: link):

  • se la root (radice) è diversa da quella del file HTML dove si vuole inserire l'immagine, dovremo scrivere il percorso che ci guiderà fino alla cartella, dove andremo a prendere l'immagine; tra una cartella e l' altra o tra una cartella ed un' immagine inseriremo uno slash /;
  • se dobbiamo uscire dalla cartella che contiene il file HTML per poi raggiungere un'altra cartella che contiene l'immagine allora useremo all' inizio della root e prima dello slash  due punti: ../cartella/immagine .

Le immagini che possono essere inserite su sito internet possono essere soltanto di tre tipi, utilizzati secondo le diverse esigenze: .gif, .jpg, .png (HTML: inserimento di un'immagine)

Una caratteristica importantissima del codice HTML  è l'annidamento, cioè l'inserimento dei tag uno dentro l'altro, come se fossero 'scatole cinesi', dato che ogni tag che ne contiene un altro deve essere chiuso solo dopo che quello interno è stato chiuso, per esempio:

<DIV  align="center">
      <P  align="center"> testo </P>
</DIV>

 

Oltre ad essere annidati, i TAG HTML sono stati indentati, cioè quelli interni sono stati spostati utilizzando il tasto TAB  della tastiera, questo permette a chi scrive il codice, non solo HTML, di interpretare al meglio le istruzioni annidate.

Abbiamo visto come con l'indentazione e l'annidamento otteniamo un codice  HTML ordinato e più facile interpretabile. Un' altra tecnica che ci consente di avere un codice leggibile, soprattutto quando le pagine HTML diventano molto lunghe, è l'utilizzo dei commenti. Il commento è una parte di codice non visibile dall' utente, utilizzato da tutti i linguaggi script e di programmazione in quanto consente di inserire dei riferimenti all' interno del codice, spiegando velocemente a chi lo interpreta cosa sta leggendo.

In HTML il codice si scrive in questo modo:

<!-- commento -->

dove <!-- è l'apertura del commento e --> ne è la chiusura.

<!-- barra-laterale -->
<div id="sidebar">
<ul>
   <li>... </li>
   <li>contenuto</li>
</ul>
</div>
<!-- /barra-laterale -->

Il linguaggio HTML è case sensitive: i TAG possono essere scritti si in maiuscolo che in minuscolo, non fa nessuna differenza.