Gli attributi di un tag

I parametri addizionali degli elementi

creativecode avatar Giulio Tiseo

27 Giu, 2019

~1min.

In questo articolo ti parlerò degli attributi di un tag HTML. Gli attributi rappresentano una componente fondamentale dei tag HTML perché permettono di applicare dei parametri addizionali sugli elementi, allo scopo di definire in modo più completo alcune caratteristiche o configurazioni ad esso associate.

Requisiti

Questo articolo prevede che tu sappia esattamente cos’è un tag HTML. La lettura dell’articolo relativo a tale argomento (Primi passi con il linguaggio HTML) è di fondamentale importanza per poter sapere cosa rappresentano gli attributi nel linguaggio HTML. 

# Come si scrivono gli attributi

Attraverso gli attributi potrai apportare degli aggiustamenti o regolare il comportamento degli elementi.

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 puoi vedere gli attributi sono specificati entro le parentesi angolari che delimitano il tag di apertura.

È vero, in queste fasi iniziali della Guida base all’HTML non hai ancora affrontato un numero accettabile di tag per poter sfruttare al 100% le potenzialità degli attributi. Tuttavia, nei prossimi articoli il tuo vocabolario si arricchirà e potrai sperimentare per ciascun elemento le nuove possibilità che gli attributi ti offrono. A tal proposito ti consiglio di tenere d’occhio le reference delle MDN web docs che illustrano in modo chiaro ed esauriente gli attributi che potrai applicare sui singoli elementi.

Proviamo per esempio ad applicare un attributo che permette di allineare al centro un titolo. Per eseguire questa operazione puoi sfruttare l’attributo align, vediamo come:

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

In questo caso il valore center indica la posizione che deve assumere il titolo nella pagina.

# Esercizio: replica la struttura della pagina

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

[immagine]

# Esercizio creativo sugli attributi

Ti voglio mettere ulteriormente alla prova con un altro esercizio.

Saresti in grado di replicare una rappresentazione del genere? Riesci a capire di quale elemento si tratta?

Ricorda di consultare la MDN reference se hai dubbi sugli attributi da applicare.

<!-- 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">

Nella prossima lezione abbandoneremo codepen.io e inizierai da zero un tuo progetto in HTML, definendo tutti i tag fondamentali che costituiscono il cosiddetto boilerplate, ovvero il template di base di una pagina web.

Lascia un commento

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