La struttura del foglio html, head, title, metacomandi e body, le caratteristiche principali html.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 25 Feb 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Struttura HTML:

Ogni programma html inizia con un foglio chiamato "index.html". Questa è la base fondamentale per l'inizio di ogni programma. il server riconoscerà la pagina "index" come la pagina iniziale del sito, ed inizierà richiamandola tutte le volte che un utente vuole caricare un sito.
Solitamente la pagina "index" è la pagina di presentazione del sito.

Dobbiamo immaginare ogni sito come una piramide. Dalla prima pagina possiamo scendere e richiamare tutte le pagine che vogliamo mediante i collegamenti o "link" (àncora in inglese). I link sono fondamentali in internet, sia perché uniscono le pagine del sito, sia perché possono richiamare pagine, programmi o siti esterni.

La struttura base della pagina HTML è molto semplice:
<html>
<head>
Informazioni iniziali
</head>
<body>
Righe di programma
</body>
</html>
Quasi tutte le righe di comando hanno un inizio ed una fine. I comandi devono essere sempre inseriti fra i segni < e >. Per far capire che il comando è concluso dobbiamo inserire il segno /.
La prima riga <html> indica che ha inizio un foglio in linguaggio html, la ritroviamo in fondo con il segno / per indicare che è finito, identica cosa per le atre righe.

NON tutti i tag HTML hanno il corrispettivo tag di chiusura. Il tag <br> (a capo), il tag <hr> (linea), i metacomandi (tag ad inizio pagina) ed altri tag particolari (come ad esempio il richiamo a plugin esterni) non hanno un tag che li chiude. Vedremo nello specifico nelle pagine successive.


HEAD:

Fra i tag head possiamo inserire il TITOLO, righe per i fogli CSS, interi programmi in linguaggio SCRIPT ed infine i METACOMANDI, ossia tutti i comandi necessari per il riconoscimento della pagina da parte dei motori esterni. Per ora analizziamo solo questi.

Title:

Il tag title non ha nessuna importanza ai fini della programmazione, ma ne ha molta per i motori di ricerca che devono indicizzare il sito.
"title" descrive il titolo della pagina e si può inserire con i seguenti tag:
<title> titolo pagina </title>
Possiamo leggerlo nella barra colorata (celeste) in alto sopra il browser.


Metacomandi:

I metacomandi possono essere letti solo dalla rete internet (motori di ricerca od altri script). Vi possiamo inserire chi ha fatto il sito, quando, come è strutturato, ma è fondamentale sapere che all'interno vengono inserite le parole chiave (keyword) e la descrizione del sito, caratteristiche che possono essere riprese per catalogare il sito (dai motori di ricerca, alcune directory o altro..).
Vedi la sezione dei metacomandi.

Adesso dobbiamo spendere due parole per i motori di ricerca:
Inizialmente si basavano quasi tutti sui metacomandi, ma adesso le cose sono cambiate (e non poco).
Per essere posizionati correttamente su un motore di ricerca il sito deve essere compilato correttamente in ogni sua parte.

Lista dei parametri su cui fare molta attenzione:
  • Titolo(<title>)
  • Formattazione titoli (<H1> <H2> <H3> <H4> <H5> <H6>)
  • Testo (<p>)
  • Formattazione (<b> <u> <i> ecc..)
  • ALT Immagini ( alt="testo" )
  • Altro parametro da non sottovalutare sono i link:
    - Quelli che riceviamo da altri siti.
    - Quelli che sono in uscita verso altri siti.
    - Quelli che uniscono le pagine del nostro sito.
  • Ultimo ma non per importanza sono i contenuti delle pagine.
    Un sito che si proclama con determinati contenuti ed in realtà ne ha altri non riuscirà mai ad avere un buon posizionamento.
    Ricordatevi che le parole contenute nel titolo, nella descrizione e le keyword devono essere ripetute almeno una volta nel testo della pagina.
    N.B. I buoni motori di ricerca trovano le keyword all'interno della pagina, non prendono quelle suggerite dal programmatore!!!



BODY:

Fra le righe body sono inserite le vere righe di comando, ossia il corpo del foglio.
Lo stesso tag <body> contiene degli attributi per l'intero foglio. Le variabili consistono nello sfondo, i margini, i link ed il colore del testo.
bgcolor=" " inserire il nome del colore di sfondo a tinta unita (in inglese o esadecimale).
background=" " inserire il nome dell'immagine gif o jpg di sfondo (facendo attenzione all'indirizzo se non è nella stessa directory della pagina web).
bgproperties="fixed" si utilizza quando l'immagine di sfondo deve restare ferma.
topmargin =" " inserire la distanza dal margine superiore (unità di misura es. px).
bottommargin =" " inserire è la distanza dal margine inferiore (unità di misura es. px).
leftmargin =" " inserire la distanza dal margine sinistro (unità di misura es. px).
rightmargin =" " inserire la distanza dal margine destro (unità di misura es. px).
link =" " inserire il colore dei links.
vlink =" " inserire il colore dei links visitati (in inglese o esadecimale).
text =" " inserire il colore del testo (in inglese o esadecimale).
Per inserire gli attributi basta scrivere
<body bgcolor="white" topmargin="20px">
- Importante da sapere è il fatto che possiamo inserire anche un richiamo per funzioni script. Infatti tutto quello che inseriremo nel tag body verrà caricato prima di tutto il restante foglio. Il tag necessario è il seguente:
<body onload="abc()">
Dove abc() sarà una funzione script che sarà inserita prima di body (in head) o in un foglio esterno richiamato fra le righe head.