HTML for Kids · Lezione

Colori e sfondi

Aggiunga colori e sfondi per rendere più vivace la Sua pagina

Colori e sfondi è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 4 lezioni in totale.

Colori e sfondi

Benvenuto alla prossima lezione! Oggi impareremo ad aggiungere colori e sfondi alla Sua pagina web per renderla più vivace e visivamente accattivante.

Perché usare colori e sfondi?

Colori e sfondi possono:

Rendere la Sua pagina web più attraente.
Mettere in evidenza i contenuti importanti.
Definire l'atmosfera o il tema della Sua pagina.

Impariamo a usarli in modo efficace!

Cambiare il colore del testo

Può cambiare il colore del testo usando la proprietà color. Può usare:

Nomi dei colori: esempio: red, blue.
Codici esadecimali: esempio: #ff0000, #0000ff.
Valori RGB: esempio: rgb(255, 0, 0).

Esempio:

<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>

Aggiungere un colore di sfondo

La proprietà background-color serve a cambiare il colore di sfondo di un elemento.

Esempio:

<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
  This is a box with a gray background.
</div>

Sfondo dell'intera pagina

Può cambiare il colore di sfondo dell'intera pagina applicando la proprietà background-color al tag <body>.

Esempio:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a light blue background.</p>
  </body>
</html>

Aggiungere immagini di sfondo

Può impostare un'immagine come sfondo usando la proprietà background-image.

Esempio:

In questo esempio:

background-size: cover; fa sì che l'immagine copra l'intera pagina.
background-repeat: no-repeat; impedisce la ripetizione dell'immagine.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url('background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a background image.</p>
  </body>
</html>

Combinare colori del testo e dello sfondo

Può combinare i colori del testo e dello sfondo per creare design visivamente accattivanti. Si assicuri che il testo sia leggibile!

Esempio:

<p style="color: white; background-color: black; padding: 10px;">
  This is white text on a black background.
</p>

Provi in autonomia

Creiamo una pagina web con colori e sfondi. Ecco un esempio:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
      }
      h1 {
        color: darkblue;
      }
      p {
        background-color: lightyellow;
        padding: 10px;
        border: 1px solid darkgray;
      }
    </style>
  </head>
  <body>
    <h1>My Colorful Page</h1>
    <p>This paragraph has a light yellow background with a border.</p>
  </body>
</html>

Ottimo lavoro!

Congratulazioni! Ha imparato a usare colori e sfondi per rendere le Sue pagine web più vivaci e visivamente accattivanti. Nella prossima lezione approfondiremo la formattazione del testo per aggiungere il grassetto, il corsivo e altri effetti. Si prepari a migliorare le Sue competenze di design!

Domande Frequenti

La lezione «Colori e sfondi» è gratuita?

Sì — il testo completo di «Colori e sfondi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 4 lezioni in totale.

Cosa imparerò in «Colori e sfondi»?

Aggiunga colori e sfondi per rendere più vivace la Sua pagina Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML for Kids?

Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Colori e sfondi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML for Kids?

Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML for Kids