Friskon.comCorso di HTML 4 - A cura di Luca Miacola
Per costruire una pagina web, molta gente utilizza una serie di programmi molto elaborati difficili da usare ma comunque automatici, l’utilizzo di questi programmi può essere molto sbrigativo ma da prodotti sempre uguali, infatti hanno dei modelli da seguire e limitano molto la vostra fantasia. Il modo più semplice, divertente e completo è quello
di utilizzare il Blocco note di Windows, scrivendo in linguaggio html e salvando il file come nome_file.html. Per farlo però bisogna utilizzare i tag, cioè delle “paroline magiche” che consentono a tutti i browser di riconoscere il vostro testo come un html.
Iniziamo col conoscere i tag principali:
<html> |
Comunica al browser che il testo che segue è scritto in formato html |
<head> |
In questo tag fino a </head> sono inserite delle informazioni che non saranno visualizzate me che sono utili al browser per il buon funzionamento del sito. |
… |
Al posto dei puntini ci saranno le informazioni sopra citate |
</head> |
Indica che le informazioni sono finite |
<body> |
In questo tag fino a </body> sono inseriti il corpo di testo, le immagini, i moduli, ecc. che saranno visualizzati |
… |
Al posto dei puntini ci saranno i contenuti della pagina |
</body> |
Indica che non ci sono più informazioni da visualizzare |
</html> |
Comunica al browser che la pagina è terminata |
Le informazioni da non visualizzare
Come abbiamo visto nella tabella precedente ci sono delle informazioni che non vengono visualizzate ma che sonomolto importanti come il creatore della pagina, gli argomenti trattati, il programma utilizzato. Ecco di seguito i tag che vi consentiranno di farlo:
<meta name=“keywords” content= “…”> |
Al posto dei puntini vanno inserite le parole che il motore di ricerca utilizzerà per trovare il vostro sito.Esempio: content= “grafia, fotoritocco, arte, disegno” |
<meta name= “autor” content= “Antonio Rossi”> |
Al posto di Antonio Rossi va inserito il vostro nome, cioè il nome del creatore del sito. |
<meta name= “description” content= “…”> |
Al posto dei puntini va inserita una breve descrizione del vostro sito che sarà utilizzate dai motori di ricerca per pubblicizzarla. |
<meta name= “generator” content= “…”> |
Al posto dei puntini va inserito il programma con cui avete creato il vostro sito. |
<meta name= “robots” content= “noindex”> |
Impedisce ad alcuni motori di ricerca di occupare degli spazi della vostra pagina. |
<title>…</title> |
Al posto dei puntini va inserito il titolo della vostra pagina web. |
Il corpo di una pagina web
Una volta terminate le informazioni da non visualizzare la nostra pagina si presenta completamente bianca. Per visualizzare testo immagini e altro dobbiamo inserire dei nuovi tag tra <body> e </body> che sono le direttive del corpo di testo.
Innanzi tutto bisogna decidere il coloro dello sfondo e del testo in quanto vanno assegnati subito dopo <body …> se ci va bene lo sfondo bianco e il testo nero basta omettere i tag che seguono. NB: i colori vanno espressi in inglese!
<body bgcolor=“colore”> |
Attribuisce un colore allo sfondo |
<body text=“colore”> |
Attribuisce un colore al testo |
<body background=“esempio.gif”> |
Attribuisce un’immagine di sfondo alla pagina |
<body background=“esempio.gif” bgproperties= “fixed”> |
L’immagine di sfondo è fissa e non scorre con il testo |
Se si vuole dare un colore di sfondo o un’immagine e il colore al testo bisogna combinare i tag precedenti in questo modo:
<body bgcolor= “colore” text= “colore”>
<body background=“esempio.gif” bgproperties= “fixed” text= “colore”>
NB: non inserire più volte <body> i tag delle proprietà grafiche vanno inserite una accanto all’altra all’interno dell’unico tag <body … … …>
Adesso ci troviamo di fronte ad una situazione simile:
<html> |
|
<head> |
|
<title>nome del sito</title> |
Da il titolo al vostro sito |
<meta name= “autor” content= “Antonio Rossi”> |
Indica il nome dell’autore del sito |
</head> |
|
<body bgcolor=“colore” text= “colore”> |
Da colore allo sfondo e al testo |
… |
Al posto dei puntini adesso possiamo scrivere quello che vogliamo, sarà visualizzato sulla nostra pagina come normale testo. |
</body> |
Indica che non ci sono più informazioni da visualizzare. |
</html> |
|
Formattare un testo vuol dire attribuire un carattere, una grandezza e un allineamento, può essere molto utile per distinguere il titolo di un paragrafo o le parole importanti.
Poiché il testo è da visualizzare i seguenti tag vanno inseriti tra <body> e </body>, dove nella tabella precedente, avevo posto i puntini.
<p>…</p> |
Il testo che porrete al posto dei puntini sarà scritto su un nuovo paragrafo. |
<p align= “center”>…</p> |
Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà centrato nella pagina. |
<p align=“left”>…</p> |
Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà allineato a sinistra nella pagina. |
<p align=“right”>…</p> |
Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà allineato a destra nella pagina. |
<ul> <li>…</li> <li>…</li> <li>…</li> </ul> |
Inserisce un elenco puntato all’interno della pagina. Ovviamente le parole e le frasi inserite al posto dei puntini saranno le voci dell’elenco. |
<ol> <li>…</li> <li>…</li> <li>…</li> </ol> |
Inserisce un elenco numerato all’interno della pagina. Ovviamente le parole e le frasi inserite al posto dei puntini saranno le voci dell’elenco. |
<b>…</b> |
Il testo compreso tra questi due tag apparirà in grassetto. |
<i>…</i> |
Il testo compreso tra questi due tag apparirà in corsivo. |
<u>…</u> |
Il testo compreso tra questi due tag apparirà sottolineato. |
Adesso vi mostrerò un tag che vi consentirà di stabilire il carattere e la grandezza del testo:
<font face= “nome carattere” size= “un numero da 1 a 8”>…</font>
Tutto il testo compreso tra <font> e </font> apparirà con il carattere e la grandezza da voi stabilita.
Torna al sommario o vai alla pagina successiva >>>
