tag link richiamare risorse esterne HTML

Imparare l’HTML – Tag link e richiamare risorse esterne

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: cioè la struttura delle pagine in file .html e le regole di stile in file .css.
Questo permetterà un maggiore controllo e ordine all’interno del codice e consentirà di utilizzare gli stessi fogli CSS per più pagine.

Dal momento in cui apriamo un sito web con un browser, automaticamente quest’ultimo unirà tutti i file sorgente in un unica pagina. In poche parole tutte le regole CSS, script e comandi verranno richiamati e riscritti in automatico all’interno della pagina HTML e visualizzata a schermo dal browser.

All’interno di un sito possiamo richiamare anche altri tipi di risorse, come: font e set di caratteri speciali, regole di visualizzazione e funzioni javascript e php.

il tag <link>

Come si collegano i file all'interno di una pagina?

Per richiamare risorse esterne all’interno di una pagina, dovremo utilizzare l’apposito tag <link …>, e specificare la tipologia di ogni file e path (percorso).

Di seguito un esempio per richiamare un file .css all’interno di uno .html:

<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;
  • href=”” serve ad indicare il percorso/path del file;

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.

body {
background-color:red;
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 e seguici su Facebook.


Leggi anche: I meta tag HTML, cosa cono?

Il corso completo di HTML e CSS

Articoli Recenti

Condividi ora!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA