HTML - Gli Attributi

  »   HTML di base  »   HTML Tutorial - Attributs

Gli attributi sono utilizzati per personalizzare le etichette. Questo non significa altro che, se si volesse un giorno modificare le dimensioni di un'immagine, il colore di un testo o di una tabella, è possibile farlo attraverso la modifica dei suoi attributi.

La maggior parte delle etichette hanno i proprio attributi. Nelle nuove tag che conosceremo più avanti impareremo a impostare degli attributi generici che possono essere utilizzati con la maggior parte delle etichette.

Gli attributi sono collocati all'interno dell'etichetta di apertura.

Gli attributi "class" e "id"

Questi due attributi sono molto simili. Non influenzano direttamente la formattazione degli elementi ma sono molto utili con l'aiuto del linguaggio CSS. proprio per questo motivo andremo a parlarne in maniera più dettagliata quando affronteremo la sintassi e l'utilizzo del codice CSS.

L'idea è che quando si vuole impostare una classe di etichette che verranno poi utilizzate in seguito con l'aiuto del CSS, si può fare la differenza tra due tag identici ma con attributi diversi.

The idea is that when you want to set a class of tags for being used later with the help of CSS, you can make the difference between two identical tags but with different attributes. Dai un'occhiata al prossimo esempio:

html<p id="italicparagraph">Paragrafo 1, italic </p>
<p id="boldparagraph">Paragraph 2, bold </p>

HTML - L'attributo "name"

L'attributo "name" è un po' diverso da quelli visti in precedenza. L'elemento con l'attributo "name" diventa infatti una variabile utilizzabile attraverso JavaScript, ASP e PHP. Questo attributo lo si incontra molto spesso nelle formulazioni e in altri campi di testo interattivi.

html<input type="text" name="TextField" />

Demo

Questo attributo non ha alcun effetto sulla visualizzazione della casella di testo, anche se sullo sfondo gioca un ruolo molto importante.

HTML - L'attributo "title"

Questo attributo è utilizzato raramente. Esso aggiunge un titolo (pop-up) ad ogni elemento del contenuto. Questo attributo non va dimenticato. Attraverso esso infatti è possibile dire quasi tutto quello che si vuole. La visualizzazione appare quando ci si ferma con il mouse per qualche secondo sopra il contenuto.

html<h2 title="Sono l'attributo del titolo!!">Titolo</h2>

Demo

Titolo

Passando con il mouse sopra al titolo potrai così vedere il suo attributo. Anche se poco utilizzato questo attributo è quindi molto importante in determinate situazioni

HTML - L'attributo "align"

Con l'attributo "align" è possibile allineare un determinato elemento in una determinata posizione. E' possibile allineare a sinistra a destra e al centro qualsiasi elemento. Nel caso non venga specificato nulla l'allineamento di default è a sinistra.

html<h2 align="center">Titolo centrato </h2>

Demo

Titolo centrato

Altri esempi:

html<h2 align="left">Titolo allineato a sinistra </h2>
<h2 align="center">Titolo centrato </h2>
<h2 align="right">Titolo allineato a destra </h2>

Demo

Titolo allineato a sinistra

Titolo centrato

Titolo allineato a destra

I valori di default degli attributi

La maggior parte delle etichette hanno degli attributi standard che vengono assunti in caso di mancata specificazione dell'attributo. Ad esempio un paragrafo senza specificazione dell'attributo "align" verrà allineato a sinistra.

Attributi generici

Gli attributi sono essenziali per il design degli elementi di una pagina web. In questa tabella puoi trovare i principali attributi utilizzati in HTML:

AttributeOptionsFunction
alignright, left, centerAllineamento orizzontale.
valigntop, middle, bottomAllineamento verticale.
bgcolorvalore numerico, esadecimale o RGBUno sfondo dietro un elemento.
backgroundURLUn'immagine dietro un elemento.
idDefinito dall'utenteNomi un elemento che verrà utilizzato con i CSS.
classDefinito dall'utenteClassifica un elemento che verrà utilizzato con i CSS.
widthValore numericoSpecifica la larghezza di una tabella, un'immagine o una tabella.
heightValore numericoSpecifica l'altezza di una tabella.
titleDefinito dall'utentemostra un titolo per un elemento.