HTML - Il Tag "Link" e Richiamare risorse esterne

Vuoi richiamare risorse esterne e documenti .css all’interno di una pagina HTML? Vuoi collegare i fogli di stile separati per alleggerire la pagina del tuo sito?

L’HTML ed il CSS sono i principali linguaggi utilizzati per creare e gestire un sito o una pagina web. Non richiedono un grande sforzo per l’apprendimento ma solo un bel po’ di pratica e scrittura.

Come abbiamo visto anche in altri articoli, è possibile realizzare pagine web HTML e fogli di stile CSS in totale autonomia, non direttamente collegati. Questo significa che i file con estensione .html e .css vengono scritti e modificati separatamente l’uno dall’altro.
Ciò permetterà un maggiore controllo e ordine all’interno del documento e consentirà anche di utilizzare gli stessi fogli CSS per più pagine dello stesso sito web.

Nel momento in cui viene aperta una pagina con un browser, automaticamente verranno richiamati e letti tutti i file utili per il corretto funzionamento e rendering della pagina. In poche parole tutti i fogli di stile CSS verranno richiamati in automatico dal browser come risorse esterne.

Questo ragionamento vale sia per fogli di stile CSS, ma anche con documenti Javascript, JQuery o PHP, anche se in modo differente tra loro.

Richiamare risorse esterne CSS

Come si collegano i file CSS all’interno di una pagina?

In HTML per richiamare risorse esterne all’interno di una pagina, vanno utilizzati degli specifici tag in base al loro formato. Nel caso di fogli di stile CSS è il tag “link“ che dovremo utilizzare.

All’interno di questo tag va specificato l’intero percorso/path del file esterno in formato .css e definire l’attributo rel=”” come istruzione per il browser. Il tag va inserito nel head della pagina HTML.

Vediamo ora meglio come va impostato correttamente e con un esempio pratico:

<head>
  <link rel="stylesheet" type="text/css" href="file.css">
</head>

Da questo codice possiamo notare che:

Il tag “link” va inserito all’interno di “head”;
l’attributo rel=”” specifica la relazione tra il documento corrente e quello collegato, in questo caso “stylesheet” (foglio di stile);
l’attributo type=”” determina la tipologia del file che verrà richiamato (il formato);
href=”” serve ad indicare il percorso/path del file (esempio: desktop/cartella/file.css);

Il codice precedente è valido esclusivamente per richiamare un file di tipo CSS, ma sono disponibili anche altre tipologie di attributi per differenti tipi di documenti.

Per maggiori informazioni visitare il sito ufficiale w3school.com

Codice di esempio/esercitazione

Copiare ed incollare il seguente codice in un nuovo file e rinominarlo style.css.

* {
background-color:red;
}
body {
color:white;
font-size:20pt;
}
h1 {
color:blue;
fint-size:40pt;
}
a {
font-size:25pt;
color:yellow;
}

Ora copiare il codice in basso ed incollarlo in un altro file sotto il nome di page.html .

<html>
  <head>
<title>Nuova pagina da BytePost </title>
     <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
     <h1>Questo è il titolo della mia pagina</h1>
     <p>Hello world! Questo è il primo paragrafo della mia pagina web in HTML</p>
     <p> questo è il secondo paragrafo. <a href="https://www.byte-post.com" title="visita BytePost">Visita BytePost</a></p>
  </body>
</html

Creare una nuova cartella ed inserire entrambi i file al sue interno, dopodiché aprire il file page.html con un browser.

Prova il nostro editor di codice HTML online ed impara a realizzare siti web

Vuoi restare aggiornato sul nostro corso di HTML?

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Il corso completo di HTML e CSS

⇦ I meta tag

Tag “a” e attributi ⇨

Articoli Recenti