02. Pagine HTML/CSS
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
────══════♦☆♦══════────
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
────══════♦☆♦══════────
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 7
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.
Aggiungere i pulsanti creando degli hyperlink e applicando opportunamente un selettore di classe.
Aggiungere i riquadri con il testo evidenziato (highlight) utilizzando per ciascun riquadro sia il tag div che il tag span e applicando gli opportuni selettori di classe.
Verificare la correttezza formale del documento tramite il validator del consorzio W3C.
Esercizio 8
A partire dal testo e dall'immagine presenti nei rispettivi link, riprodurre il documento HTML/CSS dell'immagine.
Definire nuove classi per gestire il posizionamento z-index delle immagini.
Aggiornare la classe delle immagini.
Definire una classe per gestire il posizionamento della frase "UNA FRASE PALINDROMA".
Aggiungere il testo "UNA FRASE PALINDROMA" e richiamare opportunamente la nuova 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