Lezione 5 – Attributi

Attributi HTML

  • Tutti gli elementi HTML possono avere  attributi
  • Gli attributi forniscono  informazioni aggiuntive  su un elemento
  • Gli attributi sono sempre specificati nel  tag di inizio

L’attributo href

Link HTML vengono definite con il  <a> tag. L’indirizzo del collegamento è specificato nel attributo href :

Esempio

<a href=”https://www.w3schools.com”>Questo è un link</a>

Potrete saperne di più su link e il  <a> tag più avanti in questo tutorial.


L’attributo src

Immagini HTML sono definiti con il  tag<img> .

Il nome della sorgente dell’immagine è specificato nel  src attributi:

Esempio

<img src=”img_esempio.jpg”>

Gli attributi di larghezza e altezza

Immagini in HTML hanno una serie di  dimensioni  attributi, che specifica la larghezza e l’altezza dell’immagine:

Esempio

<img src=”img_esempio.jpg” width=”500″ height=”600″>

La dimensione dell’immagine è specificato in pixel: larghezza =”500″ indica una larghezza di 500 pixel.


L’attributo alt

L’  alt attributo specifica un testo alternativo da usare, quando un’immagine non può essere visualizzata.

Esempio

<img src=”img_esempio.jpg” alt=”Esempio errore”>

L’  alt attributo è utile anche se l’immagine non esiste.



L’attributo di stile

Lo  style attributo viene utilizzato per specificare lo stile di un elemento, come il colore, font, dimensioni, ecc

Esempio

<p style=”color:red”>Paragrafo</p>

L’attributo lang

La lingua del documento può essere dichiarato in  <html> etichetta.

Il linguaggio viene dichiarata con l’attributo  lang.

La dichiarazione di una lingua è importante per le applicazioni di accessibilità (lettori di schermo) e motori di ricerca:

<!DOCTYPE html>
<html lang=”en-US”>
<body></body>
</html>


Il titolo attributo

Qui, un attributo title viene aggiunto all’elemento<p>. Il valore dell’attributo titolo verrà visualizzato come suggerimento quando il mouse sopra il paragrafo:

Esempio

<p title=”I’m a tooltip”>
Paragrafo
</p>

Vi suggeriamo: Usa le minuscole per Attributi

Lo standard HTML5 non richiede nomi degli attributi in minuscolo.

L’attributo title può essere scritto con caratteri maiuscoli o minuscoli come  titolo  o  TITLE .


Vi suggeriamo: Virgolette nei valori degli attributi

Lo standard HTML5 non richiede virgolette valori degli attributi.

L’  href attributo dimostrato sopra,  può  essere scritto senza virgolette:

Sbagliato

<a href=https://www.w3schools.com>

Giusto

<a href=“https://www.w3schools.com“>

A volte è  necessario  utilizzare le virgolette. Questo esempio non visualizza l’attributo title correttamente, perché contiene uno spazio:

Esempio

<p title=About W3Schools>

citazioni che utilizzano sono i più comuni. citazioni omettendo possono produrre errori.


Virgolette singole o doppie?

Doppi apici intorno valori degli attributi sono i più comuni in HTML, ma le virgolette singole possono anche essere utilizzate.

In alcune situazioni, quando il valore dell’attributo stesso contiene virgolette, è necessario utilizzare gli apici:

<p title=’Mario “IlGrande” Rossi’>

O vice versa:

<p title=”Mario ‘IlGrande’ Rossi”>

Riassunto lezione

  • Tutti gli elementi HTML possono avere  attributi
  • L’attributo title  fornisce ulteriore “tool-tip” informazioni
  • L’attributo  href  fornisce informazioni di indirizzo per i collegamenti
  • Gli attributi width e  height  forniscono informazioni di formato per le immagini
  • L’attributo  alt  fornisce il testo per gli screen reader

Precedente Lezione 4 - Elementi Successivo Effettuato il Jailbreak su iPhone XS