HTML
Iniziamo dunque ad entrare nel vivo della questione! Come è strutturato un file .html? Innanzitutto un file .html non è altro che un semplice file di testo che ha, come estensione, .html o .htm. Tale estensione fa sì che il file venga riconosciuto dal browser ed interpretato dal suo motore di rendering in modo appropriato. Il motore di rendering non fa altro che prendere i tag, riconoscerli, e mostrare il documento correttamente formattato secondo le specifiche dettate dal w3c. Nelle appendici parleremo diffusamente della storia del web e della guerra tra i browser prima e della guerra tra gli standard poi.
Vogliamo allora provare a scrivere un file html? Possiamo usare qualsiasi editor di testo, anche il semplice BloccoNote di Windows può andar bene. Dopo averlo scritto, però, dobbiamo salvarlo con estensione .html, questa è l’unica cura che dobbiamo avere.
 
Quindi, il nostro primo file html avrà questa struttura:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titolo del nostro documento</title>
    </head>

    <body>
    </body>
</html>

Dopo aver salvato il file, facendovi doppio click, dovreste vedere apparire una pagina completamente bianca nel vostro browser predefinito e, nella barra del titolo, il titolo che avrete inserito tra i tag TITLE. Analizziamo ora questa struttura che, seppur minimale, ci può già dare un’idea di come impostare le nostre pagine html.
Ogni documento html deve necessariamente iniziare con un DOCTYPE. Esso indica il tipo di documento che stiamo scrivendo ed indica al browser come comportarsi. Ora, come si può vedere, esso è davvero breve, indicando solo che si tratta di un documento HTML, ma prima, la stringa che identificava il documento, era abbastanza lunghetta (non bisognava certo impararla) e, per ogni numero di versione dell’HTML/XHTML esistevano più doctype, indicanti i vari tipi (es. XHTML strict, transition e via dicendo). Con l’avvento di HTML5 il doctype si è ridotto così come lo potete vedere ora. Tale tag non ha bisogno di essere chiuso.

Il tag HTML è il perno di un documento html ed indica, appunto, che sta iniziando un documento html. Viene aperto all’inizio del documento e chiuso alla fine dello stesso, dopo che tutto è stato scritto al suo interno. Un documento html a sua volta è suddiviso in due macro categoria, ognuna delle quali delimitata da una coppia di tag. La prima è l’HEAD e la seconda è il BODY. Come si può intuire dal nome stesso dei vari tag, essi identificano, rispettivamente, l’intestazione del documento, dove sono racchiuse informazioni che non saranno visualizzate, ma che saranno utili ad una corretta interpretazione da parte del browser del documento, e il corpo del documento, dove saranno racchiusi i tag e il contenuto vero e proprio del file che sarà visualizzato a schermo.
Andiamo con ordine però e analizziamo il tag META presente nell’HEAD. In questo caso esso identifica il tipo di set di caratteri utilizzato all’interno del nostro sito. E’ buona norma utilizzare quello inserito in questo esempio, l’UTF-8, che è quello più “standard”. In questo modo non avremo problemi di visualizzazione su computer con lingue diverse. In appendice poi tratteremo vari esempio di META tag, utili ai fini dell’indicizzazione del nostro sito e per tante altre belle cosucce!
All’interno dell’HEAD c’è anche la coppia di tag TITLE che racchiude, come il nome suggerisce, il titolo del nostro sito, quello che verrà visualizzato in alto sul nostro browser. Per questo tag non c’è molto altro che si possa dire!

Il BODY è il corpo del sito e tutto quello che verrà inserito tra il tag di apertura e di chiusura, sarà visualizzato nel browser. Nelle prossime lezioni “riempiremo” il bianco della pagina appena salvata ed inizieremo a creare una struttura per il nostro sito.
Cercate di non mancare!

Share