Gli attributi di un tag

In genere è possibile applicare nei tag HTML uno o più attributi, ovvero dei parametri addizionali che permettono di definire in modo più completo alcune caratteristiche o configurazioni dell’elemento. Attraverso gli attributi possiamo apportare degli aggiustamenti o regolare il comportamento degli elementi in modo da soddisfare gli standard di lettura degli utenti.

Come si scrivono gli attributi

Gli attributi sono definiti all’interno del tag ed è possibile dichiararli attraverso una coppia chiave valore. Vediamo la sintassi per applicare un attributo ad un tag.

<elemento attributo="valore"></elemento>

Come potete osservare gli attributi sono specificati entro le parentesi angolari che delimitano il tag di apertura.

In questo momento non potete ancora attingere ad un una vasta gamma di tag, ma nel corso delle lezioni il vostro vocabolario si arricchirà. Vi consiglio di tenere d’occhio – lezione dopo lezione – le reference delle MDN web docs che illustrano in modo chiaro ed esauriente gli attributi che possiamo applicare sui singoli elementi.

Potete fare una prova di utilizzo dell’attributo align applicandolo ad un <h1> per allineare al centro della pagina il titolo.

<h1 align="center">Gli attributi by Creative Code</h1>

In questo caso il valore center indica la posizione che deve assumere il titolo nella sua area di blocco.

Esercizio: replica la struttura della pagina

È ora di mettere in pratica le nozioni apprese nel corso di queste lezioni. Vediamo di fare pratica con i tag HTML cercando di replicare su codepen la struttura di questa pagina:

[immagine]

Esercizio sugli attributi

Vi voglio mettere ulteriormente alla prova con un altro esercizio.

Sareste in grado di replicare una rappresentazione del genere? Riuscite a capire di quale elemento si tratta?

Ricordate di consultare la MDN reference se avete dubbi sui singoli attributi da applicare all’elemento.

<!-- immagine di -->
<hr size='10' width="30">
<hr size="10" width="60">
<hr size="10" width="90">
<hr size="10" width="120">
<hr size="10" width="150">
<hr size="10" width="180">

Dai, iniziate a sperimentare con il codice e gli elementi HTML… siate creativi!

Nella prossima lezione abbandoneremo codepen.io per iniziare da zero un nostro progetto in HTML, definendo tutti i tag fondamentali che costituiscono il cosiddetto Boilerplate.

Lascia un commento

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