En HTML els colors es poden anomenar per noms propis ja creats (yellow, black, orange...) o es poden identificar mitjançant codis hexadecimals, (#ffff00, #000000, #ffa500...). En la pàgina HTML Color Groups de la web w3schools.com, podeu trobar els colors més utilitzats.
A l'EBAP, normalment, feim servir els colors següents:
- Al títol de la plataforma utilitzam el color corporatiu del Govern de les Illes Balears (background-color: #c40037):
- Als diferents quadres de text creats a Moodle per fer ressaltar:
Quadre de text amb fons de color verd (background-color: #e9ffd9; border: 2px solid #a6ca8a;)
Quadre de text amb fons de color groc (background-color: #fff8c4; border: 2px solid #f2c779;)
Quadre de text amb fons de color blau (background-color: #e3f7fc; border: 2px solid #8ed9f6;)
Quadre de text amb fons de color vermell (background-color: #ffecec; border: 2px solid #f5aca6;)
Quadre de text amb fons de color gris (background-color: #dcdcdc; border: 2px solid #a9a9a9;)
Quadre de text amb fons de color negre i text de color blanc (background-color: #3a3a3a; border: 2px solid #3a3a3a; color: white;)
En HTML, el color del text per defecte és el negre. Per tant, fixau-vos que en el darrer quadre hi ha un valor nou color, que es fa servir per donar color al text.
Vegem-ho amb més detall en els exemples següents:
Quadre de text amb fons color verd
Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.
| Codi HTML |
<p style="text-align: justify;"><span style="background-color: #e9ffd9; border: 2px solid #a6ca8a; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" title="Quadre de text amb fons color verd">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
Quadre de text amb fons color groc
Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.
| Codi HTML |
<p style="text-align: justify;"><span style="background-color: #fff8c4; border: 2px solid #f2c779; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" title="Quadre de text amb fons color groc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
Quadre de text amb fons color blau
Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.
| Codi HTML |
<p style="text-align: justify;"><span style="background-color: #e3f7fc; border: 2px solid #8ed9f6; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" title="Quadre de text amb fons color blau">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
Quadre de text amb fons color vermell
Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.
| Codi HTML |
<p style="text-align: justify;"><span style="background-color: #ffecec; border: 2px solid #f5aca6; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" title="Quadre de text amb fons color vermell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
Quadre de text amb fons color gris
Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.
| Codi HTML |
<p style="text-align: justify;"><span style="background-color: #dcdcdc; border: 2px solid #a9a9a9; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" title="Quadre de text amb fons color gris">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.
Quadre de text amb fons color negre i text color blanc
Heu de tenir en compte, que aquest format només donarà un efecte visual que els lectors de pantalla no detectaran, a no ser que inclogueu el paràmetre title, el qual sí que poden reconèixer els lectors de pantalla i llegiran el seu text.
| Codi HTML |
<p style="text-align: justify;"><span style="background-color: #3a3a3a; border: 2px solid #3a3a3a; color: white; display: block; margin: 0px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" title="Quadre de text amb fons color negre i text color blanc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.</span></p>| Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas nunc dictum metus facilisis, et fermentum est accumsan. Donec ut odio eu libero dapibus gravida vel tempor leo. Proin sodales justo vitae dolor maximus mollis.