HTML, questo sconosciuto...1ma parte

Per ogni webdesigner che si rispetti è normale conoscere una moltitudine di linguaggi diversi, saper trovare la soluzione ad ogni problema di visualizzazione e stupire il pubblico con elaborati effetti speciali creati con non troppo semplici script.
Ma quello che lo sviluppatore web dimentica è che una pagina web, prima di Ajax, Javascript e oggetti Flash è scritta in HTML, che nasconde ben più di un effetto utile, simpatico e semplice da implementare.

In questa prima parte vedremo cosa sono e come utilizzare MARQUEE, FIELDSET e LEGEND.

Marquee

Con l’introduzione dell’HTML 4.0, alcune nuove funzioni di tipo dinamico sono state aggiunte alle proprietà del Linguaggio.
Senza utilizzare Javascript o DTHML ma un semplice tag HTML, è possibile far scorrere del testo, immagini e altro all’interno di una pagina o di una tabella, come un vero e proprio scrolling.
Essendo un’estensione Microsoft è pienamente supportato solo da Internet Explorer, gli altri browser ne riconoscono comunque la maggior parte delle proprietà.
Usato in modo ragionato e considerando che non funzionerà nello stesso modo ovunque, può funzionare bene per annunci o effetti simpatici.

Vediamo questo esempio del Marquee:

ESEMPIO DI MARQUEE CON LE SOLE PROPRIETA’ DI DEFAULT

Questo esempio è stato realizzato usando solamente il semplice tag MARQUEE di apertura e chiusura.

<MARQUEE>
ESEMPIO DI MARQUEE CON LE SOLE PROPRIETA’ DI DEFAULT
</MARQUEE>

In questo secondo esempio imposteremo alcune proprietà:

ESEMPIO DI MARQUEE CON PROPRIETA’ IMPOSTATE

Nel codice seguente possiamo vedere quali proprietà sono state impostate.

<MARQUEE behavior=alternate direction="left" height="30" width="100%" SCROLLAMOUNT="2" SCROLLDELAY="10" truespeed="true">
ESEMPIO DI MARQUEE CON PROPRIETA’ IMPOSTATE
</MARQUEE>

Queste sono le classiche proprietà per definire diverse funzioni del marquee, da utilizzare in aggiunta al foglio di stile o alle proprietà più comuni del codice HTML.

BEHAVIOUR (SCROLL | SLIDE | ALTERNATE, default: SCROLL)
SCROLL e SLIDE hanno più o meno la stessa funzione, l’unica differenza è che SLIDE interrompe lo scrolling non appena l’elemento raggiunge il lato di arrivo.
ALTERNATE provocherà il rimbalzo dell’elemento all’interno del MARQUEE.

DIRECTION (LEFT | RIGHT | UP | DOWN, default: LEFT)
La direzione in cui scorrerà il testo, rispettivamente sinistra, destra, sù e giù.

WIDTH (px | %, default: 100%)
Larghezza del marquee, si può esprimere in pixel o percentuale.

HEIGHT (px | %, default: l’altezza necessaria a contenere l’elemento)
Altezza del marquee, si può esprimere in pixel o percentuale.

SCROLLAMOUNT (integer, default: 6)
Setta lo spostamento in pixel dell’elemento, lavora in combinazione con SCROLLDELAY per ricreare la velocità.

SCROLLDELAY (millisecondi, default: 85)
Setta il ritardo tra uno spostamento e l’altro.

TRUESPEED (boolean, default: FALSE)
Se FALSE il movimento avviene ogni 60 millesecondi o più, ignorando il valore di SCROLLDELAY.
Se TRUE il movimento avviene secondo le impostazioni di SCROLLDELAY e SCROLLAMOUNT specificate.

Fieldset & legend

Questi tag HTML lavorano insieme: il loro scopo è ricreare una didascalia con bordo attorno al testo.
Utile quando non si vuole ricorrere a CSS per evidenziare velocemente dei paragrafi di testo.
Vediamone l’esempio.

Titolo della didascalia:

testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo

Il codice è molto semplice:

<fieldset>
<legend>Titolo della didascalia:</legend>
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo
</fieldset>

Non ci sono proprietà particolari da definire, si possono utilizzare tutte le tipiche dell’HTML.
Solitamente vengono usati per rendere più chiari i raggruppamenti nei moduli da compilare ma nessuno ci vieta di utilizzarli, insieme ad un po’ di CSS, per arricchire un articolo.


E allora…

BUON LAVORO da W3 facile!

Ritieni questo post utile o interessante?
Condividi e Segnala

, , , ,

Contenuto simile:

  • Flash AS3, parametri con swfobject
    Passare valori e parametri a Flash in AS3 con SWFObject

    Credo che pochi non abbiano mai avuto bisogno di passare parametri dalla pagina agli SWF precompilati, comunque scrivo questo tutorial per chi ancora non l'ha fatto (o sta avendo problemi nel farlo) col codice Actionscript 3.0. L'esempio a seguire fa uso della libreria Javascript SWFObject (ex Flashobject costretto a...

  • HTML, questo sconosciuto...1ma parte
    CSS Reset: il tuo stile uguale su tutti i browser

    Il classico problema del webdesigner è mantenere la coerenza del proprio webdesign CSS sulla moltitudine di browser in circolazione: il rendering della pagina viene più che altro influenzato dalle impostazioni di default del programma, per questo è nata l'esigenza della tecnica denominata CSS Reset. Solitamente...

  • HTML, questo sconosciuto...1ma parte
    Come installare più versioni di Internet Explorer

    La noia più grande per un webdesigner patito di CSS è il solito imperituro problema di compatibilità tra i vari browser, cosa che ci costringe a lavorare con ALMENO 2 finestre di anteprima aperte: Firefox e Internet Explorer 7. Nel mondo dei browser per PC Mozilla si sta facendo strada e supera il browser...

  • HTML, questo sconosciuto...1ma parte
    PNG trasparenti anche con Internet Explorer 6

    ::: NOTA BENE :::Il metodo a seguire è stato migliorato e spiegato nella pagina PNG TRASPARENTI SU IE6: LA SOLUZIONE DEFINITIVA, soluzione funzionante anche nel caso di PNG usate come sfondi CSS. :::::::::::::::::::: La più grande noia per un webdesigner che ricorrre al CSS per disegnare i propri layout è la...

  • HTML, questo sconosciuto...1ma parte
    HTML Quiz: quante ne sai in 5 minuti?

    Il sito JustSayHi, un semplice sito americano di dating on line, dispone di una simpatica area piena di quiz, widget e sticker da inserire nei vostri blog. Eccovi il quizzone sugli elementi HTML: quanti ne ricorderete in 5 minuti? Riuscirete a battere il mio record? 49 Cliccate sull'immagine per giocare e...

Feed dei commenti dei commenti - lascia un commento - trackback

Rispondi al post