Archivio

Posts Tagged ‘html’

Evidenziare le aree di una image map

23 febbraio 2010 admin Nessun commento

La soluzione che vi propongo oggi riguarda la creazione di una mappa immagine dove le aree vengono evidenziate al passaggio del mouse, qualcosa di simile all’immagine qua sotto.

Per farlo senza ricorrere ad html5 esistono principalmente due modi:

  1. Utilizzare un’overlay con un div e css. Elegante ma limitato alle forme rettangolari.
  2. Sostituire l’immagine. Un po macchinoso soprattutto quando ci sono molte aree cliccabili.

Prosegui la lettura…

Esempi e ripasso

16 agosto 2009 admin Nessun commento

Vediamo ora alcuni semplici esempi di pagine web che proveremo a modificare.

Primo esempio, solo html

In questo esempio vediamo dei nuovi attributi, “text” inserito nel body determina il colore del testo della pagina, dato che abbiamo messo lo sfondo nero non potevamo lasciare il testo nero.

L’attributo “align” che può avere valore left (sinistra), right (destra), center (al centro) o justify (giustificato) determina il tipo di allineamento del testo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Titolo della pagina</title>
 </head>
 <body bgcolor="#000000" text="#ffffff">
 <h1>
 <font color="#ff0000">
 Titolo della pagina
 </font>
 </h1>
 <p align="center">
 Del testo
 <font color="#00ff00">
 in due colori.
 </font>
 </p>
 </body>
</html>

Stesso esempio, con l’auiuto dei css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Titolo della pagina</title>
 </head>
 <body style="background:#000000; color:#ffffff;">
 <h1 style="color:#ff0000;">
 Titolo della pagina
 </h1>
 <p style="text-align:center;">
 Del testo
 <span style="color:#00ff00;">
 in due colori.
 </span>
 </p>
 </body>
</html>
Categorie:Web Engineering Tag: , ,

Lista dei codici dei colori HTML

16 agosto 2009 admin Nessun commento

In una pagina web si può impostare un colore tramite il suo nome, un codice esadecimale di 6 o 3 cifre preceduto dal simbolo # oppure con un codice RGB composto da 3 numeri decimali.

Ad esempio per il nero posso scrivere black, oppure #000, oppure #000000 oppure rgb(0,0,0).

In genere si utilizza il codice esadecimale di 6 cifre, se utilizzate gimp o photoshop quando aprite la schermata per la selezione del colore vi verrà visualizzato anche il codice esadecimale in modo da poterlo utilizzare in una pagina web.

Tempo fa, quando i monitor non avevano molti colori ne erano stati selezionati alcuni come maggiormente compatibili (web colors), ora non è più necessario limitarsi all’utilizzo di questi colori ma solo per questi esiste una corrispondenza letterale, dato che non potevano scegliere un nome per oltre 16 milioni di colori.

Lista dei colori con corrispondenza letterale.

Potete vedere questo video che mostra come creara la tavolozza per un sito utilizzando GIMP

Creare una tavolozza con GIMP

Categorie:Web Engineering Tag: , ,