Come creare una directory visibile sul tuo sito web

January 18

Avere un sito web può migliorare le connessioni aziendali o semplicemente essere un progetto divertente. Una caratteristica che aiuterà gli utenti a trovare la loro strada intorno al vostro sito è una directory. Mentre alcuni progettisti desiderano creare la propria navigazione, la directory classico è facile da costruire e può essere messo insieme in una questione di minuti. Costruito interamente in HTML, è sufficiente avere una conoscenza del linguaggio di codifica per progettare la directory.

istruzione

1 Aprire il file HTML che si desidera inserire la directory su. In genere, questo sarebbe il file "index.html" in quanto questa è la prima pagina dei browser caricherà.

2 Creare una nuova divisione della directory e ID come "dir". È possibile scegliere di posto divisioni dove si vuole all'interno del file HTML, anche se si trovano tipicamente in fondo a un sito. Il codice dovrebbe essere simile a questa:

<Div id = "dir">
</ Div>

Questo crea una sezione adeguata per la directory e le etichette se lo si desidera per lo stile con (fogli di stile a cascata) CSS in seguito.

3 Creare un colpo di testa all'interno della divisione, directory dal titolo. Il tuo codice sarà ora simile a questa:

<Div id = "dir">

&lt;h1>Directory&lt;/h1>

</ Div>

4 Creare un nuovo elenco ed elencare alcune pagine del tuo sito. Il tuo codice sarà simile a questo:

<Div id = "dir">

&lt;h1>Directory&lt;/h1>
&lt;ul>
&lt;li>Home&lt;/li>
&lt;li>About&lt;/li>
&lt;li>Contact&lt;/li>
&lt;/ul>

</ Div>

Le pagine elencate sono solo esempi, ma il concetto è lo stesso. Per ogni pagina avete, avvolgere il suo nome nei tag list

5 Creare collegamenti per le voci di elenco creati in precedenza, il collegamento alle rispettive pagine. I collegamenti devono andare all'interno dei tag di elenco. Una volta fatto, il codice dovrebbe essere simile a questo:

<Div id = "dir">

&lt;h1>Directory&lt;/h1>
&lt;ul>
&lt;li>&lt;a href="index.html">Home&lt;/a>&lt;/li>
&lt;li>&lt;a href="about.html">About&lt;/a>&lt;/li>
&lt;li>&lt;a href="about.html">Contact&lt;/a>&lt;/li>
&lt;/ul>

</ Div>