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 html PUBLIC “-//W3C//DTD XHTML 1.0 xxxxx//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-xxxxx.dtd”>
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à. Il suo uso si rende obbligatorio 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 relativo 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 inseriti soltanto quei comandi che forniscono informazioni ai motori di ricerca, quali: meta comandi, titolo, ecc. oltre a tutto il codice che deve essere letto con una certa priorità: script, dichiarazioni di style, ecc. ecc. Nel corpo (body) invece, 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:
Chi conosce già un poco di html penserà a qualche errore da parte mia perché praticamente non è cambiato nulla fra questa struttura XHTML ed una classica di HTML se non per l’aggiunta di quel DOCTYPE iniziale, ed è infatti questa la prima grande novità; un documento XHTML deve necessariamente avere quella dichiarazione (DTD), ne esistono di tre tipi, quale adoperare dipende solo dal grado di ristrettezza e/o dalla struttura che si intende realizzare. Vediamo le specifiche qui di seguito:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Strict: 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”>
Transitional: Ammette l’utilizzo dei tags e/o attributi relativi all’aspetto grafico del documento XHTML. Se non si hanno particolari specifiche meglio utilizzare questo che rende la vita decisamente più semplice per tutto.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Frameset: 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à subito 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 :
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 per rinominare 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 questo ha come icona quella del browser che significa che il sistema operativo lo riconosce come pagina web e l’ha associato al browser, 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:
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. Ovviamente se adoperate un editor per html il salvataggio del file avviene già di suo in html e voi dovete scegliere soltanto il nome da assegnare alla pagina.
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.