logo del sito

W3C

Al giorno d'oggi è importante che un sito Web, sia compatibile con gli standard del Consorzio Internazionale W3C.

HTML

Tutte le pagine dei siti web sono scritte in HTML, linguaggio che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del nostro computer.

CSS

Con il termine CSS (dall'inglese Cascading Style Sheets) vengono semplicemente definiti appunto i "fogli di stile a cascata", usati per separare all'interno delle pagine di un sito, i contenuti dalla formattazione, permettendo una programmazione più facile per gli autori delle pagine HTML.

Percorsi assoluti e relativi

Generalmente un sito, per essere correttamente visualizzato in tutte le sue parti deve sfruttare la cosidetta struttura ad albero, dove c'è una cartella principale che contiene tutte le parti del sito, quindi le pagine costruite con Xhtml, le immagini, i fogli di stile (CSS), documenti ecc.

Solitamente, nella cartella principale del sito si trovano tutte le pagine Xhtml che compongono il sito, mentre le immagini vengono generalmente inserite dentro una cartella img, i fogli di stile dentro una cartella css ed eventuali documenti scaricabili dal sito (ad esempio pdf), verranno inseriti dentro una cartella docs. Ovviamente quanto detto non è una regola ferrea, nel senso che i nomi delle cartelle possono essere diversi oppure si possono inserire tutti i file nella stessa cartella principale, senza crearne altre specifiche al suo interno.

In ogni caso la regola fondamentale è questa: inserire tutti i file che dovranno essere utilizzati all'interno del sito, dentro la cartella principale. Pena alla trasgressione di questa regola, il verificarsi di errori di visualizzazione sulle pagine Xhtml, come ad esempio immagini non trovate o peggio la mancanza di linkage al foglio di stile.

Ora, andiamo ad analizzare il modo di rapportarci all'interno del codice Xhtml e alla struttura ad albero. Una situazione classica in cui ci si potrebbe trovare, è quella di linkare un'immagine all'interno della pagina Xhtml attraverso il tag <img>, ad esempio il logo dell'azienda in un header. Intanto premettiamo che la nostra struttura sarà come quella dello schema sottostante:

cartelle_e_sottocartelle

Illustrazione 1 - Struttura gerachica ordinaria

Da questo schema notiamo che la cartella principale contiene tre cartelle (css, docs, img) e due file (azienda.html, index.html).

Apriamo una piccola parentesi, sull'index.html, cioè la pagina iniziale, quella che viene riconosciuta dal browser nel momento in cui richiamiamo l'indirizzo Web e che fà da home page. Cosa determina questo riconoscimento? La risposta è molto semplice: il nome index, da cui si capisce che la prima pagina per essere riconosciuta come tale, deve sempre essere chiamata index. Esistono poi anche altri nomi di "default" che determinano una pagina come la prima, ma ci basta conoscere questo per il nostro ciclo educativo.

Tornando alla struttura di esempio, decidiamo di voler aggiungere ad index.html, l'immagine image.jpg. contenuta nella cartella img. Per fare questo abbiamo due possibilità: la prima è quella di utilizzare un percorso assoluto che comprende di volta in volta l'intero percorso in cui si trova l'immagine, la seconda invece è l'utilizzo di un percorso relativo, ossia la possibilità di usare una sintassi particolare per semplificare il link, evitando di riscrivere ogni volta l'intero percorso del file.

Analizziamo meglio le due possibilità:

Percorsi assoluti:

L'utilizzo dei percorsi assoluti è il modo più sicuro di linkare un file in una pagina Xhtml perchè diminuisce le possibilità di sbagliare il "posto" in cui cercarlo. Ad esempio secondo lo schema 1 (struttura gerarchica ordinaria) non è difficile trovare il file image.jpg con il percorso assoluto. Da qualsiasi parte lo si richiami, il suo percorso assoluto sarà sempre:   http://www.sito.it/img/image.jpg. Questo è principalmente il motivo per cui l'utilizzo dei percorsi assoluti viene utilizzato da molti principianti.

Sembrerebbe anche piuttosto sicuro da usare, se non fosse per il fatto che in locale (cioè quando si stà lavorando sul proprio computer) un percorso del genere non è valido e quindi quando si utilizzano i percorsi assoluti in locale avremo una sintassi del tipo: c:\sito\img\image.jpg, e al momento della pubblicazione online del nostro sito, dovremo fare attenzione a cambiare tutti i percorsi assoluti locali in percorsi assoluti di tipo url, aumentando fastidiosamente il tempo di lavoro e la possibilità di fare errori sui percorsi stessi.

Percorsi relativi:

I percorsi relativi sono una soluzione ottimale, quando si lavora in locale, per portare poi senza grossi traumi un sito sul Web, evitando la necessità di riprendere in mano le pagine una per una per aggiustare i percorsi online, consentendo ad esempio di effettuare rapidamente modifiche senza doversi preoccupare che un file sia sul Web o in locale. Il problema dei percorsi relativi stà più che altro nella difficoltà della notazione e nell'approccio che prevede una buona conoscenza del filesystem come schema ad albero di file e cartelle.

Ora, diciamo che esistono quattro casi tipici in cui cambia la dicitura per il richiamo di un percorso relativo e per comprenderli meglio inseriamo uno schema un tantino più articolato di quello precedente:

cartelle_e_sottocartelle

Illustrazione 2 - Percorsi relativi

Di seguito sono riportati i casi tipici e il modo di scrivere il percorso assoluto a seconda del caso:

1- Il file da richiamare si trova nella stessa cartella del file richiamante: in questo caso la cosa è semplice, cioè basta richiamare direttamente il nome del file completo di estensione, senza aggiungere altro. È il caso di index.html che chiama logo.jpg.

2- Il file da richiamare si trova in una sotto-cartella rispetto al file richiamante: per prima cosa si richiama la cartella in cui si trova il file, poi il nome del file completo di estensione. È il caso di index.html che richiama image.jpg e che troverà il file attraverso il percorso img/image.jpg.

3- Il file da richiamare si trova in una cartella superiore a quella del file richiamante: si antepongono al percorso due punti e lo slash ../ poi si richiama il file. È il caso di dettaglio.html che si trova nella cartella prodotti e vuole raggiungere il file logo.jpg e lo fà attraverso il percorso ../logo.jpg.

4- Il file da richiamare e il file richiamante si trovano rispettivamente in due cartelle che si trovano a loro volta dentro una cartella superiore: in questo caso và sfruttato ugualmente il ../ ma in più per entrare nell'altra cartella bisogna scriverlo nel percorso. Ad esempio se dettaglio.html vuole richiamare image.jpg, lo deve fare attraverso il percorso ../img/image.jpg.

Potrà apparire chiaro come l'utilizzo dei percorsi relativi aiuti a snellire di parecchio il lavoro, seppure sia necessario un pò di tempo per entrare nell'ottica di utilizzo delle diverse sintassi, a seconda del file che si vuole recuperare. Tutto ciò fermo restando che è assolutamente obbligatorio per il progetto che tutti i file dello stesso siano sistemati dentro una cartella principale. Questo per evitare di linkare dei file che si trovano da altre parti (ad es. in una cartella separata, sul desktop del proprio pc), prendendone in considerazione magari solo il nome.

Un'altra considerazione è quella di scrivere il nome del file esattamente come è scritto sul disco. Per es. se il file si chiama image.jpg deve essere riportato esattamenta così come è scritto, senza spazi, includendo l'estensione del file, scrivendo correttamente la punteggiatura e differenziando maiuscole e minuscole. Infatti può confondere il fatto che, image.jpg sia per il browser diverso da IMAGE.JPG.

Ultimo suggerimento è quello di non utilizzare per i nomi dei file, parole che abbiano degli spazi, ma al massimo utilizzare il carattere trattino _ per unire le parole. Ad esempio bella immagine.jpg non è un modo corretto di nominare un file per il Web, mentre bella_immagine.jpg è il modo corretto. Ovviamente il discorso vale sia per i file che per le cartelle.

^ Inizio pagina

Ricerca personalizzata


Lezione successiva successiva

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

Indice