Dopo aver visto quali sono gli strumenti necessari possiamo iniziare a fare qualcosa di veramente concreto, creiamo nel nostro PC una nuova cartella dove andremo a salvare tutti i nostri files ed assegnamogli un nome, quello che volete, magari xhtml.

I TAGS, o elementi, che compongono XHTML devono essere racchiusi fra parentesi angolari <queste>

Si tratta di parole chiave, termini riservati in lingua inglese, da qui la quasi totale inutilità del volersi procurare a tutti i costi un editor html in italiano. L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra laterale / contenuta sempre all'interno delle parentesi angolari. Tutti i tags necessitano di essere chiusi nessuno escluso.

L'inizio di un documento XHTML avrà come elemento iniziale un DTD:

<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 xxxxx//EN"

dove al posto di quelle xxxxx dovrà essere usata una delle tre possibili specifiche: Strict, Transitional, Framest. Non è un tag vero e proprio e serve per impartire al browser direttive precise sullo standard al quale dovrà fare riferimento il codice che seguirà, è obbligatorio usarlo per essere certi che il risultato sia il più possibile uguale per qualsiasi tipo di browser adoperato, non trattandosi di un vero elemento (tag) è anche l'unico che non necessita di alcuna chiusura finale ed è scritto in maiuscolo, cosa che non deve essere fatta per nessuno degli altri elementi.

<html>

e come elemento (tag) finale di chiusura

</html>

come ho detto sopra dovranno essere scritti in lettere minuscole, tutto ciò che sarà contenuto all'interno di questi due elementi (tags) sarà interpretato dal browser come codice HTML e grazie al DTD specificato precedentemente seguirà le definizioni appropriate di XML, meglio allora se aggiungiamo il riferimento preciso in modo che diventi:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

Un documento XHTML è composto da due sezioni ben distinte: una parte iniziale denominata testa (head)

<head>

ed una centrale denominata corpo (body)

<body>

Nella testa (head) vanno messi quei comandi che inviano informazioni al server (lo spazio web che si trova in rete) come il titolo, i comandi Meta Tags e quel codice che deve essere letto con una certa priorità: scripts e fogli di style interni o esterni che decideremo di adoperare. Nel corpo (body) tutto il resto.

Tutti gli elementi (tags) necessitano sempre del relativo elemento di chiusura: </head> e </body>

Riassumendo, una struttura XHTML tipo potrebbe essere questa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
</body>
</html>

Chi conosce già html penserà a qualche errore da parte mia perché praticamente non è cambiato nulla fra questa struttura XHTML ed una classica di HTML se non l'aggiunta di quel DOCTYPE iniziale, ed è infatti questa la prima grande novità; un documento XHTML deve necessariamente avere quella dichiarazione (DTD) e ne esistono di tre tipi, dipende dal grado di ristrettezza e/o della struttura che si intende realizzare. Vediamole qui di seguito:


 

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

Specifica l’uso più rigoroso di XHTML, il documento XHTML scritto utilizzando questa doctype non deve fare uso di alcun tag e/o attributo relativo all’aspetto grafico del documento stesso (font, colori, ecc.), l’aspetto grafico è lasciato esclusivamente ai fogli di stile (CSS).

 


 

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

Ammette l’utilizzo dei tags e/o attributi relativi all’aspetto grafico del documento XHTML.

 


 

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

Prevede l’utilizzo dei frames (cornici) nei documenti XHTML.

 


 

Noi adopereremo per i nostri esempi un DTD Transitional ed un foglio di style esterno che vedremo più avanti, per aiutare e non confondere il principiante ho usato un box con una cornice di colore verde per le parti di codice xhtml mentre quelle relative al codice CSS saranno racchiuse in un box con cornice di colore marrone così facendo si saprà subiro a quale delle due parti sto facendo riferimento.

Col nostro editor creiamo la struttura sopra, usiamo magari il mouse facendo l'operazione di copia ed incolla, andiamo poi all'interno degli elementi (tags) <head> ... </head> per inserire il titolo che ha come elementi dichiaranti title e relativa chiusura /title

<title> Titolo della pagina </title>

Assegnamo un titolo alla nostra pagina, questo titolo si leggerà nella cornice superiore del browser, è molto importante ai fini di una buona posizione (indicizzazione) nei motori di ricerca e va usato bene per descrivere al meglio il contenuto della pagina, si dovrebbero usare da un minimo di 5 ad un massimo di 15 parole.
Andiamo adesso all'interno dei tags <body> ... </body> e scriviamo la nostra prima frase, per farlo useremo l'elemento p che significa paragrafo. Apriamo dunque un paragrafo <p> scriviamo un qualsiasi testo: "questa è la mia prima pagina web in xhtml". Chiudiamo il paragrafo </p>. Se tutto è stato fatto correttamente dovremo avere una struttura identica a questa :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title> Titolo della mia pagina Web</title>
</head>
<body>
<p>Questa è la mia prima pagina web in xhtml</p>
</body>
</html>

Non importa come è stato disposto il testo nella frase, possiamo lasciare spazi vuoti o ritornare a capo quante volte vogliamo, nessuna importanza; il browser ignorerà il nostro modo di scrivere limitandosi a leggere ed interpretare soltanto gli elementi validi di xhtml e CSS. (più avanti si vedrà come lasciare spazi e come andare a capo)

A questo punto non resta che salvare il tutto nella nostra cartella creata in precedenza appositamente per questo corso. Se il vostro editor non fosse specifico per html fate in modo di salvare in formato ascii, cioè normalissimo testo puro (txt). Assegnategli un nome, quello che preferite, e salvatelo nel vostro PC. Trattandosi della pagina iniziale sarebbe meglio chiamarla fin da subito index.html (tutto minuscolo e con la elle finale e non il solo htm) perché è questo il nome esatto che di solito il server in rete va a ricercare come pagina iniziale del sito quando viene introdotto il solo URL.

Se non avete un editor che salva direttamente in html con molta probabilità il vostro file avrà un estensione di tipo .txt, ovvio direte voi, visto che è stato scritto con un normale editor per testi. Rinominate questo file in modo che abbia come estensione html altrimenti il browser non riuscirà a capire che si tratta di ipertesto html.

A proposito di questa operazione di rinomina file dovrei fare alcune precisazioni: l'operazione di per se è molto semplice basta cliccare sull'icona del file e rinominare ma chi adopera Windows potrebbe non vedere l'estensione finale del file appena salvato, in questo caso rinominarlo servirebbe a poco dal momento che windows aggiungerebbe si html al nome appena assegnato ma lasciando di fatto il file nel formato originario txt e di conseguenza non funzionerebbe.

Mi rendo conto che non sia molto semplice capire che cosa è stato appena detto specialmente se a leggere è un principiante in senso generale, per chi avesse problemi di questo tipo vi rimando ad un esempio che credo possa chiarire meglio.

Se siete riusciti a salvare il file in html ha come icona quella del browser e questo significa che il sistema operativo lo riconosce come pagina web e lo ha associato al programma per navigare in internet. Fate doppio clik o trascinatelo sul browser aperto e se tutto è stato fatto come si deve si vedrà la sola scritta:

Questa è la mia prima pagina web in xhtml

Difficile ?

No, direi proprio di no, sono certo che pensavate a qualcosa di diverso e decisamente più complesso. Per essere la prima lezione introduttiva credo possa bastare, esercitatevi, soltanto dopo aver compreso questo meccanismo ed aver acquisito quel minimo di familiarità con la creazione ed il salvataggio dei files in formato html potrete passare alle lezioni successive.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.


=> Vuoi anche tu una pagina web gratis? Clicca qui! <=