Web Design
Visual Studio Code
Installazione
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
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 a 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.
GitHub
Versioning
Per Versioning si intende la gestione di più versioni di uno stesso codice sorgente.
- Posso tenere traccia delle modifiche fatte da me ogni giorno al codice (commit)
- Posso vedere le modifiche fatte da altri collaboratori e fonderle con le mie (merge)
- Posso in qualsiasi momento tornare a una versione precedente e confrontarla con l'attuale (checkout)
- Posso gestire rami diversi (branch): di solito un ramo principale che viene di fatto distribuito al cliente, e dei rami secondari che gli sviluppatori usano per lavorare agli aggiornamenti
Lo strumento usato in tutto il mondo per farlo è git.
Configurazione di 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 un 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 un 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:
Modifica dei file
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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
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 a 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.
GitHub
Versioning
Per Versioning si intende la gestione di più versioni di uno stesso codice sorgente.
- Posso tenere traccia delle modifiche fatte da me ogni giorno al codice (commit)
- Posso vedere le modifiche fatte da altri collaboratori e fonderle con le mie (merge)
- Posso in qualsiasi momento tornare a una versione precedente e confrontarla con l'attuale (checkout)
- Posso gestire rami diversi (branch): di solito un ramo principale che viene di fatto distribuito al cliente, e dei rami secondari che gli sviluppatori usano per lavorare agli aggiornamenti
Lo strumento usato in tutto il mondo per farlo è git.
Configurazione di 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 un 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 un 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:
Modifica dei file
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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 a 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.
GitHub
Versioning
Per Versioning si intende la gestione di più versioni di uno stesso codice sorgente.
- Posso tenere traccia delle modifiche fatte da me ogni giorno al codice (commit)
- Posso vedere le modifiche fatte da altri collaboratori e fonderle con le mie (merge)
- Posso in qualsiasi momento tornare a una versione precedente e confrontarla con l'attuale (checkout)
- Posso gestire rami diversi (branch): di solito un ramo principale che viene di fatto distribuito al cliente, e dei rami secondari che gli sviluppatori usano per lavorare agli aggiornamenti
Lo strumento usato in tutto il mondo per farlo è git.
Configurazione di 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 un 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 un 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:
Modifica dei file
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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.
GitHub
Versioning
Per Versioning si intende la gestione di più versioni di uno stesso codice sorgente.
- Posso tenere traccia delle modifiche fatte da me ogni giorno al codice (commit)
- Posso vedere le modifiche fatte da altri collaboratori e fonderle con le mie (merge)
- Posso in qualsiasi momento tornare a una versione precedente e confrontarla con l'attuale (checkout)
- Posso gestire rami diversi (branch): di solito un ramo principale che viene di fatto distribuito al cliente, e dei rami secondari che gli sviluppatori usano per lavorare agli aggiornamenti
Lo strumento usato in tutto il mondo per farlo è git.
Configurazione di 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 un 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 un 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:
Modifica dei file
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Per Versioning si intende la gestione di più versioni di uno stesso codice sorgente.
- Posso tenere traccia delle modifiche fatte da me ogni giorno al codice (commit)
- Posso vedere le modifiche fatte da altri collaboratori e fonderle con le mie (merge)
- Posso in qualsiasi momento tornare a una versione precedente e confrontarla con l'attuale (checkout)
- Posso gestire rami diversi (branch): di solito un ramo principale che viene di fatto distribuito al cliente, e dei rami secondari che gli sviluppatori usano per lavorare agli aggiornamenti
Lo strumento usato in tutto il mondo per farlo è git.
Configurazione di 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 un 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 un 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:
Modifica dei file
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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 un 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:
Modifica dei file
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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:
Lavora liberamente nel tuo repository: crea file, cartelle e quello che vuoi.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
Nota che quando modifichi un file, le righe modificate o aggiunte vengono evidenziate accanto ai numeri di riga:
Se clicchi su questi evidenziatori ti compare un dettaglio delle modifiche fatte:
Nell'explorer vengono evidenziati i file modificati (M) o creati (U):
Nella sezione Source Control avrai la possibilità di annullare tutte le modifiche fatte o quelle fatte a un singolo file premendo l'icona della freccia che torna indietro (Revert):
Cliccando col tasto destro sul nome di un file e scegliendo Open Changes puoi vedere il confronto tra la versione iniziale del file e quella con le modifiche fatte:
Da Git Graph puoi vedere la situazione attuale del repository:
Qui vediamo 2 modifiche che per ora non sono state salvate nel sistema di versioning di Git (Uncommitted Changes) che provengono dal ramo main (principale) del repository.
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
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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.
Cos'è HTML
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Creare un file
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
L'HTML (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, ovvero è composto da tanti codici (elementi e tag) che vengono tradotti dal browser in elementi della pagina e formattazione del testo.
Quindi il nostro browser ha il compito di tradurre tutti questi codicini in modo da farci visualizzare la pagina web.
l'HTML è lo scheletro di una pagina web ovvero colui che creai i vari componenti della pagina come titoli, paragrafi ecc..., mentre l'estetica della pagina è dovuta ad un altro linguaggio di markup, ovvero CSS (Cascading Style Sheets).
Prima di iniziare qualsiasi progetto, prendi l'abitudine di creare un repository su GitHub e di clonarlo in locale come abbiamo visto: avrai così a disposizione tutti i vantaggi del Versioning.
Per creare un file html, semplicemente si può creare un nuovo documento di testo (consiglio di creare il file dentro una cartella). Dopo averlo creato banalmente andiamo a modificare il nome del file e l'estensione (abilitare estensione file).
Se ho creato il mio index.html con un foglio di testo avrò bisogno di un editor di testo. Si può utilizzare anche il blocco note di Windows però a causa della sua eccessiva semplicità ci conviene utilizzare VSCode.
Se stai lavorando in un progetto di VSCode, per creare il file sarà sufficiente usare l'icona "nuovo file" dell'Explorer:
Un file HTML deve essere di base rinominato index con estensione html, ovvero index.html
Si utilizza il nome index perchè è il file principale di ogni singolo sito web ovvero quello che il browser cerca quando entriamo in un sito web
Visualizzare le pagine create
Puoi vedere il risultato delle tue creazioni facendo click col tasto destro sul file index.html e scegliendo Open with Live Server.
Trovi il comando equivalente (Go Live) nella barra di stato:
Trovi il comando equivalente (Go Live) nella barra di stato:
Cosa sono gli elementi e tag?
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo
<p></p> = paragrafo
<div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao
<p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario
<div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Pagina template
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Gli elementi sono tutte le parti della pagina web che la compongono, come un titolo, testo, paragrafo ecc... .
Ma come fa il browser a distinguere tutti gli elementi?
Per distinguere i vari elementi si utilizzano i TAG, per esempio:
<h1></h1> = titolo <p></p> = paragrafo <div></div> = contenitore
Dentro i tag si va a scrivere il testo o mettere altri tag o altri contenuti che vanno a comporre i nostri elementi, per esempio:
<h1>ciao</h1> = titolo ciao <p>mi chiamo mario</p> = paragrafo dove viene scritto mi chiamo mario <div><h1>benvenuto</h1></div> = contenitore con dentro un titolo
I tag sono formati da uno di apertura(<h1>) e chiusura (</h1>), si usa quello di chiusura per indicare dove finisce l'elemento. Tutti i tag si aprono e si chiudono con poche eccezioni come le immagini (<img>)
Per i tag HTML si utilizza il browser per vedere quali utilizzare in modo da non tenerli sempre a mente
Più avanti vedremo impareremo a usare Bootstrap per creare le nostre pagine. Possiamo fin d'ora prendere l'abitudine - quando creiamo una nuova pagina - di ini
https://getbootstrap.com/
https://getbootstrap.com/
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
Head
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Commenti
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Da non confondere con l'header della pagina. Esso contiene tutte le informazioni che vengono date al browser.
Il tag title
Viene utilizzato per dare il titolo della pagina nella parte alta del browser; il tag title inoltre viene usato da Google per presentare il titolo della pagina nei risultati di ricerca.
I tag meta
Forniscono informazioni aggiuntive di vario tipo, ad esempio:
- charset: l'insieme dei caratteri usati... UTF-8 è quello più usato e contiene anche tutte le lettere accentate oltre a svariati altri simboli.
- viewport: informa il browser della larghezza dello schermo e del livello iniziale di scala
I tag link
Servono a collegare e importare altri file: nel nostro starter template ad esempio viene importato il file bootstrap.min.css che contiene tutti gli stili usati da Bootstrap.
Qualsiasi linguaggio di programmazione (o markup) mette a disposizione uno strumento per creare dei commenti.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
I commenti servono allo sviluppatore per segnarsi delle note o delle informazioni aggiuntive che potranno essergli utili in futuro quando - a distanza di mesi o anni - riprenderà in mano il codice per aggiornarlo: gli sarà molto più facile ricordare come aveva strutturato il programma a suo tempo.
Per lo stesso motivo i commenti saranno utili ad altri sviluppatori che prenderanno in mano il codice per collaborare alla sua stesura: è importante quindi abituarsi a commentare bene il proprio codice, in modo che diventi un documento di facile leggibilità.
Prendi l'abitudine fin d'ora di commentare tutto il tuo codice.
In HTML i commenti si fanno così:
<!-- Testo del commento -->
Esercizio
Commenta lo starter template di Bootstrap spiegando a cosa servono i vari tag.
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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.
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"
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.
Esercizio: 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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.
- 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
Esercitazione Cani
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
-
Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
-
Nome comune: es. "Pastore Tedesco"
-
Nome scientifico: es. Canis lupus familiaris
-
Breve descrizione: carattere, origini, utilizzo.
-
Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
-
Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
-
Curiosità: aneddoti o informazioni interessanti sulla razza.
-
Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
-
Titolo principale: <h1>
-
Titoli delle sezioni: <h2>
-
Paragrafi di testo: <p>
-
Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
-
Liste: <ul>, <ol>, <li>
-
Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
1. Crea un nuovo repository su GitHub
- Segui gli stessi passaggi dell'esercizio precedente, ma questa volta chiama il repository "catalogo_cani".
2. Clona il repository in locale
- Come prima, usa git clone seguito dall'URL del tuo nuovo repository "catalogo_cani".
3. Crea la struttura del progetto
- Dentro la cartella catalogo_cani creare queste sottocartelle:
- images: per le immagini delle razze canine.
- razze: per le pagine HTML di ogni razza.
4. Crea il file index.html
- Questo file sarà la pagina principale del catalogo.
- Includi un titolo, ad esempio "Catalogo di Razze Canine".
- Crea un elenco di 15 razze canine.
- Per ogni razza:
- Mostra un'immagine rappresentativa (es. pastore_tedesco.jpg nella cartella images).
- Inserisci il nome della razza come titolo (es. "Pastore Tedesco").
- Collega sia il titolo che l'immagine alla pagina HTML corrispondente nella cartella razze (es. pastore_tedesco.html).
5. Crea le pagine delle razze
- Per ogni razza, crea un file HTML nella cartella razze (es. pastore_tedesco.html).
- In ogni pagina, includi:
- Foto della razza in formato 3:1: usa Photopea per ritagliare un'immagine della razza in questo formato e posizionala in alto, occupando tutta la larghezza della pagina.
- Nome comune: es. "Pastore Tedesco"
- Nome scientifico: es. Canis lupus familiaris
- Breve descrizione: carattere, origini, utilizzo.
- Foto 1:1 cane maschio: (es. pastore_tedesco_maschio.jpg) e una breve descrizione.
- Foto 1:1 cane femmina: (es. pastore_tedesco_femmina.jpg) e una breve descrizione.
- Curiosità: aneddoti o informazioni interessanti sulla razza.
- Link "Torna alla Home": per tornare a index.html.
Elementi HTML da utilizzare
Usa gli stessi elementi HTML che avresti usato per l'erbario, adattandoli al nuovo contesto:
- Titolo principale: <h1>
- Titoli delle sezioni: <h2>
- Paragrafi di testo: <p>
- Immagini: <img src="percorso/immagine.jpg" alt="descrizione immagine">
- Liste: <ul>, <ol>, <li>
- Link: <a href="percorso/pagina.html">Testo del link</a>
Consigli
- Scegli 15 razze canine che ti interessano.
- Cerca immagini di buona qualità e con licenza che permette l'uso gratuito.
- Scrivi descrizioni accurate e interessanti.
- Utilizza un linguaggio chiaro e semplice.
- Formatta il testo con titoli, paragrafi e liste per renderlo più leggibile.
- Controlla attentamente i link per assicurarti che funzionino correttamente.
Questo esercizio ti aiuterà a familiarizzare con la creazione di pagine web, la strutturazione di un sito semplice e l'utilizzo di GitHub per la gestione del codice. Buon lavoro!
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
È 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)
Esercizio: Videogames
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Tema: Videogiochi Iconici
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
- 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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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: flat ui colors
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
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:
Il sito
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
https://flatuicolors.com/
presenta delle palette di colori che si abbinano bene gli uni agli altri.
Quando prepari i tuoi siti ti consigliamo di non scegliere colori a caso, ma invece di prenderli da una palette preparata da designer esperti.
- Crea un nuovo repository su GitHub e chiamalo flat-colors
- Clonalo in locale
- Crea un file index.html contenente 10 div
- Identifica ogni div con un id che rimandi al nome del colore, ad esempio "sunflower"
- All'interno di ogni div scrivi in due paragrafi di testo:
- il nome del colore: ad es. SUNFLOWER
- il codice esadecimale: ad es. #FFC312
- Applica ai paragrafi coi nomi la classe "nome_colore"
- Applica ai paragrafi con i codici la classe "codice_colore"
- Crea un foglio di stile main.css
- Scegli da Google Fonts un font che ti piace: https://fonts.google.com/ e incorporalo nel tuo file css utilizzando il codice @import preparato dal sito
- Crea delle regole CSS in modo che:
- ogni div abbia dimensioni 500 x 500 pixel
- ogni div abbia come colore di sfondo il colore corretto
- tutti i titoli appaiano di colore bianco con il carattere che hai scelto da Google Fonts
- tutti i codici colore appaiano in grigio su sfondo bianco con un normale carattere Arial di dimensioni ridotte
- tutti i titoli abbiano un effetto ombreggiatura a tua scelta
- tutti i titoli e i codici siano allineati orizzontalmente al centro
BEM Methodology
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:search-form__button_disabled
search-form__button_xs
search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
Box Model
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
È una metodologia per dare nomi coerenti alle classi CSS.
BEM:
BEM:
- Blocco
- Elemento
- Modificatore
Blocco
Un blocco è un componente indipendente della pagina. Lo possiamo usare da solo dove vogliamo.
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Sceglieremo il nome del blocco non in base a com'è fatto, ma a cos'è:
I blocchi possono essere annidati uno nell'altro:
Elemento
È la parte di un blocco e non può essere usata separatamente da esso.
Come nome completo per gli elementi useremo questo formato:
Come nome completo per gli elementi useremo questo formato:
nome-blocco__nome-elemento
Gli elementi possono essere annidati all'interno di altri elementi, ma nella denominazione si fa comunque riferimento al blocco, e non all'elemento genitore... leggiamo con attenzione questo esempio:
Il vantaggio di legare gli elementi al blocco indipendentemente dal livello del loro annidamento è che se un giorno volessimo cambiare la struttura interna del blocco non dovremmo ridenominare tutte le classi.
Modificatore
Definisce l'aspetto (small, large, dark...), lo stato (abilitato, disabilitato, hover...) o il comportamento di un blocco o di un elemento.
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:
Il modificatore è separato con una singola underscore dal resto del nome della classe.
Ecco alcuni esempi:
search-form__button_disabled search-form__button_xs search-form_dark
Approfondimenti:
https://en.bem.info/methodology/quick-start/
https://en.bem.info/methodology/quick-start/
Ogni elemento HTML può essere pensato come racchiuso in una scatola (box) che ha un padding (imbottitura) tra il contenuto (content) e il bordo (border), e un margin (margine) che separa il bordo dagli altri elementi della pagina:
Supponiamo ad esempio di avere due div contenenti del testo:
Possiamo definire queste regole:
ottenendo questo risultato:
Posizionamento
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro. Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK
<div>
<section>
<article>
<nav>
<h1>
<h2>
<p>
ELEMENTI DI TIPO INLINE
<a>
<span>
<img>
FLEX
Esercizio: Scacchi
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
La proprietà position dice come un elemento deve essere posizionato rispetto agli altri elementi della pagina.
Static
È il valore di default: l'elemento viene inserito nel normale flusso della pagina, senza posizionarlo in modo particolare
Relative
Scegliendo il posizionamento relativo è possibile usare le proprietà top, right, bottom e left per dire di quanto l'elemento si deve spostare rispetto alla sua posizione naturale (quella statica).
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Gli altri elementi fluiscono rispetto all'elemento come se si trovasse nella sua posizione statica.
Fixed
In questo caso l'elemento viene posizionato relativamente alla viewport (lo schermo): questo significa che manterrà la stessa posizione anche quando si scorre la pagina.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Gli altri elementi fluiscono come se l'elemento non esistesse.
Absolute
L'elemento viene posizionato relativamente al più prossimo dei suoi progenitori posizionati.
Se div1 contiene div2 e div2 contiene div3, e la posizione di div1 è relative mentre quella di div2 è static, div3 che ha posizionamento absolute sarà posizionato relativamente a div1.
Sticky
L'elemento viene posizionato in modo relativo fino a un certo livello di scroll della pagina, dopodiché assume una posizione fixed.
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Ad esempio il seguente div scorrerà con la pagina fino a raggiungere la posizione 0 nella viewport, dopodiché si bloccherà...
Display
Con la proprietà display posso decidere se il mio elemento html deve comportarsi come inline(es: anchor tags) oppure come block(es: div). Se utilizziamo il display inline gli elementi della pagina si posizioneranno uno di fianco all'altro, mentre se utilizziamo block si posizioneranno uno sotto l'altro.
Se utilizzo display inline posso solo settare il margine destro e sinistro, mentre se voglio che il mio elemento si comporti come un blocco(margini, padding, larghezza e altezza) devo utilizzare inline-block.
ELEMENTI DI TIPO BLOCK <div> <section> <article> <nav> <h1> <h2> <p> ELEMENTI DI TIPO INLINE <a> <span> <img>
FLEX
Usando quello che hai imparato finora, disegna al meglio delle tue capacità una scacchiera sullo schermo (vista dall'alto), posizionandovi poi sopra i pezzi degli scacchi.
Fai in modo che quando si passa con il mouse sopra a una casella questa venga evidenziata cambiando temporaneamente colore.
Importante: usa la BEM Methodology per denominare le classi.
Punti bonus per lavori particolarmente curati nei dettagli.
Punti malus per codice disordinato o nomi delle classi insensati o chatGPT e simili.
Cosa ricordare
Proprietà da ricordare:
color: Colore del testo
background-color: Colore dello sfondo
display: cambio il modo di visualizzazione di un elemento (inline, block ...)
padding: imbottitura, ovvero un "margine" interno
margin: margini esterni
width: larghezza di un elemento
height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore)
:active (cambio stato se premo)
::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi
::after/before (aggiungo dopo/prima l'elemento)
::first-letter (prima lettera di un elemento scritto come h1 o p)
Form HTML
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Proprietà da ricordare:
color: Colore del testo background-color: Colore dello sfondo display: cambio il modo di visualizzazione di un elemento (inline, block ...) padding: imbottitura, ovvero un "margine" interno margin: margini esterni width: larghezza di un elemento height: altezza di un elemento
Pseudo classi & elementi
:hover (cambio stato al passaggio del cursore) :active (cambio stato se premo) ::first-of-type rappresenta il primo elemento del suo tipo tra un gruppo di elementi ::after/before (aggiungo dopo/prima l'elemento) ::first-letter (prima lettera di un elemento scritto come h1 o p)
Form
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Input
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
-
input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Form in HTML, viene utilizzato per raccogliere input dell'utente
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
Il tag <form> si utilizza per creare l'elemento. Esso è un contenitore per diversi elementi di input, come: checkbox, pulsanti opzione, pulsanti di submit(invio) etc.
L'elemento <input> è uno dei più utilizzati, e può essere utilizzato in diversi modi in base type.
Esempi:
Esempi:
<input type="text">
Permette di mettere un inputare un testo a riga singola
- label permette di inserire una scritta in corrispondenza del mio input type, esso viene collegato con l'attributo "for", all'attributo "id" del input type.
- input type="text", è caratterizzato dagli attributi id (per collegrlo al label) e name (per dargli un nome).
<input type="radio">
permette di creare un bottone d'opzione
- input type="radio" definisce il nostro bottone d'opzione, l'attributo "id" serve per collegarlo con il label. L'attributo "name" deve essere uguale per ogni bottone della mia lista, altrimenti se i type="radio" hanno "name" diversi, non di deselezioneranno in automatico. L'attributo "value" è l'informazione che viene passata ad un eventuale server, essa va ad identificare quale opzione è stata scelta.
- label, serve sempre per associare una scritta al nostro input type
<input type="Checkboxes">
Definisce una casella di controllo da spuntare
<input type="submit">
Definisce un pulsante per inviare i dati ad un eventuale gestore di dati (solitamente in un server)
Tieni presente che ciascun campo di input deve avere un attributo name per essere inviato.
Se l' attributo name viene omesso, il valore del campo di input non verrà inviato affatto.
Esercizio: Albergo
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Bootstrap
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Esercizio da fare a coppie. È sufficiente lavorare insieme su un unico pc.
Proporre la home page per il sito di un albergo di montagna, inserendo tra le altre cose:
- Foto delle camere e del ristorante
- Possibili percorsi per escursioni
- Servizi offerti: sauna, piscina.........
- Modulo di prenotazione
Sarà apprezzata in modo particolare la creatività: il prof assegnerà un premio di punti bonus per:
- il lavoro più bello
- il lavoro con più idee e contenuti
Installazione
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Breakpoints
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>Abbiamo inserito nella nostra pagina web il file css di Bootstrap (bootstrap.min.css) e il corrispondente file JavaScript (bootstrap.bundle.min.js).
Bootstrap definisce questi breakpoint:
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Quando il browser visualizza la pagina è in grado di rilevare la larghezza dello schermo.
Bootstrap ci fornisce delle classi con cui possiamo modificare il layout della pagina in base alla larghezza corrente.
Ad esempio nella tabella sopra vediamo che uno schermo di 1100px sarà considerato Large (lg) perché è oltre il breakpoint dei 992px ma sotto quello dei 1200px.
Containers
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:Container
<div class="container">
<!-- Contenuto -->
</div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid">
...
</div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Griglia
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
I container sono gli elementi di base per costruire i layout con Bootstrap.
Per usare la griglia di Bootstrap bisogna sempre essere dentro a un container.
Esistono tre tipi di container:
Container
<div class="container"> <!-- Contenuto --> </div>
Imposta una max-width in corrispondenza di ogni breakpoint:
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
In uno schermo Medium quindi il container avrà una larghezza fissa di 720px, mentre in uno schermo Large avrà una larghezza fissa di 960px.
Questo ci permette tra le altre cose di ottimizzare le immagini da inserire nella nostra pagina (troppo piccole verrebbero sgranate, troppo grandi rallenterebbero il caricamento della pagina).
Container-{breakpoint}
<div class="container-sm">100% wide until small breakpoint</div> <div class="container-md">100% wide until medium breakpoint</div> <div class="container-lg">100% wide until large breakpoint</div> <div class="container-xl">100% wide until extra large breakpoint</div> <div class="container-xxl">100% wide until extra extra large breakpoint</div>
Si adatta al 100% della larghezza fino al breakpoint specificato:
Ad esempio un container-lg si adatterà al 100% della larghezza fino agli schermi Medium. Dai Large in sù invece si comporterà come un normale Container.
Container-fluid
<div class="container-fluid"> ... </div>
Il container-fluid si allarga in modo da occupare sempre il 100% della larghezza, indipendentemente dalla larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Sarà utile ad esempio per inserire immagini che si estendano all'intera larghezza dello schermo.
Bootstrap divide lo spazio nella pagina in 12 colonne:
- Per fare in modo che un oggetto sia largo come metà pagina quindi dovremo specificare 6 colonne.
- Per un terzo: 4 colonne.
- Per un quarto: 3 colonne.
- Per un sesto: 2 colonne.
- Per un dodicesimo: una colonna.
<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>Nel codice qui sopra vediamo che per prima cosa creiamo un container, dentro il quale mettiamo un div di classe riga che a sua volta contiene tre div di classe colonna. Il risultato sarà il seguente, con tre colonne di uguale larghezza:
Specificare la larghezza delle colonne
Possiamo specificare la larghezza di una colonna usando la classe corrispondente:
Ad esempio:
Ad esempio:
<div class="container text-center">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>Produrrà questo risultato:
Colonne responsive
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>
Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:- larghe 6 per tutti gli schermi.
Immagini responsive
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Possiamo specificare un breakpoint per dire che una colonna dovrà assumere una certa larghezza a partire da quel breakpoint, ad esempio:
<div class="container text-center">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
<div class="col-sm">col-lg</div>
</div>
</div>Abbiamo due righe.
Nella prima riga troviamo due colonne di larghezza 8 e 4 a partire dagli schermi small.
Per schermi più piccoli le colonne appariranno impilate una sopra l'altra (stacked).
Nella seconda riga abbiamo tre colonne di uguale larghezza a partire dagli schermi lg.
Per schermi più piccoli le colonne appariranno impilate.
Combinazioni
Possiamo definire con maggiore dettaglio il comportamento delle colonne nei vari dispositivi.
Guardiamo questo esempio:
Guardiamo questo esempio:
<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>Abbiamo tre righe.
Nella prima riga troviamo:
- una colonna larga 8 dagli schermi medium in sù, stacked per quelli più piccoli.
- una colonna larga 4 dagli schermi medium in sù, larga 6 per quelli più piccoli.
Nella seconda riga troviamo tre colonne uguali che sono:
- larghe 4 dagli schemi medium in sù
- larghe 6 per quelli più piccoli
Nella terza riga troviamo due colonne uguali che sono:
- larghe 6 per tutti gli schermi.
Esercizio: wall
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Navbar
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Utilizzando una serie di belle immagini di paesaggi presi da Internet, costruisci una pagina che le visualizzi adattandosi agli schermi di diversa larghezza in base a queste specifiche.
Prima riga
Un'unica grande immagine.
Seconda riga
Due immagini di uguale larghezza su qualsiasi schermo.
Terza riga
Quattro immagini che stiano:
- impilate su schermi extrasmall
- a due a due, di pari larghezza, su schermi medi
- quattro in riga, di pari larghezza, su schermi dall'xl in sù
Quando lo spazio su una riga termina, le colonne vengono mandate a capo automaticamente nella riga successiva.
Quarta riga
Tre immagini che stiano:
- impilate su schermi extrasmall
- una di larghezza massima, una di larghezza un terzo, una di larghezza due terzi su schermi lg
- tre sulla stessa riga, di pari larghezza, su schermi dall'xl in sù
Quinta riga
Sei immagini che stiano:
- impilate su schermi extrasmall
- due su ogni riga su schermi medium
- tre su una riga e tre su un'altra, su schemi large
- due su una riga e quattro su un'altra, su schemi xl
- sei sulla stessa riga, su schermi xxl
Accordion
Alerts
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Buttons
Card
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Carousel
Esercizio: Pet Shop
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Lavoro da fare a coppie entro martedì 12 dicembre. Sarà possibile lavorarci anche da casa.
Utilizzando i componenti di Bootstrap visti finora, e applicando le vostre conoscenze di CSS, create la home page di un sito per il Pet Shop Zampalesta.
Il cliente non ha ancora deciso a chi farà realizzare il suo sito, quindi è importante fare buona impressione proponendogli qualcosa di bello e un po' speciale, che si differenzi dalla concorrenza. Libero spazio alla fantasia quindi.
Si raccomanda di creare un repository per memorizzare il lavoro.
Si richiede che il sito sia ottimizzato sia per desktop che per mobile, facendo un uso intelligente della griglia responsiva di Bootstrap.
Esercizio: Better ears
Cura anche la versione mobile.
Cura anche la versione mobile.