a2 --- Contesto dinamico

Capitolo 380. Contesto dinamico

Dal momento che un documento HTML viene letto normalmente attraverso un navigatore, con il quale si interagisce, è possibile fare riferimento a delle pseudo-classi il cui ambito riguarda la dinamica di interazione con l'utente. I casi principali riguardano i riferimenti ipertestuali, che possono essere già stati visitati o meno, e la posizione del puntatore del mouse sopra il documento.

Tabella 380.1. Pseudo-classi utili nell'ambito dell'interazione con l'utente.

Pseudo-classe	Descrizione
:link	Include i riferimenti ipertestuali che non sono ancora stati visitati.
:visited	Include i riferimenti ipertestuali che sono già stati visitati.
:hover	Riguarda un componente che si trova a essere sormontato dal puntatore del mouse, senza che l'utente compia altre azioni con questo.
:active	Riguarda un componente che si trova a essere selezionato, per esempio con un clic del mouse.
:focus	Riguarda un componente che si trova a essere a fuoco, per esempio quando si scrive in una casella di inserimento.

380.1 File «dinamica-css-01.html»

Si realizzi il file dinamica-css-01.html con il contenuto seguente, partendo eventualmente dalla copia di altri esercizi fatti in precedenza:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Pseudo-classi dinamiche,
      6         esempio 01">
      7     <META NAME="Keywords" CONTENT="HTML, CSS, pseudo-classi, esempio">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2006.01.01">
     10     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     11     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     12     <META NAME="Robots" CONTENT="ALL">
     13     <TITLE>Dinamica</TITLE>
     14     <STYLE TYPE="text/css">
     15         <!--
     16             BODY {
     17                 font-size:        5mm;
     18             }
     19             H1 {
     20                 font-size:        1cm;
     21             }
     22             SPAN:hover {
     23                 font-size:        1cm;
     24             }
     25             A:hover {
     26                 background-color: yellow;
     27             }
     28             A:active {
     29                 background-color: red;
     30             }
     31             A:link {
     32                 color:            blue;
     33             }
     34             A:visited {
     35                 color:            green;
     36             }
     37         -->
     38     </STYLE>
     39 </HEAD>
     40 <BODY>
     41 
     42 <H1>Le cose che mi piacciono</H1>
     43 
     44 <P>Ci sono due cose che mi piacciono: il <SPAN>software libero</SPAN> e
     45 gli <SPAN>standard liberi</SPAN>. Per saperne di pi&ugrave; sul
     46 <SPAN>software libero</SPAN> si pu&ograve; leggere qualcosa di utile a
     47 partire dal sito <A HREF="http://www.gnu.org">http://www.gnu.org</A>;
     48 per quanto riguarda gli standard <SPAN>W3C</SPAN>, si veda il sito <A
     49 HREF="http://www.w3c.org">http://www.w3c.org</A>.</P>
     50 
     51 </BODY>
     52 </HTML>

Non viene mostrato l'aspetto finale del documento, perché ciò che conta è quello che accade quando si sposta il puntatore del mouse sopra ai termini delimitati dagli elementi SPAN e sugli elementi A. Si provi anche a selezionare uno dei riferimenti ipertestuali, in modo da vedere cambiare il colore dello sfondo, nel momento della selezione.

Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome contesto_dinamico.htm