Etichettare un singolo elemento del nostro sito per identificarlo e modificarlo in seguito

2022-06-12 18:33:36

Ciao a tutte e tutti voi!
Continua il nostro viaggio in cui stiamo imparando come funzionano i siti web sotto il cofano e come possiamo imparare a creare delle pagine Internet a partire da zero.
Il contenuto di oggi è piuttosto breve ma introduce un attributo, chiamato id, che avrà una grande importanza nel nostro percorso e ci permetterà di etichettare in modo univoco un singolo elemento del nostro sito per poi selezionarlo o richiamarlo in seguito, modificarne le proprietà in modo specifico e individualizzato e fare delle operazioni particolari che toccano solo l'elemento in questione.
Se conoscete persone interessate a questi temi e con la curiosità di capire come funziona il web passettino dopo passettino vi invito a proporre loro questo canale.
Ringrazio tutte le persone che si sono iscritte al canale e che hanno supportato questo progetto utilizzando l'opzione sostieni sotto ai contenuti pubblicato o nella pagina del canale.
Chi lo desidera può anche sostenere questo canale con un piccolo contributo mensile regolare entrando così a fare parte dell'Iper-Team (o I-Team): l'area riservata in cui potrete trovare contenuti aggiuntivi, riflessioni e dietro le quinte che non si troveranno nella zona pubblicamente accessibile del canale.
I contenuti specifici di questa sezione sono in preparazione e verranno lanciati in una prossima diretta su questo canale giovedì 16 giugno 2022.
Detto questo vi lascio e vi auguro una buona visone e una buona lettura, ricordandoci sempre che condividendo si impara!

L'utilità di identificare un elemento

Negli scorsi contenuti abbiamo imparato come possiamo selezionare e modificare in blocco e in un colpo solo tutti gli elementi di un certo tipo presenti nella nostra pagina. Ad esempio tutti i titoli, tutti i paragrafi, tutti i link,...

Abbiamo poi visto come possiamo modificare in gruppo solo gli elementi a cui abbiamo attribuito delle classi lasciando invariati gli altri elementi dello stesso tipo ma che non fanno parte della classe in questione. Ad esempio fare in modo che tutti i titoli con la classe call-to-action siano di colore rosso mentre quelli senza rimangano neri.

Oggi vedremo come possiamo selezionare individualmente un unico elemento della nostra pagina attraverso l'attributo id, che agisce un po' come un'etichetta univoca apposta soltanto all'elemento in questione.

Si tratta di una funzione importante che completa le due precedenti al massimo livello di specificità e permette ad esempio di identificare proprio un determinato titolo e renderlo la destinazione di un link interno e altre operazioni simili.

Insomma, ogniqualvolta è necessario trovare esattamente quell'elemento lì per fare una qualsiasi operazione sulla pagina ecco che ci tornerà utile l'attributo id.

L'id di un elemento

Questo attributo, che useremo tantissimo nel nostro percorso e diventerà indispensabile per fare una serie di operazioni estremamente diffuse e importanti, si presenta come tutti gli altri attraverso una parola chiave seguita dal segno matematico dell'uguale e il valore dell'attributo tra virgolette.

Ad esempio:

<h2 class="capitolo" id="capitolo-2">Capitolo 2</h2>

Quanto sopra indica un titolo di secondo livello con la classe che definisce le proprietà dei titoli dei capitoli in generale e l'attributo id che invece identifica in maniera specifica ed univoca proprio solo e soltanto il capitolo 2.

Utilissimo nel caso in cui nella nostra pagina volessimo mettere un indice con un link interno che porta proprio a quel titolo lì.

Ad esempio:

<a href="#capitolo-2">vai al capitolo 2 qui sotto</a>

In questo caso il link non porterà ad un'altra pagina ma all'identificativo il cui nome si trova dopo il cancelletto.

Cancelletto: il selettore degli id

Vediamo quindi che id è la parola chiave che serve ad attribuire un identificativo univoco a un elemento mentre cancelletto (#) è il simbolo che serve a selezionare quel determinato identificativo.

Se, per qualche ragione, volessimo cambiare solo il colore del secondo capitolo dovremmo quindi selezionarlo nella sezione style della nostra pagina in questo modo:

<style>

#capitolo-2 {

color: red;

}

</style>

Finisce qui questo contenuto breve ma fondamentale perché nel nostro percorso vedremo che contrassegnare e selezionare singoli elementi di una pagina web sarà la base di un sacco di altre operazioni utili e necessarie per creare dei siti web moderni e professionali.

Come contribuire allo sviluppo del nostro gruppo di studio

Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.

V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.

Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove.

Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!

Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!

E non dimentichiamoci che condividendo si impara!!