Elementi DIV e Span con i Wap CSS

Gli elementi div o span possono esserci di aiuto in queste situazioni.

L'elemento DIV

L'elemento div consente di applicare stili WCSS a un gruppo di elementi di blocco; (alcuni elementi di blocco sono: h1, h2, div, p, table ecc...

Come nelle pagine web per pc, il tag div è abbastanza semplice da usare. Esso rappresenta una parte della pagina (division), alla quale possono essere applicate determinate regole di stile. All'interno di tali blocchi, possiamo avere altri elementi che prenderanno, a seconda delle dichiarazioni scritte nei WCSS, la formattazione desiderata. Un elemento div può essere contraddistinto da un attributo id (se in una pagina ce ne deve essere uno solo) oppure si può applicare una classe (se il div deve essere presente innumerevoli volte).

Vediamo adesso un esempio di documento XHTML MP nella cui parte superiore della pagina avremo un titolo, racchiuso in un box con colore di sfondo e bordo. Al di sotto di esso un testo generico.

L'url da richiamare nel mobile device, o la demo di Opera, è il seguente: http://www.extrowebsite.com/lab/xhtml-mobile-profile/settima-pagina.xhtml. Come si può vedere, non è stato fatto altro che racchiudere il titolo del sito in un div con classe .header associata. A tale div è stato assegnato un bordo di spessore 2px ed un colore di sfondo #f0f0f0. Al tag h1, titolo della pagina, un colore arancio. Tutto il codice CSS è riportato di seguito:

Si tratta pur sempre di una semplice pagina, è vero, ma possiamo vedere come, man mano si procede, possiamo arricchire una videata di colori se leggessimo delle informazioni attraverso un browser WAP.

L'elemento Span

L'elemento span è usato alla stessa maniera dell'elemento div, con la differenza che il secondo viene usato per racchiudere uno o più elementi di blocco al suo interno (h1, h2, div, p) ecc, mentre l'elemento span è usato per racchiudere una porzione di testo in un elemento di blocco.

Un utilizzo pratico, dell'elemento span, potrebbe essere quello di voler vedere una parte di testo di un colore diverso da tutto il resto. Poniamo il caso in cui volessimo un titolo h1 formato da due colori, così come se una frase di un paragrafo dovesse essere messa in rilievo rispetto a tutto il resto, potremmo ricorrere a tale elemento. La pagina di esempio può essere richiamata dal seguente URL: http://www.extrowebsite.com/lab/xhtml-mobile-profile/ottava-pagina.xhtml.

Attraverso l'utilizzo di tag ai quali associare formattazioni CSS, possiamo avere delle pagine colorate ma l'importante è non eccedere con i colori. Un sito "arlecchino" potrebbe infastidire gli utenti.