02. Pagine HTML/CSS

Esercizio 1

A partire dal testo presente nel link, riprodurre il documento HTML/CSS dell'immagine.

Verificare la correttezza formale del documento tramite il validator del consorzio W3C.

Principali proprietà CSS e valori utilizzati nel documento:

• Font-family: Arial, sans-serif

• Background-color: #ffebcd

• Color (testo): #ff5733 (arancione) e #0077b6 (blu)

• Font-size: 18px

• Line-height: 1.4

• Margin: 20px

────══════♦☆♦══════────

Esercizio 2

A partire dal testo presente nel link, riprodurre il documento HTML/CSS dell'immagine.

Verificare la correttezza formale del documento tramite il validator del consorzio W3C.

Principali proprietà CSS e valori utilizzati nel documento:

• Font-family: "Trebuchet MS", sans-serif

• Background-color: #e1ffbf

• Color (testo): #4b0082 (indaco scuro) e #333 (testuale standard)

• Font-size: 16px

• Line-height: 1.5

• List-style-type: square

• Margin: 20px

────══════♦☆♦══════────

Esercizio 3

A partire dal testo presente nel link, riprodurre il documento HTML/CSS dell'immagine. Per le regole di stile fare riferimento all'esempio 9.

Verificare la correttezza formale del documento tramite il validator del consorzio W3C.

Esercizio 4

A partire dal testo presente nel link, riprodurre il documento HTML/CSS dell'immagine.

Verificare la correttezza formale del documento tramite il validator del consorzio W3C.

Principali proprietà CSS e valori utilizzati nel documento:

• Stile per la pagina (body)

  •  font-family: Arial, sans-serif;

  • background-color: #e6f7ff; /* Colore di sfondo della pagina */

  • margin: 0;

  • padding: 20px;

• Stile per il titolo h1

  • text-align: center;

  • color: #003366; /* Colore testo blu scuro */

• Stile per il titolo h2

  •  color: #0099cc; /* Colore testo blu chiaro */

• Stile per il paragrafo

  • font-size: 16px;

  • line-height: 1.5;

  • color: #000000; /* Colore testo nero */

• Stile per la tabella (table)

  • border-collapse: collapse; /* Unisce i bordi delle celle */

  • width: 80%; /* Larghezza della tabella del 80% della larghezza del contenitore padre */

  • margin: 20px auto; /* Margini superiori e inferiori di 20px e margini laterali automatici */

  • background-color: #fff; /* Colore di sfondo della tabella (bianco) */

• • Stile per le celle della tabella (th, td):

    • border: 1px solid #0099cc; /* Spessore e colore del bordo delle celle (blu chiaro) */

    •  padding: 10px; /* Spaziatura interna delle celle di 10px */

    •  text-align: left; /* Allineamento del testo a sinistra nelle celle */

  • Stile per l'intestazione delle celle (th) */

    • color: white; /* Colore del testo dell'intestazione delle celle (bianco) */

    • background-color: #003366; /* Colore di sfondo (blu scuro) */

Esercizio 5

A partire dal testo presente nel link, riprodurre il documento HTML/CSS dell'immagine.

Introdurre gli hyperlink presenti nell'header della pagina prendendo a riferimento l'esempio 10.

Verificare la correttezza formale del documento tramite il validator del consorzio W3C.

Esercizio 6

A partire dal testo presente nel link, riprodurre il documento HTML/CSS dell'immagine.

Introdurre nel documento HTML le regole CSS riportate nel link e applicare opportunamente i selettori di classe.

Verificare la correttezza formale del documento tramite il validator del consorzio W3C.

Sito:  7ecnologie

Sezione: 18. HTML & CSS

Capitolo: 98. Esercizi 

Paragrafo: 02. Pagine HTML/CSS 

Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi 

Indice dei paragrafi: 01. Pagine HTML - 02. Pagine HTML/CSS