Uno degli aspetti più importanti di una pagina web sono i link, ovvero i collegamenti ad altre pagine. Si può trattare di collegamenti relativi (dello stesso sito) oppure di collegamenti assoluti (che puntano ad un sito differente).
Nel nostro caso li affrontiamo tutti e due.
Occorrente per questo esercizio:
Editor HTML (Notepad ++)
Files aggiornati alla puntata precedente (scaricali da qui)
Apriamo la pagina index.html contenuta nella cartella zip e visualizziamola nel browser facendo doppio clic o tasto destro ->apri con.
Ci troviamo davanti ad una pagina web con un titolo, un menu di navigazione, il contenuto e il footer (piè di pagina), l’obiettivo di oggi è “dar vita” al menu di navigazione con dei collegamenti relativi e aggiungere qualche link esterno o assoluto all’interno del contenuto.
Mettiamoci all’opera:
Andate a posizionarvi, all’interno della pagina index.html, all’altezza del div “menu” dove abbiamo inserito i link delle pagine interne del sito, adesso faremo in modo che questi collegamenti funzionino. I collegamenti relativi, cioè interni al sito web, non hanno bisogno di avere specificato tutto l’indirizzo (URL), basta inserire la parte finale, il nome della pagina seguito dall’estensione (nel nostro caso .html). Funziona un pò come l’indirizzo di casa, ne più nè meno 🙂 Inseriamo così i link del nostro menu:
Come ho creato i link: ho usato il tag a href dove a significa anchor (ancora, collegamento) e href significa hypertext reference.
Ho aperto il tag, ho inserito il collegamento (nomepagina.estensione), ho scritto il testo che risulterà evidenziato e cliccabile (che può essere qualsiasi parola, testo o immagine) e ho chiuso il tag.
Facciamo adesso la stessa cosa con una parola all’interno del testo segnaposto:
Ho usato esattamente la stessa tecnica, con una differenza: in questo caso ho creato un collegamento assoluto, cioè ad una pagina esterna al mio sito, quindi con tutto l’indirizzo. E’ un pò come se con i collegamenti assoluti scrivessimo indirizzo, numero civico, CAP, città e nazione e con i collegamenti relativi soltanto la via ed il numero civico.
All’interno della cartella zippata con le risorse di questa lezione troverete anche le altre pagine a cui ho linkato il menu, esercitatevi e costruite le vostre pagine e, se avete bisogno di un consiglio o se non fossi stato molto chiaro, commentate o scrivetemi pure 🙂
Scarica i files
2 commenti