Esercizi HTML

Istruzioni per inserire immagini in un progetto

• con Visual Studio code:

è sufficiente inserire nella cartella del progetto le immagini (formato jpeg o png) e linkarle con il tag <img src=”nomefile” >

• usando un placeholder (immagine fittizia)

andare su https://placehold.co/ e scegliere il formato desiderato

• immagine già presente su Internet:

1. Cliccare sull’immagine con il tasto destro.
2. Selezionare “ispeziona elemento” si aprirà la finestra di ispezione con il codice html.
3. Copiare la URL dell’elemento immagine
4. Incollarla nel progetto nel tag img

• su VS Code o editor online (come Stackblitz):

1. andare su https://it.imgbb.com/
2. cliccare su “inizia il caricamento”
3. caricare l’immagine
4. dopo il caricamento si apre una pagina risultato. Aprire la tendina di condivisione e selezionare “immagine originale con link”.
5. Copiare la sola URL dell’immagine
6. Incollarla nel progetto nel tag img.

Istruzioni per inserire testi in un progetto

E’ possibile inserire testo a mano (copiandolo da qualsiasi fonte) oppure è possibile generarlo automaticamente con https://www.lipsum.com/ indicando numero di paragrafi parole o altro.

HTML

1. Crea una pagina html con head e body. Definisci poi una struttura con un div ed all’interno due paragrafi di testo, infine sempre nel div una immagine.
2. Crea una struttura di pagina con div in sequenza ed all’interno testo suddiviso in paragrafi.
3. Crea una pagina con due ricette a scelta, la sequenza va indicata con un elenco numerato.
4. Crea una pagina con un elenco di 10 foto (le foto vanno messe in locale)
5. Crea una tabella con la classifica di serie A
6. crea una tabella 3×3 con 9 foto
7. Crea una pagina con contenuti e layout simile a quello di una qualsiasi lezione di questo sito (ad esempio https://cipiaceinfo.it/docs/programmazione/html/introduzione-al-web/ ) senza menu laterali. Non è importante che l’aspetto grafico sia identico.
8. Crea una pagina con 3 sezioni principali (<div> annidati), ognuna con un titolo <h2> e un paragrafo <p>.
9. Crea una pagina con header e footer utilizzando solo <div>, inserendo titolo, autore e data.
10. Crea una pagina con form di contatto completo di: Input testo, Input email, Area di testo, Checkbox per l’iscrizione a newsletter, Pulsante di invio
11. Crea una pagina con link interni e link esterni, includendo almeno un link che si apre in una nuova scheda (target="_blank").
12. Crea una pagina con immagine cliccabile, che rimandi a un’altra pagina HTML.
13. Crea una pagina con video e audio incorporati utilizzando <video> e <audio> con controlli.
14. Crea una pagina con tabella orario lezioni con intestazioni (<th>) e righe (<tr>), e evidenzia il giorno corrente con <mark>.
15. Crea una pagina con layout tipo card:Ogni card (<div>) contiene: immagine, titolo (<h3>), descrizione (<p>) e pulsante (<button>).

CSS

1. Creare una pagina HTML con un titolo (<h1>) e un paragrafo (<p>). Impostare lo sfondo della pagina di colore azzurro chiaro. Rendere il testo del titolo rosso e quello del paragrafo blu scuro.
2. A partire da una pagina base aggiungere 3 paragrafi con testo diverso. Impostare font-family diverso per ogni paragrafo (es. Arial, Verdana, Courier). Impostare font-size diverso per ognuno (es. 14px, 18px, 24px). Centrare il secondo paragrafo (text-align: center).
3. A partire da una pagina base creare 3 <div> di colore diverso (rosso, verde, blu) con dentro del testo. Dare a ogni div un margin esterno di 20px. Dare un padding interno di 15px. Osservare e spiegare la differenza tra margin e padding.
4. A partire dall’esercizio precedente, creare una classe .evidenziato che imposta background-color: yellow e font-weight: bold. ed applicarla al secondo paragrafo.
5. Creare una pagina con un titolo <h1> e un sottotitolo <h2>. Dare all’<h1> un id="titolo-principale". Creare una regola CSS per cambiare il colore solo di quell’elemento. Il sottotitolo deve rimanere invariato.
6. Creare una pagina con titolo, sottotitolo e 3 paragrafi. Creare opportune classi CSS per dare ai titoli colore blu, dimensione 18px (h1) e 15px (h2) e font Verdana. Il testo dei paragrafi deve essere verde scuro, font Arial e corpo testo da 12px.
7. Dare ai paragrafi un bordo di 2px, nero e arrotondato con radius di 15px.
8. Creare un <div> che contiene un paragrafo e un titolo <h2>. Impostare al <div> font-family: Arial e color: blue. Spiegare come le proprietà vengono ereditate dal paragrafo e dal titolo. Aggiungere infine a regola per i soli <h2> con color: red.
9. Creare una sezione <div> con un testo al suo interno. Impostare background-image con un’immagine presa da Internet. Impostare anche background-size: cover; per riempire l’intera sezione.
10. Creare un <div> di altezza fissa (100px) con dentro un paragrafo molto lungo. Usare overflow: hidden → il testo verrà tagliato. Usare overflow: scroll → comparirà la barra di scorrimento. Usare overflow: auto → la barra appare solo se serve.
11. Creare due classi: .tema-chiaro con sfondo bianco e testo nero e .tema-scuro con sfondo nero e testo bianco. Creare due paragrafi diversi, uno con tema chiaro e l’altro con tema scuro.

Bootstrap

1. Pagina di login / registrazione

• Un form centrato verticalmente e orizzontalmente nella pagina.
• Inserisci campi “Email”, “Password”, un checkbox “Ricordami”, pulsante “Entra”.
• Aggiungi un link “Hai dimenticato la password?” sotto il form.
• Usare classi per layout responsivo: su dispositivi stretti diminuisci larghezza del form.

2. Blog

• Struttura con sidebar: a sinistra la parte principale con articoli (titolo, data, immagine, testo introduttivo), e una sidebar a destra con widget (“Categorie”, “Articoli recenti”). Inserire un testo a caso.
• Usare il sistema di griglia per le colonne.

Pagina di prodotto per e-commerce

• Sezione a sinistra con immagine grande del prodotto, titolo + descrizione prezzo + pulsante “Aggiungi al carrello” a destra.
• Sotto, sezione con Specifiche tecniche e recensioni
• Inserire una sezione “prodotti correlati” con piccole card (con foto e titolo).

Pagina evento / conferenza

• Sezione principale con titolo della conferenza, data, luogo.
• Sezione “Relatori” e per ciascuno una card con foto + nome + breve bio (max 3)
• Sezione “Programma” con tabella (orari + attività) (max 10)
• Sezione “Biglietti” con prezzi diversi (con tabella listino prezzi, es adulti, bambini, anziani, studenti).

Pubblicità di un prodotto

• Sezione con immagine prodotto di sfondo e nome del prodotto come titolo
• Sezione con caratteristiche: usare icone e testo in colonne.
• Sezione testimonial: citazioni con foto utenti.
• Sezione FAQ: elenco di domande e risposte comuni.

Galleria di immagini

• Usare griglia di immagini.
• Sotto ogni immagine, titolo e categoria.
• Quando l’immagine viene hover-ata, appare overlay semi-trasparente con testo.

Pagina “Chi siamo” azienda

• Sezione mission con titolo, testo e sotto immagine.
• Sezione team con le schede: foto, nome, ruolo, breve bio.
• Sezione timeline: cronologia dell’azienda (anni / eventi principali) usando componenti come cards.

Footer complesso

• Costruire un footer su 4 colonne:
  1. Informazioni sull’azienda
  2. Link utili
  3. News o blog recente
  4. Newsletter (form per iscrizione)
• Aggiungi una barra inferiore con copyright centrato.

Pagina con mappa e contatti

• Sezione contatto con form: nome, email, oggetto, messaggio.
• A fianco (o sotto su mobile) integrare una mappa (si può usare un’immagine fittizia)
• Aggiungere info azienda: indirizzo, telefono, orari.
• Usare un grid per layout responsive.