Teoria
Teoria

Attributi dei tag HTML

Nel compito precedente, come avete notato, non è successo nulla dopo aver inserito il tag <img> nel codice. Perché è successo?

I tag possono avere attributi. Alcuni tag hanno bisogno di attributi. Ad esempio, il tag <img>, che indica un'immagine. È obbligatorio specificare l'attributo src, che indica l'indirizzo dell'immagine (altrimenti il browser non sarà in grado di caricarla).

Un tag può avere più attributi:

<nome-tag attributo1="valore1" attributo2="valore2" ...>.

Ecco alcuni esempi:

<p class="important">...</p>
<a class="external" href="https://mysite.com">...</a>
<img class="avatar" src="keks.png">

In questo compito, vi eserciterete a usare gli attributi dei tag.

Non dimenticate gli spazi tra il nome del tag e l'attributo e gli spazi tra gli attributi.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Attributi dei tag HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Cupcake dell'istruttore</h1> <p>Nei corsi che seguono, sarete spesso aiutati a padroneggiare le complessità di HTML e CSS dall'istruttore Cupcake. Diamogli la possibilità di presentarsi:</p> <img> <hr> <blockquote> <p>Ciao, mi chiamo Cupcake e sono il tuo futuro istruttore. Sono una sviluppatrice web. I miei progetti più famosi:<br> il blog Cat Energy,<br> il corso di HTML e CSS,<br> il corso di JavaScript.</p> <p>Ci vediamo nei prossimi corsi!</p> </blockquote> </body> </html>

CSS

body { font-family: "Georgia", serif; } blockquote { margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background-color: #f9f9f9; border-left: 2px solid #cccccc; } /* Esempio di design fotografico */ .photocard { display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666666; }

ObiettiviFatto

Al tag img, aggiungere un attributo src con il valore keks.jpg,
e poi un altro attributo class con il valore photocard.