Webmaster
I suggerimenti sono stati presi da riviste di informatica, da newsletters o da siti web
perciò ogni diritto rimane al legittimo proprietario.


SITI DI INTERESSE PER WEBMASTER
Elenco dei tag HTML 1
Elenco dei tag HTML 2
I colori in esadecimale
I fogli di stile - CSS

I fogli di stile - CSS 2
I fogli di stile - CSS 3
I fogli di stile - CSS 4
I caratteri speciali

Emoticons
Installazione e configurazione di Internet Information Services 5
Meta Tag Creator
Scambio Banner
Guida al posizionamento sui motori di ricerca
Software FTP (utilizzo) by Aruba http://vademecum.aruba.it/start/linux/client_ftp.asp - http://vademecum.aruba.it/main/

Testare le porte di un router (da remoto): http://www.yougetsignal.com/tools/open-ports/

Test vari della rete: http://mxtoolbox.com/SuperTool.aspx

Tutorial sul linguaggio html: scarica qui o vedi il sito - html tutorial (http://www.w3schools.com/html/) - appunti di html

Costruzione di un sito web: Vedi
Creazione di un sito web: Vedi

Scelta della WebAgency: Vedi

Spam Database Lookup Results
http://www.dnsbl.info/dnsbl-database-check.php

Creazione di sitemaps
http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
http://download.cnet.com/SiteMap-Generator/3000-10247_4-10815828.html
http://www.xml-sitemaps.com/
http://sourceforge.net/projects/sitemapgen/
http://gsitecrawler.com/
http://www.sitemapbuilder.net/
http://winsitemap.com/
http://www.xtreeme.com/sitexpert/
http://www.web-site-map.com/google-sitemap.php
http://www.giorgiotave.it/forum/protocollo-sitemaps/14572-lista-plugin-e-programmi-per-generare-la-google-sitemap.html
http://www.snapfiles.com/screenshots/wwwsitemap.htm
http://wonderwebware.com/sitemap-generator/
http://www.sitemapbuilder.net/download.aspx

Strumenti per webmaster di Google
Cosa sa Google di noi: http://google.com/dashboard
http://www.google.com/webmasters/tools/
Sitemap generator: http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
Creare sitemap: http://www.xml-sitemaps.com/
GWebCrawler & Google Sitemap Creator: http://trytobreak.com/ 
Gmapper: http://www.dbnetsolutions.co.uk/gmapper/index.aspx
http://gsitecrawler.com/

Via dai motori di ricerca
Google ci controlla, o almeno così sembra: qualsiasi cosa noi facciamo, prima o poi la ritroveremo sul motore di ricerca. Mentre il sogno di qualsiasi Webmaster è ritrovare il proprio sito in cima alla lista dei risultati di ricerca, un timido e discreto cittadino potrebbe non gradire una palese esposizione sul Web. Se abbiamo necessità di eliminare dai risultati una pagina che ci riguarda e non riusciamo a contattare l'autore, oppure se sono rimasti dei riferimento nella cache del motore, Googole mette a disposizione un proprio servizio di rimozione, raggiungibile all'URL http://www.google.com/webmasters/tools/removals. Per eliminare una pagina specifica bisogna inserire l'indirizzo corretto, indicare il motivo per cui si chiede la cancellazione e dare conferma. Tutte le richieste di rimozione vengono accodate in un elenco personale, così da poter tener sotto controllo lo stato di ciascuna di esse.

I commenti
Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:
<!-- questo è un commento -->
e ci permette di "commentare" i vari punti della pagina. Ad esempio:
<!-- menu di sinistra -->
<!-- barra in alto -->
<!-- eccetera -->

Tag per l'utilizzo di un iframe
<iframe src="html/registration.htm" name="Registration" border="0" frameborder="0" width="100%" height="100%" title="Registration"></iframe>

Codice html banner per siti , blog e forum
L'hmtl è un linguaggio descrittivo che funziona a tag , l'html è basilare per ogni sito web che c'è in circolazione , oggi vogliamo proporvi i codici html per creare un banner, utilissimi per proporre link.
Banner
Il banner è la cosidetta immagine che contiene un link :
<a href="http://www.sitodainserire.it">
<img src="http://www.sito.it/immagine.jpg" title="descrizione immagine">
</a>
Banner che apre in una nuova finestra o scheda
Un banner che permette al click di aprire il link in un altra pagina o scheda senza chiudere la precedente
<a href="http://www.sitodainserire.it" target="_blank>
<img src="http://www.sito.it/immagine.jpg" title="descrizione immagine">
</a>

Mi sapete consigliare un programma con il quale si possa creare una vera e propria radio in streaming?
Io mi metterei semplicemente davanti al microfono e poi al resto dovrebbe pensare il PC!
Di programmi per crearsi la propria radio on-line ce ne sono tanti, anche professionali e costosi (come l’italiano MB Studio). Ma se vuoi usare un programma gratuito, molto popolare, semplice e veloce, prova subito Subsonic. Puoi scaricare il programma da questo indirizzo: http://subsonic.sourceforge.net. Ha tutto quanto serve per mettere su una stazione radio, ascoltare la propria musica ovunque ti trovi e condividerla con gli amici. Il software integra server, player e gestore delle canzoni (fino a circa 100mila file su PC). È completamente basato sul Web e una volta installato e avviato il servizio, dovrai solo dire agli amici e a tutti coloro che vuoi prendano parte alla trasmissione
di connettersi al tuo indirizzo IP con il proprio browser, alla porta 80 (per esempio dovranno scrivere 80.228.244.23:80 nella barra degli indirizzi e premere Invio). Se non sai qual è il tuo IP, puoi scoprirlo in pochissimi istanti andando sul sito http://whatismyipaddress.com.

Silex CMS per creare siti in Flash
Silex: il CMS per creare siti Flash ottimizzati per i motori di ricerca
Nell’ambiente dei CMS open source oltre ai soliti noti (Joomla e Wordpress) esistono una discreta quantità di prodotti poco conosciuti, ma non per questo di scarsa qualità ed in grado di soddisfare le più svariate esigenze. Ad esempio molti hanno la necessità di creare un proprio portale per presentare sè stessi, la propria azienda o passione, e gradirebbero pertanto avere frà le mani un portale semplice, ma allo stesso tempo arricchito in maniera molto gradevole.
Solitamente la soluzione migliore è sviluppare un sito che sfrutti il formato Flash di Adobe che si presta benissimo in questi casi. Purtroppo però si presentano sempre due grossi problemi
* E’ necessario conoscere bene il Flash (oltre ovviamente agli altri linguaggi)
* Sono molto difficili da far indicizzare poichè i motori di ricerca non digeriscono bene i contenuti nei file SWF
A meno che non si gestisca il portale di un già noto brand, per via di queste motivazioni molti (giustamente) demordono preferendo altri linguaggi di programmazione. Oggi però potrebbe presentarsi una terza soluzione, un CMS che si prefigge come obbiettivo quello di risolvere entrambi questi problemi. Il suo nome è Silex Flash CMS.
Troppo bello per essere vero
Questo è quello che anche io mi sono detto mentre conoscevo questo software ma è proprio così. Anzitutto è semplice da installare, poichè necessita solo di un server con supporto per PHP 5 e niente più. Una volta scaricato il file .zip basta scompattarlo e fare l’upload al proprio server FTP ed il gioco è fatto.
Anche utilizzarlo ed impostarlo è veramente semplice e veloce. Per entrare nella sezione di amministrazione basterà cliccare col tasto destro del mouse sulla home-page ed apparirà il form per il login (l’username e la password di default è admin). L’interfaccia è completamente animata ed è organizzata in box che contengono tutte le opzioni e le impostazioni necessarie alla gestione del sito ed all’inserimento dei contenuti.
A questo punto dimenticatevi dei css e degli editor HTML poichè una volta definite le impostazioni principali, come ad esempio nome del sito, parole chiavi, dimensioni del layout tutto verrà gestito e modificato tramite la comoda interfaccia grafica di Silex. Quindi risulta alla portata di tutti, in teoria anche di chi non sà niente di programmazione web. Al limite è possibile importare i dati da un file css esterno.
Anche l’inserimento dei testi e dei vari contenuti è facile ed intuitivo, grazie alla interfaccia grafica in Flash corredata dal comodo editor WYSIWYG (What You See Is What You Get - Quello che vedi è ciò che ottieni) che rende tutto il lavoro veloce e per niente difficile, vista anche la potenza di tale strumento.
E il posizionamento?
Oltre alla grande facilità d’uso e di gestione c’è il fatto che Silex non si dimentica dei motori di ricerca e dei browser testuali. Infatti è in grado di produrre autonomamente le pagine in formato HTML da mostrare ai client che hanno difficoltà con il Flash, come appunto i crawler. In questo modo non verrà inficiato il posizionamento nelle serp, cosa che invece di solito, affligge tutti quei siti basati sulla tecnologia di Adobe.
I vantaggi proposti da questo software sono molti, ma ciò non vuol dire che sia esente da difetti. Infatti questo è un progetto ancora piuttosto giovane e ancora poco maturo. Non si conoscono i suoi bug e qualora l’utente li trovi dovrà risolverli da solo, poichè non c’è una community che lo segue e che collabora al suo sviluppo. Tutto quello che trovate è creato dai soli sviluppatori ufficiali.
Per cui al momento attuale è una buona soluzione per creare dei curriculum vitae multimediali o delle presentazioni da pubblicare online. Al limite lo si può utilizzare come “biglietto da visita” e falo girare in una pen-drive grazie all’ausilio di XAMPP, il noto pacchetto di software per emulare un vero e proprio webserver.
Se vuoi vedere dei siti creati con Silex visita il loro showcase.
http://silex-ria.org
http://sourceforge.net/projects/silex/

Motori di Ricerca (come funzionano)

Creare una voce elettronica da un testo scritto (ottimo per i siti web)
http://actor.loquendo.com/actordemo/default.asp

Elenco di file e cartelle speciali gestiti da FrontPage

Guida al posizionamento nei motori di ricerca
http://webmarketing.html.it/guide/leggi/61/guida-posizionamento-nei-motori-di-ricerca/

Come indicizzare un sito in Google (Vedi)

Aspetti Legali per la pubblicazione di siti e-commerce (Vedi)

Email multiple (Vedi)

Come si realizza un sito web accessibile e vincente (Vedi)

Controllo della compilazione dei campi - Verificare la corretta compilazione di un Form (***************************)
Il controllo della corretta compilazione dei campi dei Form è certamente uno degli "argomenti caldi" del webmastering.
In questo tutorial vedremo appunto come è possibile (grazie a Javascript) controllare la corretta compilazione di un modulo online.
Precisamente, verificheremo:
1) Che i campi non vengano lasciati vuoti ( useremo: ... value == "" )
2) La corretta formattazione di un indirizzo e-mail ( useremo: ... value.indexOf("@") == -1 )
Vediamo il codice HTML:
<script language="Javascript">
function ControllaForm()
{
var controllo=false;
if (document.form1.utente_nome.value == "" )
{
controllo=true;
alert("Attenzione: Hai lasciato vuoto un campo obbligatorio.\nIl form non sarà inviato");
}
if (document.form1.utente_email.value.indexOf("@") == -1 )
{
controllo=true;
alert("Attenzione: L'E-MAIL inserita non e' valida.\nIl form non sarà inviato");
}
if (document.form1.utente_msg.value == "" )
{
controllo=true;
alert("Attenzione: Hai lasciato vuoto un campo obbligatorio.\nIl form non sarà inviato");
}
if (controllo){return false}else{return true}
}
// -->
</SCRIPT>
<form method="post" name="form1" action="nome_script.ext" OnSubmit="return ControllaForm(this)">
Tuo nome:<br>
<input type="text" name="utente_nome" size="20"><br>
Tua e-mail<br>
<input type="text" name="utente_email" size="20"><br>
<br>
Tuo messaggio:<br>
<textarea name="utente_msg" cols="40" rows="4"></textarea><br>
<br>
<input type="submit" value="INVIA">
</form>
Come è facile notare tutto il meccanismo si impernia su due tipi di controllo.
Il controllo per i campi vuoti è assolutamente intuitivo ( == "" ). Ecco la sintassi:
if (document.NOME_FORM.NOME_CAMPO.value == "" )
{
controllo=true;
alert("MESSAGGIO DI ALERT");
}
Mentre per la verifica dell'indirizzo e-mail abbiamo usato "indexOf" per cercare all'interno di quel campo la chiocciolina (@). Ecco la sintasi:
if (document.NOME_FORM.NOME_CAMPO.value.indexOf("@") == -1 )
{
controllo=true;
alert("MESSAGGIO DI ALERT");
}
Se la chiocciolina non viene trovata "indexOf" restituirà "-1" attivando il relativo alert.

Header - Headings - Intestazione di una pagina WEB
<head>
<title>TITOLO DELLA BARRA ALTA</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta name="robots" content="INDEX,FOLLOW">
<meta http-equiv="content-language" content="de">
<meta name="description" content="descrizione sommaria">
<meta name="keywords" content="pippo, pippo, pippo, pippo, pippo, pippo, pippo, ">
<meta name="author" content="Nome dell'autore">
<meta name="publisher" content="Nome dell'autore">
<meta name="copyright" content="Nome dell'autore">
<meta name="audience" content="Alle">
<meta name="page-type" content="Anleitung">
<meta name="page-topic" content="Computer">
<meta name="creation_date" content="2007-02-19">
<meta name="revisit-after" content="3 days">

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<!--[if gte IE 5]>
<style type="text/css" media="screen">
#all{
height:443px;
width:659px;
margin: auto;
margin-top: 0px;
border: 1px solid #A3A3A3;
background-color: #FFFFFF;
}

</style>
<![endif]-->
<base target="_blank" />

</head>
 

Aprire Explorer a tutta pagina
Open In FullScreen Mode
You can get to full screen mode two ways. You can have the window simply open full screen by itself or set up a button or link that will open the window.
Internet Explorer user can also get to a kind-of full screen mode by just hitting F-11. If you're using MSIE, try it. Hit F-11 again to return to normal mode. Since it doesn't work in Netscape Navigator, I am not making it a subheading. I just wanted to mention it so you'll know the trick.
Let's start with just opening the browser in full screen mode. It's easy. Copy and paste this into the page's HEAD tag section:
<script>
<!--
window.open("bigpage.html","fs","fullscreen,scrollbars")
//-->
</script>
That format will give you scrollbars. If you don't want scrollbars, just alter the code a bit to this:
<script>
<!--
window.open("bigpage.html","fs","fullscreen=yes")
//-->
</script>
Note that the "fs" is simply a name I assigned to the page. You really don't even need that in there. The page will open without it. But what if you want to give the users the ability to close the window? Well then...
Close It Up
You might take it from the italic statements above that the newly opened full screen can be closed through hitting F-11. Nope. You need to offer the user the ability to close the window. Add this code to the newly opened page:
<A HREF="#" OnClick="window.close('fs')">Close window</A>
That will offer a link that closes the window named "fs". See why I used a name for the page?
If you'd like a button that closes the window, try this:
<FORM>
<INPUT TYPE="button" VALUE="Close the Window" onClick="window.close('fs')">
</FORM>
Click to Full Screen Mode
This is how I see the full screen mode used most often. A button or link is made available that opens a new window in full screen.
A button just like this:
Here's the code for the button and the script:
<script>
<!--
function fullwin(){
window.open("bigpage.html","bfs","fullscreen,scrollbars")
}
//-->
</script>
<center>
<form>
<input type="button" onClick="fullwin()" value="Open Full Screen Window">
</form>
</center>
If just a basic button that triggers the function equal to what I showed you up above to open a window on the fly. You can paste the function to the HEAD for the document and the button to the body if you'd like. I don't. Just plop it all in where I want the button.

Verificare la corretta compilazione di un Form (*****)
Il controllo della corretta compilazione dei campi dei Form è certamente uno degli "argomenti caldi" del webmastering.
In questo tutorial vedremo appunto come è possibile (grazie a Javascript) controllare la corretta compilazione di un modulo online.
Precisamente, verificheremo:
1) Che i campi non vengano lasciati vuoti ( useremo: ... value == "" )
2) La corretta formattazione di un indirizzo e-mail ( useremo: ... value.indexOf("@") == -1 )
Vediamo il codice HTML:

<script language="Javascript">
function ControllaForm()
{
var controllo=false;
if (document.form1.utente_nome.value == "" )
{
controllo=true;
alert("Attenzione: Hai lasciato vuoto un campo obbligatorio.\nIl form non sarà inviato");
}
if (document.form1.utente_email.value.indexOf("@") == -1 )
{
controllo=true;
alert("Attenzione: L'E-MAIL inserita non e' valida.\nIl form non sarà inviato");
}
if (document.form1.utente_msg.value == "" )
{
controllo=true;
alert("Attenzione: Hai lasciato vuoto un campo obbligatorio.\nIl form non sarà inviato");
}
if (controllo){return false}else{return true}
}
// -->
</SCRIPT>
<form method="post" name="form1" action="nome_script.ext" OnSubmit="return ControllaForm(this)">
Tuo nome:<br>
<input type="text" name="utente_nome" size="20"><br>
Tua e-mail<br>
<input type="text" name="utente_email" size="20"><br>
<br>
Tuo messaggio:<br>
<textarea name="utente_msg" cols="40" rows="4"></textarea><br>
<br>
<input type="submit" value="INVIA">
</form>
Come è facile notare tutto il meccanismo si impernia su due tipi di controllo.
Il controllo per i campi vuoti è assolutamente intuitivo ( == "" ). Ecco la sintassi:
if (document.NOME_FORM.NOME_CAMPO.value == "" )
{
controllo=true;
alert("MESSAGGIO DI ALERT");
}
Mentre per la verifica dell'indirizzo e-mail abbiamo usato "indexOf" per cercare all'interno di quel campo la chiocciolina (@). Ecco la sintasi:
if (document.NOME_FORM.NOME_CAMPO.value.indexOf("@") == -1 )
{
controllo=true;
alert("MESSAGGIO DI ALERT");
}
Se la chiocciolina non viene trovata "indexOf" restituirà "-1" attivando il relativo alert.

Protezione dei file su server APACHE
Per creare delle cartelle su un vostro sito web protette da password dovete fare:
1) Collegatevi via ftp al vostro sito web
2) Createvi un file di nome .htaccess con notepad con il seguente contenuto:
Codice:
AuthUserFile /percorso-sito/dir-protetta/.htpasswd
AuthGroupFile /dev/null
AuthName "Mia Directory Protetta"
AuthType Basic
<Limit GET>
require valid-user
</Limit>
Dovete personalizzare la riga AuthUserFile inserendo il percorso del file .htpasswd
In AuthName si inserite il nome che volete dare alla finestra di login (nell'esempio: Mia Directory Protetta)
N.B. il file .htaccess deve essere creato nella cartella che si vuole proteggere da password.
3) Creare il file .htpasswd.
In questo file andremo a scrivere la lista degli utenti autorizzati e la relativa password nel seguente formato:
nome:password
la password dovrà essere inserita in formato md5 per farlo accedete a questi siti:
http://webxtractions.com/cgi-bin/password.cgi
http://www.askapache.com/online-tools/htpasswd-generator/
inserite username e password che volete utilizzare per il vostro file e successivamente premete il tasto "Encrypt it".
ESEMPIO: user mike password pippo
>uscirà: mike:92gmxL87pzQW6
questo è quello che dovete inserire nel file .htpasswd
ATTENZIONE:
Il file .htpasswd e il file .htaccess NON DEVONO AVERE ALCUNA ESTENSIONE
CONSIGLI:
- Utilizzate password con lunghezza minima di 12 caratteri.
- La directory contenente il file .htpasswd dovrebbe trovarsi in una directory esterna a quella in cui è depositato il sito (se utilizzate un NAS Synology, vuol dire fuori dalla cartella "web"). Tale cartella dovrebbe avere un accesso esclusivo al solo amministratore del sistema.

Standard HEAD
<head>
<title>TITOLO DELLA BARRA ALTA</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta name="robots" content="INDEX,FOLLOW">
<meta http-equiv="content-language" content="de">
<meta name="description" content="descrizione sommaria">
<meta name="keywords" content="pippo, pippo, pippo, pippo, pippo, pippo, pippo">
<meta name="author" content="Nome dell'autore">
<meta name="publisher" content="Nome dell'autore">
<meta name="copyright" content="Nome dell'autore">
<meta name="audience" content="Alle">
<meta name="page-type" content="Anleitung">
<meta name="page-topic" content="Computer">
<meta name="creation_date" content="2007-02-19">
<meta name="revisit-after" content="3 days">
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if gte IE 5]>
<style type="text/css" media="screen">
#all{
height:443px;
width:659px;
margin: auto;
margin-top: 0px;
border: 1px solid #A3A3A3;
background-color: #FFFFFF;
}
</style>
<![endif]-->
<base target="_blank" />
</head>

Cosa e' il redirect? Come si realizza un redirect?
Attraverso la procedura del redirect è possibile inoltrare le visite di un sito web verso un altro sito web senza che l'utente se ne accorga. Inoltre è possibile inoltrare un messaggio di posta elettronica ad un indirizzo diverso.
Esempi di Redirect ad un'altra pagina web tramite script HTML/JS/PHP/ASP/JSP/Coldfusion

Esempio di redirezione in HTML [file da creare "index.htm"]
<HTML> <HEAD> <TITLE>Redirect...</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT="0; URL=http://www.google.com"> </HEAD> <BODY> Redirect in corso... </BODY> </HTML>
 
Esempio di redirezione in PHP [file da creare "index.php"]
<?php
header("Location: http://www.google.com");
/* oppure */
header("Refresh: 0; URL=http://www.google.com");
?>
 
Esempio di redirezione in ASP [file da creare "default.asp"]
<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently"
Response.AddHeader "Location", "http://www.google.com"
%>
<!-- oppure //-->
<%
Response.Buffer = true
%>
<html>
<%
Response.Redirect("http://www.google.com")
%>
<HEAD>
<TITLE>Redirect...</TITLE>
</HEAD>
<BODY>
Redirect in corso...
</BODY>
</HTML>
 
Esempio di redirezione in JSP [file da creare "index.jsp"]
<%
String redirectURL = "http://www.google.com/";
response.sendRedirect(redirectURL);
%>
Il redirect in una pagina JSP puo' essere implementato inserendo un richiamo alla funzione response.sendRedirect() in uno scriptlet. Ogni output generato deve essere posto dopo questo richiamo, altrimenti la pagina mosterà un errore del tipo "exception".
 
Esempio di redirezione in Coldfusion [file da creare "index.cf"].
<cflocation url="http://www.google.com">
Il tag <cflocation> esegue un "redirect" del browser alla pagina specificata nell'attributo URL

Marquee
<script language="JavaScript1.2">
//Specify the marquee's width (in pixels)
var marqueewidth=480
//Specify the marquee's height (in pixels, pertains only to NS)
var marqueeheight=10
//Specify the marquee's scroll speed (larger is faster)
var speed=4
//Specify the marquee contents
var marqueecontents='<span class="arancio">1.
<a href="NEWS1.html" class="bigwhite">
<strong>NEWS1</strong></a>&nbsp;&nbsp;&nbsp;
2. <a href="NEWS2.html" class="bigwhite">
<strong>NEW 2</strong>
</a>&nbsp;&nbsp;&nbsp;3. <a href="news3.html"
class="bigwhite">
<strong>NEWS3
</strong></a>&nbsp;&nbsp;&nbsp;4. <a href="NEWS4.html"
class="bigwhite"><strong>NEWS4</strong></a>&nbsp;&nbsp;&nbsp;5.
</a>&nbsp;&nbsp;&nbsp;</span>'
var nomebrowser = navigator.appName
if (nomebrowser == "Microsoft Internet Explorer"){
document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>');
}
</script>

Inserire la data
<SCRIPT LANGUAGE = "JavaScript">
var dayNames = new Array("Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato");
var monthNames = new Array("Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio", "Agosto","Settembre","Ottobre","Novembre","Dicembre");
var dt = new Date(); var y = dt.getYear();
if (y < 1000) y +=1900;
document.write ("Parma, " + dayNames[dt.getDay()] + " " + dt.getDate() + " " + monthNames[dt.getMonth()] + " " + y);
</SCRIPT>

Rollover
Descrizione: Uno script che permette di creare un utilissimo menu con effetto rollover (facilmente configurabile dall'utente).
Istruzioni per l'uso: Inserite le varie istruzioni all'interno della pagina destinata al Web.
Note: Attenersi scrupolosamente alle indicazioni insertite all'interno del listato riportato sotto (vi possono essere delle parti che vanno aggiunte nell'head ed alcune nel body).
<!-- Copiare il codice nell'head della pagina html -->
<STYLE>
/*
Definisce il rollover usando CSS.
*/
.on {
font-size: 18;
text-decoration: underline;
color: red;
}

.off {
font-size: 16;
text-decoration: none;
color: black;
}
</STYLE>
<!-- Copiare il codice nel body della pagina html -->
<UL>
<!--
These three links are example rollovers. To create more, just cut and paste,
there's no need to modify any non-HTML code.
-->
<LI>
<A
HREF = ".htm"
CLASS = "off"
onMouseOver = "this.className ='on';"
onMouseOut = "this.className = 'off';">Indice
</A>

<LI>
<A
HREF = ".htm"
CLASS = "off"
onMouseOver = "this.className ='on';"
onMouseOut = "this.className = 'off';">Indice1
</A>

<LI>
<A
HREF = ".htm"
CLASS = "off"
onMouseOver = "this.className ='on';"
onMouseOut = "this.className = 'off';">Indice2
</A>

</UL>

Create a table of contents based on the navigation structure
Important This functionality is not available if you connect to a server that is running Microsoft Windows SharePoint Services.
In Page view, place the insertion point where you want to create a table of contents.
On the Insert menu, click Web Component.
In the Component type list, click Table of Contents.
In the Choose a table of contents list, click For This Web Site, and then click Finish.
In the Page URL for starting point of table box, locate and click the page that you want to use as the starting point for the table of contents.
The starting point determines which pages are leftmost in the table of contents. Pages pointed to by hyperlinks on the starting page will be indented one level in the table of contents.
In the Heading font size list, select the font size you want.
Create a table of contents or site map based on categories
Assign each page that you want to appear in your table of contents or site map to a category.
How?
In the Folder List, right-click the page that you want to assign to a category, and then click Properties on the shortcut menu.
Click the Workgroup tab.
In the Available Categories list, click the category that you want to assign the page to.
If you want to create a new category, click Categories, type the name of the new category, click Add, and then click OK.
To assign a page to more than one category, repeat steps 1 through 3 for each page.
In Page view, place the insertion point where you want to add the first category of pages in the table of contents or site map, type a heading, and then press ENTER.
On the Insert menu, click Web Component.
In the Component type list, click Table of Contents.
In the Choose a table of contents list, click Based on Page Category, and then click Finish.
In the Choose categories to list files by box, select the check box next to each page category of that you want to include in your table of contents or site map.
In the Sort files by box, do one of the following:
To sort the list alphabetically, select Document title.
To sort the list by file dates, select Date last modified.
Under Include the following information, do one or more of the following:
To include the file modification date, select the Date the file was last modified check box.
To include comments that have been added to each page in the list, select the Comments added to the file check box.
Repeat these steps for each additional page category that you want to include in your table of contents or site map.
Note To view the text on the links, on the File menu, point to Preview in Browser, and then click the Web browser that you want.
Tip
If you are creating a table of contents or site map on the same page as the starting point, the heading of the table of contents will be a hyperlink to the same page. For example, if you create a table of contents on the page Index.htm, and the starting point is Index.htm (the same page), the heading of the table will be a hyperlink to Index.htm. If you want to exclude such a circular hyperlink as the heading of a table of contents or site map, click None in the Heading font size box.
UN TITOLO PER OGNI PAGINA
La scelta di un titolo per ogni pagina è importante. Questo titolo comparirà nella barra del titolo della finestra del browser mentre l'utente visita la pagine, ma anche, ed è la cosa più importante, negli elenchi delle pagine presentati dai motori di ricerca quando viene posta una domanda dall'utente. E' quindi necessario che il titolo sia esplicito. I nostri consigli sono i seguenti:
- Evita i titoli generici come "Home Page". Questo titolo è scontato, eppure la maggior parte dei siti utilizza ancora titoli di questo genere.
- Scegli un titolo corto. I titoli troppo lunghi vengono troncati quando i motori di ricerca pubblicano gli elenchi.
- Evita i titoli eccessivi come "Il migliore servizio di annunci immobiliari del mondo". Spesso la modestia si paga.
- Esegui una ricerca dei siti che possono essere paragonati al tuo con un motore di ricerca. Guarda quali sono i titoli che ti invogliano a visitare un sito e quelli che tendono a dissuaderli.
UN ELEMENTO FONDAMENTALE: LA DESCRIZIONE
Come il titolo, anche la descrizione del tuo sito è importante. Questo è infatti il testo che sarà riportato negli elenchi dei siti pubblicati dai motori di ricerca. E' quindi necessario che la descrizione di ognuna delle pagine sia abbastanza esplicita da offrire una buona idea di quello che il sito contiene. I nostri consigli sono i seguenti:
- Come per il titolo, pensa a creare una descrizione specifica per ogni pagina. Tieni conto anche che i motori di ricerca possono proporre una pagina qualunque del tuo sito.
- La descrizione non deve essere troppo lunga perché corre il rischio di essere troncata. Cerca di non superare le cinquanta parole.
LE PAROLE CHIAVI
La parola chiave che scegli mentre scrivi le pagine conservano la loro importanza, anche se sempre più motori di ricerca si basano sul contenuto completo e non solamente sulle parole chiavi. Per quanto concerne l'aspetto tecnico non c'è altro da dire. Ora, occorre definire una strategia di scelta e di utilizzo della parola chiave.
* Il lavoro e' effettuato manualmente da un tecnico qualificato
* Per nuovi e già presenti siti sul Web
* Per iscriversi c'e' solo un semplice modulo d' ordine
* Vi arriverà un Email di conferma da molti Motori di Ricerca e directories ai quali il Vs. sito e' stato registrato
* E' consigliabile ripetere la registrazione almeno 5/6 volte nell'arco di un anno.

Corretta intestazione delle pagine
<title>TITOLO PAGINA</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Author" content="NOME AUTORE">
<meta name="ROBOTS" content="INDEX,FOLLOW">
<meta name="resource-type" content="DESCRIZIONE SOMMARIA">
<meta name="revisit-after" content="30 Days">
<meta name="classification" content="CLASSIFICAZIONE PAGINA">
<meta name="description" content="DESCRIZIONE ANALITICA">
<meta name="keywords" content="KEYWORDS">
<meta name="robots" content="ALL">
<meta name="distribution" content="GLOBAL">
<meta name="rating" content="GENERAL">
<meta name="copyright" content="AUTORE">
<meta name="author" content="AUTORE">
<meta name="language" content="it">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<link rel="stylesheet" href="foglio.css" type="text/css">

Inserire in una pagina web un filmato Wmv - Embed WMV
Come inserire un filmato win media player in una pagina web
<object id="MediaPlayer" width=320 height=286 classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Windows Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="http://yourdomain/yourmovie.wmv">
<param name="Showcontrols" value="True">
<param name="autoStart" value="True">
<embed type="application/x-mplayer2" src="nomefile.wmv" name="MediaPlayer" width=320 height=240></embed>
</object>
============================================
<object id="MediaPlayer" width="320" height="312" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject" align="middle">
<param name="FileName" value="http://yourdomain/Ambiente_Scisti_080730.wmv" />
<param name="ShowControls" value="true" />
<param name="ShowStatusBar" value="true" />
<param name="ShowDisplay" value="false" />
<param name="AnimationAtStart" value="1" />
<param name="AutoSize" value="0" />
<param name="autostart" value="true" />
<param name="BufferingTime" value="5" />
<param name="Loop" value="1" />
<param name="windowlessVideo" value="True" />
<param name="stretchToFit" value="True" />
<embed type="application/x-mplayer2" src="http://yourdomain/Ambiente_Scisti_080730.wmv" name="MediaPlayer" stretchToFit="True" windowlessVideo="True" width="320" height="312" animationatstart="1" showcontrols="1" showstatusbar="1" showdisplay="0" autostart="1" loop="1"></embed>
</object>

Creare una pagina web per gestire un file Real Media (.ra/.ram)
Per gestire un file Real Media (.rm) con una pagina Web vi consigliamo di utilizzare la creazione guidata disponibile all'interno del programma RealProducer.
La creazione guidata genera una pagina HTML contenete tutto il codice e i marcatori necessari per la gistione del file Real Media; questa pagina potrà poi essere editata con il vostro software di Web Publishing (tipo FrontPage, Dreamweaver, ecc...).
COME PROCEDERE...
Aprite RealProducer, andate sul menù "Tools" e cliccate su "Create Web Page...", in questo modo si apre la prima finestra della creazione guidata (Web Page Wizard).
La prima pagina è solamente un'introduzione - cliccate sul pulsante [NEXT].
Nella seconda pagina dovete inserire il percorso e il nome del file .rm che volete inserire nella pagina Web, per far questo cliccate sul pulsante [BROWSE...] e andate a cercare il file .rm sul vostro hard disk - cliccate sul pulsante [NEXT].
La terza finestra vi permette di scegliere in che modo verrà visualizzato video:
* "Pop-up Player" - il file video verrà aperto esternamente alla pagina Web con il lettore predefinito per i file .rm.
Questa modalità è quella maggiormente utilizzata perchè l'utente può usare il lettore che preferisce.
Clicca qui per vedere un esempio di Pop-up Player.
* "Embedded Player" - il file video rimane interno alla pagina; in questo caso dovete scegliere quali comandi inserire nella pagina Web, cliccate su [NEXT] e nelle pagina successiva potete scegliere tra: "Standard Player", "Play and Stop buttons", "Control Panel", "Control Panel and Information Panel", "Control Panel and Status Panel" e "Banner Ad".
Per vedere le differenze tra queste modalità cliccate sugli esempi seguenti:
o Standard Player
o Play and Stop buttons
o Control Panel
o Control Panel and Information Panel
o Control Panel and Status Panel
o Banner Ad
Dopo aver scelto la modalità di visione, potete abilitare anche l'opzione "Auto Start" per far partire automaticamente il video quando l'utente apre la pagina Web - cliccate sul pulsante [NEXT].
Nella finestra successiva dovete inserire il titolo della pagina (Caption), poi cliccate sul pulsante [NEXT].
A questo punto dovete dare un nome al file della pagina Web (con estensione .htm o .html) e salvarla da qualche parte sul vostro hard disk - cliccate sul pulsante [NEXT].
L'ultima pagina vi riassume quelle che verrà creato, cioè il nome della pagina Web, il percorso dove verrà salvata e il nome del file .ram o .rpm che verrà generato dal programma - cliccate sul pulsante [FINISH] - RealProducer genera il file .html o .htm e il file .ram o .rpm.
Il file .ram viene generato se avete scelto il "Pop-up Player" e contiene il percorso del file .rm sul vostro hard disk.
Il file .rpm viene generato se avete scelto "Embedded Player" e contiene il percorso del file .rm sul vostro hard disk.
ATTENZIONE!!!
Quando pubblicherete la pagina Web sul vostro server dovrete editare il file .ram o .rpm e inserire il percorso esatto del file .rm sul server Web (esempio: http://www.mioserver.xxx/miofile.rm).
Per editare i file .ram e .rpm potete utilizzare Blocco Note di Windows.
Anche il file della pagina Web (.html) contiene un tag META con il percorso del file .rm; e anche questo deve essere modificato quando pubblicate la pagina sul vostro server Web.
Se non siete esperti del linguaggio HTML vi consigliamo di utilizzare la pubblicazione guidada della pagina Web disponibile nei "Tools" di RealProducer.
Il file .ram o .rpm consigliamo di inserirlo nella stessa cartella in cui posizionate la pagina Web; se lo mettete in un altro percorso dovrete modificare, sulla pagina Web, tutti i link verso questo file.
Prima di pubblicare la pagina Web sul server potete provarla "in locale" facendo doppio clic sul file con estensione .html, ed eventualmente potete anche editarla e modificarla con un programma adatto (FrontPage, Dreamweaver, ecc...).
INFORMAZIONI SUI TAG META
Per chi ha dimistichezza con il linguaggio HTML riportiamo qui di seguito i tag META che devono essere inseriti in una pagina Web per gestire un file .rm.
La pagina Web che viene utilizzata per la gestione di file Real Media deve avere in seguenti tab META inseriti tra i tag <HEAD> e </HEAD>.
<meta name="rnpagelayout" content="pop-up">
Il tag "rnpagelayout" determina il modo in cui verrà visualizzato il video, le opzioni sono:
* "pop-up" - il video viene aperto all'esterno della pagina con un lettore adatto
* "embedded" - il video viene aperto sulla pagina
<meta name="rnserverpath" content="http://www.mioserver.xxx/video">
Il tag "rnserverpath" è il percorso sul server Web del file .rm (ricordarsi di inserire anche http:// davanti a www.mioserver.xxx)
<meta name="rnmediafile" content="miofile.rm">
Il tag "rnmediafile" contiene il nome del file .rm
<meta name="rnmetafile" content="miofile.ram">
Il tag "rnmetafile" contiene il nome del file .ram o .rpm
Oltre a questi tag è possibile inserire anche i classici tag META "description", "keywords" e "generator".

QuickTime: incorporare contenuto QuickTime per la distribuzione tramite Web
Il tag <EMBED> consente di gestire mediante un'applicazione o un plugin esterno tipi di documenti multimediali diversi da quelli direttamente supportati dal browser. In questo caso, l'applicazione esterna è QuickTime Player e il plugin QuickTime.
Dall'introduzione di Internet Explorer 5.5 SP2 e versioni successive, è necessario utilizzare un tag <OBJECT> oltre al tag <EMBED> per ottenere pagine web compatibili sia con Netscape che con Internet Explorer su sistemi Mac e Windows.
L'elenco degli attributi <EMBED> è lungo; di seguito vengono illustrati gli attributi <EMBED> specifici per QuickTime.
Criteri basilari
Il tag <EMBED> è simile al tag <IMG> ed entrambi hanno parametri SRC, WIDTH e HEIGHT. Si tratta di parametri obbligatori, che indicano al browser il materiale multimediale da visualizzare e la larghezza e altezza dell'oggetto multimediale specificato nell'attributo SRC.
Ad esempio:
<embed src="sample.mov" width="320" height="256"></embed>
L'attributo SRC indica il documento multimediale da visualizzare in base a un URL assoluto o relativo. L'attributo HEIGHT specifica la dimensione verticale in pixel dell'attributo SRC. L'attributo WIDTH ne specifica invece la dimensione orizzontale.
IMPORTANTE
Per assicurare una visualizzazione corretta del controller, aggiungere 16 pixel all'altezza di un filmato.
Ad esempio, per un filmato con altezza pari a 240 pixel, specificare HEIGHT="256": <embed src="sample.mov" width="320" height="256"></embed>
Per un filmato composto da solo audio, utilizzare un'altezza pari a 16 per il controller e qualsiasi larghezza che offra buoni risultati sulla pagina web. Se si imposta una larghezza di 16 per un filmato di solo audio, il controller viene ridotto a un singolo pulsante di riproduzione/pausa.
Ad esempio:
<embed src="sound.mov" width="216" height="16"></embed>
Non specificare mai un valore minore di 2 per HEIGHT o WIDTH, nemmeno in caso di filmati nascosti.
Attributi del tag EMBED
Vedi quicktimeweb.htm

Real Audio nelle pagine HTML
Per poter inserire file Real Audio nelle pagine HTML e poter ascoltare i file occorrono i seguenti strumenti. Di questi software solo il player non è ancora disponibile per Linux.
* Il player Real Audio per eseguire ed ascoltare file Real Audio (.ra) e Real Audio/Video (.rm)
* Il Plug-in per Real Audio (Netscape 3.0 o Superiore)
* Real Encoder per convertire file .wav in file .ra
* Un server Real Audio per consentire lo streaming, ovvero l'ascolto durante il download dei file.
Inserimento un file Real Audio in una pagina HTML
L'inserimento di un file Real Audio all'interno di una pagina HTML, può essere effettuato in più modi:
Utilizzo del Player come Helper Application per l'ascolto del file
1. Installare Real Player 5.1, con il plugin per l'ascolto in-line dalle pagine HTML dei file Real Audio
2. Inserire nelle pagine HTML un link al file Real Audio (ra) depositato sotto la root dei documenti HTML:
<a href="http://nome_sito/RealAudioFile.ra>Clicca per ascoltare il file Real Audio</a>
Utilizzo del Pug-in per l'ascolto del file direttamente dalla pagina
3. l'inserimento direttamente in una pagina HTML di un file RealAudio, ascoltabile senza Player ma con l'apposito Plugin, viene gestito diversamente e necessita di una procedura un pò più laboriosa:
occorre creare un metafile, ovvero un semplice file di testo depositato contente almeno l'URL del sito con il path al file da eseguire (ra):
http://nome_sito/Real AudioFile.ra
Questo file deve avere estensione .rpm per essere eseguito dal plug-in oppure .ram per essere eseguito dal Player, allo stesso modo del link diretto al file .ra (vedi sopra), ma realizzato utilizzando un metafile.
Il file HTML contente il puntamento al metafile utilizzarà il TAG embed:
<embed src="nomde_metafile.rpm" autostart="true" controls="Defaults" width="128" height="128">
Occorre accertare che il server su cui va in esecuzione il file .ra abbia il mime.types corretamente configurati:
x-pn-realaudio ram ra rm x-pn-realaudio-plugin rpm In questo modo il server sarà in grado di interpretare corretamente le estensioni e consentire l'utilizzo del player oppure del plug-in
Estensioni RealAudio/ Video
Le estensioni citate hanno significati differenti:
* RealMedia clip (.rm) - File Real Audio/Video contenti entrambi i formati
* RealVideo metafile (.ram) - metafile che consento la connessione a siti con file Real Audio
* RealPlayer Plug-in metafile (.rpm) - come quelli precednti ma con l'esecuzione dei file direttamente da Netscape 3.0 o superiore come Plug-in
* RealAudio clip (.ra) - File in solo formato Audio

Posizione di una pop-up
Per posizionare la vostra pop-up in una posizione predefinita dello schermo basta inserisere questo codice:
<html>
<head>
<title>Pagina principale </title>
<script language="JavaScript">
popup()
{
idpopup = window.open("prova.htm","nuovapopup","width=200,height=200");
// Setto la posizione
idpopup.window.moveBy(500, 500);
}
</script>
</head>
<a href="#" onclick="popup();">Pop-up</a>
</body>
</html>
Basta modificare le cordinate, per far apparire la pop-up dove nella posizione desiderata.

Cambiare l'icona del proprio sito
Per far apparire un'icona sulla barra degli indirizzi del vostro sito, basta poggiare nella directory principale del vostro sito l'immagine che vi siete creati, con il nome:
favicon.ico
L'icona però, non deve essere creata con il paint o il firework e poi rinominata , ma con programmi per realizzare icone come "Microangelo".
Inoltre è possibile anche mettere la stessa icona accanto al titolo del vostro sito dell' utente che lo inserisce tra i preferiti.
Basta inserire tra i tag <head> </head> il seguente codice:
<LINK REL="SHORTCUT ICON" HREF= "http://favicon.ico">

MessageBox in javascript: Gli alert
Con l'uso di javascript è possibile fare numerosi controlli in una pagina web, sono proprio le potenzialità di controllo di questo linguaggio di scripting, a far si che javascript venga ancora ampliamente utilizzato.
Una tra tra prime cose che un programmatore javascript deve imparare, sono gli alert.
Gli alert, sono come i MessageBox di visual basic o VBScript, e servono per l'appunto ad inviare messaggi a video.
Vediamo adesso il codice per produrre un generico alert premendo un semplice bottone:
<input type="button" value="Leggi il messaggio " onClick="window.alert('Ciao a tutti!')">
Con questo codice invece, richiamiano l'alert da una funzione javascript:
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
function mostraMessaggi()
{
alert("Hello world!");
alert("Questo è un messaggio!");
}
</script>
</head>
<body>
<a href="javascript:mostraMessaggi()">Vedi messaggi </a>
</body>
</html>
Lo stesso codice può essere adottato per far apparire a video i messaggi al caricamento della pagina oppure alla chiusura della pagina.
Vediamo come stampare a video dei messaggi al caricamento di una pagina:
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
function mostraMessaggi()
{
alert("Hello world!");
alert("Questo è un messaggio!");
}
</script>
</head>
<body onLoad="mostraMessaggio()">
Corpo della nostra pagina
</body>
</html>
Invece questo codice stampa a video i messaggi all'uscita di una pagina:
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
function mostraMessaggi()
{
alert("Hello world!");
alert("Questo è un messaggio!");
}
</script>
</head>
<body onUnLoad="mostraMessaggio()">
Corpo della nostra pagina
</body>
</html>

Posso disabilitare i bottoni dopo l'invio del form per evitare invii multipli?
Si. Basta utilizzare la proprietà disabled del tag <input>.
Ad esempio, data la seguente struttura HTML:
<form name="mio">
<input type="submit" name="mioInput">
</form>
Basterà scrivere:
mio.mioInput.disabled=true;

Posizione di una pop-up
Per posizionare la vostra pop-up in una posizione predefinita dello schermo basta inserisere questo codice:
<html>
<head>
<title>Pagina principale </title>
<script language="JavaScript">

()
{
idpopup = window.open("prova.htm","nuovapopup","width=200,height=200");
// Setto la posizione
idpopup.window.moveBy(500, 500);
}
</script>
</head>
<body>
<a href="#" onclick="popup();">Pop-up</a>
</body>
</html>
Basta modificare le cordinate, (scritte in verde) per far apparire la pop-up dove nella posizione desiderata.

Cambiare l'cona del proprio sito
Per far apparire un'icona sulla barra degli indirizzi del vostro sito, basta poggiare nella directory principale del vostro sito l'immagine che vi siete creati, con il nome:
favicon.ico
L'icona però, non deve essere creata con il paint o il firework e poi rinominata , ma con programmi per realizzare icone come "Microangelo".
Inoltre è possibile anche mettere la stessa icona accanto al titolo del vostro sito dell' utente che lo inserisce tra i preferiti.
Basta inserire tra i tag <head> </head> il seguente codice:
<LINK REL="SHORTCUT ICON" HREF= "http://favicon.ico">

Gli alert
Con l'uso di javascript è possibile fare numerosi controlli in una pagina web, sono proprio le potenzialità di controllo di questo linguaggio di scripting, a far si che javascript venga ancora ampliamente utilizzato.
Una tra tra prime cose che un programmatore javascript deve imparare, sono gli alert.
Gli alert, sono come i MessageBox di visual basic o VBScript, e servono per l'appunto ad inviare messaggi a video.
Vediamo adesso il codice per produrre un generico alert premendo un semplice bottone:
<input type="button" value="Leggi il messaggio " onClick="window.alert('Ciao a tutti!')">
Con questo codice invece, richiamiano l'alert da una funzione javascript:
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
function mostraMessaggi()
{
alert("Hello world!");
alert("Questo è un messaggio!");
}
</script>
</head>
<body>
<a href="javascript:mostraMessaggi()">Vedi messaggi </a>
</body>
</html>
Lo stesso codice può essere adottato per far apparire a video i messaggi al caricamento della pagina oppure alla chiusura della pagina.
Vediamo come stampare a video dei messaggi al caricamento di una pagina:
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
function mostraMessaggi()
{
alert("Hello world!");
alert("Questo è un messaggio!");
}
</script>
</head>
<body onLoad="mostraMessaggio()">
Corpo della nostra pagina
</body>
</html>
Invece questo codice stampa a video i messaggi all'uscita di una pagina:
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
function mostraMessaggi()
{
alert("Hello world!");
alert("Questo è un messaggio!");
}
</script>
</head>
<body onUnLoad="mostraMessaggio()">
Corpo della nostra pagina
</body>
</html>

Sfondo centrato e fisso
<body style="background-image: url(nomeimmagine.gif o jpg); background-attachment:fixed;">

Sfondo fisso e caratteristiche del testo senza css (fogli di stile)
<body style="background-image: url(nomeimmagine.gif o jpg); background-attachment:fixed;" text="#000000" bgcolor="#FFFFFF" link="#0000EE" vlink="#551A8B" alink="#FF0000">

Aggiungere un'icona all'interno del menù Preferiti di Explorer
Durante la navigazione, qualche volta vi sarà capitato di aver posto all'interno del menù "Preferiti" di Internet Explorer il collegamento ad un sito di vostro gradimento.
Talvolta vi sarà capitato di vedere comparire nel menù "Preferiti", accanto al nome del sito, anche una piccola icona.
Se avete una vostra pagina sul web e volete approfittare di questo piccolo "gadget", ecco come fare.
Create un'icona 16x16, denominatela favicon.ico e memorizzatela nella cartella principale (root) del vostro sito.
A questo punto inserite nel codice html, immediatamente dopo la tag <HEAD>, quanto segue:
<LINK REL="SHORTCUT ICON" HREF="http://www.miosito.it/favicon.ico">
Sostituite infine http://www.miosito. it, l'URL corretto del vostro sito ed è fatta.

Mandare in stampa una pagina al caricamento
Inserire nel tag body:
onload="window.print()"

Come posso animare la "Title bar"
Nella head
<title>Title animato asdfkaòlskjfòlajksdf</title>
Prima di chiudere la head
<SCRIPT LANGUAGE="JavaScript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()
</script>
Iniziare con il tag body

Posso stampare il contenuto di un frame da un altro frame?

Sì con:
parent.nomeFrame.focus();
parent.nomeFrame.print();

 

Immagine che cambia con un click
<IMG SRC="01.gif" name="AceJSimage" onClick="AceJSswapper();">
<SCRIPT LANGUAGE="JavaScript">
var wImage = false;
function AceJSswapper(){
wImage = !wImage;
if (wImage == true) {document.AceJSimage.src="02.gif";}
if (wImage == false) {document.AceJSimage.src="01.gif";}
}
</SCRIPT>

 

Come posso creare un tasto "stampa" con JavaScript?
<img src="icona.gif" onclick="window.print()">

 

Come posso aprire una finestra della larghezza che voglio e posizionarla sullo schermo nel punto che preferisco?
Così:
window.open('XXXXXX.htm', 'nome della titlebar', 'width="300",height="300",left="100",top="100",menubar,toolbar');

 

Come posso evitare che nella status bar, al passaggio dei mouse sui link della pagina, compaia l'url del link?
<a href="http://www.XXXXXX.it" onmouseover="status='';return true">text link</a>

 

Creare un semplice rollover con immagini
<a href="http://www.XXXXXXl.it" onmouseover=image1.src="01.gif" onmouseout=image1.src="02.gif">
<img name="image1" src="02.gif" border="0"></a>

Chiudere una popup
E' sufficiente creare un link con questo codice:
javascript:window.close()

Mostrare Data e ora nella "title"
E' sufficiente inserire nella "head" il seguente codice:
<script language="JavaScript">
<!--
function doTheClock() {
   window.setTimeout( "doTheClock()", 1000 );
   t = new Date();
   if(document.all || document.getElementById){
      document.title = t.toString();
   }else{  
      self.status = t.toString();
   }
}

doTheClock()

//-->
</script>

Disabilitazione del tasto destro del mouse (senza messaggio di errore)
Inserire nella head il seguente codice:
<script language="Javascript1.2">
function nrcIE(){
if (document.all){return false;}}
function nrcNS(e){
if(document.layers||(document.getElementById&&!document.all)){
if (e.which==2||e.which==3){
return false;}}}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=nrcNS;
}else{document.onmouseup=nrcNS;document.oncontextmenu=nrcIE;}
document.oncontextmenu=new Function("return false");
</script>

Cambiare lo sfondo della pagina con un link
Inserire questo codice
Nella head inserire questo codice:
<script language="JavaScript">
<!--
var backColor = new Array();
backColor[0] = '#FF0000';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
//-->
</script>
Nei link o nelle voci che vogliamo utilizzare per attivare la modifica dello sfondo:
Codice per il semplice passaggio
<a href="#" onMouseOver="javascript:changeBG(0)">Cambia</a><br>
<a href="#" onMouseOver="javascript:changeBG(1)">Cambia</a><br>
<a href="#" onMouseOver="javascript:changeBG(2)">Cambia</a><br>
Codice per il click
<a href="javascript:changeBG(0)">Clicca</a><br>
<a href="javascript:changeBG(1)">Clicca</a><br>
<a href="javascript:changeBG(2)">Clicca</a><br>

Testo Lampeggiante
Ottenere un testo lampeggiante prima era molto semplice: bastava aggiungere il tag blink ed era fatta. Il codice era il seguente:
<blink>TESTO LAMPEGGIANTE</blink>
Chi usa Netscape, Mozilla o FireFox dovrebbe vedere l'effetto, mentre, visto che invece il browser MSIE non supporta più tale metodo, occorre inserire uno JavaScript.
Ecco l'effetto:
TESTO LAMPEGGIANTE
SPIEGAZIONI
PASSO UNO
Inserire il seguente script JavaScript fra i tags <head> ed </head>della pagina:
<script language=javascript>
var c1='#E0E4E3'
var c2='navy'
function colore1(){
codice='<font color=' + c1+ '><b>TESTO LAMPEGGIANTE</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML = codice
}
attesa = window.setTimeout("colore2()",500);
}
function colore2(){
codice='<font color=' + c2 + '><b>TESTO LAMPEGGIANTE</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML =codice
}
attesa = window.setTimeout("colore1()",500)
}
function avvia()
{
attesa = window.setTimeout("colore1()",500);
}
</script>
*******************************************
Le due funzioni colore1() e colore2() si alternano per formare la scritta nei due colori che abbiamo inserito rispettivamente nelle variabili c1 e c2: in c1 il colore di sfondo della pagina (così da ottenere un effetto di spegnimento) ed in c2 il colore che si preferisce.
Nella variabile codice va invece scritta la frase che si vuole far lampeggiare.
In ...setTimeout("...",500), 500 rappresenta il tempo, in millisecondi, di permanenza dello stesso colore. Diminuire o aumentare tale numero a seconda della velocità che si preferisce.
All'inizio, viene richiamata la funzione avvia(): dopo 500 millisecondi viene richiamata la funzione colore1(). Questa a sua volta, sempre dopo 500 millisecondi, richiama la funzione colore2(), che dopo lo stesso intervallo richiama la funzione colore1() e così via, finché la pagina è attiva.
'testo' è il nome che daremo all span. Uno span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo. All'interno dei tags <span> e </span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. Nel nostro esempio inseriremo la scritta. L'attributo id dà un nome allo span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
Infine:
if(document.all)
....
else if(document.getElementById)
...
sono solo sistemi per inserire la sintassi accettata o da MSIE (if document.all) o dagli altri browser
*******************************************
PASSO DUE
Cambiare il tag <Body>nel seguente modo:
<BODY OnLoad="avvia()">
PASSO TRE
Infine aggiungere, nel punto in cui si vuole inserire il testo lampeggiante, la seguente riga:
<span id="testo"><b><font color=red>TESTO LAMPEGGIANTE </b> </font></span>
Il codice che abbiamo inserito per ottenere questo effetto è semplificato al massimo in modo da poter essere cambiato anche dai non esperti per risultati diversi come ad esempio:

TESTO 2: il testo cambia colore e non si spegne.
Abbiamo scelto i colori rosso (red) ed arancione (darlorange): cambiarli eventualmente con altri colori.

 

<script language=javascript>
function colore1(){
codice='<font color=red><b>TESTO 2</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML = codice
}
attesa = window.setTimeout("colore2()",500);
}
function colore2(){
codice1='<font color=darkorange><b>TESTO 2</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML =codice
}
attesa = window.setTimeout("colore1()",500)
}

function avvia()
{
attesa = window.setTimeout("colore1()",100);
}
</script>
 
TESTO 3: il testo resta dello stesso colore ma cambia l'evidenziatore. Abbiamo scelto i colori giallo (yellow) e verde chiaro (lime): cambiarli eventualmente con altri colori. <script language=javascript>
function colore1(){
codice='<FONT style="BACKGROUND-COLOR: yellow">TESTO 3</font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML = codice
}
attesa = window.setTimeout("colore2()",500);
}
function colore2(){
codice2='<FONT style="BACKGROUND-COLOR: lime">TESTO 3</font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML =codice
}
attesa = window.setTimeout("colore1()",500)
}

function avvia()
{
attesa = window.setTimeout("colore1()",100);
}
</script>

NOTA: i codici vanno inseriti fra i tags <head> ed </head>della pagina. Dopo proseguire come dal PASSO 2
======================================================================================
Nella <Head> inserire le seguenti righe
<script language=javascript>
var c1='#E0E4E3'
var c2='navy'
function colore1(){
codice='<font color=' + c1+ '><b>Investire in Ungheria - Budapest</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML = codice
}
attesa = window.setTimeout("colore2()",500);
}
function colore2(){
codice='<font color=' + c2 + '><b>Investire in Ungheria - Budapest</b></font>'
if(document.all)
{
document.all('testo').innerHTML=codice;
}
else if(document.getElementById){
document.getElementById("testo").innerHTML =codice
}
attesa = window.setTimeout("colore1()",500)
}
function avvia()
{
attesa = window.setTimeout("colore1()",500);
}
</script>
Nel tag <body> inserire il resto
<body OnLoad="avvia()" background="images/mattonesf.jpg">
XXXXXXXXXXXXXXXXXXX
CCCCCCCCCCCCCCCCCCC
XXXXXXXXXXXXXXXXXXX
<blink> <span id="testo"><font color="#00FF00">
TESTO DA LAMPEGGIARE</font><font color="#FFFF00">
</span></blink>
</body>

Caricare una documento pdf
Il comando è consigliabile inserirlo all'interno di una tabella
<iframe id="pdf" name="pdf" src="http://percorso/file.pdf" width="500" style="height:700px" z-index="-100"></iframe>

Come posso aprire una finestra della larghezza che voglio e posizionarla sullo schermo nel punto che preferisco?
Così:
window.open('sponsor.htm', '', 'width="300",height="300",left="100",top="100",menubar,toolbar');

Come posso aprire una finestra a tutta pagina (fullscreen)?
Così:
window.open('http://www.html.it','','fullscreen=yes');

Evitare lo scaricamento delle foto
Voglio proteggere le foto che immetto sul web, c'è un sistema per farlo?
Un sistema sicuro non esiste. In pratica, si usa la foto come sfondo della tabella completamente vuota e sopra gli si stende una immagine in formato GIF composta da un solo pixel trasparente. E' un po' come mettere una foto dietro a un vetro: l'utente vede la foto, ma se cerca di scaricarla con il salva immagine, scarica solo il pixel trasparente. Ricorda di sostituire l'indirizzo dell'immagine al posto degli asterischi nel codice e di mettere nella stessa directory dell'immagine una GIF completamente trasparente con il nome vuota.gif. Inoltre, sostituisci al posto di larghezza e altezza i dati della tua immagine.
<table background="**********************" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="VUOTA.GIF" width="Larghezza" height="Altezza"></td>
</tr>
</table>

Uno sfondo fisso
Devo usare come sfondo delle immagini molto lunghe che appesantiscono il sito altrimenti finiscono per ripetersi all'interno della pagina con un effetto estetico terribile.
Si usa il comando bgsrc= per definire lo sfondo.
<body style="background-image:url(sfondo.gif); background-position: center; background-repeat: no-repeat; background-attachment: fixed;")

Stampe di pagine web
Il prgramma di navigazione mi spezza sempre il modulo nel posto sbagliato quando si tratta di metterlo su più fogli. Esiste un modo per dire a IExplorer dove andare a capo.
Un CSS
<p style="page-break-before: always">

Rendere popolare il proprio sito
Vorrei far scalare il mio sito web nelle posizioni dei motori di ricerca. Cosa devo fare?
Il SEO (Search Engine Optimization, ottimizzazione di un sito per un motore di ricerca) è un'arte, tra l'altro in continua evoluzione. Le regole importanti sono le seguenti:
- la parola chiave che rappresenta il sito deve apparire nell'indirizzo o nel tag del titolo
- le pagine devono avere una struttura semplice ed ordinata
- i contenuti devono essere aggiornati con frequenza e regolarità
- cerchiamo di ottenere che altri siti abbiano link verso il nostro. Questa opportunità è ottenibile grazie ad una rete di amicizie on-line oppure pubblicando contenuti abbastanza esclusivi e ben curati. Sul sito http://www.vaughns-1-pagers.com/internet/google-ranking-factors.htm c'è una lista ricerca che spiega cosa fare per diventare popolari su Google.

Forme per tutte le tasche
http://www.iab.it Associazione nel campo della pubblicità su Internet
Secondo la classifica ufficiale i banner possono essere suddivisi in tre categorie:
- Banner e bottoni
I banner tradizionali dovrebbero avere le seguenti dimensioni
    - microbbanner: 88x31
    - bottone 1: 120x60
    - bottone 2: 120x90
    - bottone quadrato: 125x125
    - half banner: 234x60
    - banner verticale: 120x240
    - banner standard: 468x60 (traditional)
    - suber banner:
728 x 90
- Skyscrapers o Grattacieli
    - 160x600 (wide)
    - 120x600 (standard)
    - 125x600
- Rettangoli e Pop-up
Non ci sono specifiche esatte, ma ecco i più diffusi:
    - rettangolo: 180x150
    - rettangolo medio: 300x250
    - rettangolo verticale: 240x400
    - rettangolo orizzontale: 336x280
    - quadrato: 250x250   
Programma: http://www.bannermakerpro.com/
Chi si trova di fronte per la prima volta alla necessità di produrre un banner, magari per pubblicizzare il proprio sito, spesso è attratto dalle possibilità offerte dai più diffusi programmi di animazione, e abbonda in effetti speciali, oggetti in movimento, dissolvenze e sfumature. Una volta salvato il risultato, scope che la dimensione del file che ha ottenuto è di 200/300 kb. Rileggendo le specifiche che il banner richiesto non può superare i 10 kb. Come si potrà rimediare per avere un banner così leggero?. Ecco alcuni consigli, non solo per ottenere un banner che pesi poco, ma anche per migliorare l'efficienza di comunicazione.
Richieste specifiche
Ogni sito può avere le proprie richieste per formato, dimensioni, peso in kb o durata. Esistono standard specifici (vedi sopra). Il banner deve avere delle dimensioni ben precise per poter essere inserito nel layout del sito che lo ospita, rispettando la grafica. I concessionari di pubblicità, richiedono che che il file non superi i 10 kb (per il 468x60, spesso anche meno per i formati più piccoli). Altre indicazioni, meno osservate, sono la durata dell'animazione (alcuni dicono un massimo di 6 secondi) e il numero di ripetizioni dell'animazione (massimo 3 volte).
Fattore peso
La cosa più difficile è riuscire a creare un banner che resti al di sotto dei 10 kb di peso. Per riuscirci bisogna rendersi conto di quali sono i fattori che aumentano il peso di un file .gif:
- numero di frame
- numero di colori
- dimensione dell'area che cambia da frame a frame
- complessità dell'immagine
Ricordatevi che:
- aree piene dello stesso colore pesano pochissimo
- frames in cui cambia un elemento molto piccolo incidono pochissimo sul peso del file
- la durata dell'animazione (a parità di fram) e la persistenza (delay) dei frame non incidono sul peso del file
Per ridurre il peso:
- eliminare le dissolvenze fra frame con scorrimenti o tendine
- ridurre la quantità d'immagine che cambia tra un frame e l'altro
- eliminare sfondi sfumati, con pattern o con fotografia sostituendoli con sfondi piatti
- diminuire i colori utilizzati, scenario a 32 o 16; l'operazione va eseguita preferibilmente senza attivare il retino per la simulazione delle tinte
- usare un antialiasing per il testo meno sfumato o eliminarlo del tutto. Chiaramente, scegliendo un font sans serif (per esempio Helvetica, Futura, Franklin Gothic) ed evitando il corsivo, la mancanza dell'antialiasing si noterà meno.
- Ridurre le dimensioni degli oggetti che cambiano nell'animazione del banner
- Curare con molta attenzione il timing: non lasciare frame fermi più di due/tre secondi, a parte eventualmente quello finale. Ma non date neanche tempi troppo ristretti, che impediscano all'utente di leggere il testo.
- per dare un effetto "suspance" tra un frame e l'altro si possono inserire dei frame vuoti
- nel frame finale inserire la frase "clicca qui" (o equivalente)
- inserire finti pulsanti, finte barre di scorrimento, finte aree per scrivere: invitano l'utente a fare clic sul banner.
Servizi di scambio banner
Banner gratis: http://www.bannergratis.it
Banner Planet: http://www.advertpower.com
BPathNetwork: http://italia.bpat.com
ClickPoint: http://www.clickpoint.it
La borsa del banner: http://www.bbanner.it
Newclick.com: http://www.newclick.com
Punto Banner: http://www.puntobanner.net
Tuttonet-BNM: http://www.tuttonet.com

SlideShow
<script language="JavaScript1.2">
/*
Up down slideshow Script
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://www.dynamicdrive.com
*/
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='404px'
var scrollerheight='786px'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<img src="1ss.jpg">'
slideimages[1]='<img src="2ss.jpg">'
slideimages[2]='<img src="3ss.jpg">'
slideimages[3]='<img src="4ss.jpg">'
slideimages[4]='<img src="5ss.jpg">'
slideimages[5]='<img src="6ss.jpg">'
slideimages[6]='<img src="7ss.jpg">'
slideimages[7]='<img src="8ss.jpg">'
slideimages[8]='<img src="9ss.jpg">'
slideimages[9]='<img src="10ss.jpg">'
slideimages[10]='<img src="11ss.jpg">'
slideimages[11]='<img src="12ss.jpg">'
slideimages[12]='<img src="13ss.jpg">'
slideimages[13]='<img src="14ss.jpg">'
slideimages[14]='<img src="15ss.jpg">'
slideimages[15]='<img src="16ss.jpg">'
slideimages[16]='<img src="17ss.jpg">'
slideimages[17]='<img src="18ss.jpg">'
slideimages[18]='<img src="19ss.jpg">'
slideimages[19]='<img src="22ss.jpg">'
slideimages[20]='<img src="25ss.jpg">'
slideimages[21]='<img src="26ss.jpg">'
slideimages[22]='<img src="27ss.jpg">'
slideimages[23]='<img src="28ss.jpg">'
slideimages[24]='<img src="29ss.jpg">'
slideimages[25]='<img src="32ss.jpg">'
slideimages[26]='<img src="33ss.jpg">'
slideimages[27]='<img src="35ss.jpg">'
slideimages[28]='<img src="36ss.jpg">'
//extend this list
///////Do not edit pass this line///////////////////////
var ie=document.all
var dom=document.getElementById
if (slideimages.length>2)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(scrollerheight)
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2_obj)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>



<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>

<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>

</layer>

<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>


<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(slideimages[dyndetermine=(slideimages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}

</script>

Contatori e statistiche
Quando si crea un sito web, è utile avere un'idea degli accessi effettuati dai navigatori sulle proprie pagine web. In molti casi è utile anche avere una reportistica dettagliata sulle caratteristiche dei visitatori (o meglio, del computer da essi usato), quali nazionalità, sistema operativo, browser utilizzato e risoluzione video. Ciò è possibile grazie ai servizi gratuiti presenti su Internet. Di seguito un elenco dei siti che offrono gratis contatori e servizi di statistica.

Contatori

ShinyStat                      http://www.shinystat.it
Powerstats             http://www.powerstats.it
WebCounter              http://www.webcounter.com
Bravenet http://www.bravenet.com
TheCounter.com http://www.TheCounter.com
eXTReMe http://www.extreme-dm.com
Sitemeter http://www.sitemeter.com
Statistiche.it http://www.statistiche.it
Freecounter http://www.freecounter.it

Progettare un Sito Web
Struttura di navigazione di un sito: i menu
Saper creare un sito Web non basta se non si è capaci di guidare il visitatore all'interno di esso. Realizzare una buona struttura e fornire agli utenti un aiuto per muoversi senza che essi debbano pensare troppo vuol dire avere un'interfaccia di navigazione alla portata di tutti...

Premessa sulla struttura di navigazione di un sito web

Saper realizzare un sito web non basta se non si è capaci di guidare il visitatore nel proprio sito. Creare una buona struttura e fornire agli utenti un aiuto per muoversi senza che essi debbano pensare troppo vuol dire avere un'interfaccia di navigazione alla portata di tutti.
Quando l'utente entra per la prima volta nel nostro sito, deve trovare subito le risposte a tre domande fondamentali:
1) dove mi trovo?
2) dove sono stato?
3) dove posso andare?
E una buona struttura di un sito può rispondere a queste domande.
Quando si parla della struttura di un sito web si parla di struttura gerarchica e di struttura ipertestuale e si inizia a progettare la navigazione dopo aver realizzato la categorizzazione dei contenuti e l'attività di labeling. In poche parole: catalogare i contenuti, raggrupparli, denominarli e stabilire le gerarchie.
Un altro punto molto importante è rappresentato dall'allocazione dello spazio visuale su un sito web. Quando si progetta la struttura di navigazione, si deve fare attenzione che essa non superi il 20% dello spazio visuale totale allocato per il sito web, perchè più importanti sono i contenuti.
Fondamentale è anche l'accesso immediato alle informazioni di alta priorità. E' consigliato utilizzare la soluzione "one-click" che permette all'utente di interagire subito, avendo accesso alle informazioni desiderate subito in una pagina a parte.
Sempre qui vorrei parlare dell'utilizzo delle immagini come menu per la navigazione.
Se esse rappressentano un elemento identificativo del proprio sito, si è liberi di usarle.
Comunque occorre stare attenti perchè il visitatore ha di solito un modello mentale di ciò che rappresenta un menu, una struttura di un sito, e, se non associa subito l'immagine che gli viene proposta ad una certa voce del menu, rischiate di perderlo. Se i semplici link testuali danno il risultato massimo, allora perchè non utilizzarli?
Schema di navigazione
Lo schema di navigazione comune incontrata nei siti web è:
- Barra verticale sinistra
- Linguette in alto
- Elenco di link in alto (barra orizzontale superiore)
- Elenco centrato di categorie
- Menu a tendina
- Altro (barra verticale a destra, barra orizzontale in basso (footer), oppure molti menu di navigazione insieme)
Attenzione: troppi menu di navigazione nella stessa pagina portano al superamento dello spazio visuale allocato alla navigazione e perciò portano anche alla confusione dell'utente.
Non più di tre menu possono stare in una pagina e già questo numero può rendere inquieto l'utente; dunque, se si devono mettere per forza tre menu, si mettono con cautela e si deve fare attenzione alla lunghezza di ciascuno.
Secondo le statistiche, i tipi di menu più usati sono:
- la barra verticale sinistra
- le linguette
- la barra orizzontale superiore
- l`elenco centrale di categorie (stile Yahoo)
- il menu a tendina
Una divisione del menu può essere questa:
- Menu principale: è il menu che raggruppa le voci più importanti, essendo presente in tutte le pagine del sito e permettendo l'accesso alle aree significative del sito, indipendentemente dal punto in cui il visitatore si trova;
- Menu locale o secondario: si tratta di menu che appartengono a diverse sottosezioni specifiche e che variano nel contenuto, ma preferibilmente non variano nella posizione;
- Menu constestuale: è il menu che consente l'accesso ad una certa pagina partendo dal contenuto di una specifica pagina del sito;
- Menu del footer: è rappresentato da una serie di link testuali, posizionati in fondo alla pagina, che richiamano di solito il menu principale.
Parlando di questa divisione del menu, penso che la domanda che si incontra spesso è se il menu principale deve essere ripetuto in ogni pagina. Qui abbiamo opinioni contrastanti. Da una parte c'è l'eccesso di navigazione in ogni pagina, visto che la cosa primordiale è il contenuto. E qui posso citare Jakob Nielsen che sottolinea l'importanza di un percorso "a briciole di pane", che mostra all'utente tutti i livelli gerarchici attraversati. Dall'altra parte, non si devono dimenticare i vantaggi che ci offre il menu principale: consente il cambio rapido della sezione e ci dà un punto chiaro di riferimento sulla pagina che stiamo consultando. 
"Study case di 6 tipi di menu diversi presentato alla Conferenza 'Usability Professionals Association' a Montreal nel 2005"
All'inizio vengono presentati i 6 tipi di menu che riporterò di seguito:
1) Menu 'Stile Yahoo':
rappresenta praticamente un elenco centrato di categorie.
Pro:
- l'accesso immediato alle informazioni di alta priorità tramite la soluzione "one-click".
- le opzioni di navigazione sono ben visibili; anche se si deve scrollare, tutto sta sulla prima pagina.
Contro:
- l'allocazione dello spazio visuale è molto estesa, il menu occupa quasi tutta la pagina;
- la necessità di scrollare per poter avere accesso a tutte le info. 
2) Menu "Rollover":
al passaggio del mouse sulla voce di un menu appare una descrizione dei sotto menu, poi cliccandoci sopra si va alla pagina con le informazioni.
Pro:
- l'allocazione dello spazio visuale è molto ridotta, il menu occupa una piccola parte della pagina;
- non si deve scrollare per vedere tutto il menu.
Contro:
- l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- dover muovere il mouse a caso per vedere la descrizione dei sotto menu è una seccatura;
- l'utente non può vedere a colpo d'occhio tutte le opzioni di navigazione.
3) Flash Menu:
cliccando su una voce del menu si aprono i sotto-menu. All'apertura di un sotto-menu tutti gli altri si chiudono automaticamente.
Pro:
- l'allocazione dello spazio visuale è molto ridotta, il menu occupa una piccola parte della pagina;
- non si deve scrollare per vedere tutto il menu.
Contro:
- l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- l'utente non può vedere a colpo d'occhio tutte le scelte possibili, ma deve cliccare per aprire esplicitamente il menu;
- alcuni visitatori possono essere disturbati dall'effetto di auto-chiusura delle voci del menu.
4) Expand / collapse Menu: Cliccando su un menu chiuso si apre, cliccando su un menu aperto si chiude. I menu non sono chiusi automaticamente come nel caso precedente. In tanti hanno associato questo tipo di menu ad un libro online.
Pro:
- l'allocazione dello spazio visuale è molto ridotta, qui predomina l'ampiezza.
Contro:
- l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- l'utente non può vedere a colpo d'occhio tutte le scelte possibili, ma deve cliccare per aprire esplicitamente il menu.
5) Drop-down Menu:
al passaggio del mouse sulla voce di un menu si aprono direttamente le sotto-voci, senza cliccarci sopra. Esse si possono selezionare.
Pro:
- l'allocazione dello spazio visuale è molto ridotta, il menu occupa una piccola parte della pagina;
- buona visibilità nel sito, tramite la posizione;
- non si deve scrollare per vedere tutto il menu.
Contro: - l'accesso alle informazioni di alta priorità è più lungo della soluzione "one-click", anche qui avviene tramite la soluzione "due-click";
- dover muovere il mouse a caso sulle voci del menu per vedere le sotto-voci può essere considerato come un procedimento noioso;
- l'utente non può vedere a colpo d'occhio tutte le opzioni di navigazione di tutte le voci del menu.
6) Fly-out Menu: al passaggio del mouse questi sotto-menu si aprono automaticamente e si possono selezionare.
Pro: - l'allocazione dello spazio visuale è più ridotta del Menu "Stile Yahoo".
Contro:
- l'accesso alle informazioni di alta priorità è molto lento/lungo, qui avviene tramite la soluzione "due-click";
- l'utente non può vedere a colpo d'occhio tutte le scelte possibili, ma deve passare con il mouse sopra per aprire esplicitamente i sotto-menu e vedere poi le informazioni; - alcuni visitatori possono essere distratti e con il movimento del mouse su un'altra sotto-voce perdono la categoria che hanno selezionato.
Il caso è stato studiato sia online che offline, tramite i lavoratori di certe società.
Abbiamo un totale di 706 lavoratori che hanno partecipato allo studio seguendo lo schema:
- 121 hanno utilizzato il Menu "Stile Yahoo"
- 121 hanno utilizzato il Menu Rollover
- 116 hanno utilizzato il Menu Flash
- 128 hanno utilizzato il Menu Expand / Contract
- 110 hanno utilizzato il Menu Drop-down
- 110 hanno utilizzato il Menu Fly-out
Criteri di valutazione dello studio
a)
Errori: Il menu "Stile Yahoo" e il menu Drop-down hanno presentato il minor numero di errori generato dai partecipanti.
b)
Durata necessaria: I partecipanti hanno impiegato più o meno lo stesso tempo, dunque questo non è stato preso in considerazione come un fattore negativo.
c)
Valutazione soggettiva: Positiva per tutti i tipi di menu, non si sono identificate differenze significative fra i metodi di navigazione, perciò questo criterio non è stato preso in considerazione.
Per la valutazione finale l'unico criterio rimasto in piedi era il criterio che si basava sugli errori commessi durante lo studio dei 6 menu. Siccome il Menu "Stile Yahoo" e il Menu Drop-down hanno presentato il minor numero di errori, la decisione finale ha riguardato uno di questi due menu.
Dopo aver valutato i vantaggi e gli svantaggi di entrambi i menu si è deciso di scegliere il menu Drop-down come favorito.
In questo caso gli utenti hanno optato per il menu a tendina, ma in tanti altri casi sono gli utenti stessi a dire che sono infastiditi di questo tipo di menu, dicono che il passaggio con il mouse per poter accedere alla voce del menu è una seccatura e che si sentono a disagio perchè non possono vedere a colpo d'occhio tutte le scelte possibili.
Una cosa molto importante da valutare resta il fatto che l'unico menu che adottava la soluzione "one-click" è il menu "Stile Yahoo".
Questo è un fattore decisivo per una struttura di navigazione buona, si sa che più si avvicina l'utente a quello che cerca più lo si aiuta e meglio è.
Menu a tendina, menu centrale o menu orizzontale? La scelta è personale, l'importante è tenere a mente che un sito ben fatto è un sito facile da navigare, e un visitatore è contento quando non è costretto a pensare troppo.

Un saluto differente per ogni momento della giornata
Vedremo come personalizzare il saluto all'utente in base al momento della giornata.
Per fare questo utilizzeremo un semplice script basato su un if, elseif, else. Dividiamo la giornata in tre momenti:
* la notte: dalle ore 0 alle ore 5;
* il giorno: dalle ore 6 alle ore 16;
* la sera: dalle ore 17 alle 23.
Incolliamo queste righe dove vogliamo che appaia il nostro saluto...
<?php
$ora = date ("H"); //recupero l'ora nel formato 24 ore
if ($ora >= 0 && $ora <= 5 ) {
echo " Buonanotte";
} else if ($ora > 5 && $ora <= 16) {
echo " Buongiorno";
} else echo " Buonasera";
?>

Aggiungere un sito ai preferiti
Vediamo come far inserire ai nostri visitatori il nostro sito tra i preferiti con un solo click!
Inseriamo tra <head> e </head> della nostra pagina questo blocco di codice:
<!-- inizio codice per l'inserimento nei preferiti -->
<script language="JavaScript1.2">
var bookmarkurl="http://www.miosito.it"
var bookmarktitle="Michele Sassi Web Design"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>
<!-- fine codice per l'inserimento nei preferiti -->
e nel punto in cui vogliamo il link inseriamo questa riga:
<a href="javascript:addbookmark()">Tra i preferiti</a>

Impostare un sito come Home Page
In questo tutorial vedremo come è possibile fare in modo che i nostri utenti possano impostare il nostro sito come homepage con un solo click.
Inseriamo tra i tags <head> e </head> il seguente codice:
<script language="JavaScript" type="text/javascript">
<!-- Start
function homepage() {
if(document.all)
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.miosito.com);
}
// End -->
</script>
e ora nel punto del <body> in cui vogliamo compaia il link inseriamo questo codice:
<a href="javascript:homepage()">Imposta questo sito come pagina iniziale</a>
Et voilà! Anche questa è fatta!

Cambiare al volo le dimensioni del font
Oggi vediamo come è possibile, per questioni di usabilità, cambiare la dimensione dei caratteri di una pagina web.
Copiamo e incolliamo queste righe:
<a href="#" onclick="document.getElementById('container').style.fontSize='12px';return false;">12px</a>
<a href="#" onclick="document.getElementById('container').style.fontSize='14px';return false;">14px</a>
<a href="#" onclick="document.getElementById('container').style.fontSize='16px'; return false;">16px</a>
Ed ora creiamo il div "container" destinato a contenere il testo...
<div id="container">Sassidesign.it, vedete come il testo cambia la grandezza...</div>
Attenzione: container è l'id dell'elemento della pagina web di cui volete cambiare le dimensioni; sostituitelo con il nome del vostro id di cui volete siano cambiate le dimensioni.

Un alternativa al pulsante 'Indietro' del browser
Javascript ci offre la possibilità di tornare indietro alla pagina precedente grazie a un link che, praticamente, va a sostituire il pulsante "Indietro" del browser.
Realizzarlo è semplice, basta copiare e incollare questa riga nel punto dove vogliamo che il link appaia:
<a href="javascript:history.go(-1);">Indietro</a>
Possiamo cambiare arbitrariamente il numero delle pagine contenuto tra parentesi, ma fare una cosa del genere non avrebbe senso!

Richiamare un alert cliccando su un link
Impareremo a visualizzare un alert di Javascript cliccando su un link!
Innanzitutto è necessario creare la funzione che stampi a video il messaggio che, nel nostro caso, chiameremo stampamessaggio; vediamo come crearla:
<script language="javascript" type="text/javascript">
<!--
function stampamessaggio()
{
alert("Questa funzione è un alert di Javascript.\n\nwww.sassidesign.it");
}
//-->
</script>
Come avete potuto notare, per andare a capo nella finestra dobbiamo usare la cosidetta sequenza di escape \n.
Per richiamare la funzione stampamessaggio è necessario creare il link in questo modo:
<a href="javascript:stampamessaggio()">Clicca qui</a>

Reindirizzare il navigatore dopo un intervallo di tempo
E' possibile, con Javascript, rimandare un utente su un sito esterno dopo un invervallo di tempo specificato.
Le tre righe da incollare sono le seguenti:
<script type="text/javascript">
setTimeout('location.href="http://www.xxxxxxxxxxx.it"',5000);
</script>
Modificheremo opportunamente il sito verso cui reindirizzare l'utente e l'intervallo di tempo che deve trascorrere dal caricamento della pagina al reindirizzamento stesso!
Il tempo è espresso in millisecondi, quindi nel nostro caso il navigatore sarà rimandato su www.sassidesign.it dopo 5 secondi!

Un'alternativa al classico link 'Top'
L'Html utilizza il sistema delle ancore per muoversi da un punto all'altro della pagina utilizzando dei link particolari, tipo
<a href="#top">Torna ad inizio pagina</a>
agganciando il valore #top ad un'ancora ipertestuale posizionata ad inizio pagina
<a name="top">Inizio della pagina corrente</a>
Questo sistema comporta il salvataggio della pagina corrente (compresa del nuovo valore accodato) in cache
paginacorrente.html#top
Javascript mette a disposizione il metodo scrollTo() dell'oggetto window per creare un'ancora più elegante che by-passi il problema della cache.
Vediamo come realizzare questo tipo di link:
<a href="javascript:window.scrollTo(0,0) ">Torna ad inizio pagina</a>
dove i valori (0,0) rappresentano rispettivamente le coordinate della pagina in larghezza ed in altezza.

Stampare una pagina web con un click
Javascript ci offre la possibilità di stampare le pagine web cliccando su un bottone, evitando la classica procedura: File / Stampa.
Il comando per eseguire la stampa è il seguente e va incollato nel punto del body dove vogliamo venga visualizzato il bottone.
<script language="Javascript1.2">
var message = "Stampa" ;
function printpage() {
window.print();
} document.write("<form><input type=button "
+"value=\""+message+"\" onClick=\"printpage()\"></form>");
</script>

Organizzare i contenuti in un drop down menu
Questo script ci può tornare utile se abbiamo molti contenuti da inserire nelle nostre pagine ma non abbiamo spazio a sufficienza!
Molti webmaster lo utilizzano per la gestione delle FAQ (Frequency Asked Questions)... ma ovviamente possiamo adattarlo a qualsiasi nostro scopo!
Incolliamo queste righe dove vogliamo che compaia questo drop down menu.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="Sezione n. 1">Sezione n. 1</option>
<option value="Sezione n. 2">Sezione n. 2</option>
<option value="Sezione n. 3">Sezione n. 3</option>
<option value="Sezione n. 4">Sezione n. 4</option>
</select><br / >
</td>
</tr>
<tr>
<td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<script language="JavaScript">
var thecontents=new Array()
// modificare qui i contenuti... fare attenzione alle sequenze di escape
thecontents[0]='Qui tutto il testo della sezione n. 1'
thecontents[1]='Qui tutto il testo della sezione n. 2'
thecontents[2]='Qui tutto il testo della sezione n. 3'
thecontents[3]='Qui tutto il testo della sezione n. 4'
function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}
document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
Ricordate che per le sequenze di escape Javascript usa il carattere \ (backslash), quindi se dovete andare a capo nella riga dove andrete ad inserire i contenuti utilizzate \n , per inserire un apostrofo \' , per le doppie virgolette \" e così via.

Aprire un link in una finestra pop-up
Per questioni di comodità può essere necessario dover aprire un link in una finestra pop-up, specie se il contenuto di tale finestra è di dimensioni estremamente ridotte.
Per fare questo, solitamente si ricorre a Javascript inserendo in un punto qualsiasi del body il seguente codice:
<a href="javascript:;" onClick="window.open('pagina.html', 'titolo', 'width=300, height=300, resizable, status, scrollbars=1, location');">Apri in una finestra pop-up</a>
Come si può dedurre la pagina correlata è "pagina.html". Per apportare sostanziali modifiche alla finestra sarà necessario eliminare dal codice le voci resizable (se si vuole una finestra non ridimensionabile), status (se non si vuole vedere la barra di stato) e location (se non si vuole visualizzare la barra degli indirizzi); sarà opportunamente necessario impostare a 0 il valore di scrollbars nel caso in cui non si vogliono visualizzare le barre di scorrimento!
Quella che abbiamo appena visto è la procedura da eseguire se il link da aprire in una pop-up è solo uno. Qualora avessimo la necessità di aprirne più di uno in finestre pop-up fisicamente uguali tra loro, ci converrebbe ricorrere a quest'altro codice, molto più generico e valido per tutti i link:
<script type="text/javascript">
function apripopup(url) {
newin = window.open(url,'titolo','scrollbars=yes,resizable=yes, width=300,height=300,status=no,location=no,toolbar=no');
}
</script>
Questo codice va inserito tra i tag head della pagina; con la riga di codice sottostante invece richiameremo ogni singolo link nel body, modificandone opportunamente la pagina da aprire:
<a href="javascript:apripopup('pagina.htm');">Apri pagina.htm </a>
<a href="javascript:apripopup('pagina2.htm');">Apri pagina2.htm </a>

Realizzare un menu a tendina con i Selectbox
Il cosiddetto JumpMenu ? un menu a scelta rapida, utile sia per l'utente per una navigazione pi? agevole, che per lo sviluppatore, onde ottimizzare spazio sulla pagina e risorse.
Viene realizzato mediante l'utilizzo del Tag Html <select>, ed animato con un piccolo script ad hoc.
Creiamo sia il codice Html che lo script in un'unica routine Javascript:
function JumpMenu(links) {
//Crea un link all'indice della select selezionato
location.href = links[links.selectedIndex].value;
}
//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
voci[0] = "Pagina 1";
voci[1] = "Pagina 2";
voci[2] = "Pagina 3";
voci[3] = "Pagina 4";
voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni
var link = new Array();
link[0] = "pagina1.htm";
link[1] = "pagina2.htm";
link[2] = "pagina3.htm";
link[3] = "pagina4.htm";
link[4] = "pagina5.htm";
//Crea la struttura Html della select, all'evento onChange lancia la funzione
document.write("<select onChange=JumpMenu(this)>");
document.write("<option value=#>Jump to...</option>");
//Esegue un ciclo ed estende tutte le voci del menu con i relativi valori
for(i=0; i<5; i++) {
document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}
document.write("</select>");

Il link 'Chiudi questa finestra'
Navigando per il web vi sarà sicuramente capitato di vedere delle finestre con il link "Chiudi questa finestra".
L'utilità di questo link è praticamente nulla in quanto l'utente può comunque chiudere la stessa finestra cliccando sulla X. Il motivo per cui generalmente si usa questa funzione è quello di dare un tocco d'eleganza alla finestra, specie per le pop-up.
Ecco come realizzare il link:
<a href="javascript:;" onclick="window.close()">Chiudi questa finestra</a>

Bloccare il tasto destro del mouse
Fin dal principio, cari lettori, vi dirò che questo script non impedisce agli utenti di "rubare", o meglio, visionare il codice Html delle proprie pagine web.
In poche parole impegna il tasto destro del mouse nella generazione di un alert con testo personalizzabile. Ecco il codice da inserire tra i tags <head> e </head>:
<script language="JavaScript1.2">
<!-- Start
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Qui il tasto del messaggio");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// end -->
</script>
Da notare:
alert("Qui il tasto del messaggio");
che contiene il testo personalizzabile del messaggio che comparirà alla pressione del tasto destro del mouse.

Rendere obbligatori i campi di un form
In questo tutorial vedremo come con un semplice ciclo if-else in Javascript sia possibile controllare i campi di un form. Utile se abbiamo un modulo con campi obbligatori e vogliamo che gli utenti li compilino.
Supponiamo di avere un form "modulo", con due campi, "nome" e "cognome". Ecco il codice:
<form name="modulo" id="modulo" onSubmit="return controllo();" method="post" action="">
<input name="nome" type="text" id="nome" size="30" />
<br />
<input name="cognome" type="text" id="cognome" size="30" />
<br />
<input type="submit" name="Submit" value="Invia" />
</form>
Da notare di questo codice la riga
onSubmit="return controllo();"
che richiama la funzione Javascript "controllo" al click sul pulsante di submit (Invia nel nostro caso).
Ecco quindi il codice Javascript da posizionare tra i tags <head>:
<script language="JavaScript">
function controllo(){
with(document.modulo) {
if(nome.value=="") {
alert("Errore: compilare il campo NOME");
nome.focus();
return false;
}
if(cognome.value=="") {
alert("Errore: compilare il campo COGNOME");
cognome.focus();
return false;
}
}
alert("Controllo effettuato con successo. Il modulo sarà inviato.");
return true;
}
</script>
Da notare
with(document.modulo)
che serve ad effettuare il codice nel form "modulo" della pagina (document).
Ogni controllo di nullità dei campi se vero genera un alert, rende attivo il campo in questione e restituisce return false. Quindi nel caso in cui tutti i campi siano stati compilati correttamente, genera un alert e restituisce return true.
Sicuramente il modulo è personalizzabile. Ad esempio, si potrebbero effettuare dei controlli ulteriori in presenza di campo "email"... Lascio comunque a voi questo divertimento.

Limitare il numero di caratteri in una textarea
In questo tutorial vedremo come sia possibile con Javascript limitare il numero di caratteri digitabili in una textarea.
Inseriamo questo codice tra i TAGs HEAD della nostra pagina:
<script language="JavaScript" type="text/javascript">
function contatore(val) {
max=100
if (val.testo.value.length > max) {
val.testo.value = val.testo.value.substring(0,max)
rest = 0
}
else {
rest = max - val.testo.value.length
}
val.num.value = rest
}
</SCRIPT>
Da notare di questo codice la riga
max=100
in cui dovremo settare il numero massimo di caratteri.
Quindi realizziamo il form:
<form name="modulo">
<textarea name="testo" rows="4" cols="30" wrap="soft" onKeyUp="contatore(this.form)"></textarea>
<input value="100" size="3" name="num" disabled />
</form>
Interessante di questo codice la riga
onKeyUp="contatore(this.form)"
che permette di aggiornare il contatore alla digitazione di un carattere.
Come potete notare, non è possibile digitare più di 100 caratteri.

Aprire e chiudere finestre con Javascript
Articolo a cura di Alberto Giuliani
Riferimenti dell'autore: @ URL
In questo tutorial vedremo come gestire al meglio le finestre POP-UP; in particolare impareremo ad aprirle e/o chiuderle in determinati momenti e/o al verificarsi di alcuni eventi.
Abbiamo già trattato la gestione di finestre POP-UP con i CSS a questo link, ma oggi vedremo come gestire i pop-ups con Javascript.
Apertura di una finestra al caricamento della pagina
Per far sì che il nostro POP-UP si apra al caricamento della pagina, basterà inserire il codice Javascript all'interno dei TAGs HEAD:
<script language="javascript" type="text/javascript">
nuovafinestra = window.open("url_pagina.htm","titolo_pagina","width=xxx, height=xxx, left=xxx, top=xxx");
</script>
Possiamo notare che tramite il metodo window.open di Javascript, viene creato un oggetto nuovafinestra con i seguenti parametri:
- URL della pagina, il primo termine tra virgolette;
- Titolo della pagina, il secondo termine, ed il titolo che comparirà sulla barra del browser;
- Parametri aggiuntivi, terzo termine tra virgolette, contenente uno o più parametri separati da virgole;
Vediamo quindi l'elenco dei parametri:
- width=xxx
- height=xxx
- left=xxx
- top=xxx
- status=0
- toolbar=0
- menubar=0
- location=0
- resizable=0
- scrollbars=0
- directories=0
Su questi parametri si può dire che i primi quattro vengono settati con un numero, gli altri sono valori TRUE (1) o FALSE (0).
Apertura di una finestra al click su un link
Per fare ciò sarà necessario racchiudere lo script visto prima in una funzione che chiameremo "aprifinestra":
<script language="javascript" type="text/javascript">
function aprifinestra() {
nuovafinestra = window.open("url_pagina.htm","titolo_pagina","width=xxx, height=xxx, left=xxx, top=xxx");
}
</script>
Quindi richiamiamola all'interno della pagina con un link:
<a href="#" onClick="javascript:aprifinestra()">apri</a>
Al click sul link avremo l'apertura della nostra finestra.
Apertura di una finestra al click su un link senza funzione Javascript
Se non vogliamo utilizzare la funziona javascript, utilizzeremo questo codice:
<a href="javascript:void(0)" onclick="window.open('url_pagina.htm','titolo_pagina','width=xxx,height=xxx,left=xxx,top=xxx');">apri da link</a>
Chiusura di finestra
Per chiudere una finestra non necessariamente POP-UP, utilizzeremo il metodo window.close di Javascript:
<a href="javascript:window.close()">chiudi questa finestra</a>
Il browser chiuderà la finestra nella quale vi è il link.
Supponiamo però di aver aperto la finestra pop-up, di cui il codice sopra, e quindi aver creato l'oggetto "nuovafinestra". Come facciamo a chiudere quella determinata finestra? Semplice:
<a href="#" onClick="javascript:nuovafinestra.close()">chiudi</a>
Con Javascript possiamo quindi creare un sistema di finestre POP-UP gestito in maniera intelligente.

Cambiare le dimensioni del carattere di una pagina
In questo tutorial vedremo come realizzare uno script che permetta ai vostri utenti di ingrandire e/o rimpicciolire il testo di una determinata sezione della pagina.
Supponiamo di avere una pagina strutturata a DIV, e precisamente a due DIV: #pannellofont e #articolo.
Il primo div (pannellofont) fungerà da barra di menu per il cambio del font, mentre nel DIV articolo ci sarà il testo della nostra pagina che deve essere ingrandito.
Ecco quindi il codice di #pannellofont:
<div id="pannellofont" >
<a href="#" onclick="document.getElementById('articolo').style.fontSize='11px';return false;">Normale</a> ::
<a href="#" onclick="document.getElementById('articolo').style.fontSize='13px';return false;">Medio</a> ::
<a href="#" onclick="document.getElementById('articolo').style.fontSize='15px';return false;">Grande</a>
</div>
Da notare di questo codice la riga:
document.getElementById('articolo').style.fontSize='11px';return false;
che imposta per il DIV indicato tra parentesi, articolo nel nostro esemio, un fontsize pari a 11px.
Il DIV #articolo conterrà quindi del testo a nostro piacere.

Realizzare elementi a comparsa con un click
In questo tutorial vedremo come rendere visibili degli elementi della nostra pagina web attraverso un link dinamico...
Potremmo farlo con Onclick="document.elemento.style.display='block'" ma siamo eleganti e quindi ci serviremo di una funzione Javascript.
Nell'esempio in questione avremo un DIV #testo visibile e un DIV #immagine non visibile.
Ecco il codice Javacript da inserire tra i TAGs HEAD del nostro sito:
<script type="text/javascript" language="javascript">
function visualizza(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
}
</script>
Come si può notare, lo script recupera l'id tramite getElementById e tramite un ciclo IF-ELSE setta l'attributo DISPLAY in maniera diversa.
Ecco quindi il codice da inserire tra i TAGs BODY:
<body>
<!-- Inizio codice DIV #testo -->
<div id="testo"><a href="#" onclick="visualizza('immagine'); return false">Clicca qui per visualizzare l'immagine scoop</a></div>
<!-- Fine codice DIV #testo -->
<!-- Inizio codice DIV #immagine -->
<div id="immagine" style="display:none"><img src="immagine.jpg" /></div>
<!-- Fine codice DIV #immagine -->
</body>
Da notare di questo codice la riga
onclick="visualizza('immagine'); return false"
che richiama al click del mouse sul link la funzione "visualizza()" per l'ID #immagine,
e la riga
style="display:none"
che setta il DIV #immagine a non visualizzato.
Possiamo personalizzare questo codice a nostro piacere... creando una specie di tabella, inserendo i bordi ai DIV, o simili...
Sicuramente si tratta di una struttura utile per risparmiare spazio e/o ottenere un effetto dinamico ed elegante.

Un messaggio alert con Javascript
Abbiamo visto in un altro tutorial come realizzare un messaggio alert con VisualbasicScript.
In questa lezione vedremo invece come realizzarlo con Javascript.
Ecco il codice di una pagina tipo.
<html>
<head>
<title>Titolo della pagina</title>
<script language="javascript">
alert("Ciao benvenuto nel mio sito!");
</script>
</head>
<body>
Qui il testo della pagina
</body>
</html>
Da notare di questo codice la riga
alert("Ciao benvenuto nel mio sito!");
che contiene il codice Javascript per visualizzare l'alert. Il testo del messaggio desiderato va quindi racchiuso dentro gli apici.
Il risultato del nostro esempio sarà un alert con testo "Ciao benvenuto nel mio sito!".
Le funzioni che ricoprono questi messaggi sono innumerevoli, e con un pò di conoscenza di Javascript potrete realizzare una procedura di controllo per un form, che visualizzi alert in caso di errore, oppure creare una messaggistica di benvenuto, ecc...

Data e ora in una pagina web con Javascript
In questo tutorial vedremo come poter sfruttare Javascript per ottenere lo stesso risultato.
<script language="javascript">
document.write('<hr>Ora esatta: ' + Date());
document.write('.Questa pagina è stata aggiornata il ' + document.lastModified);
</script>
Il codice visualizzerà un output di questo tipo:
Ora esatta Thu Jul 14 11:26:33 2005.Questa pagina è stata aggiornata il07/14/2005 11:26:33
Quindi la funzione date() permette di visualizzare la data attuale, mentre la funzione document.lastmodified visualizza la data dell'ultima modifica al documento.
Queste righe di codice possono logicamente essere posizionate in qualsiasi punto del BODY della nostra pagina.
Molto utile quindi se vogliamo uno script che visualizzi a quando risale l'ultimo aggiornamento della nostra pagina.

Blocco del tasto destro del mouse
Articolo a cura di Alberto Giuliani
Riferimenti dell'autore: @ URL
Fin dal principio, cari lettori, vi dirò che questo script non impedisce agli utenti di "rubare", o, meglio, visionare il codice HTML delle proprie pagine web.
In poche parole impegna il tasto destro del mouse nella generazione di un alert con testo personalizzabile... Ecco il codice da inserire tra i tags <head>
e </head>:
<script language="JavaScript1.2">
<!-- Start
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Qui il tasto del messaggio");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// end -->
</script>
Da notare
alert("Qui il tasto del messaggio");
che contiene il testo personalizzabile del messaggio che comparirà alla pressione del tasto destro del mouse.
Per qualsiasi dubbio, chiedete sul forum.

Aggiungere il sito ai preferiti
Articolo a cura di Alberto Giuliani
Riferimenti dell'autore: @ URL
Il primo passo da compiere è aggiungere questo codice tra i TAGs <head> e </head>:
<script language="JavaScript" type="text/javascript">
<!-- Start
var bookmarkurl="http://www.miosito.com"
var bookmarktitle="Titolo e descrizione"
function addbookmark()
{
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
// End -->
</script>
Ora non resta che aggiungere nel punto della pagina, quindi fra i TAGs <body> e </body%gt;, in cui desideriamo che appaia il link questo codice:
<a href="javascript:addbookmark()">Aggiungi miosito.com ai preferiti</a>
Esso richiamerà la funzione "addbookmark" ed aggiungerà il vostro sito ai preferiti.

Imposta questo sito come homepage
Inseriamo tra i TAGs <head> e </head> il seguente
codice:
<script language="JavaScript" type="text/javascript">
<!-- Start
function homepage()
{
if(document.all)
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.miosito.com);
}
// End -->
</script>
Da notare
document.body.setHomePage('http://www.miosito.com)
che contiene l'indirizzo della pagina, che dovremo impostare e che sarà utilizzato come indirizzo dell'homepage.
Ora inseriamo tra i TAGs <body> e </body> questo codice:
<a href="javascript:homepage()">Imposta questo sito come pagina iniziale</a>

Cambiare l'aspetto di un link grazie al rollover
Vediamo com'è possibile trasformare l'aspetto di un link quando il mouse vi passa sopra!
Essenzialmente si tratta di un rollover che, con i css, va impostato così:
* a:link è lo stato normale di un link
* a:hover è lo stato rollover di un link
Pertanto dobbiamo impostare questi stili per ottenere l'effetto desiderato...
Ecco alcune proprietà dei css da utilizzare:
* text-decoration: none; elimina la sottolineatura da un link
* text-decoration: underline; aggiunge la sottolineatura a un link
* font-weight: bold; attribuisce il grassetto al link
* color: red; definisce il colore del link
* background-color: red; attribuisce il colore rosso allo sfondo del link
Pertanto, supponiamo di volere un link di colore rosso non sottolineato che, al passaggio del mouse, diventi blu e sottolineato... ecco come fare:
Copiate e incollate questo codice nella vostra pagina web tra i tag <head> e </head>
<style>
a:link {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
</style>
Inserite un collegamento e il gioco è fatto! Modificate le proprietà dei collegamenti a vostro piacimento.

Creare un menu con effetto rollover senza immagini
Vedremo come è possibile realizzare un menu con effetto rollover grazie ai css e senza ricorrere ad immagini di background che potrebbero appesantire il nostro sito!
Innanzitutto dobbiamo definire i vari stili per il tag <div>!
<style>
/* imposto lo stile per il contenitore del menu */
div#menu {
border: 1px solid red;
width: 120px;
padding: 1px;
background-color: #ffcc66;
}
/* imposto lo stile per i link */
div#menu a {
background-color: #FFCC00;
color: black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
border: 1px solid red;
display: block;
margin: 2px;
}
/* imposto lo stile per l'effetto rollover */
div#menu a:hover {
border: 1px solid red;
background-color: orange;
color: blue;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
</style>
Ovviamente questo codice va incollato tra <head> e </head> o meglio ancora salvato in un file css per poi essere richiamato come foglio esterno nel vostro Html.
Intervenite nel codice per cambiare i colori, i bordi etc... ma fatelo solo se sapete dove mettere le mani!!!
Ed ora costruiamo il menu vero e proprio in un <div> di nome menu:
<div id="menu">
<a href="home.php">HOMEPAGE</a>
<a href="chisono.php">CHI SONO</a>
<a href="lezioni.php">LEZIONI</a>
<a href="manuali.php">MANUALI</a>
<a href="guestbook.php">GUESTBOOK</a>
<a href="mailto:nome@email.it">CONTATTI</a>
</div>
Modificate l'elenco dei link come vi pare e piace. Se dovete allungare il menu basta aggiungere questa riga (prima della chiusura del </div> e cambiare i dati:
<a href="pagina.php">LINK DA AGGIUNGERE</a>.

Cambiare il puntatore del mouse
Vediamo come è possibile cambiare il puntatore del mouse in modo da rendere più carine le nostre pagine...
Dobbiamo impostare un css nel quale settiamo l'elemento della pagina a cui associare le proprietà del cursore.
Supponendo di voler associare al <body> della nostra pagina un cursore diverso da quello di default, avremo questo foglio di stile:
body {
cursor: crosshair;
}
Ecco alcuni attributi del cursor:
* crosshair: puntatore a forma di croce;
* hand: classica manina dello stato a:hover dei link;
* move: crocetta con quattro frecce agli estremi, generalmente visibile quando si sposta una finestra in ambiente Windows;
* text: il puntatore assume la forma del cursore di Word, o di qualsiasi altro editor di testo, quando si vuole scrivere tra due parole;
* wait: il puntatore assume la forma di una clessidra;
* help: il puntatore sarà formato dalla solita freccia di default, seguita alla destra da un punto interrogativo.
Queste sono solo alcune delle proprietà... sostituite il puntatore in base alle vostre esigenze e ricordate che potete applicare queste proprietà anche a tabelle, div e quant'altro.

Centrare un immagine di sfondo
I Css ci permettono ci centrare un'immagine di sfondo con poche righe di codice.
Vediamo come impostare le caratteristiche base di un sito che dispone di una immagine di sfondo:
body {
margin: 0px auto 0px auto;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #ccc;
background-position: center;
background-image: url(immagine.gif);
background-repeat: no-repeat;
}
L'attributo che ci permette di centrare l'immagine è background-position: center; mentre le due righe sottostanti servono a definire quale sarà l'immagine di sfondo e la ripetizione della stessa.

Simulare l'effetto giornale in una pagina web
Abbiamo visto in una lezione precedente com'è possibile cambiare gli attributi della prima lettera di un elemento. Questa volta riprenderemo lo stesso argomento per creare un effetto tipo quello degli articoli di giornale, in cui la dimensione della prima lettera è più grande di quella del resto dell'articolo.
Oltre alla classica proprietà font-size (sappiamo tutti a cosa serve) utilizzeremo il float, la cui particolarità sta nella capacità di far disporre attorno a sè tutti gli elementi che seguono (nel nostro caso il resto del paragrafo).
Vediamo come realizzare questo effetto... incolliamo questo codice tra i tag head:
<style>
body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p:first-letter {
font: italic;
color:#990000;
font-size:36px;
float: left;
vertical-align:top;
}
</style>
e la porzione di codice seguente in un punto qualsiasi del body:
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
Dichiarando il float come left non abbiamo fatto altro che disporre la prima lettera a sinistra e lasciarla circondare dal testo che segue

Scrivere testo in verticale con i CSS
Alle volte, più per un effetto grafico che per necessità, può esserci utile scrivere del testo in verticale su una pagina web!
Quello che oggi vi illustrerò è un modo semplicissimo che ci permette di ovviare alle classiche "andate a capo" tramite interruzioni di riga!
L'effetto è infatti realizzabile mediante il seguente codice:
<p>
A<br />
A<br />
A<br />
A<br />
</p>
E' possibile mantenere più pulito e meno ingombrante il codice utilizzando la proprietà writing-mode messa a disposizione dai Css, mantenendo allo stesso tempo il medesimo effetto grafico! Vediamo come:
<p style="writing-mode: tb-rl;">AAAA</p>
Unica pecca: l'effetto sarà visibile solo con MS IExplorer.

Scrivere testo lampeggiante con i Css
Nei siti web, specie quando si vuole attirare l'attenzione su una sezione particolare del sito, si usa del testo lampeggiante! La maggior parte dei webmaster realizzano questo effetto utilizzando codice Javascript, ignari del fatto che il medesimo effetto può anche essere realizzato con una sola riga di Css, impostando su blink la proprietà text-decoration. Ecco come:
<style>
.lampeggiante {
color: #FF0000;
text-decoration: blink;
}
</style>
E ora non ci resta che richiamare la classe in un div (nel nostro caso) o in un qualsiasi altro elemento del body:
<div class="lampeggiante">Testo lampeggiante!</div>
Unica pecca: l'effetto è visibile solo sui browser che utilizzano Gecko come motore di rendering! Il nostro tanto amato Internet Explorer non è ancora in grado di riprodurre l'effetto!

Effetti di trasparenza sulle immagini
Alle volte può essere utile creare degli effetti di sfumatura per rendere più accattivanti alcuni elementi del body! Oggi vedremo come è possibile sfumare un'immagine senza dover ricorrere ad alcun programma di grafica!
Ovviamente, anche in questo caso, ci vengono in soccorso i Css offrendoci la proprietà filter da utilizzare nel seguente modo:
<style>
img#immagine {
filter:alpha(opacity=50);
}
</style>
Come abbiamo potuto notare il browser di casa Microsoft utlizza, per il valore di opacity, un range che varia da 0 a 100. E' inutile dire che sfumare un'immagine al 100% significa non ottenere alcun effetto! Per quanto riguarda i browser Gecko-based bisogna invece utilizzare queste proprietà, con un range che varia tra 0 e 1 (lo 0 viene omesso):
-moz-opacity:.50;
opacity:.50;
Inseriamo la nostra immagine, ricordandoci di assegnarle come id "immagine":
<img src="immagine.gif" name="immagine" width="200" height="150" id="immagine" />
Il gioco è fatto. Ricordate che è anche possibile sfumare altri elementi del body come p, div o altro ancora. Basterà cambiare solamente l'elemento e il suo id nel Css oppure creare una classe generica per tutti gli elementi in questo modo:
<style>
.sfumatura {
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
</style>

Realizzare un banner accessibile
In questo tutorial vedremo come realizzare un banner accessibile con solo codice CSS.
Per capire ciò che vogliamo realizzare, date uno sguardo a questo link.
Il banner in questione potrebbe benissimo contenere delle immagini al posto del testo. Esso è ciò che si suole chiamare un BANNER ACCESSIBILE.
Una volta inserito in una pagina web, è sicuramente visibile, data la grandezza del font e, se personalizzato, può essere reso molto accattivante.
Vediamo il codice della pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina con banner</title>
<style type="text/css">
#banner a{
border-color:#0000CC;
border-width:4px;
border-style:inset;
background-color:#FFCC00;
font-family:"Trebuchet MS";
font-size:36px;
display:block;
color:#000;
text-align:center;
text-decoration:none;
width:auto;
}
#banner a:hover {
background-color:#990000;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="banner">
<a href="#">Tutorials, scripts, guide per webmasters!</a>
</div>
</body>
</html>
Da notare di questo codice come si assegni ai links del div "banner" un bordo, uno sfondo, una visualizzazione block che fa si che compaiano uno sotto l'altro e una grandezza del font maggiore.
Nel caso volessimo utilizzare delle immagini di sfondo? Basterà modificare i CSS in questo modo:
#banner a {
background-image:url(immagine.jpg);
...
}
#banner a:hover {
background-image:url(immagine2.jpg);
}

Realizzare un menu a tab
In questo tutorial vedremo come realizzare un menu a schede con i CSS. Si tratta sicuramente di una tipologia di menu elegante ed interessante. Eccone un'anteprima.
Probabilmente molti non lo crederanno, ma non utilizzeremo immagini o codici complessi... solo ed esclusivamente codice XHTML e CSS.
Supponiamo di avere un sito a cinque pagine. Ecco il codice CSS da inserire nelle pagine:
<style type="text/css">
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448;
}
#navlist li a:visited { color: #667;
}
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#corrente {
background: white;
border-bottom: 1px solid white;
}
</style>
Da notare in questo codice come si lavori sui bordi dei div: vi è un contenitore globale con un bordo inferiore, e la voce del menu che corrisponde alla pagina corrente viene presentata senza bordo.
Quindi inseriamo nella prima pagina questo codice:
<div align="center">&nbsp;</div>
<div id="contenitoremenu">
<ul id="navlist">
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
<li><a href="#">pagina due</a></li>
<li><a href="#">pagina tre</a></li>
<li><a href="#">pagina quattro</a></li>
<li><a href="#">pagina cinque</a></li>
</ul>
</div>
Da notare in questo codice la riga
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
che imposta come link corrente quello alla pagina uno, ossia presenta in modo diverso il link della pagina corrente.
Dovrete quindi impostarlo diversamente a seconda della pagina.
A voi il compito di personalizzare il set di colori. Possiamo personalizzare questo codice in diverse maniere, aggiungendo effetti al nostro menu.

Creare un menu a discesa
In questo tutorial vedremo un semplice codice per realizzare un menu a discesa da inserire nelle nostre pagine web
Sicuramente si tratta di un ottimo menu da infilare in spazi ridotti.
L'esempio qui sopra apre i links in un nuova finestra. Ecco il codice:
<FORM>
<select onchange ="window.open(this.options[this.selectedIndex].value,'blank')">
<option>Scegli.....</option>
<option value="pagina.htm">Link1</option>
<option value="info.php">Link2</option>
<option value="ciao.htm">Link3</option>
</select>
</FORM>
Possiamo notare di questo codice la riga
window.open
che è il metodo Javascript per l'apertura di una nuova finestra
e
option value="ciao.htm"
che contiene come valore l'url della pagina che deve aprire.
E se volessimo fare in modo che le pagine vengano aperte nella stessa finestra?
Ecco il codice:
<FORM>
<select onchange ="window.location=this.options[this.selectedIndex].value,'blank'">
<option>Scegli.....</option>
<option value="pagina.htm">Link1</option>
<option value="info.php">Link2</option>
<option value="ciao.htm">Link3</option>
</select>
</FORM>
Non resta che personalizzare la grafica del form con i CSS.
Potremmo realizzare un menu anche con i CHECKBOX, ma sicuramente otterremmo un effetto meno gradevole dal punto di vista grafico...

Un menu a pulsanti con i CSS
In questa lezione vedremo come realizzare un menu a pulsanti.
A questo link trovate un'anteprima.
Sembrerebbero essere pulsanti di un form, ma in realtà si tratta di links in un DIV trattati con FLOAT, DISPLAY e con i bordi che cambiano al passaggio del mouse.
FLOAT serve a porre i vari links del menu l'uno di fianco all'altro, di modo che si crei un menu orrinzontale. Nel caso volessimo un menu verticale, basterebbe eliminare FLOAT nel codice CSS.
DISPLAY serve a separare le voci del menu l'una dall'altra.
Ecco il codice CSS:
<style type="text/css">
#menu a:link
{
float: left;
display:block;
color:#000;
font-size: x-small;
font-family:Verdana, Arial, Helvetica, sans-serif;
height:2em;
line-height:2em;
padding:0 1em;
background:#DEDEDE;
text-decoration:none;
border-top:2px solid white;
border-left:2px solid white;
border-bottom: 2px solid black;
border-right:2px solid black;
}
#menu a:hover
{
float: left;
display:block;
color: #FFCC00;
padding:0 1em;
background:#DEDEDE;
text-decoration:none;
border-top:2px solid black;
border-left:2px solid black;
border-bottom: 2px solid #ffffff;
border-right:2px solid #ffffff;
}
</style>
Quindi il codice per richiamare il menu:
<div id="menu">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
Da notare come nello stato a:link il bordo superiore e quello di sinistra siano bianchi, e i restanti due neri. Al passaggio allo stato a:hover( = passaggio del mouse) i colori si invertono, realizzando l'effetto pulsante.

Effetto sfumatura sulle immagini con i CSS
Vi è mai capitato di creare un'immagine troppo viva e non sapere come fare a sfumarla utilizzando il vostro programma di grafica? Niente paura... arrivano i Css!
Applichiamo un filtro all'immagine con l'attributo filter, assegnandogli il valore alpha e passando ad alpha tra parentesi il parametro opacity che stabilisce (numericamente) il grado di sfumatura.
Esaminiamo il codice:
<img src="immagine.gif" style="filter: Alpha(Opacity=40);">

Un banner con i CSS
In questo tutorial vedremo come realizzare un banner accessibile con solo codice CSS.
Per capire ciò che vogliamo realizzare, date uno sguardo a questo link.
Il banner in questione potrebbe benissimo contenere delle immagini al posto del testo.
Esso è ciò che si suole chiamare un BANNER ACCESSIBILE.
Una volta inserito in una pagina web, è sicuramente visibile, data la grandezza del font, e, se personalizzato, può essere reso molto accattivante.
Vediamo il codice della pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina con banner</title>
<style type="text/css">
#banner a{
border-color:#0000CC;
border-width:4px;
border-style:inset;
background-color:#FFCC00;
font-family:"Trebuchet MS";
font-size:36px;
display:block;
color:#000;
text-align:center;
text-decoration:none;
width:auto;
}
#banner a:hover {
background-color:#990000;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="banner">
<a href="#">Tutorials, scripts, guide per webmasters!</a>
</div>
</body>
</html>
Da notare di questo codice come si assegni ai links del DIV banner, un bordo, uno sfondo, una visualizzazione BLOCK, che fa si che compaiano uno sotto l'altro, e una grandezza del font maggiore.
Nel caso volessimo utilizzare delle immagini di sfondo?
Basterà modificare i CSS in questo modo:
#banner a {
background-image:url(immagine.jpg);
...
}
#banner a:hover {
background-image:url(immagine2.jpg);
}

Realizzare un elegante menu a schede con CSS
Articolo a cura di Alberto Giuliani
Riferimenti dell'autore: @ URL
In questo tutorial vedremo come realizzare un menu a schede con i CSS.
Probabilmente molti non lo crederanno, ma non utilizzeremo immagini o codici complessi. Solo ed esclusivamente codice XHTML e CSS.
Supponiamo di avere un sito a cinque pagine.
Ecco il codice CSS da inserire nelle pagine:
<style type="text/css">
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448;
}
#navlist li a:visited { color: #667;
}
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#corrente {
background: white;
border-bottom: 1px solid white;
}
</style>
Da notare di questo codice come si lavori sui bordi dei DIV: vi è un contenitore globale con un bordo inferiore, e la voce del menu che corrisponde alla pagina corrente viene presentata senza bordo.
Quindi inseriamo nella prima pagina questo codice:
<div align="center">&nbsp;</div>
<div id="contenitoremenu">
<ul id="navlist">
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
<li><a href="#">pagina due</a></li>
<li><a href="#">pagina tre</a></li>
<li><a href="#">pagina quattro</a></li>
<li><a href="#">pagina cinque</a></li>
</ul>
</div>
Da notare di questo codice la riga
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
che imposta come link corrente quello alla pagina 1, ossia presenta in modo diverso il link della pagina corrente.
Dovrete quindi impostarlo diversamente a seconda della pagina.
A voi il compito di personalizzare il set di colori.
Possiamo personalizzare questo codice in diverse maniere, aggiungendo effetti al nostro menu.

Creare un POP-UP stile flash con i CSS
In questo tutorial vedremo come utilizzando i CSS sia possibile creare un pop-up senza bordi sile flash, che si chiuda tramite la simpatica X in alto o in basso del POP-UP.
Questo tipo di POP-UP ha il "vantaggio" di non essere bloccato dal Firewall di Windows XP, come succede con i POP-UP Flash privi di cornice.
Sicuramente si tratta di uno strumento utilie per fare pubblicità all'interno del proprio sito.
Per questo tutorial sono necessari:
>Un editor testuale o HTML
>Un programma grafico (opzionale).
Per capire quello che vogliamo realizzare, ecco un'anteprima.
Nella pagina qui sopra noi abbiamo utilizzato un'immagine come testo del pop-up, ma potremmo benissimo inserire solo testo.
Realizziamo il codice CSS da inserire tra i TAGs HEAD della nostra pagina.
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
#banner {
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
border:0px;
background-color:#FFFFFF;
width: 245px;
height: 181px;
left: 333px;
top: 151px;
}
#banner a
{
color:#FFCC00;
text-decoration:none;
background-color:#FFFFFF;
}
#banner a:hover
{
color:#FFCC00;
text-decoration:underline;
background-color:#FFFFFF;
}
#chiudi
{
position:absolute;
width:9px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#000000;
left: 570px;
top: 137px;
text-align:right;
}
#chiudi a
{
background-color:#FFFFFF;
font-weight:bold;
color:#000000;
text-decoration:none;
text-align:right;
}
#chiudi a:hover
{
background-color:#FFFFFF;
font-weight:bold;
color:#990000;
text-decoration:none;
text-align:right;
}
</style>
Ora passiamo alla realizzazione del codice presente tra i TAGs BODY. Eccolo qui sotto abbondantemente commentato:
<body>
<!-- Inzio codice testo pagina -->
Qui il testo della pagina... (noi abbiamo messo le classiche frasi latine..)
<!-- Fine codice testo pagina -->
<!-- Inizio codice POP-UP -->
<div id="banner">
<a href="http://www.agwebsolutions.it" target="_blank"><img src="immagine.png" border="0" alt="Clicca qui" /></a>
</div>
<!-- fine codice pop-up -->
<!-- Inizio codice barra di chiusura POP-UP -->
<div id="chiudi" align="right">
<a href="#" onclick="banner.style.display='none';
chiudi.style.display='none'"><strong>X</strong></a>
</div>
<!-- Fine codice barra di chiusura POP-UP -->
</body>
Qui salviamo la pagina e proviamo a vedere il risultato.
La posizione del POP-UP possiamo settarla tra i TAGs STYLE, oppure se disponiamo di un editor HTML con visualizzazione "Design" possiamo spostarlo comodamente con il mouse...
A voi il piacere (se mai vorreste) di cambiare la posizione della X rispetto al POP-UP.

Immagine di sfondo: tutti gli attributi possibili (no-repeat, position, ecc)
Ci siamo già occupati in un tutorial dell'utilizzo dell'attributo BACKGROUND. In questo tutorial osserveremo in particolare come sia possibile impostare un'immagine di sfondo, centrarla, far si che si ripeta solo una volta.
Ecco il codice CSS:
body {
/*Imposto il percorso dell'immagine */
background-image:url(immagine.gif);
/*Imposto il colore di sfondo della pagina */
background-color:#CCCCCC;
/*Imposto la posizione dell'immagine nello sfondo */
background-position:right;
/*Imposto il numero di volte cui l'immagine deve ripetersi nello sfondo */
background-repeat:no-repeat;
}
L'URL e il colore dell'immagine hanno attributi palesi, di cui non serve una spiegazione.
Le opzioni possibili per "background-position" sono:
-bottom
-center
-inherit (in alto a sx)
-top
-left
-right
Le opzioni di "background-repeat" sono:
-norepeat
-repeat
-inherit
-repeat-x
-repeat-y
L'attributo può essere omesso o settato a "repeat" se vogliamo che l'immagine copra tutto lo sfondo.

Creare un menu con effetto rollover con i CSS
In questo tutorial vedremo come sia possibile realizzare un menu con effetto rollover con i CSS, ossia un menu in cui al passaggio su ogni singola voce cambia il colore di sfondo della stessa.
Si tratta sicuramente di una tipologia di menu adottata in molti siti web, e garantisce un risultato elegante con codice pulito.
Vediamo quindi il codice della pagina:
<html>
<head>
<title>Titolo documento </title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
background-color:#336699;
}
.menu {
background-color:#336699;
border:0;
color:#FFFFFF;
padding:2px;
display:block;
text-decoration:none;
width:auto;
}
.menu a {
background-color:#336699;
border:0;
color:#FFCC33;
padding:2px;
display:block;
text-decoration:none;
width:auto;
}
.menu a:hover {
background-color:#FFCC33;
border:0;
color:#000000;
padding:2px;
display:block;
text-decoration:none;
width:auto;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link</a>
<a href="#">Link4</a>
<a href="#">Link5</a>
<a href="#">Link6</a>
<a href="#">Link7</a>
<a href="#">Link8</a>
</div>
</body>
</html>
Tra i TAGs STYLE compaiono quindi tutti gli attributi. Abbiamo dapprima definito alcuni elementi di formattazione del BODY e poi la classe MENU, di cui abbiamo considerato gli aspetti in A e A:HOVER.
Grazie a "display:block" che permette una visualizzazione delle voci una sotto l'altra, e a "background-color", che stabilisce il colore di sfondo [si noti che questo cambia tra .menu e .menu a:hover] abbiamo potuto realizzare questo menu.
Nel codice compreso tra i TAGs BODY per creare il menu basta creare un DIV con CLASS=menu e scrivere le singole voci di menu come normali collegamenti.

Il valore è espresso in percentuale, anche se il simbolo % non viene riportato, più basso è il valore e maggiore sarà la sfumatura sull'immagine.

Testo tutto minuscolo (o maiuscolo) senza Office
Questo trucco può tornare utile a chi non ha installato i programmi di Office sul proprio computer, e che magari ha l'esigenza di trasformare un testo, scritto tutto in maiuscolo, in minuscolo (o viceversa). Con Word infatti, c'è un apposito comando dal menu "Formato" e non ultimo si può usare la combinazione di tasti Maiusc+F3 valida su tutti gli applicativi della suite da ufficio di casa Microsoft. Ma nel caso in cui non la si possieda? Come si può effettuare ugualmente questa operazione? E' abbastanza semplice...
Aprire il Blocco Note ed incollateci queste righe:
<html>
<head>
<style type="text/css">
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-transform: lowercase;
}
</style>
</head>
<body>
<p>METTI QUI IL TUO TESTO</p>
</body>
</html>
Dopodiché occorrerà copiare il testo che si desidera trasformare, ed incollarlo tra i tag <p> e </p>. Fatto ciò, basterà salvare il file con il nome che si desidera e con l'estensione .htm (a questo proposito, occorre selezionare la voce "Tutti i file" nella sezione "Salva come", in basso alla finestra di dialogo). Ultima cosa da fare, sarà quella di aprire il file appena creato, per poi -se si desidera- copiarlo da altra parte.
L'operazione descritta serve a trasformare il testo da maiuscolo a minuscolo; se si volesse fare l'operazione inversa, basterà cambiare un parametro: text-transform: uppercase

Menu a tendina con i selectbox: il JumpMenu
Il cosiddetto JumpMenu è un menu a scelta rapida, utile sia per l'utente per una navigazione più agevole, che per lo sviluppatore, onde ottimizzare spazio sulla pagina e risorse.
Viene realizzato mediante l'utilizzo del Tag Html <select>, ed animato con un piccolo script ad hoc.
Creiamo sia il codice Html che lo script in un'unica routine Javascript:
function JumpMenu(links) {
//Crea un link all'indice della select selezionato
location.href = links[links.selectedIndex].value;
}
//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
voci[0] = "Pagina 1";
voci[1] = "Pagina 2";
voci[2] = "Pagina 3";
voci[3] = "Pagina 4";
voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni
var link = new Array();
link[0] = "pagina1.htm";
link[1] = "pagina2.htm";
link[2] = "pagina3.htm";
link[3] = "pagina4.htm";
link[4] = "pagina5.htm";
//Crea la struttura Html della select, all'evento onChange lancia la funzione
document.write("<select onChange=JumpMenu(this)>");
document.write("<option value=#>Jump to...</option>");
//Esegue un ciclo ed estende tutte le voci del menu con i relativi valori
for(i=0; i<5; i++) {
document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}
document.write("</select>");

Blocco del tasto destro del mouse
Fin dal principio, cari lettori, vi dirò che questo script non impedisce agli utenti di "rubare", o, meglio, visionare il codice HTML delle proprie pagine web.
In poche parole impegna il tasto destro del mouse nella generazione di un alert con testo personalizzabile... Ecco il codice da inserire tra i tags <head>
e </head>:
<script language="JavaScript1.2">
<!-- Start
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Qui il tasto del messaggio");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// end -->
</script>
Da notare
alert("Qui il tasto del messaggio");
che contiene il testo personalizzabile del messaggio che comparirà alla pressione del tasto destro del mouse.

Caricare una pagina dopo alcuni secondi
Grazie al meta-tag "Refresh" è possibile caricare un'altra pagina dopo un certo numero di secondi che noi stessi impostiamo.
Ecco il codice da inserire tra i tag head:
<META HTTP-EQUIV="Refresh" CONTENT="10; url=pagina.htm">
I parametri da modificare sono:
CONTENT="10; è il numero di secondi dopo il quale la pagina pagina.htm verrà caricata;
url=pagina.htm"; indica la pagina che sarà caricata. E' possibile usare anche un indirizzo assoluto, per es: http://www.xxxxxxxxxx.it

Inserire effetti di transizione al caricamento di una pagina
E' possibile ottenere, grazie a una sola riga di codice, un effetto di transizione al caricamento della pagina!
La riga da inserire tra gli head è la seguente:
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=5,Transition=0)">
Modificate i parametri come segue:
* Page-Enter o Page-Exit se volete che l'effetto si verifichi quando si entra nella pagina o quando si esce dalla stessa;
* Duration: è la durata in secondi dell'esecuzione dell'effetto di transizione;
* Transition: è un valore che varia tra 0 e 23; ad ogni numero corrisponde un effetto differente. Ciò significa che potete scegliere tra ben 24 effetti diversi.
Provate pure, ma ricordate che funziona solo su Internet Explorer.

Realizzare un menu accessibile grazie alle accesskey
In fase di progettazione di un sito web si dovrebbe tener conto anche dell'accessibilità. Impareremo a creare un menu capace di aprire pagine web come con le cosiddette scorciatoie da tastiera di Windows. In questo modo elimineremo anche il problema ai portatori di handicap impossibilitati nell'uso del mouse che, altrimenti, resterebbero fuori dalla visione del nostro sito!
Come ben sapete, Windows ci permette di aprire il menu File premendo sulla tastiera Alt+f. In un sito web è possibile realizzare la stessa ed identica cosa grazie all'attributo accesskey del tag <a>.
Vediamo come realizzare link con le accesskey (o chiavi di accesso):
<a href="contatti.htm" accesskey="c">Contattami</a>
Con un link così strutturato sarà possibile aprire la pagina 'contatti.htm' premendo sulla tastiera Alt+c e successivamente Invio. Premendo infatti solo Alt+c si otterrà il focus sul link, ma non l'apertura della pagina correlata.
Creiamo quindi un menu accessibile:
| <a accesskey="h" href="index.htm"><u>H</u>omepage</a> | <a accesskey="c" href="contattami.htm"><u>C</u>ontattami</a> | <a accesskey="f" href="forum.htm"><u>F</u>orum</a> |
Un consiglio utile: per far capire all'utente che il menu usa le accesskey è buona norma sottolineare nella voce del menu la lettera che corrisponde alla chiave d'accesso.
Nel nostro esempio le tre voci del menu saranno così visibili:
| Homepage | Contattami | Forum |

Il nostro sito tra i preferiti
Vediamo come far inserire ai nostri visitatori il nostro sito tra i preferiti con un solo click!
Inseriamo tra <head> e </head> della nostra pagina questo blocco di codice:
<!-- inizio codice per l'inserimento nei preferiti -->
<script language="JavaScript1.2">
var bookmarkurl="http://www.miosito.it"
var bookmarktitle="Michele Sassi Web Design"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>
<!-- fine codice per l'inserimento nei preferiti -->
e nel punto in cui vogliamo il link inseriamo questa riga:
<a href="javascript:addbookmark()">Tra i preferiti</a>

Imposta questo sito come homepage
Vedremo come è possibile fare in modo che i nostri utenti possano impostare il nostro sito come homepage con un solo click.
Inseriamo tra i tags <head> e </head> il seguente codice:
<script language="JavaScript" type="text/javascript">
<!-- Start
function homepage() {
if(document.all)
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.miosito.com);
}
// End -->
</script>
e ora nel punto del <body> in cui vogliamo compaia il link inseriamo questo codice:
<a href="javascript:homepage()">Imposta questo sito come pagina iniziale</a>

Cambiare al volo il font-size
Vediamo come è possibile, per questioni di usabilità, cambiare la dimensione dei caratteri di una pagina web.
Copiamo e incolliamo queste righe:
<a href="#" onclick="document.getElementById('container').style.fontSize='12px';return false;">12px</a>
<a href="#" onclick="document.getElementById('container').style.fontSize='14px';return false;">14px</a>
<a href="#" onclick="document.getElementById('container').style.fontSize='16px'; return false;">16px</a>
Ed ora creiamo il div "container" destinato a contenere il testo...
<div id="container">Sassidesign.it, vedete come il testo cambia la grandezza...</div>
Attenzione: container è l'id dell'elemento della pagina web di cui volete cambiare le dimensioni; sostituitelo con il nome del vostro id di cui volete siano cambiate le dimensioni.

Un alternativa al pulsante Indietro del browser
Javascript ci offre la possibilità di tornare indietro alla pagina precedente grazie a un link che, praticamente, va a sostituire il pulsante "Indietro" del browser.
Realizzarlo è semplice, basta copiare e incollare questa riga nel punto dove vogliamo che il link appaia:
<a href="javascript:history.go(-1);">Indietro</a>
Possiamo cambiare arbitrariamente il numero delle pagine contenuto tra parentesi, ma fare una cosa del genere non avrebbe senso!

Richiamare un alert tramite un link
Vediamo come visualizzare un alert di Javascript cliccando su un link!
Innanzitutto è necessario creare la funzione che stampi a video il messaggio che, nel nostro caso, chiameremo stampamessaggio; vediamo come crearla:
<script language="javascript" type="text/javascript">
<!--
function stampamessaggio()
{
alert("Questa funzione è un alert di Javascript.\n\nwww.sassidesign.it");
}
//-->
</script>
Come avete potuto notare, per andare a capo nella finestra dobbiamo usare la cosidetta sequenza di escape \n.
Per richiamare la funzione stampamessaggio è necessario creare il link in questo modo:
<a href="javascript:stampamessaggio()">Clicca qui</a>

Reindirizzare il navigatore dopo un intervallo di tempo
E' possibile, con Javascript, rimandare un utente su un sito esterno dopo un invervallo di tempo specificato.
Le tre righe da incollare sono le seguenti:
<script type="text/javascript">
setTimeout('location.href="http://www.sassidesign.it"',5000);
</script>
Modificheremo opportunamente il sito verso cui reindirizzare l'utente e l'intervallo di tempo che deve trascorrere dal caricamento della pagina al reindirizzamento stesso!
Il tempo è espresso in millisecondi, quindi nel nostro caso il navigatore sarà rimandato su www.sassidesign.it dopo 5 secondi!

Un alternativa al classico link 'Top'
L'Html utilizza il sistema delle ancore per muoversi da un punto all'altro della pagina utilizzando dei link particolari, tipo
<a href="#top">Torna ad inizio pagina</a>
agganciando il valore #top ad un'ancora ipertestuale posizionata ad inizio pagina
<a name="top">Inizio della pagina corrente</a>
Questo sistema comporta il salvataggio della pagina corrente (compresa del nuovo valore accodato) in cache
paginacorrente.html#top
Javascript mette a disposizione il metodo scrollTo() dell'oggetto window per creare un'ancora più elegante che by-passi il problema della cache.
Vediamo come realizzare questo tipo di link:
<a href="javascript:window.scrollTo(0,0) ">Torna ad inizio pagina</a>
dove i valori (0,0) rappresentano rispettivamente le coordinate della pagina in larghezza ed in altezza.

Stampare con un click
Javascript ci offre la possibilità di stampare le pagine web cliccando su un bottone, evitando la classica procedura: File / Stampa.
Il comando per eseguire la stampa è il seguente e va incollato nel punto del body dove vogliamo venga visualizzato il bottone.
<script language="Javascript1.2">
var message = "Stampa" ;
function printpage() {
window.print();
} document.write("<form><input type=button "
+"value=\""+message+"\" onClick=\"printpage()\"></form>");
</script>

Gestire i contenuti con un drop down menu
Questo script ci può tornare utile se abbiamo molti contenuti da inserire nelle nostre pagine ma non abbiamo spazio a sufficienza!
Molti webmaster lo utilizzano per la gestione delle FAQ (Frequency Asked Questions)... ma ovviamente possiamo adattarlo a qualsiasi nostro scopo!
Incolliamo queste righe dove vogliamo che compaia questo drop down menu.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="Sezione n. 1">Sezione n. 1</option>
<option value="Sezione n. 2">Sezione n. 2</option>
<option value="Sezione n. 3">Sezione n. 3</option>
<option value="Sezione n. 4">Sezione n. 4</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<script language="JavaScript">
var thecontents=new Array()
// modificare qui i contenuti... fare attenzione alle sequenze di escape
thecontents[0]='Qui tutto il testo della sezione n. 1'
thecontents[1]='Qui tutto il testo della sezione n. 2'
thecontents[2]='Qui tutto il testo della sezione n. 3'
thecontents[3]='Qui tutto il testo della sezione n. 4'
function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}
document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
Ricordate che per le sequenze di escape Javascript usa il carattere \ (backslash), quindi se dovete andare a capo nella riga dove andrete ad inserire i contenuti utilizzate \n , per inserire un apostrofo \' , per le doppie virgolette \" e così via.

Inserire un alert al caricamento di una pagina web
Con appena tre righe di codice è possibile inserire un alert all'interno delle nostre pagine web:
<script language="Javascript">
alert ("Stai per entrare su www.xxxxxxxxxxxxxxxxxxxxxxx.it. Buona visione!")
</script>
Fatene un uso moderato perchè queste finestre pop-up sono fastidiose e soprattutto perchè i nuovi software blocca pop-up tendono appunto a bloccarle e quindi l'utenete potrebbe non visualizzarle correttamente!

Aprire un link in una finestra pop-up
Per questioni di comodità può essere necessario dover aprire un link in una finestra pop-up, specie se il contenuto di tale finestra è di dimensioni estremamente ridotte.
Per fare questo, solitamente si ricorre a Javascript inserendo in un punto qualsiasi del body il seguente codice:
<a href="javascript:;" onClick="window.open('pagina.html', 'titolo', 'width=300, height=300, resizable, status, scrollbars=1, location');">Apri in una finestra pop-up</a>
Come si può dedurre la pagina correlata è "pagina.html". Per apportare sostanziali modifiche alla finestra sarà necessario eliminare dal codice le voci resizable (se si vuole una finestra non ridimensionabile), status (se non si vuole vedere la barra di stato) e location (se non si vuole visualizzare la barra degli indirizzi); sarà opportunamente necessario impostare a 0 il valore di scrollbars nel caso in cui non si vogliono visualizzare le barre di scorrimento!
Quella che abbiamo appena visto è la procedura da eseguire se il link da aprire in una pop-up è solo uno. Qualora avessimo la necessità di aprirne più di uno in finestre pop-up fisicamente uguali tra loro, ci converrebbe ricorrere a quest'altro codice, molto più generico e valido per tutti i link:
<script type="text/javascript">
function apripopup(url) {
newin = window.open(url,'titolo','scrollbars=yes,resizable=yes, width=300,height=300,status=no,location=no,toolbar=no');
}
</script>
Questo codice va inserito tra i tag head della pagina; con la riga di codice sottostante invece richiameremo ogni singolo link nel body, modificandone opportunamente la pagina da aprire:
<a href="javascript:apripopup('pagina.htm');">Apri pagina.htm </a>
<a href="javascript:apripopup('pagina2.htm');">Apri pagina2.htm </a>

Controllare la corrispondenza tra due campi di un form
Vediamo come realizzare un ciclo if-else in Javascript che controlli la corrispondenza tra due campi di un form.
Supponiamo di voler registrare i visitatori al nostro sito, e che il processo di registrazione preveda l'inserimento di username e password. Supponiamo quindi di aver messo due campi per la password, uno per la scelta e uno per la conferma.
Ecco quindi il codice del nostro form:
<form method="post" action="" name="modulo" onsubmit="return controllapassword(this)">
Username scelto:<input type="text" name="username" size="30"/><br />
Digita qui la password:<input type="password" name="password" size="30"/><br />
Conferma la password:<input type="password" name="password_di_convalida" size="30" /><br />
<input type="submit" value="Invia" />
</form>
Da notare quindi la riga
onsubmit="return controllapassword(this)"
che richiama la funzione "controllapassword".
Quindi inseriamo il codice Javascript tra i tags head della nostra pagina:
<script language="Javascript" type="text/javascript">
<!--
function controllapassword(modulo) {
if (modulo.password.value == "") {
alert("Errore: inserire una password!")
modulo.password.focus()
return false
}
if (modulo.password.value != modulo.password_di_conferma.value) {
alert("La passord inserita non coincide con la prima!")
modulo.password.focus()
modulo.password.select()
return false
}
return true
}
-->
</script>
Lascio a voi il compito di personalizzare i messaggi di alert e la grafica del form.

Realizzare elementi a comparsa con un click
Vediamo come rendere visibili degli elementi della nostra pagina web attraverso un link dinamico...
Potremmo farlo con Onclick="document.elemento.style.display='block'" ma preferiamo essere eleganti e quindi ci serviremo di una funzione Javascript.
Nell'esempio in questione avremo un div #testo visibile e un div #immagine non visibile.
Ecco il codice Javacript da inserire tra i tags head del nostro sito:
<script type="text/javascript" language="javascript">
function visualizza(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
}
</script>
Come si può notare, lo script recupera l'id tramite getElementById e tramite un ciclo if-else setta l'attributo display in maniera diversa.
Ecco quindi il codice da inserire tra i tags body:
<body>
<!-- Inizio codice DIV #testo -->
<div id="testo"><a href="#" onclick="visualizza('immagine'); return false">Clicca qui per visualizzare l'immagine scoop</a></div>
<!-- Fine codice DIV #testo -->
<!-- Inizio codice DIV #immagine -->
<div id="immagine" style="display:none"><img src="immagine.jpg" /></div>
<!-- Fine codice DIV #immagine -->
</body>
Da notare in questo codice la riga:
onclick="visualizza('immagine'); return false"
che richiama al click del mouse sul link la funzione "visualizza()" per l'ID #immagine, e la riga:
style="display:none"
che setta il DIV #immagine a non visualizzato.
Possiamo personalizzare questo codice a nostro piacere, creando una specie di tabella, inserendo i bordi ai div. Sicuramente si tratta di una struttura utile per risparmiare spazio e/o ottenere un effetto dinamico ed elegante.

Realizzare un menu a tendina con i Selectbox
Il cosiddetto JumpMenu è un menu a scelta rapida, utile sia per l'utente per una navigazione più agevole, che per lo sviluppatore, onde ottimizzare spazio sulla pagina e risorse.
Viene realizzato mediante l'utilizzo del Tag Html <select>, ed animato con un piccolo script ad hoc.
Creiamo sia il codice Html che lo script in un'unica routine Javascript:
function JumpMenu(links) {
//Crea un link all'indice della select selezionato
location.href = links[links.selectedIndex].value;
}
//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
voci[0] = "Pagina 1";
voci[1] = "Pagina 2";
voci[2] = "Pagina 3";
voci[3] = "Pagina 4";
voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni
var link = new Array();
link[0] = "pagina1.htm";
link[1] = "pagina2.htm";
link[2] = "pagina3.htm";
link[3] = "pagina4.htm";
link[4] = "pagina5.htm";
//Crea la struttura Html della select, all'evento onChange lancia la funzione
document.write("<select onChange=JumpMenu(this)>");
document.write("<option value=#>Jump to...</option>");
//Esegue un ciclo ed estende tutte le voci del menu con i relativi valori
for(i=0; i<5; i++) {
document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}
document.write("</select>");

Il link 'Chiudi questa finestra'
Navigando per il web vi sarà sicuramente capitato di vedere delle finestre con il link "Chiudi questa finestra".
L'utilità di questo link è praticamente nulla in quanto l'utente può comunque chiudere la stessa finestra cliccando sulla X. Il motivo per cui generalmente si usa questa funzione è quello di dare un tocco d'eleganza alla finestra, specie per le pop-up.
Ecco come realizzare il link:
<a href="javascript:;" onclick="window.close()">Chiudi questa finestra</a>

Personalizzare un campo di testo con l'evento onclick
Vediamo come personalizzare un form allo scatenarsi dell'evento onclick. Prenderemo come esempio un form di login, con due campi (username e password) e un pulsante di invio.
Ecco il codice:
<form action="">
<input type="text" value="username" onclick="this.value=''" />
<input type="password" value="password" onclick="this.value=''" />
<input type="submit" value="Invia" />
</form>
Si può notare nei tags dei due input l'attributo
onclick="this.value=''"
che fa si che al click del mouse sul campo, questo diventi vuoto.
Sicuramente si tratta di una soluzione elegante per realizzare dei moduli accessibili, in cui l'utente possa facilmente orientarsi, e allo stesso tempo, potrebbe essere un modo elegante per presentare un form di accesso ad un'area riservata.

Bloccare il tasto destro del mouse
Questo script non impedisce agli utenti di "rubare", o meglio, visionare il codice Html delle proprie pagine web.
In poche parole impegna il tasto destro del mouse nella generazione di un alert con testo personalizzabile. Ecco il codice da inserire tra i tags <head> e </head>:
<script language="JavaScript1.2">
<!-- Start
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Qui il tasto del messaggio");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// end -->
</script>
Da notare:
alert("Qui il tasto del messaggio");
che contiene il testo personalizzabile del messaggio che comparirà alla pressione del tasto destro del mouse.

Rendere obbligatori i campi di un form
Vediamo come con un semplice ciclo if-else in Javascript sia possibile controllare i campi di un form. Utile se abbiamo un modulo con campi obbligatori e vogliamo che gli utenti li compilino.
Supponiamo di avere un form "modulo", con due campi, "nome" e "cognome". Ecco il codice:
<form name="modulo" id="modulo" onSubmit="return controllo();" method="post" action="">
<input name="nome" type="text" id="nome" size="30" />
<br />
<input name="cognome" type="text" id="cognome" size="30" />
<br />
<input type="submit" name="Submit" value="Invia" />
</form>
Da notare di questo codice la riga
onSubmit="return controllo();"
che richiama la funzione Javascript "controllo" al click sul pulsante di submit (Invia nel nostro caso).
Ecco quindi il codice Javascript da posizionare tra i tags <head>:
<script language="JavaScript">
function controllo(){
with(document.modulo) {
if(nome.value=="") {
alert("Errore: compilare il campo NOME");
nome.focus();
return false;
}
if(cognome.value=="") {
alert("Errore: compilare il campo COGNOME");
cognome.focus();
return false;
}
}
alert("Controllo effettuato con successo. Il modulo sarà inviato.");
return true;
}
</script>
Da notare
with(document.modulo)
che serve ad effettuare il codice nel form "modulo" della pagina (document).
Ogni controllo di nullità dei campi se vero genera un alert, rende attivo il campo in questione e restituisce return false. Quindi nel caso in cui tutti i campi siano stati compilati correttamente, genera un alert e restituisce return true.
Sicuramente il modulo è personalizzabile. Ad esempio, si potrebbero effettuare dei controlli ulteriori in presenza di campo "email"... Lascio comunque a voi questo divertimento.

Abilitare e disabilitare i campi di un form
Vediamo come potere effettuare dei cambiamenti di proprietà ad un form.
Nella prima parte di questo tutorial vedremo come abilitare i campi di un form, nella seconda come disablitarli.
Abilitare un campo di un form
Per abilitare un campo di un form si intende far sì che al verificarsi di qualche evento, il cursore del mouse lampeggi dentro al campo, di modo che questo sia attivo.
Supponiamo di avere un form "modulo" con un campo "indirizzo" che vogliamo rendere attivo al caricamento della pagina.
Ecco quindi il codice del tag body:
<body onLoad="document.modulo.indirizzo.focus()">
Possiamo notare come l'evento focus renda attivo il campo "indirizzo" del form "modulo" della pagina (document) al caricamento (Onload) della pagina stessa. Logicamente questo evento può essere associato al caricamento di qualsiasi altro oggetto della pagina.
Disabilitare un campo di un form
La versione attuale del linguaggio Html dispone di due attributi per disabilitare un campo di un form, che esteticamente e non solo ottengono risultati diversi: readonly e disabled.
Ecco un form con due campi, uno impostato READONLY e l'altro DISABLED:
<form>
<input type="text" disabled value="ciao"/>
<input type="text" readonly value="ciao"/>
</form>
Possiamo notare come il primo campo appaia grigio (tecnicamente incassato), mentre il secondo appaia apparentemente normale, sebbene il testo al suo interno non sia modificabile.
La differenza dei due attributi, oltre che nel colore, sta nel fatto che il contenuto di un campo readonly è selezionabile e copiabile.

Redirect tramite meta tag
Impostare il redirect di una pagina web attraverso l'utilizzo dei meta tag
Attraverso i meta tag del documento HTML è possibile reindirizzare la pagina ad un' altra impostando il numero di secondi entro cui far eseguire l'azione di indirizzamento.
I meta tag non vengono letti da tutti i browser, di conseguenza è utile inserire del contenuto nella pagina web che si desidera reindirizzare.
I meta tag vanno impostati tra <head> e </head>
Ecco come impostare il redirect attraverso il metatag :
<meta http-equiv="Refresh" content="4;url=http://www.solohosting.it">
L'attributo content imposta il numero di secondi di latenza prima del redirect.
Impostando content=0 il redirect sarà immediato
<meta http-equiv="refresh" content="5;URL=pagina.html">
è proprietario IE
Per essere compatibile con altri browser (Firefox) devi inserire il javascript:
window.onload = function() {
setTimeout("redirect()", 5000)
}
function redirect() {
location.href = "pag.html"
}

Un orologio in javascript
Create un file con estensione .js e copiate il listato qui sotto:
<!--
var tags_before_clock = ""
var tags_after_clock = ""
if(navigator.appName == "Netscape") {
document.write('<layer id="clock"></layer><br>');
}
if (navigator.appVersion.indexOf("MSIE") != -1){
document.write('<span id="clock"></span><br>');
}
function upclock(){
var dte = new Date();
var hrs = dte.getHours();
var min = dte.getMinutes();
var sec = dte.getSeconds();
var col = ":";
var spc = " ";
var apm;
if (24 < hrs) {
apm="";
hrs-=24;
}
else {
apm="";
}
if (hrs == 0) hrs=24;
if (min<=9) min="0"+min;
if (sec<=9) sec="0"+sec;
if(navigator.appName == "Netscape") {
document.clock.document.write(tags_before_clock
+hrs+col+min+col+sec+spc+apm+tags_after_clock);
document.clock.document.close();
}
if (navigator.appVersion.indexOf("MSIE") != -1){
clock.innerHTML = tags_before_clock+hrs
+col+min+col+sec+spc+apm+tags_after_clock;
}
}
setInterval("upclock()",1000);
//-->
Per richiamare l'oggetto, nella pagina html, inserite qusta riga:
<script language='JavaScript1.2' src='ora.js'></script>
Vedi il risultato qui (Funziona solo in Internet Explorer)

Javascripts
Come avvisare gli utenti
JavaScript è molto usato per comunicare con gli utenti delle pagine web tramite finestre di avviso.
A volte può essere importante avvisare un utente su una determinata situazione, allora useremo una finestra di avviso, che "avviserà" l'utente.
Qui di seguito uno script molto semplice ma efficace, che mostra come creare una sobria finestra di avviso.
<html>
<head>
<title>Ecco la mia pagina personale realizzata in JavaScript</title>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
alert("Benvenuti cari amici di WebMasterpoint nella mia pagina personale realizzata in JavaScript!")
// End hiding script from old browsers -->
</SCRIPT>
</head>
<body BGCOLOR=WHITE>
<NOSCRIPT>
<H1>Questa pagina richiede JavaScript!!!</H1>
</NOSCRIPT>
</body>
</html>
alert("Benvenuti cari amici di WebMasterpoint nella mia pagina personale realizzata in JavaScript!")
Il codice necessario per ottenere la finestra di avviso illustrata.
Dovete semplicemente inserire, fra le parentesi del metodo alert(), il testo desiderato.

Reindirizzare l'utente
Con JavaScript si possono fare tante cose, ad esempio: oltre a verificare se il supporto a JavaScript è attivo è possibile anche verificare la versione che l’utente è in grado di utilizzare. Lo script che sto per proporvi, mostra come reindirizzare o inviare gli utenti ad una pagina alternativa in base alla versione di JavaScript supportata dal loro browser.
<html>
<head>
<title>Niente JavaScript...mmmh!!!</title>
<SCRIPT LANGUAGE="JAVASCRIPT1.2" TYPE="TEXT/JAVASCRIPT">
<!-- Hide script from old browsers
window.location="benvenutijs.html"
// End hiding script from old browsers -->
</SCRIPT>
</head>
<body BGCOLOR=WHITE>
<H1>Per vedere questo sito hai bisogno dell'ultima versione di JavaScript...non sai cosa ti perdi!?! Che aspetti? Aggiorna subito il tuo browser!</H1>
</body>
</html>
<SCRIPT LANGUAGE="JAVASCRIPT1.2" TYPE="TEXT/JAVASCRIPT">
L’attributo LANGUAGE del tag SCRIPT vi permette di specificare la versione di JavaScript minima necessaria a eseguire lo script. In questo caso è necessario che il browser supporti JavaScript 1.2 o successivo. Se l’utente non possiede un browser adeguato, vedrà una finestra con su scritto
Per vedere questo sito hai bisogno dell'ultima versione di JavaScript...non sai cosa ti perdi!?! Che aspetti? Aggiorna subito il tuo browser! .
Vi consiglio di realizzare script che non richiedano versioni molto avanzate, altrimenti gli utenti potrebbero stufarsi ed abbandonare subito il vostro sito!
window.location="benvenutijs.html"
Questa riga indica al browser di modificare la pagina corrente con quella specificata, nel nostro caso benvenutijs.html
Vi propongo adesso un'alternativa allo script precedente, in modo da ottimizzare l'effetto. Mi spiego meglio: quando un utente carica lo script precedente, va alla pagina principale e poi, in base al risultato, il browser carica automaticamente un’altra pagina. Questa tecnica consente all’utente di visualizzare per un attimo la prima pagina poi di essere inviato alla seconda.
Lo script che vi propongo adesso mostra un metodo migliore per il reindirizzamento, utilizzando un collegamento.
Viene mostrata l’homepage: facendo click sul collegamento, si viene indirizzati subito ad una delle pagine predisposte, a seconda che si abbia o no JavaScript.
<html>
<head>
<title>Benvenuti nel mio sito!!!</title>
</head>
<body BGCOLOR=WHITE>
<H1 ALIGN=CENTER><A HREF="script.html" onClick="window.location='benvenutijs.html';return false">Benvenuti nel mio sito...entrate!</A></H1>
</body>
</html>
<H1 ALIGN=CENTER><A HREF="script.html" onClick="window.location='benvenutijs.html';return false">Benvenuti nel mio sito...entrate!</A></H1>
Come avrete notato JavaScript viene incluso nel tag del collegamento: se l’utente non ha JavaScript e fa click sul collegamento, seguirà il percorso HREF finendo in una pagina che gli comunicherà:
This page requires JavaScript
In caso contrario, il gestore di eventi onClick caricherà la nuova pagina benvenutijs.html
return false Indica di interrompere l’azione dell’utente, non caricando quindi la pagina HREF.
Se l’utente ha JavaScript, verrà inviato in una finestra con all'interno questa scritta:
Benvenuti nel mio sito...etc etc

Semplice animazione sulla Barra di Stato
L'esempio che segue mostra come porre una scritta sulla barra di stato con al lato degli "smile" in movimento. Basta inserire lo script all'interno del tag <HEAD> e...il gioco è fatto!
<HTML>
<HEAD>
<TITLE>Semplice animazione sulla barra di stato</TITLE>
<script language=JavaScript>
var saluto=" Benvenuti amici di WebMaster Point! Che ne pensate? "
var testo=""
var started=false
var step=0
var times=1
function benvenuti()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
window.status = saluto;
setTimeout("animazione()",1);
}
testo = saluto;
}
}
function mostratesto(txt)
{
testo = txt;
setTimeout("benvenuti()",400)
times++
}
function animazione()
{
step++
if (step==7) {step=1}
if (step==1) {window.status='):-:-:-'+testo+'-:-:-:('}
if (step==2) {window.status=':-):-:-'+testo+'-:-:(-:'}
if (step==3) {window.status='):-):-'+testo+'-:(-:('}
if (step==4) {window.status=':-):-)'+testo+'(-:(-:'}
if (step==5) {window.status=':-:-):-'+testo+'-:(-:-:'}
if (step==6) {window.status=':-:-:-)'+testo+'(-:-:-:'}
setTimeout("animazione()",200);
}
</script>
</HEAD>
<BODY bgcolor="red" onLoad="benvenuti()">
<h2>Osservate la barra di stato....</h2>
</body>
</html>
Come avrete notato, sono presenti delle semplici funzioni! Niente di particolarmente difficile!
IMPORTANTE!!! Ricordatevi di inserire nel tag <body>, tra le parentesi angolari, onLoad="benvenuti()" .
E' possibile apportare delle modifiche...ad esempio modificando i numeri all'interno del setTimeout si cambia la velocità!

Scritta Scorrevole
Per coloro che vogliono inserire una scritta di benvenuto o di comunicazione per gli utenti che scorra continuamente sulla barra di stato, ecco un semplice script che va inserito nel tag <HEAD>.
ESEMPIO
<HTML>
<HEAD>
<TITLE>Scritta scorrevole</TITLE>
<script language=JavaScript>
var scrtxt=" Ciao ragazzi!!! "+" Benvenuti su WebMaster Point:il punto di riferimento dei webmaster italiani e non! ";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scrittascorrevole() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scrittascorrevole()",100);
}
</script>
</HEAD>
<BODY onLoad="scrittascorrevole();return true;">
<h2>Guardate sotto...sulla barra di stato...</h2>
</body>
</html>
Anche qui una semplice funzione fa tutto!
IMPORTANTE!!! Ricordatevi di inserire onLoad="scrittascorrevole();return true;" nel tag <body>.

Descrizione del Link
Lo script dell'esempio che segue da la possibilità di mostrare il contenuto di un link. Tecnicamente è molto semplice, basta inserire all'interno del link (sempre tra le parentesi angolari e, naturalmente, all'interno del <BODY>) un po' di codice.
<HTML>
<HEAD>
<TITLE>Scritta che mostra il contenuto di un link</TITLE>
</HEAD>
<BODY>
<p align="center"><font face="Arial" size="4">Passate con il mouse sulla scritta qui sotto e osservate con attenzione
cosa succede sulla barra di stato...</font>
<p align="center"><font face="Arial" size="4">&nbsp;</font><center>
<a href="http://www.webmasterpoint.org" onMouseOut="window.status =' '; return true"; onMouseOver="window.status =' WebMaster Point: il punto di riferimento dei webmaster '; return true"><font face="Arial" size="4">WebMaster Point</font></a>
</center>
</p>
</body>
</html>
Il codice che ci interessa è il seguente:
onMouseOut="window.status =' '; return true"; onMouseOver="window.status =' WebMaster Point: il punto di riferimento dei webmaster '; return true"

Apertura di una nuova finestra centrata
Molte volte i webmaster hanno bisogno di diversi "trucchi" per attirare l'attenzione dei visitatori su un avvenimento, su un avviso importante, etc...ecco che l'apertura di una nuova finestra risulta di particolare importanza, permettendo la lettura di svariati contenuti senza perdere mai di vista la finestra che si sta visitando. Molti penseranno che è possibile aprire una nuova finestra con un po' di HTML, ma JavaScript permette un maggiore controllo della finestra.
Ecco un esempio molto utile per tutti coloro che amano la precisione. Lo script proposto in questo esempio permette di aprire una finestra indipendente e centrarla.
<HTML>
<HEAD>
<TITLE>Apertura di una nuova finestra centrata</TITLE>
<script language="javascript" type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings ='height='+h+',width='+w+',top='+TopPosition+',
left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
if(win.window.focus){
win.window.focus();
}
}
</script>
</HEAD>
<BODY>
<p align="center">
<a href="http://www.webmasterpoint.org" onclick="NewWindow(this.href,'name','400','400','yes');return false">
<b><font face="Arial" size="4">WebMaster Point: il punto di riferimento dei webmaster!!! <br> clicca qui...non te ne pentirai!!!</font></b></a>
</BODY>
</HTML>

Benvenuto in base l'ora
Lo script che segue è in grado di dare il benvenuto agli utenti del vostro sito in base all'ora.
Potrete variare i messaggi di benvenuto come desidererete.
Esempio
<html>
<head>
<title>Benvenuto su WebMaster Point....</title>
</head>
<body>
<h4>
<script language=javascript type="text/javascript">
<!-- Hide script from old browsers
now= new Date
if (now.getHours() < 6) {
document.write("Buongiorno! Che ci fai a quest'ora in rete? Buon per me!!! :-) Buon viaggio!")
}
else if (now.getHours() < 12) {
document.write("Buongiorno!")
}
else if (now.getHours() < 18) {
document.write("Buon pomeriggio!")
}
else {
document.write("Buona sera!")
}
// End hiding script from old browsers -->
</script>
</h4>
</body>
</html>

Make a table cell light up
Test by putting you mouse over me.

 

To do this use the following code:

<table border="2" cellpadding="0">
  <tr>
   <td onmouseover="this.style.backgroundColor='3366FF';this.style.cursor='hand';"
    onmouseout="this.style.backgroundColor='FFFFFF';"
    onclick="location.href='index.cfm'"
    bordercolor="#FFFFFF"     bgcolor="#FFFFFF">
        Test by putting you mouse over me.
    </td>
  </tr>
</table>

Aggiungi ai preferiti
Molti siti, soprattutto quelli piu' importanti, presentano un link per rendere piu' facile al visitatore l'inserimento della propria homepage fra i preferiti. Ebbene oggi vedremo proprio come inserire anche nelle nostre pagine un link del genere, il codice si divide in due parti: la prima va inserita nel tag HEAD (l'intestazione di un file html), e la seconda da inserire, invece, nel corpo del codice. Ecco la prima parte del codice:
< script language="JavaScript" >
var urlsito="http://geniobibo.too.it"
var titolosito="IL MIO AMICO GENIO"
function aggiungipreferiti(){
if (document.all)
window.external.AddFavorite(urlsito,titolosito)
}
< /script >
Al posto di http://www.geniobibo.too..it bisogna inserire l'indirizzo del proprio sito, mentre la variabile "titolosito" contiene il titolo del sito che viene poi visualizzato nella lista dei preferiti. La seconda parte e' diversa se si vuole creare un link testuale o un link ad immagine, ecco entrambe le possibilità:
< a href="javascript:addbookmark()" >Aggiungi BIBO ai preferiti < /a >
/////////////////////////////////////////////////////////
< a href="javascript:addbookmark()" > < img src="immagine.gif width="88" height="31" > < /a >
Naturalmente per il secondo caso il nome e le dimensioni dell'immagine possono cambiare a vostro spiacimento.

Oggetti e margini della pagina
Se usate un editor HTML visuale (per esempio Front Page) vi sarete sicuramente accorti che inserendo un'immagine, una tabella o del semplice testo non vengono posizionati perfettamente ai margini superiore e laterale della pagina. Potrebbe, pero', tornare utile farlo soprattutto con le tabelle, che vengono usate per la struttura delle pagine; vediamo allora cosa inserire nel codice per annullare lo spazio fra i margini della pagina e gli oggetti inseriti:
< BODY MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0" >
Qui abbiamo impostato a zero la distanza, ma volendo la si puo' pure aumentare in base alle proprie esigenze. Inoltre vorrei farvi notare come il codice inserito di fatto si ripete, perche' Netscape e Explorer sono in piu' punti incompatibili (anche in questo caso): quindi inseriamo MARGINWIDTH="0" MARGINHEIGHT="0" per Netscape e TOPMARGIN="0" LEFTMARGIN="0" per Internet Explorer.

Proteggiamo l'indirizzo e-mail dallo spam
È buona abitudine inserire nelle nostre pagine web anche il nostro indirizzo e-mail per poter essere facilmente contattati dai visitatori. Per far ciò basta inserire il seguente codice Html:
<A HREF="mailto:nome@dominio.suffisso">E-mail</A>
Per proteggere la nostra e-mail possiamo sostituire "@" con "&#64;". Il codice Html quindi sarà:
<A HREF="mailto:nome&#64;dominio.suffisso">E-mail</A>
Questa tecnica non ci protegge al 100% ma sicuramente rende la vita difficile a qualche spam robots, quindi perchè non usarla?

Oggetto dell'e-mail
Per creare un collegamento ad un'e-mail con l'oggetto preimpostato il codice Html da utilizzare è:
<A HREF="mailto:nome@dominio.suffisso?subject=Testo_oggetto"> E-mail+Oggetto</A>

Redirect
Vogliamo che i nostri visitatori siano automaticamente reindirizzati ad altra pagina web dopo un certo numero di secondi? Basta inserire il seguente codice Html tra i tag <HEAD> e </HEAD>:
<META HTTP-EQUIV="REFRESH" CONTENT="1; url=http://www.dominio.suffisso/pagina.html">
Il valore di content indica quanti secondi devono trascorrere prima che il browser vada all'indirizzo web indicato. Content può anche essere pari a 0; in questo modo il browser andrà all'indirizzo web indicato istantaneamente.

Aggiungi a preferiti
Se vogliamo che i nostri visitatori con un semplice click aggiungano l'indirizzo del nostro sito tra i loro "Preferiti" il codice Html da utilizzare è:
<A HREF="javascript:window.external.AddFavorite ('http://www.dominio.suffisso', 'Nome Sito')">Preferiti</A>
Attenzione:AddFavorite è supportato solo da Internet Explorer 4+.

Imposta come Home page
Per fare in modo che i nostri visitatori aggiungano il nostro sito come pagina predefinita del loro browser il codice Html da utilizzare è:
<A style="cursor:hand" HREF onClick="this.style.behavior= 'url(#default#homepage)';this.setHomePage('URL_sito');">Imposta come Home page</A>
Funziona solo se il browser è Internet Explorer 4+

Avanti e indietro
Per inserire nelle nostre pagine due comandi che funzionano come i tasti AVANTI e INDIETRO del nostro browser il codice da utilizzare è:
<A HREF="javascript:history.go(-1)">INDIETRO</A>
<A HREF
="javascript:history.go(1)">AVANTI
</A>
Possiamo anche creare due bottoni per queste funzioni con il codice:
<FORM><INPUT type="button" value="INDIETRO" onclick="history.go(-1)"></FORM>
<FORM><INPUT
type="button" value="AVANTI" onclick="history.go(1)"
></FORM>

Descrizione di un link nella barra di stato
È possibile visualizzare una descrizione di un link nella barra di stato del browser. Quando il mouse passerà sopra un link, la sua descrizione verrà visualizzata nella barra di stato. Il codice da utilizzare è:
<A HREF="http://www.gdesign.it" onMouseOver="window.status='Principi di Web Design by GDC'; return true" onMouseOut="window.status='';return true">GDesign.it</A>
Aprire una finestra popup al caricamento della pagina
Per fare in modo che si apra una finestra popup al termine del caricamento di una pagina è sufficiente inserire tra <BODY> e </BODY> questo codice:
<SCRIPT language="JavaScript">
window.open('Url del file da aprire','titolo','height=320,width=320,scrollbars,resizable');
</SCRIPT>

Vedere il codice sorgente di una pagina con un click
Inserire tra i tag <HEAD> il seguente codice:
<SCRIPT language="JavaScript">
function ViewSource() {
window.location = "view-source:" + window.location.href }
</SCRIPT>
e dopo creare un link nella pagina web utilizzando il codice:
<A HREF=javascript:ViewSource()>Guarda il codice sorgente</A>

Width e Height
Width e Height sono gli attributi del tag IMG che permettono si specificare la larghezza e l'altezza di un'immagine. Il consiglio è quello di usarli sempre nel tag IMG, perché i browser prima interpretano il codice HTML e visualizzano il testo e soltanto dopo mostrano le immagini. Quindi, se non diciamo ai browser quanto spazio servirà per le immagini, può capitare che il testo venga riposizionato dopo che le immagini vengono caricate e questo implica un maggiore tempo di attesa per la visualizzazione completa di una pagina web.

Puntatore del mouse sui link
Si può modificare l'aspetto del puntatore del mouse quando questo è posizionato sui link. Questo è possibile perché a partire dalla versione 4 di Internet Explorer è stata implementata la proprietà CSS cursor. Il codice da utilizzare è:

<A HREF=
"Inserire Url" STYLE="cursor: auto">Link</A>
Al posto di "auto" si possono inserire i seguenti valori:
crosshair, default, hand, help, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize e text.
Provate a passare con il mouse sopra ad ognuna delle voci sopra elencate e ne vedrete l'effetto.
Questa è una proprietà implementata da Internet Explorer, quindi non è assicurato il funzionamento con altri browser. Ad esempio Netscape Navigator 4.72 ed Opera 6.01 ignorano questa proprietà al contrario di Netscape Navigator 7.0 che la supporta.

Chiudere la finestra del browser con click
Per chiudere la finestra del browser con un solo click si può utilizzare questo codice:

<A HREF
="javascript:self.close()">Chiudi finestra</A>
Con Internet Explorer vi comparirà una finestra che vi chiede la conferma per la chiusura (tranne che la finestra da chiudere è stata aperta per mezzo di javascript come nel caso di una finestra popup che si apre al caricamento della pagina). Con Netscape Navigator e Opera, invece, la finestra verrà chiusa senza alcun bisogno di conferma.

Stampare una pagina web con click
Si può stampare una pagina web con semplice click utilizzando il codice:
<A HREF="#" onClick="window.print();return false">Stampa</A>
Funziona correttamente con Internet Explorer, Netscape Navigator ed Opera.

Immagine di sfondo
Se si utilizza un'immagine di sfondo (background) bisogna considerare che questa non deve essere troppo grande ma nemmeno troppo piccola. Ad esempio una GIF di 2x2 pixel è molto leggera e verrà scaricata subito, ma richiede al browser un processo lungo per visualizzare le immagini affiancate sullo schermo.
Inoltre il procedimento di visualizzazione non rimane nella cache del browser come l'immagine, ma viene ripetuto ogni volta. Conviene allora prestate molta attenzione alla scelta dell'eventuale immagine di sfondo, ricordandosi anche che non deve influenzare in modo negativo la leggibilità delle pagine web.

Aprire una finestra dalle dimensioni predefinite
Se vogliamo aprire tramite un link una finestra dalle dimensioni predefinite basta inserire tra <HEAD> e </HEAD> il seguente codice:
<SCRIPT language="JavaScript">
function apri(){open('Url del file da aprire','titolo', 'height=360 width=400', 'toolbar=1, scrollbars,resizable');}
</SCRIPT>
e dopo creare un link nella pagina web utilizzando il codice:
<A HREF=javascript:apri()>Apri finestra</A>
Possiamo modificare il codice tra <HEAD> e </HEAD> per personalizzare la finestra che vogliamo aprire:
height e width sono l'altezza e la larghezza in pixel;se toolbar=1 avremo una finestra con la barre degli strumenti, se invece è uguale a zero non avremo la barra degli strumenti; se togliamo scroolbar la finestra non avrà le barre di scorrimento (né verticali, ne orizzontali); se togliamo resizable la finestra non potrà essere ridimensionata.

Aprire più finestre con un solo click
Per aprire diverse finestre con un solo click inseriamo tra <HEAD> e </HEAD> il codice:
<SCRIPT language="JavaScript">
function openwindow()
{
window.open("http://www.dominio.suffisso/")
window.open("http://www.dominio.suffisso/")
}
</SCRIPT>
e dopo creiamo un link nella pagina web utilizzando il codice:
<A HREF= javascript:openwindow()>Apri finestre</A>
in alternativa al link possiamo creare un bottone:
<FORM>
<input type=button value="Apri finestre" onclick="openwindow()">
</FORM>
Per aprire un collegamento in una nuova finestra del browser si inserisce target="_blank" nel tag <A HREF>. Se vogliamo che tutti i collegamenti contenuti in una pagina web puntino ad una nuova finestra del browser possiamo inserire tra <HEAD> e </HEAD>:
<BASE target="_blank">
Fatto questo non abbiamo bisogno di specificare nulla in <A HREF>.

Aprire un collegamento in una nuova finestra
Per aprire un collegamento in una nuova finestra del browser si inserisce target="_blank" nel tag <A HREF>. Se vogliamo che tutti i collegamenti contenuti in una pagina web puntino ad una nuova finestra del browser possiamo inserire tra <HEAD> e </HEAD>:
<BASE target="_blank">
Fatto questo non abbiamo bisogno di specificare nulla in <A HREF>.

Linea Orizzontale
Esiste un tag in Html che ci consente di inserire una linea orizzontale:<HR> Si possono specificare alcuni attributi per <HR> come:la larghezza con width="valore in pixel o percentuale";
l'altezza con size="valore in pixel"
il colore con color="valore_esadecimale"
l'allineamento con align="left, center o right";
l'ombreggiatura con noshade.
Se si inserisce solo <HR> si ottiene una linea orizzontale larga quanto la pagina.

Aprire una finestra in una determinata posizione del monitor
Inserire <HEAD> e </HEAD> il seguente codice:
<SCRIPT type="text/javascript">
function openwindow()
{
window.open("url","titolo","width=larghezza,height=altezza,top=valore left=valore")
}
</SCRIPT>
Per posizionare la finestra si attribuisce un valore numerico a top (distanza dall'alto) e a left (distanza dal lato sinistro del monitor). Fatto questo si crea il link nella pagina web con il codice:
<A HREF= javascript:openwindow()>Apri finestra</A>
in alternativa al link possiamo creare un bottone:
<FORM>
<input type=button value="Apri finestra" onclick="openwindow()">
</FORM>

Commenti al codice Html
Può risultare utile inserire dei commenti al codice Html specialmente nel caso in cui più persone sviluppano una stessa pagina. Questi commenti devono rimanere nascosti al browser e per farlo è sufficiente inserirli tra:
<!--Commenti nascosti al browser-->

Distanziare le lettere l'una dall'altra
Il linguaggio HTML ci permette di inserire soltanto uno "spazio" da tastiera; quindi, per inserire più spazi bisogna utilizzare il carattere speciale: &nbsp;

Commenti ai Link
È possibile definire un commento alternativo ai collegamenti ipertestuali tramite il tag TITLE="commento". TITLE funziona allo stesso modo di ALT per le immagini; il commento viene visualizzato quando si passa con il puntatore del mouse sopra il link. Esempio:
<A HREF="http://www.gdesign.it" TITLE="Principi di Web Design by GDC">GDesign.it</A>
Risultato: GDesign.it (passare con il mouse sopra il link)

Eliminare la linea tratteggiata che circonda i link in Internet Explorer
In Internet Explorer i link attivi sono circondati da una linea tratteggiata; per eliminarla è sufficiente utilizzare il codice:
<A HREF="http://www.gdesign.it" onFocus="this.blur()">GDesign.it</A>
A questo proposito vi ricordiamo che se si utilizzano delle immagini che sono anche dei link queste presenteranno un bordo blu. Per eliminarlo basta utilizzare BORDER="0" nel tag IMG.

Inserire l'orario corrente
Per inserire l'orario corrente basta utilizzare il seguente codice all'interno della pagina web:
<SCRIPT type="text/javascript">
var d = new Date()
document.write(d.getHours())
document.write(".")
document.write(d.getMinutes())
document.write(".")
document.write(d.getSeconds())
</SCRIPT>

Menu di collegamento
In alcuni casi è utile inserire nelle proprie pagine web un menu a discesa che contenga una serie di link come questo:
Il codice da utilizzare per creare questo tipo di menu è:
<FORM>
<select onchange ="window.open(this.options[this.selectedIndex].value,'blank')" size="1">
<option>Scegli.....</option>
<option value="Url1">Link1</option>
<option value="Url2">Link2</option>
<option value="Url3">Link3</option>
</select>
</FORM>
Si possono inserire tanti <option value> quanti ne servono. I link vengono aperti in una nuova finestra del browser, quindi è preferibile utilizzare questo menu per i collegamenti esterni al proprio sito web.

Effetto Fade sulle immagini
Premesso che questo effetto funziona solo con Internet Explorer, può risultare interessante utilizzarlo per alcune immagini delle proprie pagine web.
Per vedere l'effetto bisogna passare il puntatore del mouse sull'immagine:

Fade banner
Innanzitutto bisogna inserire tra <HEAD> e </HEAD> il codice contenuto nel file:scritpfade.js. Quindi aggiungere all'interno del tag <IMG>:
style='filter:alpha(opacity=50)'
onmouseover='nereidFade(this,100,60,15)'
onmouseout='nereidFade(this,45,75,15)'
Per personalizzare l'effetto è sufficiente agire sui valori numerici di opacity e nereidFade.
Mantenere fisso lo sfondo di una pagina web
Se si vuole inserire un immagine di sfondo ad una pagina web e si vuole che questa non venga "scrollata" assieme alla pagina basta inserire tra i tag <HEAD> il codice:
<STYLE type="text/css">
body
{
background-image:url_immagine_di_sfondo;
background-attachment:fixed;
}
</STYLE>

CSS e colori
Con i CSS ci sono cinque modi per attribuire valori di colore. Vediamo quali sono:
#RRGGBB :: Notazione esadecimale familiare agli sviluppatori HTML. La prima coppia di lettere corrisponde al canale rosso, la seconda al verde e la terza al blu. Ogni coppia può assumere i valori tra 00 e FF. Ad esempio il nero è rappresentato da #000000 ed il bianco da #FFFFFF.
#RGB :: È la forma compressa del sistema #RRGGBB. In questo caso ogni valore viene replicato per ottenere un valore a sei cifre:#F90 corrisponde a #FF9900.
rgb(rrr.rr%, ggg.gg%,bbb.bb%) :: Questo formato specifica i valori RGB in termini percentuali da 0% a 100%, compresi i valori decimali. Il bianco ad esempio è rgb(100%,100%,100%) ed il rosso "puro" è rgb(100%,0%,0%).
rgb(rrr,ggg,bbb) :: Questo formato specifica i valori RGB utilizzando valori da 0 a 255. In pratica, questa gamma di valori è l’equivalente decimale dello notazione esadecimale. Ad esempio il nero è rgb(0,0,0) ed il verde "puro" è rgb(0,255,0).
Keyword :: Si tratta delle 16 parole chiave basate sui colori originali VGA di windows: aqua, black, blue, fucsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. I browser possono riconoscere altre parole chiave, ma soltanto queste sedici sono contenute nelle specifiche del W3C.
Impostare il colore di sfondo con i CSS
Utilizzando i fogli di stile di stile CSS è molto semplice definire un colore di sfondo per ogni elemento di una pagina web. Vogliamo ad esempio definire un colore di sfondo per BODY, H1 e P; quindi nel nostro foglio di stile (interno o esterno) basterà scrivere:
body {background-color: #999999}
h1 {background-color: #FF9900}
p {background-color: #FFFFFF}
e questo è il risultato.
Data di ultima modifica
A volte può essere utile inserire nelle nostre pagine web la data di ultima modifica. Un modo molto semplice per farlo è inserire questo codice:
<script language="JavaScript">
document.write(document.lastModified)
< /script>
nella parte della pagina dove vogliamo che la data sia visualizzata. Esempio.
Impostare un immagine di sfondo con i CSS
I CSS ci consentono di definire un immagine di sfondo per gli elementi delle nostro pagine web. Ad esempio se vogliamo che una pagina web abbia come sfondo una determinata immagine "image.jpg" basterà scrivere nel nostro foglio di stile (interno o esterno):
body {background-image: url("image.jpg")}
Ricordatevi che bisogna sempre prestare attenzione all'esatto percorso dell’immagine. Quindi se la nostra image.jpg si trova nella directory images il codice diventa:
body {background-image: url("images/image.jpg")}

Testo nella status bar
A volte può essere utile inserire del testo personalizzato nella status bar della finestra del browser. Per farlo basta inserire nell'HEAD della pagina web questo javascript:
<script type="text/javascript">
function load()
{
window.status = "inserisci il testo personalizzato qui"
}
< /script>
e poi aggiungere onload="load()" al tag <BODY> in questo modo:
<body onload="load()">

Inserire la data corrente
Per inserire la data corrente basta utilizzare il seguente codice all'interno della pagina web:
<script type="text/javascript">
var d = new Date()
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
< /script>

Bordi con i CSS
Con i CSS è possibile definire le proprietà dei bordi degli elementi di una pagina web. Le proprietà dei bordi sono: border-style, border-width e border-color. Con border-style si definisce lo stile dei bordi; i valori che si possono assegnare sono:
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Con border-width si definisce la larghezza dei bordi, generalmente un valore in pixel.
Con border-color si definisce il colore dei bordi.
Facciamo un esempio per vedere come applicare un bordo ad un paragrafo <P>. Utilizzando questo css:
p { border-width: 1px; border-style: dashed; border-color: #CC3300;}
il nostro paragrafo si presenterà in questo modo:
Paragrafo con bordo largo 1 pixel, tratteggiato e di colore #CC3300.
Le proprietà dei bordi possono anche essere definite con un'unica dichiarazione in questo modo:
p { border:1px dashed #CC3300; }
Nell'esempio visto sopra abbiamo definito le proprietà che vengono applicate a tutti e quattro i bordi del nostro paragrafo. Ma se vogliamo, possiamo definire delle proprietà diverse per ognuno dei quattro bordi (top, right, bottom, left). Ad esempio con questo css:
p { border-bottom-style: dashed; border-bottom-width: 1px; border-bottom-color: #CC3300;}
impostiamo le proprietà del solo bordo inferiore del paragrafo ottenedo questo risultato:
Paragrafo con bordo inferiore largo 1 pixel, tratteggiato e di colore #CC3300.
Anche in questo caso possiamo definire le proprietà con un'unica dichiarazione:
p { border-bottom: 1px dashed #CC3300;}
Allo stesso modo del bordo inferiore si definiscono anche i bordi degli altri lati utilizzando border-right per il bordo destro, border-top per il bordo superiore e border-left per il bordo sinistro.

Creare un banner pubblicitario a rotazione con links
http://www.spacemarc.it
Grazie a questo script sarà possibile mostrare dei banner in ordine casuale e, ovviamente, con relativo link (con target personalizzabile).
Possiamo inserire lo script sia nel punto esatto della pagina in cui vogliamo che appaiano i banner e sia richiamandolo dall'esterno
Per inserirlo nella pagina:
<script language="JavaScript">
var openInNewWin = true;
var banners = new Array();
banners[0] = new Banner("http://www.nomesito.it", "Visita il primo sito", "1.gif");
banners[1] = new Banner("http://www.nomesito2.it", "Visita il sito 2", "2.gif");
banners[2] = new Banner("http://www.nomesito3.it", "Visita il terzo sito", "3.gif");
banners[3] = new Banner("http://www.nomesito4.it", "Visita il quarto sito", "4.gif");
banners[4] = new Banner("http://www.nomesito5.it", "Visita l'ultimo sito", "5.gif");
function Banner(url, description, image) {
this.url = url;
this.description = description;
this.image = image;
return this;
}
var bNum = Math.round(Math.random() * (banners.length - 1));
document.write("<a href=\"" + banners[bNum].url + "\"");
if (openInNewWin) {
document.write(" target=\"_blank\"");
}
document.write(">");
document.write("<img src=\"" + banners[bNum].image + "\" border=\"0\" alt=\"" + banners[bNum].description + "\">");
document.write("</a>");
</script>
Personalizziamo, ora, lo script descritto sopra.
var openInNewWin = true;
per utilizzare un target specifico (vedi dopo) settiamo TRUE altrimenti FALSE (e il link verrà aperto nella pagina attuale).
Poi vanno preparate le stringhe (array) contenenti i dati di ogni singolo banner: potete inserirne quante ne volete purchè rispettiate la numerazione progressiva partendo da zero.
Adesso bisogna impostare il target che vogliamo (in questo caso _blank)
document.write(" target=\"_blank\"");
Un consiglio: poichè il codice è abbastanza lungo, potrebbe farvi comodo, per una maggiore "pulizia" della pagina e leggibilità, richiamare questa funzione dall'esterno.
Copiate il codice sopra (senza però i tag <script language="JavaScript"> e </script>) in un file di testo fatto con Notepad e salvatelo con estensione .js (es. chgbanner.js).
A questo punto basterà inserire il richiamo a questo file appena creato nelle pagine da noi desiderate in questo modo:
<script language="Javascript" src="chgbanner.js"></script>

Creazione di un pulsante di ridimensionamento.
Si vogliono ottimizzare le pagine del proprio sito in modo che siano ben visibili anche alla risolozione di 800x600 pixel. Si vorrebbe creare un pulsante con il quale si possono facilmente passare dalla risoluzione in uso dello schermo a quest'altra. Il modo più semplice consiste nell'immissione di un comando JavaScript direttamente nel browser. per ridurre la finestra a 800x600 si deve immettere nel campo indirizzo il comando:
"javascript:window.resizeTo(800,600)"
La pressione di Invio riduce la dimensione della finstra. Ora fate clic sull'icona posta al principio della riga dell'indirizzo e trascinarla nella barra dei Collegamenti. Un clic destro sulla nuova icona permette di cambiarne il nome tramite la voce Rinomina dal menù contestuale.

Aprire una pagina a schermo intero
newwindow=windows.open('pagina.html','','fullscreen=1');

Orologio analogico
<script language="JavaScript">
//Analog clock script- By Kurt (kurt.grigg@virgin.net)
//Script featured on Dynamic Drive
//Visit http://www.dynamicdrive.com for this script and more
fCol='444444'; //face colour.
sCol='FF0000'; //seconds colour.
mCol='444444'; //minutes colour.
hCol='444444'; //hours colour.

Ybase=30; //Clock height.
Xbase=30; //Clock width.


H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
Ypos=0;
Xpos=0;
dots=12;
Split=360/dots;
if (NS6){
for (i=1; i < dots+1; i++){
document.write('<div id="n6Digits'+i+'" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:#'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
for (i=0; i < M.length; i++){
document.write('<div id="Ny'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>');
}
for (i=0; i < H.length; i++){
document.write('<div id="Nz'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>');
}
for (i=0; i < S.length; i++){
document.write('<div id="Nx'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>');
}
}
if (NS4){
dgts='1 2 3 4 5 6 7 8 9 10 11 12';
dgts=dgts.split(' ')
for (i=0; i < dots; i++){
document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>');
}
for (i=0; i < M.length; i++){
document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < H.length; i++){
document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>');
}
for (i=0; i < S.length; i++){
document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>');
}
}
if (IE4){
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=1; i < dots+1; i++){
document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++){
document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++){
document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++){
document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
}



function clock(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

if (NS6){
Ypos=window.pageYOffset+window.innerHeight-Ybase-25;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=1; i < dots+1; i++){
document.getElementById("n6Digits"+i).style.top=Ypos-15+Ybase*Math.sin(-1.56 +i *Split*Math.PI/180)
document.getElementById("n6Digits"+i).style.left=Xpos-15+Xbase*Math.cos(-1.56 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.getElementById("Nx"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(sec);
document.getElementById("Nx"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
document.getElementById("Ny"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(min);
document.getElementById("Ny"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
document.getElementById("Nz"+i).style.top=Ypos+i*Ybase/4.1*Math.sin(hrs);
document.getElementById("Nz"+i).style.left=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}
if (NS4){
Ypos=window.pageYOffset+window.innerHeight-Ybase-20;
Xpos=window.pageXOffset+window.innerWidth-Xbase-30;
for (i=0; i < dots; ++i){
document.layers["nsDigits"+i].top=Ypos-5+Ybase*Math.sin(-1.045 +i*Split*Math.PI/180)
document.layers["nsDigits"+i].left=Xpos-15+Xbase*Math.cos(-1.045 +i*Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
document.layers["nx"+i].top=Ypos+i*Ybase/4.1*Math.sin(sec);
document.layers["nx"+i].left=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
document.layers["ny"+i].top=Ypos+i*Ybase/4.1*Math.sin(min);
document.layers["ny"+i].left=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
document.layers["nz"+i].top=Ypos+i*Ybase/4.1*Math.sin(hrs);
document.layers["nz"+i].left=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}

if (IE4){
Ypos=document.body.scrollTop+window.document.body.clientHeight-Ybase-20;
Xpos=document.body.scrollLeft+window.document.body.clientWidth-Xbase-20;
for (i=0; i < dots; ++i){
ieDigits[i].style.pixelTop=Ypos-15+Ybase*Math.sin(-1.045 +i *Split*Math.PI/180)
ieDigits[i].style.pixelLeft=Xpos-15+Xbase*Math.cos(-1.045 +i *Split*Math.PI/180)
}
for (i=0; i < S.length; i++){
x[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(sec);
x[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(sec);
}
for (i=0; i < M.length; i++){
y[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(min);
y[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(min);
}
for (i=0; i < H.length; i++){
z[i].style.pixelTop =Ypos+i*Ybase/4.1*Math.sin(hrs);
z[i].style.pixelLeft=Xpos+i*Xbase/4.1*Math.cos(hrs);
}
}
setTimeout('clock()',100);
}
clock();
//-->
</script>
 

Gestione suoni
[...]codici x gestire la musica nelle pagine
allora:
x aggiungere un suono di sottofondo è necessario inserire questo codice nella pagina:
code:
<bgsound src="tuofile.mid"> -> IE ONLY
<embed src="tuofile.mid"> -> NN e IE 
partiamo da <bgsound>
gli attributi:
<bgsound src="tuofile.mid" balance="+2500" loop="2" volume="-500">
src definisce il file da caricare percorso
balance è un valore che definisce come dev'esser diviso l'output con le casse numero intero preceduto dal segno e compreso tra -10000 e +10000
loop è il numero delle ripetizioni del file numero intero
volume è la definizione del volume (il valore massimo è 0 ovvero il volume selezionato dall'utente nelle impostazioni)
numero intero preceduto dal segno e compreso tra -10000 e 0
<embed>
<embed src="tuofile.mid" autostart="true" loop="true" name="mymidi">
src definisce il file da caricare percorso
autostart definisce se far partire il file automaticamente (true) o meno
true | false
loop o playcount (NN | IE) definisce il numero di ripetizioni del file
numero intero | true false
name definisce il nome dell'embed (i nomi devono essere diversi se si hanno più embed nella stessa pagina). ci torna utile cn JS!!
un nome
height definisce l'altezza (default 22px)
valore in px
width definisce la larghezza (default 144px se console o smallconsole)
valore in px
starttime imposta il momento in cui far partire il suono
minuti:secondi
dopo 30 sec: 00:30 (WIN95 NT Mac)
endtime imposta il momento in cui far finire il suono
minuti:secondi
dopo 1 min e 30 sec: 01:30 (WIN95 NT Mac)
volume imposta il volume
tra 0 e 100
align definisce l'allineamento
top | bottom | center | baseline | left | right | texttop | middle | absmiddle | absbottom
chiariamo gli attributi meno chiari:
- baseline: allinea embed alla base della riga corrente (align "bottom")
- absmiddle: allinea la metà (middle) della linea con la console
- asbbottom: allinea il fondo della console con quello della riga corrente
- texttop: allinea la console con il picco del testo più alto (alle volte coincide con align "top")
controls definisce la console (tasti) del nostro player
i valori sono vari
smallconsole play stop volume
console play pause stop volume
volumelever volume
stopbutton stop
pausebutton pause
playbutton play
se non volete la console..... semplice! mettete l'attributo
hidden="true"
OK! ora possiamo gestire i nostri embed con JS!!
document.nomeembed.play(); //fa partire il nostro embed di nome nomeembed
document.nomeembed.stop(); //naturalmente stoppa il nostro embed!
facciamo finta di avere un embed come questo:
<embed src="file.mid" autostart="false" name="myembed">
x farlo partire...
code:
<script language="JavaScript"> 
function stop() {
document.myembed.stop();

function play() {
document.myembed.play();
}
</script>
...cn un link:...
<a href="java script://" onClick="java script:stop()">stop</a>
...cn un immagine:...
<a href="java script://" onClick="java script:stop()"><img src="stopmusic.gif" alt="STOPPA!"></a>
...cn un pulsante:
<input type="button" value="stoppa" onClick="java script:stop()">
x farlo partire basta cambiare il nome della funzione chiamata nell'onClick cn questa: onClick="java script:play()"
ok
la lezione termina qua!
JS x stoppare tutti gli embed
premessa: tutti gli embed devono chiamarsi "file" + un numero crescente. del tipo: file1 file2 file3 file4 file5....
code:
function stopthemall() {
var num = 14; //numero di embed
for (var i=1; i <= num; i++) {
document.embeds['file'+i].stop();
}
}
richiamato da un link o pulsante con
onClick="java script:stopthemall()"
questo script magari non potrà esser molto utile (sfido qualcuno ad aprire più di un embed alla volta!! ke kasino!!! ) ma mostra un'"utile" elemento dell'oggetto document.
document.embeds['nomeembed'] si riferisce al tag embed di nome "nomeembed" ed equivale a document.nomeembed
la differenza sta nel fatto che in un ciclo tipo quello dello script qui sopra non avrei potuto utilizzare document.nomeembed+1.stop() ...
il risultato sarebbe stato un errore ed un insulto
VARIANTE
code:
function stopthemall() {
var num = 14; //numero di embed
for (var i=0; i < num; i++) {
document.embeds[i].stop();
}
}
document.embeds è stato introdotto nella versione JavaScript1.1
dovrebbe esser supportato sia da IE ke da NN 
e per mettere un suono sui link?? tipo un clik??
chiaramente formato wav....
in una occasione io avevo risolto così...mi serviva un effetto sonoro all'onmouseover sul link....
<a href="percorso/file.htm" onMouseOver="document.all.music.src='musica/music.au'">link</a>
<bgsound src="#" id=music loop=1 autostart="true">
con embed
quote:Originariamente inviato da herrel
e per mettere un suono sui link?? tipo un clik??
chiaramente formato wav.... 
<a href="pagina.htm" onClick="document.nomeembedketiinteressa.src='file1.wav';
document.nomeembedketiinteressa.play();">link</a>
e metti solo un embed
<embed name="nomeembedketiinteressa" src="#">

Trasformare il testo di un campo, tutto in maiuscolo
onblur="this.value=this.value.toUpperCase()" 
Esempio:
<th align="RIGHT" width="80">Cognome:</th><td><input type="text" name="cognome" size="12" onblur="this.value=this.value.toUpperCase()" />

Colorare le barre laterali in Internet Explorer
Alcuni mi hanno chiesto come ho colorato le barre laterali, visualizzabili correttamente con il browser di casa Microsoft dalla versione 5.5 in poi, altrimenti saranno visualizzati con il solito colore grigio. Bisogna effettuare questa operazione: all'interno della vostra pagina html, inserire fra i tag <head> </head> il codice:
<STYLE type=text/css>BODY {
scrollbar-face-color: #666600;
scrollbar-track-color: #666600;
scrollbar-shadow-color: #02306d;
scrollbar-darkshadow-color: #02306d;
scrollbar-highlight-color: #AFAFE1;
scrollbar-3dlight-color: #AFAFE1;
scrollbar-arrow-color: #FFFFFF;
[scrollbar-base-color: #336600];
</STYLE>
ScrollBar-Face-Color e' il colore della barre di spostamento,
ScrollBar-Track-Color e' il colore di sfondo della barra,
ScrollBar-Shadow-Color e' il colore del bordo destro-inferiore della barra di spostamento,
ScrollBar-darkshadow-color e' il colore del bordo destro-inferiore della barra,
ScrollBar-Highlight-Color e' il colore del bordo sinistro-superiore della barra di spostamento,
ScrollBar-3dlight-color e' il colore del bordo sinistro-superiore della barra,
ScrollBar-Arrow-Color e' il colore della freccia dei pulsanti di scorrimento.
I colori sono espressi in formato esadecimale, quindi per conoscere il valore esatto dei colori che desiderate usare, dovete cercare tali valori in un editor (es: Dreamweaver, Photoshop) o qualcosa di simile.

Alcuni tags
Come inserire immagini prese da internet:
<img src="http://indirizzo_immagine">
Per prendere l'indirizzo clicca con il tasto destro sull'immagine, seleziona "proprietà", copia e incolla l'indirizzo.
Nota: per prendere immagini dall'harddisk bisogna prima metterle su un vostro spazio web oppure bisogna usare gli allegati

Come fare le scritte scorrevoli:
<marquee>scritta</marquee>
esempio:
<marquee direction="up" scrollAmount=1 height="40" width="80%">
Direction indica la direzione dello scorrimento.
scrollAmount la velocità
height l'altezza del campo dove scorre il testo
e width è la larghezza in percentuale rispetto alla larghezza totale della pagina

Come allineare il testo a destra|sinistra|centro|giustificato(allargato su tutta la riga)
<p align="left">il testo formattato</p>
Cambiare center, left, right e justify a seconda dei casi.

Come creare un link:
<A HREF="http://www.tuosito.it">visita il mio sito!</A>

Puoi sostituire la scritta con un'immagine, il risultato è sempre quello, tutto ciò che si trova fra i due tags darà un link al sito.
TARGET: serve per fare aprire il link in un'altra finestra:
<A HREF="http:/www.tuosito.it" target="_blank">Visita il mio sito!</A>

Alone intorno al testo
<DIV style="position:relative; width=80%; filter:glow(color=000000)">testo con l'alone</DIV>
Dovete sostituire ai numeri presenti in filter:glow(color=000000) il colore di cui volete che sia l'alone. Ecco qui una tabella da dove potete ricavare i codici dei colori.

Testo al contrario (orizzontale)
<DIV style="position:relative; width=80%; filter:fliph">testo al contrario</DIV>
Attenzione all'allineamento testo!

Testo al contrario (verticale)
<DIV style="position:relative; width=80%; filter:flipv">testo al contrario</DIV>
Anche qui occhio all'allineamento!

Testo con ombra
<DIV style="position:relative; width=80%; filter:blur">testo con ombra</DIV>
Ricordate che un testo con ombra occupa più spazio!

Testo con ombra proiettata
<DIV style="position:relative; width=80%; filter:shadow(color=000000)">testo con ombra</DIV>
Modificate sempre il codice del colore, qui la tabella. State attenti, l'ombra va un po' sotto il testo scritto.

Testo con ombra singola per lettera
<DIV style="position:relative; width=80%; filter:dropshadow(color=000000)">testo con ombra</DIV>
Modificate sempre il codice del colore, qui la tabella. State attenti, l'ombra delle lettere va sotto il testo che avete scritto.

Testo barrato
<STRIKE>testo da barrare</STRIKE>

Gradazioni colori
<div style="width: 100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#C3CDDA,EndColorStr=#FFFFFF)">Prova gradazioni colore...
Ciao!</div>
Non funziona con browser NetScape.

Vari tipi di lista
<UL TYPE=disc>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>
Per una lista puntinata. Se volete, sostituite a "disc" : "circle"(per un cerchio), oppure "square" (per un quadratino).

Inserire filmati e giochi Flash
[FLASH=600,400]indirizzo del file flash[/FLASH]

Inserire una musica
<embed src=indirizzo del file midi autostart=True controls=True loop=1 type=audio/midi>
Oppure:
<BGSOUND SRC=indirizzo del file midi LOOP=INFINITE>

Inserire un filmato Flash in cima ad una sezione, o nella home del forum:
<embed src="indirizzo file flash" quality=high width=600 height=100
type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"></embed>

Musica
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="mp_1503493698" width="200" height="200"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
standby="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject" >
<param name="StretchToFit" value="0">
<param name="AutoStart" value="1">
<param name="Balance" value="0">
<param name="EnableContextMenu" value="1">
<param name="Enabled" value="1">
<param name="EnableErrorDialogs" value="0">
<param name="WindowlessVideo" value="0">
<param name="Rate" value="1.000">
<param name="CurrentPosition" value="0.000">
<param name="CurrentMarker" value="0">
<param name="FullScreen" value="0">
<param name="URL" value="http://www.xxxxxxx.com/file..mid">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="Uimode" value="Mini">
<param name="Volume" value="50">
<EMBED type="application/x-mplayer2"
pluginspage =" http://www.microsoft.com/Windows/MediaPlayer/"
SRC="http://www.midisvoando2.oi.com.br/filmes/voando_uma_linda_mulher.mid"
id="Player"
width="200"
height="200"
autostart=true>
</EMBED>
</object>

Visualizzare un link diverso da quello reale
quando passiamo il mouse su un link in una pagina web, il collegamento viene visualizzato sulla barra di stato. Se vogliamo visualizzarne un altro al posto di quello reale, procediamo così: dopo aver aperto la pagina html nel vostro editor, aggiungiamo il seguente codice:
<A HREF=http://www.prova.com onmouseover="window.status='http://www.prova2.com'; return true" onmouseout="window.status=''; return true">prova</A>. Potete fare copia e incolla di questo codice e poi modificate il link prova.com e prova2.com, con quello a vostro piacimento. 


Eliminare la barra di scorrimento verticale
Dovrei togliere la barra di scorrimento verticale dalla prima pagina del mio sito web ma non so come
Prova a pensarla come un frame:
<frame name="principale" src="index.html" target="_self" scrolling="no">
va inserito tra:
</head>
e
<body>
Questo funziona, forse ci sono anche altre soluzioni.
oppure:
<body scroll=no>
</body>
OPPURE
<style>
body{
margin:0px;
padding:0px;
}
#contenitore{
width:100%;
height:100%;
background:#99cccc;
overflow:hidden;
}
</style>

Bloccare il background
Vorrei riuscire ad "ancorare" in basso il background di una pagina html. 
Il background non deve necessariamente essere il fondo della pagina, ma anche, per esempio, il fondo di una tabella.
Ho provato a cercare tags tutto il giorno, a smanettare con i frame ma niente.
Basta una piccola riga di codice css:
(ancorarlo nell'angolo in basso a destra invece che a sinistra)
body {
background:url(nomeimmagine.gif) no-repeat fixed 100% 100%;
}

Sfondo fisso nelle pagine web
Supponiamo che desiderate che l'immagine di sfondo che avete inserito nelle vostre pagine web rimanga fisso. Bene, per fare questo, bisogna aggiungere l'attributo bgproperties="fixed" al tag <body>. Esempio: <body background="sfondo.jpg" bgproperties="fixed">. C'è da dire che, essendo questo un attributo proprietario di Microsoft e non standard, appunto funzionerà solo con il browser Internet Explorer.

Chiudi e stampa pagina
<td id="tabsup">
<li><A HREF="javascript:;" onclick="self.print()">Stampa questa pagina</A>
<li><A HREF="javascript:;" onclick="javascript:window.close()">Chiudi questa finestra</a></td>
<input type="button" name="Chiudi questa finestra" value="Chiudi questa finestra" onclick="self.close()" />

I frame
I frame allo stesso modo delle tabelle hanno prevalentemente la funzione di rendere più ordinata la pagina.
L'utilizzo dei frame implica una navigazione generalmente più lenta perché il modem dovrà scaricare un pagina per ogni frame che avete inserito.
Per iniziare è possibile dare uno sguardo all'esempio più semplice che può identificare una pagina strutturata con Frame ossia la pagina divisa asimmetricamente in due parti.
La prima parte rimane sulla testa, nella parte alta della pagina e la seconda al centro occupando tutto lo spazio rimanente.
<FRAMESET ROWS="xx,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="topFrame" SCROLLING="NO" NORESIZE SRC="alto.html">
<FRAME NAME="mainFrame" SCROLLING="NO" SRC="centro.html">
</FRAMESET>
Analizzando la sintassi:
<FRAMESET>...</FRAMESET>rispettivamente l'apertura e la chiusura del codice che identificano i frame.
ROWS="xx,*" indica che il primo oggetto da visualizzare è una riga con dimensione pari a xx pixel e la restante porzione di video è dedicata alla pagina centrale ( ..,*")
FRAMEBORDER="NO" specifica che la cornice dei frame non deve essere visualizzata
BORDER="0" specifica lo spessore espresso in pixel che assumeranno i bordi dei frame
FRAMESPACING="0" specifica la spaziatura espressa in pixel tra i frame
FRAME NAME="topFrame" specifica il nome del primo frame che verrà richiamato dal browser
SCROLLING="NO" specifica al browser se visualizzare o meno le barre di scorrimento, le opzioni sono: YES, NO e AUTO
NORESIZE se presente nega al visitatore la possibilità di ridimensionare le finestre del sito.
SRC="alto.html" specifica al browser il nome del file da inserire nel frame in esame
Nel caso in cui si decida di voler suddividere la pagina in due colonne asimmetriche anziché due righe sarà necessario inserire il seguente codice:
<FRAMESET COLS="xx,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="leftFrame" SCROLLING="NO" NORESIZE SRC="sinistra.html">
<FRAME NAME="mainFrame" SRC="centro.html">
</FRAMESET>
Il codice relativo ai frame andrà inserito sotto la testata al posto del tag BODY seguendo la seguente sintassi:
<HTML>
<HEAD>
<TITLE>Titolo pagina</TITLE>
</HEAD>
<FRAMESET ROWS="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="topFrame" SCROLLING="NO" NORESIZE SRC="sinistra.html" >
<FRAME NAME="mainFrame" SRC="centro.html">
</FRAMESET>

<FRAMESET ROWS="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="leftFrame" SCROLLING="NO" NORESIZE SRC="sinistra.html">
<FRAME NAME="mainFrame" SRC="centro.html">
</FRAMESET>

<FRAMESET cols="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="leftFrame" SCROLLING="NO" NORESIZE SRC="sinistra.html">
<FRAME NAME="mainFrame" SRC="centro.html">
</FRAMESET>

<FRAMESET cols="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="leftFrame" SCROLLING="NO" NORESIZE SRC="frame sinistra.html">
<FRAMESET ROWS="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="topFrame" NORESIZE SCROLLING="NO" SRC="framealto.html">
<FRAME NAME="mainFrame" SRC="frame centrale.html">
</FRAMESET>
</FRAMESET>

<FRAMESET ROWS="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="topFrame" SCROLLING="NO" NORESIZE SRC="alto.html" >
<FRAMESET COLS="80,*" FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0">
<FRAME NAME="leftFrame" NORESIZE SCROLLING="NO" SRC="sinistra.html">
<FRAME NAME="mainFrame" SRC="centro.html">
</FRAMESET>
</FRAMESET>
</HTML>

Fogli di stile (CSS)
I CSS ovvero Cascading Style Sheets sono ormai divenuti molto comuni sul web, servono per migliorare l'aspetto estetico e al tempo stesso facilitare la creazione e/o la manutenzione di siti, grandi o piccoli che possano essere; se combinati con un linguaggio di scripting, quale JavaScript, danno vita all'HTML Dinamico conosciuto anche come DHTML, consentendo di superare quelli che erano considerati i limiti di html standard.
Per creare i fogli di stile è possibile utilizzare un editor di CSS specifico oppure adoperare lo stesso editor che viene utilizzato per creare pagine web. Come per l’HTML sarà possibile creare fogli di stile utilizzando il blocco note di Windows.
Essendo i fogli di stile un’estensione dell’HTML stesso è necessario, per poterli comprendere e utilizzare, la conoscenza di base del linguaggio HTML.
Fondamentalmente sono tre i modi di usare i CSS, quale sia il migliore dipende soltanto dal tipo di utilizzo che se ne vuole fare all’interno delle nostre pagine web:
1. Direttamente in linea:
Cioè quando si ha la necessità che lo stile sia relativo al solo blocco che stiamo trattando, senza che questo vada ad influire su altre parti dello stesso documento o pagina web.
2. Ad inizio pagina a stile incorporato:
quando allo stesso stile fanno riferimento diversi elementi (tags) html sarebbe molto dispersivo, definire lo stesso stile più volte all'interno della stessa pagina se questo servisse sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi interessati seguiranno quello stesso stile.
3. Nel collegamento ad un foglio di stile esterno:
se gli stili definiti sono molti, o meglio ancora molte sono le pagine web che ne faranno uso, la cosa migliore, non fosse altro che per praticità d'uso, sarà quella di creare una struttura alla quale tutte le pagine possano fare riferimento, questa struttura altro non sarebbe che il nostro foglio di stile, un documento di testo normalissimo ma con estensione finale .css dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di stile adoperando le stesse regole sintattiche viste per il foglio incorporato a inizio pagina.
SINTASSI
I CSS hanno un loro elemento (tag) che viene specificato in html, si tratta dell'elemento: <style> e relativa chiusura </style>, questo elemento serve ad informare il browser che si tratta di stili e che questi apporteranno le dovute modifiche ai vari elementi (tags) di HTML definiti al suo interno, comprese immagini e link.
Per la creazione dei CSS è necessario seguire una serie di regole comuni: gli attributi devono essere inseriti all'interno di parentesi graffe { } laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso.
Immaginiamo di volere assegnare al nostro testo una leggera indentazione (12 pixel) con allineamento giustificato; che tradotto significa avere un leggero rientro del testo ad inizio paragrafo con allineamento poi su entrambi i lati. Ecco come verrà scritto il tag dello stile:
{text-align : justify; text-indent : 12px}
Abbiamo adoperato l'attributo text-align con il parametro justify per il testo giustificato, mentre l'attributo text-indent con il parametro 12 pixel per l'indentazione ad inizio paragrafo.
Da notare in questa fase di apprendimento soltanto la sintassi: parentesi graffa, attributo, due punti, parametro, punto e virgola, attributo, due punti, parametro, parentesi graffa.
Le parentesi graffe non sono presenti nelle tastiere italiane, si possono ottenere con i codici ascii Alt 123 e Alt 125.
Gli attributi modificabili attraverso i CSS sono veramente molti è in questa semplice trattazione non è possibile descriverli tutti. Vediamo pertanto i più semplici ma anche i più utilizzati.
Attributi del testo
text-align:center | left | right | justify ;
Allineamento del testo, valori possibili : centrato , sinistra, destra , giustificato.
text-decoration: overline | underline | line-through | none ;
Decorazione del testo, valori possibili : overline = sopralineato, underline = sottolineato, line-through = sbarrato, none = nessuno.
E' anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. Il parametro none lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default.
text-indent: lunghezza | percentuale ;
Rientro della prima riga di un blocco. E' possibile fare uso anche di numeri negativi per un rientro esterno.
text-transform: capitalize | uppercase | lowercase | none ;
Trasformazione in maiuscolo o minuscolo dell'interno blocco di testo (uppercase lowercase). Capitalize trasforma in maiuscola la prima lettera di ogni parola.
letter-spacing: numero ;
Spazio fra le lettere che compongono il testo. il numero può essere espresso in tutti i modi possibili come riportato alla tabella parametri.
Attributi per il carattere
font-family : famiglia1, famiglia2, famiglia3 ;
Si possono elencare più famiglie di caratteri per dare la possibilità al browser di selezionare quella presente sulla macchina del visitatore. Si tenterà di visualizzare la prima specificata per poi passare a quelle successive nel caso in cui non fossero presenti quelle precedenti. A questo proposito è opportuno descrivere le possibili alternative partendo proprio da quelle più rare.
font-size: lunghezza | dim. assoluta | dim. relativa | percentuale ;
Si possono esprimere le dimensioni del font facendo riferimento a uno dei quattro possibili attributi.
font-style : normal | italic | oblique;
Permette la visualizzazione dei caratteri in corsivo.
font-variant : normal | small-caps ;
Simile a font-style assegna tutte maiuscole grandi per le lettere maiuscole e maiuscole piccole per le lettere minuscole. normal per rimuovere il tutto.
Attributi per il colore e lo sfondo
color : valore;
Questo attributo serve per impostare il colore del testo.
background-color : valore;
Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore di sfondo del testo.
background-image : url (immagine.gif);
Questo attributo definisce l'immagine di sfondo per un elemento e può essere adoperato indipendentemente dall'immagine e dal colore dello sfondo assegnato alla pagina.
Le Classi
Se si opta per un foglio di stile, esterno o interno che sia, non è necessario ridefinire tutti o alcuni elementi (tags) dell’Html. E’ però possibile crearne di nuovi facendo uso delle classi, un sistema molto comodo e pratico. E’ possibile creare tutte le classi che si vogliono, così facendo si sfrutteranno al meglio le potenzialità dei CSS (fogli di style).
E' possibile definire con estrema semplicità le proprie classi di stile, queste saranno poi richiamate dall'interno dei vari elementi html.
Esempio
Definiamo una classe, per farlo è sufficiente editare un nome preceduto da un punto. Il nome non ha importanza, sicuramente meglio se attinente con l'effetto che dovrà produrre in modo tale da essere ricordato con maggiore facilità quando avremo bisogno di adoperarlo.
Vediamo praticamente come fare, immaginiamo di volere un effetto particolare che serva per identificare tutti i titoli degli articoli presenti nel nostro sito. Creeremo una classe col nome testo che faccia uso di un font medio e di colore rosso in stile italico.
Richiamiamo dal nostro editor il file .css (se si trattava di un foglio esterno), altrimenti portatevi all'interno della zona stile, posizionandoci fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe firma, assegnandole i vari attributi:
.titolo {
font-family : Verdana,Arial,Helvetica;
color : #ff0000;
font-size : 12pt;
text-align : right;
font-style : italic;
}
Ogni elemento (tag) di HTML supporta l'attributo class, quindi dovendo scrivere una parte di titolo e volendo che questa parte faccia uso degli attributi appena inseriti nella classe firma, basterà assegnare "titolo" all'elemento (tag) prescelto, nel nostro caso <p>. Tutto ciò che verrà scritto all'interno di questo paragrafo, rispetterà i parametri della classe, mi raccomando la relativa chiusura dell'elemento (tag) </p>
<p class="titolo">questo testo rispetta gli attributi della classe titolo </p>

I link
Abbiamo visto come i CSS siano in grado di cambiare attributi al testo. Esiste però anche un'altra novità introdotta dai CSS,
riguarda la gestione dei link.
La tanto odiata sottolineatura, la possibilità di cambiare colore o il tipo di font sono solo alcune cose che possono essere
gestite dai CSS e magari proprio nel momento esatto in cui il cursore del mouse passa sopra al link stesso.
Prima di tutto vediamo come si adoperano: possono essere dichiarati in una pagina o in un foglio di stile esterno, questa la
relativa sintassi:
<style type="text/css">
<!--
A:LINK {text-decoration : none}
A:VISITED {text-decoration : none; Color : green}
A:HOVER {Color : red}
-->
</style>
Dove A:LINK sono i link ancora da visitare o cliccare,
A:VISITED sono invece i links visitati e
A:HOVER si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link stesso.
La trattazione dei CSS è sicuramente molto più ampia, maggiori specifiche sui cosiddetti fogli di stile possono essere
trovate sul sito del World Wide Web Consortium, organizzazione che si occupa di determinare le modifiche allo standard alla
base delle pagine web.

I Box Model
Il box model consente di definire dei blocchi rettangolari con specifici valori di largezza e altezza dei contenuti, il
padding, dimensioni e stile del bordo e il margine:
* l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le
dimensioni orizzontali dell'area possono essere modificate con la proprietà width mentre quelle verticali con height.
* il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento.
* il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
* il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.
Per esempio, il codice relativo ad un box può essere il seguente:
.classe { width:200px;
border:5px solid #ff9900;
padding:7px;
margin:10px }

I bordi
Utilizzando i CSS è possibile definire le caratteristiche dei bordi. Ciò consente di giustificare il testo senza l'uso di
tabelle. I CSS creano degli elementi visualizzati all'interno di box con delle proprietà particolari:
* le proprietà dei margini che assegnano un bordo esterno al box;
* le proprietà di riempimento che assegnano uno spazio interno al box che separa il contenuto dai margini;
* le proprietà dei bordi che definiscono le linee grafiche intorno al box.
Queste proprietà possono essere suddivise in due categorie: singole e a sintassi abbreviata. Le prime definiscono singoli
aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni.
Si può definire lo stile di un singolo bordo utilizzando al seguente sintassi per le proprietà singole:
classe {
border-<lato>-color: <valore>;
border-<lato>-style: <valore>;
border-<lato>-width: <valore>;
}

mentre la sistassi abbreviata è la seguente:
classe { border-<lato>: <valore width> <valore style> <valore color>; }
In cui a <lato> occorre sostituire uno degli indicatori dei quattro lati: top, right, bottom o left.
Come abbiamo specificato all'inizio, per un bordo si possono definire il colore (color), lo stile (style), lo spessore
(width).
Lo stile di un bordo può essere espresso con una delle seguenti parole chiave:
none. L'elemento non presenta alcun bordo e lo spessore equivale a 0.
hidden. Equivalente a none
dotted
dashed
solid
double.
groove
ridge
inset
outset

Per quanto riguarda lo spessore, questo può essere definito tramite i seguenti parametri:
* un valore numerico con unità di misura
* thin - Bordo sottile
* medium - Bordo di medio spessore
* thick - Bordo di largo spessore
Tramite la proprietà a sintassi abbreviata "border",è possibile definire con una sola regola le impostazioni per i quattro
bordi. Il suo uso è limitato al caso in cui i quattro bordi abbiano tutti lo stesso colore, lo stesso stile e lo stesso
spessore:
classe {border: <valore spessore> <valore stile> <valore colore>;}

Effetti di dissolvenza sul testo
Questo javascript, semplicissimo da utilizzare, vi permetterà di aggiungere un effetto di dissolvenza sul testo.
Copiate il seguente codice tra i tag <head></head>
<script type="text/javascript">
function change()
{
re="rgb("+Math.round(Math.random()*256)+","+Math.round(Math.random()*256)+", "+Math.round(Math.random()*256)+")"
text.style.color=re;
}
setInterval(change,1000);
< /script>
Quindi inserite il seguente codice nel corpo della pagina in c ui volete che compaia l'effetto:
<p id="text"> Inserite qui il testo </p>

Effetti grafici con i Meta Tags
Oltre ad essere utilizzati per indicizzare il proprio sito web sui motori di ricerca, i Meta Tags consentono di ottenere degli effetti particolari all'apertura delle pagine web. Questi tag vanno inseriti all'interno dei tag <head> </head>.
<META http-equiv="REFRESH" content="3; url=http://www.vostrosito.it">
Si adopera per cambiare pagina trascorso il numero di secondi specificato nel campo content.
Questo tag è molto utile quando il sito è stato trasferito o una particolare pagina ha cambiato indirizzo. In questo modo anche chi non ha il nuovo URL può raggiungervi ugualmente.
Eliminando la parte ; url=http://www.vostrosito.it", viene effettuato il refresh della pagina in cui è inserito il tag.
<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=X,Transition=Y)">
<META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=X,Transition=Y)">
Questi tag possono essere utilizzati solo con Internet Explorer e servono per creare un effetto grafico all'apertura e alla chiusura di una pagina. Ci sono moltissimi effetti ottenibili sostituendo la Y con un numero (compreso lo zero). La X invece esprime il tempo di durata in secondi.

Realizzare una sequenza di immagini con effetto fade
Tramite il seguente Javascript è possibile visualizzare una sequenza di immagini con un effetto di dissolvenza tra una e l'altra.
All'interno del tag <head> inserite il seguente codice:
<script language="javascript">
var slideShowSpeed = 5000
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = '/img/img_random/header0.jpg'
Pic[1] = '/img/img_random/header1.jpg'
Pic[2] = '/img/img_random/header2.jpg'
Pic[3] = '/img/img_random/header3.jpg'
Pic[4] = '/img/img_random/header4.jpg'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
< /script>
Modificate la parte di codice in rosso inserendo il percorso relativo alle immagini che intendete utilizzare.
Aggiungete al tag <body>, il codice:
onload="runSlideShow()"
Per esempio: <body onload="runSlideShow()">
Nel corpo della pagina inserite, nel punto in cui volete compaiano le immagini, il seguente codice:
<img src="/img/img_random/header0.jpg" id="SlideShow" name="SlideShow" width="200" height="200" border="0">

Visualizzare delle immagini random
Tramite il seguente Javascript è possibile visualizzare in una qualsiasi parte del vostro sito, delle immagini in modo random. Può essere molto utile nel caso in cui vogliate avere per esempio una testata del vostro portale diversa ad ogni caricamento della pagina.
Tra i campi <head> e </head> inserite il seguente script:
<SCRIPT Language="JavaScript">
var NrRnd=Math.random();
var Nrheader=Math.round(NrRnd*10);
headerImg=new Image;
headerImg="header" + Nrheader + ".jpg";
</SCRIPT>
NrRnd*10 indica il numero delle immagini da far ruotare, mentre nell'ultima riga, "header" indica il nome che devono avere i file delle immagini. Il nome può essere modificato a piacere, ma le immagini devono esere nominate in sequenza come per esempio, header0.jpg, header1.jpg, etc. Il conteggio delle immagini parte da zero.
Anche l'estensione ".jpg" può cambiare in un qualsiasi formato grafico.
Nel punto della pagina in cui volete visualizzare le immagini, inserite il seguente codice:
<script>
document.write("<img src='/img/img_random/" + headerImg + "' width='150' height='150' border='0' usemap='#Map'>")
</script>
"<img src='/img/img_random/" deve contenere il percorso in cui trovare i file immagine. width e height possono essere modificati secondo le vostre necessità. Ad ogni reload della pagina verrà mostrata una immagine differente.

Testo scorrevole verticalmente stile Flash
Per far sì che il testo scorra lateralmente, basta usare un comunissimo <marquee> e </marquee>.
Ci occuperemo invece nel dettaglio di un testo scorrevole verticalmente, che, al passaggio del mouse, si arresta, e riprende il suo scorrimento quando il puntatore si sposta da esso. Se poi lo mettete in una tabella con una cornice grafica carina, sembrerà che si tratti di una mininewsboard in flash, e dar? al vostro sito un tocco di classe.
Ecco il codice da inserire nel punto del <body> in cui volete che compaia il testo:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollAmount="1" scrollDelay="20" direction="up" height="252" align="center" width="122">
Qui il testo scorrevole... prova... bla... bla...
</marquee>
Salviamo la pagina e vediamo il risultato.
Il nostro testo scorrerà verticalmente verso l'alto, avrà un allineamento centrato, e si fermerà al passaggio del mouse.
Ora vediamo in dettaglio il codice, spiegando i singoli attributi.
- Onmouseover=this.stop() fa in modo che al passaggio del mouse lo scorrimento si blocchi;
- Onmouseout=this.start() fa in modo che lo scorrimento riprenda quando il cursore del mouse si allontana;
- ScrollDelay indica la velocità di scorrimento del testo; per una buona visualizzazione ed una facile lettura, consigliamo di mantenerlo attorno a 20-25;
- Direction indica la direzione in cui scorre il testo; nel nostro esempio è UP, ma possiamo anche settare DOWN, LEFT, RIGHT, a seconda delle nostre esigenze e preferenze.
- Height setta l'altezza che occuperà lo scroller nella pagina;
- Width è il parametro che imposta la larghezza che occuperà lo scroller nella pagina.
- Align indica l'allineamento del testo scorrevole; nel nostro esempio è CENTER, ma possiamo settare LEFT, RIGHT, JUSTIFY.
- 'Qui il testo scorrevole' è il testo di esempio; potete inserire anche TAGs HTML; per andare a capo è consigliato il TAG <br> (o <br /> a seconda che lavoriate con HTML o XHTML).
Quindi i parametri dell'esempio vengono a creare un rettangolo di altezza 252 e larghezza 122, con il testo all'interno centrato, una velocità di scorrimento pari a 20 e uno scorrimento verso l'alto.
Questo codice può essere impiegato nel caso in cui si possieda una newboard e si voglia far scorrere le news recenti. Molti siti adottano questo sistema, magari con un codice Flash, che noi abbiamo semplificato, non perdendo però la qualità del risultato.

Inserire una scritta scorrevole sul browser
Tramite questo script è possibile inserire un testo scorrevole nella parte superiore del browser.
Lo script è da inserire all'interno del tag <head>.
<script language="JavaScript" type="text/javascript">
< !-- http://web-link.it
< !-- Begin
var message = new Array();
// Set your messages you want typed into the title bar below.
// To add more messages, just add more elements to the array.
message[0] = "testo scorrevole";
message[1] = "da inserire";
message[2] = "nella parte";
message[3] = "alta de"l;
message[4] = "vostro";
message[5] = "browser";
// Set the number of repetitions (how many times a given message is typed out
// before moving onto the next message).
var reps = 1;
var speed = 200;// Set the overall typing speed (larger number = slower action).
var hold = 8 // set the length of time to display the whole phrase before retyping (larger number = longer)
// DO NOT EDIT BELOW THIS LINE.
var p = message.length;
var q = 0;
var r = 0;
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) {
reps = 1;
}
function setMessage() {
typing = message[mC];
q = typing.length;
r = q + hold;
typeMessage();
}
function typeMessage() {
if (s > r) {
s = 0;
}
if (s > q) {
document.title = '|- '+ typing +' - - -';
}
else {
document.title = '|- '+ typing.substr(0,s)+' - - -';
}
if (C < (r * reps)) {
sT = setTimeout("typeMessage()", speed);
C++;
s++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) {mC = 0;}
sT = null;
setMessage();
}
}
setMessage();
// End -->
< /script>

Impostate il vostro sito come Home Page predefinita
Tramite questo script potete consentire ai visitatori del vostro sito di impostarlo come Home Page del loro browser. Copiate il seguente codice tra i tag <head> e </head>:
<script language="JavaScript" type="text/javascript">
function homepage() {
if(document.all)
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://www.miosito.it');
}
// End -->
< /script>
inserite al posto di http://www.miosito.it, l'indirizzo del vostro sito web.
La seconda parte di codice va inserita in un punto qualsiasi all'interno del body:
<a href="javascript:homepage()">Clicca qui per impostare questo sito come pagina iniziale</a>

Disabilitate il tasto destro del mouse
Potete disabilitare le funzioni del tasto destro del mouse, per bloccare, per esempio, il salvataggio sul disco dell'utente di immagini presenti sul vostro sito.
All'interno dei tag <head></head>, inserite il seguente codice:
<script language="JavaScript1.2">
< !-- Start
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Il tasto destro del tuo Mouse è disabilitato");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// end -->
< /script>

Falsi Iframe con i CSS
L'uso degli IFRAME risulta particolarmente utile nel caso in cui si debba mostrare del testo piuttosto lungo in uno spazio limitato. Utilizzando gli IFRAME però si ha il limite riguardante l'accessibilità e l'indicizzazione nei motori di ricerca. tramite i CSS è possibile ovviare a questo inconveniente emulando un Iframe. Per creare l'esempio qui sotto si è usato il seguente codice:
<div style="overflow: auto; width: 200px; height: 200px; border: 1px solid #ff0000; padding: 5px;">Testo da inserire all'interno della finestra</div>
Le dimensioni del falso Iframe sono definite da width e height ma la proprietà fondamentale è overflow: che può assumere i valori auto, hidden, visible e scroll.

Colorare le scroll-bar
La scroll-bar è in realtà composta da tanti elementi, quali la barra vera e propria, le freccette, il bordo, il rialzo 3-d, etc. Con l'uso dei CSS è possibile intervenire su ciascuno di essi utilizzando il codice seguente, nel quale vanno inseriti i colori da voi scelti:
<STYLE>
BODY {
SCROLLBAR-FACE-COLOR:#31b5d6;
SCROLLBAR-HIGHLIGHT-COLOR:#31b5d6;
SCROLLBAR-SHADOW-COLOR:#ffff42;
SCROLLBAR-3DLIGHT-COLOR:#ffff42;
SCROLLBAR-ARROW-COLOR:#ffff42;
SCROLLBAR-TRACK-COLOR:#31b5d6;
SCROLLBAR-DARKSHADOW-COLOR:#31b5d6; }
< /STYLE>
Il codice va inserito tra i tag <head></head> e funziona solamente con Internet Explorer versione 5.0 o superiore.

Inserire una musica random nel vostro sito
Tramite questo script potete fare in modo che chi visita il vostro sito senta ogni volta una musica diversa, caricata random. Scegliete una serie di file musicali e le uniche aree che dovete modificare nello script sono il numero di canzoni nella lista e l'URL di ogni canzone.
<script type="text/javascript">
var numberOfSongs = 3
var sound = new Array(numberOfSongs+1)
sound[0]= "http://www.tuosito.com/audio/song1.mid"
sound[1]= "http://www.tuosito.com/audiofolder/song2.mid"
sound[2]= "http://www.tuosito.com/audiofolder/song3.mid"
function randomNumber(){
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
return randomLooper
}
var randomsub = randomNumber()
var soundFile = sound[randomsub]
document.write ('<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=true>')
< /script>

Aprire un link in una nuova finestra
Un semplice modo per aprire una pagina web in una nuova finestra è usando JavaScript. E' possibile usare l'attributo "target", ma utilizzare javascript consente di specificare l'altezza e la larghezza della finestra tramite il seguente metodo:
<a href="javascript:void(0)" onclick="window.open('http://www.sito.com','Nome del sito','width=200,height=200')">
Apri in una nuova finestra
< /a>
Personalizzate il codice secondo le vostre esigenze, inserendo al posto di http://www.sito.com, l'indirizzo della pagina web che intendete aprire e al posto di Nome del sito, il titolo da dare alla pagina.
Modificate i valori di width e height, inserendo le dimensioni che volete abbia la nuova finestra.
Una volta modificato il codice, potete inserirlo in qualsiasi punto della pagina in cui volete che venga visualizzato il link. Questo codice può essere di grande aiuto se volete aprire delle piccole finestre per visualizzare delle immagini per esempio.

Modificare il tag <HR> con i CSS
E' possibile modificare la semplice barra orizzontale creata con il tag <HR>, tramite l'utilizzo dei CSS.
La barra semplice è la seguente:
Tramite i CSS questa può venire modificata come nell'esempio in basso.
Occorre modidicare il tag <HR> come nel seguente codice:
<hr style="border: 1px solid #f00;">
Inserendo invece il seguente codice, modifichiamo il colore di background della riga
<hr style="background-color:#f00;height:3px;">
Volendo si può rimuovere il bordo della riga, usando "border: 0px;" nel CSS, ma molti browser non riescono ad interpretarlo. Si può ovviare a questo inconveniente dando un colore differente al bordo stesso, usando per esempio il seguente codice:
<hr style="background-color:#f00;height:10px;border-color:#000000">
E' anche possibile inserire come sfondo della barra, una immagine, utilizzando il seguente codice:
<hr style="background-image: url(/hr.gif); height:6px;">

Fate inserire il vostro sito tra i preferiti
Questo semplice JavaScript consente ai visitatori del tuo sito di aggiungerlo alla lista dei preferiti. Questo script è compatibile con i browser Internet Explorer e Mozilla/Firefox.
<span style="border: 1px dashed rgb(51, 51, 51); padding: 3px;">
< script type="text/javascript">
var text = "Aggiungi ai Bookmark!"
// Inserisci l'URL del tuo sito all'interno delle virgolette in basso
var site = "http://www.miosito.com";
// Inserisci la descrizione del tuo sito tra le vigolette in basso
var desc = "Descrizione sito"
var ver = navigator.appName
var num = parseInt(navigator.appVersion)
if ((ver == "Microsoft Internet Explorer")&&(num >= 4))
{
document.write('<a title="Bookmark this page" href="javascript:window.external.AddFavorite(site,desc);" ');
document.write('onMouseOver=" window.status=')
document.write("text; return true ")
document.write('"onMouseOut=" window.status=')
document.write("' '; return true ")
document.write('">'+ text + '</a>')
}
else
{
text += " (Ctrl+D)"
document.write(text)
}
< /script>
</span>

Copia il codice e incollalo nella pagina web in cui vuoi che compaia il link.
in alcuni browser il codice verrà visualizzato come un testo linkato "Aggiungi ai Bookmark!". In altri browser verrà visualizzato un testo senza link con la dicitura "Aggiungi ai Bookmark! (Ctrl+D)."

Inserimento di un campo di ricerca Google su un sito
(http://www.google.it/intl/it/searchcode.html)
Per rendere disponibili le funzionalità di ricerca Google sulla propria pagina Web, è sufficiente copiare ed incollare il codice indicato di seguito nel codice HTML della pagina. È possibile effettuare alcune modifiche, come eliminare il codice di centratura, allargare o restringere il campo di ricerca oppure modificare il colore dello sfondo (è importante ricordare, tuttavia, che lo sfondo del logo di Google è bianco e non trasparente). Per impostare un logo con un colore di sfondo o dimensioni diverse, scegliere uno dei logotipi disponibili. In questo caso, è necessario inserire il logo selezionato nei codici di ricerca riportati di seguito.
Il codice da utilizzare è il seguente: 
<!-- Search Google -->
<center>
<FORM method=GET action="http://www.google.com/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" 
ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=it>
<INPUT type=submit name=btnG VALUE="Cerca con Google">
</td></tr></TABLE>
</FORM>
</center>
<!-- Search Google -->

OPPURE
<form id="googleSearch" action="javascript:gSearch();">
<p id="searchTitle">Cerca nel sito</p>
<p id="googleLogo"><img src="http://www.google.com/logos/Logo_40wht.gif" alt="Google - logo" /></p>
<p><label for="campoRicerca">Trova: </label><input name="campoRicerca" id="campoRicerca" type="text" accesskey="r" title="[accesskey: r]" />
<input type="submit" value="vai" /></p>
<p id="poweredby">Servizio offerto da <a href="http://www.google.it" title="Google.it">Google</a></p>
</form>

Altavista
(http://it.altavista.com/help/free/free_searchbox_web)
<script type="text/javascript" language="JavaScript1.2" src="http://it.altavista.com/help/free/websearch2"></script>
<script type="text/javascript" language="JavaScript1.2" src="http://it.altavista.com/help/free/websearch"></script>

Come inserire immagini prese da internet: 
<img src="http://indirizzo_immagine"> 
Per prendere l'indirizzo clicca con il tasto destro sull'immagine, seleziona "proprietà", copia e incolla l'indirizzo. 
Nota: per prendere immagini dall'harddisk bisogna prima metterle su un vostro spazio web oppure bisogna usare gli allegati
Come centrare scritte ed immagini nella pagina o nella firma:
<center>immagine o scritta</center> 
Come fare le scritte scorrevoli:
<marquee>scritta</marquee> 
<marquee direction="up" scrollAmount=1 height="40" width="80%"> 
Direction indica la direzione dello scorrimento. 
scrollAmount la velocità 
height l'altezza del campo dove scorre il testo 
e width è la larghezza in percentuale rispetto alla larghezza totale della pagina 
Come allineare il testo a destra|sinistra|centro|giustificato(allargato su tutta la riga) 
<p align="left">il testo formattato</p> 
Cambiare center, left, right e justify a seconda dei casi.
Come creare un link:
<A HREF="http://www.tuosito.it">visita il mio sito!</A> 
Puoi sostituire la scritta con un'immagine, il risultato è sempre quello, tutto ciò che si trova fra i due tags darà un link al sito.
TARGET: serve per fare aprire il link in un'altra finestra:
<A HREF="http:/www.tuosito.it" target="_blank">Visita il mio sito!</A> 
Alone intorno al testo
<DIV style="position:relative; width=80%; filter:glow(color=000000)">testo con l'alone</DIV> 
Dovete sostituire ai numeri presenti in filter:glow(color=000000) il colore di cui volete che sia l'alone. Ecco qui una tabella da dove potete ricavare i codici dei colori.
Testo al contrario (orizzontale)
<DIV style="position:relative; width=80%; filter:fliph">testo al contrario</DIV> 
Attenzione all'allineamento testo!
Testo al contrario (verticale)
<DIV style="position:relative; width=80%; filter:flipv">testo al contrario</DIV> 
Anche qui occhio all'allineamento!
Testo con ombra
<DIV style="position:relative; width=80%; filter:blur">testo con ombra</DIV> 
Ricordate che un testo con ombra occupa più spazio!
Testo con ombra proiettata
<DIV style="position:relative; width=80%; filter:shadow(color=000000)">testo con ombra</DIV> 
Modificate sempre il codice del colore, qui la tabella. State attenti, l'ombra va un po' sotto il testo scritto.
Testo con ombra singola per lettera
<DIV style="position:relative; width=80%; filter:dropshadow(color=000000)">testo con ombra</DIV> 
Modificate sempre il codice del colore, qui la tabella. State attenti, l'ombra delle lettere va sotto il testo che avete scritto.
testo con ombra singola
Testo barrato
<STRIKE>testo da barrare</STRIKE> 
Ecco qui il tag per fare il testo barrato.
Gradazioni colori
<div style="width: 100%; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#C3CDDA,EndColorStr=#FFFFFF)">Prova gradazioni colore...
Ciao!</div> 
Non funziona con browser NetScape.
Vari tipi di lista
<UL TYPE=disc>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL> 
Per una lista puntinata. Se volete, sostituite a "disc" : "circle"(per un cerchio), oppure "square" (per un quadratino).
Inserire filmati e giochi Flash
[FLASH=600,400]indirizzo del file flash[/FLASH] 
Inserire una musica
<embed src=indirizzo del file midi autostart=True controls=True loop=1 type=audio/midi> 
Oppure:
<BGSOUND SRC=indirizzo del file midi LOOP=INFINITE> 
Inserire un filmato Flash in cima ad una sezione, o nella home del forum:
<embed src="indirizzo file flash" quality=high width=600 height=100 type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed> 

Impedire la selezione del testo e il salvataggio delle immagini
Molte volte ci troviamo nella condizione di dover proteggere il contenuto delle nostre pagine web, in questo caso il testo e le immagini. Per farlo possiamo utilizzare due piccoli trucchi, che è comunque possibile aggirare, ma che sono efficaci per quanto riguarda l'utenza media.
Con questa "pillola" vediamo come è possibile NON far selezionare il testo in una pagina; basta aggiungere pochissimo codice nel tag <body>:
<body onselectstart="return(false);"> 
Provate a scrivere del testo nella pagina html e poi selezionatelo con il mouse; non appare nè lo sfondo scuro, nè è possibile selezionarlo dal menù contestuale alla voce: Seleziona tutto.
Testato su Internet Explorer 6.

Impedire di salvare le immagini
Una piccola tip ci permette di impedire che quando si passa con il mouse su una immagine, appaia il tool per salvarle.
Tra i tag <HEAD> e </HEAD>, scrivere il seguente codice:
<META HTTP-EQUIV="Imagetoolbar" Content="no">
Provare adesso se, passando con il mouse, appare ancora la barra di salvataggio per le immagini.

Tag di un sito
<title>NOME DEL SITO</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta NAME="Description" CONTENT="Descrizione del sito a piacere">
<meta NAME="Keywords" CONTENT="parole chiavi per farsi trovare da un motore di ricerca">
<meta NAME="robots" CONTENT="all">
<meta NAME="copyright" CONTENT="CopyRight">
<meta NAME="Classification" CONTENT="Tipo di classificazione">
<meta NAME="rating" CONTENT="General">
<style TYPE="text/css">
<!-- FOGLIO DI STILE
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active {text-decoration: none; }
A:hover {text-decoration: underline; }
A:hover {color: red } 
--> 
</style>

Ultima modifica della pagina web
Con Netscape 4.X/6.x è possibile conoscere la data di ultima modifica di una pagina web semplicemente scegliendo, dal menu 'View', il comando 'Page Info'.
In Explorer non è presente questa possibilità. E' comunque possibile vedere a quando risale l'ultima modifica posizionandosi sulla pagina interessata e inserendo nel campo dell'indirizzo la stringa
javascript:alert (document.lastModified)
e premere Invio.
A questo punto viene visualizzata una finestra di alert che contiene la data e l'ora di modifica della pagina stessa (la data è nel formato MM/GG/AAAA)

Invio di email con precompilato il soggetto (mailto con subject)
Chi mastica un po' di html sa che per creare un link ad un indirizzo di posta elettronica è sufficiente scrivere:
&lt;a href:&quot;mailto: nome@mail.com ">Scrivimi&lt;/a>
In questo modo cliccando sulla parola 'Scrivimi' si apre il programma di posta elettronica predefinito con il destinatario già inserito (in questo caso ' nome@mail.com ').
Se però si desidera compilare automaticamente anche il campo 'Oggetto' di tale email, è sufficiente modificare il codice come segue:
&lt;a href=&quot;mailto: nome@mail.com ?subject=Prova%20di%20invio%20email%20con%subject&quot;&gt;Scrivimi&lt;/a&gt;
In questo modo l'email avrà come destinatario ' nome@mail.com ' e come subject 'Prova di invio email con subject'.
P.s.: gli spazi vuoti devono essere sostituiti da %20

Inserire un'immagine nella barra degli indirizzi
<LINK REL="SHORTCUT ICON" HREF="http://www.marcoregna.supereva.it/favicon.ico">

Rollover di immagini 
Il rollover delle immagini consiste sostanzialmente nel cambiare l’attributo SRC ad un tag IMG. Da questo principio si possono estrapolare tantissimi utilizzi dei quali i più frequenti sono, un’anteprima per una galleria di immagini oppure un bottone che si illumina. 
Dato un tag che definisce un’immagine in un documento HTML 
code:
<IMG SRC=”immagine1.gif” NAME=”image”>
Vediamo le funzioni javascript che permettono di farne il rollover 
/* 
Scatta al passaggio del mouse sull’immagine (evento onMouseOver) 
Riceve in ingresso il parametro nome che coincide col valore dell’attributo 
NAME dell’immagine e assegna il nuovo path all’attributo SRC dell’immagine 
*/ 
code:
function rollOver(nome){
document.images[nome].src = “immagine2.gif”
}
/* 
Scatta al passaggio del mouse al di fuori dell’area dell’immagine (evento onMouseOut) 
Riceve in ingresso il parametro nome che coincide col valore dell’attributo NAME dell’immagine 
E assegna il path precedente all’attributo SRC dell’immagine 
*/ 
code:
function rollOut(nome){
document.images[nome].src = “immagine1.gif”
}

a questo punto inseriamo le chiamate alle funzioni nel tag IMG 
<IMG SRC=”immagine1.gif” NAME=”image” onMouseOver=”rollOver(‘image’)” onMouseOut=”rollOut(‘image’)”> 
Se l’immagine è anche definita sottoforma di link, la sintassi è questa 
<A HREF=”quelchevuoi.html” onMouseOver=”rollOver(‘image’)” onMouseOut=”rollOut(‘image’)”> 
<IMG SRC=”immagine1.gif” NAME=”image”></A> 

Chiusura Finestre 
Capita spesso che qualcuno chieda "lumi" su come si possano chiudere le finestre del browser e le popup. 
Gli esempi riportati sono stati presi dal forum, usando la RICERCA (lente in alto destra!) 
Premetto che per tutti gli esempi, usati nella finestra "madre" del browser, prima dell'uscita comparirà una finestra con la richiesta di uscita... questa finestra NON è eliminabile! 

CHIUDERE LA FINESTRA DEL TUO BROWSER TRAMITE UN LINK 

da inserire nel BODY: 
code:
<a href="java script:self.close();">Chiudi finestra</a> 
ovviamente CHIUDI FINESTRA è personalizzabile 

CHIUDERE LA FINESTRE DEL BOWSER TRAMITE BOTTONE 
da inserire tre i tag <BODY> </BODY> 
code:
<INPUT TYPE="button" VALUE="Chiudi nuova" NAME="B4"
onClick="window.close()">

CHIUSURA DI UNA POPUP A TEMPO 
basta inserire tra <HEAD></HEAD> questo: 
code:
<meta http-equiv="refresh" content="25;
URL=java script:self.close();">
dove 25 sono i secondi che passeranno prima della chiusura della popup 
per ottenere lo stesso risultato si può usare anche questo piccolo script inseribile nel BODY 
code:
<script language="JavaScript">
setTimeout('window.close()',3000); 
</script>

CHIUDERE POPUP TRAMITE UN'IMMAGINE 
inserire tra <BODY></BODY> 
code:
<a href="java script:window.close();">
<img src="tua_immagine.gif">
</a>

CHIUDERE UNA POPUP TRAMITE BOTTONE 
code:
<INPUT TYPE="button" VALUE="Chiudi nuova" NAME="B4" 
onClick="window.close()">
è lo stesso utilizzato per chiudere la finestra "madre". Qui però non ci sarà nessuna richiesta di uscita 

CHIUDERE LA FINESTRA MADRE DALLA POPUP 
code:
<INPUT TYPE="button" VALUE="Chiudi nuova" NAME="B4" 
onClick="window.opener.close()">

CHIUDERE CON UN PULSANTE
code:
<input type="button" name="Chiudi questa finestra" value="Chiudi questa finestra" onclick="self.close()" />

Motori di ricerca e redirect 
Spesso mi chiedono come faccio a sapere tante cose, be’ io ho un trucco che in questa mini pillola voglio condividere con voi: io so solo che una cosa si può fare, ma quando la devo fare uso un motore di ricerca! 
In questa mini pillola parlerò dei redirect, tutto il materiale è stato reperito tramite il motore di ricerca del forum di html. L’indirizzo è il seguente: <http://forum.html.it/forum/search.php> ; è incredibile la quantità di informazione che ne potrete ricavare dopo aver preso confidenza con la sua interfaccia semplice ed intuitiva. 

Redirect in html: 
Copia e incolla il seguente codice tra gli <head> </head> della pagina: 
code:
<META HTTP-EQUIV="Refresh" CONTENT="0; url=http://www.tuodominio.it/tuapagina.htm">
Dove 0 (zero) rappresenta i secondi dopo di cui, a caricamento avvenuto, si viene reindirizzati nella pagina www.tuodominio.it/tuapagina.htm <http://www.tuodominio.it/tuapagina.htm> 
Ora vediamo come ottenere lo stesso risultato con javascript. Questa volta sono andato su www.google.it <http://www.google.it> e ho scritto: redirect con javascript; lui, giustamente, mi ha risposto: forse cercavi “redirect con javascript”; doto che è quello che stavo cercando ho ciccato sul link che mi ha proposto e spulciando tra i primi risultati forniti dal motore guardate cosa ho trovato: 
Inserire all'interno dei tag <head> e </head> della propria pagina il codice riportato sotto: 
code:
<SCRIPT LANGUAGE="Javascript">
<!--
window.location="http://www.tuodominio.it/tuapagina.htm"
//-->
</SCRIPT>

Submit di un form 
Il submit di un form consiste nello “spedire” al server le informazioni contenute all’interno dei campi (INPUT, SELECT, TEXTAREA ecc) che lo costituiscono. 
Si può effettuare in vari modi: 
Bottone Submit 
code:
<INPUT TYPE=”submit” VALUE=”Invia dati”>
Questo elemento effettua il submit del form all’interno del quale si trova, tuttavia risulta scomodo se si vogliono fare controlli di validità sui dati ed impedirne l’invio poiché si può intercettare solo l’evento del tag FORM, onSubmit(). 
Bottone o Immagine 
code:
<INPUT TYPE=”button” VALUE=”invia i dati” 
onClick=”document.forms[nomeform].submit()”>
oppure
<IMG SRC=”nomeimg.gif” 
onClick=”document.forms[nomeform].submit()”>
A questo punto siamo in grado di intercettare comodamente (in Javascript) il comando submit. 

Inserire musica di sottofondo 
Una domanda che di solito postano coloro che sono interessati a “Tamarrizzare” il loro sito è “come si mette lo sfondo musicale”. 
Allora, è una cosa semplicissima, in fondo “tamarrizzarsi” è sempre molto semplice. 
Il tag da utilizzare è <BGSOUND> 
Esempio: 
code:
<BGSOUND SRC ="sounds/song.mid" LOOP ="infinite">
Gli attributi che si possono impostare in questo tag sono: 
BALANCE (bilancia cassa dx e cassa sx i valori vanno da -10000 a +10000), VOLUME (controllo del volume, i valori vanno da –10000 a 0, con 0 sfrutta al massimo l’uscita wav della scheda audio), SRC (path del file della musichetta che ci tenete tanto a mettere), LOOP (quante volte si vuol far ripetere la riproduzione della musichetta, con 0 ripete una volta, con –1 infinite volte altrimenti specificate il numero di ripetizioni), ID (stringa alfanumerica di identificazione). 

Pop Up 
Prima di spiegare come si fanno, chiarisco cosa sono e il loro possibile utilizzo: 
Una pop up non è altro che una finestra di dimensioni variabile che si aprono o in automatico in apertura on in chiusura del sito... oppure con un link. 
Vengono spesso usate o per foto-gallery oppure per informazioni pubblicitarie. 
Si creano in questo modo : 
code:
<a href="#" onClick="window.open ('pagina.html');">Pop up/a>
Questa è la funzione base per crearla e ora passiamo col descrivere i vari attributi : 
'scrollbars=no // specifica la presenza o meno della barra di scorrimento 
'resizable=no' // Specifica se è possibile ridimensionarla da parte dell'utente 
top=100,left=150 // Distanza dal top e dalla sinistra della pagina 
width=500,height=250' // Le dimensioni della pop up 
Queste sono le funzioni principali... comunque il resto della pop up può essere personalizzato dal web master. 
Un po’ di codici le trovate pure qui : 
http://forum.html.it/forum/showthre...threadid=449483 <http://forum.html.it/forum/showthread.php?s=&threadid=449483> 

Link 
I link sono modificabili con semplicità dai css per formattare carattere , style, colore..... etc. 
Allora... passo ad elencare i vari tipi di link : 
a:link {...} // style di deafult per i link 
a:visited {..} // style dei link una volta visitati dall'utente 
a:active {..} // style dei link "attivi" .. ovvero subito dopo averli cliccati 
a:hover {..} // style dei link quando il cursore gli è sopra 
Ora passiamo agli attributi che si possono dare ai link : 
color: #00000 // colore dei link 
font-size : 10px // il size dei link 
font-family : Arial // Il font del link 
text-decoration : none, underline ... // specifica lo stile del link 
background-color: #xxxxxx // colore di sfondo dei link 
Ora analizziamo l'uso delle Classi 
I codici per i link vengono isneriti tra <head> e </head> tra <style> e <style> . 
I link verranno però solo tutti con lo stesso stile. Se si vogliono un po’ di link di un tipo e altri di un'altro usando le classi : 
facendo a.classe.link {....} e nei vari link inseriamo class="classe" il link non avrà lo stile di tutti gli altri link, ma quelli stabiliti in a.calsse:link . Le classi si costruiscono mettendo: 
a.nome classe :tipo link 
P.s. Il punto dopo "a" è indispensabile !!! 
In questo modo si possono fare 1000 tipi di link diversi per pagina. 

Frame 
I frame sono un elemento di una pagina web che solo usati all'interno di un frameset. Cos'è però un frameset ? 
Un frameset è come la divisione di una pagina in più reparti contenenti pagine e documenti diversi; è come la suddivisione di una pagina in altre sue pagine più piccole che sono "ferme" sulla pagina. I frameset sono molte volte utilizzati per avere in ogni pagina o il menù o il titolo del sito per comodità sia della navigazione che della costruzione di esso. Infatti come accade con l'iframe i fari frame che compongono il frameset sono elementi a se che sono uniti in una pagina e un di essi può cambiare contenuto e gli altri rimangono "fermi" come fissi sulla pagina. Un framset può essere immaginato come quando ad esempio sul nostro pc facciamo: 
start >> cerca >> e ci appare una finestra suddivisa in due : 
in una parte a sinistra dove c'è l'input text ove inserire la parola da cercare , e la parte di destra dove scorre il contenuto e i risultati della ricerca. 
Passiamo ora alla costruzione di un frameset. 
la struttura più semplice di un frameset è la pagina divisa in due orizzontalmente e si forma così : 
code:
<html>
<head>
<title>Pagina con frame 1</title>
</head>
<frameset rows="*,*">
<frame name="superiore" src="Nuova_pagina_1.htm">
<frame name="inferiore" src="Nuova_pagina_2.htm">
</frameset>
</html>
come si vede dal codice il frameset viene "delimitato" da : <frameset> e </frameset> 
- rows="*,*" idica la dimensioni dell'frame 
- i frame si "delimitano" a loro volta da : <frame> e </frame> 
- Ogni frame che compone il frameset si costituisce così : 
code:
<frame name="superiore" src="Nuova_pagina_6.htm">
dove "name" è il nome, scr="" è il percorso per il contenuto o la pagina del frame. 
Per perfezionare il codice bisogna inserire una frase per avvertire un utente che non ha la possibilità o la compatibilità per vedere il frema. A tal proposito si inserisce un tag <noframes> che contiene ciò verrà visualizzato caso non si vedesse il frameset. Il codice completo è : 
code:
<noframes>
<body>
<p>La pagina corrente utilizza i frame. 
Questa caratteristica non è 
supportata dal browser in uso.</p>
</body>
</noframes>
dove <noframes> e </noframes> delimitano il contenuto della visualizzazione , <body> contiene il corpo del messaggio che verrà mostrato all'utente e poi chiuso </body>. 
Vediamo ora un frameset che divide la pagina in verticale : 
code:
<html>
<head>
<title>Nuova pagina 8</title>
</head>
<frameset cols="26%,*">
<frame name="sinistra" src="Nuova_pagina_10.htm">
<frame name="destra" src="Nuova_pagina_9.htm">
<noframes>
<body>
<p>La pagina corrente utilizza i frame.
Questa caratteristica non è
supportata dal browser in uso.</p>
</body>
</noframes>
</frameset>
</html>
Le varie parti del codice sono uguali a quello di prima cambia solo la posizione dei singoli frame . 
Proprietà 
Per personalizzare un frameset si possono cambiare i colori di sfondo , dei bordi , se permettere o no lo scrolling ... 
cambiare il bordo 
Per cambiare il colore e le dimensioni del brodo di un frame singolo bisogna inserire nel frameset nel frame che si vuola uno style css : 
style="border-left: 1 solid #00FFFF; // bordo sinistro ( spessore - tipo - colore ) 
border-right: 1 solid #800080; // bordo destro ( spessore - tipo - colore ) 
border-top: 1 solid #C0C0C0; // brodo in alto ( spessore - tipo - colore ) 
border-bottom: 1 solid #00FF00" // bordo basso ( spessore - tipo - colore ) 

Distanza e spazio tra due frame di un framset 
Bisogna aggiungere alla costruzione del frameset : 
code:
<frameset framespacing="0" border="0" 
cols="26%,*" frameborder="0">
Dove framespacing è lo spazio tra i due frame e frameborder e il bordo dei due frames 
Permettere o no lo scrolling 
Nel singolo frame che compone il frameset inerire : 
scrolling="no" // se non si vuole permettere lo scrolling dell'iframe 
scrolling="yes" // se si vuole che la scrollbar appaia sempre in ogni caso 
scrolling="auto" // se si vuole che la barra appaia solo quando necessario 

Formattare il testo: Intestazioni 
<h1></h1> -> titolo molto grande (header 1) 
<h2></h2> 
<h3></h3> 
<h4></h4> 
<h5></h5> 
<h6></h6> 
Il testo lo mettete tra i tag di apertura e chiusura 
esempio: 
<body> 
<h1>capitolo primo</h1> 
<h2>paragrafo primo</h2> 
</body> 

Formattare il testo: Paragrafi 
<p></p> 
Il testo del paragrafo lo inserite tra il tag di apertura e chiusura 
esempio: 
<body> 
<h1>capitolo primo</h1> 
<h2>paragrafo primo</h2> 
<p>bla bla bla bla bla bla bla bla</p> 
<p>scrib scrib scrib scrib</p> 
</body> 
Chiudendo il tag p (</p> ) il browser lascerà automaticamente due righe vuote. 

Formattare il testo: Suddividere le righe 
Il tag <br> vi consente di andare a capo. 
esempio: 
<p> 
sig. mario rossi<br> 
via roma 65<br> 
20100 Milano<br> 
</p> 
Il testo sarà comunque inserito in un paragrafo ma suddiviso secondo le vostre necessità 
Nota: potete mettere quanti tag <br> volete per lasciare più spazio anche tra altri elementi. 

Formattare il testo: Creare rientri 
<blockquote> 
</blockquote> 
Il testo inserito tra il tag di apertura e chiusura sarà rientrato, lasciando dello spazio bianco al margine del documento. 
esempio: 
<body> 
<h1>capitolo primo</h1> 
<h2>paragrafo primo</h2> 
<p>paragrafo. Qui il testo è ben formattato</p> 
<blockquote><p>testo rientrato</p><blockquote> 
<p>paragrafo. Anche qui il testo è ben formattato </p> 
</body> 

Formattare il testo: Creare caselle di testo con i DIV 
Il tag <div> è un tag molto importante che ultimamente si preferisce alle tabelle. Noi lo useremo semplicemente per creare sezioni ed allinearle rispetto la pagina. 
<div align=”center”> 
<p> testo centrato </p> 
</div> 
<div align=”left”> 
<p> testo di default, allineato a sinistra</p> 
</div> 
<div> 
<p>testo allineato a destra</p> 
</div> 

Linkare un Documento CSS 
Per linkare un documento CSS ad una pagina web, bisogna aggiungere nella sezione <head> il codice seguente: 
<link rel=”stylesheet” href=”URLDOCUMENTO.CSS” type=”text/css”> 
se il documento css è nella stessa cartella del documento html allora è sufficiente scrivere nell’href il nome del documento (es. style.css) 
in caso contrario, riportare l’url assoluto. 
Attributi CSS applicabili ai font 
font-size: 12pt; 
permette di specificare la dimensione del testo 
font-family: ‘arial’, ‘verdana’, ‘tahoma’; 
permette di specificare il tipo di carattere. Nel caso non venga trovato il primo carattere (in questo caso arial), il browser cerca il secondo e così via. (arial verrà sempre trovato ;-) 
font-style: normal/italic/oblique; 
specifica uno stile corsivo o inclinato. 
Default: normal 
font-variant: normal/small-caps; 
stile maiuscoletto 
Default: normal 
font-weight : normal/bold/bolder/lighter ; 
specifica lo spessore del testo (bold è il classico grassetto) 
Default: normal 
line-height: normal/xxUnits/%; 
specifica lo spazio tra le linee 
xx sta per un numero quale 13, 75, 47px (pixel) 
Default: normal 
text-indent: xxUnits/%; 
permette di specificare l’indentazione della prima riga di un elemento (rientro) 
text-align: left/right/center/justify; 
allinea il testo, a sinistra, destra, centro e giustificato 
Default: left 
text-decoration: underline/overline/line-through/blink/none; 
fa apparire il testo sottolineato, sovralineato, attraversato da una linea, e lampeggiante 
Default: none 
text-transform: uppercase/lowercase/capitalize/none; 
fa che il testo sia scritto tutto in maiuscolo, minuscolo, con l’iniziale maiuscola, normale 
Default: none 
letter-spacing: normal/xxUnits/%; 
specifica l’ammontare di spazio tra le lettere di un blocco di testo 
word-spacing: normal/xxUnits/%; 
specifica l’ammontare di spazio tra le parole di un blocco di testo 

Applicazioni dei CSS ai font: Esempi 
1. Testo allineato al centro in verdana, 12pt, convertito in maiuscolo. Per tutti i tag <p> del documento: 
<p>Testo allineato al centro in verdana, 12pt, convertito in maiuscolo</p> 
nel CSS: 


text-align: center; 
font-family: ‘verdana’; 
font-size: 12pt; 
text-transform: uppercase; 

2. Testo allineato al centro in verdana, 12pt, convertito in maiuscolo. Non per tutti i tags <p> del documento, ma solo per una classe (verdanatitolo): 
<p class=”verdanatitolo”>Testo allineato al centro in verdana, 12pt, convertito in maiuscolo</p> 
nel CSS: 
p.verdanatitolo 

text-align: center; 
font-family: ‘verdana’; 
font-size: 12pt; 
text-transform: uppercase; 

3. Testo allineato al centro in verdana, 12pt, convertito in maiuscolo. Non per tutti i tags <p> del documento, ma solo per UNO (ID= titolo) 
<p id=”titolo”>Testo allineato al centro in verdana, 12pt, convertito in maiuscolo</p> 
nel CSS: 
#titolo 

text-align: center; 
font-family: ‘verdana’; 
font-size: 12pt; 
text-transform: uppercase; 

Mouse con ora (Lo sfondo è nero...)
<SCRIPT language=JavaScript>
dCol='#dff868';
fCol='ffffff';
sCol='ffffff';
mCol='ffffff';
hCol='ffffff';
ClockHeight=35;
ClockWidth=35;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new Array("DOMENICA","LUNEDÌ","MARTEDÌ","MERCOLEDÌ","GIOVEDÌ","VENERDÌ","SABATO");
m=new Array("GENNAIO","FEBBRAIO","MARZO","APRILE","MAGGIO","GIUGNO","LUGLIO","AGOSTO","SETTEMBRE","OTTOBRE","NOVEMBRE","DICEMBRE");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
Split=360/n;
Dsplit=360/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.06;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</SCRIPT>
<body bgcolor="#000000">

Simulare il tasto back (indietro) di Explorer
Basta inserire questa riga di comando:
<a href="javascript:history.back(1)" class="testo">Back </a>

Testo colorato e sfumato
C'è un software gratuito che permette di fare ciò. Si tratta di TextTone ( http://www.rivermill.demon.co.uk/texttone/download.htm ). Una volta installato e lanciato, non dobbiamo fare molto: Click su next, scriviamo il testo da colorare, click su next, scegliamo tipo di carattere e dimensioni, click su Next, scegliamo i due colori di inizio e fine della sfumatura, click su next, appare un'anteprima, click su next, assicuriamoci che sia presente il segno di spunta su Copy HTML code to clipboard, click su finish.

Pagina HTML a tutto schermo
Per prima cosa, copiare queste righe tra i tag <head> e </head> della pagina:
<script language="javascript">
function apriFinestra(){
window.open("http://www.pippo.it","","fullscreen, scrollbars")
}
</script>
Nel corpo della pagina andrà creato un link di questo tipo:
<a href="#" onClick="apriFinestra()">Apri pippo.it a tutto schermo</a>
Con l'evento onClick richiamiamo la funzione Javascript definita in precedenza. Ecco un
esempio:
Apri HTML.it a tutto schermo (premere ALT + F4 per uscire).

Sfondo fisso
<style type="text/css">
<!--
body { background-image: url(sfondo.jpg); background-attachment: fixed}
// -->
</style>
background-repeat: no-repeat;
background-attachment:fixed
si puo allineare a sinistra l'immagine di sfondo?
background-position: left;
I valori sono left, center, right oppure il valore in pixel che ti sposta l'immagine da sinistra verso destra.

Pagina Web con sfondo sfisso
Normalmente quando si utilizza un'immagine come sfondo di una pagina web, durante lo scrolling della pagina, l'immagine si sposta con la pagina stessa.
Se invece si desidera 'bloccare' l'immagine di sfondo è sufficiente modificare il codice come segue
<body bgcolor:"#000000" background="sfondo.jpg bgproperties="fixed">
ovvero:
colore di sfondo = nero
immagine di sfondo = sfondo.jpg
bloccata mediante il comando 'fixed'

Chiudere una finestra con Javascript. 
Se creo delle finestre pop-up per visualizzare dei dati, come posso farle chiudere all'utente usando un link? 
Risposta
Per chiudere la finestra di un browser (in questo caso una popup) usando un link, si usa una semplice istruzione Javascript:

<a href="#" onClick="window.close()">Chiudi la finestra</a>

Al codice del link si aggiune un evento (onClick). Cliccando, viene chiusa la finestra corrente. È importante notare che l'attributo href deve comunque contenere un valore. In questi casi, dal momento che il collegamento non serve ad aprire un'altra pagina, si usa per convenzione il simbolo # per creare un link 'finto'.
Un codice alternativo è questo:

<a href="javascript:window.close();">Chiudi la finestra</a>

Al posto di un link testuale si può usare tranquillamente un'immagine.

Come si inserisce un filmato Flash? 
A cura di: Stefano domenica 1 agosto 2004 
Devo inserire due piccole animazioni Flash in una pagina, ma non so quali tag HTMl usare. 
Risposta
Per inserire un filmato Flash in una pagina web si usa questo codice:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=5,0,0,0" width="100" height="150" >
<param name="movie" value="nome_filmato.swf">
<param name="quality" value="high"> 
<embed src="nome_filmato.swf" quality="high" width="100" height="150"
type="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash"></embed>
</object>

Come si vede, il tag HTML utilizzato per l'inserimento di filmati Flash (e oggetti multimediali in genere) è <object>. Gli attributi classid e codebase sono fissi e non vanno pertanto modificati. Le parti da cambiare di volta in volta, a seconda delle caratteristiche del filmato, sono quelle evidenziate in grassetto. Width e height si riferiscono alle dimensioni orizzontali e verticali del filmato. Il parametro name assegna un nome al filmato, mentre con l'attributo value si imposta la posizione del filmato, ovvero la sua localizzazione sul server.
Gli stessi dati vanno impostati con l'elemento <embed>, un fatto di compatibilità, perché vecchie versioni del browsewr Netscape non supportanto <object>.

Slideshow
E' possibile generare delle immagini che si dissolvono l'una nell'altra, il cosiddetto effetto "crossfade". Il seguente script va inserito nel tag head:

<script>
var slideShowSpeed = 2000
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = '01.gif'
Pic[1] = '02.gif'
Pic[2] = '03.gif'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply() 
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

Se volete adattarlo alle vostre esigenze:

var slideShowSpeed = 2000
questa variabile indica il tempo che deve passare tra un cambio d'immagine e l'altro espresso in millisecondi (1000 = 1 secondo).

var crossFadeDuration = 3
questa stringa indica la durata dell'effetto "crossfade" (in secondi).

Pic[0] = '01.gif'
Pic[1] = '02.gif'
Pic[2] = '03.gif'
questi sono gli Array che conterranno le immagini da visualizzare. Se ne possono aggiunger anche di più rispettando il numero progressivo tra le parentesi quadre.

Nel tag body, invece, deve essere inserito il gestore di eventi onLoad in questo modo:

<BODY onload="runSlideShow()">

Ora, si deve inserire in un punto della pagina, la tabella che conterrà le immagini:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=100 width=100>
<img src="01.gif" name='SlideShow' width=100 height=100></td>
</tr>
</table>

potete modificare la tabella nei punti:

height=100 width=100
sono le misure della tabella che conterrà le immagini

img src="01.gif"
indica la prima immagine da visualizzare nello slideshow

width=100 height=100
i valori che indicano la lunghezza e l'altezza delle immagini.

Cambio di sfondo a seconda dell'ora
Grazie a questo script lo sfondo del vostro sito cambierà colore a seconda dell'ora segnata dal pc dell'utente.
Lo script va inserito tra i tag <head> della pagina da personalizzare:

<script language="Javascript">
<!--
var now = new Date(); 
var hours = now.getHours(); 
var psj=0; 
//2-4 del mattino 
if (hours > 2 && hours < 4){ 
document.write('<body bgcolor="orange" text="#FFFFFF">') 
}
//5-9 del mattino 
if (hours > 5 && hours < 9){ 
document.write('<body background="htmlit.gif" text="#FFFFFF">') 

//10-13 del giorno 
if (hours > 10 || hours < 13){ 
document.write('<body bgcolor="black" text="#FFFFFF">') 

//14-18 del pomeriggio 
if (hours > 14 && hours < 18){ 
document.write('<body bgcolor="white" text="#FFFFFF">') 

//19-22 della sera 
if (hours > 19 && hours < 22){ 
document.write('<body bgcolor="skyblue" text="#FFFFFF">') 

//23-1 della notte 
if (hours > 23 && hours < 1){ 
document.write('<body background="htmlit.gif" text="#FFFFFF">') 

//-->
</script>

In questo esempio la giornata è stata divisa in 6 parti (e quindi sei diversi colori o immagini per lo sfondo) ma volendo se ne potrebbero aggiungere anche altri. Basta copiare questa riga:

if (hours > 19 && hours < 22){ 
document.write('<body bgcolor="skyblue" text="#FFFFFF">') } 
ed incollarla nel codice stando attenti a far combaciare gli orari.

hours > 19 && hours < 22
gestisce lo sfondo a seconda dell'ora.

bgcolor="skyblue"
è il colore da usare in una determinata ora. Si possono usare sia i valori esadecimali o addirittura delle immagini, modificando così:

<body background="htmlit.gif" text="#FFFFFF">

Un link lampeggiante
In una qualunque pagina web, dovrete inserire, tra i tag <head> e </head>, il seguente Javascript:

<script language="javascript"> 
window.onerror = null; 
var bName = navigator.appName; 
var bVer = parseInt(navigator.appVersion); 
var NS4 = (bName == "Netscape" && bVer >= 4); 
var IE4 = (bName == "Microsoft Internet Explorer" 
&& bVer >= 4); 
var NS3 = (bName == "Netscape" && bVer < 4); 
var IE3 = (bName == "Microsoft Internet Explorer" 
&& bVer < 4); 
var blink_speed=300; 
var i=0; 
if (NS4 || IE4) { 
if (navigator.appName == "Netscape") { 
layerStyleRef="layer."; 
layerRef="document.layers"; 
styleSwitch=""; 
}else{ 
layerStyleRef="layer.style."; 
layerRef="document.all"; 
styleSwitch=".style"; 


function Blink(layerName){ 
if (NS4 || IE4) { 
if(i%2==0) 

eval(layerRef+'["'+layerName+'"]'+ 
styleSwitch+'.visibility="visible"'); 

else 

eval(layerRef+'["'+layerName+'"]'+ 
styleSwitch+'.visibility="hidden"'); 


if(i<1) 

i++; 

else 

i-- 

setTimeout("Blink('"+layerName+"')",blink_speed); 

</script> 

e nel corpo del documento, tra i tag <body> e </body>:

<div id="prem_hint" style="position:relative; left:0; visibility:hidden" class="prem_hint"> 
<font color="#FF0000"><b><a href="http://www.spacemarc.it">Questo è l'effetto finale!</A></b></font> 
</div> 
<script language="javascript">Blink('prem_hint');</script> 

Vedere il codice html di una pagina
javascript:viewthesource()

Rimuovere la sottolineatura da tutti i link della pagina:
Inserite il seguente codice HTML che potete scaricarvi da qui, prima del tag <BODY>:
<STYLE>
A {text-decoration: none;}
</STYLE> 

Utilizzare GOOGLE come motore di ricerca interno
<form method=GET action=http://www.google.com/custom target="_blank"><img src="img/google.gif" border=0 align=absmiddle height=24 width=70 alt="Google"><BR><input type=text name=q size=35 maxlength=255 value=""><BR><input type=submit name=sa value="cerca"></form>

Redirect automatico
<script type="text/javascript"> 
self.location.replace("http://www.tuoURLqui.it"); 
</script> 
<META HTTP-EQUIV="Refresh" CONTENT="10; url=http://www.tuosito.com">

Come reindirizzo un utente su un'altra pagina? 
Ho cambiato l'indirizzo del mio sito. Quando i visitatori arrivano sulla vecchia home page, vorrei reindirizzarli automaticamente su quella nuova. 
Il modo più semplice per reindirizzare un utente su un'altra pagina consiste nell'uso di un particolare meta-tag. Inserire quest riga di codice all'interno dell'intestazione della pagina, ovvero tra i tag <head> e </head>:

<meta http-equiv="refresh" content="5;url=http://www.html.it">

Questa istruzione reindirizza un utente alla home page di HTML.it dopo un intervallo di 5 secondi. I valori fondamentali, dunque, sono il numero (equivale ai secondi di attesa) e l'indirizzo della nuova pagina. Se si effettua un reindirizzamento, è opportuno avvisare il visitatore, magari inserendo nella vecchia pagina un messaggio del tipo: "State per essere indirizzati alla nuova home page. Attendete 5 secondi".

Un semplice download
<script language="javascript">
<!--
function startDownload ()
{
window.location = '<percorso>\file\nomefile' ;
}
// -->
</script>

Mettere un messaggio sulla barra di stato di IExplorer
<script type="text/javascript" language="JavaScript">
function hidestatus(){
window.status='www.top100italiana.com - il portale per votare - © tutti i diritti riservati » {2003/2004}'
return true
}
if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSECLICK)
document.onmouseover=hidestatus
document.onmouseout=hidestatus
document.onmouseclick=hidestatus
</script>

Precompilare automaticamente una email
mailto:xxxx@nomesito.it?subject=OGGETTO DEL MESSAGGIO&body=TESTO DELL'EMAIL

OPPURE

<FORM>
<INPUT TYPE="button" VALUE="Scrivici" onClick="parent.location='mailto:you@youremail.com?subject=Corso HTML&cc=you2@youremail.com'">
</FORM>

Fissare l'immagine di sfondo
<body style="background-image: url('sfondo.jpg'); background-repeat: repeat-y; background-attachment: fixed">

Chiudere la finestra corrente
Javascript:self.close();

Inserire un link "BACK"
javascript:history.back(1)
OPPURE
<!-- Primo esempio / INDIETRO testuale ...... -1 sta per un passo indietro -->
<a href="#" onClick="history.go(-1)"><strong><font size="3">Torna indietro da qui!</font></strong></a> 
<br><br>
<!-- Secondo esempio / INDIETRO bottone ...... -1 sta per un passo indietro -->
<input type=button value="Torna indietro da qui!" onClick="history.go(-1)" style="color:#000000; background-color:#ffcccc;">
<!-- Fine fase 1.Non occorre fare altro -->

Qualche TAG di HTML
PHP DESIGNER - Editor HTML, PHP, SQL (http://www.mpsoftware.dk/downloads.htm)

Schema Standard di una pagina HTML
<HTML>
<HEAD>
<TITLE>
TITOLO PAGINA
</TITLE>
</HEAD>
<BODY>
CORPO DEL TESTO
</BODY>
</HTML>

Una riga di commento
<!-- COMMENTO -->

Scrittura
<H1>DIMENSIONI CARATTERE(Il più grande)</H1>
<H2>DIMENSIONI CARATTERE</H2>
<H3>DIMENSIONI CARATTERE</H3>
<H4>DIMENSIONI CARATTERE</H4>
<H5>DIMENSIONI CARATTERE</H5>
<H6>DIMENSIONI CARATTERE (Il più piccolo)</H6>

<I>CORSIVO</I>
<B>GRASSETTO</B>
<U>SOTTOLINEATO</U>

RITORNO A CAPO<BR>

Linea orizzontale <HR>
Linea orizzontale al 50% della larghezza della pagina <HR width="50%">

<DIV align="center"> PER CENTRARE IL TESTO</DIV>
Altre opzioni left, justify, right

Mettere una descrizione ad un'immagine al passaggio del mouse
<img src="xxxx.jpg" alt="commento all'immagine" width="larghezza in pollici" hight="altezza in pollici">

JAVASCRIPT PER STAMPARE LA PAGINA E PER CHIUDERE LA FINESTRA

<td id="tabsup">
<li><A HREF="javascript:;" onclick="self.print()">Stampa questa pagina</A>
<li><A HREF="javascript:;" onclick="javascript:window.close()">Chiudi questa finestra</a></td>

Stampare da un popup <a href="#" onclick="javascript:window.print(); return false" title="Stampa">

Chiudere la finestra dopo aver stampato il contenuto
La cosa che vorrei è che quando clicca "stampa" si chiudesse automaticamente la pagina. 
code: 
<input type="button" value="stampa" onclick="window.print()" class='nonsta'> 
<SCRIPT> 
setTimeout("window.close()",10000); 
</SCRIPT> 

<input type="button" value="stampa" onclick="window.print()"; setTimeout "window.close()",0; class='nonsta'>


CHIUSURA AUTOMATICA
<SCRIPT> 
setTimeout("window.close()",0); 
</SCRIPT> 

OPPURE

onClick="window.print();window.close();" 
onClick="java script:window.print();window.close();" 

Questione di menu
Menù a tendina. Cliccando sulla voce si va alla pagina (stessa pagina)
<!-- from http://www.codethat.com/menu/menu_examples.html -->
<FORM name=jumpto method=post>
Vai&nbsp;a&nbsp;
<SELECT class="formlist" NAME="where" SIZE=1
onChange="window.location.href = document.jumpto.where.options[document.jumpto.where.selectedIndex].value;">
<OPTION value="../xxx.html">Home
<OPTION value="x1.htm">Office
<OPTION value="x2.htm">DVD
<OPTION value="x3.htm">Web
<OPTION value="x4.htm">Net
</SELECT>
</FORM>

Menù a tendina (MOLTO COMODO E LEGGERO!!). Cliccando sulla voce, si apre (in una struttura in frame) il link nel frame selezionato.
<select name="select15" onChange="window.open(this.options[this.selectedIndex].value,'principale')" size="1">            (lasciare invariato,a parte principale)
<option selected>Descrizione del contenuto</option>
<option value="../pagina/pag1.htm">Pag1</option>
<option value="../pagina/pag2">Pag2</option>
</select>

Mostra l'IP
Description: This script captures the IP address of the person filling in your form and submits it to you as part of the form. The IP address is displayed in a text box which the user cannot edit. The script works by taking the #echo var="REMOTE_ADDR" from SSI and using JavaScript to place it in the text box. Although it is possible to do it with JavaScript alone, this only works with Netscape and as far as I can tell, using SSI is the only cross browser way of doing it. You will need a web server capable of running SSI (most web servers do this by default). The page with the form in it needs to have the suffix .shtml to tell the server to parse it.

<script language="javascript">
//IP address display: By http://www.Hostroute.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
var ip = '<!--#echo var="REMOTE_ADDR"-->'
function ipval() {
document.myform.ipaddr.value=ip;
}
window.onload=ipval
</script>
<form method="post" action="" name="myform">
<input type="text" name="ipaddr" readonly>
</form>

Colori in Esadecimale/HTML, con esempi (Vedi)

Creare facilmente una barra di scorrimento colorata
Vi sarà senz'altro capitato di vedere, utilizzando Internet Explorer, che molti siti possiedono nelle loro pagine delle barre di scorrimento colorate in maniera "anomala". Solitamente vengono modificate per renderle coordinate con i colori dominanti delle pagine del sito di cui fanno parte.
Ottenere questo effetto è più facile del previsto.
Basta mettere, subito prima del tag </head>, il codice di seguito descritto facendo un banale copia/incolla:
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#808080;
}
-->
</STYLE>
Ad ogni particolare della barra di scorrimento (freccina, superficie del tasto di scorrimento, ombre e luci 3d ecc..) potrete assegnare il colore che vorrete esprimendolo in esadecimale.

Blocco tasto destro
<script language="JavaScript">
<!--
var message="Questa operazione non è permessa, se avete bisogno di informazioni o materiale contattateci: webmaster@sublandia.it - La riproduzione e l’uso, totale o parziale, in qualsiasi forma e-o con qualsiasi mezzo, di contenuti e immagini senza autorizzazione scritta dell’autore, non è autorizzata ad alcuno. Si richiama allo scopo la tutela del diritto d’autore e dei diritti connessi alla ideazione e progettazione per la comunicazione visiva così come previsto dal D.L. 29 dicembre 1992 n. 518 e D.L. 16 novembre 1994 n. 685";

function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>


Blocco tasto destro 2
<SCRIPT language=javascript>
function right(e)
{
if (navigator.appName == 'Netscape' && (e.which == 2 || e.which == 3)) return false;
else if (navigator.appName == "Microsoft Internet Explorer" && (event.button == 2 || event.button == 3))
{
alert("Tasto destro disabilitato");
return false;
}
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN)
window.onmousedown=right;
</SCRIPT>

Blocco tasto destro 3
<SCRIPT LANGUAGE="JavaScript1.1">

<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' && 
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' && 
(event.button == 2 || event.button == 3)) {
alert("Spiacenti, il tasto destro del mouse e' disabilitato");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// End -->

</script> 

Inserire un commento ai link
Come per l'elemento IMG anche per i collegamenti ipertestuali è possibile definire un testo di commento. Grazie al tag ' title='"" il commento sarà visualizzato quando il mouse passerà sull'area di link. Questa la sintassi:

<A HREF="http://www.html.it" ' title='"Il sito italiano sul Web publishing">Visita HTML.it</A>

Inserire una data
<SCRIPT LANGUAGE = "JavaScript">
var dayNames = new Array("Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato");
var monthNames = new Array("Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio", "Agosto","Settembre","Ottobre","Novembre","Dicembre");
var dt = new Date(); var y = dt.getYear();
if (y < 1000) y +=1900;
document.write ("Parma, " + dayNames[dt.getDay()] + " " + dt.getDate() + " " + monthNames[dt.getMonth()] + " " + y);
</SCRIPT>

OPPURE
<script language="JavaScript">
<!-- 
today = new Date()
document.write("Adesso sono le ",today.getHours(),":",today.getMinutes())
// -->
</script>

Finestra di pop-up
Per creare una finestra di popup, basta inserire il seguente codice dopo il tag <body>.
La finestra conterrà la pagina "popup.htm" e naturalmente potete caricare qualsiasi pagina modificando il nome del fine.
<script language="JavaScript">window.open('popup.html','popupwin','height=150,width=400')</script>

OPPURE:
<script language="Javascript">
newwindow=window.open('sponsor.htm', 'descrizione', 'width=220,height=220,scrollbars=no')
window.opener=self
</script>

POPUP istantaneo
<script>
newwindow=window.open("pagina.html","descrizione titolo","scrollbars=no,resizable=yes,top=0,left=0,width=500,height=250,status=no,location=no,toolbar=no")
newwindow.creator=self</script>

OPPURE: 
<body bgcolor="#FFFFFF" onload="finestra('news_homepage.htm')" leftmargin="0" topmargin="0">

Messaggio sulla barra
<script language="JavaScript">
<!--
defaultStatus = "LA TUA SCRITTA..."
//-->
</script>

Popup che sparisce dopo un po'
(TRA HEAD)
<script>
newwindow=window.open("popup.html","","top=200,left=200,width=350,height=200")
newwindow.creator=self</script>

(TRA BODY DEL POPUP)
<script language="JavaScript">
setTimeout('window.close()',3000);
</script>

Scritta scorrevole sulla barra inferiore di Iexplorer
<script language="JavaScript">
<!--
var scrtxt="Benvenuti nel Sito! Buona navigazione!";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scorrevole() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scorrevole()",170);
}
//-->
</script>

Effetto RollOver
Descrizione: Uno script che permette di creare un utilissimo menu con effetto rollover (facilmente configurabile dall'utente).
Esempio:Cliccate nella scritta a fondo pagina per andare nella pagina ESEMPIO.
Istruzioni per l'uso: Inserite le varie istruzioni all'interno della pagina destinata al Web.
Note: Attenersi scrupolosamente alle indicazioni inserite all'interno del listato riportato sotto (vi possono essere delle parti che vanno aggiunte nell'head ed alcune nel body).
<!-- Copiare il codice nell'head della pagina html -->
<STYLE>
/*
Definisce il rollover usando CSS.
*/
.on {
font-size: 18;
text-decoration: underline;
color: red;
}
.off {
font-size: 16;
text-decoration: none;
color: black;
}
</STYLE>
<!-- Copiare il codice nel body della pagina html -->
<UL>
<!--
These three links are example rollovers. To create more, just cut and paste,
there's no need to modify any non-HTML code.
-->
<LI>
<A HREF = "xxxxxxxx.htm" CLASS = "off"
onMouseOver = "this.className ='on';"
onMouseOut = "this.className = 'off';">Indice
</A>
<LI>
<A HREF = "xxxx.htm"CLASS = "off"
onMouseOver = "this.className ='on';"
onMouseOut = "this.className = 'off';">Indice1
</A>
<LI>
<A HREF = "xxxxxx.htm" CLASS = "off"
onMouseOver = "this.className ='on';"
onMouseOut = "this.className = 'off';">Indice2
</A>
</UL>

Sottolineare un link quando il mouse ci passa sopra
Come sottolineare un link solo quando il mouse vi passa sopra?
È un effetto che si ottiene grazie alle proprietà dei fogli stile, ed è molto semplice da realizzare. È sufficiente inserire tra i tag <HEAD> del documento il seguente codice:

<style type="text/css">
A:link, A:visited {text-decoration: none}
A:hover {text-decoration: underline}
</style>

Questo effetto si ottiene con Ms Internet Explorer 4 o successivo e con le ultimissime versioni di Netscape 6. Netscape 4 si limita a non visualizzare la sottolineatura, né quando il link è attivo né quando è inattivo.

Inserimento Audio (MIDI)
<embed src="Sounds/verdi/anvilchor.mid" width="128" height="96"
autostart="true" hidden="true" loop="true" volume="100">

<bgsound src="../sounds/schimp.wav" loop="2">

<embed src="hey_jude.mid" autostart=true
hidden=true loop=false width=145 height=60>

<bgsound src="KylieMinogue.mid" loop="1">
<bgsound src="fratelli.mid" loop="2">

<embed src="03_iris.mid" autostart="true" loop="false" volume="100%" hidden="true">

<BGSOUND SRC="tuomidi.mid" LOOP=INFINITE>
<EMBED src="tuomidi.mid" WIDTH="145" HEIGHT="35" AUTOSTART="true" LOOP="true">


INDIPENDENTEMENTE DAL BROWSER
=============================

<script language="JavaScript">
<!--
if (navigator.appName == "Microsoft Internet Explorer"){
document.write('<BGSOUND SRC="tuomidi.mid" LOOP=INFINITE>')}
else {
document.write('<EMBED src="tuomidi.mid" WIDTH="145" HEIGHT="35" AUTOSTART="true" LOOP="true">')}
// -->
</script>

Quella misteriosa icona in alto...
Una delle domande più quotate sui nostri siti dedicati ai webmaster è: Come faccio a far comparire una mia icona una volta che il sito è inserito dall'utente tra i Preferiti?
La risposta è (relativamente) semplice: basta semplicemente creare un'icona dal nome favicon.ico ed posizionarla nella root del tuo sito. Per root si intende il livello più basso della gerarchia di cartelle del sito.
L'icona "favicon.ico" NON deve essere un'immagine con estensione rinominata in .ico, ma un'icona creata con un software apposito (come ad esempio Microangelo) con dimensioni di 16x16 pixel e una risoluzione di 256 colori.
Infine è necessario che il sito in questione sia aggiunto ai preferiti di Internet Explorer. In questo modo l'icona personalizzata sarà visibile sia nella barra degli indirizzi, sia accanto ai titoli dei preferiti.
NOTA: se l'icona non e' visibile, apri la tua home page, e tra i tag <head> e </head> inserisci: 
<link rel="shortcut icon" href="http://www.tuosito.it/favicon.ico">

Link per far impostare la vostra homepage
<html>
<a class="chlnk" style="cursor:hand" HREF onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.altavista.it');"> click per cambiare la home page di MsIe </a> 
</html>

=========================
Il trucco è diviso in due parti: precisamente nella prima parte vedremo insieme come è possibile inserire nelle pagine del vostro sito un link che consenta agli utenti di impostare la vostra home page come loro pagina iniziale nella seconda parte vedremo come far aggiungere il vostro sito ai preferiti.
Per aggiungere la prima funzione al vostro sito è sufficiente copiare ed incollare all'interno della vostra pagina web il seguente codice:

<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.mrwebmaster.it');">Imposta come pagina iniziale</a>

Ovviamente dovrete modificare l'URL presente nel codice (http://www.mrwebmaster.it) con la URL esatta della vostra homepage...
Un altro trucchetto interessate è quello che consente ai vostri utenti di memorizzare il vostro sito tra i preferiti cliccando su un semplice link. Qui di seguito il codice javascript da inserire nell'intestazione della vostra pagina web (tra <head> e </head>):

<script language="Javascript">
var bookmarkurl="http://www.mrwebmaster.it"
var bookmarktitle="Mr. WebMaster"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>

Ora nel corpo della pagina web (tra <body> e </body>) inseriamo questo semplice link:

<a href="javascript:addbookmark()">Aggiungi ai preferiti</a>

Link per aggiungere ai Preferiti il nostro sito
<a href="javascript:window.external.AddFavorite('http://www.nome.it','TITOLO PAGINA')">Inserisci la mia pagina nei preferiti</A>

Richiamo di animazioni flash
<OBJECT id="C375725332" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" WIDTH=140 HEIGHT=120>
<PARAM NAME=movie VALUE="http://adv-banner.libero.it/banners/flash/C3757/Scenic_home.swf"> <PARAM NAME=quality VALUE=high><PARAM NAME="wmode" VALUE="transparent">
<EMBED name=C375725332 swLiveConnect="true" src="http://adv-banner.libero.it/banners/flash/C3757/Scenic_home.swf" quality=high WIDTH=140 HEIGHT=120 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>


I caratteri speciali
Questa tabella elenca i riferimenti di carattere numerici e quelli di entità di carattere che possono essere utilizzati con la codifica di carattere ISO-8859-1 (ISO-Latin-1).
Non tutti i browser sono in grado di visualizzare tutti i caratteri e alcuni di essi possono persino visualizzarne di diversi da quelli elencati nella tabella. I browser più recenti supportano meglio questi riferimenti di carattere, ma vi raccomandiamo di controllare i vostri documenti con più browser se desiderate utilizzare tali riferimenti.

Carattere Riferimento di carattere numerico Riferimento di entità di carattere Descrizione
" &#34; &quot; Virgolette
& &#38; &amp; Ampersand
< &#60; &lt; Minore di
> &#62; &gt; Maggiore di
  &#160; &nbsp; Spazio non-interruzione
¡ &#161; &iexcl; Punto esclamativo invertito
¢ &#162; &cent; Segno cent
£ &#163; &pound; Simbolo Sterlina
¤ &#164; &curren; Simbolo valuta
¥ &#165; &yen; Simbolo Yen
¦ &#166; &brvbar; ou &brkbar; Barra spezzata
§ &#167; &sect; Segno di sezione
¨ &#168; &uml; ou &die; Umlaut o dieresi
© &#169; &copy; Segno di Copyright
ª &#170; &ordf; Ordinale femminile
« &#171;   Aperte virgolette
¬ &#172; &not; Segno di not logico
­ &#173; &shy; Trattino
® &#174; &reg; Marchio commerciale registrato
¯ &#175; &macr; ou &hibar; Macron spaziatura
° &#176; &deg; Segno di grado
± &#177; &plusmn; Segno più-meno
² &#178; &sup2; Esponente 2
³ &#179; &sup3; Esponente 3
´ &#180; &acute; Accento acuto
µ &#181; &micro; Segno micro
&#182; &para; Segno paragrafo
· &#183; &middot; Punto medio
¸ &#184; &cedil; Cediglia
¹ &#185; &sup1; Esponente 1
º &#186; &ordm; Ordinale maschile
» &#187; &raquo; Chiuse virgolette
¼ &#188;   Un quarto
½ &#189;   Un mezzo
¾ &#190;   Tre quarti
¿ &#191; &iquest; Punto di domanda invertito
À &#192; &Agrave; A accento grave (maiuscolo)
Á &#193; &Aacute; A accento acuto (maiuscolo)
 &#194; &Acirc; A accento circonflesso (maiuscolo)
à &#195; &Atilde; A tilde (maiuscolo)
Ä &#196; &Auml; A umlaut (maiuscolo)
Å &#197; &Aring; A cerchio (maiuscolo)
Æ &#198; &AElig; Legatura AE (maiuscolo)
Ç &#199; &Ccedil; C cediglia (maiuscolo)
È &#200; &Egrave; E accento grave (maiuscolo)
É &#201; &Eacute; E accento acuto (maiuscolo)
Ê &#202; &Ecirc; E accento ciconflesso (maiuscolo)
Ë &#203; &Euml; E umlaut (maiuscolo)
Ì &#204; &Igrave; I accento grave (maiuscolo)
Í &#205; &Iacute; I accento acuto (maiuscolo)
Î &#206; &Icirc; I accento circonflesso (maiuscolo)
Ï &#207; &Iuml; I umlaut (maiuscolo)
Ð &#208; &ETH; ou &Dstrok; Lettera latina ETH (miuscolo)
Ñ &#209; &Ntilde; N tilde (maiuscolo)
Ò &#210; &Ograve; O accento grave (maiuscolo)
Ó &#211; &Oacute; O accento acuto (maiuscolo)
Ô &#212; &Ocirc; O accento circonflesso (maiuscolo)
Õ &#213; &Otilde; O tilde (maiuscolo)
Ö &#214; &Ouml; O umlaut (maiuscolo)
× &#215; &times; Segno di moltiplicazione
Ø &#216; &Oslash; O barra
Ù &#217; &Ugrave; U accento grave (maiuscolo)
Ú &#218; &Uacute; U accento acuto (maiuscolo)
Û &#219; &Ucirc; U accento circonflesso (maiuscolo)
Ü &#220; &Uuml; U umlaut (maiuscolo)
Ý &#221; &Yacute; Y accento acuto (maiuscolo)
Þ &#222; &THORN; Lettera latina THORN (maiuscolo)
ß &#223; &szlig; sharp s
à &#224; &agrave; a accento grave (minuscolo)
á &#225; &aacute; a accento acuto (minuscolo)
â &#226; &acirc; a accento circonflesso (minuscolo)
ã &#227; &atilde; a tilde (minuscolo)
ä &#228; &auml; a umlaut (minuscolo)
å &#229; &aring; a cerchio (minuscolo)
æ &#230; &aelig; Legatura ae (minuscolo)
ç &#231; &ccedil; c cediglia (maiuscolo)
è &#232; &egrave; e accento grave (minuscolo)
é &#233; &eacute; e accento acuto (minuscolo)
ê &#234; &ecirc; e accento circonflesso (minuscolo)
ë &#235; &euml; e umlaut (minuscolo)
ì &#236; &igrave; i accento grave (minuscolo)
í &#237; &iacute; i accento acuto (minuscolo)
î &#238; &icirc; i accento circonflesso (minuscolo)
ï &#239; &iuml; i umlaut (minuscolo)
ð &#240; &eth; Lettera latina eth (minuscolo)
ñ &#241; &ntilde; n tilde (minuscolo)
ò &#242; &ograve; o accento grave (minuscolo)
ó &#243; &oacute; o accento acuto (minuscolo)
ô &#244; &ocirc; o accento circonflesso (minuscolo)
õ &#245; &otilde; o tilde (minuscolo)
ö &#246; &ouml; o umlaut (minuscolo)
÷ &#247; &divide; Segno di divisione
ø &#248; &oslash; o barra (minuscolo)
ù &#249; &ugrave; u accento grave (minuscolo)
ú &#250; &uacute; u accento acuto (minuscolo)
û &#251; &ucirc; u accento circonflesso (minuscolo)
ü &#252; &uuml; u umlaut (minuscolo)
ý &#253; &yacute; y accento acuto (minuscolo)
þ &#254; &thorn; Lettera latina thorn (minuscolo)
ÿ &#255; &yuml; y umlaut (minuscolo)

Risorse HTML per WebMaster
http://www.html.it
http://www.acejs.com/
http://www.ceptive.it/
http://www.webmasterfree.com/
http://www.webmasterpoint.org/home.asp
http://www.forumfree.net/index.php
http://sourceforge.net/
http://www.no-ip.com
http://www.guidainlinea.com/  
http://web-link.it/ (molto buono)

http://www.wintricks.it/index.shtml
http://www.hotscripts.com/ (molto buono)
http://www.free-webmaster-tools.com/
http://www.w3schools.com/
http://www.webstyling.it/
http://www.buttongenerator.com/ 

http://www.javascript-fx.com/
http://www.adfreebanner.net/ (creare banner pubblicitari) 
Tutto webmaster http://www.sassidesign.it/
http://www.tutorialweb.org/
http://sitoutileweb.altervista.org/

http://www.moddingworld.net/
http://www.tutorialweb.org/
http://www.jacoz.net/home.html
http://www.agwebsolutions.it/
http://www.telospiego.it/
http://www.gdesign.it/
http://tools.mrwebmaster.it/ (Tools from Mr. Webmaster)
http://www.manuali.net  http://www.manuali.it
http://www.risorse.net
http://www.fare-web.it
http://www.scriptando.it
http://www.tutorials.it
http://openwebdesign.org/
http://www.javascriptkit.com/
http://www.dynamicdrive.com
http://www.zapatec.com  (java menu maker)
http://www.newbie.it
http://www.allwebfree.it/ (******* raccolta di scripts)
http://www.greencow.se/jsc_index.shtml (java Script collector)
http://wiz.homelinux.net/ (*****)
http://www.realapplets.com/ (applets di vario genere, FREE!)
ComeFaccio: http://www.comefaccio.net/index.php
http://www.paginainizio.com/webmaster/elenco_tools.htm - http://www.paginainizio.com/servizi.htm
IconExperience: Raccolta di icone http://www.iconexperience.com/

http://www.morpheusweb.it/
http://www.abaconline.com/it/galleria/links.php

Corso per webmaster, W3School Online: http://www.w3schools.com

Galleria Fotografica
http://www.photoonweb.com/it/

Minishowcase: minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes. http://minishowcase.net/

Creazione di thumbnail online http://quickthumbnail.com/ (********)

Statische web: www.shinystat.com/it/
http://www.html.it/dossier/12_stat/index.html
http://www.statistiche.ws/index.asp (**********)
Strumenti per il web:
http://www.mistergratis.it/internet.htm
http://www.freeonline.org/
Strumenti gratuiti per webmasters dilettanti:
http://www.psicopolis.com/webmasters/franbellizzi/indice.htm
Chat:
http://www.mondochat.it/communities.htm
Gif Animate:
http://gifanimate.html.it
Risorse multiple:
sfondi, pulsanti, linee, gi animate, ecc: http://www.asbafo.net/
http://www.migliorsito.com/migliori_siti/webmaster.shtml
http://www.dituttogratis.com/
http://www.web-link.it/
http://www.giorgiotave.it/
http://www.stylweb.it/
http://www.animationfactory.com/
Icone: http://www.comefaccio.net/icone/ 

Sezione PHP del mio sito: Vedi

Apache
http://www.apache.org/
Apache SSL
http://www.apache-ssl.org/
OpenSSL
http://www.openssl.org/
OpenSSH
http://www.openssh.org/
Postfix
http://www.postfix.org/
MySQL
http://www.mysql.com/
vsftpd (solo piattaforma *nix)
http://vsftpd.beasts.org/
ProFTPD
http://www.proftpd.org/

Open Source Web Design
It is a site to download free web design templates and share yours with others. We help make the internet a prettier place.
http://www.oswd.org/

http://www.coolhomepages.com/

http://wiz.homelinux.net/

Tutti i colori in esadecimale: 136 colori, nome dei colori, tutti i colori
http://assistenza.tiscali.it/spazioweb/guida_html/articoli/colori/colori.html

Tags: http://www.willcam.com/cmat/html/crossref.html
http://www.web-source.net/html_codes_chart.htm
(http://www.web-source.net/html_tips.htm)
http://webmaster.lycos.it/references/html/all.phtml

http://www.google.it/intl/it/webmasters/ (Come inserire i dati per essere trovati in Google)

http://assistenza.tiscali.it/spazioweb/contatori/

Guida all'indicizzazione su Google: http://www.homolaicus.com/linguaggi/guida/index.htm

Free fonts http://www.webpagepublicity.com/free-fonts.html

Creare finestre di popup http://queen.rett.polimi.it/~ant/webutils/window_creator.html oppure usa questa
                                             oppure http://www.accessify.com/tools-and-wizards/accessibility-tools/pop-up-window-generator/default.php

Creare menu http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp (online)
                        http://e-lusion.com/design/menu/ (online con download)

Java Hot Potatoes 6.0.2.10
Basata su Java, Hot Potatoes è una suite composta da sei applicazioni utili per la creazione di quiz e test delle tipologie più diffuse.
Scarica qui

FeldFunker Software
http://www.feldfunker.de/software.htm
freeware Releases:
Now, this is what most of you might have come for - my freeware colllection. All my software is freeware, however, I won't mind if you donate a few bucks to me in order to encourage further free releases. ;-)
Ok, here's the downloads:
Gallery Wizard (http://www.feldfunker.de/software/galwiz.htm)
- a HTML Gallery creation tool
Splitz (http://www.feldfunker.de/software/splitz.htm)
- another HTML tool - split large images into smaller ones for tables
Buttonz & Tilez (http://www.feldfunker.de/software/bt.htm)
- graphic tool for rendering buttons and seamless background tiles
Another Lens (http://www.feldfunker.de/software/lens.htm)
- small tool that shows a magnified view of the screen
Kaos Rhei (http://www.feldfunker.de/software/kr.htm)
- renders beautiful fractal images
Just Notes! (http://www.feldfunker.de/software/justnotes.htm)
- small notetaking tool
Tray-HQ (http://www.feldfunker.de/software/hq.htm)
- swiss army knife: note taking tool, clipboard manager and more...

HTML and CSS Table Border Style Wizard http://www.somacon.com/p141.php

* HTML and CSS Table Border Style Wizard - http://www.somacon.com/p141.php
* CSS Font and Text Style Wizard - http://www.somacon.com/p334.php
* CSS Color Chart - http://www.somacon.com/p143.php
* Javascript Get or Set Checked Radio Value - http://www.somacon.com/p143.php
* How to Alternate Table Row Colors in CSS and HTML - http://www.somacon.com/p338.php
* Javascript Function to Check or Uncheck all Checkboxes - http://www.somacon.com/p117.php
* Redirection with HTTP 301 via PHP, ASP, Javascript, and Meta - http://www.somacon.com/p145.php
* How to Resolve an HTTP 405 Resource not allowed Error in IIS - http://www.somacon.com/p126.php
* Favicon Icon Drawing Program Online Free - http://www.somacon.com/p44.php
* Java Auto-Completing Combobox Applet - http://www.somacon.com/p51.php
* Real World Switch from IE to Firefox - http://www.somacon.com/p134.php
* Javascript Autocompleting Combobox Example - http://www.somacon.com/p39.php

Siti web gratuiti

Indirizzo Lingua Spazio Web Servizio
http://www.altervista.org italiano Illimitato
http://mionome.altervista.org
FTP, PHP, Mysql, Banner a pagamento, Forum
http://www.netcat.it italiano 50 Mb
http://users.netcat.it/mionome
FTP, PHP, Mysql, Banner a pagamento, Forum
http://www.7host.it inglese 50 Mb
http://mionome.7host.com
FTP, Browser, Banner pubblicitario
http://www.70megs.com inglese 70 Mb
http://www.70megs.com/mionome
FTP, Banners a pagamento
http://bootbox.net inglese 10 Mb
http://mionome.bootbox.net
Webmail, Banners a pagamento, FTP
http://www.lycos.it italiano Illimitato (?) MySql, FTP

Free Host

Nome Offerta

Hoster

Indirizzo Offerto

Spazion Mb

E-mail

Script Supportati

7Host

www.7host.com

http://tu.7host.com

50

No

Asp, Perl, Ssi, Odbc

Altervista

www.altervista.org

http://tu.altervista.org

Illimitato

Alias

Php, MySQL, Ssi

Teen for Fun

www.teenforfun.net

http://www.teenforfun.net/public/web/tu

Illimitato

No

Php, Asp, Access

Xoasis

www.xoasis.com

http://tu.xoasis.com

20

Si

Php, Ssi, Cgi

Ehadoti

Is.netster.com

http://tu.eHadoti.com

15

Webmail

Cgi, Perl, Php, Ssi

Cold-Fusion

www.cold-fusion.it

http://www.cfhosting.it/tu

15

No

Coldfusion

Bbk

www.bbk.it

http://www.tuonome.bbk.org

Illimitati

Pop3

Perl

70 Megs

70megs.com

http://www.70megs.com/tu

70

No

Php, Ssi

JcHosting

www.jc-hosting.co.uk

http://www.jc-hosting.co.uk/users/tu

30

No

Php, Cgi, Perl

MySiteSpace

www.mysitespace.com

http://tu.mysitespace.com

20

No

Nessuno

MyCgiServer

www.mycgiserver.com

 

3

 

Cgi, Perl, Php, Jsp, Ssi, Jssi, Wap

Spcnet.it
Hosting di alta qualità gratis. Dal loro sito: "Il servizio fornisce all'utente un indirizzo del tipo: www.spcnet.it/tuonome, dal quale sarà raggiungibile il proprio sito e i propri file; Il servizio prevede uno spazio su server ILLIMITATO per inserire i propri file con interfaccia utente per l'amministrazione, semplice, intuitiva e in Italiano; Ogni utente gode inoltre di un database MySql, anch'esso ILLIMITATO, attivato al momento stesso dell'iscrizione, amministrabile grazie all'utilizzo dei più recenti pannelli di controllo per MySql DB in Italiano (multilingua): phpMyAdmin Versione 2.6.0; Nel proprio Host, l'utente, trova anche il supporto per un linguaggio server-side per programmare applicazioni Web dinamiche di alto livello: PHP Versione 4.3.10 (linguaggio server-side per eccellenza grazie alla sua flessibilità e sicurezza); Nuovissimi contatori che ognuno può inserire tra le pagine del proprio sito: SpC Counters."

Spazio web gratuito illimitato su Altervista
AlterVista è una comunità virtuale che offre spazio illimitato alla tua creatività e in più offre veramente un buon servizio. L'indirizzo che offre al tuo sito è tuonickname.altervista.org, supporta Php, MySQL, SSI. upload via FTP.

Freeware

Amaya http://www.w3.org Web editor
Arachnophilia http://www.arachnoid.com Web editor
NVU http://www.nvu.com Web editor
WebCoder http://www.webcoder.kiev.ua Editor vari linguaggi
1st Page 2000 http://www.evrsoft.com Editor vari linguaggi
Alleycode http://www.alleycode.com Editor vari linguaggi
HTML Kit http://www.chami.com Editor vari linguaggi
Color Lab http://www.blueknot.com Editor colori
Color Picker http://www.colorpicker.com Editor colori
Photo2Web Publisher
is an useful program that allows you to easy publish photos on your website. It create thumbnails, resize photos and generate HTML pages
http://www.softboard.net/ Grafica
PhotoView
is an easy and compact photo viewer for Windows. It allows you to view and organize your digital photos easily and comfortably.
http://www.softboard.net/ Grafica
Gif Animator Plus (free)

Scarica qui

 

.htaccess Password Generator
http://tools.dynamicdrive.com/password/

programmi free per scrivere html:
mozilla suite: http://www.mozillaitalia.org/archive/altro.php?id=9
NVU : http://www.mozillaitalia.org/archive/altro.php?id=9
arachnophilia : http://www.arachnoid.com/arachnophilia/
PSPad : http://www.pspad.com/en/
html gate : http://www.mpsoftware.dk/htmlgate.php
superEdi : http://www.wolosoft.com/en/superedi/
crimson editor : http://www.crimsoneditor.com/
amaya per i piu' rigorosi (editor e browser) : http://www.w3.org/Amaya/
notepad++ : http://notepad-plus.sourceforge.net/it/site.htm
scintilla.org : http://www.scintilla.org/
HTML-kit (free nella versione base, a pagamento nella versione avanzata) : http://www.chami.com/html-kit/
weaverslave : http://www.weaverslave.ws/weaverslave.31.html
easy html : http://personal.inet.fi/business/toniarts/ehtmle.htm
1st page 2000 e qui la guida : http://www.evrsoft.com/ - http://www.html.it/1stpage/
easy html to any script converter 1.4.0 utility per convertire codice/file HTML in uno script ASP, C#, JSP, JavaScript, PHP, Perl, Python, Ruby, VB e VBScript (probabilmente non molto accurato, ma accettabile per chi deve convertire saltuariamente senza dover imparare tutto) : http://www.easyhtools.com/ehsdescription.html

editor per linux:
quanta plus (per linux) : http://quanta.kdewebdev.org/

editor per mac:
subethaedit : http://www.codingmonkeys.de/subethaedit/
smultron : http://smultron.sourceforge.net/

multilinguaggio:
context : http://context.cx/content/view/18/41/

per ripulire html scritto con word:
word cleaner (free per files leggeri - 20kb - a pagamento per files piu' pesanti) : http://textism.com/wordcleaner/

per i css:
top style lite : http://www.bradsoft.com/download/index.asp
cssed : http://cssed.sourceforge.net/
cascade dtp : http://www.price-media.demon.co.uk/cascade.html

per php:
php designer 2005 : http://www.mpsoftware.dk/phpdesigner.php
dev php : http://devphp.sourceforge.net/
syn : http://syn.sourceforge.net/

per java:
jedit : http://www.jedit.org/

browser per testare i siti:
firefox : http://www.mozillaitalia.org/firefox/download.html
opera : http://www.opera.com/download/

browser testuale:
lynx viewer : http://www.delorie.com/web/lynxview.html

strumenti per webdesigner:

AIS web accessibility toolbar per internet explorer : http://www.nils.org.au/ais/web/resources/toolbar/
web developer toolbar per firefox : https://addons.update.mozilla.org/extensions/moreinfo.php?id=60

validatori del w3c, il consorzio che detta le linee guida per i linguaggi del web : http://www.w3.org/QA/Tools/#validators

le principali (ulteriori) estensioni per firefox/mozilla:
ColorZilla è un'estensione che permette di sapere esattamente quel'è la tripletta di valori che compongono il colore sotto il mouse : https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=271

CuneAForm è un ottimo editor in linea, per modificare rapidamente le nostre pagine dal Web, ottimo se si devono fare modifiche al volo, magari durante una sessione di FTP.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=267

EditCSS edita in una barra laterale del browser il foglio di stile associato alla pagina, molto buono per capire come è stato realizzato un sito.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=179

FANG Emulator Ottimo sistema a basso costo, per "vedere" come uno screen reader legge il nostro sito, comodo se si decide di sviluppare un sito accessibile anche ai non vedenti.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=402

HTML Tidy Validator Davvero un'ottima estensione che accomuna al visualizzatore di sorgente della pagina, l'ottimo validatore di Dave Ragget.
Ha un solo difetto, lo possono usare solo coloro che hano un sistema Microsoft Windows.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=249

InspectorWidget per vedere il funzionamento del DOM (Documento Object Model), nel caso che avessimo usato queste peculiarità, è bene sapere dove esse vanno a parare
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=63

Link Checker per controllare se i link siano esatti e non puntino a risorse sballate.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=532

Table Inspector, ancora accessibilità ed ancora uno strumento utile per vedere se le tabelle che abbiamo usato si linearizzano bene, dando la possibilità anche ad uno screen reader di leggerne i contenuti.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=464

View Source With che permette di impostare vari editor predefiniti (io uso bluefish e gvim) con i quali aprire una pagina. E' facile da qui costruirsi il proprio ambiente intergrato.
https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=394

estensioni firefox per bloggers:

extensions per bloggers
https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&category=Blogging

strumenti per controllare i link:
xenu's link leuth : http://home.snafu.de/tilman/xenulink.html
link status : http://linkstatus.paradigma.co.pt/en/
gurl checker (per linux) : http://gurlchecker.labs.libre-entreprise.org/
link valet (controllo on line) : http://www.htmlhelp.com/tools/valet/

programmi free di grafica:

gimp : http://www.gimp.org/downloads/
photofiltre : http://www.photofiltre.com/

per disegnare ascii art:
jave (e non dimenticate la cartolina all'autore!) http://www.jave.de/

per scritte in stile graffiti:
graffiticreator.net (leggere bene i termini d'uso) : http://www.graffiticreator.net/

font gratuite:

qui alcuni link : http://forum.zeusnews.com/viewtopic.php?t=5349

contrasto colori:
sara' sufficiente? scopritelo qui : http://juicystudio.com/services/colourcontrast.php

discussioni interessanti:

commenti alle segnalazioni programmi free di questo thread : http://forum.zeusnews.com/viewtopic.php?t=6089

immagini:
siti dove caricare gratuitamente le proprie immagini : http://forum.zeusnews.com/viewtopic.php?t=5701
siti dove scaricare gratuitamente immagini da usare liberamente (occhio ai regolamenti!) : http://forum.zeusnews.com/viewtopic.php?t=14107

Layout o matic per creare il proprio layout e ottenendolo pronto da usare con tanto di css impostati...per novizi ovviamente : http://www.inknoise.com/experimental/layoutomatic.php

Listamatic raccolta di esempi e tecniche di menu basati su liste : http://css.maxdesign.com.au/listamatic/index.htm

List-o-matic una sorta di wizard online per creare velocemente menu con liste : http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp

Free Menù Design raccolta di menu by Css pronti da scaricare.. : http://e-lusion.com/design/menu/

CSS Color Chart tabella colori : http://www.somacon.com/p142.php

korhoen typeviewer una pagina interattiva..al centro un testo, in alto alcune opzioni per vedere il testo in diverse soluzioni, font, allineamento, grassetto, corsivo, ecc.ecc. : http://www.korhoen.net/css_typeviewer.html

Special Characters in HTML i caratteri speciali nell'html : http://www.degraeve.com/reference/specialcharacters.php

Simple Code per "trasformare" automaticamente e velocemente una porzione di codice in modo che il browser non la interpreti [per mostrare ad esempio linee di codice in una pagina web..] : http://www.simplebits.com/cgi-bin/simplecode.pl?mode=process

Css Tab designer utility free : http://www.highdots.com/css-list/index.php

WebShare:
WebShare è un progetto open source scritto in Ajax/PHP creato per gestire e amministrare i documenti ospitati su un server FTP. Come tutti i browser classici, gli elementi sono presentati con le icone classiche e menu contestuali permetteno la gestione di tutto.
Webshare permette inoltre di trasferire facilmente archivi voluminosi tra un pc all'altro.
http://www.webshare.fr/

WebGallery Programs http://graphicssoft.about.com/od/webgalleryfreepc/ - http://graphicssoft.about.com/od/webgallery/Web_Photo_Gallery_Creation_and_Automation_Tools.htm

JAlbum - free web photo album software: http://jalbum.net/
Web Album Generator 
http://www.ornj.net/ (*******)
WebGallery http://www.web-album.org/ (*********** Ottimo! Ha una sezione di gestione protetta da password).
Flash Slide Show Maker http://www.flash-slideshow-maker.com/ (*******)
SmoothGallery: http://smoothgallery.jondesign.net/ (*******)
AlbumBurger:
http://www.albumburger.com/en/index.asp
Porta - generatore di album web : http://www.stegmann.dk/mikkel/porta/  (*******)
Minos Album (***************) Album in Flash.
Turn your photo collections into 3D realistic page-flipping music albums.
Managing Photos into a 3D realistic page-flipping music album. Minos album can make for you any type of e-publication including e-brochures, e-books, digital photo albums. Functionalities embrace page-flipping, thumbnails, enlarging photos, printing photos, stand alone execution file compiling, web embedding, adding music, adding icon for output executable files, photo jpeg quality control, compression album as .zip file, adjust flipping speed, password protection, centerfold mode and adding text on pages. It is based at 3D photo album freeware version.
http://www.minosalbum.com
Dynalbum is a fully dynamic automatic Web photo album generator. The album includes an index page with thumbnails, navigation tools on each album page, and four sizes of each picture. The entire album is dynamically generated from a directory of JPEGs, TIFFs, PNGs, and GIFs when it is accessed. Unlike other photo album generators, it doesnt clutter files with thumbnails and static HTML. DynAlbum generates each page and each scaled image (including thumbnails) dynamically every time it is accessed. This means that theres no need to keep static copies of anything but the original pictures. INSTALLATION: Copy the dynalbum.py program to the file "index.py" in your image directory. You need to enable mod_python for this directory. This can be accomplished either in your httpd.conf (/etc/httpd/conf/httpd.conf or /etc/httpd/conf.d/python.conf) or in a ".htaccess" file. The .htaccess file is placed in your image and adusts web server parameters for that directory. In order to use a .htaccess file you may need to enable support using the "AllowOverride" directive in the global apache configuration. httpd.conf example: DirectoryIndex index.py AddHandler python-program .py PythonHandler mod_python.publisher PythonInterpPerDirectory On .htaccess file example: DirectoryIndex index.py AddHandler python-program .py PythonHandler mod_python.publisher PythonInterpPerDirectory On and change the relevant instance of "AllowOverride None" in httpd.conf to "AllowOverride All" to enable .htaccess support in Apache. Whats New in This Release: · Generates multi-page image indexes · Dynamically generates ZIP archives.
http://thermal.cnde.iastate.edu/~sdh4/dynalbum/ 
Coppermine (Gallery generator): http://coppermine-gallery.net
Pranas Web Gallery Creator: http://pranas.net/webgallerycreator/
Photo studio: http://www.stuffware.co.uk/photostudio/
NGallery: http://www.ngallery.org/default.aspx
Limon Photo Album: http://members.jcom.home.ne.jp/mtpsoft/limon/
Xibit: http://www.klingebiel.com/tempest/hd/Xibit.htm
Web Picture Creator: http://www.webpicturecreator.com
Gallery Wizard http://www.snapfiles.com/get/galwizard.html
XML Photo Album Generator
Con questo programma si potranno creare gallerie di immagini per i siti web.
http://xmlalbum.sourceforge.net
Raccolta di programmi per generare raccolte fotografiche: http://graphicssoft.about.com/od/webgalleryfreepc/
MyPicture 3D: http://www.mypictures3d.com/

Snaplog Photo Blogger: http://snaplog.com/
What is SnapLog
Snaplog is a Windows photo blog application that runs on your desktop. Snaplog resizes your images, creates the HTML pages and uploads everything to your website when you publish.
Do I need a website to use Snaplog?
Yes. You must have a website with FTP access. Snaplog uses FTP to upload you photo blog to the web.
What are the PC requirements to run DocTagger?
To use Snaplog you must have Microsoft Windows 2000 or XP.

ThumbaWumba
Publishing your own photocollections on the web can be a real headache, especially if the software you are using lacks the functionality you need. I have written a small program named “ThumbaWumba”. It lets you specify a Source Directory, where your JPEG and / or BMP Sourcefiles are stored and a destination folder, where thumbnails, photos and websites are to be saved. Next you click the “Run”-Button and that’s it!

Download Thumba Wumba 1.2

Advanced DHTML Popup
Crea finestre pubblicitarie (popup) in DHTML
(richeide il pagamento di una cifra modica).
http://www.dpopup.com

HTML Slide Show Wizard
This wizard helps you create an HTML slide show of your digital pictures, ready to place on your Web site
http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx
http://www.softpedia.com/get/Authoring-tools/Digital-Album/Microsoft-HTML-Slideshow-Wizard.shtml

Scambio Banner
Banner Gratis    http://www.bannergratis.it
Banner Planet    http://www.advertpower.com
Bpath Network http://italia.bpath.com
Click Point        http://www.clickpoint.it
La borsa dei banner    http://www.bbanner.it
Newclick.com   http://www.newclick.com
Punto Banner    http://www.puntabanner.net
Tuttonet_BNM    http://www.tuttonet.com