CREARE SITI WEB in HTML e CSS > Creare collegamenti tra le pagine web
Facciamo un piccolo riassunto delle lezioni precedenti.
- È stata creata la cartella "primo-sito"
- All'interno della cartella "primo-sito" sono stati creati i "file index.html" e "citta-nelmondo.html".
- Sempre all'interno della cartella "primo-sito" è stata creata la cartella "immagini"
- All'interno della cartella "immagini", sono state copiate le foto da pubblicare sul sito
- Nel file "citta-nel-mondo.html" sono state inserite o, sarebbe meglio dire, collegate
alcune immagini.
- Il tutto è stato caricato via FTP sullo spazio di hosting registrato su altervista.org
Puoi scaricare il file compresso dell'intero sito di esempio finora creato da questo link:
http://www.pcdazero.it/images/web01/primo-sito.zip
Quando ti colleghi a qualsiasi sito, il browser ricerca all'interno della cartella principale il file index (.html o .php o .asp o .xml, ecc.) e lo visualizza.
Se non la trova, viene visualizzato un messaggio di errore.
Quindi il link http://millecitta.altervista.org, corrisponde (in questo caso) al link
http://millecitta.altervista.org/index.html
Puoi infatti raggiungere la pagina omettendo o meno il file index.
La pagina web "citta-nel-mondo.html" potrai raggiungerla digitando l'indirizzo
http://millecitta.altervista.org/citta-nel-mondo.html (e premendo INVIO).
Il sito pubblicato nel web non è altro che una semplice cartella acessibile via internet.
Questa cartella è accessibile digitando il nome del dominio (es.: http://millecitta.altervista.org/) nel browser.
Tutti i file che crei (o copi) all'interno di questa "cartella/dominio" possono essere visti da tutti (salvo impostazioni diverse).
Sarebbe però troppo scomodo digitare ogni volta, l'indirizzo per raggiungere le varie pagine web del sito; ecco perché è utile inserire un codice che permetta di raggiungere le altre pagine con un clic del mouse.
Questo codice viene detto "collegamento ipertestuale" o "link".
Per un inserire un collegamento ipertestuale (o link) devi far uso del'elemento <a>
Ecco un esempio su come procedere:
1 - da HTML-Kit, apri la pagina "index.html"
2 - inserisci il seguente testo prima dell'elemento finale </body>
...
Visita la mia seconda pagina web:<br />
città nel mondo.
</body>
...
3 - seleziona la parte di testo che vuoi trasformare in link (ovvero, rendere "cliccabile")Visita la mia seconda pagina web:<br />
città nel mondo.
</body>
...
4 - clicca sulla scheda "Objects"
5 - clicca sulla prima icona "Make link"
6 - clicca sul pulsante "Add" (se necessario)
7 - seleziona la cartella "primo-sito" e clicca su "OK"
8 - fai doppio clic sulla pagina da collegare (es.: citta-nel-mondo.html).
Ecco come si presenta il codice e la pagina web da browser.
| codice HTML | risultato pagina web |
|
... <body> Ciao mondo web!<br /> Mi sto divertendo un mondo!<br /> Visita la mia seconda pagina web:<br /> <a href="citta-nelmondo.html">città nel mondo</a> </body> </html> |
Ciao mondo web! Mi sto divertendo un mondo! Visita la mia seconda pagina web: città nel mondo |
9 - Verifica il risultato cliccando sulla scheda "Preview"
10 - e dalla scheda "Preview" clicca sul testo sottolineato "città nel mondo".
Come d'incanto apparirà la pagina "citta-nel-mondo.html" :-)
11 - Clicca sulla scheda "Editor" per rivisualizzare il codice
12 - clicca su "Salva" per salvare le modifiche.
Come avrai avuto modo di notare i collegamenti ipertestuali o link, sono così strutturati:
<a href="citta-nel-mondo.html">città nel mondo</a>
All'interno dell'elemto <a>
deve essere inserito l'attributo href
al quale devi assegnare come valore l'indirizzo della risorsa da raggiungere.
In questo caso, la pagina (index.html) in cui vuoi inserire il link, si trova nella stessa
cartella della pagina (citta-nel-mondo.html) che vuoi raggiungere;
pertanto il valore da assegnare all'attributo href coincide con il nome del file:
href="citta-nel-mondo.html"
Poni attenzione alla sintassi:
| codice HTML | risultato pagina web |
| <a | apertura dell'elemento <a> |
| spazio vuoto. | |
| href=" | attributo href, segno uguale e virgolette |
| citta-nel-mondo.html | indirizzo della risorsa |
| " | chiusura delle virgolette |
| > | chiusura dell'elemento <a> |
| città del mondo | testo a scelta, visibile |
| </a> | tag di chiusura |
Fai particolare attenzione anche ai nomi dei file o risorse:
"citta-nel-mondo.html" è diverso da "CITTA-NEL-MONDO.HTML"
che a sua volta è diverso da "Citta-nel-mondo.html" o "citta-nel-Mondo.HTML", eccetera !
Ovvero, l'hosting che ospiterà il tuo sito, potrà fare distinzione tra il carattere minuscolo e quello maiuscolo.
Buona abitudine è nominare tutti i file in minuscolo.