Archivi tag: assoluto

HTML5 Base – 4.3 – Percorsi assoluti e relativi

In questa lezione vi spiego quali percorsi potete usare per i vostri collegamenti.

Tipi di percorso

Un collegamento deve portare ad una sola destinazione: per poterlo fare, dobbiamo indicare al link dove si trova tale destinazione.

Si trova sul sito stesso della pagina di origine? Si trova nella stessa cartella? O si trova in un’altro sito?

Se si trova su un sito web esterno, si utilizza un percorso assoluto.

Se si trova sullo stesso sito web, possiamo usare un percorso relativo.

Percorsi assoluti

In un percorso assoluto si comunica al browser di andare a prendere la destinazione partendo direttamente dal dominio (es: www.miosito.it), muovendosi poi verso la posizione del file che si vuole raggiungere.

Per fare un’esempio pratico, basato sulla vita reale, è come se io volessi incontrare una persona basandomi sul suo indirizzo:

  1. per prima cosa mi reco nella città dove si trova
  2. poi cerco la via
  3. quindi il numero civico
  4. infine cerco il cognome sul citofono

Questo metodo funziona per qualsiasi indirizzo voglio usare, basta cercare la città dove abita la persona ed è fatta.

Esempio:

http://www.miosito.it/pippo/pluto.html

Dove:

  • http: indica il tipo di protocollo usato (in questo caso il protocollo di trasferimento di ipertesti)
  • www.miosito.it indica il dominio che identifica un server web sulla rete
  • pippo indica la cartella del sito in cui è contenuta la pagina di destinazione
  • pluto.html è il nome della pagina che rappresenta la destinazione

Il link finale sarà così composto:

<a href="http://www.miosito.it/pippo/pluto.html">Testo del collegamento</a>

Percorsi relativi

In un percorso relativo dobbiamo spiegare al browser quale strada dovrà seguire per poter andare a raggiungere la pagina web destinazione, partendo dal punto in cui si trova quella di partenza.

Per riferirmi all’esempio descritto sopra, cosa potrebbe succedere se volessi incontrare una persona che abita nella mia stessa via, usando il metodo descritto per il percorso assoluto?

Dovrei di nuovo uscire dalla città per poi rientrarci: inutile, no?

Se la persona abita nella mia stessa via, mi segno soltanto il numero civico e:

  1. esco di casa
  2. vado al palazzo di destinazione
  3. cerco il cognome sul citofono.

Ovviamente questo procedimento non va bene se la persona si trova in un’altro paese.

Facciamo ora un esempio.

Il nostro sito contiene la seguente struttura:

www.sito.it:

  • homepage.html
  • cartella1/
    • partenza.html
    • topolino.html
    • sottocartella/
      • pluto.html
  • cartella2/
      pippo.html

Immaginiamo di essere sulla pagina partenza.html e di voler raggiungere una delle altre pagine con questo collegamento:

<a href="">Vai alla destinazione</a>

Caso 1 – Destinazione = topolino.html

La pagina di destinazione del collegamento è nella stessa cartella che ospita la pagina di origine (cartella1).

Non mi muovo da lì, perché la pagina partenza vede perfettamente la pagina topolino (sono nella stessa cartella), quindi mi basta chiamare la pagina di destinazione col suo nome:

<a href="topolino.html">Vai alla destinazione</a>

Caso 2 – Destinazione = pluto.html

La pagina di destinazione del collegamento non è nella stessa cartella ma è immediatamente raggiungibile entrando in una cartella che riusciamo a vedere e scrivendo il nome della pagina:

<a href="sottocartella/pluto.html">Vai alla destinazione</a>

Caso 3 – Destinazione = homepage.html

La pagina di destinazione del collegamento è immediatamente fuori dalla cartella che ospita la pagina di origine (cartella1).

Se la pagina non è nella stessa cartella, devo “uscire” da dove mi trovo ora usando:

../

e poi digito il nome del file:

<a href="../homepage.html">Vai alla destinazione</a>

Caso 4 – Destinazione = pippo.html

La pagina di destinazione del collegamento non è nella stessa cartella (quindi usciamo con ../), ma non riusciamo ancora a vederla, perché si trova in un’altra cartella.

Scriviamo quindi il nome della cartella e, quindi, il nome del file:

<a href="../cartella2/pippo.html">Vai alla destinazione</a>

Video