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 è un identificatore, che si può aggiungere a qualunque tag HTML, anche nel tag <body>. Puoi assegnargli qualsiasi nome, purché non contenga spazi.

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

È preferibile non utilizzare 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 applicare uno stile a <body>, bisogna utilizzare il linguaggio CSS all’interno del tag <style>, che vedremo più avanti. Per selezionare il tag <body>, utilizziamo il suo id preceduto da #. Per esempio, impostiamo di rosso lo sfondo della pagina:

<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. In questo caso puoi utilizzare 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 in precedenza, la stessa classe può essere assegnata a più tag, per non riscrivere lo stesso stile nel CSS, per esempio.

Esempio

Utilizzando CSS, il valore dell'attributo 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 quando un modulo viene inviato. L’attributo name funziona in modo simile all'attributo 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>