Libero
liceali2005teoriacorsoHTMLlezione5.htm

Head e Body

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 poter essere visti dai motori di ricerca e aggiungeremo alcuni attributi per il tag <body> in modo da estendere questi attributi all'intero documento e non soltanto al singolo tag.

Head

Iniziamo con i MetaComandi, ovvero tags letti dalla sola rete e che non produrranno alcuna variazione visiva al nostro lavoro, che ci siano o meno sarà ininfluente ma se il sito deve essere "scovato" dai motori di ricerca sarà indispensabile farne uso.

Questi metacomandi sono diversi e per svariati utilizzi, potete vederli raccolti su questa pagina:- Meta Tag - Io credo che soltanto tre siano veramente importanti e utili ai fini di essere rintracciati meglio dai motori di ricerca, in fondo all'elenco dei metacomandi raggiungibile dal link sopra,  trovate un modulo per generare automaticamente  questi tre meta comandi in maniera tale da personalizzarli  in base all'argomento trattato dal  vostro sito.

Cosa sono i motori di ricerca ?
Quando andate sulla rete 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 non potrebbe elencarla insieme a tutte le altre che trattano l'argomento ricercato.

Per questo motivo è opportuno specificare nella pagina iniziale index.html almeno un minimo di informazioni relative al sito da iscrivere, lo si fa con questi 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="xxxxxx" content="yyyyyy">



Dove al posto di xxxxxx andrà messo il nome del metacomando e al posto di yyyyyy il suo contenuto o descrizione.

Come dicevo  i metacomandi realmente importanti a mio avviso sono tre: titolo (title) , descrizione (description), parole chiave (key words). Vediamo la loro sintassi e a cosa servono:

<META NAME="DC.Title" CONTENT="Mio Titolo">

Si adopera per il titolo del documento, quindi al posto di "Mio Titolo" mettete il titolo della vostra pagina o del vostro sito.

<META NAME="description" CONTENT="La descrizione del sito o della pagina">

Si adopera per la descrizione, è questo che vi identifica realmente, 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, spesso si adoperano parole diverse che hanno però lo stesso significato cercando di interpretare e 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 "Java Script". 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, potrei dire indispensabile.

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

 

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:

<html>
<head>
qui i comandi meta
</head>
<body>
tutto quello che serve nel corpo del documento
</body>
</html>


Concluderei la sezione HEAD dicendo che al suo interno trovano posto anche altri elementi (tags) relativi ai - fogli di style - e al codice di programmazione sotto forma di - script -, non ritengo sia il caso di parlarne adesso, o meglio non in questa rubrica almeno, ma se visitate i links relativi  troverete comunque tutte le informazioni necessarie al loro utilizzo.



Body

Il tag <body>che dichiara l'inizio del corpo del documento, supporta diversi attributi con parametri che se inseriti saranno estesi all'intero documento e non al singolo tag, vediamo i principali:

bgcolor = nome del colore di sfondo a tinta unita.
background = nome dell'immagine gif o jpg 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, ovviamente se si decide per bgcolors non potremo fare uso anche di background e viceversa, visto che uno escluderebbe di fatto  l'altro; 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">



Questa dichiarazione di attributi nel body imposterà uno sfondo a tinta unita di colore green (verde) con una distanza dal margine superiore e inferiore di 10 pixel, una distanza dai bordi laterali sinistro e destro di 5 pixel, il colore dei links anziché seguire il colore di default (quello impostato automaticamente che è blù) sarà di un porpora per i links non ancora visitati e di un fucsia per quanto riguarda quelli già visti o cliccati.
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.

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.

Da qualche anno ormai i moderni browser fanno uso dei CSS ovvero i fogli di style 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 di approfondire l' argomento può andare sulla guida CSS ma sono certo che la comprensione di questi fogli di style sia più facilmente possibile soltanto se si sono capiti bene i meccanismi e lo scopo degli attributi 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 rendono la pagina divisa in due o più finestre in modo tale da avere una struttura ottimizzata del tipo: pagina menù laterale o superiore fissa, pagina principale sulla quale alternare i vari links della pagina menù, praticamente la stessa struttura che adoperiamo con questo nostro sito.

 
Lezione Precedente   Lezione Successiva