Una prima pagina in html

data di oggi:

Oggi vediamo come inserire del testo e delle immagini in una pagina.

Lasciamo per il momento la pagina index.htm che useremo come prima pagina del nostro sito in un momento successivo, quando saremo più preparati.

Iniziamo a creare una nuova pagina.

Cerchiamo sotto la parola File il simbolo di una nuova pagina:

simbolo di pagina nuova

e facciamo un semplice click col sinistro del mouse.

Immediatamente viene creata una nuova pagina dal titolo:

conferma che la pagina è stata creata

Nuova_pagina_1.htm

Notiamo che il nome è scritto tutto unito, senza spazi tra Nuova e pagina, ma il nome è unito dal trattino "_".; infatti non vanno usati gli spazi.

Salviamo questa pagina con un nome che ci indica il contenuto, esempio vogliamo che sia: colori.htm

simbolo del dischetto

Troviamo il simbolo del dischetto e facciamo un click col sinistro del mouse per indicare che vogliamo salvare la pagina, cioè registrarla sul nostro computer.

Ci appare la seguente figura:

Notiamo che la cartella principale è: miosito; notiamo che è presente solo il file:index.htm

Inoltre notiamo che il nome del file è già impostato a: nuova_pagina_1.htm, ma dobbiamo modificarlo in: colori.htm.

Quindi facciamo un click del mouse nella casella:

e sostituiamo il nuovo nome, cioè colori.htm

Una volta scritto il nome salviamo con il tasto:Salva

Possiamo quindi vedere che la pagina ha cambiato nome.

Infatti verso il bordo sinistro superiore della pagina notiamo:

cioè il nome della pagina è cambiato in colori.htm.

Inoltre, se guardiamo l'albero delle cartelle

notiamo che sotto il file index.htm vi è il file colori.htm.

Inoltre il segno della matita colorata indica che quella pagina è ancora aperta per poterci scrivere dentro.

La visione che ora abbiamo della pagina è una pagina vuota, in cui non vi è scritto niente.

Tale visione è quella normale.

visione normale

La visione normale è quella che usiamo normalmente.

Nella visione normale FrontPage trasforma tutto quello che scriviamo o vi incolliamo dentro in linguaggio html senza fare nulla noi. Tutto avviene in modo automatico e corretto.

La visione html, invece ci mostra la pagina trasformata in linguaggio html, cioè il nostro programma con tutte le istruzioni necessarie.

Infatti se facciamo un click col mouse su HTML otteniamo:

cioè vediamo il nostro programma in html.

Chiariamo il significato.

Istruzione	significato
<html>	Inizia un programma in html
<head>	Indica che da qui iniziano delle informazioni sulla pagina. Le informazioni che si mettono sono: il titolo, il programma che ha generato la pagina, e delle indicazioni per i motori di ricerca.
<meta ....> <meta ....> <meta ....>	La chiave: meta indica alcune informazioni generate automaticamente. Noi le lasciamo come stanno.
<title>	Iinizia il titolo della pagina
Nuova pagina 1	E' il titolo della pagina. Da non confondere con il nome. Infatti il nome della pagina è colori.htm, mentre il titolo ancora non lo abbiamo dato; è rimasto quindi quello di prima. Il titolo lo possiamo scrivere come vogliamo, cioè con gli spazi. Il titolo è visibile quando il navigatore carica la nostra pagina. Inoltre il titolo è usato nei motori di ricerca.
</title>	Il titolo è finito. Ricordiamo che title è una chiave e non va modificata. Infatti tutte le chiavi sono scritte in colore blu. Mentre le parti che possiamo modificare sono scritte in colore nero.
</head>	Sono finite le informazioni sulla pagina.
<body>	Inizia il corpo della pagina, cioè quello che il navigatore vedrà sullo schermo. Nel nostro caso vedrà solo una pagina bianca e vuota.
</body>	E' finito il nostro programma.
</html>	E' finito il linguaggio html

Riepilogo

Riepiloghiamo, ora alcuni concetti appresi sul linguaggio html.

1 - Ogni pagina html inizia con <html> e finisce con </html>.

Notiamo una costante delle parole chiave del linguaggio, e cioè i segni di maggiore > e minore <.

Ogni parola chiave è preceduta da minore < e seguita da maggiore >. E' come se fosse racchiusa da delle grosse virgolette.

Inoltre se vi è una parola chiave che inizia vi sarà sicuramente una parola chiave che finisce. Infatti a <html> seguirà un </html>, cioè la fine di html, indicata dalla barra rovesciata /.

Ad un <body> seguirà un fine body </body>, cioè fine del corpo del programma.

A un <title> seguirà un fine titolo </title>.

2 - In ogni pagina html di solito vi è una intestazione della pagina che racchiude alcune informazioni sul programma.

La intestazione inizia con <head> e finisce con </head>.

Nella intestazione vi è un titolo della pagina, che inizia con <title> e finisce con </title>.

Quello che mettiamo in mezzo è proprio il titolo della pagina, ovviamente in italiano.

3 - In ogni pagina html vi è un corpo del programma. Il corpo inizia con <body> e finisce con </body>. All'interno ci metteremo le varie istruzioni, come vedremo dopo.

Modifica del titolo della pagina

Poiché la nostra pagina deve parlare dei colori ci mettiamo un titolo che guidi i motori di ricerca e anche il nostro navigatore.

Esempio

Voglio che il titolo sia: I colori.

Come posso fare?

Vi sono diversi modi .

1- Un primo modo è andare all'interno della frase:

<title>Nuova Pagina 1</title>

e mettere il nostro titolo in modo che vediamo scritto:

<title>I colori</title>

Attenzione però a non modificare le parti in blu. Dopo la modifica tutte le parole chiave in blu devono rimanere in blu. Se i colori cambiano vuol dire che qualcosa abbiamo sbagliato.

Se tutto corrisponde possiamo salvare la pagina con il tasto del dischetto

Questa volta non ci viene richiesto il nome della pagina, in quanto il nome resterà colori.htm.

Possiamo ora ritornare alla modalità normale

Facendo un click su "Normale".

2 - Un altro modo di cambiare il titolo della pagina è quello di utilizzare il tasto destro del mouse.Se sulla pagina in modalità normale teniamo premuto il tasto destro del mouse, appare la seguente figura:

da cui scegliamo Proprietà pagina...

Possiamo quindi modificare il titolo e premere OK.

3 - Vi è, infine, un terzo modo di modificare il titolo. Se teniamo premuto il tasto destro del mouse sul nostro file colori.htm nell'elenco delle cartelle: