Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

Attributi HTML


Gli attributi HTML forniscono informazioni aggiuntive sugli elementi HTML.


Attributi HTML

  • Tutti gli elementi HTML possono avere attributi
  • Gli attributi forniscono informazioni aggiuntive sugli elementi
  • Gli attributi sono sempre specificati nel tag di inizio
  • Gli attributi di solito si trovano in coppie nome/valore come: name="value"

L'attributo href

Il <a>tag definisce un collegamento ipertestuale. L' hrefattributo specifica l'URL della pagina a cui va il collegamento:

Esempio

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

Imparerai di più sui collegamenti nel nostro capitolo Collegamenti HTML .


L'attributo src

Il <img>tag viene utilizzato per incorporare un'immagine in una pagina HTML. L' srcattributo specifica il percorso dell'immagine da visualizzare:

Esempio

<img src="img_girl.jpg">

Esistono due modi per specificare l'URL src nell'attributo:

1. URL assoluto : collegamenti a un'immagine esterna ospitata su un altro sito Web. Esempio: src="https://www.w3schools.com/images/img_girl.jpg" .

Note: le immagini esterne potrebbero essere protette da copyright. Se non ottieni il permesso per usarlo, potresti violare le leggi sul copyright. Inoltre, non puoi controllare le immagini esterne; può essere improvvisamente rimosso o modificato.

2. URL relativo : collegamenti a un'immagine ospitata all'interno del sito Web. Qui, l'URL non include il nome di dominio. Se l'URL inizia senza una barra, sarà relativo alla pagina corrente. Esempio: src="img_girl.jpg". Se l'URL inizia con una barra, sarà relativo al dominio. Esempio: src="/images/img_girl.jpg".

Suggerimento: è quasi sempre meglio utilizzare URL relativi. Non si romperanno se cambi dominio.


Gli attributi di larghezza e altezza

Il <img>tag dovrebbe contenere anche gli attributi widthe height, che specificano la larghezza e l'altezza dell'immagine (in pixel):

Esempio

<img src="img_girl.jpg" width="500" height="600">

L'attributo alt

L' altattributo richiesto per il <img> tag specifica un testo alternativo per un'immagine, se l'immagine per qualche motivo non può essere visualizzata. Ciò può essere dovuto a una connessione lenta, a un errore srcnell'attributo o se l'utente utilizza un'utilità per la lettura dello schermo.

Esempio

<img src="img_girl.jpg" alt="Girl with a jacket">

Esempio

Guarda cosa succede se proviamo a visualizzare un'immagine che non esiste:

<img src="img_typo.jpg" alt="Girl with a jacket">

Imparerai di più sulle immagini nel nostro capitolo Immagini HTML .



L'attributo di stile

L' styleattributo viene utilizzato per aggiungere stili a un elemento, ad esempio colore, carattere, dimensione e altro.

Esempio

<p style="color:red;">This is a red paragraph.</p>

Imparerai di più sugli stili nel nostro capitolo Stili HTML .


L'attributo lang

Dovresti sempre includere l' langattributo all'interno del <html>tag, per dichiarare la lingua della pagina Web. Questo ha lo scopo di aiutare i motori di ricerca e i browser.

L'esempio seguente specifica l'inglese come lingua:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

I codici paese possono anche essere aggiunti al codice della lingua lang nell'attributo. Quindi, i primi due caratteri definiscono la lingua della pagina HTML e gli ultimi due caratteri definiscono il paese.

L'esempio seguente specifica l'inglese come lingua e gli Stati Uniti come paese:

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

Puoi vedere tutti i codici della lingua nella nostra Guida ai codici della lingua HTML .


Il titolo Attributo

L' titleattributo definisce alcune informazioni extra su un elemento.

Il valore dell'attributo title verrà visualizzato come suggerimento quando si passa il mouse sopra l'elemento:

Esempio

<p title="I'm a tooltip">This is a paragraph.</p>

Si consiglia di utilizzare sempre gli attributi minuscoli

Lo standard HTML non richiede nomi di attributi in minuscolo.

L'attributo title (e tutti gli altri attributi) può essere scritto con lettere maiuscole o minuscole come title o TITLE .

Tuttavia, il W3C consiglia attributi minuscoli in HTML e richiede attributi minuscoli per tipi di documenti più severi come XHTML.

A W3Schools utilizziamo sempre nomi di attributi minuscoli.


Si consiglia di citare sempre i valori degli attributi

Lo standard HTML non richiede virgolette attorno ai valori degli attributi.

Tuttavia, il W3C consiglia virgolette in HTML e richiede virgolette per tipi di documenti più rigidi come XHTML.

Buono:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Male:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

A volte devi usare le virgolette. Questo esempio non visualizzerà correttamente l'attributo title, perché contiene uno spazio:

Esempio

<p title=About W3Schools>

 In W3Schools utilizziamo sempre le virgolette attorno ai valori degli attributi.


Citazioni singole o doppie?

Le virgolette doppie attorno ai valori degli attributi sono le più comuni in HTML, ma possono essere utilizzate anche virgolette singole.

In alcune situazioni, quando il valore dell'attributo stesso contiene virgolette doppie, è necessario utilizzare virgolette singole:

<p title='John "ShotGun" Nelson'>

O vice versa:

<p title="John 'ShotGun' Nelson">

Riassunto capitolo

  • Tutti gli elementi HTML possono avere attributi
  • L' hrefattributo di <a>specifica l'URL della pagina a cui va il collegamento
  • L' srcattributo di <img>specifica il percorso dell'immagine da visualizzare
  • Gli attributi widthe di forniscono informazioni sulle dimensioni delle immaginiheight<img>
  • L' altattributo di <img>fornisce un testo alternativo per un'immagine
  • L' styleattributo viene utilizzato per aggiungere stili a un elemento, ad esempio colore, carattere, dimensione e altro
  • L' langattributo del <html>tag dichiara la lingua della pagina Web
  • L' titleattributo definisce alcune informazioni extra su un elemento

Esercizi HTML

Mettiti alla prova con gli esercizi

Esercizio:

Aggiungi un "tooltip" al paragrafo sottostante con il testo "About W3Schools".

<pag ="Informazioni su W3Schools">W3Schools è un sito per sviluppatori web.</p>


Riferimento attributi HTML

Un elenco completo di tutti gli attributi per ogni elemento HTML è elencato nel nostro: HTML Attribute Reference .