Head & Body 

0
42

Nelle lezioni precedenti avete imparato la struttura base di un documento html, se avete seguito attentamente sarete in grado di creare un vostro sito web.

Abbiamo spiegato come inserire testo, immagini e links, adesso vediamo come il nostro sito potrà essere visto meglio dai motori di ricerca ed aggiungeremo alcuni attributi per il tag <body> in modo da estendere questi attributi a tutto il documento e non soltanto al singolo tag.

Head

Iniziamo con i MetaComandi, ovvero i tags letti dalla sola rete e che non produrranno alcuna variazione visiva al nostro lavoro. Che ci siano o meno sarà ininfluente ai fini estetici ma se il sito deve essere “scovato” dai motori di ricerca o dovrà essere validato da W3C, sarà indispensabile farne uso.

I metacomandi sono diversi e per svariati utilizzi, potete vederne molti raccolti su questa pagina: – I MetaTags – dove a fondo pagina (quella del link) trovate un piccolo modulo per generare automaticamente i metacomandi che servono al vostro sito personalizzandoli in base al vostro contenuto. Io credo che soltanto alcuni siano veramente importanti ed utili per essere rintracciati meglio dai motori di ricerca. Voi potete valutare ed inserire tutti gli altri presenti in quella pagina,

Che cosa sono i motori di ricerca?
Quando andate sulla rete internet e cercate qualche argomento neppure vi rendete conto che lo fate consultando un motore di ricerca, se questo non sapesse che esiste anche la vostra pagina web non potrebbe elencarla insieme a tutte le altre che trattano l’argomento ricercato.

Per questo motivo è opportuno specificare nella pagina iniziale, quella dal nome index.html almeno un minimo di informazioni relative al contenuto del sito, lo si fa con questi meta comandi che hanno una sintassi simile a quella degli altri tags adoperati fino ad ora e cioè fra le parentesi angolari inseriremo il metacomando con la seguente sintassi:

<meta name=”xxx” content=”yyy“>

Dove al posto di xxx andrà messo il nome del metacomando ed al posto di yyy il suo contenuto o descrizione.

Come dicevo sopra, i metacomandi veramente importanti (a mio avviso) sono pochi: titolo (title), descrizione (description), parole chiave (key words), decodifica caratteri (charset).

Vediamo la loro sintassi e a cosa servono nello specifico:

<meta name=”DC.Title” content=”Mio Titolo”>

 

Si adopera per il titolo del documento, al posto di “Mio Titolo” mettete il titolo della vostra pagina.

<meta name=”description” content=”La descrizione del sito o della pagina”>

 

Si adopera per la descrizione, è questo che vi identifica realmente in rete, siate precisi nel descrivere cosa tratta il vostro sito.

<meta name=”keywords” content=” le parole chiave separate da virgole”>

 

Si adopera per dare ulteriori informazioni sull’argomento trattato nella pagina, spesso si adoperano parole diverse che hanno però lo stesso significato, cercando così di interpretare ed intuire quello che il visitatore digiterà sul motore di ricerca. Faccio un esempio: chi cerca javascript potrebbe cercarlo facendo uso della parola “Javascript” ma anche con “JS” oppure con “Script Java”. Tutte queste varianti possono essere inserite come keywords (parole chiave) e quindi aiutare nella ricerca. Se ne possono inserire fino a 1000 e dovranno semplicemente essere separate da una virgola e da uno spazio vuoto. Ritengo questo Meta tag il più importante in assoluto dove per certi motori è addirittura indispensabile.

Per chiarire ancora meglio questo concetto vi riporto alcune keywords inserite nei mie metacomandi: editor, pagine, html, corsi, principianti,.

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>

 

Si adopera per specificare il set di caratteri usato all’interno della pagina. In questo esempio quello di windows-1252 molto adoperato il charset=iso-8859-1.

ATTENZIONE Questi metacomandi dovranno essere inseriti soltanto nella prima parte della struttura, e precisamente fra i tags <head> e </head>, e non nel body come avete fatto fino ad ora. Riprendendo lo schema della prima lezione:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
  <head>
  qui i comandi meta
  </head>
  <body>
qui immagini, testi, links
  </body>
</html>

Concluderei la sezione Head dicendo che al suo interno trovano posto anche altri elementi (tags) quali richiami o dichiarazioni per i fogli di style e codice di programmazione sotto forma di script , non ritengo sia il caso di approfondire questo argomento adesso, non in questa rubrica almeno, ma se visitate i due links sopra troverete comunque tutte le informazioni necessarie al loro utilizzo.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
  <head>
<meta name=”DC.Title” content=”Il titolo”>
<meta name=”description” content=”La descrizione della pagina”>
<meta name=”keywords” content=” le parole chiave separate da virgole”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252“>
  </head>
  <body>
qui immagini, testi, links
  </body>
</html>

 

Body

Il tag <body>, che dichiara l’inizio del corpo del documento, supporta diversi attributi con relativi parametri che se inseriti direttamente in questo tag saranno estesi all’intero documento dal momento che body fa riferimento a tutto il documento e non soltanto ad una sua parte specifica.

Vediamo gli attributi principali:

bgcolor=”nome del colore di sfondo a tinta unita”.
background=”nome dell’immagine gif, jpg o png di sfondo”.
topmargin=”distanza in pixel dal margine superiore”.
bottommargin=”distanza in pixel dal margine inferiore”.
leftmargin=”distanza in pixel dal margine sinistro”.
rightmargin=”distanza in pixel dal margine destro”.
link=”colore dei links”.
vlink=”colore dei links visitati”.
text=”colore del testo”.

Possono essere inseriti tutti o soltanto quelli ritenuti necessari, se si decide per bgcolor non potremo fare uso anche di background o viceversa, dal momento che uno escluderebbe logicamente l’altro, a meno che non si faccia uso di immagini con zone in trasparenza che lascerebbero vedere il fondo sotto. La sintassi è lasciare uno spazio vuoto e racchiudere fra doppi apici ” “ il valore dell’attributo.

Un esempio:

<body bgcolor=”green” topmargin=”10″ bottommargin=”10″ leftmargin=”5″ rightmargin=”5″ link=”purple” vlink=”fuchsia” text=”#4f4f4f”>

 

Questa dichiarazione di attributi nel body imposterà uno sfondo a tinta unita di colore green (verde) con una distanza dai margini superiore ed inferiore di 10 pixel, una distanza dai margini laterali sinistro e destro di 5 pixel, il colore dei links anziché essere del colore di default (quello impostato automaticamente che è blu) sarà porpora per i links non ancora visitati e fucsia per quanto riguarda quelli già visitati o cliccati, ed infine il colore del testo: grigio scuro.
I colori possono essere espressi oltre che col nome in lingua inglese anche dall’equivalente numero in base esadecimale nelle classiche sei cifre precedute dal simbolo # (pound o cancelletto). Una vasta scelta di colori la trovate su questa pagina della guida html.

Con questa lezione avete imparato ad introdurre i metacomandi per i motori di ricerca e gli attributi del body, siete finalmente pronti per trasferire il sito sul server, cioè on-line. C’è ancora molto da imparare ma già così le vostre pagine hanno tutto il necessario per essere gradevoli e soprattutto leggibili: testo, immagini e links.

Nota: Da qualche anno ormai i moderni browser fanno uso dei CSS, ovvero i fogli di style a cascata. All’interno dei quali è possibile specificare gli attributi come quelli che in questa lezione sono stati assegnati all’elemento body. Sono una vera comodità, chi avesse intenzione di farne uso o semplicemente volesse approfondire l’argomento potrà consultare la guida CSS ma sono sicuro che per comprendere bene l’uso dei fogli di style si debba prima aver compreso il meccanismo degli attributi di html che, come in questo caso, sono stati assegnati all’elemento body.

Nella prossima lezione vedremo come strutturare il sito facendo uso dei FRAMES cioè quei riquadri con cornici che suddividono la pagina in due o più finestre, struttura che si rende particolarmente comoda e versatile nel caso di: pagina menù laterale o superiore fissa, pagina principale sulla quale alternare i vari links della pagina menù, praticamente la stessa struttura che adopero io con www.web-link.it dove ho un terzo frame per la sola musica.

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

CONDIVIDI
Articolo precedenteCaratteri speciali, fonts e cosmesi del testo 
Prossimo articoloI Frames ovvero i riquadri, le cornici
La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here