1F Cecchetto
Versioning
Installazione VS Code
Impostazione della lingua italiana
Per impostare lingua italiana premere ctrl maiusc p, cercare configure display language, selezionare la lingua italiano
Autosave
Consigliamo di abilitare il salvataggio automatico dei file:
menù File > Auto Save
Estensioni VS Code
Prettier
Permette di formattare automaticamente il codice JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, GraphQL, Markdown, YAML...
Si usa premendo ALT + SHIFT + F
CodeSnap
Per catturare screenshot del tuo codice: si selezionano le righe da copiare, tasto destro, CodeSnap, e poi si preme il simbolo dell'otturatore.
Material Icon Theme
Per avere delle belle icone nell'explorer di Visual Studio Code.
Live Server
Per visualizzare in diretta il risultato delle modifiche al codice HTML e CSS.
Git Graph
Per la gestione delle varie versioni di un software.
Temi
Si scelgono dal simbolo dell'ingranaggio:
Tema preferito di Ros:
Iscrizione GitHub
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
Sincronizzazione
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Impostazione della lingua italiana
Per impostare lingua italiana premere ctrl maiusc p, cercare configure display language, selezionare la lingua italiano
Autosave
Consigliamo di abilitare il salvataggio automatico dei file:
menù File > Auto Save
menù File > Auto Save
Estensioni VS Code
Prettier
Permette di formattare automaticamente il codice JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, GraphQL, Markdown, YAML...
Si usa premendo ALT + SHIFT + F
CodeSnap
Per catturare screenshot del tuo codice: si selezionano le righe da copiare, tasto destro, CodeSnap, e poi si preme il simbolo dell'otturatore.
Material Icon Theme
Per avere delle belle icone nell'explorer di Visual Studio Code.
Live Server
Per visualizzare in diretta il risultato delle modifiche al codice HTML e CSS.
Git Graph
Per la gestione delle varie versioni di un software.
Temi
Si scelgono dal simbolo dell'ingranaggio:
Tema preferito di Ros:
Iscrizione GitHub
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
Sincronizzazione
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Prettier
Permette di formattare automaticamente il codice JavaScript, TypeScript, JSX, JSON, CSS, SCSS, HTML, GraphQL, Markdown, YAML...
Si usa premendo ALT + SHIFT + F
Si usa premendo ALT + SHIFT + F
CodeSnap
Per catturare screenshot del tuo codice: si selezionano le righe da copiare, tasto destro, CodeSnap, e poi si preme il simbolo dell'otturatore.
Material Icon Theme
Per avere delle belle icone nell'explorer di Visual Studio Code.
Live Server
Per visualizzare in diretta il risultato delle modifiche al codice HTML e CSS.
Git Graph
Per la gestione delle varie versioni di un software.
Si scelgono dal simbolo dell'ingranaggio:
Tema preferito di Ros:
Iscrizione GitHub
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
Sincronizzazione
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
GitHub è una piattaforma che permette di salvare nel cloud il proprio codice sorgente, mantenendone varie versioni come avremo modo di vedere.
L'account GitHub è utile anche per fare l'accesso ad altri servizi.
Gli studenti con email @donboscosandona.it possono fare richiesta dello Student Developer Pack, che offre una serie di servizi a titolo gratuito:
https://education.github.com/pack#offers
È molto utile abilitare la sincronizzazione delle impostazioni:
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
Lo si può fare accedendo con il proprio account GitHub.
In questo modo usando Visual Studio Code in qualsiasi computer, ad esempio a casa, potrai ritrovare le estensioni e le impostazioni che hai scelto.
git
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:git config --global user.name "Nome Cognome"
git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Creare Repository
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Se lavori su un computer Linux o MacOS git normalmente è già installato.
Puoi verificare dal prompt dei comandi se è installato con:
git -v
Se avevi delle finestre del terminale aperte (anche su Visual Studio Code) chiudile e riaprile dopo l'installazione.
Dal prompt dei comandi configura git:
git config --global user.name "Nome Cognome" git config --global user.email "n.cognome@donboscosandona.it"
Molto utile anche installare su Code l'estensione Git Graph:
Quando inizi un nuovo progetto crea per prima cosa un repository vuoto su GitHub, premendo il pulsante New:
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Dai un nome al repository e scegli se renderlo pubblico (tutti possono vederlo) o privato (solo tu puoi vederlo e modificarlo).
Scegli anche di aggiungere un file readme in modo da non partire con un repository completamente vuoto (questo in alcune situazioni creava dei problemi con Visual Studio Code).
Il tuo repository è pronto, e premendo il pulsante Code puoi vederne l'URL, utile se vorrai clonarlo.
Puoi anche invitare altri utenti a collaborare al tuo repository, assegnando loro permessi di sola lettura o anche di scrittura.
Clonare Repository
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Commit e sincronizzazione
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
L'operazione Clone serve a scaricare una copia del repository nel tuo computer locale, in modo da poterci lavorare.
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Questa copia manterrà un collegamento a GitHub: in questo modo sarà possibile inviare nel cloud le modifiche che farai ai file.
Da GitHub Premi il pulsante verde Code per vedere l'URL del repository: scegli la versione HTTPS e premi l'icona per copiare il percorso:
Da Visual Studio Code scegli "Clone Git Repository":
Se il pulsante non appare...
- Chiudi eventuali progetti già aperti su Code
- Verifica di aver installato correttamente Git sul tuo computer.
Incolla l'URL del repository e scegli "Clone from URL" (ti sarà richiesto di eseguire il processo di Autenticazione di GitHub se è la prima volta che ti colleghi da questo computer):
Ti sarà chiesto di scegliere una cartella nel tuo computer dove clonare il repository: questa è la tua copia locale del repository, e puoi crearne quante ne vuoi.
Riguardo ai nomi delle cartelle
Se stai clonando un repository che si chiama "rep-prova" non serve che tu crei nel tuo computer una cartella con questo nome: scegliendo la cartella Documenti, Desktop o altro, git per prima cosa creerà al suo interno una cartella col nome del progetto, dopodiché scaricherà i file al suo interno.
Al termine potrai scegliere di aprirlo dal pannello che compare in basso a destra:
Se il pannello non compare...
Dal menù File di Code scegli Apri cartella e vai ad aprire la cartella in cui ha fatto il clone.
A questo punto su Code dovresti vedere i file del tuo repository (inizialmente solo il file README.md) e potrai iniziare a lavorarci:
Ogni tanto nel corso del tuo sviluppo, puoi salvare la situazione delle modifiche fatte creando un "Commit".
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
È una buona pratica fare un commit ogni volta che hai terminato di aggiornare una certa parte del tuo sito o della tua applicazione: in questo modo se ti accorgerai di aver commesso degli errori potrai tornare a una versione precedente.
Nei progetti condivisi questo è utile anche per vedere quali modifiche sono state fatte da altri sviluppatori.
Per fare un commit vai nel pannello Source Control e scegli un commento per il commit: il commento dev'essere qualcosa di breve che ti faccia capire in sintesi di che modifiche si tratta:
Premi poi il pulsante Commit: vedrai che la lista dei file modificati scompare da Source Control, perché adesso le modifiche sono state incorporate nella versione corrente del repository.
Nota anche che nella parte inferiore è comparso il numero 1 vicino alla freccia dei commit non sincronizzati: questo ti informa che il commit è presente nel tuo computer locale, ma non è stato ancora sincronizzato col repository remoto su GitHub.
La situazione su Git Graph è questa:
A differenza di prima ora le modifiche hanno una descrizione, e sulla destra puoi vedere l'autore del commit e il codice di hash che lo identifica (ad es. ac7091de).
Push
Procedi pure con la sincronizzazione del commit con GitHub. Questa operazione viene detta "Push".
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Puoi farla sia premendo l'icona sulla barra di stato...
Dopo aver fatto la sincronizzazione la situazione mostrata da Git Graph è questa:
Qui vediamo che (origin/main), cioè il repository principale su GitHub, si è allineato con il nostro repository locale (main).
Andando a curiosare sul sito di GitHub vedrai che le modifiche sono state riportate effettivamente anche lì:
Nei progetti condivisi questa funzionalità è molto utile, perché ti permette di vedere direttamente dal sito su quali file stanno lavorando gli altri sviluppatori.
Pull
L'operazione di Push invia le modifiche al cloud di GitHub, ma premendo il pulsante di sincronizzazione viene contestualmente avviata anche un'operazione di Pull, che va a scaricare eventuali aggiornamenti trovati sul repository (utile ad esempio se qualche altro sviluppatore nel frattempo ha modificato dei file).
Merge
Se per caso le tue modifiche dovessero andare in conflitto con quelle fatte da qualcun altro sullo stesso file (un altro sviluppatore, ma anche tu stesso che magari hai fatto delle modifiche al repository da un altro computer), viene avviata un'operazione di merge (fusione) delle modifiche: Git prova a incorporare le modifiche di entrambi, e nel caso non ci riesca (quando ad esempio entrambi hanno modificato la stessa riga) ti chiede un aiuto, e dovrai scegliere se tenere le tue modifiche o quelle dell'altro sviluppatore, procedendo anche a un nuovo commit che risolve la situazione.
Allenati a fare i commit e a sincronizzarli con GitHub
Dovrai farla diventare un'abitudine e questo potrà salvarti in molte situazioni. Ci è capitato spesso di vedere allievi che non facevano commit e con le loro modifiche a un certo punto incasinavano così tanto l'applicazione da non sapere più da che parte prenderla. Se avessero fatto dei commit avrebbero potuto annullare facilmente le ultime modifiche e tornare a una versione precedente - funzionante! - dell'applicazione.
HTML
Erbario
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
- Crea un nuovo repository su GitHub e chiamalo erbario
- Clonalo in locale
- Crea un file index.html con un elenco di 15 piante
- Ogni pianta deve avere titolo e immagine
- Tutte le immagini devono essere salvate in una cartella /images con un nome coerente, ad esempio rosmarino.jpg
- Ogni titolo e immagine dev'essere collegato alla pagina della pianta corrispondente, ad es. rosmarino.html
- La pagina di ogni pianta deve riportare:
- foto della pianta in forma di rettangolo con proporzioni 3:1 in alto, largo come il 100% della pagina (puoi ritagliare le foto usando il sito Photopea)
- nome comune
- nome scientifico
- breve descrizione
- foto 1:1 (quadrata) delle foglie (denominarla ad es. rosmarino_foglia.jpg)
- descrizione delle foglie
- foto 1:1 dei fiori (denominarla ad es. trifoglio_fiori.jpg)
- descrizione dei fiori
- foto 1:1 e descrizione dei frutti (se li ha)
- curiosità
- un link "Torna alla Home"
Non si accetteranno lavori approssimativi o con foto brutte o sgranate.
Esercizio aggiuntivo per casa
- Installa tutto il necessario per lo sviluppo anche sul tuo pc di casa (VSCode, git, ecc.)
- Clona il repository erbario
- Invia via email al prof uno o più screenshot che dimostrino che sei riuscito a farlo
Codice da copiare ogni volta
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Titoli e paragrafi
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Cliccando su Read the Docs ci porta alla pagina Get Started dove troviamo il codice del Quick Start sempre aggiornato:
L'unica modifica da fare è cambiare il lang (language) impostando it (italiano): questo informerà il browser dell'utente che i contenuti della pagina sono in italiano, e proporrà magari a chi usa un'altra lingua di tradurre la pagina con Google Translate.
Le sezioni della pagina template
- !doctype: informa il browser che la pagina è in formato HTML5
- html: questi tag racchiudono tutto il contenuto html della pagina
- head: racchiude tutti i tag di intestazione
- body: racchiude i tag con il contenuto vero e proprio della pagina
Per andare a capo in un paragrafo si utilizza il tag solo in apertura <br>. esempio:
Se volessi fare una linea separatrice in un paragrafo utilizzo il tag <hr> per andare a capo con separatore. esempio:
Per mettere in grassetto del testo usa il tag <b></b>, per metterlo in corsivo uso <i></i> e per sottolinearlo uso <u></u>.
Tieni in ordine il tuo codice
Di tanto in tasto usa Prettier (ALT + SHIFT + F) per tenere in ordine l'indentazione del tuo codice.
Link
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Immagini
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Se premo il link "questo è un link", verrò portato alla pagina www.google.com.
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Il link vero e proprio va messo dopo l'attributo href, mentre il testo del link va messo tra i tag <a></a>
Se volessi aprire il mio link in un'altra pagina del mio browser devo utilizzare un altro attributo, ovvero target="_blank"
Per le immagini si utilizza solo il tag di apertura <img>
La nostra immagine deve essere nella stessa cartella del sito oppure dobbiamo dire a HTML dove si trova
Per mettere un'immagine oltre al tag img bisogna utilizzare l'attributo src.
Se volessi modificare larghezza e altezza devo utilizzare gli attributi width e heigh. Il valore va espresso o in pixel o percentuale.
Se il file non si trova nella stessa cartella del index.html dobbiamo specificare la directory dove è inserita l'immagine.
Esercitazione CO-OP
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
-
AMADIO MARCO: "La mia passione per la musica"
-
BONESSO ALESSANDRO: "Il mondo dei videogiochi"
-
BURATTO FILIPPO: "Viaggi e avventure"
-
BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
-
CAL DAVID: "L'arte del disegno"
-
EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
-
EL YAQOUTI KHALIL: "Il fascino della scienza"
-
EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
-
FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
-
FUSER TOMMASO: "La tecnologia e il futuro"
-
GANGAN IGOR: "Il mondo degli animali"
-
GORGHETTO NICOLA: "La passione per le auto"
-
HOXHA MATEO: "L'arte della fotografia"
-
LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
-
MIFTARI AMADEO: "Il fascino dello spazio"
-
PALUDETTO ALESSANDRO: "Il mondo della moda"
-
PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
-
PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
-
ROHAMAT RAHIM ULLAH: "La bellezza della natura"
-
VIANELLO MATTEO: "Il design e l'architettura"
-
XIA JIAJUN: "L'arte della scultura"
-
ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
Video
si utilizza il tag <video> </video>Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Obiettivo: Creare una pagina web personale che presenti informazioni su di sé e su un tema specifico, utilizzando i tag HTML studiati e seguendo una struttura chiara e coerente.
Durata: 1 ora
Non serve creare il repository basta una cartella locale con i file
Non serve creare il repository basta una cartella locale con i file
Elenco Studenti e Temi:
- AMADIO MARCO: "La mia passione per la musica"
- BONESSO ALESSANDRO: "Il mondo dei videogiochi"
- BURATTO FILIPPO: "Viaggi e avventure"
- BURCA ROBERT DAMIAN: "Il calcio: la mia passione"
- CAL DAVID: "L'arte del disegno"
- EKEZIE CHUKWUMA CONFIDENCE: "La cucina: un'arte da scoprire"
- EL YAQOUTI KHALIL: "Il fascino della scienza"
- EZEKWEM CHIMNONSO BERNARD: "Il cinema: storie da vedere"
- FLABOREA LORENZO: "Lo sport che amo" (scegliere uno sport specifico)
- FUSER TOMMASO: "La tecnologia e il futuro"
- GANGAN IGOR: "Il mondo degli animali"
- GORGHETTO NICOLA: "La passione per le auto"
- HOXHA MATEO: "L'arte della fotografia"
- LAZZARINI ALESSIO: "Il teatro: palcoscenico di emozioni"
- MIFTARI AMADEO: "Il fascino dello spazio"
- PALUDETTO ALESSANDRO: "Il mondo della moda"
- PAVAN MICHIELON SAMUELE: "L'informatica e la programmazione"
- PERISSINOTTO FRANCESCO: "Il mondo dei fumetti"
- ROHAMAT RAHIM ULLAH: "La bellezza della natura"
- VIANELLO MATTEO: "Il design e l'architettura"
- XIA JIAJUN: "L'arte della scultura"
- ZOGGIA KEVIN: "Il mondo dei motori" (moto, auto, ecc.)
Struttura della Pagina Web:
-
Sezione "Immagini" :
- Inserire almeno 1 immagine (img) pertinente al tema.
- Una immagine deve avere un rapporto di 3:1 larga il 100% della pagina (ad esempio, molto più larga che alta).
-
Intestazione Principale (h1):
- Il titolo della pagina dovrà essere il proprio nome e cognome, seguito da un breve sottotitolo che anticipa il tema della pagina (es. "Mario Rossi - Appassionato di Videogiochi").
-
Sezione "Chi Sono" (h2):
- Un paragrafo introduttivo (p) dove presentarsi:
- Nome, cognome, età, classe frequentata.
- Breve descrizione dei propri interessi e passioni, introducendo il tema principale della pagina.
- Un paragrafo introduttivo (p) dove presentarsi:
-
Sezione "Il Mio Tema" (h2):
- Questa sezione sarà il cuore della pagina e dovrà approfondire il tema assegnato.
- Utilizzare sottotitoli (h3, h4, h5) per organizzare il contenuto in sottosezioni (es. "Storia", "Personaggi Principali", "Curiosità").
- Inserire paragrafi (p) con informazioni dettagliate e interessanti.
- Utilizzare la formattazione del testo (b, i, u) per evidenziare parole chiave e concetti importanti.
- Usare il tag br per andare a capo nel testo qualora ce ne fosse bisogno.
- Usare il tag hr per dividere le varie sezioni.
-
Sezione "Collegamenti Utili" (h2):
- Inserire almeno 3 collegamenti (a) a risorse esterne pertinenti al tema (siti web, articoli, video, ecc.).
- Ogni collegamento dovrà essere accompagnato da una breve descrizione.
-
Conclusione (p):
- Un breve paragrafo conclusivo con riflessioni personali sul tema o inviti alla scoperta.
I ragazzi di 3F possono creare un file css per abbellire il tutto
Linee Guida Generali:
- Utilizzare un linguaggio chiaro e coinvolgente.
- Prestare attenzione alla grammatica e alla sintassi.
- Organizzare il contenuto in modo logico e coerente.
- Scegliere immagini di buona qualità e pertinenti al tema.
- Verificare che i collegamenti funzionino correttamente.
- Dare sfogo alla creatività personale, ma mantenendo una struttura chiara della pagina.
si utilizza il tag <video> </video>
Per prima cosa vado subito ad indicare la larghezza del video con l'attributo width
Nel caso del video devo aggiungere un altro attributo al suo interno ovvero <source src:"">, dove indichiamo deve si trova il video.
Dentro il tag video dobbiamo utilizzare l'attributo controls, in modo da avere i controlli video (pausa, play ecc...). L'attributo autoplay permette di far partire il video in automatico, mentr muted muto. ATTENZIONE SE SI TOGLIE CONTROLS E' BENE METTERE AUTOPLAY ACCOMPAGNATO DA MUTE PERCHE' ALCUNI BROWSER NON FANNO APPARIRE IL VIDEO SE NON E' MUTO.
La scritta gg che ho inserito serve per mettere un messaggio di errore se il browser non riesce ad aprire il video.
Incorporare un video da YouTube
Cerca un video su YouTube, premi Share e scegli Embed:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Copia quindi il codice generato e inseriscilo nella tua pagina:
Per adattare l'iframe all'intera larghezza del contenitore (ad esempio alla larghezza dell'intera pagina) modifica il codice in questo modo:
Abbiamo specificato una larghezza del 100%, tolto l'altezza, e specificato che vogliamo che le proporzioni del video siano 3:1 (la larghezza è tre volte l'altezza).
Il risultato è il seguente:
Elenchi numerati e puntati
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Span
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Per prima cosa creiamo un paragrafo, dopodichè bisogna creare un elemento con tag <ul></ul> per elenco puntato, e ogni elemento della lista deve essere dentro al tag <li></li>
Se volessi usare elemento numerato, devo utilizzare tag <ol></ol> anzichè <ul></ul>.
L'elemento Span consente di definire una porzione di testo e applicarle degli stili particolari, ad esempio:
Produce questo risultato:
Produce questo risultato:
Div
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Tabelle
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
È il contenitore generico, si utilizza il tag <div></div>.
Nell'esempio vediamo un contenitore che ne contiene altri due:
Nell'esempio vediamo un contenitore che ne contiene altri due:
Il tag span è utilizzato per elementi inline, come una riga di testo, mentre il tag div è utilizzato per contenuti a livello di blocco (block).
Le tabelle consentono di organizzare dati in righe e colonne.
Definire una tabella in HTML
Una tabella html è composta da celle all'interno di righe e colonne. In questo esempio vediamo gli elementi essenziali di una tabella:
- table: questi tag delimitano l'intera tabella
- tr: ogni riga è racchiusa da questi tag
- th: le celle della riga di intestazione (header) vengono delimitate da questi tag
- td: le celle delle altre righe vengono delimitate da questi tag
Il risultato è il seguente:
Nota che l'HTML permette di definire la struttura logica della tabella e dei suoi contenuti: il compito di abbellirla sarà lasciato ai CSS (Cascading Style Sheets: fogli di stile a cascata)
Videogames
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:
- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
-
Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
-
Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
-
Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
-
Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo.
-
Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:
- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
CSS
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Tema: Videogiochi Iconici
I ragazzi di terza spiegano la consegna e anche in nuovi tag da usare: video, elenchi, span, div e tabelle (aiutarsi con il libro web design)
Crea un repository su GitHub chiamato videogames-icon.
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Clona il repository in locale e crea un file index.html con un elenco di 10 videogiochi iconici (ad esempio The Legend of Zelda, Super Mario Bros, ecc.).
Dettagli dell'Esercizio
-
File principale:
Crea un file index.html con una tabella che contenga quattro colonne:- Nome del videogioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
- Ogni nome del videogioco deve essere un link che punta a una pagina HTML dedicata, ad esempio /nintendo/super-mario.html.
-
Pagine individuali:
Crea una pagina HTML per ogni videogioco, organizzata nelle seguenti sottocartelle in base alla casa di sviluppo (es. /nintendo/, /sony/, ecc.).
- La pagina di ogni videogioco deve includere:
- Hero Image: un'immagine rettangolare con proporzioni 4:1 in alto, larga il 100% della pagina.
- Titolo: il nome del videogioco, con un colore predominante che richiama la palette del gioco.
- Sottotitolo: il nome della casa di sviluppo, con un colore ottenuto scurendo quello del titolo.
- Descrizione del gioco: una breve presentazione del videogioco.
-
Elenco puntato con le caratteristiche principali:
Ad esempio, genere, modalità di gioco, stile grafico, ecc., racchiuso in un div con sfondo del colore del titolo. - Video embedded: il trailer ufficiale o gameplay del videogioco 3:1.
-
Riquadro con informazioni: un box con sfondo dello stesso colore del sottotitolo che includa:
- Copertina del videogioco (5:7)
- Nome del gioco
- Casa di sviluppo
- Anno di uscita
- Piattaforme principali
-
Struttura delle immagini:
Salva tutte le immagini in una cartella /images all'interno delle sottocartelle della casa di sviluppo, ad esempio:- /nintendo/images/super-mario-hero.jpg
- /sony/images/god-of-war-cover.jpg
Sintassi
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Inserimento dei CSS
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Le regole dei fogli di stile (CSS) seguono sempre questa sintassi:
- selettore: permette di definire a quali elementi della pagina va applicata questa regola
- dichiarazione: definisce la regola
- proprietà: specifica l'aspetto da stilizzare, ad esempio il colore di sfondo
- valore: specifica il valore che deve avere la proprietà, ad esempio "rosso"
Ecco un esempio concreto, che dice che tutti i titoli H1 (selettore) devono avere un colore (proprietà) rosso (valore):
Una regola può contenere anche più dichiarazioni, ad esempio:
C'è una quantità enorme di proprietà che si possono utilizzare... in questo cheat sheet trovi una bella sintesi:
Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head).
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Per fare ciò dobbiamo utilizzare il tag link con attributo href.
nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
- main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
- nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono.
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto:
Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap.
Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito.
Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri.
main.css dice che per tutto il sito devono essere rossi.
Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu.
L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
Selettori
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Esercizio Colori
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
-
AMADIO MARCO: Flat UI Colors (Original / v1)
-
BONESSO ALESSANDRO: American Palette (v1)
-
BURATTO FILIPPO: Canadian Palette (v1)
-
BURCA ROBERT DAMIAN: British Palette (v1)
-
CAL DAVIDE: Australian Palette (v1)
-
EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
-
EL YAQOUTI KHALIL: German Palette (v1)
-
EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
-
FLABOREA LORENZO: Indian Palette (v1)
-
FUSER TOMMASO: Turkish Palette (v1)
-
GANGAN IGOR: Chinese Palette (v2)
-
GORGHETTO NICOLA: Russian Palette (v2)
-
HOXHA MATEO: Italian Palette (v2 - subset europeo)
-
LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
-
MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
-
PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
-
PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
-
PERISSINOTTO FRANCESCO: Korean Palette (v2)
-
ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
-
VIANELLO MATTEO: Colombian Palette (v2)
-
XIA JIAJUN: Brazilian Palette (v2)
-
ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
-
Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Selettori di tipo
Per applicare degli stili a tutti gli elementi di un certo tipo, ad esempio i titoli h1:
Selettori di id
L'attributo id, serve per indicare con un codice univoco un determinato elemento della mia pagina html. Questo serve per il CSS e anche javascript per identificare un elemento preciso e lavorarci sopra.
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Nella foto abbiamo dato all'elemento h1 l'id "titolo1"
nel nostro file css possiamo definire lo stile per l'elemento con id titolo1:
Conviene usare questo approccio solo quando si vogliono applicare degli stili a un unico specifico elemento nella pagina.
Possiamo inserire l'in di un elemento anche in un href in modo che se clicco il bottone mi porta a quell'elemento (scroll pagina).
Selettori di classe
Possiamo definire delle classi in questo modo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Potremo poi applicare la classe a tutti gli elementi della pagina che vogliamo:
Nuovo Esercizio: Palette Personalizzate da Flat UI Colors
L'obiettivo di questo esercizio è creare una pagina web che mostri 10 colori di una palette assegnata specificamente a ciascuno di voi, applicando stili CSS per renderla visivamente accattivante.
Assegnazione delle Palette:
Di seguito trovi il tuo nome e la palette di colori che dovrai utilizzare per l'esercizio. Trova la tua palette sul sito https://flatuicolors.com/. È fondamentale che tu scelga i tuoi 10 colori ESCLUSIVAMENTE dalla palette assegnata.
- AMADIO MARCO: Flat UI Colors (Original / v1)
- BONESSO ALESSANDRO: American Palette (v1)
- BURATTO FILIPPO: Canadian Palette (v1)
- BURCA ROBERT DAMIAN: British Palette (v1)
- CAL DAVIDE: Australian Palette (v1)
- EKEZIE CHUKWUMA CONFIDENCE: French Palette (v1)
- EL YAQOUTI KHALIL: German Palette (v1)
- EZEKWEM CHIMNONSO BERNARD: Spanish Palette (v1)
- FLABOREA LORENZO: Indian Palette (v1)
- FUSER TOMMASO: Turkish Palette (v1)
- GANGAN IGOR: Chinese Palette (v2)
- GORGHETTO NICOLA: Russian Palette (v2)
- HOXHA MATEO: Italian Palette (v2 - subset europeo)
- LAZZARINI ALESSIO: Dutch Palette (v2 - subset europeo)
- MIFTARI AMADEO: Greek Palette (v2 - subset europeo)
- PALUDETTO ALESSANDRO: Scandinavian Palette (v2 - subset europeo)
- PAVAN MICHIELON SAMUELE: Portuguese Palette (v2 - subset europeo)
- PERISSINOTTO FRANCESCO: Korean Palette (v2)
- ROHAMAT RAHIM ULLAH: Japanese Palette (v2)
- VIANELLO MATTEO: Colombian Palette (v2)
- XIA JIAJUN: Brazilian Palette (v2)
- ZOGGIA KEVIN: Turkish Palette (v3)
Passaggi da seguire per CIASCUN STUDENTE:
-
Trova la tua Palette: Vai sul sito https://flatuicolors.com/ e individua la palette che ti è stata assegnata dalla lista qui sopra.
-
Scegli 10 Colori: Dalla tua specifica palette assegnata, scegli 10 colori distinti. Per ciascun colore, annota il nome e il codice esadecimale (es. "Emerald" - #2ecc71).
-
Crea un nuovo repository su GitHub: Chiamalo flat-colors-[tuo-nome] (sostituisci [tuo-nome] con il tuo nome, es. flat-colors-marco-amadio).
-
Clona il repository appena creato sulla tua macchina locale.
-
Crea un file index.html:
- Assicurati che sia un documento HTML valido con <head> e <body>.
- All'interno del <body>, crea 10 elementi <div>.
- Ad ogni <div> assegna un attributo id che corrisponda al nome del colore che hai scelto (es. se hai scelto "Emerald", l'id sarà id="emerald"). Importante: usa caratteri minuscoli per gli ID e sostituisci eventuali spazi con trattini (es. "Bright Yarrow" -> id="bright-yarrow").
- All'interno di ogni <div>, inserisci due paragrafi (<p>):
- Il primo paragrafo conterrà il nome del colore in MAIUSCOLO (es. EMERALD). Assegna a questo paragrafo la classe nome_colore.
- Il secondo paragrafo conterrà il codice esadecimale del colore (es. #2ecc71). Assegna a questo paragrafo la classe codice_colore.
-
Crea un file di stile main.css nella stessa directory del file index.html.
-
Collega il file CSS al tuo index.html aggiungendo la riga <link rel="stylesheet" href="main.css"> all'interno dell'<head> del documento HTML.
-
Scegli un font da Google Fonts: Vai su https://fonts.google.com/ e scegli un font che ti piace (diverso magari da quello che potresti aver visto in esempi precedenti). Utilizza il codice @import fornito da Google Fonts e incollalo all'inizio del tuo file main.css.
-
Crea le regole CSS nel file main.css:
- Applica uno stile generale al <body> per rimuovere i margini predefiniti (margin: 0;)
- Definisci le regole per ogni <div>:
- Devono avere dimensioni di 400 x 400 pixel (width: 400px; height: 400px;).
- Per ogni singolo div, utilizzando il suo id, imposta il background-color al codice esadecimale del colore corrispondente dalla tua palette scelta (es. #emerald { background-color: #2ecc71; }). Dovrai creare 10 regole specifiche, una per ogni ID/colore che hai scelto.
- Aggiungi un piccolo margine intorno a ciascun div per separarli (ad es. margin: 10px;).
- Applica text-align: center; al div per centrare orizzontalmente il testo al suo interno.
- Definisci le regole per i paragrafi con la classe .nome_colore:
- Colore del testo bianco (color: white;).
- Utilizza il font che hai importato da Google Fonts (font-family: 'NomeDelTuoFontScelto', sans-serif;).
- Aumenta leggermente la dimensione del font (ad es. font-size: 2em;).
- Applica un effetto ombreggiatura sul testo (text-shadow: 2px 2px 4px #000000; o sperimenta con un'altra combinazione di colore/offset/sfocatura).
- Aggiungi un po' di padding-top per posizionare il titolo più in basso all'interno del div (ad es. padding-top: 150px;).
- Definisci le regole per i paragrafi con la classe .codice_colore:
- Colore del testo grigio scuro (ad es. color: #333; o #666).
- Colore di sfondo bianco (background-color: white;).
- Font Arial o Helvetica (font-family: Arial, Helvetica, sans-serif;).
- Dimensioni ridotte (ad es. font-size: 0.9em;).
- Aggiungi un piccolo padding interno per distanziare il testo dallo sfondo bianco (ad es. padding: 5px;).
- Applica display: inline-block; o display: inline; per far sì che lo sfondo bianco si adatti alla larghezza del testo.
-
Visualizza il tuo file index.html nel browser per vedere il risultato. Controlla che ogni div abbia il colore di sfondo corretto e che il testo sia stilizzato come richiesto.
-
Salva le modifiche e carica tutto il tuo codice (index.html e main.css) sul tuo repository GitHub.
Questo esercizio rafforza gli stessi concetti del precedente, ma ti dà l'opportunità di esplorare una palette diversa e di applicare le regole CSS specifiche per i colori che hai scelto.
Ricetta
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Biglietto da visita
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Titolo: La mia ricetta preferita
Obiettivo: Creare una pagina web che presenti una ricetta di cucina, con informazioni sugli ingredienti, le istruzioni e una foto del piatto.
Descrizione:
Gli studenti dovranno scegliere una ricetta semplice e creare una pagina web che la descriva. La pagina dovrà contenere:
- Titolo della ricetta:
- Una foto del piatto (hero 4:1):
- Elenco degli ingredienti:
- Istruzioni passo-passo per la preparazione:
- Informazioni aggiuntive (tempo di preparazione, porzioni, ecc.):
Requisiti:
-
Struttura HTML:
- Utilizzare tag semantici (div, ul, ol, ecc.) per organizzare il contenuto.
- Assicurarsi che il codice sia ben strutturato e facile da leggere.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite (color, background-color, padding, margin, width, height, text-align, text-shadow) per personalizzare l'aspetto della ricetta.
- Creare un layout chiaro e accattivante.
- Utilizzare i margini e il padding per gestire gli spazi tra gli elementi.
- Aggiungere colori di sfondo per evidenziare le diverse sezioni.
- Centrare il contenuto principale della pagina.
Titolo: Crea il tuo biglietto da visita digitale con nuova repository
Obiettivo: Progettare un biglietto da visita personale utilizzando HTML e CSS, concentrandosi sull'aspetto visivo e la presentazione delle informazioni.
Descrizione:
Gli studenti dovranno creare una pagina web che rappresenti un biglietto da visita. Il biglietto dovrà contenere:
- Foto profilo
- Nome e cognome:
- Ruolo o professione:
- Informazioni di contatto (email, telefono, ecc.):
- Un breve messaggio personale (opzionale):
Requisiti:
-
Struttura HTML:
- Utilizzare tag HTML appropriati per strutturare il contenuto (div, p, h1, h2, ecc.).
- Assicurarsi che il codice sia ben organizzato e leggibile.
-
Stile CSS:
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
- color e background-color per i colori di testo e sfondo.
- padding e margin per controllare gli spazi.
- width e height per definire le dimensioni degli elementi.
- text-align per allineare il testo.
- text-shadow per dare un ombreggiatura al testo.
- Sperimentare con combinazioni di proprietà per ottenere un design accattivante.
- Cercare di centrare il biglietto da visita al centro della pagina (suggerimento: margini destro e sinistro del div auto).
- Utilizzare le proprietà CSS fornite per personalizzare l'aspetto del biglietto da visita:
Sito e-commerce
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Pet Shop
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
-
font-family: per scegliere il tipo di carattere del testo.
-
font-size: per impostare la dimensione del testo.
-
color: per impostare il colore del testo.
-
background-color: per impostare il colore di sfondo di un elemento.
-
text-align: per allineare il testo (es. left, center, right).
-
padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
-
margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
-
width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
-
height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
-
border: per aggiungere un bordo (specificando spessore, tipo e colore).
-
border-radius: per arrotondare gli angoli di un elemento.
-
box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
-
Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
-
Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
-
Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
-
Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.
Esercitazione: Crea un Semplice Sito di E-commerce
Obiettivo: Progettare un sito web di e-commerce di base, utilizzando HTML e CSS.
Descrizione:
In questa esercitazione, ogni studente creerà un piccolo sito web di e-commerce come esercizio individuale. Il sito includerà una homepage, una pagina di categoria di prodotti e pagine di dettaglio per almeno 10 prodotti. Questo permetterà a ogni studente di mettere in pratica le proprie abilità HTML e CSS per creare un sito web completo.
Cosa Imparerai:
- Come strutturare un sito web con più pagine e collegamenti tra di esse.
- Come organizzare il contenuto in sezioni chiare e leggibili su diverse pagine.
- Come creare una pagina di categoria di prodotti che visualizza più prodotti.
- Come creare una pagina di dettaglio del prodotto che mostra informazioni dettagliate su un singolo prodotto.
Strumenti che Userai:
- Un editor di testo ( VS Code).
- Un browser web (come Chrome, Firefox, Safari).
- Un account GitHub.
Importante:
Puoi usare l'IA per generare il testo delle pagine del sito web (ad esempio, descrizioni dei prodotti), ma non per scrivere il codice HTML o CSS.
Puoi usare l'IA per chiedere informazioni su come scrivere il codice o a cosa servono certi comandi CSS.
Pagine del Sito Web:
-
Homepage (index.html):
- Visualizza una panoramica dei prodotti in vendita, evidenziando alcune categorie o prodotti speciali.
-
Pagina di Categoria di Prodotti (categoria.html):
- Visualizza tutti i prodotti appartenenti a una specifica categoria. Ogni studente dovrà svolgere una categoria tra quelle elencate di seguito nell'elenco.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Include immagini, nomi e prezzi di almeno 10 prodotti.
- Include collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Pagina di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
- Nome del prodotto
- Immagine del prodotto
- Descrizione dettagliata
- Prezzo
- Pulsante "Aggiungi al carrello"
-
Ogni prodotto elencato nella pagina di categoria deve avere la propria pagina di dettaglio (es. prodotto_libroantico1.html, prodotto_libroantico2.html, ecc.)
- Nome del prodotto
- Visualizza informazioni dettagliate su un singolo prodotto, inclusi:
Passaggi:
-
Crea un repository su GitHub:
- Accedi al tuo account GitHub.
- Crea un nuovo repository per il tuo progetto di e-commerce.
- Dai al repository un nome appropriato (ad esempio, "miositoecommerce").
- Inizializza il repository con un file README.
- Accedi al tuo account GitHub.
-
Crea i file HTML:
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
- Crea un file HTML per ogni pagina del sito web (es. index.html, categoria.html, prodotto_nomeprodotto.html).
-
Organizza i file:
- Crea una cartella per ogni pagina del sito web.
- Crea una cartella css per i file CSS e una cartella js per i file JavaScript, se necessario.
- Crea una cartella img per le immagini dei prodotti.
- Crea una cartella per ogni pagina del sito web.
-
Personalizza la Homepage (index.html):
- Modifica il file index.html per adattarlo al tuo sito di e-commerce.
-
Crea la Pagina di Categoria di Prodotti (categoria.html):
- Modifica il file categoria.html per visualizzare i prodotti della categoria assegnata allo studente.
-
Layout: Gli studenti possono visualizzare i prodotti uno sotto l'altro se non hanno familiarità con il layout a griglia.
- Aggiungi immagini, nomi e prezzi di almeno 10 prodotti per la categoria assegnata.
- Aggiungi collegamenti alle pagine di dettaglio dei singoli prodotti.
-
Crea le Pagine di Dettaglio del Prodotto (prodotto_nomeprodotto.html):
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
- Recupera i dati del prodotto (nome, immagine, descrizione, prezzo) e visualizzali nella pagina.
- Crea un file HTML per ogni prodotto elencato nella pagina di categoria.
-
Aggiungi stili personalizzati:
- crea un file main.css e aggiungi le tue regole CSS.
- Collega il file style.css ai file HTML delle pagine.
- crea un file main.css e aggiungi le tue regole CSS.
Elenco Studenti e Categorie di Prodotti:
- AMADIO MARCO: Libri Antichi
- BONESSO ALESSANDRO: Strumenti Musicali Vintage
- BURATTO FILIPPO: Articoli Sportivi Estremi
- BURCA ROBERT DAMIAN: Collezionismo Militare
- CAL DAVID: Veicoli Elettrici
- EKEZIE CHUKWUMA CONFIDENCE: Arte Digitale
- EL YAQOUTI KHALIL: Tappeti Orientali
- EZEKWEM CHIMNONSO BERNARD: Gioielli Artigianali
- FLABOREA LORENZO: Vini Pregiati
- FUSER TOMMASO: Fotografia Analogica
- GANGAN IGOR: Orologi da Collezione
- GORGHETTO NICOLA: Mobili di Design
- HOXHA MATEO: Articoli per la Pesca
- LAZZARINI ALESSIO: Strumenti Astronomici
- MIFTARI AMADEO: Attrezzatura da Montagna
- PALUDETTO ALESSANDRO: Console Retrogaming
- PAVAN MICHIELON SAMUELE: Modelli di Navi
- PERISSINOTTO FRANCESCO: Tè e Infusi Rari
- ROHAMAT RAHIM ULLAH: Abbigliamento Etnico
- VIANELLO MATTEO: Articoli per il Giardinaggio
- XIA JIAJUN: Strumenti di Intelligenza Artificiale
- ZOGGIA KEVIN: Articoli per la Magia
Esercizio: Il Negozio di Animali "Amici a 4 Zampe"
Tema: Crea una semplice pagina web per un negozio online fittizio chiamato "Amici a 4 Zampe", che vende prodotti per animali domestici. Dovrai presentare alcuni prodotti e le loro caratteristiche principali.
Obiettivo: Realizzare una pagina web HTML che mostri alcuni prodotti per animali. Userai HTML per organizzare il contenuto e CSS per dargli un aspetto pulito e accattivante.
Cosa imparerai:
- Come strutturare una pagina web per presentare dei prodotti.
- Come usare i tag HTML principali per titoli, paragrafi e immagini.
- Come collegare un file CSS all'HTML.
- Come applicare proprietà CSS per migliorare l'estetica della pagina.
- Come importare e utilizzare un carattere personalizzato da Google Fonts.
Parte 1: Creazione del file HTML (index.html)
- Crea un nuovo repository e clonalo
- All'interno di questa cartella, crea un nuovo file di testo e salvalo come index.html. Ricorda che l'estensione .html è fondamentale.
-
Copia e incolla la struttura HTML base che ti è stata fornita da bootstrap o che creala seguendo le istruzioni.
- Includi un titolo principale (<h1>) per il nome del negozio.
- Crea almeno 5 sezioni per i prodotti. Ogni sezione dovrebbe avere:
- Un titolo di secondo livello (<h2>) per il nome del prodotto.
- Un'immagine del prodotto (<img>).
- Uno o due paragrafi (<p>) per descrivere il prodotto e il suo prezzo.
- Assicurati di inserire il link al file CSS nella sezione <head>.
-
Personalizza il contenuto!
- Scegli 2-3 prodotti per animali (ad esempio, crocchette per cani, tiragraffi per gatti, giochi per uccelli).
- Cerca immagini di questi prodotti su internet e cambia l'indirizzo (src) nel tag <img>.
- Scrivi una breve descrizione e un prezzo per ogni prodotto.
Parte 2: Creazione del file CSS (style.css)
- Nella stessa cartella dove hai salvato index.html, crea un nuovo file di testo e salvalo come style.css. L'estensione .css è cruciale.
- All'interno di questo file, scriverai le tue regole CSS per dare stile alla pagina.
Proprietà CSS che puoi e devi usare:
- font-family: per scegliere il tipo di carattere del testo.
- font-size: per impostare la dimensione del testo.
- color: per impostare il colore del testo.
- background-color: per impostare il colore di sfondo di un elemento.
- text-align: per allineare il testo (es. left, center, right).
- padding: per aggiungere spazio "interno" intorno al contenuto di un elemento.
- margin: per aggiungere spazio "esterno" intorno a un elemento (es. margin: 10px; per un margine su tutti i lati, o margin: 10px 20px; per margini verticali e orizzontali diversi).
- width: per impostare la larghezza di un elemento (utile per le immagini, ad esempio width: 300px;).
- height: per impostare l'altezza di un elemento (utile per le immagini, ad esempio height: 200px;).
- border: per aggiungere un bordo (specificando spessore, tipo e colore).
- border-radius: per arrotondare gli angoli di un elemento.
- box-shadow: per aggiungere una leggera ombra a un elemento.
USARE SOLO LE PROPRIETA' ELENCATE SOPRA
Come usare Google Fonts:
- Vai sul sito di Google Fonts.
- Scegli uno o due caratteri che ti piacciono per i titoli e i paragrafi.
- Per ogni carattere scelto, clicca su di esso e poi sul pulsante "+ Select this style" per aggiungere i vari stili (es. Regular 400, Bold 700).
- Nel pannello laterale che si apre, cerca la sezione "Use on the web" e copia il codice HTML che inizia con <link rel="preconnect"...>. Incollalo nella sezione <head> del tuo file index.html, ASSOLUTAMENTE PRIMA del link al tuo style.css.
- Successivamente, copia il codice font-family fornito da Google Fonts (es. font-family: 'Roboto', sans-serif;) e usalo nelle tue regole CSS per il body o per specifici elementi come h1, p, ecc.
Consigli importanti:
- Salva spesso! Ogni volta che fai una modifica in index.html o style.css, salvala.
- Aggiorna il browser! Dopo aver salvato, per vedere le modifiche nel browser, devi aggiornare la pagina (di solito con il tasto F5 o il pulsante di ricarica del browser).
- Non usare intelligenze artificiali per generare il codice! Questo esercizio serve a farti imparare a scrivere il codice da zero, capendo ogni sua parte. L'uso di un'IA ti impedirebbe di acquisire questa comprensione fondamentale.
- Sii originale! Non copiare il codice dal tuo compagno o da altri siti. Crea la tua pagina con i tuoi prodotti, le tue descrizioni e il tuo stile unico. Ogni studente deve presentare un lavoro originale e creativo.