Sostituire un filmato flash con un immagine se non si ha il plugin

In questo articolo tratteremo come
Sostituire un filmato flash con un immagine se non si ha il
plugin.
Il filmato sarà: "prova.swf" e l’immagine "prova.gif".

<script>
//vede che browser usiamo
var g_bShowFlash=false;
if (navigator.appVersion.indexOf("Win")>=0 && parseFloat(navigator.appVersion.substr(navigator.appVersion.indexOf("MSIE “)+5))>=4)
{
document.write(’<SCR’ + ‘IPT LANGUAGE=VBScript\> \n’);
document.write(’g_bShowFlash = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.4")))\n’);
document.write(’</SCR’ + ‘IPT\>’);
}
if(g_bShowFlash == true)
{
document.write(’<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"’);
document.write(’ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"’);
document.write(’ WIDTH="350" HEIGHT="350" id="prova"">’);
document.write(’ <PARAM NAME=movie VALUE="prova.swf"> <PARAM
NAME=quality VALUE=high><embed src="prova.swf" quality="high"
WIDTH="350" HEIGHT="350" NAME="menuRF" ALIGN=center
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">’);
document.write(’</OBJECT>’);
}
else
{
document.write(’<img src=prova.gif>’);
}
</script>

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati
May 1, 2006 | Filed Under flash, html, tutorials | Leave a Comment 

Il mago merlino nelle nostre pagine web

Obiettivo
In questo articolo, tratteremo come mettere il mago merlino nelle nostre pagine web.

Il mago merlino e’ questo.

Il nostro mago puo’:

- parlare

Merlin.speak(”ciao”);

- spostarsi

Merlin.MoveTo (200,450);

- assumere vari atteggiamenti

Merlin.Play(”GetAttention”);

Un esempio completo

<Object ID=toolia ClassID=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F></Object>
<Script LANGUAGE=”JavaScript” TYPE=”text/javascript”>
function LoadLocalAgent(CharID, CharACS) {
LoadReq = toolia.Characters.Load(CharID, CharACS);
return(true);
}
var MerlinID;
var MerlinACS;
toolia.Connected = true;
MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);
Merlin = toolia.Characters.Character(MerlinID);
Merlin.Show();
Merlin.Play(”Surprised”);
Merlin.Play(”GetAttention”);
Merlin.Play(”Blink”);
Merlin.speak(”Ciao a tutti”);
Merlin.Play(”Blink”); Merlin.Play(”Confused”);
Merlin.MoveTo (600,400);
Merlin.Play(”Surprised”);
Merlin.Play(’GestureRight’);
Merlin.speak(”Coem va?”);
Merlin.MoveTo (200,450);
Merlin.speak(”io sono merlino”);
Merlin.Play(’GestureLeft’);
Merlin.speak(”il tuo mago”);
Merlin.MoveTo (150,350);
Merlin.Play(’GestureLeft’);
Merlin.Play(’DoMAgic1′);Merlin.Play(’DoMAgic2′);
Merlin.Play(”Blink”);
Merlin.speak(”Ciao”);
Merlin.Hide();

</script>

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati
May 1, 2006 | Filed Under html, tutorials | 4 Comments 

Come si utilizzano gli accesskey

Gli accesskey servono per far saltare gli utenti da una pagina all’altra attraverso l’utilizzo della
tastiera e non del mouse tramite iil tasto ALT (PC) o CTRL (Mac).

Sono soprattutto utilizzati per gli utenti disabili che non possono per qualche motivo utilizzare il mouse.

Per quanto riguarda questi accesskey, abbiamo a disposizione tutti i tasti della tastiera, ma chiaramente
dobbiamo considerare che ci sono delle combinazioni di tasti speciali con le lettere per cui ci limiteremo
solo all’utilizzo dei numeri.

Facciamo un piccolo esempio, supponiamo di collegare alla pagina “dati.php” il tasto “1″, appena premiamo
ALT + 1, saremo rimandati automaticamente a questa pagina.

Detto cio’ facciamo un piccolo esempio di menu tramite gli accesskey:

<div id=”navigation”>
<a href=”index.html” accesskey=”1″>Index</a>
<a href=”dati.html” accesskey=”2″>Dati</a>
<a href=”contatti.html” accesskey=”3″>Contatti</a>
</div>

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati
May 1, 2006 | Filed Under html, tutorials | Leave a Comment 

Introduzione al linguaggio html

Obiettivo
In questo articolo introdurremo il limguaggio html.

Articolo
HTML sta per Hyper Text Markup Language. Hyper Text si riferisce alla miscela di testo e grafica che
contengono le pagine le quali possono essere cliccate per condurre ad altre pagine o documenti.
Markup Language è il set di codici usato per formattare il testo.
HTML ha le sue origini in SGML che ha deposto le basi per altri linguaggi DHTML , XML , VRML ecc.
HTML è una “lingua franca” per pubblicare ipertesti sul World Wide Web.
I documenti HTML possono essere creati da semplici editor di testo (persino “Blocco Note”), da
più meno potenti tool WYSISYG, o generati dinamicamente da linguaggi di scripting sever side (PHP, ASP, Perl).
Tramite l’HTML l’autore può:

Pubblicare documenti online con headings (titoli) ,
testo, tabelle, liste, foto, etc.
Recuperare informazioni online attraverso links
inpertestuali cliccando
Costruire forms per condurre transazione con servizi
remoti, per fare ricerche, prenotare alberghi, fare
acquisti ecc.
Inserire fogli di calcolo, video, suoni, e molte altre
applicazioni.

La storia
HTML 1.0 - 1990
HTML 2.0 – 1995
HTML 3.2 – 1997
HTML 4.0 – 1998
HTML 4.0.1 – 1999
XHTML 1.0 – 2000
XHTML 1.1 - Module-based XHTML 2001

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati
May 1, 2006 | Filed Under html, tutorials | Leave a Comment 

Struttura di un documento html

Obiettivo
In questo articolo tratteremo la struttura di un documento html.

Articolo
Un documento HTML è fatto da tre parti

1. Una linea che contiene la versione di HTML
2. Una sezione contenente l’intestazione. (HEAD)
3. Il corpo, che contiene il contenuto del documento. (BODY)

Il mio primo documento HTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1″>
<title>Il mio primo HTML</title>
</head>
<body>
Hello, World!
</body>
</html>
</HTML>

Analizziamo l’esempio

La dichiarazione

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Ci dice quale versione di HTML stiamo utilizzando,in particolare, quale DTD (Document Type Definition) tra quelle
disponibili in HTML 4.01 utilizziamo:

The HTML 4.01 Strict DTD (strict.dtd) : comprende tutti gli elementi e gli attributi che non sono deprecated e che non appaiono nei documenti frameset.

Esempio:

The HTML 4.01 Transitional DTD (loose.dtd): Strict + elementi deprecated

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

The HTML 4.01 Frameset DTD (frameset.dtd) Transitional + Frames

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

La struttura del documento
Il nostro documento html, deve avere:

TAG di apertura e chiusura del documento

<html>
</html>

Radice del documento HTML

<head>
</head>

Dichiarazione necessaria
Al browser per identificare
Il tipo di documento
E il set di caratteri

<meta http-equiv=”content-type“ content=”text/html; charset=ISO-8859-1″>

Titolo della pagina

<title>Il mio primo HTML</title>

Corpo del documento

<body>
Hello, World!
</body>

Nel nostro primo documento html, abbiamo visto un esempio di come utilizzare questi tag.

Struttura dei comandi HTML
Un generico TAG HTML (elemento) è del tipo:

<nometag attr1=“val1” attr2=“val2” … >
Parte interna (può contenere altri tag)
</nometag>

Esempio:

<html>
blablabla
</html>

Il Tag “HTML”
Il tag “HTML” inizia il nostro documento html, i suoi attributi sono:

Lang: (it,en)

che specificano la lingua del documento

L’intestazione “<head>”
L’intestazione <head> racchiude informazioni sul documento.

<title> </title> Titolo del documento undica il titolo del documento (si vede nella barra del titolo)

<title>Il mio primo HTML</title>

Anche i tag <script> <style> <link> vanno in questa sezione

Meta Tags

I meta tag contengono le informazioni necessarie ai motori di ricerca. Esempio:

<HEAD>
<TITLE>Il titolo della pagina</TITLE>
<META> NAME=”description” CONTENT=”Una breve descrizione dei contenuti”>
<META> NAME=”keywords” CONTENT=”parola chiave, parola chiave , parola chiave , parola chiave”>
</HEAD>

l’attributo “description” contiente una breve descrizione dei contenuti della pagina mentre keywords una lista di parole
chiavi.

Altri meta tags sono

<META NAME=”author” CONTENT=”sandro stracuzzi”>
<META NAME=”copyright” CONTENT=”2005, sandro stracuzzi”>

che indicano l’autore e il copyright della pagina. Per specificare la lingua del documento

<META HTTP-EQUIV=”content-language” CONTENT=”it”>.

e per specificare il tipo di contenuto della pagina

<META HTTP-EQUIV=”content-type” CONTENT=”text/html; CHARSET=utf-8″>.

L’elemento” BODY”
Nell’elemento <body>, si mette il corpo del documento
Gli attributi per questo tag sono:

ALINK=”…” - colore dei link cliccati.
VLINK=”…” - Colore dei links visitati.
LINK=”…” - Il colore dei link finche’ non vengono cliccati.
BGCOLOR=”…” - Colore di sfondo della pagina.
BACKGROUND=”…” - Specifica una immagine di sfondo per la pagina

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati
May 1, 2006 | Filed Under html, tutorials | Leave a Comment 

Le tabelle in html

Obiettivo
In questo articolo tratteremo come gestire le tabelle con html.

Articolo
Le tabelle in html servono per presentare i dati in modo ordinato tramite diciamo una griglia. Alcuni usano le
tabelle per creare dei layout per i propri siti.
Il tag che server per creare una tabella ,e’ il tag <TABLE>

Primo esempio

<TABLE>

<TR>
<TD>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>

<TR>
<TD>colonna 4</TD>
<TD>colonna 5</TD>
<TD>colonna 6</TD>
</TR>

</TABLE>

In questo piccolo esempio abbiamo creato una tabella con due righe e 3 colonne. Per creare una nuova riga, dobbiamo utilizzare
il tag <TR> mentre per creare una colonna dobbiamo usare il tag <TD>.

E’ possibile personalizzare la tabella impostando la larghezza dei bordi , la larghezza e l’altezza oppure la distanza tra le celle.Gli attributi da usare sono:

BORDER specifica la larghezza in pixel dei bordi
CELLSPACING specifica la larghezza in pixel dello spazio tra le celle
CELLPADDING specifica la larghezza in pixel dello spazio interno alle celle
WIDTH specifica la larghezza in pixel o in percentuale della tabella
HEIGHT specifica l’altezza in pixel o in percentuale della tabella

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR>
<TD>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Posizionamento

Per posizionare il testo contenuto nelle celle della tabella, possiamo utilizzare un posizionamento orizzontale e uno verticale.

Nel primo caso utilizziamo l’attributo ALIGN che puo’ essere LEFT, RIGHT o CENTER.

Nel secondo caso utilizziamo l’attributo VALIGN che puo’ essere LEFT, RIGHT o CENTER.

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR>
<TD VALIGN=”LEFT”>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Colori e sfondi
Possiamo modificare il colore di sfondo di una cella tramite l’attributo BGCOLOR.
Se vogliamo modificare il colore di una singola cella, mettiamo questo attributo nella cella corrispondente

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR>
<TD BGCOLOR=”#cecece”>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Se vogliamo modificare il colore di una intera riga, mettiamo questo attributo nella riga corrispondente

<TABLE BORDER=”1″ CELLSPACING=”2″ CELLPADDING=”5″ WIDTH=”100%” HEIGHT=”25%”>
<TR BGCOLOR=”#cecece”>
<TD>colonna 1</TD>
<TD>colonna 2</TD>
<TD>colonna 3</TD>
</TR>
</TABLE>

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati
April 30, 2006 | Filed Under html, tutorials | Leave a Comment 

← Previous Page — Next Page →


Commenti recenti:


Ultimi dal forum

Selezionando contrassegno si aggiungono spese al totale
Ho inserito postepay come pagamento
Inserire metakeywords
Problemi di installazione
Scaricare correttore ortografico italiano
Vari problemi
Installazione su server remoto
Installazione
Problema aggiornamento quantit prodotti carrello
Info
Bug utente + suggerimento formattazione
Problema cancellazione dalla mailing list
Problemi login
Problemi di visualizzazione nella home page
Fireworks appiattisce livelli quando salvo in png