logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Gli identificativi degli elementi

Linguaggi come CSS, JavaScript e PHP (disponibili sul sito) utilizzano degli identificatori, per trovare determinati tag in cui questi sono contenuti. Adesso, utilizzando solo HTML potrebbero sembrare inutili, ma sono estremamente importanti.

Gli id

L’attributo id=”valore” sono degli identificatori, che si possono inserire in qualunque tag, anche in body. Come valore puoi inserire qualsiasi nome preferisci, ma senza spazi.

<body id="contenuto_della_pagina">
  <!-- Contenuto -->
</body>

È preferibile che non si inserisca lo stesso valore di id in più tag, perché è un identificatore univoco.

Esempio

Gli id possono essere utilizzati, ad esempio, per gli stili degli elementi. Per dare uno stile a <body>, bisogna utilizzare il linguaggio CSS all’interno del tag <style>, che vedremo più avanti. Per richiamare proprio il tag <body>, utilizziamo il suo id preceduto da “#”. Per esempio, inseriamo lo sfondo della pagina rosso.

<head>
  <style>
    #contenuto
    {
      background-color:red;
    }
  </style>
</head>
 
<body id="contenuto">
  <p>Ciao</p>
</body>

Le classi

Se vuoi riutilizzare lo stesso stile, non puoi utilizzare l'id, perché può essere assegnato soltanto ad un elemento. Invece, puoi usare l’attributo class=”valore”. Come valore puoi inserire qualsiasi nome preferisci, ma sempre senza spazi. Le classi sono molto utilizzate nel CSS.

<body class="contenuto_della_pagina">
  <!-- Contenuto -->
</body>

Come detto prima, la stessa classe può essere ripetuta più volte nei vari tag, per non riscrivere lo stesso stile nel CSS, per esempio.

Esempio

Utilizzando CSS, il valore che si inserisce in class deve essere preceduto da “.”. Per esempio, inseriamo lo sfondo della pagina rosso.

<head>
  <style>
    .contenuto
    {
      background-color:red;
    }
  </style>
</head>
 
<body class="contenuto">
  <p>Ciao</p>
</body>

I nomi

Nei moduli che vedremo nelle lezioni successive, l’attributo name=”valore” sarà molto importante per salvare i dati dopo che un modulo è stato inviato. L’attributo name ha simile funzionamento di id.

<body name="contenuto_della_pagina">
  <!-- Contenuto -->
</body>

Come con id, anche in name è preferibile non riutilizzare lo stesso valore in più tag.

Prova!Scegli l'opzione corretta tra quelle elencate.
<style>.testo {color:red;} <style>
<p __="testo">Questo testo è rosso</p>
Prossima lezione