Coloriamo gli elementi del nostro sito con stile (anzi, con style)

2022-05-01 18:19:14

Nel nostro viaggio fino ad ora abbiamo esplorato un po' come possiamo inserire diversi elementi e contenuti nei nostri siti web utilizzando il linguaggio HTML.
Questo ci permette di ottenere già dei siti funzionanti che però sono parecchio carenti dal punto di vista grafico.
Gli elementi vengono posizionati in maniera standard, hanno tutti delle proprietà predefinite e non abbiamo ancora appreso come modificare il loro aspetto, cambiare i caratteri, inserire degli sfondi, cambiare il colore degli elementi e tante altre cose che permettono al nostro sito non solo di essere funzionante ma anche piacevole da navigare, più leggibile, accessibile e, perché no?, anche più bello da vedere.
Oggi entriamo nel fantastico mondo dello stile e cominceremo col modificare il colore di uno degli elementi che abbiamo inserito nel nostro sito.
L'articolo che trovate qui di seguito completa e presenta in un altro modo il contenuto del video. Non si tratta quindi di una semplice trascrizione ma di un vero e proprio contenuto aggiuntivo che potete consultare cliccando sul pulsante "vedi tutto" qui sotto.
Vi auguro buona visione e lettura e vi invito a far conoscere questo canale se sapete di qualcuno interessato ad approfondire questi temi con noi :-)
Condividendo si impara! :-)
PS:
Ringrazio anche tutte le persone che sostengono questo canale utilizzando la funzione messa a disposizione da cam.tv!
Per chi vuole è possibile dare un regolare sostegno mensile aderendo all'area riservata (l'iper team) in cui potete trovare riflessioni, dietro le quinte e contenuti pensati specificamente per i sostenitori regolari.

Dal contenuto allo stile

Come abbiamo visto fino ad ora utilizzando il linguaggio HTML possiamo creare delle pagine web funzionanti e inserire elementi e contenuti che le rendono già consultabili da parte degli utenti dei nostri siti.

Tuttavia, per avere un sito moderno, ben leggibile e gradevole da navigare potremmo avere bisogno di qualcosa in più, in particolare sotto due aspetti principali.

Primo: Modificare le proprietà stilistiche degli elementi della pagina

In primo luogo potremmo avere bisogno di modificare il modo in cui vengono presentati i singoli elementi delle nostre pagine.

Per esempio potremmo voler cambiare il colore di un testo per attirare l'attenzione su quel contenuto specifico, o cambiare il colore di sfondo di una sezione del sito, modificare la forma di un bottone, il carattere in cui sono scritti alcuni testi e via dicendo.

Tutto questo non per caricare inutilmente la nostra pagina di decorazioni barocche ma per far passare meglio il nostro messaggio e rendere più gradevole la fruizione del contenuto.

Secondo: Modificare e controllare il posizionamento degli elementi nella pagina.

Gli elementi che inseriamo nella nostra pagina HTML si posizionano in maniera predefinita in funzione del loro tipo.

Se sono elementi inline si posizionano uno accanto all'altro nella stessa linea nel caso in cui ci sia spazio, mentre se sono elementi di tipo block occupano l'intera larghezza della pagina e costringono tutti gli elementi che li precedono a occupare la linea superiore e quelli che li seguono quella inferiore.

Noi però potremmo volere controllare di più la posizione di questi elementi creando ad esempio una barra di navigazione superiore, una barra secondaria laterale, elementi disposti su due o più colonne, delle sezioni organizzate in maniera particolare per le nostre call to action e via dicendo.

Dare uno stile ai nostri contenuti

Ed è per questo che da oggi inizieremo ad esplorare i vari modi in cui possiamo modificare il modo in cui si presentano i contenuti della nostra pagina e dare loro quindi uno stile particolare: quello che più ci aggrada e ci è utile per far passare il nostro messaggio in maniera efficace ed accessibile.

Modificare un singolo elemento della pagina con l'attributo style

Nell'articolo di oggi ci concentriamo sulla modifica di un unico elemento della nostra pagina aggiungendo un attributo direttamente nel codice HTML.

Questo metodo può essere utile per modifiche uniche che non si ripeteranno da nessun'altra parte del nostro sito e sono legate solo all'elemento che andiamo a manipolare.

In altri casi sono molto più pratici e appropriati dei metodi differenti che incontreremo più in là.

Per modificare un elemento direttamente dal codice HTML dobbiamo come prima cosa aggiungere un attributo chiamato style all'elemento stesso, seguendo le regole che già conosciamo per l'aggiunta di attributi agli elementi del nostro sito, vale a dire scrivere il nome dell'attributo seguito dall'uguale e i valori che questo attributo può assumere fra doppie virgolette in questo modo:

<h2 style=" valori dell'attributo style "> titolo da modificare </h2>

La coppia magica proprietà : valore

All'interno dell'attributo dobbiamo poi inserire una coppia di dichiarazioni fondamentale.

La prima designa la proprietà che intendiamo cambiare all'elemento e la seconda il valore che quella proprietà deve assumere.

In questo caso immaginiamo di voler cambiare la proprietà colore del nostro titolo di secondo livello e di darle un valore di rosso.

La proprietà colore sarà scritta per prima, seguita da due punti dopo i quali scriveremo il valore rosso e termineremo questa dichiarazione con un punto e virgola, in questo modo:

<h2 style="color: red;"> titolo da modificare </h2>

Ed ecco che in questo modo avremo avremo trasformato il nostro titolo da nero, il colore standard previsto da HTML, in rosso, il colore cha abbiamo scelto noi.

Funzionamento fondamentale molto semplice

Questi sono i principi fondamentali molto semplici, su cui poi costruiremo il resto delle nostre considerazioni su come modificare le nostre pagine:

dobbiamo in qualche modo selezionare un elemento da modificare (nell'esempio di oggi lo abbiamo fatto aggiungendo un attributo style all'elemento stesso direttamente nella pagina html)
dobbiamo selezionare una proprietà di quell'elemento (nell'esempio di oggi il colore ma scopriremo che ce ne sono tantissime altre)
dobbiamo attribuire un valore a quella proprietà (ogni proprietà ha differenti valori possibili che le sono specifici: i valori della proprietà colore non sono di certo gli stessi di quelli della proprietà larghezza ad esempio).

I prossimi passi

Nei prossimi contenuti impareremo a declinare questi principi in diverse maniere per poter trasformare le nostre pagine in maniera che siano belle, accessibili, gradevoli da navigare ed efficaci nel trasmettere il nostro messaggio.

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!!