Guida HTML e CSS in italiano

Se pensiamo al web, di cui ogni giorno facciamo utilizzo, non possiamo non sapere cos’è l’HTML e quale funzione svolga, proprio perché è grazie ad esso che riusciamo tutt’oggi a creare e, quindi, a visionare i siti web. L’ acronimo HTML sta per “ Hyper Text Markup Language “, ovvero linguaggio a marcatori per ipertesti, un linguaggio di marcatura (e non un linguaggio di programmazione!!) che ci permette di costruire la struttura delle nostre pagine web. L’ultima versione di HTML a nostra disposizione è l’HTML5. A differenza delle vecchie versioni di HTML, con le quali si potevano creare siti web prettamente statici, quest’ultima versione ci permette di aggiungere elementi dinamici e multimediali, di creare giochi o animazioni ed è stata ottimizzata per i dispositivi mobili.  Quindi, non pensi che sarebbe affascinante conoscere i meccanismi del linguaggio su cui poggia, ormai, l'intera comunicazione online? Noi crediamo proprio di sì. Ma perché l’HTML è tanto importante? A Cosa serve? Andiamo a scoprirlo!     

 La funzione dell’ HTML è quella di inserire contenuti all’interno di siti web e landing page per crearne lo scheletro. Ma come inseriamo questi contenuti? Semplice! Lo facciamo attraverso file di testo composti da marcatori (tag) che danno un senso, un valore semantico ai contenuti. Cosa vuol dire? L'html, in breve, ci dice "questo contenuto è un titolo; quest'altro contenuto è un paragrafo" e via discorrendo.  Proviamo a spiegarci: il motore di ricerca (ad esempio Google) "scansiona" la nostra pagina web attraverso dei robot. Questi robot non guardano lo stile, l'estetica della pagina. Leggono, invece, esclusivamente l'html e vogliono capire "questo contenuto cos'è?" Sarà un titolo? È più importante di un altro? Capisci ora quanto importante sia questo linguaggio?  Perfetto!  Andremo, quindi, a impaginare e formattare pagine collegate tra loro attraverso links (collegamenti ipertestuali) e descrivere la struttura di un documento web attraverso i tag. Se vogliamo comprendere più facilmente quanto detto finora, immaginiamo l’HTML come lo scheletro, l’impalcatura della pagina web, spoglia, alla quale, poi, andremo ad aggiungere altri linguaggi per modificarne lo stile e conferire dinamicità (come, ad esempio, il linguaggio CSS e il linguaggio JavaScript). Quando creiamo lavori per il web dobbiamo sicuramente prestare attenzione al fatto che ogni linguaggio di programmazione venga utilizzato per lo scopo per il quale è stato creato, poiché ognuno ha la propria, precisa, funzione. Questo è un concetto perno dello sviluppo web: dobbiamo rispettare un principio fondamentale della programmazione, ossia la Separation of Concerns (separazione delle responsabilità). Non utilizzeremo assolutamente, quindi,  l’HTML per creare dello stile, ad esempio, in quanto quello sarà compito del CSS. Come possiamo dedurre quindi, conoscere l’HTML è molto importante per Web Designer e Sviluppatori Web, ma a chi dobbiamo dare il merito della sua creazione?      

Le persone che hanno guidato e che guidano la trasformazione di Internet sono note - pensiamo a Bill Gates e Steve Jobs - ma quelle che hanno sviluppato il suo funzionamento sono, talvolta, sconosciute e non celebrate in un’era tecnologica che loro stesse hanno contribuito a creare. Una di queste persone è Tim Berners-Lee, creatore del World Wide Web, dell’HTTP (HyperText Transfer Protocol), dell’URL (Universal Resource Locator) e, quindi, dell’HTML. L’idea di base era quella di creare un sistema per gestire e condividere la grande massa di informazioni prodotta dai ricercatori e scambiarsi dati da un computer all’altro. Proprio da questa semplice idea, nacque l’invenzione che ha cambiato la vita a milioni di persone. Berners-Lee, scienziato e accademico, assieme ai suoi colleghi del Cern (organizzazione scientifica internazionale) di Ginevra, inventarono, nel 1989, il World Wide Web. La prima versione di HTML, pubblicata ufficialmente nel 1993, era un vero e proprio editor per browser. È incredibile pensare a quanta strada sia stata fatta sino all’HTML5 - la versione attuale di html - e quanta altra ne faremo.. E tenendo bene a mente questo proposito, addentriamoci nel vivo e impariamo assieme la struttura dell’HTML!    

Chi realizza siti web è solito dotarsi di Editor di Testo o IDE (Integrated Development Environment) per ottimizzare il workflow giornaliero. Su Internet ne esistono molteplici, come ad esempio Sublime Text, Atom, ecc. Ogni sviluppatore ha il suo stile, quindi la scelta dell’editor HTML adatto è individuale, ma quello che noi di Aulab consigliamo di utilizzare è Visual Studio Code. Nonostante il suo rilascio recente, nel 2015, VSC (prodotto da Microsoft) è assolutamente solido, ha un’interfaccia modificabile a vostro piacimento e dispone di estensioni che permettono di aggiungere ulteriori funzionalità (come Live Server che ci permette di vedere in tempo reale il nostro documento HTML su browser). Altro aspetto da non sottovalutare è che il software è totalmente gratuito.  Ti sveliamo un altro piccolo segreto: l’editor supporta HTML, CSS, JavaScript, PHP e tanti altri linguaggi di programmazione attraverso dei plugin, quindi non dovrai mai cambiare strumento. Ha anche la funzione di IntelliSense per l’evidenziazione della sintassi e il completamento automatico (ad esempio il sistema Emmet), e include il supporto a GitLab/GitHub (il repository online dei tuoi progetti).     È proprio grazie ad Emmet, ad esempio, che riusciamo a preimpostare con facilità una pagina HTML su Visual Studio Code. Come? Ci basterà digitare HTML:5 e premere invio. Comodo, no?      Un altro motivo valido per l’utilizzo di Visual Studio Code è la bash incorporata. Con la shortcut ctrl + J (o Cmd + J per Mac) sarà possibile avere il terminale a disposizione già su Visual Studio Code, strumento fondamentale con il quale i programmatori interagiscono con il proprio computer .     Ti lasciamo immaginare l’enorme risparmio di tempo che comporta questa funzionalità, oltre che la possibilità di non perdere il proprio flusso di lavoro!   Visualizzatore html Oltre agli editor di testo, un altro strumento fondamentale nel processo di sviluppo web è il visualizzatore HTML. Mentre gli editor di testo offrono funzionalità di modifica e scrittura del codice HTML, i visualizzatori HTML sono strumenti dedicati a interpretare e visualizzare il codice HTML in modo visivo. Sono particolarmente utili per verificare l'aspetto e il funzionamento del contenuto HTML. Mentre gli editor di testo forniscono un ambiente di lavoro per la creazione del codice, i visualizzatori HTML consentono agli sviluppatori di esaminare l'anteprima della pagina web generata, controllare la struttura, la formattazione e l'interattività, facilitando il processo di debugging e di perfezionamento del codice HTML. Pertanto, combinando gli strumenti di modifica degli editor di testo con la visualizzazione dei visualizzatori HTML, gli sviluppatori possono ottenere un flusso di lavoro più efficiente e accurato nella creazione e nell'ottimizzazione di pagine web. Live Server è un esempio di visualizzatore HTML molto popolare tra gli sviluppatori web, ed è proprio un'estensione del nostro consigliatissimo Visual Studio Code. Non ti resta che scaricarlo ed iniziare!   

Se non vuoi installare alcun editor di testo ma vuoi prima toccare velocemente con mano la scrittura del codice html e css, non preoccuparti: abbiamo la soluzione che fa per te. Esistono, infatti, editor di testo online che ti permetteranno di testare il tuo codice. Tra questi, uno dei più famosi e utilizzati è sicuramente Codepen. Cos’ è Codepen? CodePen è una piattaforma online ampiamente utilizzata dagli sviluppatori web di tutto il mondo per scrivere, testare e condividere codice HTML, CSS e JavaScript. Fondato nel 2012, CodePen ha rapidamente guadagnato popolarità grazie alla sua semplicità d'uso e alla sua robustezza come strumento di sviluppo web. CodePen fornisce un ambiente di sviluppo completamente online, eliminando la necessità di installare software o configurare ambienti di sviluppo complessi. Gli utenti possono accedere alla piattaforma direttamente dal loro browser web, rendendo l'esperienza di sviluppo web accessibile e conveniente. Una delle caratteristiche distintive di CodePen è la sua capacità di offrire una visualizzazione in tempo reale dei risultati del codice scritto. Mentre scrivi HTML, CSS o JavaScript, puoi vedere immediatamente come influisce sull'aspetto e sul comportamento di una pagina web. Questa caratteristica è estremamente utile per il debugging e il testing. Inoltre, CodePen offre la possibilità di creare progetti condivisibili. Gli utenti possono salvare i loro lavori, generare un link unico e condividerlo con altri sviluppatori o clienti per la revisione e la collaborazione. CodePen è diventato un punto di riferimento nella comunità degli sviluppatori web grazie alla sua semplicità, alla sua comunità attiva e alla vasta libreria di esempi di codice e progetti realizzati da altri utenti. Sia che tu sia un principiante che sta imparando i rudimenti dello sviluppo web o un professionista esperto alla ricerca di un ambiente di test rapido, CodePen è uno strumento che offre molteplici vantaggi per aiutarti a scrivere, testare e condividere il tuo codice web in modo efficiente.   Per capire come utilizzare Codepen, leggi la nostra mini-guida “editor online Javascript”!

La struttura di un documento html La struttura di un documento HTML è composta da un contenitore <html> e due sezioni ben distinte, ossia la <head> e il <body>. Immaginiamo la nostra semplice pagina HTML come un essere umano: è composto dalla testa (head) e dal corpo (body). Più nel dettaglio nella metafora, l’head rappresenta il cervello del nostro essere, le conoscenze interne che daremo al nostro documento HTML; conterrà, quindi, tutte le meta-informazioni che occorrono ad un foglio html per funzionare (ad esempio link a file e fonti esterne, meta tag ecc). Il body, invece, rappresenta tutto quello che vedremo in maniera tangibile nel browser e dunque il contenuto informativo principale.  Abbiamo detto che nell'head, invece, ci saranno le meta-informazioni...Ma che cosa sono? Facile! Le meta-informazioni sono tutte quelle informazioni aggiuntive che descrivono il contenuto principale. La meta-informazione è un info che sta dettagliando l 'informazione principale. Pensiamo ad un' informazione qualsiasi: "l'ultima versione di html, ovvero html:5. è una vera rivoluzione!"; questa è l'informazione di base. A questa, però, noi possiamo aggiungere ulteriori dettagli: la data, l'autore e via discorrendo. Ecco: quelle info aggiuntive non sono altro che meta-informazioni. È più chiaro così, vero? Tutti questi elementi, ovviamente, necessitano del relativo tag di chiusura: </html>, </head> e </body>.   Vediamo assieme un esempio di struttura HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html> Il DOCTYPE è la prima dichiarazione di una pagina web scritta in linguaggio HTML e deve precedere sempre il tag <html> di apertura del documento. Il DOCTYPE, a differenza degli altri, non è un tag ma una dichiarazione che indica al browser quale versione di HTML stiamo utilizzando in questo documento. Nella <head> invece, troviamo dei “tag speciali”, definiti Meta Tag che non necessitano di chiusura. I Meta Tag, detti anche metadati, sono dei Tag HTML che descrivono il contenuto della pagina ai motori di ricerca e ai visitatori del sito web. È sempre nella <head> che andranno inserite le altre conoscenze di supporto alla creazione dei nostri siti (come ad esempio il collegamento a framework/librerie esterne o link alla nostra pagina di stile CSS).  Il title tag, infine, è quel tag che rappresenta il titolo della nostra pagina web, lo stesso titolo che apparirà nella pagina dei risultati dei motori di ricerca. Ed è proprio il browser che userà il title tag, questa meta informazione, per inserire nella barra del browser di chrome, il titolo. Ma dove creiamo i nostri lavori? Come già detto, ottime spalle per uno sviluppatore web sono gli editor di testo. Non sentirti confuso su quale utilizzare, noi di Aulab ve ne abbiamo già consigliato uno: Visual Studio Code.  

Cos'è un tag? L' HTML (acronimo di hypertext markup language) è un linguaggio di markup, ovvero un linguaggio che consente di evidenziare un contenuto attraverso un etichetta, definita "tag", e dare a questo contenuto un significato semantico. Questi tag, con i loro attributi costituiscono il fulcro della struttura di una pagina web, il suo scheletro. È come se, letteralmente, il linguaggio di markup evidenziasse un componente per "classificarlo" in quanto tale. "Questo è un titolo! Questo è un paragrafo!" E così via. Immaginiamo, quindi, questi tag e i loro attributi come un insieme di strumenti che permettono di modellare il nostro documento.   Ad esempio, vi sono elementi che consentono di inserire immagini in html, così come video o link, ed elementi che permettono di inserire titoli, paragrafi e molto altro ancora.   Vi sono ancora altri elementi che non hanno una rappresentazione tangibile, ma il cui unico scopo è quello di dare un valore semantico ad una parte del documento in cui vengono inseriti. Questi ultimi sono noti come tag semantici, ma li vedremo in seguito.   Struttura di un tag html Andiamo, ora, nel dettaglio dei tag HTML e analizziamo le parti che li compongono. Un elemento HTML è composto normalmente da due tag: il tag di apertura e il tag di chiusura.   <h1> Hello World! </h1> Struttura di un elemento HTML  Il tag di apertura è composto dal nome dell’elemento (nell’esempio qui sopra si tratta di un titolo) racchiuso tra le parentesi angolari (“<” e “>”).  Il tag di chiusura ha la stessa struttura di quello di apertura, con la differenza che il nome dell’elemento è preceduto da uno slash “/”.   Quando parliamo di elemento html ci riferiamo al connubio tag - contenuto. L'elemento è, quindi, costituito dal tag - di apertura e di chiusura - che abbraccia, descrive, definisce il contenuto, e dal contenuto stesso. Non tutti gli elementi, però, seguono il modello sopracitato: alcuni sono costituti da un singolo tag che viene generalmente utilizzato per inserire/incorporare qualcosa all’interno del documento HTML (ad esempio, il tag <img> che consente di inserire immagini in html). Questi tag, noti come tag autoconclusivi, non abbracciano un contenuto, ma presentano nei loro attributi elementi che sono informazione (come l’attributo src per il tag <img>).    Attributi in HTML Come appena menzionato, ogni tag può avere degli attributi. Questi attributi rappresentano delle meta-informazioni del tag, e definiscono i valori o le proprietà che i browser utilizzano per l’elaborazione del documento. Gli attributi, che sono specificati all'interno del tag stesso, sono elementi aggiuntivi che vengono utilizzati per fornire informazioni aggiuntive o specifiche al tag HTML. In altre parole, gli attributi forniscono istruzioni o dettagli su come l'elemento dovrebbe comportarsi o essere visualizzato: capisci bene come gli attributi siano una componente essenziale per arricchire la struttura e il comportamento delle pagine html. Non per ultimo, gli attributi possono variare, ovviamente, in base all'elemento html, ma, probabilmente, ti sarà tutto più chiaro fornendoti un esempio concreto!  Tag anchor, anchor link e a href Come promesso, andiamo a specificare quanto detto sopra: l'esempio che riporteremo, è quello del tag anchor <a>, utilizzato per creare collegamenti ipertestuali. Il tag anchor funziona come un contenitore per definire i collegamenti cliccabili all'interno di una pagina web; può avvolgere del testo, un'immagine o qualsiasi altro elemento che si desidera rendere cliccabile: in breve, il tag anchor permette di inserire un anchor link all’interno del documento. Ma questo anchor link, a cosa sta puntando? A definirlo è l’attributo “href”, che contiene, nel concreto, il riferimento ipertestuale, cioè un link esterno a cui l’utente sarà indirizzato.   Ricapitolando: Un tag anchor abbraccia un qualsiasi elemento html che contenga un collegamento ipertestuale (anchor link). L' anchor link, noto anche come collegamento interno, è, appunto, il collegamento ipertestuale che consente agli utenti di spostarsi all'interno di una pagina web verso una specifica sezione o posizione definita. Questo tipo di collegamento è possibile grazie all'utilizzo combinato del tag anchor e dell'attributo href.   Questo potente elemento consente agli sviluppatori web di indirizzare gli utenti verso altre pagine web, sezioni specifiche all'interno della stessa pagina o risorse esterne. L'attributo href svolge un ruolo cruciale nel definire il percorso di destinazione del collegamento, che può essere un URL completo, un identificatore all'interno del documento o un percorso relativo. Grazie alla flessibilità offerta dal tag anchor e dall'attributo href, è possibile creare un'esperienza di navigazione interattiva e coerente per gli utenti, consentendo loro di esplorare il contenuto web in modo intuitivo e rapido. L’attributo “rel” identifica la relazione tra il documento corrente (quello contenente il link) e il documento di destinazione (quello inserito nell’href). Ma attenzione! L'attributo "rel" non è proprio esclusivamente del tag <a>; potrebbe essere un valido alleato anche del tag <link>, ad esempio. Una  casistica interessante è quella del "nofollow" come valore dell'attributo "rel". Parliamo di un qualcosa di estremamente utile e potente, poichè se, ad esempio, un utente dovesse inserire dei link non graditi sul tuo sito, grazie a questo simpatico amico potrai istruire il robottino del motore di ricerca che scansionerà la tua pagina ad ignorare quel link! Incredibile, eh? <a href="" rel="">Link</a> Tag html a href e rel Come è possibile vedere nell’esempio qui sopra, gli attributi sono coppie chiave-valore separate dal carattere = (uguale) seguito dal valore assegnatogli racchiuso tra virgolette.  Molti degli attributi in HTML5 sono noti come attributi globali, vale a dire che sono disponibili per tutti gli elementi. Tuttavia, la maggior parte degli elementi possiede uno specifico set di attributi, disponibili solo per loro.     

Abbiamo, dunque, appurato che i tag sono delle “etichette” che avvolgono il contenuto del nostro codice html e ci consentono di dargli una struttura logica e gerarchica. Ma è proprio in quest’ottica che è molto importante parlare anche dei cosiddetti tag generici.   I tag generici sono dei tag “neutri” utilizzati principalmente al mero scopo di separare un contenuto da un altro. Immaginiamoli, quindi, come una sorta di macro-contenitori in cui inserire i nostri elementi, dividendoli.   div html: cos'è? Il tag neutro per eccellenza è il tag <div></div> che può contenere paragrafi, immagini, titoli, e via discorrendo: può contenere, dunque, qualsiasi tipo di elemento HTML. Il tag <div> offre flessibilità nel posizionamento dei contenuti e nella creazione di griglie o layout complessi. L'utilizzo appropriato dei tag <div> può migliorare la leggibilità e la manutenibilità del codice, consentendo una chiara separazione e organizzazione dei contenuti all'interno di una pagina web. Ricorda: il tag div ha comportamento bloccante, il che significa che non potrai visivamente affiancare un elemento fuori dal div in questione ad esso. (Che paroloni, eh? Te la semplifichiamo: il tag div ti fa "andare a capo"!)   Span html C’è, tuttavia, un altro tag neutro di cui parlare: si tratta del tag <span></span>; a differenza del “div” questo tag contrassegna una parte di testo o, in genere, di documento, a cui vogliamo dare una caratteristica particolare, magari utilizzando un linguaggio di stile come il CSS, di cui ci occuperemo più avanti. La differenza principale è che lo span è un tag inline, ovvero non ha il comportamento bloccante di cui sopra. A differenza del tag <div>, il tag <span> non crea divisioni o sezioni, ma si limita ad avvolgere o delimitare una porzione di testo o altri elementi. Il tag <span> non cambia la struttura o il flusso del documento. Viene, come già detto, spesso utilizzato per applicare stili specifici a parti di testo, come il colore, il carattere o lo stile del testo, o per selezionare parti specifiche del codice per scopi di scripting o manipolazione tramite JavaScript.   In sintesi, la differenza principale tra il tag <div> e il tag <span> riguarda la loro natura bloccante o di linea e il loro utilizzo. Il tag <div> viene utilizzato per creare sezioni o divisioni di contenuto all'interno di una pagina, mentre il tag <span> viene utilizzato per applicare stili o manipolare parti specifiche di testo o altri elementi. Entrambi gli elementi sono fondamentali nella creazione di layout e nell'applicazione di stili in HTML, ma vengono utilizzati in contesti diversi a seconda delle esigenze specifiche del progetto.

Ti sarai certamente imbattuto, leggendo le altre nostre guide sull’HTML, nelle parole “meta tag”. Abbiamo, infatti, già parlato di tag e attributi html, ma che cosa sono nello specifico, i meta tag? Ci sembrava doveroso parlarne in maniera un pò più dettagliata per schiarirti le idee. I meta tag (o, appunto, tag di meta-informazione) non sono altro che dei tag contenenti meta informazioni, ovvero, tutte quelle informazioni aggiuntive, ma preziosissime, che occorrono al tuo codice per consentire ai motori di ricerca di comprendere meglio quali sono i contenuti del tuo sito web, al fine di migliorarne la posizione tra i risultati di Google e aumentarne, così, il traffico. Andiamo, adesso, a vedere da cosa è composto un meta-tag, quali sono  i principali tipi di meta-tag e come inserirli per ottimizzare al meglio il tuo codice. La struttura del meta tag Possiamo tranquillamente affermare che gli attributi fondamentali del tag meta sono due: name e content. Il loro funzionamento è immediato: l’ attributo “name” indica, appunto, il nome della meta-informazione, il cui contenuto verrà poi sviscerato, appunto, all’interno del “content”. Due attributi letteralmente parlanti, no? Come puoi vedere nella foto, inoltre, il tag meta non ha un tag di chiusura. Vediamo, poi, nell’esempio, diversi attributi a seconda del tag (ad esempio “http-equiv” che contiene info essenziali alla comunicazione tra browser e server, assai utili in termini di indicizzazione del tuo sito , o il “charset” che va ad indicare al browser il set di caratteri utilizzato nel sito - in Occidente utilizziamo l’ UTF-8 -) Tuttavia     I principali meta tag Prima di iniziare la classifica vorremmo spiegarti come incorporare i meta-tag all’interno del tuo codice. Infatti, una caratteristica fondamentale dei meta-tag è che questi non compariranno sulla tua pagina web bella e finita - quindi quella che visualizzerà l’utente ultimo -  ma verranno esclusivamente letti dal browser. Come fare a farlo? Nulla di più semplice: i meta-tag vanno inseriti nell’head del nostro documento html.  Tutto chiaro? Partiamo con la nostra lista dei più importanti meta tag!  Meta tag Title  Il “title” in realtà, a voler essere precisi, non è un meta-tag, ma è comunque una meta-informazione. Questa meta-informazione non verrà letta dall'utente, ma è fondamentale per l’interazione con lo user agent. (l'applicazione installata sul computer dell'utente che si connette ad un processo server, che legge la nostra pagina html, che può essere il browser stesso oppure il robot di un motore di ricerca) e, quindi, ha lo stesso scopo dei meta tag. Attenzione! Questa meta-informazione viene usata dal browser per inserire sulla tab il titolo della nostra pagina. Quando decidi di creare un sito web, quindi, non puoi prescindere dal tag title. I motori di ricerca utilizzano proprio questo titolo come voce nell’elenco dei risultati: riesci a coglierne il potenziale per il traffico sul tuo sito? Meta tag Viewport La “viewport” è la grandezza della tua pagina web.  Certamente questa cambierà a seconda del dispositivo da cui fruisci del sito stesso. Pensaci: lo schermo di un cellulare è più piccolo di quello di un computer, no? Ecco, con il tag viewport noi andiamo a definire le indicazioni che il browser dovrà seguire su come gestire le dimensioni e il ridimensionamento della pagina. Lo utilizziamo, dunque, per istruire il browser al responsive.  Introdotto con l' html5, l'utilizzo del meta tag viewport offre numerosi vantaggi. Innanzitutto, consente di fornire una visualizzazione ottimizzata del contenuto su dispositivi mobili, adattandolo in modo intelligente alle dimensioni dello schermo. Ciò migliora notevolmente l'esperienza dell'utente, rendendo il contenuto più leggibile e facilitando la navigazione. Inoltre, una viewport correttamente gestita può contribuire a migliorare la velocità di caricamento delle pagine e l'efficienza complessiva del sito web.   Meta tag Description Il meta tag Description fornisce una descrizione del contenuto di un sito.  Serve, quindi, a spiegare, in breve, di cosa ti occupi nella tua pagina web. È importantissima lato SEO, ma perché funzioni è necessario non dilungarsi troppo: devi utilizzare per la tua meta-description un massimo di 100-150 caratteri, spazi inclusi, altrimenti si corre il rischio che i motori di ricerca, addirittura, ignorino la descrizione. Anche qui parliamo di un meta tag fondamentale, in quanto si tratta proprio della descrizione che vedrai apparire sotto il titolo alla comparsa del tuo sito web nella lista dei risultati di ricerca. Parliamo, quindi, di un elemento molto importante sia lato macchina che lato utente. Meta tag Author e Copyright Questa coppia di meta tag non è obbligatoriamente da inserire, tuttavia può rivelarsi molto utile per le questioni legate, appunto, al diritto d’autore. Come è facile immaginare serve ad identificare l’autore del documento e a gestire qualunque tipo di contravvenzione legata alla proprietà dello stesso, qualora dovesse presentarsi. Meta tag Robots  I motori di ricerca si affidano a dei bots che analizzano i contenuti di una pagina web in modo metodico e automatizzato. Il compito di questa tipologia di meta tag è quello di fornire a questi bots istruzioni per l’indicizzazione. Come funziona? Il crawler (così si chiama il bot in questione) esegue una copia di testo dei documenti presenti nelle pagine web e ne crea un indice che ne consente la ricerca e la visualizzazione. Col nostro meta tag “robots” possiamo delineare se una pagina deve o meno essere inserita in tale indice, se il motore di ricerca deve ignorare quel contenuto o tenerlo presente e in quali modalità. Meta tag Keywords Nonostante un tempo fosse rilevantissimo come meta tag, ad oggi il suo utilizzo è diventato obsoleto.  Naturalmente serviva a definire, per l’appunto, le parole chiave pertinenti all’ argomento di una pagina web e che potessero suscitare l’interesse dei fruitori, da mettere in risalto per migliorare quanto più possibile l’indicizzazione. Questi elementi si sono, però, col tempo, rivelati troppo facili da manipolare: in alcuni casi i professionisti, al fine di danneggiare e far diminuire il traffico sui siti dei competitors più popolari,  aggiungevano nei loro metadati keywords anche non attinenti ai loro contenuti; o ancora, allo stesso scopo, inserivano una lista lunghissima di keywords nell’attributo meta, che fossero pertinenti o meno. Pertanto Google ha deciso di  non utilizzare più il meta tag keywords per il suo algoritmo. Attenzione! Le keywords sono ancora un validissimo strumento per la SEO, solo non utilizzate all’interno del meta-tag, bensì direttamente nel testo in pagina. Questa era una piccola lista di quelli principali, ma i meta tag di certo non finiscono qui! Il nostro suggerimento è di informarsi anche in merito agli altri, poichè, magari, in alcuni casi più specifici, potrebbero rivelarsi utili. 

Fino ad ora ci siamo occupati di tutto ciò che concerne l'head: ora, finalmente, spostiamoci nel body! Occupiamoci, quindi, del contenuto vero e proprio della nostra pagina html! Continuando la nostra esplorazione dei tag propri del linguaggio html,  è impossibile prescindere dalla spiegazione dei tag headings. Molto banalmente, i tag headings (ad esempio <h1></h1>, ma per comodità li definiremo “gli h”) sono utilizzati per definire titoli e sottotitoli in una pagina html. Quello che vorremmo farti capire è che, prima ancora di immaginare come il motore di ricerca valorizzerà o penalizzerà la tua pagina web, devi imparare ad essere tu, per primo, un buon cittadino del web: è essenziale, dunque, che tu capisca che gli headings servono ad evidenziare quelli che saranno i titoli della tua pagina, per facilitare innanzitutto l'esperienza del fruitore che la naviga. Di conseguenza, dato che i motori di ricerca usano proprio i titoli per indicizzare la struttura e il contenuto delle pagine web, capirai che, se questo aspetto non è ben curato, ti penalizzeranno lato SEO. Dunque, è normale che ogni pagina abbia un solo <h1>, ad esempio, perchè il titolo più importante di una pagina sarà sempre e soltanto uno. Prova ad immaginare quanto sia potente un buon utilizzo deglil headings, ad esempio, per un fruitore non vedente!!! Quindi, tu avrai un vantaggio lato SEO ogni qualvolta che farai qualcosa che ti renderà un buon cittadino del web: un vero e proprio premio! Tirando le somme, quindi, oltre all’esigenza organizzativa piuttosto ovvia che vanno a soddisfare nell’atto stesso della scrittura, questi tag sono estremamente utili lato SEO (una delle cose che Google e gli altri motori di ricerca considerano per determinare il contenuto di una pagina sono le parole che compaiono all'interno di questi tag; perciò, se stai tentando di posizionarti per particolari parole o frasi, è davvero un'ottima strategia includere tali parole e frasi nei tag h), ma il focus principale è quello di facilitare e migliorare l’esperienza dell’utente che visita un sito. Le prime cose che un utente nota, infatti, scorrendo velocemente una pagina web (ricordiamoci che, ad oggi, la soglia dell’attenzione dei fruitori è molto bassa) sono proprio i titoli : ti ci rispecchi, eh? Proprio per questo è importante utilizzare i diversi tag headings per mostrare, a colpo d’occhio, la struttura gerarchica delle informazioni nella tua pagina web. Cerchiamo di capire meglio questo concetto. L'HTML definisce sei livelli di headings. Ciò significa che abbiamo a disposizione ben 6 tag per inserire i nostri titoli. Questi tag sono h1, h2, h3, h4, h5 e h6, espressi in ordine decrescente di importanza. h1 verrà utilizzato come titolo principale, il più importante. Ricorda! Da buon cittadino del web, per il discorso di cui sopra, devi ricordare che va inserito un solo h1 per pagina html. h2 si userà, invece, per intitolare le sezioni più importanti all'interno del contenuto globale. h3 andrà ad intitolare le sottosezioni. e così a scalare, fino ad arrivare all’ h6, il meno importante. Per adoperare al meglio questa funzione gerarchica informativa, ad aiutarci subentrano anche le dimensioni dei nostri tag headings: dal lato utente dobbiamo fare in modo che l’h1, più importante, sia anche il più grande, e così a scalare fino al più piccol o h6. Questo solitamente avviene già grazie allo stile dato di default dal browser, ma qualora non dovesse essere così, saremo noi ad impostare lo stile in questo modo: Impossibile sbagliare!  

Ci sono diverse modalità con le quali inserire i tuoi testi quando scrivi una semplice pagina in html. Avrai capito, ormai, che per farlo abbiamo bisogno dei nostri tag. I tag necessari all’ integrazione di un testo nella nostra pagina sono principalmente gli headings - di cui abbiamo già parlato - e i paragraphs che identificano, appunto, un paragrafo in una pagina html, o, meglio, il contenuto testuale di quest'ultima. Il paragraph contrassegnato dal tag <p> </p> ha comportamento bloccante : i browser aggiungono automaticamente una singola riga vuota prima e dopo ogni elemento <p>. Cosa vuol dire? In maniera molto semplice, il tag <p> fa “andare a capo”. Un altro modo per mandare il testo a capo è il tag <br> Questi sono i tag utili all’inserimento del testo, tuttavia bisogna sempre tenere a mente che ogni tag racchiude non solo una visualizzazione diversa nella forma (un <h1> appare, di default, più grande di un <h6>, ad esempio), ma anche un significato ben preciso, che fa mutare proprio il senso di ciò che stiamo scrivendo.  Detto questo, se volessimo agire meramente sulla formattazione, basterebbe utilizzare il linguaggio css per modificare lo stile del nostro testo, per circoscriverla ad un mero livello visuale.  Quello che però è sempre meglio fare, come best practice, è utilizzare i tag html per conferire al nostro contenuto testuale un valore semantico. Gli headings sono un ottimo esempio, ma quali sono gli altri tag che ci aiutano a raggiungere questo obiettivo? Scopriamolo!   Grassetto: html bold o strong? Spiegare come formattare un testo in grassetto è un ottimo punto di partenza, perché andrà senza dubbio a chiarire ogni tua possibile perplessità su quanto detto fino ad ora. Infatti, per conferire al nostro testo un aspetto più deciso (prescindendo dal linguaggio css)  abbiamo due possibilità:  possiamo utilizzare il tag <b></b> (che sta, appunto, per “bold”, grassetto) che è ormai in disuso, o, ancor meglio, usare il tag <strong></strong>, che va a dire che questa parola abbracciata dal tag è importante. Per fare un parallelismo, è come se, scrivendo su carta, con la mia penna io pigiassi più forte per scriverlo. Il risultato è visivamente identico: allora perché dobbiamo utilizzare <strong> ? La differenza tra i due tag è che <strong> ha un valore semantico: quello che va a cambiare è proprio il significato della nostra parola abbracciata da questo tag, che così facendo assume più importanza. Pensiamo nuovamente ad un fruitore non vedente. L'ear reader, scansionando un contenuto abbracciato dal tag <strong> enfatizzerà quella parola! Ne farà capire l'importanza. Ne cogli la potenza? È proprio in virtù di questa differenza che il tag <b> è ormai deprecato. Ovviamente, ne conseguirà, un ottimo riscontro anche a livello SEO.   Corsivo: html italic o em?   In maniera analoga a quanto detto per il grassetto, per il corsivo possiamo utilizzare il tag <em></em> (che sta per “emphasized text”) oppure <i></i> (che sta, banalmente, per “italic text”), dove il primo, a differenza del secondo (ormai, come e per gli stessi motivi del tag <b>, deprecato!!), ha valenza semantica utile per l'utente prima e, di conseguenza, per la SEO.    Citazioni Una “citazione” può essere intesa sia come il riferimento a parole pronunciate concretamente da una persona terza, che come riferimento ad un testo tratto da una fonte esterna alla nostra pagina web. Il tag <blockquote> </blockquote>, anch’ esso dotato di valore semantico, è l'elemento appropriato da usare per identificare la citazione. È molto importante perchè, da buon cittadino del web, stai riconoscendo che quel contenuto testuale non è "farina del tuo sacco" e il motore di ricerca premierà la tua onestà intellettuale... o ti penalizzerà se vorrai fare il furbo!!! Non ti è perfettamente chiaro il concetto di tag semantico? Fai pure sogni tranquilli! In questo articolo ti abbiamo fornito un accenno alla nozione per farti comprendere meglio quali tag utilizzare per la formattazione del testo, ma ovviamente andremo ad approfondire la cosa con una guida interamente dedicata all’argomento.    

A questo punto cominci ad avere un’idea meglio strutturata di come funziona il linguaggio html. Ne hai imparato la struttura, ne hai conosciuto alcuni tag e attributi e ti senti pronto ad iniziare. Ci siamo: scrivi una semplice pagina in html. Supponiamo che, per iniziare a programmare la tua prima pagina html tu abbia pensato alla creazione di un blog di cucina. Hai inserito il tuo titolo utilizzando un tag h1, hai formattato il tuo testo, e adesso vorresti inserire gli ingredienti della tua ricetta preferita: hai bisogno di un elenco html! Ma, come fare? Gli elenchi, o liste html, sono estremamente utili: abbattono il “wall of text” che si prospetta davanti al lettore, alleggerendone, appunto, la lettura e spronandolo, così, a proseguire. Inoltre aiutano a veicolare meglio un messaggio all’interno del quale siano presenti informazioni d’insieme, perché permettono che queste vengano presentate con chiarezza già a livello visivo. Nel linguaggio html esistono 3 tipologie di elenchi, e tutti funzionano allo stesso modo: hanno un tag padre all’interno del quale si annidano dei tag figli.  Il tag padre rappresenta la tipologia di elenco, i tag al suo interno sono gli elementi della lista. Vediamoli meglio singolarmente. Elenchi (o liste) ordinati Si aprono col tag <ol> (ordered list) che, finito il nostro elenco, andrà chiuso (così come avverrà per tutti gli altri tag inerenti alle liste). Ci crea una lista numerata progressivamente (1,2,3...). Gli elementi della nostra lista abbracciati dal tag <ol> andranno inseriti all’interno, a loro volta, del tag <li></li> (ovvero list item). Gli elenchi possono contenere altri elenchi, ramificandone la struttura. Per intenderci, un list item può aprire un altro sotto-elenco. Trattandosi, però, di un elenco numerato, per ovviare alla confusione che si creerebbe tra elenchi e sotto-elenchi, viene in nostro aiuto l’attributo type. L’attributo type ci consente di definire in che modo avverrà la nostra “numerazione” : essa potrà, infatti, avvalersi di numeri arabi come di romani, o, addirittura, di lettere maiuscole o minuscole. La numerazione con numeri arabi è il valore che abbiamo di default negli elenchi ordinati. Per avvalerci di quella a numeri romani il valore da dare all’attributo type sarà “ type=“I” ”; Per ordinare, invece, gli elementi della nostra lista avvalendoci dell’alfabeto, il valore dell’attributo type sarà “ type=“a” ” o  “ type=“A” ” a seconda che si desideri un indicatore in minuscolo o in maiuscolo. Vediamo nella foto sottostante come dovrebbe apparire il codice: <ol> <li>Primo elemento</li> <li>Secondo elemento <ol type="I"> <li>Primo romano</li> <li>Secondo romano</li> </ol> </li> <li>Terzo elemento <ol type="A"> <li>Primo alfabeto</li> <li>Secondo alfabeto</li> </ol> </li> <li>Quarto elemento</li> </ol> il modo in cui il browser dovrebbe renderizzare questo codice, secondo quanto detto fino ad ora, è questo: Tutto chiaro? Ora, se avessi la necessità di far partire la tua numerazione da un determinato valore, dovresti utilizzare un altro attributo del tag <ol> : l’attributo start. Allo stesso scopo, un altro modo sarebbe quello di utilizzare l’attributo value del tag <li>. Anche qui cerchiamo di capire meglio con l’aiuto di alcune immagini. <ol start="12"> <li>Elemento</li> <li>Elemento</li> <li value="25">Elemento</li> <li>Elemento</li> </ol> Osserva il modo in cui il codice è renderizzato: Come potrai notare,la numerazione della nostra lista parte dal valore assegnato all’attributo start (in questo caso 12) e prosegue; allo stesso modo, con l’attributo value, viene interrotta la naturale consequenzialità dei numeri e viene seguita una progressione a partire dal nuovo valore. ( 25,26… ) Elenchi (o liste) non ordinati Si aprono con il tag <ul> (unordered list); la differenza è che, invece della numerazione che abbiamo nel caso precedente, avremo il puntino. Non si tratterà più, quindi, di un elenco numerato, ma di un classico elenco puntato. Anche per questa tipologia di lista i tag figli sono i list item (<li></li>) e si possono ramificare, questa volta senza la necessità dell’attributo type in quanto il browser di default formatterà i pallini che precedono gli elementi in maniera differente. Elenchi (o liste) di definizione Si aprono con il tag <dl> (definition list) che a sua volta si dirama (invece che in <li> come nei casi precedenti) in <dt> (definition term) che indica il termine che va definito e <dd> (definition description) che è letteralmente la descrizione di quel termine. Sarebbe proprio il tipo di lista utile, ad esempio, per la formattazione del menù di un ristorante:  <dl> <dt>Primi Piatti</dt> <dd>Carbonara</dd> <dd>Parmigiana</dd> <dt>Secondi Piatti</dt> <dd>Tonno in crosta di pistacchio</dd> <dd>anatra all'arancia</dd> </dl> Fame, eh? Ma questo non è l’unico tipo di menù per il quale i nostri elenchi si dimostrano utili: utilizzeremo un elenco, infatti, anche per il  menù html, vale a dire quello che l’utente consulterà ampliando la sua barra di navigazione.

Ti potrà sembrare, a primo impatto, che una tabella possa non servirti mentre sei alle prese con la stesura della tua pagina html. In realtà non è così: prova a pensare, ad esempio, alla parte di immagazzinamento dati di un sito web e-commerce: ecco che ti balza immediatamente in mente quanto utile sia una tabella in quel caso! La tabella in html è, quindi, un elemento indispensabile per l’organizzazione di dati tabellari. Il linguaggio html dispone anche di tag per ovviare a questa necessità: vediamo insieme come realizzare una tabella in html. Prima di tutto cerchiamo di analizzare la struttura di una tabella, su due fronti, aiutandoci con un supporto visivo. Innanzitutto cerchiamo di capire com’è fatta l’ impalcatura della nostra tabella. Come puoi vedere, una tabella è composta da righe (un esempio ne è la riga evidenziata in giallo) e colonne (la parte evidenziata in grigio chiaro). La loro intersezione dà vita a diverse celle, le quali conterranno i nostri dati.  Appresa la struttura di base, andiamo ad analizzare le componenti della nostra tabella. Tag html tabella Come vedi, abbiamo diverse componenti contraddistinte da altrettanti tag. Il contenitore della nostra tabella sarà il tag <table></table> che abbraccerà tutti gli altri. Ora, tenendo bene a mente l’immagine di cui sopra, prova a dare un’occhiata a quella qui sotto: ti aiuterà a capire con esempi concreti che cosa rappresentano gli altri tag. Proviamo a sviscerare un pò questo esempio:  Quello che nella precedente tabella era il tag <caption></caption> e rappresentava il titolo della nostra tabella è, nell’ultima immagine, “Dati anagrafici studenti”. La caption, quindi, ci serve per dare un contesto alla nostra tabella. Per definirla, prova a rispondere alla domanda: che cosa sono questi dati? Avvolta dal tag <thead></thead> troviamo la riga <tr></tr> che abbraccia le intestazioni della tabella, espresse, a loro volta all’interno del tag <th></th>. Il <th> sarà il titolo delle singole colonne e ci aiuterà a suddividere i dati da inserire. (nel nostro caso “nome” ed “età”)  A questo punto subentra il corpo della tabella: il tag <tbody></tbody>, costituito dai dati nelle singole celle, inseriti nel tag <td></td>. (nella nostra immagine di riferimento i <td></td> sono “Mario” “24” “Claudia” “28”). Infine, alla base della nostra tabella troviamo il <tfoot></tfoot>, che delinea il footer della tabella. Questa sezione serve per inserirvi all’interno dei dati di riepilogo (nel nostro caso la media delle età degli studenti.)  A questo punto dovresti avere le idee molto più chiare circa com’è fatta una tabella e quali tag utilizzare per inserirne una nel tuo documento html. Ma, chiarita la teoria, passiamo alla pratica! Ecco un’ immagine atta a farti capire come, concretamente, scrivere il tuo codice per realizzare quanto sopra: <table> <caption>Dati anagrafici studenti</caption> <thead> <tr> <th>Nome</th> <th>Età</th> </tr> </thead> <tbody> <tr> <td>Mario</td> <td>27</td> </tr> <tr> <td>Caludia</td> <td>25</td> </tr> </tbody> <tfoot> <tr> <td> Media : 26 anni </td> </tr> </tfoot> </table> Questa è la modalità corretta di scrivere il codice per la tua tabella. Tuttavia, se provi a verificare cosa il browser ti renderizzerà seguendo questo codice, quello che ti apparirà potrebbe non piacerti: Come vedi, abbiamo tutti i nostri dati, ma dove sono i bordi della nostra tabella html? Dov’è la delimitazione delle celle? La verità è che gli elementi di stile vengano aggiunti sempre attraverso l’inserimento di un foglio CSS nel codice del tuo sito, ma lo vedremo più avanti.   

Per rendere accattivanti le pagine di un sito web non possiamo limitarci ad inserire al loro interno contenuti esclusivamente testuali. Siamo, d’altro canto, in un periodo storico dove mai prima d’ora la cultura del visuale ha assunto un’importanza assoluta. Ogni utente verrà attirato principalmente dalla parte ‘estetica’ di un sito web. Occorre, quindi, inserire all’interno delle nostre pagine diverse immagini.  Vediamo come.   Come mettere un' immagine su html Tag immagine html Il tag da utilizzare per incorporare un’immagine in una pagina html è il tag <img>. Si tratta di un tag autoconclusivo : non ha bisogno di un tag di chiusura.  Il tag img vanta due attributi fondamentali: “src” e “alt”. L’attributo “src” sta per “source” e indica la fonte dell’immagine: può essere un link esterno ad essa oppure il path (percorso) del file all’interno del tuo computer (è consigliabile sempre la seconda opzione, poiché l’URL del sito di riferimento della tua img potrebbe, nel tempo, cambiare, causando problemi di visualizzazione dell’immagine). L’attributo “alt” (abbreviazione di “alternative text”) è un attributo che ha a che fare principalmente con l’accessibilità della nostra immagine. Esso fornisce, infatti, un’alternativa alla visualizzazione dell’immagine stessa quando, per un motivo o per l'altro, questa risulti impossibile; al suo posto, grazie a questo attributo, visualizzeremo un testo descrittivo dell’immagine.  Senza questo attributo la fruizione dell’immagine sarebbe impossibile non solo a chi, banalmente, ha problemi di connessione, ma anche, e soprattutto, a soggetti come ipo-vedenti e non vedenti che per la fruizione di un sito web si avvalgono di software che, attraverso un sintetizzatore vocale, leggono il contenuto del sito. E come si può leggere un’immagine?  Capisci, ora, quanto è importante l’utilizzo di questo attributo? Ultimo ma non per importanza, l’attributo “alt” agevola la SEO e aiuta l’indicizzazione del tuo sito web. L’immagine in html può avere anche un altro attributo: si tratta del “title”, anch’esso importante per la SEO. L’ attributo “title” fa si che quando si posiziona il cursore sull img (in gergo si parla di “hover” dell’immagine) compaia una finestrella con scritto il titolo, appunto, dell’ immagine. Quando inserisci un’immagine nel tuo sito, abbi cura di inserirla all’interno di due ulteriori tag: stiamo parlando dei tag <Figure> </figure> and <figcaption></figcaption>. Il primo viene usato semanticamente per abbracciare contenuti visivi (immagini, illustrazioni, diagrammi ecc) ed è accompagnato dal secondo per aggiungere una didascalia descrittiva alla foto. Adesso sai tutto: pronto a scatenare la tua creatività aggiungendo immagini alla tua pagina?  

Nel corso delle scorse guide abbiamo visto diversi tag che danno un senso (semantico) al nostro contenuto. Andiamo, adesso, invece, ad esplorare dei nuovi tag, introdotti in html5, con il solo ed unico scopo di evidenziare il valore semantico del contenuto: sono i cosiddetti, appunto, tag semantici. Questi tag non hanno una differenza nella resa visiva del contenuto che abbracciano, ma vanno a conferirne un significato ben preciso, che fa mutare proprio il senso di ciò che stiamo scrivendo. I tag semantici agiscono sul sema, sul senso, sul significato che il motore di ricerca scansionerà per andare ad indicizzare la pagina web; in altre parole, un tag semantico è un tag che descrive al motore di ricerca - ma non solo! Pensiamo sempre, ad esempio, all'ear reader! - il contenuto di quella parte di pagina html, facilitandogli di molto la vita! È proprio in tal senso che dicevamo, nelle scorse guide, che un tag semantico agevola la SEO.  Ora, finalmente, ti è chiaro? Bene! Fino ad ora abbiamo visto alcuni esempi di tag semantici, seppur non avendo assoluta padronanza del concetto: è stato il caso, ad esempio, degli headings ( i famosi “tag h” ) e degli altri tag di formattazione del testo (pensiamo al tag <strong></strong> oppure al tag <em></em>), così come di quelli inerenti all’inserimento di immagini (<figure></figure> o <figcaption></figcaption>) e via discorrendo. Ciò di cui non ti abbiamo parlato, però, è l’anatomia di una pagina web, vale a dire la suddivisione che viene attuata su macro-sezioni della nostra pagina html, proprio attraverso alcuni tag semantici.  Vediamoli insieme. Possiamo dire, in linea generale, che la nostra pagina web viene suddivisa, essenzialmente, in 6 macro-sezioni, delineate da altrettanti tag semantici:   HEADER - l’intestazione della pagina, al cui interno, in genere, è contenuto l'h1.  È la prima cosa che visualizzerai aprendo un sito web. NAVBAR (NAV) - la barra di navigazione (per intenderci, è quella parte dove nei siti visualizzerai le scritte “home” “chi siamo” “lavori” “contatti” ecc) SECTION - la sezione di contenuto ben definito, ben delineato (un esempio? Laddove andremo ad esplicare il “chi siamo” avremo creato una section); la section può contenere uno o più article. ARTICLE - specifica un elemento concettualmente separato dal resto della pagina web e dovrebbe essere possibile leggere il suo contenuto indipendentemente dal resto della pagina stessa; è contenuto nella section. ASIDE - fanno parte dell’<aside></aside> tutti i contenuti che sono solo di supporto all’argomento principale della pagina (un esempio potrebbero essere i video consigliati di youtube); banalmente, un contenuto meno importante del principale andrà avvolto da questo tag semantico.  FOOTER - posizionato rigorosamente alla fine della tua pagina web, contiene i dati generici della società (partita iva, codice fiscale, location ecc) e altre informazioni utili come i link ai social, i contatti ecc. Ciascuno di loro necessità di un tag di chiusura. Tuttavia, i tag semantici non si limitano a quelli che definiscono la struttura anatomica del nostro sito e a quelli citati fino ad ora. Ne esistono di altri, non meno importanti: DETAILS e SUMMARY - l’uno il tag padre dell’altro: il tag <details></details> definisce un contenuto addizionale che può essere mostrato o nascosto a piacimento dall’utente; il tag figlio <summary></summary> si usa per fornire un riassunto del contenuto del tag details. MAIN - il contenuto principale di tutto il documento, il contenitore di tutto, ad esclusione della navbar e del footer. TIME - nomen omen, questo tag viene utilizzato per indicare una data sul nostro sito web. Questi sono i tag semantici che vale la pena conoscere per scrivere il tuo codice nella maniera più efficace, organizzata e performante a livello SEO, tutti quelli che, insomma, devi tenere bene a mente quando ti chiedi  come creare un sito web.  E a te, ne vengono in mente altri? 

Navigando su un sito web qualsiasi, ti sarà certamente capitato di imbatterti in un form di contatto:  stiamo parlando di quel “modulo” con dei campi da compilare che rappresenta il primo tassello di una relazione tra te e l’azienda che c’è dietro quel sito web (e viceversa!!) Sicuramente tu stesso, come tutti noi, ne avrai utilizzato uno, magari per richiedere informazioni su un servizio offerto che ti interessava particolarmente. Capisci bene che si tratta di un elemento fondamentale e che ogni sito web che si rispetti deve disporne, pena l’impossibilità di interazione dell’utente con il sito stesso.  Se decidi di creare un sito web non puoi, quindi, non inserire almeno un form di contatto. Insomma, quante volte ci è capitato di inserire dei dati per iscriverci ad una newsletter? E quante altre li abbiamo inseriti semplicemente per registrarci su un sito? Quante volte abbiamo commentato il post di un nostro amico su facebook o su instagram?  Bene, se abbiamo fatto almeno una di queste cose è grazie al tag form.  Il tag form, infatti, permette all’utente di inserire dei dati che verranno successivamente inviati ad un’altra pagina che si occuperà di manipolarli e, probabilmente, salvarli in un database. <form action="https://aulab.it/richiesta-info" method="post"> </form> Come possiamo vedere, il tag form ha due attributi fondamentali senza i quali non potrebbe mai funzionare: “action” e “method”. Nell’attributo action inseriamo l’URL dove i dati verranno mandati e manipolati una volta che il contenuto del form verrà inviato. Nell’attributo method, invece, inseriamo il metodo HTTP con il quale verranno mandati i dati. Abbiamo due possibili valori da inserire in questo attributo : GET :  con questo metodo i dati verranno processati e ci verrà mostrata una pagina di risposta nel cui URL saranno presenti i dati inseriti sotto questa forma: “https://aulab.it/cerca-nel-sito?q=form”; dopo il punto interrogativo verranno inseriti i dati inseriti dall’utente nel seguente modo :  nome=Mario&[email protected] Utilizziamo questo metodo quando non vogliamo avere dei side effect ma ci serve avere questi dati per visualizzare una pagina in modo dinamico. Per fare un esempio pratico provate a leggere l’URL quando cercate quacosa su Amazon. POST :  con questo metodo i dati verranno mandati al server nel body della richiesta http. Il server, a sua volta, li processerà e li salverà all'interno del database Vediamo, adesso, altri attributi non obbligatori che possono modificare il comportamento del nostro form. Enctype L’attributo enctype indica il tipo di codifica che il browser dovrà fare prima di inviare i dati al server , non è un attributo obbligatorio e può avere tre possibili valori: application/x-www-form-urlencoded: Il valore di default del tag form. multipart/form-data: dobbiamo inserire questo attributo quando nel form c’è la possibilità di inserire uno o più file. text/plain: è stato introdotto con l’html 5 e si utilizza solo per fare debugging. Autocomplete Indica se gli elementi di input, all’interno del tag form, possono essere completati automaticamente dal browser.  Può avere due possibili valori autoesplicativi : off e on , con il primo il browser non permetterà l’autocomplete con il secondo invece sì. Target Tramite questo attributo possiamo decidere se i dati mandati dal form devono essere mandati attraverso un’altra pagina o restando sulla pagina corrente.  Se inseriamo l’attributo target="_blank" si aprirà una nuova scheda nel browser una volta inviati i dati. Tag di Input All’interno del tag form, per permettere all’utente di inserire dei dati abbiamo bisogno dei tag di input. Ci sono svariati tag di input che possono essere utilizzati in base alle diverse esigenze. Iniziamo con il tag in assoluto più utilizzato ovvero il tag <input>: É un “self-closing tag” (un tag autoconclusivo) quindi non ha bisogno di un tag di chiusura; in base all’attributo type si comporterà in modo diverso. Vediamone gli esempi principali :    Type text <input type="text"> Questo è il più classico dei tag di input nel quale l’utente ha la possibilità di inserire del testo, lo utilizzeremo per far inserire dati testuali all’utente come il nome o la città di provenienza. Type number <input type="number"> Impostando il type con number l’utente potrà inserire solo un valore numerico all’interno di questo input e andando sopra con il mouse sulla destra del tag troveremo due frecce per andare ad aumentare o diminuire il valore inserito. Type email <input type="email"> Utilizziamo il type email ovviamente per far inserire all'utente una mail. Type password <input type="password"> Utilizziamo il type password quando dobbiamo far inserire all’utente una password o un codice che non vogliamo far visualizzare in chiaro; con questo type infatti quando l’utente scriverà all’interno dell’input verranno visualizzati dei pallini al posto dei caratteri inseriti. Type file <input type="file"> Utilizziamo il type file quando vogliamo che l’utente possa caricare dei file nel nostro form per mandarli al server; ricordiamoci di inserire l’attributo enctype=”multipart/form-data” all’interno del tag form altrimenti il nostro file non arriverà mai al server. Type date <input type="date"> Utilizziamo il type date quando vogliamo far scegliere all’utente una data dal calendario; cliccando su questo input, infatti, si aprirà un calendario dal quale potremo scegliere una data specifica.   Type checkbox <input type="checkbox"> Utilizziamo questo input quando vogliamo far visualizzare un checkbox all’utente, ad esempio , quando vogliamo far accettare i termini e condizioni o quando vogliamo chiedere l’autorizzazione a mandare email informative.  Serve essenzialmente per rispondere con “SI” o “NO” a un utente. Type radio <input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="other"> Utilizziamo questo input quando vogliamo dare la possibilità all’utente di scegliere tra varie risposte. Andando a dare un attributo name identico a più input radio l’utente avrà la possibilità di selezionare solo uno dei valori, infatti , quando proverà a selezionare un altro degli input radio disattiverà quello precedentemente selezionato.   Il tag select <select name="course"> <option value="hackademy">Corso Hackademy</option> <option value="hackademy-part-time">Corso Hackademy Part Time</option> <option value="hackademy-weekend-frontend">Corso Hackademy weekend Frontend</option> <option value="hackademy-weekend-backend">Corso Hackademy weekend Backend</option> </select> Vediamo, adesso, un diverso tipo di input: la select.  Essa darà la possibilità all’utente di selezionare uno dei valori da un menù a tendina. A differenza di un semplice tag input, il tag select è composto da un tag <select><select/> al cui interno ci sono dei tag <option><option/> che saranno, per l’appunto, le varie opzioni selezionabili dall’utente. Il tag textarea <textarea></textarea> Ultimo campo di input, ma non per importanza , è il campo “textarea” che serve per far inserire all’utente del testo molto lungo, ad esempio la descrizione di un articolo o un messaggio con informazioni aggiuntive indirizzato ai proprietari del sito. Diversamente dal tag input text questo tag ha sia un tag di apertura che un tag di chiusura. Attributi generici dei tag di input Parliamo, adesso, dei generici attributi che possiamo dare ai tag di input per migliorarne il funzionamento e l’accessibilità. Placeholder Sicuramente uno dei più utilizzati, possiamo inserire l’attributo placeholder in quasi tutti i tag di input e ci serve per far visualizzare del testo di default quando l’utente non ha ancora inserito dei dati. Ci basterà inserire nel tag la scritta placeholder=”Inserisci qui la tua mail” per far apparire il messaggio all’interno dell’input ancora vuoto; è fondamentale, appunto, perché aiuta a far capire all’utente il dato da inserire in un campo di input. Name Questo attributo, a differenza del precedente, non ha un riscontro visivo sul tag di input ma, più che altro, funzionale; conviene, infatti , pensare a questo attributo come obbligatorio quando inseriamo un tag input (anche se non lo è); le sue funzionalità sono molteplici : La prima è che il valore inserito all’interno dell’attributo name verrà inviato insieme al valore inserito dall’utente come parte di una coppia chiave-valore e servirà appunto per contraddistinguere il dato inserito a quale campo input fa riferimento. Senza quest’ultimo è vuoto o non è proprio presente , infatti , il campo di input non verrà mandato una volta inviato il form. La seconda è che il valore inserito darà al browser la possibilità di inserire l’autocompletamento del campo in base ai dati precedentemente inseriti dall’utente in altri siti e salvati sul browser. Quante volte quando ci stiamo iscrivendo ad un sito il nostro browser ci suggerisce il nostro nome e la nostra mail ? Una comodità non da poco e con pochissimo sforzo, ci basterà dare un nome semantico in inglese al nostro campo di input ad esempio : name , surname , email , address , phone ecc…   Autocomplete Con questo attributo possiamo specificare il tipo di completamento automatico che il campo di input deve avere. Ci sono veramente tantissime possibilità, dal semplice nome dell’utente al prefisso nazionale. Ma non disperare! Puoi trovare un elenco completo con tutti i valori possibili a questo link. Value Quando viene specificato nel tag, questo è il valore iniziale e da quel momento in poi può essere modificato o recuperato in qualsiasi momento utilizzando il linguaggio JavaScript.  L'attributo value è sempre facoltativo, ma dovrebbe essere considerato obbligatorio per checkbox e radio in quanto questo valore sarà quello mandato al server nel caso in cui questi ultimi fossero selezionati. Ci sono, infine, tantissimi altri attributi che servono, principalmente, per la validazione del form come required , max , min , minlength ,maxlength. Questi indicheranno un errore se proviamo ad attuare il submit del form senza rispettare i valori che vi abbiamo inserito. Solitamente, però, ad oggi non vengono più utilizzati perchè sono facilmente modificabili dall’utente agendo sull’html: la validazione del form, difatti, viene fatta principalmente lato server. Citiamo infine un importantissimo tag che non è tra quelli di input ma va sempre accoppiato ad uno di loro: il tag label.  <label for="name">Inserisci il tuo nome</label> <input type="text" id="name" name="name" placeholder="Mario rossi"> Associare una label al tag input offre alcuni vantaggi fondamentali per l’accessibilità del nostro sito Il testo del tag label non è associato solo visivamente al corrispondente input di testo, ma anche programmaticamente.  Ciò significa che, ad esempio, uno screen reader leggerà l'etichetta quando il fruitore è posizionato sull'input del form, rendendo più facile per un utente che utilizza tecnologie assistive capire quali dati devono essere inseriti. Inoltre, quando l'utente fa clic o tocca un'etichetta, il browser passa il focus all'input associato. L'aumento dell'area di messa a fuoco dell'input offre un vantaggio a chiunque cerchi di attivarlo, compresi coloro che utilizzano un dispositivo touch-screen. Associare un tag label ad un tag input è estremamente facile: basterà aggiungere al tag input un attributo id che dovrà essere univoco all’interno della pagina html, e aggiungere un attributo for al tag label con all’interno il valore dell’id dell’input correlato. Perfetto! Abbiamo quasi finito, non ci resta che inviare i dati. Come? Inserendo un button con l’attributo type=”submit” al cui click i dati verranno inviati. <button type="submit">Invia i dati</button>

Se sei affascinato dal mondo del web design o, comunque, nutri un po’ di curiosità per il settore della programmazione informatica, probabilmente avrai già sentito il termine "linguaggio CSS".  Questo termine si riferisce ad un linguaggio molto importante nell’ambito dello sviluppo web. Si tratta, infatti, di un linguaggio di stile. Che cosa significa? Semplice! Vuol dire che grazie all’aiuto del CSS non solo potrai plasmare a tuo piacimento la tua pagina web aggiungendo colori, grafiche e caratteri, ma anche darle vita con animazioni, effetti e transizioni sia in 2D che in 3D! Incuriosito? Entriamo nel dettaglio! Cos’è il linguaggio CSS? L’acronimo CSS sta per “Cascading Style Sheet” ovvero “foglio di stile a cascata”; questa denominazione non è casuale: significa che il nostro foglio CSS verrà letto dal browser, letteralmente, dall’alto verso il basso. Superato lo scoglio delle definizioni, veniamo alle metafore per aiutarti a capire un po' meglio di cosa stiamo parlando.   Prova a pensare ad un robot. Di quali parti si compone? Immediatamente te ne verranno in mente almeno due: quella interna e quella esterna. Se ti chiedessimo di immaginare che cosa c’è nella parte interna, penseresti probabilmente ad un insieme di cavi, chip, uno scheletro meccanico: una struttura, insomma, che dà forma a quella macchina ed è ciò che la aiuta a stare in piedi. Traslando il tutto nel mondo dello sviluppo web, ti viene in mente qualcosa? Esatto! Come abbiamo detto più volte, a comporre lo scheletro è il linguaggio di markup che tutti conosciamo, il linguaggio HTML.   Pensiamo ora alla parte esterna del nostro automa.  Tu potresti averlo immaginato in un modo, un altro utente in un altro. Stiamo parlando, quindi, della parte estetica, ovvero tutte quelle componenti che il robot ha che lo caratterizzano come personaggio: amichevole, terrificante, post-apocalittico e via discorrendo.  Proprio qui entra in gioco il linguaggio CSS, che aiuta a personalizzare la nostra pagina web, contribuendo a renderla esteticamente più piacevole e attraente.   Dunque, il CSS è il linguaggio che gestisce il design e la presentazione delle pagine web, ovvero il modo in cui appaiono quando un utente le visita.

Anche se abbiamo già parlato un po’ del motivo per cui utilizziamo il linguaggio CSS, proviamo, adesso, a dare una spiegazione un pò più tecnica e professionale a riguardo.  Diciamo, quindi, che con il CSS possiamo dire al nostro sito web come deve mostrare le informazioni e possiamo essere in grado di memorizzare comandi per elementi di stile come caratteri, dimensioni, animazioni, ecc. Attraverso il CSS possiamo creare l’anima visual della nostra pagina web, per comunicare meglio visivamente le nostre idee ma soprattutto creare esperienze piacevoli e confortevoli per tutti coloro che visitano il nostro sito web. Ci affacciamo, qui, al concetto di USER INTERFACE. La UI (questa la sigla con cui sicuramente è più nota) è una branca della user experience. L’interfaccia del nostro sito è, letteralmente, ciò che media il rapporto tra utente e macchina. Senza dilungarci troppo, ci limitiamo a dire che progettare un’interfaccia grafica chiara, immediata, ed esteticamente piacevole è fondamentale affinchè il fruitore rimanga ed esplori il nostro sito. Ti è mai capitato di navigare su un sito il cui layout fosse concepito male? Ricordi quanto velocemente tu abbia smesso di farlo, infastidito, senza neppure aver risolto il problema che ti aveva portato a navigare in quello specifico sito?   Non è difficile intuire quanto il CSS sia fondamentale nella costruzione di una buona interfaccia grafica. Da sempre il binomio forma/contenuto va di pari passo nella cabina di comando, quindi non dobbiamo mai sottovalutare l’importanza del presentare i contenuti in forma dinamica e accattivante, ma anche chiara e semplice. Ora sai tutto! Pronto a conoscere meglio questo fantastico strumento dello sviluppo web?  

Vuoi aggiungere del linguaggio CSS al tuo progetto? Perfetto! Ci sono 3 modi di incorporare il CSS all’interno della nostra pagina html: style in line, embedded, e link esterno. Vediamoli insieme! CSS Style in line Quando parliamo di style in line, intendiamo inserire il css su un’unica riga: la stessa dell'elemento che andremo a modificare. In questo caso creeremo un attributo globale, l’attributo “style” all’interno del tag html, seguito dalla proprietà css che stiamo andando a modificare e dal valore di quella proprietà, esattamente come nell'esempio a seguire. <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline CSS Example</title> </head> <body> <h1 style="color: blue;">Questo è un testo blu con Inline CSS</h1> <p style="font-size: 18px;">Questo è un paragrafo con dimensione del carattere di 18px</p> </body> </html> Questa modalità, in linea teorica, dovrebbe essere utilizzata per applicare alcuni stili o effetti ad un singolo elemento HTML, tuttavia il suggerimento è quello di non utilizzarla mai. Immagina, per esempio, che il cliente ti chieda di cambiare il colore a tutti i tag p della pagina: se hai utilizzato lo style in line per inserire il tuo css, dovrai modificare tutti i tag p presenti.. uno ad uno. Un vero incubo, soprattutto nel caso in cui si tratti di un progetto complesso! Inoltre, lo style in line penalizza l'ottimizzazione SEO del tuo sito web, quindi ricorda: non usarlo!   CSS Embedded Il secondo metodo per incorporare il CSS nella tua pagina html è internamente: come funziona? È molto semplice: all’ interno dell’ head della pagina html aprirai un tag “style” - che avrà, ovviamente, un’ apertura e una chiusura -  e, all’ interno di quest’ultimo, a sua volta, posizionerai il tuo selettore (ovvero l’ elemento del codice al quale andrà applicata la tua proprietà css: non preoccuparti, procedendo con la nostra guida troverai un approfondimento sui selettori) La differenza, come puoi vedere nell'esempio a seguire, è proprio questa: col selettore potrai specificare a quale elemento vorrai applicare le tue proprietà CSS.  Ricorda, però: Il css embedded agisce solo sul documento in cui viene aggiunto. <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS interno Example</title> <style> h1 { color: green; } p { font-size: 20px; } </style> </head> <body> <h1>Questo è un testo verde con CSS interno</h1> <p>Questo è un paragrafo con dimensione del carattere di 20px</p> </body> </html> CSS Link esterno L’ultimo metodo per implementare il CSS nel tuo codice è l’inserimento di un link esterno. Si tratta del metodo più utilizzato e comune per inserire css nel codice html, per via della sua organizzazione ordinata e dello stile pulito, ma soprattutto per far fede al principio della separation of concerns, principio cardine della programmazione informatica. Per attuarlo, dobbiamo creare un nuovo file nel nostro editor di testo, che abbia estensione ".css" (la best practice è quella di chiamare il file “style.css”); in questo file scriveremo tutte le nostre regole CSS, e lo collegheremo al nostro file HTML mediante l’utilizzo di un tag "link", sempre nell’head del nostro documento HTML. Vediamo un esempio in codice! L'html dovrebbe apparire così <!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example with External CSS</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Benvenuti nel mio sito!</h1> <p>Questo è un paragrafo con del testo</p> </body> </html>  Il css nel foglio creato di proposito (style.css) apparirà, per esempio, così /* Stili per l'elemento h1 */ h1 { color: blue; /* colore del testo blu */ font-size: 24px; /* dimensione del carattere 24px */ } /* Stili per l'elemento p */ p { color: gray; /* colore del testo grigio */ font-size: 18px; /* dimensione del carattere 18px */ line-height: 1.5; /* altezza della linea 1.5 volte la dimensione del carattere */ } NB. Il CSS embedded ha la priorità sul CSS esterno (è un concetto correlato alla specificità, che affronteremo nei prossimi capitoli della guida), tuttavia è sempre preferibile, per i motivi di cui sopra, utilizzare un foglio di stile a parte collegandolo con questa terza metodologia. Ora conosci tutte le modalità per implementare il linguaggio CSS nel codice del tuo sito web. Continua a scoprire di più sul mondo dello sviluppo web senza paura! 

Adesso che ti è chiaro che cos’ è e a che cosa serve il linguaggio CSS, e persino come inserirlo nel tuo codice, non ci resta che entrare nel vivo della questione! Come scrivere linguaggio CSS: la sintassi CSS Abbiamo appurato che il CSS è  un linguaggio di stile: come suggerisce la parola stessa, abbiamo, quindi, a che fare con una vera e propria lingua, ovvero un codice comunicativo che ti consentirà di parlare alla tua macchina.  Prova a pensare alla lingua italiana: è composta da regole grammaticali; come qualsiasi linguaggio, dunque, il CSS sarà composto da delle regole. Quando parliamo delle regole di scrittura di un linguaggio in programmazione, ci riferiamo alla sua sintassi. Esploriamola! Una regola CSS si compone in due parti: selettore (la parte a cui vogliamo applicare la regola css) e una o più dichiarazioni (ovvero delle coppie formate da una proprietà css e un valore, che devono terminare con un punto e virgola.) selettore { proprietà: valore; } I selettori CSS I selettori CSS ci permettono di selezionare l’elemento o gli elementi a cui vogliamo applicare lo stile.   Sono diversi e hanno diverso peso, una diversa importanza, una diversa - in gergo - “specificità”: non preoccuparti se non afferri subito questo concetto, verrà sviscerato nelle prossime guide. Preoccupiamoci, invece, di andare a conoscere i nostri selettori più da vicino! Selettore universale * { font-family: Arial, Helvetica, sans-serif; } Il selettore universale seleziona qualunque elemento sulla pagina e, infatti, viene usato pochissimo poiché molto debole come selettore: ha una specificità che equivale a zero. Questo significa che viene sovrascritto da qualsiasi altro selettore.  Si indica con un asterisco ed è, tuttavia, molto utile quando abbiamo necessità, per esempio, di definire il font globale della nostra pagina html. Selettore tag HTML : element type p { color: red; } Questo selettore seleziona tutti gli elementi che hanno il tag name indicato. In questo specifico caso tutti i tag <p> della tua pagina HTML avranno un colore rosso. Ma se, ad esempio, ci fosse stato al posto di “p” un “h2” tutti i tag <h2> della tua pagina avrebbero avuto quel colore. Selettore Classe .myClass { color: orange; font-size: 20px; } Con questo selettore possiamo selezionare ogni elemento HTML con un attributo “class” specifico. Come funziona? Vediamo prima la sintassi in CSS: prima di tutto, occorre specificare che sarai tu a stabilire il nome della tua classe, ma il nostro suggerimento è di fare in modo che queste siano quanto più parlanti possibile. Cosa significa?  Supponi di voler dare a più elementi del tuo foglio html il colore grigio: quello che farai sarà chiamare la tua classe  “color-gray”; è in questo senso che definiamo la classe parlante, perché letteralmente ci racconta quale sarà la sua funzione. Questa è una best-practice estremamente utile, poiché qualora tu dovessi lavorare in team ti troverai nella situazione in cui più persone lavoreranno sul tuo stesso codice ed è, quindi, fondamentale che questo sia comprensibile anche ad altri professionisti. Nel foglio html ti basterà inserire un attributo “class” nel tag che ti interessa ed indicare come valore di quest’ultimo le classi che preferisci. Usiamo il plurale non a caso: puoi, infatti, utilizzare più di una classe per uno stesso elemento! Ti basterà scriverle una di fianco all’ altra come valori del tuo attributo “class”, come in questo esempio: <p class="text-red font-lg"> Esempio </p> NB. Quel "class" serve proprio a classificare, in questo specifico caso, questo tag p come text-red e font-lg. Ancora una volta il nome si spiega da sè: il class definisce una classificazione! All’interno del foglio CSS dovrai, invece, inserire il nome della classe preceduto da un punto e inserire, come dichiarazione, tutte le proprietà che vuoi modificare. Esempio:  .text-red { color: red; } .font-lg { font-size: large; } Qual è la forza di una classe? Poco fa hai creato la tua classe .color-gray; puoi dare questa classe a tutti gli elementi che devono, secondo te, avere il colore grigio, invece di utilizzare un selettore generico come quello per tag o troppo specifico come quello per id - che vedremo a breve - e scrivere molto codice in meno. Selettore ID #titolo { color: red; } ID : questo selettore è identificativo di un SINGOLO elemento. Dunque, ne seleziona solo uno. Per semplificare il concetto, è come se l’ ID fosse una carta d'identità: ne esiste una sola per elemento. L’ ID è presente nella nostra pagina html come valore dell’ attributo “ID” di un tag, che andremo poi a richiamare nel nostro foglio CSS utilizzando il simbolo “#” per usarlo come selettore. Nel foglio html ci possono essere più id ma tutti diversi, mai due uguali.  Proviamo a rifarci all’ esempio di prima, in cui tutti i paragrafi del nostro codice assumevano colore rosso. Se volessimo, ad esempio, dare ad uno solo di loro il colore blu, idealmente potremmo assegnare all’ attributo ID del tag html di quello specifico paragrafo il valore “blueP” e utilizzarlo come selettore nel nostro css nella maniera sottostante:  nell html vedremmo <p id=”blueP”> Esempio </p> e nel CSS vedremmo #blueP { color: blue; } A questo punto, il paragrafo a cui abbiamo assegnato l’ ID “blueP” diventerà di colore blu. Occhio! Anche per il nome del valore che vorrai dare all’attributo ID vale la stessa regola delle classi: è sempre meglio che sia parlante! Ma il mondo dei selettori non finisce qui di stupire!  Possiamo, infatti,  concatenare più selettori. Osserva l’esempio sottostante: p.text-red { color: red; font-size: 15px; } Come vedi abbiamo utilizzato come selettore  “p.text-red”. Stiamo indicando, in questo modo, che esclusivamente i paragrafi che hanno la classe text-red avranno determinate caratteristiche, tutti gli altri elementi che abbiano solo la classe text-red, invece, no.  Oltre questa modalità, ne abbiamo diverse altre per concatenare i selettori: Selettore dei discendenti (descendant selector) #contactForm input { font-size: 32px; } Il selettore dei discendenti ti permette di selezionare un elemento che è discendente da un altro. Nell’ esempio sottostante potrai facilmente notare una cosa: tra il nostro selettore ID e il selettore per tag input c’è uno spazio vuoto: quello spazio va parafrasato come se ci fosse scritto “all’interno”. Quindi, leggeremo questa regola CSS così: “Tutti gli input all’interno del tag con ID “contactForm” dovranno avere queste caratteristiche” Non lasciarti confondere dal nostro esempio: per utilizzare il selettore dei discendenti  ti basterà separare con uno spazio due selettori di qualsiasi tipo. Selettore dei figli (Child selector) p > span { color: red; } Il selettore dei figli serve per selezionare gli elementi figli diretti di un genitore. Analizziamo bene la frase: nel nostro esempio qui in alto, l’elemento padre è il ‘p’ (a destra di >) e l’elemento figlio è lo span (a sinistra di >); ma cosa vuol dire figlio diretto? Con “figlio diretto” intendiamo solo il “primogenito”, vale a dire solo l’elemento immediatamente dentro quello paterno.  Un ulteriore esempio, potrebbe essere utile: <div> <p> ciao a <span> tutti </span> </p> </div> Il figlio diretto, in questo caso, sarà solo il tag p, poiché interno al tag padre div; il tag span - interno al p - sarà separato dal tag div per colpa del tag p stesso. Quindi, per andare a selezionare lo span, non potremo mai usare il child selector nel modo che segue: div > span { color: red; } Perchè no? Perchè nel nostro esempio lo span non è immediatamente interno al tag div, dunque non è suo figlio diretto. Selettore dei fratelli ( adjacent sibling selector )  p + p { font-weight: bold; } Il selettore fratelli permette di selezionare un elemento (a destra del simbolo +) posto immediatamente dopo un altro (a sinistra del simbolo +).  Tieni a mente il codice soprastante e osserva parallelamente l’ html di riferimento qui sotto:  <div> <p> Esempio 1 </p> <p> Esempio 2 </p> <p> Esempio 3 </p> <div> Esempio 4 </div> <p> Esempio 5 </p> </div> In questo caso, quindi, staremmo selezionando - per dare loro il grassetto - tutti i paragrafi preceduti da un altro paragrafo:  parliamo, nello specifico, di ‘Esempio 2’ ed ‘Esempio 3’ (laddove ‘Esempio 2’ segue il <p> ‘Esempio 1’ ed ‘Esempio 3’ segue il <p> ‘Esempio 2’) Sarà, invece, escluso dalla selezione ‘Esempio 5’, poichè non immediatamente preceduto da un tag p, ma successivo ad un <div>. Potrà risultarti un po’ ostico le prime volte, ma via via che prenderai dimestichezza scoprirai che è più facile a farsi che a dirsi! Selettore generale dei fratelli (General sibling selector) Il selettore generale dei fratelli è molto simile al selettore dei fratelli che abbiamo appena visto. La differenza è che l'elemento selezionato non deve necessariamente essere immediatamente successivo al primo elemento, ma può apparire ovunque dopo di esso. La sintassi sarà, questa volta, la seguente:  p ~ p { font-weight: bold; } Se utilizziamo la stessa struttura html dell'esempio precedente, anche l'ultimo elemento <p> (‘Esempio 5’) sarà selezionato da p ~ p, perché è preceduto da un altro elemento <p>, anche se non direttamente. Selezione multipla  Se vogliamo, infine, possiamo concatenare più selettori, separandoli con una virgola, per dar loro le stesse proprietà css. h1, h2, h3 { color: purple; }

Come già detto nelle precedenti guide, CSS sta per Cascading Style Sheet che, tradotto, sta per foglio di stile a cascata. Questo concetto deve esserti particolarmente chiaro, in quanto propedeutico all’apprendimento di ciò di cui parleremo in questa guida. La caratteristica principale di un foglio di stile è l'ordine in cui i selettori assegnano le regole css a un determinato elemento html. Ciò significa che, se su un elemento vengono assegnate due proprietà identiche - da due selettori con la stessa “potenza” - ma con valori diversi, verrà interpretato l'ultimo valore inserito.  Facciamo subito un esempio per rendere più chiaro quanto appena detto: p { color : green; } p { color : red; } Come vedi, in questo caso, nel nostro foglio CSS avremo due selettori che selezionano tutti i tag <p> della pagina  HTML. Cosa succederà? Semplice: tutti i tag p verranno colorati di rosso, in quanto la seconda regola andrà a sovrascrivere la prima. Succederebbe la stessa cosa se le due proprietà fossero assegnate nella stessa regola: p { color : green; color : red; } Oltre questa regola di base, però, c’è qualcos’ altro che stabilisce la precedenza di una regola rispetto all’altra nel nostro foglio di stile: stiamo parlando della specificità dei selettori, che andremo ad analizzare a breve, introdotto un altro piccolo concetto utile allo scopo, ovvero quello dell’ereditarietà.    Ereditarietà Un'altra caratteristica importante del CSS è l'ereditarietà delle proprietà.  Proviamo a concepire la nostra pagina html come una sorta di albero genealogico: ogni elemento, quindi, ha un genitore dal quale può ereditare una determinata proprietà. Facciamo un piccolo esempio. La struttura html: <header> <h1>Diventa sviluppatore web</h1> <h2>CORSO DI CODING</h2> <a href=”https://aulab.it/calendly">Prenota un appuntamento</a> </header> il codice CSS: header { color : #333333; font-size : 24px; } Nell’esempio soprastante i tag <h1>, <h2> e <a> avranno una grandezza di 24px, mentre solo i tag <h1> e <h2> cambieranno il proprio colore. Questo avviene perché questi tag erediteranno il colore e la dimensione dal proprio padre. Perché, allora, il tag anchor non cambia colore?  Perché il tag anchor, così come altri tag all’interno del browser (come ad esempio <button> o <input>), presenta dello stile di default che non verrà mai sovrascritto da uno ereditato. Per sovrasciverne lo stile ci occorrerà assegnargliene uno con delle regole espresse attraverso un selettore che avrà un’azione più forte dell’ereditarietà: un selettore più specifico. Specificità Cos’è, quindi, la tanto decantata specificità? La specificità è il valore che permette di definire la priorità di una regola CSS rispetto ad un'altra. Negli esempi visti finora, è facile calcolare la dimensione del testo o determinare il colore di un paragrafo, perché abbiamo riportato volutamente degli esempi molto semplici ai fini di una migliore comprensione del concetto di base. In realtà, tuttavia, la situazione comincia ad essere abbastanza diversa quando i fogli di stile iniziano a diventare piuttosto grandi e determinare la specificità delle regole CSS può diventare molto complicato.  Ad esempio, potremmo trovarci in una situazione in cui le regole si sovrappongono e non riusciamo a cambiare alcune proprietà. Per superare questo problema, il linguaggio CSS fornisce un modo molto semplice per determinare quale proprietà avrà la priorità. La proprietà con il valore di specificità più alto avrà la precedenza sulle altre proprietà; se due o più regole hanno lo stesso valore di specificità, l'assegnazione seguirà il principio della cascata. Il valore di specificità di una regola CSS può essere rappresentato da un numero di quattro cifre. In questo sistema numerico, l'importanza dei numeri è ordinata da sinistra a destra, quindi valori più alti indicano una maggiore specificità. Per ogni tipo di selettore avremo un valore di specificità diverso.  Immaginiamo le nostre 4 cifre :    |0|0|0|0|    Gli elementi e gli pseudo-elementi aggiungeranno 1 alla cifra 4 -> |0|0|0|1| Classi , attributi e pseudo-classi aggiungeranno 1 alla cifra 3 -> |0|0|1|0| Gli ID aggiungeranno 1 alla cifra 2 -> |0|1|0|0| Lo style inline aggiungerà 1 alla cifra 1 -> |1|0|0|0| Vediamo alcuni esempi p {} /* 0|0|0|1 */ p span {} /* 0|0|0|2 */ p.text-red {} /* 0|0|1|1 */ p.text-red#subtitle {} /* 0|1|1|1 */ #menu {} /* 0|1|0|0 */ style="color:red;" /* 1|0|0|0 */ L'ultimo esempio, che utilizza l'attributo style, ha la precedenza su tutti gli altri esempi.  Ma ricorda! Lo style inline è sempre sconsigliato. Esiste, infine, un’ultima keyword CSS che sovrascrive tutte le precedenti, ovvero !important Scrivendo questa keyword alla fine di una proprietà CSS questa avrà la priorità su tutte quelle dichiarate, anche se ci sono dei selettori con specificità maggiore.   Facciamo un esempio: /*nell' HTML*/ <p style=”color: red;”>Ciao a tutti</p> /*nel CSS*/ p { color : green !important; } In questo modo, anche se il selettore per elemento p ha una specificità minore rispetto allo style inline, grazie alla keyword !important il tag <p> avrà colore verde.   Ti sconsigliamo, tuttavia, di utilizzare questa keyword perchè, a lungo andare, in un progetto molto grande potrebbe darti numerosi problemi e sovrascrivere molte classi, rendendo difficile modificare lo stile di alcuni elementi.

Giunto a questo punto avrai sicuramente assimilato i concetti cardine basilari del linguaggio CSS. Andiamo, adesso, ad esplorarne le proprietà. Le proprietà CSS non sono altro che quelle caratteristiche a cui andremo ad assegnare dei valori che definiranno lo stile concreto dei nostri elementi html. Ne abbiamo già parlato quando ti abbiamo parlato della sintassi del CSS. Ricordi che cos’è una dichiarazione? Esatto! Una coppia proprietà-valore. Rinfreschiamoci la memoria con questo esempio: selettore { proprietà: valore; } I valori da assegnare alle proprietà CSS sono diversi e numerosi. Per facilitarne l’apprendimento, li suddivideremo in delle macro-categorie. Colori CSS I valori che puoi dare alla proprietà “color” nel linguaggio CSS possono essere espressi in diverse modalità:   la proprietà css “color:” + il nome del colore esempio: h1 { color: red; } la proprietà css “color:” + valore esadecimale esempio: h1 { color: #ff0000; } la proprietà css “color:” + valore esadecimale con trasparenza che si applica aggiungendo due cifre che vanno da 00 (completamente trasparente) a ff (completamente opaco) all’esadecimale esempio: h1 { color: #ff000088; } la proprietà css “color:” + valore rgb (i valori vanno da 0 a 255 e vanno separati da una virgola) esempio: h1 { color: rgb(255,0,0); } la proprietà css “color:” + valore rgba (il valore “a” conferisce la trasparenza, che va da 0 - completamente trasparente - a 1 - completamente opaco -) esempio: h1 { color: rgba(255,0,0,0.5); } Keywords CSS Un tipo di valore composto da parole chiave che sono specifiche di una determinata proprietà. Elencarle tutte sarebbe impossibile, le vedremo via via nel corso dell’esplorazione delle proprietà del CSS. Stringhe di testo CSS Un esempio ottimale per comprendere un valore espresso attraverso stringhe di testo è quello del valore attribuito alla proprietà font-family nel nostro documento CSS. La suddetta proprietà ci permette di indicare alla nostra pagina web quale sarà il font da utilizzare. Vediamone la sintassi: * { font-family: ‘Montserrat’, sans-serif; } La stringa di testo, in questo caso, è il nome del font, vale a dire il ‘Montserrat’. Sans serif, a seguire, è invece una keyword della proprietà font-family. Sta ad indicare che, qualora il link al font Montserrat mancasse, il font da utilizzare sarebbe il sans-serif (dunque un font privo di grazie) di default del browser utilizzato. Numeri CSS Interi o con la virgola, potrebbe non venirti immediatamente in mente l’utilità di un valore espresso in numeri senza un’unità di misura. Un esempio concreto potrebbe essere il valore da assegnare alla proprietà z-index, una proprietà che permette di stabilire quale elemento della nostra pagina web sarà in primo piano e quale andrà dietro. Immagina di avere due elementi ai quali hai assegnato un valore della proprietà z-index differente. Hai assegnato all’elemento 1 uno z-index pari a “10”, all’elemento 2 uno z-index pari a “11”. L’elemento 1 sarà disposto dietro l’elemento 2. Unità di misura CSS Questo tipo di valore viene assegnato per caratterizzare proprietà inerenti alle dimensioni, distanze e spazi in genere. Questo valore viene espresso in numeri, seguiti immediatamente dall’unità di misura - senza spazi!! - Le unità di misura sono svariate, tuttavia, ai fini di un apprendimento più pratico, vedremo esclusivamente le più utilizzate sul web: px : i pixel - li conosciamo tutti - sono l’unità di misura per eccellenza per gli schermi; fanno riferimento al reale pixel fisico dello schermo e hanno una dimensione fissa: prova a concepirli come i tasselli di un mosaico che vanno a formare l’immagine che vedi a schermo. percentuali: le unità di misura espresse in percentuale fanno riferimento al valore della proprietà del padre di quel determinato elemento.Cosa significa? Se abbiamo un <div> di colore rosso all’interno di un <div> di colore verde, e quello rosso ha un unità di misura per la sua proprietà “width” espressa in percentuale (ad esempio: 50%), il nostro div rosso non sarà grande il 50% dello schermo, ma occuperà esattamente il 50% del padre (ovvero il div verde.) L’unità di misura percentuale è un'unità meno stabile del pixel: non è fissa, è flessibile. Ciò significa che al cambiare della dimensione del padre, ovviamente, cambierà la sua dimensione. Vediamolo meglio: se il padre in questione è il body stesso, passando da un dispositivo desktop ad uno mobile - come il tuo cellulare - le dimensioni dello schermo si ridurranno. In quel caso, il 50% del div rosso preso in analisi poc’anzi, avendo come padre il body, non corrisponderanno sempre allo stesso numero di pixel, poiché lo schermo sarà più piccolo.   em: è un’unità di misura relativa alla dimensione del font del padre del nostro elemento. Supponiamo di aver assegnato ai testi contenuti nel nostro header un font-size generico di 20px; se assegnamo ad un paragrafo contenuto nell’header un font-size di 2em il testo di quel paragrafo misurerà 40px. rem: funziona in maniera simile all’ em, ma contrariamente a quest’ultima, il rem è un’unità di misura che si basa sulla grandezza dei font presenti nella root, ovvero la “radice” del nostro documento html. Per molti browser questa misura corrisponde a 16px, ma se volessimo cambiarla ci basterebbe assegnare al body la font-size desiderata. Potremmo, dunque, dire che un rem è un em il cui padre è il body. viewport: la viewport è letteralmente la grandezza visibile della nostra pagina web, che cambia al cambiare del dispositivo di fruizione del sito. Vale a dire che se navighiamo su un sito web da cellulare, da tablet o da pc la viewport sarà diversa per ciascun mezzo. Ciò detto, le unità di misura relative alla viewport sono due, e sono vh e vw. “Vh” sta per “viewport height” - l’altezza del nostro documento - e “vw” sta per “viewport width” - la sua larghezza - e i loro valori corrispondono ad una percentuale della viewport. Ad esempio, se il valore di una proprietà di dimensione di un elemento assegnato sarà “75vh” l’ingombro del mio elemento occuperà il 75% dell’intera viewport height. Variabili CSS Menzione speciale va ai valori espressi richiamando le variabili. È importantissimo, come avrai modo di esperire, imparare, fin da subito, ad assegnare delle variabili al tuo documento CSS. Spieghiamoci meglio. Col moderno CSS è possibile dichiarare delle variabili - solitamente all’inizio del foglio CSS, prima di ogni altra cosa - ed usarle, in seguito, come valori delle proprietà. Per utilizzare una variabile occorre dichiararla. La sintassi per dichiararla è la seguente: :root { --nomevariabile: valore; } Quindi, ad esempio :root { --nomevariabile: purple; } Quando, poi, vorrai utilizzarla in seguito, dovrai digitare il tuo codice - ad esempio - in questo modo: h1 { color: var(--nomevarabile); } Ma perchè è fondamentale utilizzare le variabili?  Immagina di utilizzarle per definire i colori principali del tuo sito web. Il sito ti piace e sei veramente soddisfatto della tua palette! Ma il cliente ha, improvvisamente, cambiato idea e ti chiede di cambiare quei colori. Senza l’utilizzo delle variabili tu dovresti andare a modificare, in questa spiacevole eventualità, il colore degli elementi uno ad uno. Un lavoraccio, non trovi? Se, invece, hai utilizzato come valore delle tue proprietà inerenti al colore una variabile, ti basterà modificare il valore della variabile in questione per vedere mutare il colore in ogni punto in cui l’hai utilizzato: un risparmio di tempo incredibile! Che dici, vale la pena imparare ad utilizzarle? 

Ogni elemento html, al di là della sua customizzazione mediante il linguaggio CSS, viene racchiuso in un “box” con all’ interno del contenuto (di qualsiasi natura, da un testo ad un’ immagine) e, via via, procedendo verso l’ esterno, una serie di componenti: il padding css, il border css ed il margin css.  Con il CSS possiamo andare ad agire modificando le proprietà di questi componenti.   PADDING CSS, MARGIN CSS, BORDER CSS: cosa sono? Il padding css è lo spazio tra il contenuto ed il border. Il border css è letteralmente il bordo del nostro box. Possiamo ampiamente customizzarlo, in quanto dispone di svariate proprietà CSS che analizzeremo poco più in là nel nostro articolo.  Il margin css, infine, è lo spazio esterno al border. Il suo ruolo è quello di separare l’ elemento da altri elementi (separa, ad esempio, un <div> da un altro).  Proviamo a spiegartelo meglio con una metafora: immagina di aver acquistato un paio di cuffie da Amazon. Sarai di sicuro entusiasta di ricevere dal corriere il tuo pacco! Ma, hai mai pensato che il pacco in questione potesse essere un ottimo box model? Svisceriamo meglio l'analogia: nel caso del tuo acquisto il border sarebbe il cartone della scatola; il padding sarebbe la sua imbottitura, che tutela il contenuto; il contenuto sarebbero le cuffie che hai acquistato; il margin sarebbe lo spazio tra la tua scatola, appoggiata sullo scaffale, e gli altri oggetti su quello stesso scaffale. Decisamente più chiaro così, vero? È importante sottolineare che due margin non andranno a sommarsi, ma si sovrapporranno:  se avessimo, per esempio, due <div> ognuno di loro avrebbe il suo box-model; se li separassimo mediante l’utilizzo di un margin da 20 px ciascuno, non avremmo uno spazio totale di separazione grande 40px, bensì uno da 20px. Inoltre, se, per esempio, andassimo a dare un background all’elemento html in questione, questo background si applicherebbe allo spazio del padding e del border, ma lascerebbe libero quello del margin, che - ribadiamo - serve esclusivamente a separare gli elementi della pagina html.  Tutti e 3 i componenti del box model accettano un valore in pixel (o in un’altra delle unità di misura che abbiamo visto) da settare su 4 proprietà: top, right, bottom e left.  Nell’ esempio sottostante, in cui definiremo il margin di un elemento, potrai osservarne la sintassi, che può essere espressa in due modalità: modalità 1 .elemento1 { margin: 10px 30px 25px 20px; } modalità 2 .elemento1 { margin-top: 10px; margin-right: 30px; margin-bottom: 25px; margin-left: 20px; } Attenzione! Ci sono due proprietà CSS, quali width ed height, che servono, rispettivamente, a definire l’ampiezza e l’altezza del nostro documento html. Potresti facilmente incorrere nell’errore di pensare che settando il valore di queste due proprietà tu stia andando effettivamente a modificare la dimensione globale del box-model: ebbene, non è così! Quando assegniamo una width e una height ad un elemento, quello che verrà ridimensionato è il CONTENUTO: il valore del resto dei componenti del box-model verrà aggiunto a quella dimensione. Questo comportamento di default, tuttavia, può essere cambiato grazie all’aiuto della proprietà box-sizing.  Questa proprietà accetta due tipi di valore: content-box: il valore, appunto, di default del browser (che, come abbiamo visto, nel caso in cui un elemento disponga di una propria width, fa in modo che il valore del resto dei componenti venga aggiunto alla width);esempio: .elemento1 { box-sizing: content-box; width: 150px; padding: 50px; border: solid 10px red; } In questo caso l’ elemento in totale occuperà 150px + 100px (padding left e padding right) + 20px (border left e border right), per un totale di 270px. Ricorda! Puoi anche non specificare la proprietà box-sizing se il suo valore è content-box, perché è un valore di default. border-box: il valore custom che farà in modo che, delineando una width dell’elemento, questa comprenda la dimensione del resto delle componenti.esempio .elemento1 { box-sizing: border-box; width: 150px; padding: 50px; border: solid 10px red; } In questo secondo caso, il totale sarà comunque di 150px. I componenti del box model (fatta eccezione per il margin!!) andranno ad occupare parte dello spazio riservato al contenuto, schiacciandolo. Qui evidenziamo un’ altra grande differenza tra il margin e il padding: con questa impostazione, infatti, all’aumentare dello spazio dedicato al padding, diminuirà lo spazio dedicato al contenuto. Il padding andrà, quindi, a “schiacciare” il contenuto. Il border seguirà l’esempio del padding. Aumentando invece, le dimensioni del margin, questo non andrà a schiacciare il contenuto, ma ugualmente ad aggiungere dello spazio divisorio tra gli elementi, preservando le dimensioni del contenuto stesso. Attenzione! Se ti avvali di un framework per la stesura del tuo codice il valore di default della proprietà box-sizing, diventerà, probabilmente, border-box.   Le proprietà del border  Come accennato, il border in particolare ha diverse proprietà; vediamole: border-style: definisce lo stile del bordo. Può essere dashed (tratteggiato), dotted (a puntini), oppure solid (normale); puoi applicarla a tutti i lati oppure ad uno solo, adeguando la sintassi della proprietà secondo necessità. (ad esempio: border-top-style) border-width: delinea la grandezza del bordo; può accettare un solo valore per tutti i lati oppure diversi valori per lato; puoi anche modificare un solo lato attraverso lievi modifiche al nome della proprietà, come border-width-top, o bottom e così via border-color: nomen omen, si riferisce alla modifica del colore del bordo. Anche qui si può modificare il colore di ogni singolo lato con le stesse modalità di cui sopra border-radius: serve ad arrotondare gli angoli del nostro bordo. Può accettare valori in pixel o in percentuale. A seconda di questi valori il nostro box può diventare anche un cerchio, un’ellisse, o avere un effetto pillola. Per padroneggiare meglio i risultati di questo settaggio, puoi trovare online dei border-radius generator. Anche per questa proprietà del border avrai la possibilità di modificarne tutti i lati o solo alcuni. Puoi definire tutte queste caratteristiche del border - ad esclusione del border-radius - anche mediante la proprietà generica “border”, come nell’esempio sottostante: .elemento1 { border: solid 10px red; }

Abbiamo detto che il linguaggio CSS vanta numerose proprietà. Una delle più utilizzate, è sicuramente la proprietà generica “background”, che, come suggerisce il nome, è relativa agli sfondi degli elementi della tua pagina web. Ora, questa proprietà generica si declina in più modalità, vale a dire che possiamo occuparci dello sfondo di un elemento in diversi modi. Andiamo, dunque, ad analizzare le proprietà di background.   background-color:  il valore di questa proprietà va assegnato esattamente in una qualsiasi delle modalità di valore del colore viste nella guida precedente. background-image:  serve ad impostare un’immagine di sfondo al tuo elemento; accetterà come valore la scritta “url” seguita dal link all’immagine o dal percorso dell’immagine nel tuo computer. È best-practice utilizzare un path interno al tuo pc e non un link ad un sito internet, poiché quella risorsa potrebbe non essere permanente su quel link.esempio .elemento1 { background-image: url(https://aulab.it/storage/831/conversions/I-migliori-shortcuts-per-sviluppatori-web-cover.jpg) } background-repeat: questa proprietà ti permetterà di ripetere o meno l’immagine di sfondo del tuo elemento; il valore andrà assegnato con una keyword a scelta tra ‘repeat x’ (per ripeterla orizzontalmente), ‘repeat y’ (per ripeterla verticalmente) e ‘no repeat’ (per non ripeterla affatto). background-position: determina la posizione del tuo sfondo nell’elemento; accetta come valori le keywords ‘bottom’, ‘left’, ‘right’ e ‘top’ oppure una dimensione in pixel partendo da in alto a sinistra.  nb. inserendo due soli valori ci riferiremo all’asse x e all’asse y esempio .elemento1 { background-position: 50px 50px; } background-size: le keywords accettate come valori sono ‘auto’ (che fa rimanere l’immagine esattamente così com è), ‘contain’ (che ingrandisce l’immagine il più possibile senza stretcharla o tagliarla) e ‘cover’ (che da l’immagine a tutta pagina) background-attachment: questa proprietà regola il comportamento dell’immagine rispetto allo scroll della pagina; i valori accettati, sempre espressi in keywords, sono ‘scroll’ (valore di default grazie a cui l’immagine resta nella sua posizione, quindi non sarà più visibile quando scrollerai la pagina) e ‘fixed’(grazie a cui otteniamo il cosiddetto “effetto parallasse”: l’immagine rimane fissa e non sparisce allo scrollare della pagina) Il linear gradient La proprietà background può accettare anche un ulteriore valore. Stiamo parlando del linear-gradient. Il grande vantaggio del web rispetto alla carta stampata, è che ha un’ottima resa delle sfumature di colore, che in molti casi se dosate e utilizzate nella giusta misura e modalità, possono rendere molto più accattivante i nostri siti web. Ma come funziona il linear-gradient? header { background: linear-gradient(angolo espresso in deg, colore1, colore2); } Nell’ esempio soprastante abbiamo utilizzato il linear-gradient come valore della proprietà background. Come puoi vedere, immediatamente adiacenti ad esso abbiamo inserito alcune istruzioni, vale a dire l’angolo della sfumatura, espresso ovviamente in gradi (quindi, ad esempio, 120deg), il colore da cui dovrà partire la sfumatura e il colore dove dovrà arrivare, separati da una virgola. Questa è la sintassi per utilizzare il linear gradient. I colori inseriti come valori del linear-gradient possono essere espressi in tutte le modalità che abbiamo visto quando abbiamo parlato della proprietà inerente al colore. Ma non è tutto! Il linguaggio CSS ci permette, infatti, letteralmente di sbizzarrirci ed esprimere il nostro estro creativo come più vogliamo. Possiamo aggiungere alle nostre sfumature anche delle trasparenze. Per aggiungere la trasparenza al nostro linear-gradient, si utilizza la funzione rgba() per definire gli arresti di colore. L'ultimo parametro della funzione rgba() può essere un valore da 0 a 1 e definisce la trasparenza del colore: come già detto, 0 indica la piena trasparenza, 1 indica il colore pieno. L'esempio seguente mostra un gradiente che è totalmente trasparente all’inizio e vira al colore nero pieno:  header { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)), url(https://aulab.it/storage/828/conversions/inserire-css-in-html-cover.jpg); } Questo escamotage può essere particolarmente utile quando vuoi applicare una sottospecie di overlay all’immagine del tuo header, magari per rendere più leggibili gli elementi testuali al suo interno. Come puoi notare, infatti, il linear-gradient, qui, è stato applicato alla proprietà ‘background-image’ e a lui è seguito l’url dell’immagine da utilizzare. nb. I colori della nostra sfumatura non devono essere necessariamente due. Potresti, volendo, creare persino una sfumatura arcobaleno: il solo limite, quando sperimenti queste possibilità, è il buon senso! 

Il linguaggio CSS ci permette di customizzare anche i font dei testi delle nostre pagine web. Vediamo, in questa guida, come incorporare un font nel nostro progetto, qual è la sintassi da utilizzare per assegnarlo ad un selettore e quali sono le proprietà per caratterizzarne lo stile. Importare un font Abbiamo due modi per importare un tipo di font nel nostro progetto: il primo, e più utilizzato, è attraverso link esterno, avvalendoci di librerie quali, ad esempio, Google fonts.  Come funziona Google fonts? Scopriamolo. Atterrato sulla home di Google fonts, ti si presenterà un’interfaccia molto intuitiva. Potrai scegliere il tuo font tra uno dei molti a disposizione, rendendo più facile la tua ricerca anche mediante all’aiuto di un sistema di filtri, oppure, nel caso in cui tu ne abbia già uno ben preciso in mente, andare a cercarlo con l’ausilio della barra di ricerca. Supponiamo di voler ricercare il font ‘Montserrat’. A questo punto, selezionandolo, ti si paleserà una situazione del genere.   Quello che dovrai fare sarà selezionare i “pesi” e le “versioni” del font che pensi potranno essere utili (bold, regular, italic ecc) e cliccare sul simbolino del “+” per aggiungerli alla tua selezione. A quel punto, le versioni del font aggiunte appariranno in lista in un pannello in alto a destra. Immediatamente sotto quel pannello, ne troverai un altro intitolato “Use on web” .    Come puoi vedere nell’immagine, questo pannello ti fornirà un link e una regola CSS. Nel primo riquadro troverai il link, che dovrai copiare-incollare nell’head del tuo documento. Nel secondo riquadro, invece, troverai la regola CSS precisa (CSS rules) che dovrai incollare nel tuo foglio CSS, accanto al selettore desiderato. Semplicissimo, vero? Tuttavia esiste un altro metodo da utilizzare per inglobare un font nel tuo progetto. Immagina di avere un font che un graphic designer ha realizzato ad hoc proprio per il tuo progetto. Magnifico, no? Chiaramente, però, questo font, interamente realizzato su misura per te, non può essere presente su Google fonts. Come fare? Hai idea di rinunciare ad utilizzarlo? Fermati! La soluzione è a portata di mano. In questi casi possiamo utilizzare una delle “@ rule”. Inseriremo nel foglio css la regola “@font-face”, dove specificheremo il nome del font e il path - percorso - per arrivare ad esso, come nell’esempio. @font-face { font-family: Miofont; src : url(./miofont) } e, successivamente, potremo applicare questa font-family ai selettori desiderati. La sintassi   Come abbiamo già ampiamente avuto modo di osservare, a permetterci di istruire il browser sulla tipologia di font da renderizzare è la proprietà ‘font-family’.  Con questa, infatti, è possibile dichiarare al browser il font da utilizzare, dandole come valore il nome del font inserito tra apici. È possibile dichiarare più di un font nella stessa proprietà font-family, in maniera tale che, qualora il browser non dovesse supportare il primo font indicato, passerebbe immediatamente al secondo e così via. Se abbiamo, invece, intenzione di utilizzare più font diversi in un solo documento, andremo a dichiararli come valori di due proprietà font-family differenti e, poi, ad indicare al selettore di interesse quale utilizzare. È buona norma inserire il font desiderato per primo, seguito - non obbligatoriamente - da un font sostitutivo e, immediatamente dopo, da una font-family generica, come ad esempio “serif” “sans-serif” “cursive” e via discorrendo. esempio: * { font-family: “times new roman” , “times” , “serif”; } Le proprietà dello stile dei testi nel CSS Una volta scelto un font è possibile modificarne lo stile con diverse proprietà. Vediamole: font-style: serve a modificare lo stile del font; può assumere valori come “normal”, “italic”, “oblique”. Naturalmente funzionerà a patto che, se per esempio abbiamo importato il font da Google fonts, abbiamo importato anche quelle versioni. font-weight: serve a definire il peso del font; i valori accettati saranno “normal”, “bold”, “bolder”, “lighter” o anche valori numerici da 100 a 900 (puoi avere una maggiore contezza del valore di un peso su Google fonts stesso) font-size: permette di modificare le dimensioni del tuo font; accetta, di conseguenza, tutti i valori relativi alle unità di misura.   Ci sono, poi, diverse proprietà utili alla formattazione del testo.   text-align: serve a modificare l’allineamento del testo; accetta valori come “left”, “right”, “center” e “justify”.  Quando alla proprietà text-align viene assegnato il valore justify, la riga viene allungata per adattarsi alla pagina. text-decoration: nonostante abbia diversi valori, nella realtà dei fatti si utilizza principalmente in merito all’effetto sottolineatura dei link. Il valore di riferimento più concreto, è, quindi, la keyword “none”, che serve proprio a rimuovere la sottolineatura di cui sopra. text-transform: ci consente di trasformare le nostre lettere in maiuscole o minuscole; i valori che accetta sono “uppercase” per il maiuscolo, “lowercase” per il minuscolo, e “capitalize” per rendere maiuscola la prima lettera di ogni parola. text-indent: ci permette di indentare la prima linea di un blocco di testo. Cos’è l’indentazione? È l’inserimento di una determinata quantità di spazio vuoto all’inizio di una riga di testo, molto utile, ad esempio, per scrivere un codice pulito e ben leggibile. Accetta valori di dimensione (pixel, percentuale ecc..) sia in positivo che in negativo. text-shadow: serve a dare un’ ombreggiatura al testo. Ha come valori ampiezza orizzontale, ampiezza verticale, raggio di sfocatura e colore, che andranno inseriti separati da una virgola. Troverai online dei text-shadow generator che ti aiuteranno a settare il codice avendo già una resa grafica.esempio .element1 { text-shadow: 2px 2px 9px #FFEE00; } letter-spacing: è utile per aumentare o ridurre la “crenatura” ovvero lo spazio che intercorre tra una lettera ed un’altra all’interno di una parola; accetta valori in px. word-spacing: simile alla precedente proprietà, regola, però, lo spazio che intercorre tra una parola e l’altra. line-height: regola l’interlinea del testo, vale a dire lo spazio che intercorre verticalmente tra una riga e l’altra.

La proprietà position all'interno del linguaggio CSS serve per modificare il posizionamento di un elemento nella nostra pagina web; tuttavia, da sola non basta a raggiungere l’obiettivo: pertanto, viene utilizzata con altre proprietà direzionali : top,right,bottom,left e z-index.  In totale, la proprietà position ha 5 possibili valori:  static: ogni elemento ha una posizione statica per impostazione predefinita (si tratta, quindi, del valore di default). L'elemento, dunque, si atterrà al normale flusso della pagina: se è stato impostato un indice di posizione a sinistra/destra/alto/basso/z, non ci sarà alcun effetto su quell'elemento. Perchè la posizione cambi il valore va cambiato. relative: la posizione originale di un elemento rimane nel flusso del documento, proprio come il valore statico. Ma ora gli indici left/right/top/bottom/z-index  funzioneranno. Le proprietà posizionali "spostano" l'elemento dalla posizione originale in quella direzione, lasciando, però, la posizione originale occupata e sovrapponendolo agli altri elementi della pagina. absolute: l'elemento viene rimosso dal flusso del documento e viene riposizionato secondo ordini. Gli altri elementi si comporteranno come se, nello spazio d’origine, l’elemento non ci fosse più, mentre tutte le altre proprietà posizionali funzioneranno su di esso. fixed: l'elemento viene rimosso dal flusso del documento come gli elementi posizionati in modo absolute. In realtà si comportano quasi allo stesso modo, ad esclusione del fatto che gli elementi posizionati in modo fixed sono sempre relativi alla finestra del browser, non a un particolare genitore, e non sono influenzati dallo scorrimento. Per intenderci, rimangono “fissi” - appunto - nella posizione che gli diamo. sticky: l'elemento viene trattato come nel caso del valore “relative”, finché la posizione di scorrimento della finestra di visualizzazione non raggiunge una soglia specificata; a quel punto, l'elemento assume una posizione fissa in cui gli viene detto di rimanere. Confuso? Non preoccuparti! Vediamo degli esempi pratici per schiarirti le idee. CSS Position Relative CSS: .element { position: relative; top: 20px; } HTML: <h1 class=”element”>Corso di coding </h1> <h2>Come diventare uno sviluppatore web </h2> Rispetto alla sua posizione originale, l'elemento sopra sarà ora spostato in basso di 20px.  Possiamo notare come il titolo, adesso, si sia sovrapposto al sottotitolo e, soprattutto, lo spazio originariamente occupato dal titolo sia rimasto occupato. CSS Position Absolute   Struttura HTML: <div class="parent"> Elemento Padre <div class="element">Elemento Figlio </div> </div> CSS: .element { position: absolute; left: 0; right: 0; bottom: 0; } Se un elemento figlio ha un valore assoluto, l'elemento genitore si comporterà come se il figlio non ci fosse affatto. Quando cerchiamo di impostare altri valori come “left”, “bottom” e “right”, scopriremo che l'elemento figlio non risponde alle dimensioni del suo genitore, ma a quelle del documento. Per fare in modo che l'elemento figlio sia posizionato in modo assoluto rispetto all'elemento genitore, dobbiamo impostare la position dell’elemento padre in modo tale che sia diversa da static:  .parent { position: relative; } Proprietà come left, right, bottom e top si riferiscono, adesso, all'elemento genitore, per cui ora vedremo l'elemento figlio posizionato proprio alla base dell'elemento genitore. Proviamo a dargli uno stile:  .parent { color: white; padding: 70px; position: relative; background-color: #0074d9; } .element { background-color: rgba(0,0,0,.3); padding: 20px; color: rgba(255,255,255,.4); position: absolute; bottom: 0; left: 0; right: 0; } Come puoi vedere provando questo codice, tutto quello che ti abbiamo illustrato è stato effettivamente realizzato. CSS Position Fixed Il valore “fixed” è simile a quello “absolute”, in quanto può aiutare a posizionare un elemento in qualsiasi punto relativo alla finestra: infatti, l’elemento con position fixed non è influenzato dallo scorrimento della pagina.  Un esempio classico di elemento con position fixed è la navbar che scorre con la pagina, o il classico bottone della chat posizionato in basso a destra nella pagina. L'HTML: <div class="navbar">Navbar</div> Il CSS: .navbar { background-color: #40a6ff; padding: 20px; color: rgba(255,255,255,0.9); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } CSS Position Sticky Il valore “sticky” è un compromesso tra i valori “relative” e “fixed”.  Che cosa fa? Permette di posizionare un elemento rispetto a qualsiasi punto del documento e poi, una volta che l'utente ha superato un certo punto della finestra, di fissare la posizione dell'elemento in modo che rimanga visualizzato in modo persistente come un elemento con una position fixed. Vediamo un esempio. La struttura HTML: <header> <h1>Products</h1> </header> <nav class="nav-sticky"> <ul> <li><a href="#hoses">Hoses</a></li> <li><a href="#rakes">Rakes</a></li> <li><a href="#shovels">Shovels</a></li> </ul> </nav> <article> Lorem ipsum dolor sit amet… </article> Il CSS: header { background: hotpink; color: #fff; display: flex; height: 70vh; justify-content: center; align-items: center; } .nav-sticky { position: sticky; top: 0px; z-index: 1000; } article { background-color : pink; font-size: 2rem; height: 200vh; } Nell’ esempio, l'elemento sarà posizionato relativamente fino a quando la posizione di scorrimento della finestra di visualizzazione raggiungerà un punto in cui l'elemento si troverà a 50px dalla parte superiore della finestra di visualizzazione. A quel punto, l'elemento diventa “appiccicoso” e rimane in una posizione fissa a 50px dalla parte superiore dello schermo.   Z Index CSS   Sbizzarrendoci con le varie position, potremmo incorrere in qualche problema di sovrapposizione degli elementi. Per risolvere questi problemi dobbiamo utilizzare la proprietà z-index che modifica la posizione sull’asse z, ovvero la profondità. Negli esempi precedenti abbiamo, infatti, inserito nelle nostre navbar la proprietà z-index  con valore di 1000 in modo tale che nessun altro elemento si sovrapponesse alla nostra navbar. Uno z-index maggiore, implicherà che il nostro elemento risulti in primo piano rispetto ad uno con z-index minore, che risulterà sottostante.

Pseudo-Classi CSS Ricordi quando, nelle scorse guide, abbiamo parlato dei selettori CSS? Non ne abbiamo, volutamente, menzionato una tipologia: i selettori per pseudo-classi. I selettori per pseudo-classi sono dei selettori CSS preceduti da due punti e servono per selezionare degli elementi in base a determinate condizioni. Andiamo per ordine: che cos’ è una pseudo-classe? Ti è mai capitato di passare il mouse su un elemento e vederlo cambiare? Ecco: molto probabilmente, in quel caso, quello che è cambiato è lo stato dell’elemento che è passato dallo stato normale allo stato di hover. Hover, è una pseudo-classe, ovvero una classe che definisce il modo in cui verrà raffigurato un elemento in un determinato  stato. Nel linguaggio CSS, ogni sviluppatore web lo sa bene, le pseudo-classi sono un elemento molto utile per conferire dinamicità quando decidi di creare un sito web. Vediamo qual è la sintassi corretta e, successivamente, quali sono le principali pseudo-classi, divise per gli elementi del linguaggio html a cui appartengono. button { border: solid red 2px; background-color: transparent; color : red; } button:hover { /*prorietà css da modificare*/ background-color: red; color : white; } Con il codice soprastante, possiamo vedere come, al passaggio del mouse sopra un bottone, questo cambi il colore del testo e il background (non ti preoccupare se vedi il colore cambiare all’improvviso, vedremo come modificare anche questa proprietà nella prossima guida). Vediamo, ora, quali sono le principali le principali pseudo-classi che potrai utilizzare. Pseudo classi tag anchor <a> :link - Probabilmente la pseudo classe che genera più confusione nelle pseudo classi dei link. Starai pensando, ma non sono tutti link? In realtà no se questi non hanno l’attributo href, infatti questa pseudo classe seleziona solo i tag <a> con all’interno l’attributo href. :visited - Seleziona i link che sono già stati visitati dall’utente, ovviamente in base alla cronologia del browser. :active - Seleziona un link nel momento in cui viene attivato, ovvero, nel momento in cui viene cliccato e non è ancora stato rilasciato il tasto.   Pseudo classi tag di input :focus - Seleziona il campo di input nel momento in cui l’utente ha cliccato per scriverci. è molto utile per dare uno stile diverso a un tag di input quando l’utente clicca e quindi far capire che può scriverci all’interno. :target - La pseudo-classe target è usata insieme agli ID e corrisponde quando il tag hash nell'URL corrente corrisponde a quell'ID. Quindi, se ci si trova all'URL www.aulab.it/#contatti, il selettore #contatti:target corrisponderà. Questo può essere estremamente potente. :enabled - Seleziona gli input che son di default nello stato abilitato. :disabled - Seleziona gli input che hanno l’attributo “disabled”. :checked - Seleziona i checkbox nel momento in cui vengono selezionati. :indeterminate - Seleziona gli input radio che non sono ancora stati selezionati. :required - Seleziona gli input che hanno l’attributo “required”. :optional - Seleziona gli input che non hanno l’attributo “required” e sono quindi opzionali.   Pseudo Classi in base alla posizione dell’elemento :first-child - Seleziona il primo figlio all’interno di un elemento :last-child - Seleziona l’ultimo figlio all’interno di un elemento :nth-child() - Seleziona gli elementi in base alla posizione all’interno di un elemento. Hai anche la possibilità di selezionare elementi pari / dispari, vediamo come: even / odd - Con queste keyword puoi selezionare rispettivamente tutti gli elementi pari o tutti gli elementi dispari n - Inserendo nelle parentesi tonde un numero selezionerai solo l’elemento che è in quella posizione :nth-type() - Funziona come :nth-child ma si usa in luoghi in cui gli elementi dello stesso livello sono di tipo diverso. Ad esempio, se all'interno di un <div> ci fossero una serie di paragrafi e una serie di immagini.  :first-of-type - Seleziona il primo elemento di un determinato tipo di elemento. :last-of-type - Seleziona l’ultimo elemento di un determinato tipo di elemento. :nth-last-of–type() - Funziona con nth-type ma partendo da sotto. :nth-last-child() - Funziona con nth-child ma partendo da sotto. :only-of-type - Seleziona l’elemento se è l’unico di quel tipo all’interno dell’elemento padre <div> <ul> <!-- ul:only-of-type --> <li>primo</li> <!-- li:first-child | li:nth-child(odd) --> <li>secondo</li> <!-- li:nth-child(2) | li:nth-child(even) --> <li>terzo</li> <!-- li:last-child | li:nth-child(odd) --> </ul> <div>Primo div</div> <!-- div div:first-of-type --> <p>primo paragrafo</p> <div>secondo div</div> <!-- div div:last-of-type --> <p>secondo paragrafo</p> <!-- p:nth-of-type(2) --> </div> Pseudo-Elementi CSS Gli pseudo-elementi sono degli elementi che non esistono nel linguaggio di markup html, ma vengono creati tramite dei selettori css e sono ::after e ::before. L’unica differenza tra i due è che con “after” il contenuto creato con il linguaggio css si posizionerà dopo l’elemento interessato, mentre con “before”, prima. Prova a inserire questo codice all’interno del tuo foglio di stile css. h1::before { content: ‘prima’; } h1::after { content : ‘dopo’; } Come puoi notare, ai fianchi del tuo titolo si sono aggiunti la parola “prima” a sinistra e “dopo” a destra. Attraverso la proprietà content puoi, quindi, specificare il contenuto dello pseudo-elemento, vediamo quali sono i possibili valori da inserire: testo - Puoi inserire qualsiasi tipo testo come valore del content e questo apparirà prima o dopo l’elemento immagine - Puoi inserire come valore l’url di un’immagine (content : url(percorso/per/immagine.jpg)), questa, verrà inserita con le esatte dimensioni dell’immagine e non sarà possibile ridimensionarla, per questo motivo non è molto utilizzato. niente - (content : “”)Possiamo inserire un contenuto vuoto se vogliamo creare un elemento grafico oppure un elemento con una dimensione prestabilita e un’immagine di sfondo. Ma pseudo-classi e pseudo-elementi non sono le uniche cose  in grado di conferire del movimento al tuo sito web. Curioso di sapere cos’ altro può aiutarti in tal senso?? Vediamolo insieme nella prossima guida! 

Fino ad ora abbiamo parlato un po’ di come dare dello stile ai nostri elementi html. E se ti dicessimo che non devi necessariamente creare delle pagine statiche? Nonostante per integrare le animazioni, infatti, il linguaggio sovrano sia Javascript , anche il nostro amico CSS può darci grandi soddisfazioni. In questa guida parleremo di come animare e rendere più dinamici i nostri siti web senza utilizzare javascript, ma soltanto con l’utilizzo del linguaggio CSS. Nello specifico andremo a conoscere 3 proprietà fondamentali : transition transform animation Transition CSS La proprietà transition del CSS ti consentirà di ottenere un passaggio graduale tra due stati nella stessa proprietà.  Viene principalmente utilizzato con le pseudo-classi come hover, active o focus. Possiamo specificare 4 proprietà per la transizione da uno stato ad un altro : transition-property: la proprietà sulla quale applicare la transizione; transition-duration: la durata della transizione; transition-timing-function: la curva temporale della transizione; transition-delay: il ritardo con cui far iniziare la transizione; Queste 4 proprietà sono raggruppabili in un’unica shorthand (scorciatoia): la proprietà “transition” Vediamo un piccolo esempio:  .button { background : red; border: solid 2px red; color: black; transition-property: all; transition-duration: 0.5s; transition-timing-function: linear; } .button:hover { background: orange; border: solid 2px orange; color: white; } In questo semplice esempio, vediamo come all’hover sul bottone il suo colore di background, di bordo e di testo cambierà in modo graduale secondo le caratteristiche da noi date. Notiamo, inoltre, che anche quando il mouse lascerà il bottone le proprietà torneranno nello stato iniziale con una transizione; questo è dovuto al fatto che abbiamo specificato la transizione nello stato di default e non nella pseudo-classe. Come dicevamo, esiste anche un altro metodo - più breve - per scrivere tutte queste proprietà, ovvero la proprietà transition. Vediamo in questo esempio come si trasforma il codice. .button { background: red; border: solid 2px red; color: black; transition: all 0.5s linear; } .button:hover { background: orange; border: solid 2px orange; color: white; } Ti facciamo notare anche la keyword “all” utilizzata nella proprietà transition-property: questa attribuisce una transizione a tutte le proprietà dell’elemento. Se, ad esempio, sostituissimo la keyword “all” con “background” la transizione verrebbe applicata solo alla proprietà background, mentre le proprietà border e color cambierebbero immediatamente, dando quasi un effetto di “scatto” all’occhio. Transform CSS La proprietà transform ci permette di trasformare un elemento in 2D o in 3D. Le trasformazioni che possiamo effettuare in 2D ci permettono di :  traslare ruotare ridimensionare distorcere Le trasformazioni che possiamo effettuare in 3D ci permettono di cambiare la prospettiva di un elemento. Vediamo, adesso, le trasformazioni che possiamo effettuare in 2D, nonché quelle più utilizzate:  Traslazioni .transform { transform: translate(x,y); } Con questa funzione possiamo spostare un elemento; accetta due parametri (x e y) che corrispondono allo spostamento sull’asse x - ovvero quello orizzontale - e sull’asse y - ovvero quello verticale -. Abbiamo anche la possibilità di traslare solo sull’asse X o sull’asse Y con  translateY(y) translateX(x) Ovviamente, i valori da inserire sono i valori inerenti alla macro-categoria unità di misura. Rotazioni .transform { transform: rotate(angolo); } Con questa funzione possiamo far ruotare un elemento; accetta come parametro un angolo di rotazione - ad esempio “120deg” -, sia positivo che negativo. Ridimensionamento .transform { transform: scale(x,y); } Con questa funzione possiamo ridimensionare un elemento in scala; i valori da inserire saranno un numero intero o con la virgola a seconda di quanto vogliamo ridimensionare lungo l’asse orizzontale e lungo l’asse verticale. esempio: .transform { transform: scale(1.5,2); } Nel caso in cui il ridimensionamento sia uguale sia per l’asse orizzontale che per il verticale possiamo inserire anche un unico valore.   Distorsione .transform { transform: skew(angolo-x,angolo-y); } Con questa funzione possiamo distorcere la visualizzazione di un elemento; i valori da inserire saranno un angolo per la distorsione orizzontale e uno per quella verticale. Per tutte le trasformazioni viste fino ad ora, possiamo aggiungere anche la proprietà “transform-origin” che indicherà il punto di “ancoraggio” ovvero il punto di origine della trasformazione. Di default questo punto coincide con l’angolo in alto a sinistra. Animation Le animazioni sono probabilmente lo strumento di progettazione di animazioni web più potente che CSS3 ha da offrire. Le animazioni consentono di modificare gradualmente lo stile degli elementi della pagina, andando a definire più “keyframes” all’interno dell’animazione. A differenza della transizione, la proprietà animation ci da molto più controllo sulle fasi intermedie dell’animazione. Possiamo creare un’animazione attraverso la regola @keyframes  I keyframes all’interno di questa regola determinano il tipo di stile applicato a un elemento in un dato momento, fondamentalmente rappresenta il "codice" che esegue l'animazione. Vediamo come creare un’animazione con @keyframes @keyframes bounce { from { transform: translate(0, 0); } 40% { transform: translate(0, -30px) scaleY(1.1); } 70% { transform: translate(0, -15px) scaleY(1.05); } to { transform: translate(0, 0); } } In questo modo abbiamo creato un’animazione, che abbiamo chiamato “bounce”, che simulerà il rimbalzare di una palla. Come possiamo notare, abbiamo creato 4 keyframes dove l’elemento verrà modificato.  Il primo, ovvero from, indica il punto di partenza del nostro elemento e possiamo sostituirlo anche con 0%. L’ultimo, ovvero to, invece, indica il punto finale dell’animazione e possiamo anche sostituirlo con 100%. Gli altri due keyframes ovvero 40% e 70% indicano invece degli stati intermedi della nostra animazione; questi non sono obbligatori, a differenza dello stato iniziale e finale dell’animazione. Possiamo aggiungere quanti keyframes vogliamo alla nostra animazione e “complicarla” a nostro piacimento. Una volta creata un’animazione con un nome, non ci resta che assegnarla ad un elemento. .bounce-animated { animation-name : bounce; animation-duration: 1s; } Abbiamo moltissime proprietà che ci permettono di modificare un’animazione ma queste due – animation-name e animation-duration – sono obbligatorie per far partire la nostra animazione. Vediamole, adesso, tutte : animation: modalità abbreviata che serve ad impostare tutte le proprietà che seguono; animation-name:  (obbligatorio) indica il nome dell’animazione da applicare a un elemento; animation-duration: (obbligatorio) specifica quanto dura l’animazione; animation-delay: (opzionale) indica il ritardo in termini di tempo con cui inizia l’animazione ; animation-direction: (opzionale) specifica la direzione dell’animazione; i possibili valori sono: normal : da 0% a 100%  reverse: da 100% a 0%; alternate: da 0% a 100% e da 100% a 0% in base a quante volte viene ripetuta l’animazione alternate-reverse : da 100% a 0% e da 0% a 100% in base a quante volte viene ripetuta l’animazione animation-iteration-count: (opzionale) specifica quante volte l’animazione deve essere ripetuta, i possibili valori sono: infinite : l’animazione viene ripetuta all’infinito numero : sarà il numero di volte in cui la nostra animazione verrà ripetuta. animation-fill-mode: (opzionale) indica lo stile da applicare prima che l’animazione parta e una volta terminata l’animazione; i possibili valori sono: forwards : una volta terminata l’elemento avrà lo stile dell’ultimo keyframe backwards : una volta terminata l’elemento avrà lo stile del primo keyframe both : quando l’animazione termina mantiene lo stile del kayframe nel quale è terminata animation-timing-function: identifica la curva di velocità dell’animazione. Con questa panoramica degli effetti di animazione i tuoi siti saranno unici! Allora, ti va di provare?

Se sei arrivato fino a qui leggendo le nostre guide sul linguaggio HTML, ricorderai senz’ altro che alcuni elementi di cui abbiamo parlato hanno comportamento bloccante: come già spiegato, questo vuol dire che i browser aggiungono automaticamente una riga vuota prima e dopo ogni elemento del genere, tale per cui l’effetto sortito è l' “andare a capo”.  Ci sono, però, anche elementi inline grazie ai quali puoi affiancare un elemento all’altro scavalcando il limite del comportamento bloccante. Agli elementi bloccanti - così li definiremo -  possiamo attribuire delle dimensioni custom. Occuperanno, quindi, tutto lo spazio di cui hanno bisogno in verticale e tutta la riga in orizzontale. Gli elementi inline, di contro, occuperanno solo lo spazio richiesto dal loro contenuto. Esiste, tuttavia, una proprietà CSS che permette di modificare questi comportamenti di default. Stiamo parlando della proprietà “display”. La proprietà display CSS La proprietà display ci permette di controllare la maniera in cui il nostro browser renderizza l’elemento in termini di spazio. È una proprietà che tutti gli elementi html hanno, e accetta i seguenti valori (che cercheremo di spiegare nella maniera più semplice possibile): block:  fa in modo che il nostro elemento occupi tutto lo spazio della pagina in orizzontale e perciò, come dicevamo parlando di alcuni elementi, fa “andare a capo”. Verticalmente, invece, l’elemento occuperà soltanto lo spazio dell’ elemento. Questo è il valore di default di diversi elementi html, quali ad esempio i tag <div> e i tag <p>, così come, anche, i vari tag <h>. Tips utili! Se imposti una width al tuo contenuto dando ai margin dell’asse x valore “auto”, otterrai che il contenuto venga perfettamente centrato. Questo succede  solo nel caso in cui il valore della proprietà “display” sia “block”. inline: è il valore di default di elementi come, ad esempio, <span>, <b>, <strong> o <em>. Quando il valore della proprietà “display” è “inline” l’elemento occuperà solo ed esclusivamente lo spazio del contenuto, sia verticalmente che orizzontalmente: anche provando ad impostare un valore di width o di height differenti, non cambierà nulla. L’ unica proprietà su cui accetta, invece, modifiche è il margin orizzontale. inline-block: permette all’elemento di occupare lo spazio che stabiliamo debba occupare, in base al contenuto, ai valori di width e a quelli di height che gli diamo. Sarà possibile, dunque, che due elementi si posizionino uno accanto all’altro. none: rende il contenuto invisibile e non gli fa occupare alcuno spazio. flex: il valore più importante della proprietà display nel CSS, grazie al quale l’elemento in questione potrà godere dei vantaggi del modello del FLEXBOX. Flexbox CSS: il display flex CSS Il flexbox, o flexible box, è un modello che permette di creare layout, anche complessi, in maniera pulita, rapida e responsive. Cosa vuol dire responsive? Ricordi quando abbiamo parlato della viewport? L’avevamo definita come la grandezza visibile della nostra pagina web, che cambia al cambiare del dispositivo di fruizione del sito. Un sito web, infatti, è navigabile da diversi dispositivi: da pc, da tablet e da cellulare. Quando consultiamo un sito web utilizzando un computer, parliamo di navigazione “da desktop”; se, invece, per farlo utilizziamo un cellulare, parleremo di navigazione “da mobile”. Capisci bene che, prendendo in analisi tutti questi dispositivi, la prima cosa che noteremo sarà che le dimensioni del loro schermo differiscono notevolmente l’una dall’altra. Questo implica, ovviamente, una diversa disposizione degli elementi del tuo sito web. Intuisci dove vogliamo andare a parare? Esatto! Dovrai creare dei layout diversi a seconda dello schermo del dispositivo da cui il tuo sito web verrà visitato. Al giorno d’oggi il maggior traffico sui siti web avviene da cellulare: prova a pensare anche alla tua esperienza personale e ti renderai conto di quanto spesso consulti un sito web usando il tuo telefono e di quante volte, invece, utilizzi il tuo computer. Questo avviene perché il cellulare è perennemente a portata di mano, anche quando siamo lontani da casa, e sicuramente ne usufruiamo in maniera maggiore. Ti abbiamo portato a rifletterci non a caso: è fondamentale, infatti, che quando progetti il layout del tuo sito web tu lo concepisca “mobile-first”. Questo vuol dire che il tuo sito deve essere, innanzitutto, impeccabilmente fruibile da mobile e, via via, adatterai la progettazione anche alle dimensioni degli schermi più grandi. Quando un sito è perfettamente fruibile da qualsiasi schermo, e, dunque, anche da mobile si definisce “responsive”, caratteristica imprescindibile di un sito web che si rispetti. È possibile riuscire a soddisfare questi criteri proprio grazie all’aiuto del flexbox. Vediamo come. Per utilizzare il flexbox devi creare nel tuo foglio CSS una classe .flex-container e darle, appunto, la proprietà “display: flex”. Immagina di avere, nell’ html, un <div> al quale assegni proprio la classe .flex-container appena creata: da questo momento, tutti gli elementi figli di questa classe diventeranno a loro volta flessibili e potranno sfruttare le potenzialità del flexbox. Il flexbox, dunque, crea una sorta di contenitore in cui, automaticamente, gli elementi saranno disposti l’uno accanto all’altro, e saranno compressi se sono tanti. Ci sono, però, delle proprietà che ci permettono di disporre questi elementi nel modo che più ci piace: flex-wrap: accetta come valori “wrap” e “nowrap”. “wrap” ci consente di non far comprimere gli elementi nel flexbox e di andare a capo una volta esaurito lo spazio utile; “nowrap” è il valore di default, che, invece, comprime gli elementi se non c’è lo spazio necessario. Quando gli elementi sono davvero troppi, e non entrano neppure comprimendosi, il flexbox viene rotto e gli elementi straborderanno dalla pagina, dando vita ad un effetto di scroll orizzontale. flex-direction: ci permette di definire la direzione con la quale ordinare gli elementi. Accetta 4 valori: row: “riga”, è quello di default); dispone gli elementi da sinistra a destra in orizzontale, in ordine crescente dal primo figlio all’ultimo row-reverse: come il precedente, dispone gli elementi sempre in orizzontale ma, questa volta, da destra a sinistra column: dispone gli elementi in verticale, dall’ alto verso il basso, in ordine crescente, dal primo figlio all’ ultimo column-reverse: dispone gli elementi in verticale, ma dal basso verso l’alto Justify-content: allinea gli elementi in orizzontale all’ interno del flex-container in modi diversi a seconda del valore dato. I valori che accetta sono: center: per allineare l’elemento al centro flex-start: il valore di default, giustifica gli elementi a sinistra flex-end: giustifica gli elementi a destra space-between: dispone il primo elemento all'estrema sinistra e l’ultimo all'estrema destra (sui bordi) e poi li spazia tra di loro in maniera uguale space-around: dispone gli elementi dando loro lo stesso spazio a sinistra e a destra (anche ai due elementi estremi che,quindi, non si troveranno sui bordi); questo spazio tra un elemento e l’altro non si sovrappone, ma si somma space-evenly: dispone gli elementi spaziati tra di loro in maniera uguale Align-items: allinea gli elementi in verticale all’interno del flex-container a seconda del valore dato; accetta i seguenti valori: center: allinea gli elementi al centro verticalmente all'interno del mio flex-container. Puoi decidere di dare a quest’ ultimo una “height: 100vh”, così da centrare gli elementi perfettamente al centro della pagina (perchè il flex-container sarà diventato esso stesso grande quanto la pagina; infatti, il flex-container si estende orizzontalmente e verticalmente solo per la grandezza del suo contenuto) flex-start: il valore di default, allinea gli elementi in alto flex-end: ovviamente, allineerà gli elementi in basso nb. quando utilizziamo flex-direction: column al posto di flex-direction: row le proprietà align-items e justify-content si invertono: align-items gestirà lo spazio in orizzontale e justify content quello in verticale.

Parlandoti del flexbox ti abbiamo illustrato un concetto fondamentale nella progettazione di un sito web; prima ancora di iniziare a scrivere codice per creare un sito web, infatti, devi curarne la progettazione con minuzia. Per questo abbiamo introdotto, nella scorsa guida, il concetto di progettazione “mobile-first”. Non te lo ricordi? Tranquillo, lo rispolveriamo velocemente. Progettare un sito web seguendo i precetti del “mobile-first” significa che la prima cosa da concepire quando strutturi il layout del tuo sito è che questo venga visualizzato dallo schermo di un cellulare. Questo perché, ribadiamo nuovamente, il maggior traffico su di un sito web avviene, ad oggi, da telefono, quindi “da mobile”. Progetterai, quindi, il tuo layout in primo luogo fruibile da uno schermo più piccolo, e via,via, da schermi di altri dispositivi più grandi, fino a giungere alla visualizzazione da desktop, ovvero da pc. A questo punto potresti sentirti un pò disorientato: staremo, forse, dicendo che devi scrivere fogli di codice diversi per le diverse dimensioni degli schermi dei dispositivi dai quali si accede al tuo sito web? È follia! Non scoraggiarti. Esiste un modo più smart per adattare il tuo layout e il tuo codice alle diverse dimensioni di cui sopra. Stiamo parlando delle MEDIA QUERIES. Che cos è una media query? Una media query è una parte di codice composta dalla dichiarazione di una tipologia di media, appunto, con la sua dimensione in pixel specificata e di espressioni - a seguire - che accertino la validità delle caratteristiche di quel media. Difficile? Non dirlo neppure! Osserviamone la sintassi cosicché eventuali dubbi svaniscano. Media query: la sintassi. Supponiamo di aver creato il nostro bel layout da mobile. Per semplificare il concetto all’estremo la caratteristica che prenderemo in analisi sarà il colore di sfondo del nostro sito. Quindi, da cellulare abbiamo uno sfondo blu. Per gli altri dispositivi, però, per assurdo, siamo ossessionati dall’idea di modificare il colore di questo sfondo e renderlo verde. Ragioniamo un attimo.  Possiamo considerare “mobile” i dispositivi fino ad un’ampiezza (una width, quindi) di 576px. Noi vogliamo agire sugli schermi dei dispositivi più grandi di quella larghezza. Quindi, riprendendo la definizione di cui sopra, il media sul quale agiremo sarà lo schermo del dispositivo. Dovremo, quindi, indicare il tipo di media e le sue dimensioni per far capire al browser come agire.  Ne consegue, che la sintassi sarà la seguente. Regola principale - da mobile : .background-color { background-color: blue; } Media query per cambiare il colore di sfondo: @media screen and (min-width:576px) { .background-color { background-color: green; } } Come vedi, abbiamo la dichiarazione della media query, con specificato il tipo di media e l’ampiezza minima (o massima, a seconda di ciò su cui vogliamo agire) seguita dal selettore che ci occorre (qui la classe .background color) a cui modificare gli attributi css desiderati (in questo caso, il colore di sfondo) Più semplice a farsi che a dirsi, vero? Le media queries vanno introdotte nel nostro foglio di codice o inserendole alla fine del foglio CSS, per ultime, oppure su un foglio CSS a parte che andremo poi a linkare nell’head del nostro documento html. Ricorda di inserirle secondo un ordine ben preciso, poiché proprio per il principio dello stile a cascata di cui sopra, un ordine scorretto potrebbe far si che una si sovrascriva ad un’altra, non facendo funzionare le istruzioni che desideri. Con questo strumento, dunque, potrai modificare il tuo codice in maniera facile e veloce, rendendolo differente da qualsiasi dispositivo tu voglia. Ne cogli la potenza? Termina qui la nostra guida all'apprendimento di html e css, ma non ti lasciamo solo: potrai esercitarti con i nostri esercizi css!