|
head & 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.
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.
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 adopero io con questo mio Web-Link .
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e
aperto a tutti.
Potete fare domande e discutere l'argomento sul Forum
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
