condividendo si impara
Cambiare stile uno alla volta? Lento e noioso ... perché non farlo in blocco?
Un iperbenvenuto o iperbentornato a tutte e tutti voi!
Nel contenuto di oggi vi propongo di usare ancora la piattaforma FreeCodeCamp per sperimentare un nuovo modo di cambiare l'aspetto degli elementi che abbiamo inserito nel nostro sito.
Il metodo che avevamo visto la volta scorsa ci permetteva di andare a modificare le proprietà di un singolo elemento.
Tuttavia, nel caso in cui vogliamo, ad esempio, che tutti i titoli di secondo livello della nostra pagina siano rossi, sarebbe molto laborioso e estremamente poco efficiente dover andare a modificare il colore di ogni titolo singolarmente.
Oggi vedremo come selezionare tutti gli elementi di un certo tipo della nostra pagina e cambiarne i connotati in blocco all'interno di un'apposita sezione chiamata style.
Vi ricordo che cliccando su vedi tutto potrete accadere non solo al video ma anche a un articolo correlato.
L'articolo non è una trascrizione del video ma un vero e proprio contenuto aggiuntivo che completa e esplora il tema dalla prospettiva e nella maniera più adatta a un contenuto testuale.
Detto questo vi auguro una buona visione e lettura e vi invito a far conoscere questo canale alle persone potenzialmente interessate ad esplorare con noi come funzionano i siti Internet "sotto il cofano" e a imparare a crearne da zero.
Ringrazio tutte le persone che hanno sostenuto i contenuti precedenti di questo canale utilizzando l'opzione sostieni di cam.tv e tutti coloro che vorranno aderire all'area riservata che ho chiamato Iperteam.
In quest'aera potrete avere accesso a contenuti aggiuntivi, dietro le quinte e iniziative destinate ai sostenitori periodici del canale.
Grazie per permettere e sostenere la continuazione di questo progetto!
Condividendo si impara! :-)
Di che colore vogliamo i titoli? Basta dirlo una volta sola!
Nello scorso articolo avevamo imparato insieme come possiamo modificare le proprietà di un elemento che abbiamo inserito nel nostro sito aggiungendovi un attributo chiamato style che contiene la proprietà che intendiamo modificare e il valore che questa proprietà deve assumere.
Avevamo visto l'esempio di come cambiare il colore a un titolo di secondo livello in questo modo:
<h2 style="color: red;">Titolo rosso</h2>
Come possiamo vedere questo metodo mi permette di cambiare il colore di un solo titolo poiché lo faccio inserendo un attributo all'interno del singolo elemento.
Se volessi fare in modo che tutti i titoli della mia pagina abbiano lo stesso colore, ad esempio nel caso in cui l'attività che voglio promuovere col sito abbia il rosso come colore dominante della sua marca, ecco che dovrei ricordarmi di inserire l'attributo e i valori corrispondenti ogni volta che inserisco un titolo e anche quando voglio modificare la pagina e aggiornare i contenuti.
Un lavoro lungo, noioso, poco efficiente e con un elevato rischio di errori e di sviste.
Ma per fortuna esiste un modo di modificare in blocco gli elementi di una pagina.
Il blocco di stile per gestire in maniera globale l'aspetto di una pagina
Per poter dare lo stesso colore a tutti i miei titoli dichiarando una volta sola che li voglio tutti rossi devo innanzitutto poter creare una sezione che contenga tutti gli stili da applicare globalmente alla pagina: faccio questo inserendo un elemento chiamato style, all'inizio del documento, in questo modo:
<style>
<!-- sezione dove vengono definiti gli stili globali della pagina -->
</style>
Da notare che, contrariamente all'approccio singolo mostrato sopra, qui style non è l'attributo di un elemento del sito ma è esso stesso un elemento della pagina a pieno titolo.
Una volta creata questa sezione devo inserirvi le istruzioni necessarie per selezionare tutti gli elementi che voglio cambiare in blocco da un lato, in questo caso i titoli di secondo livello, e le proprietà che intendo modificare dall'altro, in questo caso il colore.
Come selezionare tutti gli elementi di un determinato tipo all'interno della sezione style.
Per fare questo ci sono i selettori: dei nomi che identificano un tipo di elemento e permettono di selezionarne tutte le singole occorrenze nella pagina.
Per conoscere il selettore di un elemento di base della mia pagina basta che prenda l'elemento in questione e gli tolga le parentesi apicali (<>) che ne incorniciano il nome.
Facciamo un esempio:
Quello che segue è l'elemento titolo di secondo livello, cioè quello che vogliamo modificare. È indicato dalla sigla h2 rinchiusa all'interno di parentesi apicali.
<h2> elemento titolo di secondo livello </h2>
Ritroviamo la sigla h2 preceduta da una barra obliqua (/) per indicare la fine dell'elemento titolo e fra i due troviamo il contenuto: cioè quello che verrà visualizzato da browser con il formato titolo.
Per trovare il selettore di tutti i titoli di secondo livello della pagina basta che tolga le parentesi apicali dal tag dell'elemento e mantenga solo la sigla:
h2
è il selettore di tutti i titoli di secondo livello della pagina a cui possiamo applicare degli stili in blocco e quindi, a questo punto abbiamo creato la sezione style e selezionato tutti i titoli della pagina in questo modo:
<style>
h2
</style>
Non ci resta ora che indicare come vogliamo modificare tutti gli elementi h2 della pagina che abbiamo appena selezionato.
Impostare le proprietà degli elementi selezionati in blocco.
Le modifiche degli elementi selezionati nel blocco di stile vanno indicate fra parentesi graffe ma a parte questo hanno la stessa struttura che abbiamo già incontrato quando abbiamo trattato la modifica di un singolo elemento.
Si inizia indicando la proprietà che intendiamo cambiare e, separato da due punti, il valore che vogliamo assegnare a quella proprietà. Segue il punto e virgola che indica la fine della modifica della proprietà in questione.
Per far diventare rossi tutti i titoli dovremo quindi selezionarli in blocco all'interno della sezione style e attribuire loro, tra parentesi graffe, il colore rosso in questo modo:
<style>
h2 {
color: red;
}
</style>
Da notare che possiamo scrivere tutto su una sola linea o andare a capo per assicurarci più leggibilità. Tanto non cambia nulla e il sito continua funzionare comunque.
Ogni elemento ha più proprietà e ogni proprietà accetta più valori
Oggi abbiamo visto come possiamo cambiare le proprietà degli elementi che inseriamo nei nostri siti selezionandoli in blocco all'inizio della nostra pagina. Abbiamo utilizzato il semplice esempio del cambiamento del colore di un titolo.
Tuttavia il colore non è l'unica proprietà di un elemento. Nel nostro percorso ne incontreremo molte altre che potremo modificare (carattere, larghezza, sfondo, altezza, posizione, ...).
Il nostro viaggio alla scoperta di come funzionano i siti web sotto il cofano e di come possiamo imparare a crearli da zero proseguirà proprio in questa direzione nelle prossimesettimane: condividendo di impara!
Come contribuire allo sviluppo del nostro gruppo di studio
Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.
V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.
Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove.
Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!
Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!
E non dimentichiamoci che condividendo si impara!!
Linkoteca
Sito di FreeCodeCamp (il nostro quaderno degli esercizi)
Lo scopo e la filosofia di Iper
Come si colloca ciò che impariamo nel più vasto mondo del web
Il browser va all'asilo. Che cos'è un linguaggio di markup
Il browser va a teatro: la struttura di base di una pagina web
Qualche strumento per trasformare il canale in un gruppo di studio interattivo
Esercizi pratici: le basi dell'HTML
HTML 5 e la struttura logica delle pagine web
HTML: impariamo ad aggiungere un'immagine a una pagina web
Facciamo insieme qualche esercizio su FreeCodeCamp (attenzione! spoiler soluzioni!)
Come funzionano i link: le ancore che ci collegano al web
HTML: come inserire delle liste nelle nostre pagine web
Quaderno degli esercizi HTML: link liste e inserimento dati
HTML: i tipi di visualizzazione predefiniti degli elementi
HTML: esercizi pratici con soluzioni (spoiler alert!!!)
Il protocollo HTTP: il browser va all'osteria
Input: un elemento fondamentale dei formulari web
Formulario web: costruiamo alcuni campi di input utente
Web form: terminiamo la carrellata degli elementi principali
Trattiamo con rispetto i dati dei nostri utenti
Mettiamo in partica i formulari
Tls: ricevere dati dai nostri utenti in maniera sicura
Crittografia: la scrittura nascosta (parte 1)
Crittografia parte 2: la firma digitale
Trasmissioni sicure e veloci abbinando i metodi di cifratura
Al riparo da siti ingannevoli grazie ai certificati digitali
Rubare i dato oggi per decifrarli in futuro: la minaccia quantistica
Siti web consultabili da tutti. Qualche strumento per testare e migliorare l'accessibilità
Div: il contenitore multiuso del web
Coloriamo gli elementi del nostro sito con stile (anzi ... con style)