PREAMBOLO:
innanzitutto vorrei ringraziare tutti quelli che mi stanno spronando a continuare
nella *manutenzione* di questa FAQ, e a quelli che mi segnalano nuovi quesiti
da risolvere, e in qualche caso anche le risposte già pronte.
Vorrei ricordarvi che questa FAQ è ancora in fase "beta" (e penso che lo rimarrà
per molto ;), ), ovvero è molto probabile che ci siano degli errori. Non esitate
a segnalarmeli, questa FAQ deve diventare un documento utile soprattutto grazie
al vostro aiuto.
-------------------
19.06.2000 (v 1.1b)
-------------------
Questa FAQ è redatta e mantenuta da andrea/bergamasco
[ a.berga chiocciolina libero.it ]
Questo documento è disponibile in formato TXT, HTML e HTML zippato, potete trovare
la versione più aggiornata all'interno del sito web: http://digilander.iol.it/tamburo/
Se volete contribuire alle FAQ inviate la vostra proposta direttamente sul newsgroup
usando come subject [FAQ - proposta] seguito dal titolo della FAQ.
-------------------
Questa FAQ è nata e cresciuta anche grazie al prezioso contributo di (in ordine
sparso):
Airwolf [http://airdario.fly.to/]
Marco [marcomoretti.geo chiocciolina yahoo.com]
9 of Nine [clous chiocciolina freemail.it]
Visual Vision [http://visualvision.it/]
Goldrake75 [goldrake75 chiocciolina libero.it]
Aldo [http://digilander.iol.it/iw6ang]
Ghizza [http://go.to/ghizza]
ThE PhUsHeR [ ? ]
EagleStorm M.C. [eaglestorm chiocciolina iname.com]
S Z 1 [superzuno chiocciolina hotmail.com]
Luigi [amadoco chiocciolina freemail.it]
FABIO FW :-P [fabio-raffaeli chiocciolina libero.it]
Pippo [pippopd chiocciolina iol.it]
Marco [Vadilonga.Marco chiocciolina enel.it]
DJeF! [djef chiocciolina crosswinds.net]
-------------------
Altre risorse che sono state consultate durante la redazione di questo documento:
W3C [http://www.w3.org/]
news:comp.infosystems.www.authoring.htmle
relativa FAQ
Htmlhelp [http://www.htmlhelp.com/]
Tucows [http://html.tucows.com/]
IRT [http://www.irt.org/]
-------------------
STORIA
[01.04.2000] (v.0.0) Nasce il sito delle FAQ http://digilander.iol.it/tamburo/
[22.05.2000] (v.0.1b) Prima versione delle FAQ in un unico file
[24.05.2000] (v.0.2b) Aggiunto punto 7 nella faq 12.1; aggiunte le faq 3.4 e
4.4
[31.05.2000] (v.0.3b) Aggiunte le faq 1.8, 3.5, 4.5, 4.6 e 6.5; aggiornate le
faq 2.3 e 6.3
[03.06.2000] (v.0.4b) Aggiunte le faq 1.9, 3.6, 3.7, 5.1 e 12.7
[04.06.2000] (v.0.5b) Aggiunte le faq 7.2, 9.2, 9.3, 9.4
[06.06.2000] (v.0.6b) Correzioni varie
[08.06.2000] (v.0.7b) Aggiunte le faq 1.10, 2.6, 3.8, 12.8 e 12.9
[10.06.2000] (v.0.8b) Aggiunta la faq 10.2
[12.06.2000] (v.0.9b) Aggiunta la faq 9.5
[18.06.2000] (v.1.0b) Aggiunta un bel po' di roba ;),
[19.06.2000] (v.1.1b) Corrette le FAQ 3.1 e 3.5, aggiunta la FAQ 5.3
-------------------
iframe?
BIBLIOGRAFIA
FAQ - Le Regole d'Oro per i nuovi utenti (v.1.23) [news:it.faq]
a cura di Vittorio Bertola
MiniFAQ di it.hobby.giochi.gdr [news:it.faq] a cura di Telstar
Il Galareteo di Emily Postnews - versione 2.01 a cura di Carlo Maria Chierotti
La FAQ di it.news.aiuto v 2.03 del 09/03/2000 [news:it.faq]
a cura di Carlo Fusco
HyperText
Markup Language, ovvero "Linguaggio di marcatura per ipertesti".
E' il linguaggio standard per la realizzazione di ipertesti destinati al World
Wide Web. Si compone di tag (marcatori) racchiusi fra i segni < e >, ogni
tag ha determinati attributi ai quali vengono associati dei valori specifici.
Il W3C (www.w3.org), ovvero il consorzio che definisce gli standard dell'HTML
ha stabilito che dalla versione 4.01 in poi per motivi di compatibilità i tag
dovranno essere scritti tutti con lettere minuscole ed i valori assegnati agli
attributi dovranno essere racchiusi fra virgolette.
I
commenti vanno strutturati nel seguente modo: si apre un tag <!
seguito da uno o più commenti e lo si chiude con >. I commenti
vanno inclusi fra due --.
Ecco una serie di esempi:
<!--
Questo è un commento -->
<!-- Questo è -- -- un commento -->
<!---->
<!------ Un altro commento -->
<!>Si, ma bisogna fare attenzione perché i fogli stile vengono commentati come il codice JavaScript, ovvero ci sono due modi per farlo:
//
Questo è un commento
// su una sola riga
/* Questo può essere lungo quanto si desidera,
l'importante è ricordarsi di chiuderlo con */Per controllare se ci sono errori come prima cosa è bene visualizzare la pagina sia con Internet Explorer che con Netscape. Se si dispone anche di altri browser è bene usarli.
Dopo
aver fatto un primo collaudo è una buona abitudine quella di usare un validatore,
ovvero un programma che controlla il codice ed evidenzia errori ed incompatibilità.
Ci sono sia software (anche gratuiti) che servizi on-line. Il validatore on-line
più famoso (e più rigoroso!) è quello del W3C (validator.w3.org).
Se cercate dei software usate la parola-chiave "HTML validator".
Naturalmente esistono molti software visuali o semi-visuali con i quali si lavora con un'interfaccia simile a quella di un normale programma di desktop-publishing. I più famosi sono:
Macromedia
DreamWeaver [http://www.macromedia.com/] (C) (D)
Microsoft FrontPage [http://www.microsoft.com/frontpage/] (C) (D)
Allaire HomeSite [http://www.allaire.com/] (D)
1st Page 2000 [http://www.evrsoft.com/] (F)
CoffeeCup (S)
iPer Easy Web [http://visualvision.it/] (C) (D)
HotDog (S)
NetObjects Fusion (C) [http://www.netobjects.com/]
Html - Kit (F)
Adobe GoLive [http://www.adobe.com/]
(C)
1-4-All [http://www.mmsoftware.com/]
Legenda: (C) = commerciale, (D) = versione demo disponibile, (S) = shareware, (F) = freeware.
Potete
trovare le recensioni di alcuni editor qui: http://www.risorse.net/software/index.htm.
Rimane però una considerazione da fare: di solito quanto minore conoscenza dell'HTML viene richiesta dal programma, tanto più il codice prodotto sarà "sporco". In altre parole, "a mano" si ottengono sicuramente i risultati migliori per quanto riguarda la qualità del codice, basta avere la pazienza di studiare il linguaggio. Una tecnica adottata da molti webmaster è quella di abbozzare il lavoro con un editor visuale per poi rifinirlo "a mano" in modo da evitare tag ridondanti e spreco di spazio. Ricordiamoci che il codice inutile rallenta il caricamento della pagina, senza contare il rischio di eventuali risultati non voluti nel layout.
Fra .htm e .html sostanzialmente non c'è nessuna differenza. I problemi sorgono quando si deve nominare la prima pagina da visualizzare quando si accede al sito o ad una sottodirectory di esso. Alcuni server preferiscono index.html, altri default.htm, per essere sicuri è meglio chiedere al proprio amministratore del server.
.shtml è l'estensione da dare alle pagine che contengono SSI (Server-Side Include), per fare in modo che il server le interpreti correttamente.
.phtml è l'estensione (assieme a .php3) da dare alle pagine che contengono codice PHP (Hypertext PreProcessor) che il server deve riconoscere e interpretare.
L'HTML
dopo la versione 4.01 si sta evolvendo nella direzione dell'XHTML (EXtensible
Hypertext Markup Language), del quale è già stata rilasciata la versione 1.0.
La versione 4.01 dell'HTML ha aggiornato la vecchia versione 3.2 aggiungendo
il supporto per i frame, l'internazionalizzazione, fogli stile, gestione avanzata
delle tabelle e altro.
Bisogna tenere conto che le indicazioni del W3C
(World Wide Web Consortium) non vengono seguite alla lettera dai produttori
di browser, per questo motivo non è garantito che il supporto sia universale.
È bene quindi collaudare le pagine con più browser per evitare brutte sorprese.
Ecco un po' di materiale da consultare [in inglese]
HTML 4.01
http://www.w3.org/TR/1999/REC-html401-19991224 - La raccomandazione
ufficiale del W3C per l'HTML 4.0.
http://www.htmlhelp.com/reference/html40/ - Un buon punto di riferimento,
contiene annotazioni sulle caratteristiche supportate o meno dai browser e la
lista completa di TUTTI i tag standard.
HTML 3.2 (utile per chi lavora per i browser più vecchi)
http://www.w3.org/TR/REC-html32/- La raccomandazione ufficiale
per l'HTML 3.2.
http://www.htmlhelp.com/reference/wilbur/ - Come sopra ma in una versione
più leggibile ;)
http://www.hut.fi/~jkorpela/HTML3.2/ - "Imparare l'HTML con esempi" di Jukka
Korpela.
HTML supportato dai vari browser
http://www.blooberry.com/indexdot/html/supportkey/ - Una "check
list" che confronta per ogni tag e attributo la relativa compatibilità coni
vari browser, scritta da Brian Wilson.
http://developer.netscape.com/docs/manuals/htmlguid/index.htm
- Tutti i tag supportati da Netscape.
http://msdn.microsoft.com/workshop/author/html/reference/elements.asp
- tutti i tag supportati da Internet Explorer.
http://hotwired.lycos.com/webmonkey/reference/browser_chart/
- una tabella molto utile per confrontare le caratteristiche dei vari browser.
DHTML e' l'acronimo di Dynamic HTML, e si tratta dell'integrazione nell'HTML di tre nuovi elementi che, assieme a JavaScript, rendono possibile la realizzazione di pagine web belle e animate. Questi tre elementi sono i fogli-stile (CSS), il posizionamento dinamico degli oggetti (layer) e i font scaricabili. Mentre i primi due elementi hanno avuto un notevole successo e vengono ampiamente utilizzati dai webmaster, i font scaricabili non sono né conosciuti né utilizzati, forse a causa della scarsa applicazione degli standard da parte dei produttori dei browser più diffusi.
L'XHTML è una riformulazione dell'HTML 4.01 per creare un nuovo linguaggio compatibile con le specifiche dell'XML. I nuovi browser dovranno essere compatibili con queste specifiche. Potete trovare altre informazioni nel sito del W3C: http://www.w3.org/TR/xhtml1/.
Secondo
gli standard dell'HTML dettati dal W3C (WWW Consortium), ogni documento HTML
deve iniziare con una dichiarazione DOCTYPE che specifica quale
versione dell'HTML viene utilizzata all'interno del documento. DOCTYPE
è indispensabile nel caso in cui si decida di far validare le proprie pagine,
poiché i validatori SGML (come quello del W3C) devono conoscere la versione
dell'HTML per poter esaminare il codice. Solitamente i browser ignorano la dichiarazione
DOCTYPE.
Per
scegliere la dichiarazione DOCTYPE appropriata per le vostre pagine
potete visitare il sito:
http://www.htmlhelp.com/tools/validator/doctype.html
Fate
attenzione poiché la dichiarazione DOCTYPE è case-sensitive. Alcune
versioni di Netscape Composer inserivano la dichiarazione in lettere minuscole
"-//w3c//dtd html 4.0 transitional//en" invece della dichiarazione
corretta in maiuscole/minuscole: "-//W3C//DTD HTML 4.0 Transitional//EN".
Ad
esempio, la dichiarazione DOCTYPE della versione HTML di queste
FAQ è:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
1)
Si! Basta usare uno script JavaScript come quello presentato qui sotto. In questo
esempio viene riconosciuto l'italiano e per le altre lingue si viene reindirizzati
alla versione del sito in inglese. Bisogna costruire per ogni lingua una directory,
in questo caso it/ per l'italiano e en/ per l'inglese,
nelle quali la pagina principale è index.html.
<!--
questo codice va inserito nella pagina index.html nella root del sito -->
<html>
<head>
<script>
<!--
// codice di andrea/bergamasco
// [a.berga chiocciolina libero.it]
var NN=0; // Netscape Navigator
var IE=0; // Internet Explorer
var language = "";
var browser = navigator.appName;
if(browser.indexOf("Netscape") != -1) {
NN = 1;
IE = 0; }
if(browser.indexOf("Internet Explorer") != -1) {
NN = 0;
IE = 1; }
if(NN) {
var version = navigator.appversion;
if(version.indexOf("[it]") != -1) {
language="it"; }
else {
language="en"; }
}
if(IE) {
var version = navigator.browserLanguage;
if(version.indexOf("it") != -1) {
language = "it"; }
else {
language= "en"; }
}
function change() {
if(language="it") {
self.location= "./it/index.html";
return true; }
else {
self.location = "./en/index.html";
return true; }
}
// -->
</script>
</head>
<body onLoad="change();">
</body>
</html>
<!-- fine del codice della pagina index.html -->
2)
Con un server web Apache 1.3.x basta chiamare i files nomefile.html.XX
dove XX = it,en,eccetera... Funziona a patto che il browser sia settato in un
certo modo.
Il
modo più semplice è quello di inserire tra i tag <head> e
</head> la seguente riga:
<meta
http-equiv="REFRESH" content="5; URL=http://www.miosito.com/">
dove
nell'esempio 5 è il numero di secondi di attesa e http://www.miosito.com
è l'indirizzo della pagina che verrà caricata al posto di quella che contiene
lo script. Naturalmente è possibile inserire 0 secondi di ritardo e anche l'indirizzo
relativo di una pagina, ad esempio "bin/new.htm"
Per ricaricare la stessa pagina si usa
<meta
http-equiv="REFRESH" content="500">
dove
nell'esempio 500 è il numero di secondi di attesa prima del refresh.
Visto
che non tutti i browser seguono allo stesso modo le indicazioni date nelle intestazioni
è necessario inserire tre meta fra i tag <head>
e </head> della pagina.
<meta
http-equiv="Expires" content="Fri, Jun 12 1981 08:20:00 GMT"><meta
http-equiv="Pragma" content="no-cache"><meta
http-equiv="Cache-Control" content="no-cache">
Questo
codice è utile anche nel caso di una pagina che fa il refresh automatico.
Al posto della data si può inserire una scadenza "fittizzia" per la pagina,
ad esempio:
<meta
http-equiv="expires" content="-1">
in questo modo il browser sarà obbligato a cercarne una nuova versione sul server oppure nel proxy, poiché le date non valide vengono considerate come già passate.
Ci
sono due soluzioni:
1) Inserire il seguente script fra i tag <head> e </head>
della pagina:
<script>
<!-- // semplice ma efficace...
if (window != window.top)
top.location.href = location.href;
// -->
</script>
2)
Usare una pagina di introduzione e linkarla alla homepage vera e propria con
target="_top" nel tag <a href= ...>
<a
href="index2.htm" target="_top">Entra nel sito</a> Non si può: il codice HTML è necessario al browser per poter visualizzare il documento; per questo motivo è necessario inviare al browser dell'utente il codice integralmente senza criptazioni né compressioni di alcun genere.
Anche se alcuni browser non hanno un comando apposito per visualizzare il codice HTML, ce ne sono molti altri che offrono questa possibilità; inoltre è sempre possibile recuperare il file "a mano" usando telnet o recuperandolo dalla cache del browser. Bisogna tener conto anche del fatto che praticamente tutti i browser hanno una funzione che permette di salvare le pagine, le quali possono poi essere aperte con un semplice editor di testi.
Ci sono alcuni trucchetti che possono mettere in difficoltà alcuni utenti nel visualizzare o salvare il codice, ad esempio facendo pensare che non ci sia nulla nel codice sorgente aggiungendo alcune dozzine di righe vuote all'inizio; oppure usando i frame e disattivando il tasto destro del mouse (altro trucchetto discutibile). altri trucchi precludono la visualizzazione della pagina a chi non ha attivato JavaScript. Ricordiamoci però che Netscape con il comando "view source" visualizza il codice JavaScript come già interpretato, quindi anche usando JavaScript con NS si riesce ad accedere all'intero HTML.
Ci sono dei programmini che effettuano una "compressione" del file HTML cancellando spazi vuoti e ritorni a capo. Questo può mettere un po' in difficoltà chi poi vorrà interpretare il codice ma al massimo riuscirà a ritardare il tutto di alcuni minuti, il tempo di ripristinare il file ad una forma più leggibile. Inoltre se l'interessato alla visualizzazione è in grado di programmare, bastano un paio di righe in C e il gioco è fatto. Anche un editor di testi un po' evoluto è sufficiente (anche il classico WordPad è ottimo da questo punto di vista)
Per concludere, come per quanto riguarda i trucchi per proteggere le immagini, queste manovre protettive hanno un'efficacia molto limitata.
La Netscape ha sviluppato il Netscape Signing Tool, che permette di firmare digitalmente le proprie pagine. Potete trovare informazioni nel sito: http://developer.netscape.com/
La protezione più sicura si fa utilizzando l'autenticazione HTTP. I dettagli per la configurazione di questo servizio variano da server a server. È quindi necessario consultare la documentazione del proprio server nella sezione dedicata all'autenticazione ("authentication"). Contattate pure il vostro amministratore di sistema.
Se ad esempio il vostro server è Apache, potete consultare http://www.apache.org/docs/misc/FAQ.html#user-authentication
Ci sono anche dei sistemi server-side (Perl, CGI, ASP, PHP) i quali sono molto sicuri. Cercate in qualche sito di risorse CGI gratuite, come http://www.cgi-resources.com/
Altre tecniche client-side, come DHTML (JavaScript) sono veramente poco sicure. E' consigliato il loro utilizzo solamente nei casi in cui la *segretezza* delle pagine non sia elevata. Teniamo conto del fatto che molto spesso sui server gratuiti si possono utilizzare solo tecniche client-side. Potete trovare molti esempi nei siti http://www.risorse.net/ e http://www.html.it/
iframe?<iframe
src="miapagina.htm" : Url della pagina da inserire nell'iframe.
width="10" : Larghezza in pixel / percentuale.
height="10" : Altezza in pixel / percentuale.
align="top | middle | bottom | left | right" : Specifica l'allineamento
all'interno della pagina.
frameborder="1 | 0" : Specifica se deve il bordo dell'iframe deve
essere visualizzato (1) oppure no (0).
marginwidth="2" : Larghezza del bordo in pixel.
marginheight="2" : Altezza del bordo in pixel.
scrolling="yes | no | auto" : Specifica se e come attivare lo scrolling
all'interno dell'iframe.
longdesc="spiegazione.html" : Fornisce un link ad una descrizione
esaustiva dell'oggetto contenuto nell'iframe.
name="nomedelloggetto" : Nome dell'oggetto all'interno del documento.
Utile nel caso si intendano utilizzare link con "target=" oppure
JavaScript.
>
Per inserirlo nella pagina:
<iframe
... >Testo da visualizzare nei browser che non supportano <b>iframe</b></iframe>
Nel testo da visualizzare è consigliabile inserire il link alla pagina che intendete inserire nell'iframe, in modo da rendere le informazioni disponibili per tutti.
ATTENZIONE:
pur facendo parte delle specifiche del W3C per l'HTML 4.01 e l'XHTML 1.0, attualmente
iframe è supportato solo da Internet Explorer 5+e da Amaya.
Innanzitutto
inserisci questo script fra i tag <head> e </head>
della pagina.
<script
type="text/javascript">
<!-- // nascondi ai vecchi browser
// original by Andrea/bergamasco
// [a.berga chiocciolina libero.it]
function popup(nomefile, larghezza, altezza, x, y) {
win_popup = window.open(nomefile,"popup","toolbar= 0,location= 0,directories=
0,status= 0,menubar= 0,scrollbars= 0,resizable= 0,copyhistory= 0,width=" + larghezza
+ ",height=" + altezza);
x = parseInt(x);
y = parseInt(y);
win_popup.moveTo(x, y); }
// -->
</script>
e sui link fai così:
<a
href="pippo.jpg" target="popup" onClick="popup('pippo.jpg', 150, 200, 20, 20);
return false;">Clicca qui per aprire la finestra</a>
Per ogni immagine devi specificare larghezza e altezza (fai alcune prove vedere come funziona, eventualmente inserisci dei valori più alti...). Nel caso in cui JavaScript sia disabilitato si aprirà comunque il link in una nuova finestra di dimensioni standard.
Naturalmente al posto del nome del file dell'immagine è anche possibile caricare una pagina HTML, basta specificarne l'URL.
Per specificarne la posizione basta modificare i valori che vengono assegnati a x e y, ovvero gli ultimi due parametri nella chiamata alla funzione.ESEMPIO: se ad esempio voglio aprire la finestrella 200×120 con all'interno la pagina mario.htm, a 40 pixel dall'alto e 20 pixel da sinistra, dovrò usare la seguente sintassi nel link:
<a
href="mario.htm" target="popup" onClick="popup('mario.htm', 200,120, 40, 20);
return false;">Clicca qui per aprire la finestra</a>
Per
chiudere la finestra che contiene il link stesso si usa:
<a
href="javascript:self.close()">Clicca qui per chiudere la finestra</a>
È normale che il browser chieda una conferma se si prova a chiudere la finestra principale.
Se invece si vuole chiudere la finestrella popup (e il browser non chiederà alcuna conferma) basta usare:
<a
href="javascript:win_popup.close()">Clicca qui per chiudere la finestra popup.</a>
Naturalmente quest'ultima cosa si riferisce alla finestra aperta usando lo script presentato nella FAQ precedente.
Se usi lo script che si trova nella FAQ 3.2 devi inserire nel body della pagina:
<body
onUnload="popup('paginachevuoiaprire.htm', 200, 200, 40, 40); return true;">
Naturalmente lo puoi configurare come vuoi.
Innanzitutto è bene precisare che questi due trucchetti hanno un'efficacia molto limitata: ci sono migliaia di modi per accedere ai vari elementi della pagina. Per una discussione più ampia su questi temi vi rimando alla lettura delle FAQ e' possibile nascondere il codice HTML? (3.2) e come posso evitare che le immagini del mio sito possano essere salvate? (12.5). Per il momento desidero solo ricordarvi che non è indispensabile disattivare JavaScript per riuscire a salvare un'immagine "protetta": chi ha una tastiera estesa ha anche un tasto che permette di visualizzare i menu contestuali. Basta selezionare l'immagine con il tasto TAB, premere il tasto per il menu ed il gioco è fatto.
Per
disattivare il tasto destro del mouse si usa JavaScript, vediamo ora il primo
caso. Il seguente script e' diviso in due parti, la prima deve essere inserita
fra i tag <head> e </head> della pagina.
<script
type="text/javascript">
<!-- Original: Martin Webb (martin@irt.org) -->
<!-- // 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>
Invece
questo script deve essere inserito in fondo alla pagina, dopo il tag </html>
<script
type="text/javascript">
<!-- // Begin
for (var i=0; i<document.images.length; i++)
document.images[i].onmousedown=right;
for (var i=0; i<document.links.length; i++)
document.links[i].onmousedown=right;
// End -->
</script>
Se
invece si desidera disattivare il tasto destro del mouse solo per le immagini
si può utilizzare il seguente script che deve essere inserito fra i tag <head>
e </head> della pagina.
<script
type="text/javascript">
<!-- Original: Martin Webb (martin@irt.org) -->
<!-- // Begin
function protect(e) {
alert("Spiacenti, non puoi salvare l'immagine");
return false;
}
function trap() {
if(document.images)
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown = protect;
}
// End -->
</script>
E
nel tag body dovete inserire onLoad="trap();" in questo
modo:
<body
onLoad="trap();">
Entrambi gli script di questa FAQ sono stati tratti da http://www.irt.org/.
Bisogna inserire tutto in una tabella con due colonne: nella colonna di sinistra inserirai i vari contenuti, mentre nella colonna di destra andrà inserita l'immagine. Guarda l'esempio:
<table
width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td width="60%" valign="top">Qui inserisci il tuo testo</td>
<td width="40%" valign="bottom" align="right"><img SRC="immagine.jpg"
width="150" height="200" alt=""></td>
</TR>
</table>
Il codice non è molto diverso da quello dell'esempio precedente: anche in questo caso si usa una tabella per allineare il testo e l'immagine:
<table
border="0" cellspacing="0" cellpadding="0" width="300">
<TR>
<td width="150" valign="bottom"><img SRC="immagine.jpg"
width="150" height="200"></td>
<td width="150" valign="bottom" align="left" alt="" >Questa
è la didascalia
dell'immagine qui a fianco.</td>
</TR>
</table>
Se
vuoi utilizzare lo script presentato nella FAQ
3.2 devi inserire nel tag body:
<body
onUnload="popup('paginachevuoiaprire.htm', 200, 200, 40, 40); return true;">
Naturalmente lo puoi configurare come meglio desideri.
E' sufficiente strutturare il link come segue:
<a
href="javascript:funzione();return true;">Questo è il link</a>
Return può essere true o false in relazione a se si vuole restituire il controllo alla pagina del link oppure alla funzione stessa.
<a
href="pagina_da_aprire.htm" target="_blank">Apri il link</a>
I
possibili target sono:
_blank : apre la pagina in una nuova finestra
_self : apre la pagina al posto di quella corrente (è sottinteso,
quindi metterlo o non metterlo non cambia nulla)
_top : apre la pagina "scavalcando" tutti i frame all'interno della
finestra corrente.
_parent : apre la pagina al posto del frameset "padre" della pagina
corrente.
Se volete specificarne anche le dimensioni ecc. date un'occhiata anche alla FAQ 3.2
Per
le immagini: nel tag <img SRC=...> bisogna aggiungere
l'attributo alt (testo ALTernativo)
<img
SRC="immagine.jpg" alt="Questo testo appare quando ci passo sopra con il mouse">
Per
i link (ma funziona solo in Internet Explorer) al tag <a href=...>
bisogna aggiungere l'attributo title.
<a
href="#" title="Questo testo appare quando ci passo sopra con il mouse">Prova!</a>
E' sufficiente questo semplice JavaScript:
<a
href="javascript:history.back();">Torna indietro</a>
E' sufficiente utilizzare questo semplice JavaScript:
<a
href="javascript:history.forward();">torna avanti</a>
E'
sufficiente questo semplice JavaScript:
<a
href="javascript:location.reload();">Aggiorna</a>
usando
il tag embed
<embedSRC="miofile.mid" : Url del file da eseguire (.mid, .wav, .mp3, .au
... )width="10" : Larghezza in pixel del lettore nella paginaheight="10" : Altezza in pixel del lettore nella paginahidden="true | false" : Specifica se deve essere visibile o meno
autostart="true | false" : Specifica se deve iniziare automaticamente>
una
sintassi compatibile con entrambi i browser è quella combinata di embed
e bgsound, che evita di dover sdoppiare il sito... In questo modo
il browser che riconosce embed ignorerà quanto contenuto fra i
tag <noembed> e </noembed>, mentre quello
che non lo riconosce interpreterà correttamente il tag bgsound
poiché questo si trova fra due tag "neutri". Il codice è quello presentato qui
sotto.
<embed
src="song.mid" hidden="true" autostart="true">
<noembed><bgsound src="file.mid" loop="infinite"></noembed>
Questo
accade perché il suono in EMBED e in BGSOUND funziona
fino a quando non si cambia pagina. Ci sono due possibili soluzioni per questo
problema: aprire una finestra popup che faccia da "juke box" (vedi FAQ
3.2) oppure caricare in un frame nascosto una pagina che contiene il tag
EMBED (vedi FAQ
8.6).
Per
inserire file Real Media(TM) all' interno di una pagina si possono utilizzare
due metodi, entrambi molto semplici.
1) Ill primo consiste nel linkare direttamente alla pagina il file in questione;
ad esempio <a href="suono.rm">Suono</a>, in modo che
quando si richiama il file questo viene scaricato sul computer dell'utente e
riprodotto dal Real Player. Bisogna specificare che in questo modo l'utente
entra in possesso del file.
2) Se il server supporta Real Media è possibile effettuare solo lo streaming
del file impedendone il download. Per fare questo bisogna creare con un editor
di testi un file con estensione .ram nel quale vi sia scritta l'URL completa
del file da riprodurre, ad esempio: http://www.server.com/utente/suono.ra
Per evitare che ad es. Notepad aggiunga l'estensione ".txt" al
file, al momento del salvataggio è necessario racchiudere il nome del file fra
virgolette ("). Ora non resta altro che linkare la pagina al file creato conl'editor
di testo, ovvero suono.ram , ad esempio:<a href="suono.ram">Suono</a>
Bisogna
inserire l'attributo bgproperties="fixed" nel tag body.
Purtroppo funziona solo in Internet Explorer.
<body
background="sfondo.jpg" bgproperties="fixed">
Eventualmente si possono usare i fogli stile (sempre per IE):
<style
type="text/css">
<!--
body { background-image: url(sfondo.jpg); background-attachment: fixed}
// -->
</style>
In Netscape si può simulare l'effetto usando il DHTML usando due layer: uno scorrevole e uno fisso, e ma è una procedura molto più complessa, vi consiglio di lasciar perdere e aspettare Netscape 6, anche perché nella versione 4.7 gli effetti del DHTML non funzionano al meglio.
basta
inserire questa "cosa" tra i tag <head> e </head>
della pagina:
<style
type="text/css">
<!--
a:active { text-decoration: underline }
a:hover { text-decoration: underline }
a:link { text-decoration: none }
a:visited { text-decoration: none }
// -->
</style>
Questa "cosa" si chiama foglio stile (CSS), e premette di specificare con precisione le caratteristiche grafiche della pagina.
Bisogna creare con un apposito programma (tipo MicroAngelo o IconForge) un file icona 16×16 (meglio se a 16 colori) di nome favicon.ico e metterlo nella root, ovvero nella directory principale del sito. Non funziona con i file .bmp rinominati come .ico!
Bisogna
inoltre inserire questa linea di codice fra i tag <head>
e </head> della pagina:
<link
rel="SHORTCUT ICON" href="http://www.ilmiosito.com/mia_icona.ico"> ATTENZIONE: non funziona con Internet Explorer prima della versione 5.0 e con nessuna versione di Netscape.
Per ulteriori informazioni: http://www.favicon.com/.
Si!
Bisogna creare una nuova classe hover per a:visited,
come nell'esempio:
<style
type="text/css">
<!--
a:active { text-decoration: underline; }
a:hover { text-decoration: underline}
a:link { text-decoration: none; }
a:visited { text-decoration: none}
a:visited:hover { text-decoration: underline }
// -->
</style>
Si,
e' possibile con i CSS. Ecco un esempio; il codice va inserito fra i tag <head>
e </head> della pagina.
<style
type="text/css">
<!--
a:active { text-decoration: underline }
a:hover { text-decoration: underline }
a:link { text-decoration: none }
a:visited { text-decoration: none }
a.pippo:active { color: #ffcc00; text-decoration: underline }
a.pippo:hover { color: #ffcc00; text-decoration: underline }
a.pippo:link { color: #ffcc00; text-decoration: none }
a.pippo:visited { color: #ffcc00; text-decoration: none }
// -->
</style>
E
quindi all'interno della pagina sara' sufficiente identificare il link "speciale"
con class="pippo":
<a
class="Pippo" href=....>link</a>
Devi
usare un mailto: come action, oppure appoggiarti ad
un CGI form-to-mail. Il CGI è il metodo più affidabile, è compatibile con tutti
i browser e permette di ricevere i dati anche da chi non dispone della posta
elettronica oppure naviga da un computer non configurato per la posta.
In
questa prima parte della FAQ spiegherò come usare la prima soluzione.
Bisogna usare come action del form un link del tipo mailto:indirizzo@posta.com
e ricordarsi di inserire il parametro enctype="text/plain", altrimenti
si rischia di ricevere dei risultati incomprensibili.
<form
action="mailto:indirizzo@posta.com" enctype="text/plain" method="POST" name="modulo_posta">
<input type="text" name="messaggio">
<input type="submit">
</form>
Se
si vuole invece usare un CGI si può cercare in qualsiasi motore di ricerca "form
to mail". Ci sono molti servizi validi e gratuiti. Ve ne indico due che considero
ottimi.
Uno script CGI in Perl veramente molto valido e facilmente configurabile è Alienform2
[www.cgi.tj/scripts/alienform/]. Invia le e-mail formattate in
base ad un template e permette di inviare più messaggi diversi a partire dallo
stesso form. Permette persino di suddividere il form su più pagine e raccogliere
i dati su un'unica e-mail.
Un altro script CGI molto valido e utilizzato da molti webmaster è Cgiemail
1.6 del MIT (http://web.mit.edu/wwwdev/cgiemail), programmato in C per Unix.
Anche questo programma permette l'uso di template.
Solitamente i provider, anche quelli che offrono spazio web gratuito, mettono a disposizione dei form-to-mail facili da configurare e utilizzare. Informatevi presso il vostro provider.
Bisogna specificare un form per ogni link. Attenzione: il form è necessario, altrimenti Netscape non visualizza il pulsante. Naturalmente è possibile fare la stessa cosa con JavaScript, ma questa è la soluzione più semplice.
<form
action="pagina.htm">
<input type="submit" value=" Link ">
</form>
<a
href="pagina1.htm" target="xxx" onClick="parent.yyy.location='pagina2.htm'">
xxx
= nome del frame 1 (specificato nel frameset)
yyy = nome frame 2 (specificato nel frameset)
basta
inserire l'attributo target al tag <a href=...>;
target specifica il frame di destinazione del link.
<a
href="miapagina.htm" target="contenuto">Mia pagina </a>
Il
target può essere usato anche per specificare se il link si deve
aprire una nuova finestra o se deve "scavalcare" il frameset corrente. Prova
a vedere la FAQ 4.2 Come
si fa ad aprire un link in una nuova finestra?
Sembra
che Netscape faccia un'approssimazione della dimensione in pixel del frame al
valore percentuale intero più vicino. Per questo se le dimensioni dei frame
sono specificate in pixel Netscape non le interpreta correttamente e "sballa"
le proporzioni.
Per ora non c'è alcun modo di prevenire questo comportamento, sapendo che l'errore
di arrotondamento varierà a seconda delle dimensioni della finestra del browser.
L'unico suggerimento che si può dare per evitare grosse delusioni è quello di disegnare dei frameset in percentuale in modo che si adattino alle varie configurazioni dei browser. In generale può essere considerata una buona idea, ma in questo caso specifico purtroppo non è proprio quello che volevamo.
E'
un trucchetto in JavaScript che purtroppo non funziona con Netscape perché per
ora non permette le scritture dinamiche nelle pagine.
Basta inserire questo script fra i tag <head> e </head>
della pagina.
<script
type="text/javascript">
<!--
// semplice ma efficace!
parent.document.title = document.title;
// -->
</script>
Il modo più semplice per evitare di mostrare i bordi è quello di specificare per ogni frame nel frameset:
<frameset
cols="50%,50%">
<frame src="sinistra.htm" name="sx" frameborder="0" marginwidth="0"
marginheight="0">
<frame src="destra.htm" name="dx" frameborder="0" marginwidth="0"
marginheight="0">
<noframes><body>...</body></noframes>
</frameset>
Netscape
riconosce l'attributo border per il tag frameset.
Dandogli valore 0 il bordo non verrà visualizzato e lo spazio fra i due frame
sarà annullato.
Internet Explorer riconosce invece gli attributi frameborder e
framespacing per il tag frameset e dalla versione
4.0 in poi anche per il tag frame. Entrambi gli attributi devono
essere settati a 0.
ATTENZIONE! Alcuni validatori consigliano di non inserire queste specificazioni all'interno del FRAMESET per portarle all'interno del tag FRAME. E' consigliabile pertanto usare il codice dell'esempio, poiché è quello che rispetta appieno le specifiche dell'HTML 4.1.
Anche se gli si assegna la larghezza 0% e bordo 0 si vedrà comunque una parte del frame e si rischia che possa incuriosire l'utente ad aprirlo. Per evitare tutto questo ed essere sicuri che il frame non possa essere visualizzato è meglio fare così:
<frameset
cols="100%,*">
<frame src="home.htm" name="main" noresize marginwidth="0" marginheight="0"
frameborder="0">
<frame src="secret.htm" name="hidden" noresize marginwidth="0" marginheight="0"
frameborder="0">
</frameset>
Ce
ne sono moltissimi gratuiti già pronti: prova a guardare
http://www.shinystat.it/
http://www.risorse.net/gratis
http://www.thecounter.com/
http://www.digits.com/
http://www.bravenet.com/
http://www.hitbox.com/
http://www.stats4all.com/
http://www.extreme-dm.com/
Se vuoi costruirlo da solo per poterlo personalizzare, allora vai a vedere come
puoi programmarlo:
http://www.aspitalia.com/
http://www.cgi-resources.com/
http://www.php.net/
http://www.risorse.net/perl
In
FrontPage 2000:
Inserisci > Componente > Contatore visite
In
FrontPage 98:
Inserisci > Elementi attivi > Contatore visite
I
servizi gratuiti sono molti: eccone alcuni.
http://www.quickchat.com/
http://www.bravenet.com
http://www.risorse.net/gratis
http://www.icq.com/
http://www.mlsys.de/
http://www.leahcim.de/
I
servizi gratuiti sono molti: eccone alcuni.
http://www.risorse.net/gratis
http://www.bravenet.com/
I
servizi gratuiti sono molti: eccone alcuni.
http://www.risorse.net/gratis
http://www.bravenet.com/
Se vi trovate bene con il servizio offerto da qualche portale (iol, jumpy, kataweb ecc...) provate a chiedere al loro webmaster l'autorizzazione a inserire il loro form nel vostro sito. Difficilmente vi negheranno il permesso se inserirete i credits con il link al loro sito.
Ci
sono dei siti italiani che invece offrono il kit per gli SMS già pronto, anche
personalizzabile.
http://aessenet.org/freesmsbox/
http://aessenet.org/freesmsbox/
Trovate le recensioni di questo tipo di servizi all'interno del sito: http://www.risorse.net/gratis/
Devi semplicemente creare un link al file che intendi far scaricare
<a
href="miofile.zip">Scarica il file</a>
Ci
sono principalmente due tecniche:
- utilizzare un CGI apposito o un equivalente sistema server-side.
- usare una pagina in cui si chiede la conferma per il download, nella quale
viene nascosto un contatore.
E' sufficiente separare i vari indirizzi con il punto e virgola, ad esempio
<a
href="mailto:pippo@pluto.com;topolino@disney.com"> Scrivici un'e-mail! </a>
Prova qui: Scrivici un'e-mail!
In
generale NON SI PUO'. Ci sono delle soluzioni poco supportate, se si vuole forzare
il subject è meglio usare un form con un CGI.
Il metodo più sicuro è quello di inserire l'attributo title nel
tag a. Non è molto supportato ma gli standard stanno andando in
questa direzione. Se non viene supportato dal browser dell'utente l'e-mail vi
arriverà in ogni caso.
<a
href="mailto:pippo@pluto.com" title="Questo e' il subject dell'e-mail">Scrivici
un'e-mail!</a>
Prova qui!
ATTENZIONE! Lo script seguente con Netscape funziona benissimo, mentre dà problemi
con Internet Explorer e gli altri browser. Usatelo solo se siete sicuri che
verrà visualizzato solo da persone che usano Netscape, altrimenti rischierete
di perdere le e-mail.
<a
href="mailto:pippo@pluto.com?subject=Ciao%20amico&body=Tanti%20saluti">Scrivici
un'e-mail!</a>
Probabilmente vi chiederete a cosa servano quei %20. E' il modo più semplice per fare in modo che gli spazi (codificati come %20) vengano interpretati correttamente dal browser, altrimenti potremmo avere grossi problemi...
Il
problema è il modo in cui il browser codifica i dati; la soluzione è l'aggiunta
del parametro enctype="text/plain" al form, ad esempio:
<form
enctype="text/plain" action="mailto:pippo@pluto.com">Ci sono varie ipotesi da fare:
1)
avete usato i collegamenti assoluti e non relativi e quindi i link alle immagini
sono nella forma <img src="file:///C:/sitiweb/mio/immagine.jpg">
SOLUZIONE: Utilizzate i link relativi (ad esempio "../immagini/immagine.jpg")
oppure assoluti ma riferiti al sito web (ad esempio "http://www.sito.it/immagini/immagine.jpg")
2) i link sono assoluti e avete sbagliato qualcosa. Ricordate che se le immagini si trovano all'interno dello stesso server è sempre preferibile usare i link relativi.
3) i nomi dei file contengono spazi o lettere accentate. Meglio essere un po' meno corretti grammaticalmente piuttosto che perdere le immagini :-)
4)
c'è un "/" prima di un url relativo. Le possibilità sono solo due:
"./" per rimanere dalla directory corrente (è una finezza ma in
qualche caso aiuta) oppure "../" per passare alla directory superiore.
5)
Avete inserito un ">" nel'attributo alt oppure
in qualche altro punto all'interno del tag.
6)
Non avete chiuso le virgolette alla fine dell'attributo src.
7)
Avete fatto confusione fra lettere maiuscole e lettere minuscole nel nome del
file: sui server Unix/Linux (lo sono gran parte dei server gratuiti) pippo.JPG
è diverso da pippo.jpg che è a sua volta diverso da Pippo.jpg.
E' meglio usare esclusivamente lettere minuscole senza spazi e senza accenti
per evitare problemi.
Nel
tag <img src=...> basta inserire l'attributo border="0",
poiché alcuni browser usano di default il bordo di larghezza 1 per i link.
Esempio:
<img
src="immagine.jpg" border="0" alt="">Lo slicing è la tecnica per cui un'immagine grande viene spezzettata in parti più piccole ottimizzate a compressioni diverse in modo da alleggerirne il peso totale e quindi diminuirne il tempo di download. Le immagini più piccole vengono ricostruite all'interno di tabelle invisibili. Per fare questo si usano programmi come Macromedia Fireworks, Adobe ImageReady.
E'
importante che le due immagini abbiano esattamente la stessa altezza (in pixel)
se le vogliamo avvivinare in orizzontale; se invece le dobbiamo unire in verticale
dovranno avere la stessa larghezza; giusto per non avere brutte sorprese!.
Se le vogliamo unire in orizzontale dobbiamo usare una tabella con una
riga per due colonne:
<table
border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td><img src="immagine1.jpg" border="0" alt=""></td>
<td><img src="immagine2.jpg" border="0" alt=""></td>
</tr>
</table>
Se invece le vogliamo unire in verticale ci servirà una tabella di due righe per una colonna.
<table
border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td><img src="immagine1.jpg" border="0" alt=""></td>
</tr>
<tr valign="top">
<td><img src="immagine2.jpg" border="0" alt=""></td>
</tr>
</table>
In linea di massima non si può. E' necessario che il browser prelevi l'immagine dal server per poterla visualizzare. Non tutti i browser hanno una funzione "Salva immagine con nome", ma gran parte ce l'hanno. Inoltre si può sempre prelevare l'immagine dal server usando telnet o cercandola nella cache del browser.
Ci sono dei trucchetti (abbastanza fastidiosi) come ad esempio disabilitare il tasto destro del mouse. Questo trucco è facilmente aggirabile disabilitando JavaScript. Inoltre non è possibile disabilitare la funzione "salva schermata" o "print screen".
Forse c'è una soluzione, ma deve essere ponderata con cautela: i file di Flash possono essere protetti dalla modifica, ma non tutti i browser possiedono il plugin (le ultime statistiche dicono che i browser dotati di plugin sono il 76%).
Una thumbnail è semplicemente una copia di un'immagine più grande la quale è stata modificata per diminuire le dimensioni del file. Con un semplice link all'immagine più grande si fa in modo che chi è interessato la può vedere nel suo aspetto originario.
<a
href="immagine_grande.jpg"><img src="thumbnail.jpg" alt="Clicca per vedere
l'immagine più grande"></a>
Ci
sono varie tecniche che possono essere usate simultaneamente per ridurre la
dimensione del file in una thumbnail:
1) ridurre le dimensioni e/o la risoluzione
2) aumentarne la compressione
3) ritagliare l'immagine per togliere particolari insignificanti
4) ridurre il numero di colori (ad esempio trasformarla in scala di grigio)
Una buona thumbnail non supera i 4 Kb.
Si,
è vero, le specifiche dell'HTML 4.01 richiedono la presenza dell'attributo ALT
per tutte le immagini, anche per quelle che non ne avrebbero bisogno come linee,
punti ecc. Bisogna quindi scrivere una descrizione per tutte le immagini? No,
non è necessario. Se non si intende inserire un testo esplicativo è sufficiente
inserire alt="", come nell'esempio:
<img
src="immagine.jpg" width="150" height="200" alt="">
Per fare i rollover ci sono fondamentalmente tre tecniche: Java, JavaScript e Flash. In questa faq viene spiegato come fare i rollover con JavaScript, poiché si tratta del sistema più diffuso e più configurabile.
Anche per quanto riguarda JavaScript ci sono diverse scuole di pensiero, quello illustrato qui è il metodo più elementare. Se poi volete sviluppare qualcosa di più elaborato vi consiglio di studiare il linguaggio JavaScript.
Per
fare i rollover è sufficiente utilizzare questo piccolo script nel tag img:
<a
href="link.htm"
onMouseOver="document['immagine'].src = 'attivo.gif';"
onMouseOut="document['immagine'].src = 'normale.gif';">
<img src="normale.gif" name="immagine" border="0" alt="">
</a>
Per
ogni immagine dovete specificare un nome (name) diverso. State
attenti alle virgolette, altrimenti non funziona!
Nelle
immagini mappate ogni area viene associata ad un link oppure ad una funzione
JavaScript. Il cuore della mappa è costituito dai tag area e map
e naturalmente da un attributo che deve essere inserito nel tag img.
<map
name="Mappa_1">
<area coords="0,0,100,100" href="link1.htm">
<area coords="100,0,200,100" href="link2.htm">
</map>
<img src="immagine.jpg" width="200" height="100" border="0" usemap="#Mappa_1">
No,
però è possibile usare il tag IFRAME, il quale permette di inserire una "finestra"
contenente un'altra pagina html. In alcuni casi, se deve essere inserito solamente
del testo, si può usare un form <textarea> (con i CSS si
fanno miracoli nella formattazione del testo e degli sfondi), ma si possono
presentare dei problemi nella gestione delle dimensioni nel passaggio fra i
vari browser.
Per
la sintassi correttadi iframe vedi FAQ 3.1: Qual'è
la sintassi corretta del tag iframe?
Molto probabilmente si tratta di celle vuote. Una soluzione "indolore" è quella di inserirvi qualcosa di invisibile, come un oppure   oppure ancora una GIF trasparente. Lo spazio da solo non funziona perché viene ignorato.
Esempio 1
<table>
<tr>
<td> </td>
</tr>
</table>
Esempio 2
<table>
<tr>
<td> </td>
</tr>
</table>
Esempio 3
<table>
<tr>
<td><img src="empty.gif" width="1" height="1" alt=""></td>
</tr>
</table>
Disclaimer
Questo
documento viene rilasciato secondo la licenza GNU General Public License (GPL
o copyleft) versione 2 della Free Software Foundation.
Chiunque è autorizzato a distribuire copie elettroniche o cartacee del presente
documento, allegarlo a raccolte, CD-ROM o programmi, a patto di citare la fonte
da cui è stato tratto.
Inoltre il presente documento puo' essere liberamente modificato in ogni sua
parte purché venga rilasciato secondo la medesima licenza.
L'autore non si assume *NESSUNA* responsabilità per eventuali danni diretti
o indiretti dovuti a errori o inesattezze che possano essere presenti nel presente
documento. Questo documento inoltre deve essere considerato frutto delle opinioni
personali dell'autore e *non* un'enunciazione di dogmi assoluti.
Eventuali errori vanno segnalati all'indirizzo e-mail: a.berga chiocciolina libero.it oppure direttamente sul newsgroup it.comp.www.html