Come includere CSS e JS

Sommario:
Questa pagina e` una continuazione della guida Come creare un sito da zero, passo a passo..

Come includere il foglio di stile (CSS)

Come già detto all'inizio della guida, il layout del sito è determinato dal CSS o foglio di stile.

E` sempre possibile e quasi sempre opportuno, includere il codice css tramite un file esterno. Perche`? Perchè in questo modo, al momento di creare una nuova pagina del sito, non dovremo più riscrivere tutto il codice css, ma solo inserire il link che lo richiama. Non solo, ma la cosa sarà molto utile anche per effettuare, in seguito, modifiche. Basterà, infatti, modificare le impostazioni del foglio di stile esterno per vedere i cambiamenti applicati a tutte le pagine che sono ad esso collegate.

Vediamo, quindi, come creare un file .css che conterrà tutto il codice CSS che comanderà l'aspetto del nostro sito.

NOTA: nei passi successivi, illustrerò come separare il codice css dal codice html, nel caso in cui vi sia già stato inserito. Se, invece, partite da un layout iniziale con i due codici già separati, potete passate direttamente al puntoCome collegare il file.css esterno.

Separare il codice css dal codice html della pagina:

Aprite il codice html di una pagina tramite l'editor, come avete imparato a fare (mi raccomando, lavorate sempre su una copia).
Tagliate e prelevate tutto il corpo del codice css senza i tag, cioe` la parte che sta al posto di "CODICE CSS" e che ho segnato in rosso nell'esempio sotto:<html>

<head>
<style type="text/css">
CODICE CSS
</style>
</head>
<body>
contenuti pagina
</body>
</html>

Incollatelo in un nuovo file di testo. Rinominate il file e dategli estensione .css. Io lo chiamerò, semplicemente, file.css.

Nel codice della pagina rimasto dopo aver tolto la parte css, dovete cancellare i tag <style type="text/css"></style>, che erano serviti per inserire il codice css nel codice html. Li vedete, in rosso, qui sotto..

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
contenuti pagina
</body>
</html>

Il codice risultante sarà, quindi, così:

<html>
<head>
</head>
<body>
contenuti pagina
</body>
</html>

Collegare il file.css alla pagina:

Ora, dobbiamo mettere tra i tag <head></head> il link che richiamerà il file.css (foglio di stile). Questo è il link che dovete usare:
<link rel="stylesheet" type="text/css" href="file.css">

Al posto di file.css dovete mettere il nome del vostro file.css (foglio di stile). Questo file dovrà essere nella stessa cartella delle pagine del sito. Se si trovasse in un'altra cartella, sarebbe necessario scriverne il percorso esatto, come già visto in precedenza per i file delle pagine.

Es: cartella/file.css

Alla fine, il nostro codice html risulterà composto così:

<html>
<head>
<link rel="stylesheet" type="text/css" href="file.css">
</head>
<body>
contenuti pagina
</body>
</html>

Perfetto, ora, se proverete ad aprire questa pagina del sito di test che stiamo progettando, vedrete che avrà esattamente le stesse caratteristiche delle altre pagine che avevano il codice css incorporato.
Fate lo stesso lavoro su tutte le pagine, compresa la pagina index.

Ecco fatto, da questo momento, se farete delle modifiche al foglio di stile, queste modifiche si rifletteranno, in automatico in tutte le pagine del sito in cui il foglio viene richiamato.
E` possibile creare più fogli di stile, se fosse necessario. Per esempio nel caso in cui si volesse dare un aspetto diverso ad una pagina rispetto alle altre pagine.

Per approfondimento leggi: "Il foglio di stile.

Come includere un file javascript (JS)

Qualunque codice javascript può essere inserito direttamente nella sezione "head", o nella sezione "body" del codice html di una pagina, racchiudendolo tra questi tag:

<script>
codice
</script>

Se il codice è lungo e complesso, però, il metodo normalmente utilizzato è quello di includerlo tramite un file esterno, richiamato in questo modo:
<script src="file.js"></script>

Dove inserire il codice javascript:

Sezione HEAD:
In questa sezione si mettono gli script che è necessario far caricare prima che la pagina venga visualizzata. Per esempio, quelli che servono per la corretta visualizzazione del layout.

Sezione BODY:
In questa sezione si mettono gli script che possono essere attivati dopo la visualizzazione della pagina.

La scelta della posizione è importante per la velocità di caricamento della pagina. È inutile, quindi, inserire nella sezione head gli script non necessari e che rallenterebbero il caricamento.




Ok, adesso che la parte impegnativa e` stata superata, vi potete divertire a modificare il vostro sito, ma voglio darvi ancora un consiglio: per fare gli "esperimenti", create sempre una copia della cartella che contiene il sito di base e lavorate su quella. Allo stesso modo, quando ottenete un buon risultato, per provare altri cambiamenti, fatene un'ulteriore copia. In poche parole, mettete sempre da parte le imprese ben riuscite, per non rischiare di rovinarle :-))






Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No



Continua con....I contenuti del sito ->>
Elenco argomenti di questa guida:
Torna alla pagina principale:Creare un sito da zero ->>


E molto altro ancora se leggi:
Tutti gli argomenti