Guida H.T.M.L. e C.S.S.

Grafica, immagini e colori

X/HTML permette di inserire le immagini con il tag <img/> L'immagine deve essere un file a parte! Ed è buona norma creare una cartella apposita contenente tutte le immagini di un sito. I browser supportano formati immagini come;

• .gif
• .jpeg
• .bitmap
• .png

Il tag img ha come attributo obbligatorio src:

<img src="pathname dell'immagine" />

Il pathname è il percorso che indica in quale cartella si trova l'immagine da inserire.

torna

Tipi di pathname

Abbiamo due tipi di pathname:

• assoluti
• relativi

Percorsi assoluti

Si usano quando si fa riferimento a risorse di siti esterni.
Per creare un collegamento assoluto ad una risorsa situata in un sito esterno è sufficiente fare riferimento all'URL nella barra degli indirizzi.

<img src="https://www.spazioprever.it/ima/jet.gif" />

Per accedere a risorse situate sul computer su cui state lavorando 'in locale' è necessario specificare il percorso a partire dalla radice del file system.

<img src="C:\spazioprever\ima\jet.gif" />

Percorsi relativi

Fanno riferimento a risorse locali. Indicano come raggiungere la risorsa a partire dalla cartella corrente. Se il file si trova nella stessa cartella, si indica solo il nome del file

<img src="jet.gif" />

Questo esempio indica che l'immagine si trova nella stessa cartella del file in cui sarà inserita

Se il file si trova in una cartella diversa si deve indicare cartella/nome file

<imgsrc="ima/jet.gif" />

Questo esempio indica che l'immagine si trova in una cartella diversa (il cui nome è ima)del file in cui sarà inserita

Gli spazi vuoti nei nomi dei file si indicano con %20.

<img src="ima/viaggio%20lontano.jpg" />

È meglio salvare i file senza spazi, senza articoli e/o preposizioni

usare un trattino, ma non quello basso, poiché i motori di ricerca vedono le parole unite da under score come fossero una parola sola (es: mondi_paralleli.html un motore di ricerca lo vede come "mondiparalleli.html" tutto a svantaggio della SEO ).

<img src="ima/viaggio_lontano.jpg" />

torna

Attributi del tag img

Alt

(testo alternativo): viene visualizzato quando il browser non visualizza le immagini; è utile per garantire l'accessibilità ed è un attributo obbligatorio.

Title

descrizione testuale o titolo. Viene visualizzato al passaggio del mouse sull'immagine

<img src="ima/viaggio-lontano.jpg" alt="foto della Madonna" title="La foto della Madonna: sembra preoccupata!!! Gesù è uscito" />

Proprietà  CSS per le immagini

Per dare un bordo all'immagine si usa la proprietà  css border-style.

I valori possono essere: solid, dotted, dashed, double, groove, ridge, inset, outset.

Un'immagine si può formattare anche utilizzando le proprietà  di padding e margin

 div#ima{
	 border:3px solid #000080;
         margin:.5em 1em;
	 padding:10px 20px 5px;
	 }

torna

Dimensioni delle immagini

Sebbene in x/html, con gli atributi width e height, e css con le proprietà width e height, si possano indicare le dimensioni in larghezza e altezza con cui si devono visualizzare le immagini, è buona pratica ridimensionare le immagini alle dimensioni adatte, utilizzando un programma di grafica, prima che queste siano caricate sul server.

Questo è necessario perchè se si crea un'immagine di 2500 x 1500px con un peso di 3,5 mega, è questa la dimensione che il browser elabora e l'utente scarica nella memoria cache del proprio computer.

Se poi con html l'immagine è ridimensionata e visualizzata a 200 x 200px, non interessa, poichè le dimensioni dell'immagine elaborata e scaricata è sempre quella originale di 2500 x 1500px, con gli ovvi rallentamenti e costi di banda.
Per questo è meglio ridimensionare le immagini a dimensioni vicine a quelle necessarie.

Le dimensioni width e height, si possono specificare sia nell'HTML, come attributi del tag img,

<img src="ima/albero_piegato.jpg" alt="immagine del vento" width="200" height="350" />

sia tramite css con le proprietà:

width e height

div#ima{
    border:3px solid #000080;
	margin:.5em 1em;
	padding:10px 20px 5px;
	width:200px;
	height:350px;
    }

Le immagini possono anche essere ridimensionate in em e in percentuale.
Nel caso si usino dimensioni in percentuale, le immagini si ridimensionano con il ridimensionarsi della pagina. Le percentali, si riferiscono alle dimensioni del box contenitore. Per inserire un'immagine in percentuale è bene inserirla in un un suo box che le faccia da contenitore:

img#larga{
 width:50%;	/* è il 50% del suo box contenitore*/
}
   

L'immagine è inserita come al solito attraverso il tag img, e si ridimensiona con il ridimensionarsi della pagina.

 <img id="larga" src="ima/nome.jpg" alt="" />
 	

Se le immagini nella stessa pagina sono numerose, si ricorre al selettore di classe anzichè al selettore id; in questo modo si possono creare diversi box di dmensioni diverse.

torna

Immagini di sfondo

Attraverso CSS non è solo possibile applicare un colore uniforme per lo sfondo di un elemento, come descritto con il seguente codice:

body{ background:#CCC; }

ma è possibile assegnare allo sfondo degli elementi anche delle immagini.

Questo è possibile utilizzando la proprietà  background-image

Il valore predefinito è none vale a dire nessuna immagine. Se si vuole assegnare un'immagine è necessario crearne una, salvarla in una cartella e definire un percorso tramite CSS

body{ background-image:url(ima/sfondo.png); }

L'immagine di sfondo può essere assegnata a qualsiasi elemento di blocco o inline. Per applicare un'immagine di sfondo ad un elemento inline, questa dovrà  essere di piccole dimensioni circa 20/30px.

Le immagini di sfondo, come i colori dello sfondo, non sono ereditate; le immagini sono disposte sopra il colore di sfondo definito e si ripetono fino a coprire tutto lo sfondo del documento senza far intravedere il colore.

Nel caso l'immagine non fosse caricata, l'interprete utilizza il colore di sfondo specificato, come sfondo dell'elemento. Per questo, quando si definisce un'immagine di sfondo, è consigliabile definire un colore di sfondo per consentire al testo di essere leggibile a prescindere dai colori impostati sul computer dell'utente.

  body{ background:#FFF; /*colore di sfondo*/ 
  background-image:url(ima/sfondo.png); /*immagine di sfondo*/
  color:#800; /*colore del testo*/
  }

torna

Ripetizione dell'immagine di sfondo

L'immagine di sfondo può essere ripetuta per coprire tutta l'area di sfondo dell'elemento, oppure può non essere ripetuta ed apparire una volta sola e posizionata in un qualsiasi punto dell'elemento; oppure può essere ripetuta solo in orizzontale, o solo in verticale.

Valori possibili:

• repeat (default): ripete l'immagine sia in orizzontale che in verticale all'infinito.
• repeat-x: ripete l'immagine solo in orizzontale.
• repeat-y: ripete l'immagine solo in verticale.
• no-repeat: non ripetuta, mostra l'immagine una volta sola.

L'immagine che deve essere ripetuta è posizionata per impostazione predefinita, a partire dall'angolo superiore sinistro dell'elemento, e da lì si ripete per coprire l'intero sfondo dell'elemento.
Ogno sfondo con un'immagine che viene ripetuta, inizia la ripetizione di questa, con una singola immagine da cui inizia la ripetizione. Questa prima immagine è definita "immagine d'origine".

La proprietà  background-repeat specifica se e in che modo un'immagine di sfondo deve essere ripetuta.

#news{ background-repeat: repeat-x; }

Questo esempio consente solo la ripetizione orizzontale dell'immagine di sfondo

#news{ background-repeat: repeat-y; }

Questo esempio consente solo la ripetizione verticale dell'immagine di sfondo

#news{ background-repeat: no-repeat; }

Questo esempio non consente la ripetizione dell'immagine di sfondo. L'immagine appare una volta sola posizionata per impostazione predefinita nell'angolo superiore sinistro dell'elemento. Questa posizione può essere variata con la proprietà background-position

torna

Posizione delle immagini di sfondo

La proprietà  background-position definisce la posizione dell'immagine d'origine rispetto al limite del padding dell'elemento.

Possibili valori

top left	top	top right
left	center	right
bottom left	bottom	bottom right

Le parole chiave di solito sono espresse in coppia; se è definita una sola parola chiave, si ritiene che l'altra sia center.

  body{ background:#FFF; /*colore di sfondo*/ 
  background-image:url(ima/sfondo.png); /*immagine di sfondo*/
  background-repeat:no-repeat; /*non ripete l'immagine*/
  background-position:top; /*posizione in alto e al centro*/
  color:#800; /*colore del testo*/
  }

Questo esempio posiziona l'immagine al centro, sul lato superiore e non la ripete.

Il posizionamento può essere ancora espresso in em, px, e percentuali. Le parole chiave left, center e right per la posizione orizzontale e top, center e bottom per la posizione verticale, sono intuitive e posizionano l'immagine del tutto in alto a sinistra top left in alto al centro top in alto a destra top right

L'immagine del tutto in basso a sinistra bottom left in basso al centro bottom in basso a destra bottom right

 #lato{background-position: right top;}

Questo esempio posiziona l'immagine in alto del tutto a destra.

Valori percentuali

I valori percentuali si applicano sia all'immagine sia all'elemento. Questo significa che se un'immagine deve essere posizionata al 30% e al 20% di un elemento, questi valori si riferiscono sia al punto corrispondente dell'immagine, sia al punto corrispondente dell'elemento.

Il primo valore è quello dell'asse orizzontale e il secondo dell'asse verticale. 50% 50% si riferisce sia al centro dell'immagine sia al centro dell'elemento,
100% 100% corrsiponde all'angolo in basso a destra
0% 0% all'angolo superiore sinistro.

Anche in questo caso se il secondo valore percentuale non fosse definito, si presume che questo sia 50%.

body{ background-image:url(ima/sfondo.png); /*immagine di sfondo*/
  background-repeat:no-repeat; /*non ripete l'immagine*/
  background-position:100%; /*posizione in basso e al centro*/ }

Questo esempio posiziona l'immagine in basso rispetto all'area di contenuto dell'elemento, e in centro.

Lunghezze

Le lunghezze si esprimono in px o in em

Le lunghezze indicano lo scostamento dell'immagine dall'angolo superiore sinistro dell'area di padding dell'elemento. Lo scostamento inizia dal primo pixel in alto dell'immagine d'origine

body{ background-image:url(ima/sfondo.png); /*immagine di sfondo*/
  background-repeat:no-repeat; /*non ripete l'immagine*/
  background-position:50px 30px; /*50px verso destra 30px verso il basso*/ }

Questo esempio posiziona l'immagine 50px a destra e 30px verso il basso rispetto all'angolo superiore sinistro del padding dell'elemento:

I Valori in lunghezze e percentuali si possono combinare; utilizzando lunghezze o percentuali si possono definire valori negativi per portare l'immagine all'esterno dell'area dell'elemento.

body{ background-image:url(ima/sfondo.png); /*immagine di sfondo*/
  background-repeat:no-repeat; /*non ripete l'immagine*/
  background-position:-150px -150px; /*posizione in basso e al centro*/ }

Un'immagine di sfondo scorre sempre insieme all'elemento cui è applicata. Per evitare questo, si utilizza la proprietà  background-attachment

Con il valore fixed lo scorrimento (scroll è il valore predefinito), dell'immagine non avviene, rebdendola fissa rispetto all'area di visualizzazione

body{ background-image:url(ima/sfondo.png); /*immagine di sfondo*/
  background-repeat:no-repeat; /*non ripete l'immagine*/
  background-position:50px 30px; /*50px verso destra 30px verso il basso*/ 
  background-attachment:fixed;
  }

torna

Background: sintassi abbreviata

Tutti i valori di background, possono essere riuniti in un'unica dichiarazione: background; questa proprietà  può esprimere un singolo valore da ogni proprietà di sfondo in qualsiasi ordine. Se si hanno due valori per background-position, questi devono apparire insieme e se espressi con lunghezze o percentuali, si deve definire prima il valore orizzontale e poi il valore verticale.

I valori non indicati sono definiti dall'interprete ai valori predefinti delle proprietà  omesse.

body{ 
  background:url(ima/sfondo.png); /*immagine di sfondo*/
  background-repeat:no-repeat; /*non ripete l'immagine*/
  background-position:50px 30px; /*50px verso destra 30px verso il basso*/ 
  background-attachment:fixed;
  }

Sfondi multipli

CSS3 consente l'applicazione di sfondi multipli per un unico elemento HTML.

Le regole per applicare più sfondi ad un elemento, sono le stesse già descritte ed usate per uno sfondo singolo, saranno gli URL delle immagini, ad essere ripetuti e separati da una virgola; per rendere meno impegnativa la stesura della regola, si consiglia l'uso della sintassi abbreviata. È preferibile assegnare un colore e un'immagine come sfondo di ripiego per i browser che non supportano gli sfondi multipli.

body{ 
 /*immagine di ripiego*/ 
  background:#040 url(ima/sfondo_ripiego.png) no-repeat left; /*immagine di ripiego*/

 /*sfondo multiplo*/ 
  background:url(ima/sfondo_1.png) no-repeat 50% 100%, /*prima immagine di sfondo*/
  background:url(ima/sfondo_2.png) no-repeat 100% -50px, /*seconda immagine di sfondo*/
  background:url(ima/sfondo_3.png) no-repeat 10px 100%; /*terza immagine di sfondo*/
  }

torna

Image map

In un documento può essere utile rendere attive delle porzioni di immagini, ossia realizzare dei link ipertestuali con delle parti di immagini.
Il limite delle mappe immagine stà nel fatto che sono poco accessibili quando si crea un sito "responsive", vale a dire che si adatta alla dimensione della viewport dei dispositivi mobile. I collegamenti potrebbero non funzionare perché il ridimensionamento dell'immagine causa la perdita delle coordinate. Esistono due tipi di image maps:

• client-side(interpretate dal browser)
• server-side(richiedono che l'utente abbia accesso al server poco utilizzate)

Qui tratto le image maps di tipo client-side.

Una image map è un'immagine suddivisa in "aree sensibili" che, al click del mouse, si comportano come link.

Per creare una image map è necessario avere:

1. l'immagine
2. una specifica di quali parti sono attive e di quali azioni devono essere svolte quando si clicca su di esse (mappa).

L'immagine viene caricata con il comando <img/> con l'attributo usemap

<img src="ima/italia.jpg" usemap="#italia" /> 

Come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l'immagine fa riferimento (che andremo a definire nel seguito) preceduto da "#".

<img src="ima/italia.jpg" usemap="#italia" alt="carta geografica dell'Italia" />

Il valore di usemap è il nome che daremo alla mappa italia preceduto dal simbolo #.

Per creare una mappa si utilizza il tag map con due attributi name e id che contengono il nome utilizzato nell’attributo usemap. La mappa può essere definita in qualsiasi punto del body (preferibilmente al fondo prima della sua chiusura).

<img src="ima/italia.jpg" usemap="#italia" />
<map name="italia" id="italia"> resto della mappa </map>

attenzione: il name e l’id dentro il tag <map> e il valore di usemap devono coincidere.

All'interno di <map> si definiscono le aree sensibili dell'immagine attraverso il tag <area /> Esistono tre tipi di aree a seconda della loro forma:

• rettangolare:
• circolare:
• poligonale:

<area shape="rect" coords="x2,y2,x4,y4" href="url" alt="testo" />
<area shape="circle" coords="x,y,z"  href="URL" alt="testo" />
<area shape="polygon" coords="x1,y1,x2,y2,x3,y3" href="URL" alt="testo" />

Trovare le coordinate

Per trovare le coordinate si carica l'immagine con un programma di gestione di immagini (ad esempio paint) e, muovendosi con il mouse, si leggono le coordinate visualizzate dal browser in basso a destra sullo schermo.

Le coordinate del cerchio si ottengono sottraendo il primo valore di x1 da x2 e si ottiene il raggio R3. Il valore R3 si unisce ai valori x2, y2

L'area poligono si definisce trascrivendo tutti i punti x, y, che la compongono.

torna

Colori

La temperatura dei colori vede colori detti caldi e colori freddi. I colori caldi vanno dal rosso al giallo con i colori marrone, rosa, arancione e bordeaux.
I colori freddi vanno dal verde all'azzurro e comprendono il viola. Nel layout i colori freddi di solito sono lo sfondo degli elementi più grandi.

Anche se ci sono variabili culturali, di solito i colori caldi sono associati all'idea di energia, movimento ed eccitazione; i colori freddi invece si associano all'idea di calma e tranquillità .

Il valore cromatico di un colore è dato dalla sua luminosità. Aggiungendo bianco ad un colore, si creano le tinte, mentre aggiungendo del nero si formano le sfumature. La saturazione consiste nel grado di purezza di un colore

I colori visualizzati sullo schermo di un computer, si basano sul modello RGB, una scala in cui ogni colore è composto da percentuali di rosso (red), verde( green) e blu (blue). La percentuale massima dei tre colori 100%, dà  il bianco, la percentuale nulla di ogni colore 0% dà il colore nero. Le stampanti invece usano una scala CMYK (ciano, magenta yellow, black).

I colori visualizzati sono descritti graficamente dalla ruota dei colori. Questa è formata da un cerchio in cui sono ricavati 12 spicchi; ogni spicchio corrisponde ad un colore primario, secondario e terziario.

I colori primari sono rosso, giallo e blu. I colori primari sono i colori della luce e si chiamano così perchè non si possono ottenere dalla miscelazione degli altri colori.

Partendo da un colore primario, ogni quarto colore successivo è un altro colore primario.

I colori secondari sono la combinazione tra due colori primari. Quindi partendo da ogni colore primario ogni secondo colore successivo, è un colore secondario. I colori secondari sono: arancione, verde e viola.

I colori terziari sono sei, e si creano dalla combinazione tra un colore primario con un colore secondario vicino. I colori terziari sono: vermiglio (rosso-arancione), calendula (giallo-arancione), verde certosa (giallo-verde), acquamarina (blu-verde), violetto (blu-viola), magenta (rosso-viola).

Gli schemi colore, vale a dire le combinazioni di colori armoniche e funzionali, sono formati da una combinazione di due, tre, quattro colori dai quali si parte per definire i colori di una pagina web.

Gli schemi colore più utilizzati nel web design sono:

Schema monocromatico

è formato da un solo colore e da diverse quantità  di tinte e sfumatore derivate da questo

Colori analoghi

è formato da colori adiacenti nella ruota dei colori. Di solito è preferibile che questi colori non siano più di quattro.

Colori complementari

Sono quei colori che si trovano in posizione opposta nella ruota dei colori e tra loro contrastanti

Colori split complementari

questo schema, come i due successivi, sono variazioni dello schema di colori complementari. Si ottiene usando due colori adiacenti al colore complementare principale

Colori triadici,

Qui i colori complementari si distanziano, e partendo da un colore qualsiasi, ogni quarto colore successive è un colore dello schema.

Colori a rettangolo

Schema formato da quattro colori che vede l'uso contemporaneo di due diversi schemi complemetari.

Notazione dei colori

Il modo più semplice per definire i colori è chiamarli per nome: CSS definisce questa scelta di colore come colori nominati.Per questo si ha a disposizione una gamma di parole chiave che corrispondono a 17 nomi di colori. I 16 colori definiti dall'HTML 4.01 più l'arancione orange.

h2 {color:green;}

Questo codice rende verde il testo di tutti i titoli di secondo livello

Quasi tutti i browser riconoscono però ben 140 nomi di colori, che si basano sullo standard css 3. Attraverso l'uso dei colori "RGB" e dei colori "esadecimali", si può andare oltre i 140 colori.

Colori RGB

Come visto i computer creano i colori attraverso la combinazione di quantità  diverse di rosso, verde e blu; si indica questo schema come colore "RGB".

background:rgb(200,200,200);
     color:rgb(0,0,0)

Questa regola stabilisce uno sfondo grigio con testo bianco

La notazione RGB dei CSS consente di definire la quantità red, green, blu, in due modi con questa sintassi, rgb (color), dove color è definito da un gruppo di tre percentuali nell'intervallo da 0% - 100%, separate da virgola; o da tre numeri interi nell'intervallo 0 - 255, separati da virgola.

rgb:(100%,100%,100%); corrisponde alla notazione rgb:(255,255,255);
rgb:(0%,0%,0%); corrisponde alla notazione rgb:(0,0,0);
rispettivamente bianco e nero.

Un colore grigio avrà una notazione rgb(50%,50/%,50%)

Lo schema RGB possiede un canale alfa per definire la trasparenza di un colore.
Il canale alfa è indicato con un numero da 0.0 a 1.0 opacità  totale; zero è il colore con traparenza totale, 1 corrisponde alla completa opacità .
I livelli intermedi da 0.1 a 0.9 definiscono la trasparenza del colore

background:rgba (200,200,200, .5);
             color:rgba (0,0,0, .5)

Questa regola stabilisce uno sfondo grigio con trasparenza e testo al livello intermedio.

Dato che non tutti i browser supportanao il canale alfa allo stesso modo, è bene definire una regola di sicurezza con valore RGB, prima delle regole con canale alfa definito.

In questo modo se il browser non supporta rgba, sarà  valido il colore RGB, mentre per via dell'applicazione a cascata delle regole, se il browser supporta il canale alfa, applicherà  la regola corretta poichè definita per ultima.

div{
 background:rgb(200,200,200); /*senza trasparenza*/
 color:rgb(0,0,0)
 background:rgba (200,200,200, .5);	/*con trasparenza*/
 color:rgba (0,0,0, .5)}

È bene assicurarsi che in entrambi i casi i contenuti siano correttamente visualizzati e facilmente leggibili

Colori esadecimali

I colori esadecimali diffusi nell'x/html sono utilizzati anche nei CSS. Sono sempre basati sullo schema RGB, ma sono definiti da tre coppie di valori formati da due cifre da 00 a FF. I colori sono definiti con la sisntassi #RRGGBB.

Ogni coppia di cifre stabilisce da quanto rosso, verde e blu è composto il colore definto.

span {color:#339900;}

Questa notazione, stabilisce nell'ordine, quanto rosso, verde e blu sono necessari per ottenere la tonalità  di verde di questa stringa di testo.

Quando le tre cifre che compongono il colore sono formate da coppie uguali come #000000 per il nero o #FFFFFF per il bianco o ancora #339900, per il verde dell'esempio, la notazione può essere abbreviata in #000, #FFF, #390, perchè in questo caso il browser presume che la seconda cifra sia uguale alla prima e la replica.

p {background:#390;
     color:#FFF;}

Questo codice definisce l'esempio descritto.

Se un colore è definito da #C0C0C0, la notazione abbreviata non può essere applicata, poichè le seconde cifre sono diverse, e #CCC, seppur simile, è un grigio diverso da #C0C0C0.

Colori HSL

I CSS consentono anche la notazione HSL in base alla tonalità, saturazione e luminosità. La notazione è: hsl(h,s,l).
Il primo valore è la tonalità  espressa come angolo sulla ruota dei colori, con un numero compreso tra 0 e 360.

Il secondo valore definisce il livello di saturazione, vale a dire quanto colore è utilizzato. La saturazione è espressa con un numero percentuale compreso tra 0% e 100%.

Il terzo valore è il livello di luminosità , si esprime con una percentuale da 0% a 100%.
La notazione HSL consente anche di definire il canale alfa per la trasparenza attraverso la notazione: hsla(h,s,l,a) dove a è un numero compreso tra 0.0 trasparenza totale, e 1.0 opacità totale.

torna

 

 

Tutorial X/HTML e CSS - Guida elaborata da: Bianchi Roberto - Spazioprever