Obiettivo: Utilizzare il linguaggio CSS per personalizzare la struttura di un sito WEB.

CSS

Il CSS (Cascading Style Sheets) è uno strumento fondamentale per la personalizzazione dei siti web, poiché consente di separare la struttura HTML dal design, permettendo agli sviluppatori di controllare l’aspetto e il layout delle pagine in modo flessibile ed efficiente. Grazie al CSS, è possibile modificare facilmente colori, font, margini, spaziature e posizionamento degli elementi, migliorando l’esperienza utente e l’accessibilità. Inoltre, il CSS facilita l’adattamento dei siti a diversi dispositivi e risoluzioni, supportando il responsive design, che è essenziale per garantire una visualizzazione ottimale su smartphone, tablet e desktop. In sostanza, il CSS permette di creare interfacce visivamente accattivanti e funzionali, senza modificare il contenuto di base del sito.
Esistono differenti modi per inserire il codice CSS in una pagina HTML. Il più semplice è quello di utilizzare l’attributo style. Ad esempio il seguente codice imposta il codice colore FF5733 (arancione acceso tendente al rosso) al seguente titolo:

<h1 style=”color: #FF5733;”>Questo è un titolo arancione</h1>

La codifica esadecimale per rappresentare i colori è un sistema che utilizza sei caratteri, divisi in tre coppie, per indicare l’intensità dei tre colori primari della luce: rosso, verde e blu (RGB). Ogni coppia di caratteri esadecimali rappresenta un valore numerico che va da 00 a FF, dove 00 indica l’assenza di colore e FF indica il massimo livello di intensità (255 in base decimale). Ad esempio, nel codice esadecimale #FF5733, la prima coppia (FF) rappresenta la quantità di rosso (255), la seconda coppia (57) indica il verde (87 in decimale) e la terza coppia (33) rappresenta il blu (51 in decimale). La combinazione di questi valori produce un colore specifico. Questo sistema permette di creare una vasta gamma di colori, con più di 16 milioni di possibili combinazioni, dando grande flessibilità nella definizione delle tonalità per il web e altri ambienti grafici.

Vengono in seguito analizzati alcuni esempi di css utili per customizzare le pagine in modo appropriato. Tali esempi riportano alcune delle principali proprietà più comune utilizzate.

1. Cambiare il colore del testo

La proprietà che indica il colore del testo è color. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare il suo colore.
Ad esempio:

<p style=”color: #FF0000;”>Questo è un paragrafo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore.

2. Cambiare il colore del background:

La proprietà che indica il colore del testo è background-color. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare il suo colore di sfondo.
Ad esempio:

<p style=”background-color: #FF0000;”>Questo è un paragrafo con sfondo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore di sfondo.

3. Cambiare il font-size:

La proprietà che indica la dimensione del testo è font-size. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare la dimensione del testo.
Ad esempio:

<p style=”font-size: 18px;”>Questo è un paragrafo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del font-size.

4. Introdurre un margine in un testo (rientro a destra):

La proprietà margin viene utilizzata per gestire lo spazio esterno intorno a un elemento, separandolo dagli altri elementi nella pagina. Può essere applicata in modo uniforme a tutti i lati con la sintassi margin: valore;, oppure specificata individualmente per ogni lato con margin-top, margin-right, margin-bottom, e margin-left. I margini possono essere espressi in diverse unità, come pixel (px) o percentuali (%). L’uso corretto dei margini è essenziale per garantire una buona spaziatura e una disposizione pulita del layout.

<p style=”margin-left: 20px;”>Questo è un paragrafo con rientro a destra</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene introdotto un margine sinistro.

5. Immagine al centro:

Per centrare una immagine si utilizzano una serie di proprietà: block e margine. Nello specifico:

• display: block; per fare in modo che l’immagine si comporti come un elemento a blocco, consentendo di applicare margini orizzontali.
• margin-left: auto; margin-right: auto; per centrare l’immagine orizzontalmente all’interno del contenitore.

<img src=”immagine.jpg” style=”display: block; margin-left: auto; margin-right: auto;”/> 

Viene in seguito riportato un esempio di pagina HTML in cui viene inserita una immagine a centro pagina.

Obiettivo: Utilizzare i link per: realizzare collegamenti tra pagine HTML o navigare più facilmente attraverso le sezioni delle stessa pagina.

Link

I link in HTML sono uno strumento fondamentale per la navigazione e possono essere suddivisi in due principali categorie: link interni alla stessa pagina e link verso altre pagine. I link interni, noti anche come “anchor links”, permettono di spostarsi rapidamente tra le sezioni di una singola pagina. Sono utili in pagine lunghe o con contenuti strutturati in capitoli, poiché consentono all’utente di accedere direttamente a una specifica parte della pagina tramite un identificatore (ID) associato a un elemento. D’altra parte, i link verso pagine esterne si dividono in due tipi: link interni e link esterni. I link interni rimandano ad altre pagine o risorse all’interno dello stesso sito web, mantenendo gli utenti all’interno del dominio. I link esterni, invece, puntano a pagine esterne al sito, spesso utilizzati per citare fonti o fornire informazioni aggiuntive, ma possono condurre l’utente lontano dal sito originale. Entrambi i tipi di link migliorano l’esperienza di navigazione, collegando contenuti e facilitando l’accesso alle informazioni.

1. Anchor link (Link interni alla stessa pagina)

Il tag utilizzato per creare i link in HTML è l’elemento <a>, che sta per “anchor”. Questo tag contiene l’attributo href(hyperlink reference), che (in questo caso) specifica l’identificativo della sezione alla quale il link punta.
L’identificativo (ID) è un attributo che definisce in modo univoco un elemento all’interno di una pagina HTML. Ogni ID deve essere unico per tutta la pagina, il che significa che non puoi avere più di un elemento con lo stesso ID.
Ad esempio:

<h2 id=”sezione1″>Sezione 1</h2> 
<p id=”paragrafo1″>Questo è un paragrafo con ID “paragrafo1”.</p>

Il codice

Viene in seguito riportato il codice di una serie di anchor links che puntano a differenti sezioni all’interno della stessa pagina.

2. Link verso altre pagine (esterne)

Anche in questo caso, il tag utilizzato per creare i link è l’elemento <a>. A differenza dal caso precedente l’attributo href(hyperlink reference) deve contenere l’indirizzo della pagina alla quale si vuole effettuare il collegamento.
Ad esempio:

<a href=”https://www.google.com”>Visita Google</a>

Il codice

Viene in seguito riportato il codice di una serie di anchor links che puntano a differenti sezioni all’interno della stessa pagina.

3. Link verso altre pagine (interne)

Anche in questo caso, il tag utilizzato per creare i link è l’elemento <a>. A differenza dal caso precedente l’attributo href(hyperlink reference) deve contenere l’indirizzo relativo (può essere espresso anche il percorso assoluto ma non verrà analizzato in questa guida) della pagina alla quale si vuole effettuare il collegamento.
Un percorso relativo collega a una pagina all’interno dello stesso sito senza specificare il dominio completo. Si basa sulla posizione attuale della pagina nel sito.
Ad esempio:

<a href=”pagina2.html”>Vai a Pagina 2</a>
<a href=”cartella/pagina3.html”>Vai a Pagina 3</a>
<a href=”../pagina4.html”>Vai a Pagina 4</a>

Il percorso relativo dipende dalla posizione della pagina che si vuole linkare in relazione alla pagina corrente.
Nel primo caso le due pagine si trovano nello stessa cartella. Nel secondo caso in una sotto-cartella. Nel terzo caso in una cartella superiore.