ELEMENTI DI CODICE DI UNA PAGINA WEB
(doctype - head - body - header - footer)
INIZIO FILE:  Elementi comuni che individuano il tipo di file HTML
CODICE DESCRIZIONE
 <!DOCTYPE HTML>
  <html>
  <head>

Inizia cosi la pagina HTML5
<head> TAG di inizio della testata

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>

INVECE:
Inizia cosi la pagina HTML Transitional di standard loose (EN indica che la lingua è l'inglese).
<head> TAG di inizio della testata
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head> 		INVECE:
Inizia cosi la pagina HTML Transitional di standard strict (EN indica che la lingua è l'inglese)
<head> TAG di inizio della testata
Ci sono anche altri standard HTML che qui non riportiamo ma che potrete trovare su internet in siti dedicati alla pagina hTML
TESTATA : elementi da scrivere tra i TAG    <head> ...</head>
Row CODICE DESCRIZIONE
1   <META charset="utf-8"> Il nostro set di caratteri per html5 può anche essere dato con l'istruzione seguente
  <meta http-equiv="Content-Type"   content="text/html;  charset=utf-8">
2   <title>  Doc. dimostrativo  </title> Il titolo della pagina che appare nella label del browser

3

 <META name="Description"
content="qui metto la descrizione ..... ">

META TAG Description: non più di 100 Caratteri. Viene usata dai motori di ricerca anche per ricavare le Keywords. Consta di 2 termini tra virgolette

  1. name ="Description"
  2. Content =" ......" (contenuto)
4 <meta name="keywords" content="elementi, pagina, web, head, testata, descrizione ....">

META TAG Keywords (Parole chiave) che servono ai motori di ricerca per individuare la pagina e indicizzarla sul web. Consta di 2 termini compresi

  1. META name="Keywords"
  2. Content = " .........."

L'insieme delle parole chiave è tra virgolette; le parole chiave separate da virgole descrivono il contenuto significativamente .

5 <META name="ROBOTS"
content="INDEX, FOLLOW">		 META TAG ROBOTS gli spider continuano la ricerca ai files collegati alla pagina. Se NON si vuole questo si metta NO FOLLOW
6 <link href="../../../css/socialmediabut.css"
rel= "stylesheet" type="text/css" >

Riferimento a foglio di stile CSS
Consta di 4 termini compresi tra < .. >

  1. LINK indica che si tratta di un collegamento
  2. HREF = "..............."
    fornisce il riferimento al file nella posizione in cui si trova rispetto a questa pagina
  3. REL ="stylesheet" Indica che si tratta di uno stylesheet (foglio di stile).
  4. TYPE "text/css" Indica che si tratta di un css di testo

 
7 <script src="scripts/SpryMenuBar.js" type="text/javascript"></script>

Riferimenti agli scripts (eventuali)
analogamente ai fogli di style CSS si inseriscono gli scripts. In questo esempio ci si riferisce a un Javascript:

  1. <script .......................>
  2. src="indirizzo del file"
  3. type="text/javascript" indica che è un javascript di testo
  4. </script> chiude lo script
8

<style type="text/css">

body { text-align: justify; margin:0; }

.allijust {
font-family: Courier New;
font-size: medium;
text-align: justify;
background-image: url(../../../immagini/sfondi/pansoff.png);
border-radius: 30px; }

</style>

Si possono aggiungere termini di stile scritti direttamente nella pagina.
Devono essere racchiusi tra le istruzioni che dicono trattarsi di stile tipo TEXT/CSS (<style type="text/css"> .. </style>)
In questo esempio si pongono:

  1. il corpo pagina <body> ha margini zero e testo allineato justified (Justify)
  2. abbiamo creato una classe di nome allijust che fornisce il tipo di carattere, l'immagine di sfondo etc.
    Il nome di classe è preceduto da "." (.allijust)
9 </head> Chiude il tag <head> dopo che tutti i suoi componenti sono stati inseriti

CORPO PAGINA : elementi da scrivere tra i TAG    <body> ...</body>
Row CODICE DESCRIZIONE
10 <body> Inizia il tag corpo della pagina, che viene scritto dopo </head>
....... QUI CI VANNO TUTTE LE ISTRUZIONI DEL CORPO PAGINA
nn </body> Finisce il tag corpo della pagina
nn+1 </html> Finisce il tag <html> della pagina

Recentemente oltre a <HEAD> e <BODY>si sono aggiunti altri TAG della pagina come <header>......</header> e anche <footer>...... </footer> che significano rispettivamente Testata e Piè di pagina.

In analogia con la pagina di un editore come microsoft word si può pensare che si debbano aggiungere fuori della pagina, il primo all'inizio PRIMA DEL TAG <BODY> e il secondo alla fine DOPO </BODY>. Devo ancora sperimentare bene come funzionano ma poi - se ne avete la necessità - ve lo farò sapere in questa sezione di articoli.

COME SI COSTRUISCONO GLI INDIRIZZI DEI FILES COLLEGATI A UNA PAGINA

Un indirizzo di file nella pagina html deve essere riferito alla posizione in cui si trova l'elemento. Esempio: l'URL dell'immagine di background in un file CSS si riferisce all'immagine pansoff.png

background-image: url(../../../immagini/sfondi/pansoff.png);

significa che per raggiungere l'immagine di sfondo pansoff.png si deve arretrare di 3 livelli ( ../../../ ) nell'albero delle cartelle rispetto alla posizione della pagina quindi partendo da quel livello entrare nella sottocartella 'immagini/sfondi' e cercare l'immagine pansoff.png.

Per quanto riguarda le istruzioni CSS ammissibili, DREAMWEAVER o altri software forniscono un elenco interattivo. Conoscendo la lingua inglese non è difficile capire cosa significano le varie voci.


Lino Bertuzzi