Abbiamo visto in una precedente guida strettamente correlata ossia XHTML quali sono i mattoni di questo standard ora iniziamo a vedere come realizzare una buona pagina web, ossia come struturala.
Come abbiamo visto tutto il codice html che va a comporre la pagina si trova fra i tag
<html> <head> ........... </head> <body> ..... </body> </html>
che viene suddiviso in due sezioni l’intestazione o head e il copo vero e propio della pagina che si chima body. Nell’instestazione sono conetenute tutta una serie di elementi che riguardano la pagina nelo loro insieme, come i fogli di stile o CSS, i programmi Javascript, le parole chiave…etc..etc. Nel corpo della pagina Body, si vanno invece a posizionare tutti i contenuti, cioe’ quelli che poi in definitiva avanno a formare il layout della pagina sterssa. . Nel tag html è possibile inserire la definizione del tipo di documento ossia la standardizzazione che si sta utilizzando, per esempio se visualizzate il codice di questa pagina troverete che questa pagina è stata scritta con
<!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">
Ossia seguendo i dettami che sono propri dello standard organization della www.w3.org., nel momento in cui scriviamo questa guida siamo gia’ arrivati alla versione 1.1, che ovviamente è sempre stata standardizzata dalla w3. Si parla di standardizzazione con motivo di causa in quanto per scrivere una pagina web ben formattata usando XHTML dobbiamo obbedire a queste regole che permettono ad ogni server di interpretare il codice (pagina web ) in esso caricata, altrimenti lo stesso non verrebbe riconosciuto e non darebbe i risultati voluti.
Abbiamo definito nella pagina precedente l’elemento head di xhtml come intestazione vediamo un attimo piu’ in dettaglio di cosa si tratta. Al suo interno troveremo il tag Title. Si tratta proprio del titolo della pagina, che viene visualizzato dal browser come titolo appunto della pagina web. E’ quello di cui i motori di ricerca tengono maggiormente conto al fine di indicizzare al pagina stessa. Ci sono pero’ anche altri elementi altrettanto importanti e sono i meta tag. Vediamone una carrellata per capire cosa sono ed i loro usi
Tag dei CSS fogli di Stile
- Title serve ad inserire il titolo della pagina <title> Titolo della pagina </title>
- Description serve per definire una descrizzione della pagina che verrà utilizzata poi dai motori di ricerca, si consiglia di non superare i 150 caratteri in quanto è questa la dimensione utilzzata da google.
- Keywords serve per inserire le parole chiave di cui tratta la tua pagina web, quindi dovranno essere il piu’ attinenti possibili al contenuto. Google tiene conto solamente delle prime 5.
- Rivisit -Afert serve per permette di impostare i giorni che devono trascorrerre prima che il bot (per esempio il motore di ricerca di google ) ritorni a visitare il documento, anche se è solo un tag molto indicativo, ossia che non viene preso in particolare conto dai motori di ricerca.
- Robots permette di specificare allo spidere se indicizzare o meno un determinato documento, oppure se è finita l’indicizzazione dello stesso , di continuare all’interno delle pagine da esso linkate. la sua sintatssi è la seguente <meta name= “robots” content=”all” /> Mentre questi sono i possibili valore che puo’ contenere l’attributo contentindex indicizza la pagina che il riporta il meta tag;
- follow passa anche alle pagine successive;
- noindiex non indicizzare la pagina;
- nofollows non seguire i link presenti nel documento;
- noarchive il robot indicizzera’ la pagina e seguirà il link , ma non l’archiviera’ , nel caso specifico di googgle al apagina sara’ dispoinibile in versione cache
- Author Identifica l’autore che ha compiuto la pagina dove si sta navigando
- Owner indica il proprietario del sito
- Copyright persona o società che detengono il copyright del sito
- Reply -to indica a coloro che utilizzano il sorgente della pagina l’email di contatto, molto poco utilizzata
- Generator indica il software utilizzato per generare al pagina
- Accessibility Level E’ usato per fare conoscere agli utenti il livello di accessibilità raggiunto dal documento che si sta visitando, secondo le specifiche WCAG (Web Content Accessibility Gudielines) personalmente non ricordiamo di averlo mai utilizzato una volta, comq esistono al momento della scrittura di questa guida tre livelli che sono A, AA, AAA, che indica la totale o meno aderenza, maggiori sono le A e maggiore è l’aderenza
- Classification Permette allo sviluppatore di scegliere la categoria di appartenza del sito , a secondo dei contenuti dello stesso
Questi sono solamente i meta tag piu’ importanti, ce ne sono anche altri che pero’ riguardano anche il linguaggio inteso in senso piu’ stretto , ma prima di mostrarveli vi facciamo vedere degli esempi di questi.
Facciamo adesso un esempio comulativo di tutto quanto abbiamo detto.
<html> <head> <title> Titolo della pagina </title> <meta name ="descripition" Content =" Qui mettiamo la descrizione della pagina"> <meta name="keywords" Content="nome, pagina, esempio, guida, css"> <meta name="description" Content ="Descrizione alternativa della pagina per indicare al server che qui troverà solamente delle pagina in italiano" lang="it"> <meta name="revisit-after" content ="20 days" /> <meta name="robots" content ="all" /> <meta name="Author" content ="Antares big Cavaliar"/> <meta name="Owner" content ="Gruppo associato" /> <meta name="Reply-to" content ="Email fittizia" /> <meta name="Generator" content="Notepad" /> <meta name="Classification" content ="Programmatore Web"> <meta name="Accessibilty-Level" content="A"/> </head> <body> ....... ....... </body> </html>