Quarto Articolo su Expression Web 3

In attesa di organizzare tutti gli articoli in una pagina del mio spazio, in modo che siano facilmente accessibili, pubblico il quarto.

I collegamenti tra le pagine

In questo quarto articolo ci occuperemo di quello che forse è il più importante tra i tag html, ovvero il tag a: l’importanza di questo elemento sta nel fatto che permette di inserire, all’interno di una pagina, dei collegamenti (link) ad altre pagine, dello stesso sito o di altri, cioè permette di trasformare un testo in un ipertesto, che è il concetto chiave su cui si basa il web.

Mettiamoci subito al lavoro e creiamo un nuovo sito con una sola pagina, esattamente come abbiamo fatto finora, e chiamiamolo Collegamenti: andiamo quindi a modificare il contenuto dell’unica pagina del nostro sito aggiungendo un titolo e del testo. Allo scopo di prendere ancora meglio confidenza con l’ambiente, useremo stavolta la visualizzazione Progettazione. Dal primo menu a discesa nella barra degli strumenti (vedi figura 1) selezionare Titolo 1 <h1>: nella pagina appare un box con in alto a sinistra l’etichetta “h1”; posizionarsi all’interno del box e scrivere il titolo che si vuole dare alla pagina, per esempio “Collegamenti ipertestuali”.

FIGURA 1

Dallo stesso menu, selezionare Paragrafo <p> e, nel box che appare, con etichetta “p”, scrivere “In questo articolo parleremo dei collegamenti ad altre pagine”. Ripetiamo l’operazione altre due volte, introducendo così altri due paragrafi: il risultato è del tipo di quello mostrato in figura 2.

FIGURA 2

Passando alla modalità di visualizzazione Codice, vediamo che Expression Web ha scritto il codice necessario per ottenere il risultato, che negli scorsi articoli noi abbiamo scritto a mano. La modalità Progettazione permette di svolgere molte operazioni senza intervenire sul codice, come risulterà chiaro strada facendo: solo per fare un esempio delle potenzialità di questa interfaccia, posizionandoci su uno dei blocchi p e trascinandolo all’interno dell’area di lavoro, è possibile cambiare l’ordine dei paragrafi, mentre Expression Web si occupa di modificare in modo opportuno il codice.

Fatta questa digressione sulle funzionalità dell’area di lavoro, passiamo a creare un'altra pagina del nostro sito: attiviamo la tab Visualizzazione Sito, in alto nell’area di lavoro, e clicchiamo sull’icona Nuova pagina, in alto a destra (vedi figura 3).

FIGURA 3

Nell’elenco delle pagine, sotto default.html, appare una nuova pagina, chiamata Senza_nome_1.html: cliccandoci sopra con il pulsante destro e scegliendo dal menu contestuale Rinomina, cambiamo nome alla pagina e chiamiamola seconda.html: a questa pagina corrisponde un nuovo file, chiamato, appunto seconda.html, nella stessa cartella di lavoro, come si può vedere nel pannello Elenco cartelle a sinistra. Facendo doppio clic su seconda.html, passiamo all’area di lavoro, esattamente come abbiamo fatto finora con default.html, e inseriamo del contenuto anche in questa pagina. Senza commentare tutti i passaggi, sostanzialmente uguali a quelli svolti precedentemente, vediamo direttamente il risultato nella figura 4.

FIGURA 4

Osserviamo soltanto che, tra le tab in alto nell’area di lavoro, oltre a default.html e Visualizzazione Sito, ne è comparsa una chiamata seconda.html: questo ci consente di spostarci rapidamente da una pagina all’altra del sito.

Le due pagine create sono indipendenti l’una dall’altra: possiamo aprire ciascuno dei due file html con un browser e visualizzare individualmente ciascuna delle due pagine.

Il prossimo passo è quello di creare un collegamento dalla prima alla seconda pagina, ovvero, in termini intuitivi, un elemento della prima pagina (ad esempio una parola) che, se opportunamente attivato (tipicamente con un clic del mouse) permette di passare alla seconda pagina, il tutto all’interno del browser.

Tornando alla pagina default.html, vogliamo che cliccando le parole “altre pagine” nel primo paragrafo il browser visualizzi la pagina seconda.html: evidenziamo con il mouse le due parole e, dal menu Inserisci, scegliamo Collegamento ipertestuale. Dalla finestra che si apre (figura 5) scegliere seconda.html e premere OK.

FIGURA 5

Vediamo, in figura 6, il risultato in un browser. Cliccando su “altre pagine”, il browser visualizza la nostra seconda pagina.

FIGURA 6

Diamo ora un’occhiata al codice html che Expression Web ha generato per noi (figura 7).

FIGURA 7

Vediamo il tag a annidato nel tag p e notiamo qualcosa di diverso rispetto ai tag contenitori con cui abbiamo avuto a che fare finora: il testo del link “altre pagine” (detto, in gergo, ancora) è racchiuso tra l’apertura e la chiusura del tag a, ma l’apertura ha una sintassi particolare: <a href=”seconda.html”>

L’elemento href è un attributo, mentre il testo tra virgolette (seconda.html) è il valore dell’attributo stesso. Gli attributi (e i rispettivi valori) sono degli ulteriori elementi della sintassi html che servono a dare informazioni aggiuntive su un certo tag: essi possono comparire nel tag di apertura e nei tag vuoti, prima della chiusura della parentesi angolare. Nel nostro caso, l’attributo href serve a precisare il percorso e il nome del file linkato.

Introdotti gli elementi di base della sintassi html e acquisita una certa dimestichezza con l’interfaccia di Expression Web, dai prossimi articoli ci occuperemo dell’inserimento nelle pagine di elementi più complessi, come le liste, le tabelle e le immagini, e dell’applicazione degli stili.

A presto.