Come creare le pagine interne

In quest’ultima lezione del corso base online di html andremo a creare due pagine interne per completare la navigazione delle voci del nostro menù di navigazione. Duplica lezione-9 all’interno della cartella htdocs di xampp e rinominarla lezione-10. Successivamente avvia Atom in modalità progetto usando la cartella appena creata.

Creazione pagine interne del sito

Le pagine interne di un sito sono disegnate sulla falsariga dell’home page con i contenuti organizzati in maniera leggermente diversa.

Per comodità e visto che si tratta un corso alle prime armi manterremo lo stesso layout della pagina principale.

Il nostro compito è quello di andare a creare le due pagine che ci mancano, CHI SIAMO e CONTATTI. Prima di farlo lavoriamo sulle voci del menù di navigazione del sito aggiungendo intanto i rispettivi link in questo modo:

<a href=”index.html” class=”link_nav”> home </a>
<a href=”chi-siamo.html” class=”link_nav”> chi siamo </a>
<a href=”contatti.html” class=”link_nav”> contatti</a>

Dopo aver aggiunto come valore di href il puntamento a chi-siamo.html e contatti.html, cliccando su uno dei due nuovi link a video riceveremo questo messaggio (vedi immagine).

Oggetto non trovato

Vuol dire che stiamo cercando di visualizzare una risorsa che non esiste. Ora duplica due volte il file index.html e rinomina gli elementi appena creati in chi-siamo.html e contatti.html (vedi sequenza immagini).

index.html duplicata
File rinominati

Vedrai che al click sulle voci del menù di navigazione ora il sito ti farà visualizzare sempre l’home page (perchè duplicata più volte) ma in realtà stai guardando tre file diversi.

Modificare i titoli delle pagine interne

A questo punto per andare a identificare in maniera corretta le pagine interne andiamo a modificare i tag H1 e H2 delle pagine chi siamo e contatti in questo modo:

<h1>Chi siamo</h1>
<h2>Pagina chi siamo</h2>

<h1>Contatti</h1>
<h2>Pagina contatti</h2>

Dopo questa modifica al codice delle pagine chi-siamo.html e contatti.html al click sui corrispondenti link a video vedremo questo.

Pagina chi siamo
Pagina contatti

Complimenti hai appena creato in sito di 3 pagine!

Il corso base di html si conclude qui. Grazie per averlo seguito e se ti fa piacere condividilo e fallo conoscere.

La prossima tappa del percorso formativo è il corso online di HTML livello intermedio, dove nella prima lezione andremo a conoscere i fogli di stile.

VAI AL CORSO INTERMEDIO DI HTML