{"id":1772,"date":"2013-01-29T20:01:03","date_gmt":"2013-01-29T19:01:03","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=1772"},"modified":"2013-01-29T20:01:03","modified_gmt":"2013-01-29T19:01:03","slug":"html-i-colori-e-gli-sfondi","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/guide_tutorial\/htmlcss\/html-i-colori-e-gli-sfondi\/","title":{"rendered":"Html: i colori e gli sfondi"},"content":{"rendered":"

Tutti gli esempi proposti nelle lezioni precedenti, per esigenze puramente didattiche, hanno tenuto poco conto dell\u2019aspetto grafico di una pagina html. Nonostante ci\u00f2 \u00e8 impensabile<\/em> realizzare ipertesti o siti web che non utilizzino colori, immagini o particolari regole di formattazione.<\/p>\n

Questa lezione introdurr\u00e0 le regole di stile<\/strong> che saranno approfondite nelle lezioni successive riguardanti il CSS.<\/p>\n

I colori, sul web cos\u00ec come su supporto cartaceo, rivestono un ruolo fondamentale grazie al quale \u00e8 possibile attirare l\u2019attenzione del lettore e rendere la lettura pi\u00f9 confortevole e divertente.<\/p>\n

I colori in HTML possono essere specificati o attraverso un nome<\/strong> (red, yellow, green, ecc..), oppure attraverso la notazione esadecimale<\/strong>, 6 cifre precedute dal carattere\u00a0 cancelletto (#<\/em>).<\/p>\n

Scrivere ad esempio:<\/p>\n

\r\n<body bgcolor="red">\r\n<\/pre>\n
oppure<\/p>\n
\r\n<body bgcolor="#FF0000">\r\n<\/pre>\n
fa si che il corpo della pagina html, il body<\/em> appunto, appaia a video con uno sfondo di colore rosso<\/span>.
\nLe sei cifre esadecimali corrispondono alla codifica RGB<\/strong> per i colori. Di seguito \u00e8 proposta una tabella con alcuni dei colori pi\u00f9 utilizzati, tenendo comunque presente le milioni di sfumature possibili:<\/p>\n
\"Colori
\nComputer e monitor differenti possono mostrare lo stesso colore in maniera molto differente in relazione a fattori come scheda video e risoluzione dello schermo. Nonostante ci\u00f2 esistono 216 codici<\/em> per i colori che sono ritenuti \u201csafe<\/em>\u201d (sicuri) nel senso che essi sono mostrati nello stesso modo (o quasi) su tutti i computer.<\/p>\n
Inoltre nella scelta dei colori \u00e8 importante tener conto del fattore accessibilit\u00e0 prestando attenzione\u00a0 ad usare combinazioni di colori che siano fruibili anche a chi soffre di daltonismo. Secondo le linee guida indicate dal W3C nella raccomandazione Web Content Accessibility Guidelines<\/strong> (WCAG<\/em>) 2.0 il colore non deve essere usato come unico mezzo visivo per fornire informazioni, altres\u00ec bisogna fornire vie alternative utilizzando combinazioni di stili o visualizzazione di testi.<\/p>\n
L’attributo STYLE<\/h3>\n
I colori sono applicabili non solo allo sfondo della pagina bens\u00ec anche ai testo, i bordi e tutti gli elementi html visti fino ad ora sono personalizzabili nel colore.<\/p>\n
A tal proposito \u00e8 necessario innanzitutto introdurre un attributo fondamentale nella definizione dello stile in linea di una pagina html, il cui nome \u00e8 appunto STYLE<\/strong>.<\/p>\n
Pi\u00f9 che un attributo, STYLE \u00e8 da considerarsi come una sorta di contenitore di attributi di stile<\/strong> per un singolo elemento; difatti la sintassi \u00e8 la seguente:<\/p>\n
style=\u201cpropriet\u00e01=valore; propriet\u00e02=valore; propriet\u00e03=valore; \u2026\u201d<\/strong><\/p>\n
Un esempio di utilizzo dell\u2019attributo style \u00e8 il seguente:<\/p>\n
\r\n<p style='font-size:15px; background-color:#0000FF; color:#FF0000'>\r\n\tContenuto del paragrafo\u2026\r\n<\/p>\r\n<\/pre>\n
Al paragrafo sono associate le seguenti propriet\u00e0:<\/p>\n
    \n
  • font-size : grandezza del carattere<\/li>\n
  • background-color : colore di sfondo<\/li>\n
  • color : colore del testo<\/li>\n<\/ul>\n
    Il risultato \u00e8 il seguente:<\/p>\n
    \"Style<\/p>\n
    Applicare immagini di sfondo<\/h3>\n
    Il body, cos\u00ec come paragrafi o div, di una pagina html possono eventualmente contenere anche un\u2019immagine come sfondo<\/em>.
    \nIn questo caso \u00e8 necessario specificare l\u2019url dell\u2019immagine ed una eventuale posizione che questa deve assumere rispetto al suo contenitore.
    \nSupponiamo di inserire un\u2019immagine di sfondo ad un paragrafo:<\/p>\n
    \r\n<p style="background-image: url(img\/sfondo.jpg)">\r\n\tContenuto del paragrafo\u2026\r\n<\/p>\r\n<\/pre>\n
    In questo caso, senza specificare ulteriori parametri lo sfondo verr\u00e0 ripetuto<\/strong> per riempire interamente lo spazio definito dal paragrafo:<\/p>\n
    \"Style<\/p>\n
    Tramite la propriet\u00e0 background-repeat<\/strong> viene definito il modo in cui l\u2019immagine va ripetuta all\u2019interno del blocco. I valori che questo pu\u00f2 assumere sono:<\/p>\n
      \n
    • repeat<\/em> (valore predefinito): l’immagine viene ripetuta orizzontalmente e verticalmente<\/li>\n
    • repeat-x<\/em> (l’immagine viene ripetuta solo orizzontalmente)<\/li>\n
    • repeat-y<\/em> (l’immagine viene ripetuta solo verticalmente)<\/li>\n
    • no-repeat<\/em> (l’immagine non viene ripetuta e si avr\u00e0 una sola occorrenza della stessa)<\/li>\n<\/ul>\n
      Riscrivendo il codice precedente in questo modo:<\/p>\n
      \r\n<p style="background-image: url(img\/sfondo.jpg); background-repeat: no-repeat">\r\n\tContenuto del paragrafo\u2026\r\n<\/p>\r\n<\/pre>\n
      Avremo l\u2019immagine posizionata nell\u2019angolo in alto a sinistra del paragrafo senza che questa venga ripetuta:<\/p>\n
      \"Style<\/p>\n
      Diversamente potremo specificare un repeat-y per ottenere il seguente effetto:<\/p>\n
      \"Style<\/p>\n
      Posizionare le immagini di sfondo<\/h3>\n
      La propriet\u00e0 background-position<\/strong> permette di specificare in che modo allineare l\u2019immagine di sfondo rispetto al suo contenitore.
      \nLa propriet\u00e0 richiede due valori<\/em>, il primo per la posizione verticale e la seconda per quella orizzontale.
      \nLa sintassi \u00e8 la seguente:<\/p>\n
      style=”background-position: verticale orizzontale”<\/strong><\/p>\n
      I valori ammissibili per le posizioni verticale\/orizzontale sono:<\/p>\n
        \n
      • center\/center<\/li>\n
      • right\/bottom<\/li>\n
      • left\/top<\/li>\n<\/ul>\n
        Scrivendo ad esempio il seguente codice:<\/p>\n
        \r\n<p style="background-image: url(img\/sfondo.jpg);\r\n               background-repeat: no-repeat;\r\n               background-position: center center">\r\n\tContenuto del paragrafo\u2026\r\n<\/p>\r\n<\/pre>\n
        impostiamo uno sfondo che non sia ripetuto ma sia al centro assoluto del paragrafo:<\/p>\n
        \"Style<\/p>\n
        Diversamente avremo potuto allinearlo nel vertice basso del paragrafo:<\/p>\n
        \"Style<\/p>\n","protected":false},"excerpt":{"rendered":"
        Tutti gli esempi proposti nelle lezioni precedenti, per esigenze puramente didattiche, hanno tenuto poco conto dell\u2019aspetto grafico di una pagina html. Nonostante ci\u00f2 \u00e8 impensabile<\/em> realizzare ipertesti o siti web che non utilizzino colori, immagini o particolari regole di formattazione.<\/p>\n
        Questa lezione introdurr\u00e0 le regole di stile che saranno approfondite nelle lezioni successive riguardanti il CSS.<\/p>\n
        I colori, sul web cos\u00ec come su supporto cartaceo, rivestono un ruolo fondamentale grazie al quale \u00e8 possibile attirare l\u2019attenzione del lettore e rendere la lettura pi\u00f9 confortevole e divertente.<\/p>\n
        I colori in HTML possono essere specificati o attraverso un nome (red, yellow, green, ecc..), oppure attraverso la notazione esadecimale, 6 cifre precedute dal carattere\u00a0 cancelletto (#<\/em>).<\/p>\n
        Scrivere ad esempio:<\/p>\n
        <body bgcolor="red"><\/p>\n
        oppure<\/p>\n
        <body bgcolor="#FF0000"><\/p>\n
        fa si che il corpo della pagina html, il body<\/em> appunto, appaia a video con uno sfondo di colore rosso.
        \nLe sei cifre esadecimali corrispondono alla codifica RGB per i colori. Di seguito \u00e8 proposta una tabella con alcuni dei colori pi\u00f9 utilizzati, tenendo comunque presente le milioni di sfumature possibili:<\/p>\n
        \nComputer e monitor differenti possono mostrare lo stesso colore in maniera molto differente in relazione a fattori come scheda video e risoluzione dello schermo. Nonostante ci\u00f2 esistono 216 codici<\/em> per i colori che sono ritenuti \u201csafe<\/em>\u201d (sicuri) nel senso che essi sono mostrati nello stesso modo (o quasi) su tutti i computer.<\/p>\n
        Inoltre nella scelta dei colori \u00e8 importante tener conto del fattore accessibilit\u00e0 prestando attenzione\u00a0 ad usare combinazioni di colori che siano fruibili anche a chi soffre di daltonismo. Secondo le linee guida indicate dal W3C nella raccomandazione Web Content Accessibility Guidelines (WCAG<\/em>) 2.0 il colore non deve essere usato come unico mezzo visivo per fornire informazioni, altres\u00ec bisogna fornire vie alternative utilizzando combinazioni di stili o visualizzazione di testi.<\/p>\n
        L’attributo STYLE<\/p>\n
        I colori sono applicabili non solo allo sfondo della pagina bens\u00ec anche ai testo, i bordi e tutti gli elementi html visti fino ad ora sono personalizzabili nel colore.<\/p>\n
        A tal proposito \u00e8 necessario innanzitutto introdurre un attributo fondamentale nella definizione dello stile in linea di una pagina html, il cui nome \u00e8 appunto STYLE.<\/p>\n
        Pi\u00f9 che un attributo, STYLE \u00e8 da considerarsi come una sorta di contenitore di attributi di stile per un singolo elemento; difatti la sintassi \u00e8 la seguente:<\/p>\n
        style=\u201cpropriet\u00e01=valore; propriet\u00e02=valore; propriet\u00e03=valore; \u2026\u201d<\/p>\n
        Un esempio di utilizzo dell\u2019attributo style \u00e8 il seguente:<\/p>\n
        <p style=’font-size:15px; background-color:#0000FF; color:#FF0000′>
        \n\tContenuto del paragrafo\u2026
        \n<\/p><\/p>\n
        Al paragrafo sono associate le seguenti propriet\u00e0:<\/p>\n
        font-size : grandezza del carattere
        \nbackground-color : colore di sfondo
        \ncolor : colore del testo<\/p>\n
        Il risultato \u00e8 il seguente:<\/p>\n<\/p>\n
        Applicare immagini di sfondo<\/p>\n
        Il body, cos\u00ec come paragrafi o div, di una pagina html possono eventualmente contenere anche un\u2019immagine come sfondo<\/em>.
        \nIn questo caso \u00e8 necessario specificare l\u2019url dell\u2019immagine ed una eventuale posizione che questa deve assumere rispetto al suo contenitore.
        \nSupponiamo di inserire un\u2019immagine di sfondo ad un paragrafo:<\/p>\n
        <p style="background-image: url(img\/sfondo.jpg)">
        \n\tContenuto del paragrafo\u2026
        \n<\/p><\/p>\n
        In questo caso, senza specificare ulteriori parametri lo sfondo verr\u00e0 ripetuto per riempire interamente lo spazio definito dal paragrafo:<\/p>\n<\/p>\n
        Tramite la propriet\u00e0 background-repeat viene definito il modo in cui l\u2019immagine va ripetuta all\u2019interno del blocco. I valori che questo pu\u00f2 assumere sono:<\/p>\n
        repeat<\/em> (valore predefinito): l’immagine viene ripetuta orizzontalmente e verticalmente
        \nrepeat-x<\/em> (l’immagine viene ripetuta solo orizzontalmente)
        \nrepeat-y<\/em> (l’immagine viene ripetuta solo verticalmente)
        \nno-repeat<\/em> (l’immagine non viene ripetuta e si avr\u00e0 una sola occorrenza della stessa)<\/p>\n
        Riscrivendo il codice precedente in questo modo:<\/p>\n
        <p style="background-image: url(img\/sfondo.jpg); background-repeat: no-repeat">
        \n\tContenuto del paragrafo\u2026
        \n<\/p><\/p>\n
        Avremo l\u2019immagine posizionata nell\u2019angolo in alto a sinistra del paragrafo senza che questa venga ripetuta:<\/p>\n<\/p>\n
        Diversamente potremo specificare un repeat-y per ottenere il seguente effetto:<\/p>\n<\/p>\n
        Posizionare le immagini di sfondo<\/p>\n
        La propriet\u00e0 background-position permette di specificare in che modo allineare l\u2019immagine di sfondo rispetto al suo contenitore.
        \nLa propriet\u00e0 richiede due valori<\/em>, il primo per la posizione verticale e la seconda per quella orizzontale.
        \nLa sintassi \u00e8 la seguente:<\/p>\n
        style=”background-position: verticale orizzontale”<\/p>\n
        I valori ammissibili per le posizioni verticale\/orizzontale sono:<\/p>\n
        center\/center
        \nright\/bottom
        \nleft\/top<\/p>\n
        Scrivendo ad esempio il seguente codice:<\/p>\n
        <p style="background-image: url(img\/sfondo.jpg);
        \n               background-repeat: no-repeat;
        \n               background-position: center center">
        \n\tContenuto del paragrafo\u2026
        \n<\/p><\/p>\n
        impostiamo uno sfondo che non sia ripetuto ma sia al centro assoluto del paragrafo:<\/p>\n<\/p>\n
        Diversamente avremo potuto allinearlo nel vertice basso del paragrafo:<\/p><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[390,391,392,389],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1772"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=1772"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1772\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=1772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=1772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}