Home ] Su ] Novità ] Hardware ] Software ] Windows ] Sicurezza ] Linguaggi ] Cerca ] Contatta ] Guestbook ] Mappa ] Info su... ]

Le FAQ sul linguaggio HTML


La versione originale è sempre disponibile all'indirizzo http://www.ealore.com/html.
Al suddetto indirizzo potete trovare materiale più aggiornato rispetto al contenuto della FAQ sul linguaggio HTML di questo sito.
Prima di continuare a leggere le seguenti sezioni della FAQ sul linguaggio HTML, vi invitiamo a prendere visione del disclaimer, dei copyright e delle note di revisione, situate in questa pagina.



Le FAQ di it.comp.www.html

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.

-------------------
28.11.2000 (v 2.2b)
-------------------
Questa FAQ è redatta e mantenuta da andrea/bergamasco
[ a.berga chiocciolina libero.it ]
Le faq più aggiornate le potete scaricare dal sito: http://www.ealore.com/html/. 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]
Stefano "Spyro" Fanari [fanaste chiocciolina caltanet.it]
Massimo Arcari [massimo-arcari chiocciolina mclink.it]
Fra [timosi chiocciolina freemail.it]
pippopd [pippopd chiocciolina iol.it]
-------------------
Altre risorse che sono state consultate durante la redazione di questo documento:
W3C [http://www.w3.org]
news:comp.infosystems.www.authoring.html e relativa FAQ
Htmlhelp [http://www.htmlhelp.com]
Tucows [http://html.tucows.com]
IRT [http://www.irt.org]
-------------------
STORIA
Versione 0.x - dal 01.04.2000 al 12.06.2000
Nasce il sito delle FAQ http://digilander.iol.it/tamburo/ - Prima versione delle FAQ in un unico file - Aggiunto punto 7 nella faq 12.1; aggiunte le faq 3.4 e 4.4 - Aggiunte le faq 1.8, 3.5, 4.5, 4.6 e 6.5; aggiornate le faq 2.3 e 6.3 - Aggiunte le faq 1.9, 3.6, 3.7, 5.1 e 12.7 - Aggiunte le faq 7.2, 9.2, 9.3, 9.4 - Correzioni varie - Aggiunte le faq 1.10, 2.6, 3.8, 12.8 e 12.9 - Aggiunta la faq 10.2 - Aggiunta la faq 9.5
Versione 1.x - dal 18.06.2000 al 02.09.2000
Aggiunta un bel po' di roba ;), - Corrette le faq 3.1 e 3.5, aggiunta la faq 5.3 - Aggiunte le faq 1.11 e 4.7 - Corretta la numerazione a causa di incompatibilità con Netscape. - Corretti alcuni errori, aggiornate la 4.2 e la 2.11. - Rinominata la faq 3.4, aggiunto il punto 15 (CSS) - Nasce E-ALORE, automatizzazione delle faq, effettuate varie correzioni. - Aggiunta la faq 3.7 - Cambiata la categoria per le faq 7.3 e 7.4 - Modificata la faq 11.1 - Inserita la faq 4.8
Versione 2.x
[04.09.2000] (v.2.0b) Inserite le faq 8.3, 8.4 e 3.8.
[13.11.2000] (v.2.1b) Inserite le faq 5.8, 5.9, 10.6, 15.4; modificata la faq 3.4
[28.11.2000] (v.2.2b) Aggiornata la faq 12.2, inserita le faq 3.9 e 13.8
-------------------

  1. PRIMA DI INIZIARE...
    1. Glossario
    2. Netiquette

  2. INIZIARE
    1. Che cosa significa HTML?
    2. Come si inseriscono i commenti nel codice HTML?
    3. Si possono inserire commenti anche nei fogli stile (CSS)?
    4. Cosa si usa per controllare se ci sono errori nel codice?
      Cosa vuol dire "validare" il codice?
      Che cos'è un "validatore"?
    5. Cosa si usa per scrivere l'HTML?
    6. Che differenza c'è fra .htm, .html, .shtml e .phtml?
    7. Dove posso trovare una lista di tutti i tag HTML?
    8. Che cos'è il DHTML?
    9. Che cos'è l'XHTML?
    10. Che cos'è <!DOCTYPE>?
    11. A cosa servono tbody, thead e tfoot?

  3. PUBBLICARE UN SITO
    1. È possibile reindirizzare un utente in base alla lingua del suo browser?
    2. Come si fa a caricare automaticamente un'altra pagina dopo tot secondi?
      È possibile ricaricare la stessa pagina automaticamente?
    3. Come si fa a evitare che il browser ricarichi la pagina dalla cache?
    4. Come posso evitare che la mia pagina venga inserita in un frameset?
    5. È possibile nascondere il codice HTML?
    6. Come si fa a proteggere una parte del sito con una password?
    7. Come si fa ad indirizzare il browser di un utente in base alla risoluzione del suo monitor?
    8. Come faccio a inserire il mio sito nei motori di ricerca?
      Esistono dei software per inserire automaticamente un sito su più motori contemporaneamente?
    9. È possibile personalizzare la pagina visualizzata quando non viene trovato un file (Error 404)?

  4. PROGETTAZIONE
    1. Qual è la sintassi corretta del tag iframe?
    2. Come si fa ad aprire una nuova finestra delle dimensione che voglio io, senza barre ecc, ad esempio per mostrare un'immagine?
      Posso specificarne anche la posizione sullo schermo?
      Come si aprono le finestre popup?
    3. Come faccio a chiudere la finestra cliccando su un link?
    4. In molti siti, quando il browser viene chiuso, si apre una nuova finestra. Come faccio ad ottenere lo stesso funzionamento?
    5. Come si disattiva il tasto destro del mouse?
      È possibile disattivarlo solo per le immagini?
    6. Vorrei mettere un'immagine in basso a destra in ogni pagina. Come posso fare?
    7. Come si fa ad aprire una finestrella popup quando si carica una pagina?
    8. Come faccio a ridimensionare la finestra corrente a 800×600?

  5. LINK
    1. Come posso usare un link per attivare una funzione JavaScript?
    2. Come si fa ad aprire un link in una nuova finestra?
    3. Quando passo sopra ad un'immagine o un link con il mouse compare la descrizione in un box giallo. Come si crea?
    4. Come si fa a simulare il tasto "indietro" del browser?
    5. Come si fa a simulare il tasto "avanti" del browser?
    6. Come si fa a simulare il tasto "aggiorna" del browser?
    7. Come si fanno i menu di link con select?
    8. Cosa sono e come si creano i link relativi?
    9. Come si fa a nascondere l'indirizzo reale di un link che appare nella barra di stato?
      È possibile sostituirlo con qualcos'altro?

  6. MULTIMEDIA
    1. Come posso inserire un suono o una musica (midi, wave) in sottofondo, compatibile sia con IE che con NN?
    2. Ho messo una musica di sottofondo nel mio sito, ma quando si cambia pagina ricomincia ogni volta. Cosa posso fare?
    3. Come posso inserire file multimediali Real Media nel mio sito?

  7. EFFETTI - STILE
    1. Come si fa lo sfondo fisso in una pagina?
      Lo sfondo fisso funziona anche con Netscape?
    2. Come si fa a mettere l'icona personalizzata quando si aggiunge il sito ai preferiti?

  8. MODULI - FORM
    1. Come posso ricevere via e-mail i dati di un form?
    2. Come si fanno i link con i pulsanti di un form?
    3. Come posso controllare l'ordine di tabulazione all'interno di un form?
    4. È possibile disabilitare un elemento di un form?

  9. FRAME
    1. Come si fa a caricare 2 frame con un solo click?
    2. Come si fa ad aprire un link in un altro frame?
    3. Perché i miei frame sono completamente sballati con Netscape mentre con IE funzionano benissimo?
    4. Come si fa a visualizzare il titolo della pagina corrente al posto di quello del frameset?
    5. Come faccio a togliere il bordo attorno ai frame?
    6. Come si fanno i frame nascosti?

  10. SERVIZI - Chat, forum, contatori...
    1. Come posso inserire un contatore nel mio sito?
      Come posso inserire un contatore con FrontPage?
    2. Dove trovo una chat per il mio sito?
    3. Dove trovo un guestbook per il mio sito?
    4. Dove trovo un forum per il mio sito?
    5. Come posso inserire nel mio sito un servizio di invio SMS?
    6. Dove trovo un servizio gratuito di redirect per il mio sito?

  11. DOWNLOAD DI FILE
    1. Vorrei dare la possibilità di fare il download di file dal mio sito. Come si fa?
    2. Come si fanno a contare i download di un file?

  12. E-MAIL
    1. Come faccio a mandare un'e-mail a più persone usando mailto:?
    2. Usando mailto: è possibile specificare anche il subject e il body di un'e-mail?
    3. Ho usato un mailto: per spedire i dati di un form, ma il risultato è illeggibile! Cosa posso fare?

  13. IMMAGINI
    1. Ho pubblicato il mio sito. Perché sul mio hard-disk funziona tutto mentre su Internet non vedo le immagini?
    2. Come faccio a togliere il bordo blu dalle immagini-link?
    3. Cosa si usa per dividere le immagini a "fette"?
      Che cos'è lo "slicing"?
    4. Come si fanno collimare perfettamente due immagini?
    5. Come posso evitare che le immagini del mio sito possano essere salvate?
    6. Che cosa sono le thumbnail?
    7. È vero che bisogna mettere l'ALT anche nelle immagini che non ne hanno bisogno?
    8. Come si fanno le immagini rollover?
      Come si fanno le immagini che cambiano al passaggio del mouse?
    9. Come si fanno i rollover che scambiano un'altra immagine all'interno della pagina?
    10. Come si fanno le immagini mappate?
    11. GIF o JPEG?

  14. TABELLE
    1. Si può inserire la barra di scorrimento nella cella di una tabella?
    2. Perché Netscape non mi visualizza alcune celle di una tabella?

  15. CSS - FOGLI STILE
    1. Come si fanno il link di testo non sottolineati?
    2. È possibile attivare l'hover anche per i link già visitati?
    3. Posso avere due set di link di colore diverso?
    4. Come si fa cambiare il colore di un link al passaggio del mouse?


  1. PRIMA DI INIZIARE...

    1. Glossario

      • ARTICOLO : Messaggio spedito su un newsgroup. In inglese "post".
      • ASP : Active Server Pages: si tratta di una tecnologia server-side sviluppata dalla Microsoft che permette di interagire con i database e creare pagine dinamiche. Necessita di server Windows NT. Sui server Linux si può usare l'equivalente PHP.
      • ATTRIBUTO : Elemento che permette di specificare le proprietà di un tag. Ad esempio href è un attributo del tag <a>.
      • BANNER : Immagine pubblicitaria, solitamente resa con una gif animata oppure, nei casi più "evoluti" con un inline frame (iframe). Le dimensioni "classiche" sono 468x60 pixel. Esistono apposite agenzie che gestiscono lo scambio dei banner, specialmente per i siti commerciali, ma naturalmente esistono anche circuiti banner gratuiti.
      • CLIENT : Il client è il computer che effettua le richieste di dati ad un server remoto. La più comune interfaccia client è il browser (Netscape, Internet Explorer).
      • CLIENT-SIDE : Riguarda tutte le attività che vengono svolte dal browser, ad esempio l'esecuzione di JavaScript o di applet Java.
      • CGI : Common Gateway Interface: si tratta di programmi scritti in vari linguaggi (Perl, C) che girano in aree apposite del server (cgi-bin) e permettono di creare pagine dinamiche basate su database, motori di ricerca, analizzatori di form, accesso con password ecc. Se ne trovano anche di gratuiti. Per saperne di più: http://www.risorse.net, http://www.cgi-resources.com
      • CMQ : Abbreviazione per "comunque".
      • DW : Acronimo di Macromedia DreamWeaver.
      • FAQ : Frequently Asked Questions, ovvero "domande poste di frequente". Si tratta di raccolte di domande poste frequentemente con le relative risposte. Servono per evitare agli utenti di un newsgroup di rispondere sempre alle stesse domande, specialmente quelle più banali, e per mettere al corrente i nuovi utenti dei problemi già discussi (e risolti).
      • FP : Acronimo di Microsoft FrontPage
      • FRAMESET : Per frameset si intende la pagina che descrive un set di frame, in altre parole la pagina "contenitore".
      • IE : Acronimo di Microsoft Internet Explorer.
      • IMHO : Acronimo di "In My Humble Opinion" - per mio modesto parere.
      • JAVA : Linguaggio di programmazione orientato agli oggetti realizzato dalla Sun Microsystems. È simile al linguaggio C++ ed è stato progettato specificatamente per diventare il linguaggio di sviluppo di applicazioni programmate per Internet. Ha alcune caratteristiche che ne denotano la versatilità: infatti le applicazioni sviluppate in Java possono girare su diverse piattaforme. Nelle pagine web si possono inserire "applet" (ovvero mini-programmi) Java, e si possono integrare applet Java e JavaScript per la costruzione di pagine web interattive.
      • JAVASCRIPT : Linguaggio di scripting simile al C, sviluppato dalla Netscape Communications. JavaScript è stato implementato come estensione del linguaggio HTML e consente agli sviluppatori di creare pagine Web contententi elementi che rispondono ad eventi-utente ed eseguire calcoli e operazioni client-side. Microsoft ha sviluppato un linguaggio simile a JavaScript chiamato JScript, il quale però ha delle caratteristiche compatibili solo con il browser Internet Explorer.
      • JSCRIPT : Linguaggio di programmazione simile a JavaScript sviluppato dalla Microsoft. Ha delle caratteristiche compatibili solo con il browser Internet Explorer.
      • MSDN, M$DN : Abbreviazione per Microsoft Developer Network.
      • NN, NS : Abbreviazione per Netscape Navigator e per Netscape.
      • OE : Acronimo di Microsoft Outlook Express.
      • OT : Acronimo di Off Topic, ovvero "fuori tema". È segno di educazione inserire [OT:] nel subject dell'articolo quando questo non riguarda strettamente i temi discussi nel newsgroup.
      • PERL : Linguaggio di programmazione server-side, molto versatile per la manipolazione di stringhe e dati testuali. Viene utilizzato per i CGI.
      • PHP : Hypertext Preprocessor: è una tecnologia che gira sotto Unix/Linux (ma anche sotto Windows) che permette di interfacciare le pagine HTML con i database e di creare pagine dinamiche. È una tecnologia simile ad ASP.
      • POST : v. ARTICOLO.
      • ROLLOVER : Effetto attivato al passaggio del mouse su un oggetto nella pagina, specialmente un'immagine. Si può avere l'attivazione di un'animazione o il cambio di colore dell'immagine. Lo si fa con JavaScript o applet Java.
      • ROOT : La root è la directory principale del sito web.
      • RTFM : Read The F#####g Manual, ovvero "Leggiti il f#####o manuale". Se ce lo scrivono significa che (eufemisticamente) siamo un po' pigri. È buona norma dare almeno una sfogliata ad un manuale prima di chiedere aiuto ad un newsgroup, potrebbe essere un problema banale che trasformerebbe il nostro articolo in un inutile spreco di elettroni...
      • SERVER-SIDE : Si riferisce a tutte le attività che vengono svolte dal server, ovvero prima che la pagina venga inviata al client. CGI, PHP e ASP sono un esempio di attività server-side.
      • SLICING : è la tecnica usata per "tagliare a fette" un'immagine grande in modo da velocizzarne il caricamento o darle effetti particolari come il rollover su aree ristrette. Vedi la faq relativa a questo problema.
      • SSI : Acronimo di Server Side Include, indica la possibilità di inserire dinamicamente dei dati nelle pagine web direttamente sul server. Si usano per lavorare con i CGI.
      • TAG : In italiano "marcatore". È l'elemento base del linguaggio HTML, racchiuso fra i caratteri < e >. Ogni tag ha determinati attributi, alcuni dei quali obbligatori. Alcuni tag richiedono anche un tag di chiusura (nell'XHTML tutti i tag devono essere chiusi).

    2. Netiquette

    3. 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

      • Prima di iniziare a pubblicare messaggi è bene leggere attentamente il manifesto, le FAQ e "lurkare" almeno per 10 giorni, in modo da rendersi conto del tono delle discussioni e degli argomenti trattati. Lurkare significa leggere i messaggi senza intervenire attivamente nelle discussioni.
      • Non postare un messaggio su più newsgroup diversi. I newsgroup sono tantissimi e per questo è difficile che non ce ne sia uno adatto ad aiutarvi.
      • Non andate fuori tema. Per sapere gli argomenti che vengono trattati nel newsgroup basta leggere il manifesto. Se non vi funziona il programma delle news, postate su it.comp.software.newsreader; se non sapete come fare le pagine in asp c'è un newsgroup apposito: it.comp.www.asp; lo stesso vale per i CGI: it.comp.www.cgi e così via. Se proprio non sapete dove postare il vostro messaggio esiste un gruppo generico, it.aiuto, dove vi potranno indirizzare al newsgroup più appropriato.
      • Se proprio vi scappa, evidenziate nell'intestazione i messaggi fuori tema (Off Topic), in modo da non costringere a scaricarli. Per marcare un messaggio come Off Topic basta inserire OT: oppure [OT] nel subject del messaggio.
      • Se i messaggi di risposta iniziano con R: invece che con Re: cercate le patch. È una grave violazione degli standard stabiliti dalla rfc 1036 e dal draft son-of-1036. Tutte le informazioni qui: http://vene.dave.it/mail/patch.asp. Le ultime release di Outlook Express (a partire dalla versione 5.00.2919.6600), permettono di ovviare al problema spuntando l'opzione "In risposta al messaggio utilizza sempre intestazioni in inglese" contenuta in Strumenti -->Opzioni -->Invio -->Impostazioni Internazionali.
      • Non inviare messaggi di prova su questo newsgroup. Per le prove esiste un newsgroup apposito: it.test.
      • Non scrivere messaggi del tipo "Anch'io" quando vedete una domanda che condividete: rimanete in attesa della risposta, il vostro sarebbe un messaggio inutile.
      • Cercate di non essere pigri. Se sapete bene che la risposta ai vostri dubbi è sul manuale del programma che usate o, peggio, nelle FAQ, non postate sul NG! Rischiate di vedervi rispondere RTFM o LIFM (= Leggiti Il F#####o Manuale)...
      • Non spedire pubblicità, specialmente di "guadagnare navigando" e simili. Questo comportamento si chiama spamming, è una cosa piuttosto grave e in qualche caso rasenta il reato contro la privacy! it.comp.www.html annovera fra i suoi frequentatori molti "cacciatori di spammers": se ci tenete al vostro account evitate certi messaggi! Se volete darci una mano a sconfiggere lo spamming date un'occhiata alla pagina del newsgroup nel sito delle FAQ.
      • Scrivere un'intestazione (subject:) sensata, evitate quindi subject del tipo "domanda" oppure "html": cercate di essere più specifici! In questo modo eviterete a chi non è interessato di dover comunque perdere del tempo per scaricare e leggere il vostro messaggio. Il newsgroup è frequentato anche da gente che lavora e che non ha tempo per leggersi tutti i messaggi.
      • Non ripetere più volte lo stesso messaggio: è normale che appaia in ritardo anche di un'ora. it.comp.www.html è infatti un newsgroup moderato, quindi tutti i messaggi devono essere approvati prima di apparire sul newsgroup. Se non appare ci sono due ipotesi: avete problemi col server oppure il messaggio non è stato approvato. In questo secondo caso cambiate tono o provate con un altro server (o newsgroup).
      • Scrivere messaggi chiari e sintetici, in un italiano comprensibile. Ricordate che state comunicando in pubblico: dovete scrivere come lo fareste per un giornale (o quasi). Se fate delle citazioni siate precisi e citate la fonte. I giochi linguistici riservateli per la vostra homepage personale o per la corrispondenza privata.
      • Non superare le 4 righe per la firma (signature). Le firme più elaborate e le ascii-art lasciatele per la corrispondenza personale.
      • Non insultate sul newsgroup. Se proprio dovete insultare qualcuno o condurre una battaglia d'opinione fatelo via e-mail privatamente.
      • Evidenziate il tono scherzoso o sarcastico usando le "faccine" ;-), eviterete così di essere fraintesi.
      • Non pubblicare MAI sul newsgroup un messaggio di posta elettronica senza l'ESPLICITO consenso del suo autore.
      • Non siate intolleranti con chi commette degli errori, specialmente se si tratta di errori grammaticali e/o sintattici.
      • Non spedire i messaggi contenenti immagini e formattazione HTML. La creatività riservatela per i vostri lavori.
      • Non spedire allegati: inserite l'URL dove reperire il file in questione.
      • Quando rispondete ad un messaggio, non serve citarlo (= quotarlo) integralmente: basta lasciarne solo le parti salienti.
      • Non chiedere risposte in e-mail. Non siamo tutti al tuo servizio personale, USENET è un servizio pubblico. Come noi perdiamo del tempo a risponderti anche tu puoi perdere del tempo a leggere le risposte che ti vengono date. Se rispondete a qualche (...) che ha chiesto la risposta via e-mail fate in modo di inviare una copia del vostro messaggio anche sul newsgroup: potrebbero esserci altre persone con lo stesso problema interessate alla soluzione.
      • Scrivere la risposta SOTTO la citazione del messaggio precedente.
      • Crackare il software è un reato punito dalla legge. Ricordate che la programmazione è un lavoro che richiede tempo e impegno, rispettate chi lo fa per facilitarvi la vita (in fondo i programmi servono a questo, no?)
      • Grazie per essere arrivati fino in fondo!


  2. INIZIARE

    1. Che cosa significa HTML?

    2. HyperText Markup Language, ovvero "Linguaggio di marcatura per ipertesti".
      È 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.

    3. Come si inseriscono i commenti nel codice HTML?

    4. 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 -->
      <!>

    5. Si possono inserire commenti anche nei fogli stile (CSS)?

    6. 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 */

    7. Cosa si usa per controllare se ci sono errori nel codice?
      Cosa vuol dire "validare" il codice?
      Che cos'è un "validatore"?

    8. 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".

    9. Cosa si usa per scrivere l'HTML?

    10. È sufficiente un comune editor di testi come Notepad di Windows o vi/vim per Linux.
      Per imparare l'HTML bastano un buon manuale e un paio di ore di studio.

      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) (VT) (Win, Mac)
      Microsoft FrontPage [http://www.microsoft.com/frontpage/] (C) (D) (VT) (Win)
      Allaire HomeSite [http://www.allaire.com] (D) (VT) (Win)
      1st Page 2000 [http://www.evrsoft.com] (F) (T) (Win)
      CoffeeCup [http://www.coffeecup.com] (S) (T) (Win)
      Easy Web Editor [http://editorhtml.it] (C) (D) (S) (V) (Win)
      iPer Hyper Publish [http://hyperpublish.visualvision.it] (C) (D) (S) (V) (Win)
      HotDog [http://www.sausage.com] (S) (VT) (Win)
      NetObjects Fusion [http://www.netobjects.com] (C) (VT) (Win)
      Html - Kit [http://www.htmlkit.com] (F) (T) (Win)
      Adobe GoLive [http://www.adobe.com] (C) (VT) (Win)
      1-4-All [http://www.mmsoftware.com] (S) (D) (T) (Win)
      40Tude HTML [http://www.40tude.com/html/] (S) (D) (T) (Win)
      BBEdit [http://www.barebones.com/products/bbedit.html] (S) (D) (T) (Mac)

      Legenda: (C) = commerciale, (D) = versione demo disponibile, (F) = freeware. (S) = shareware, (T) = testuale, (V) = visuale, (VT) = visuale + codice,

      Potete trovare le recensioni di alcuni editor qui: http://www.risorse.net/software/.

      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.

    11. Che differenza c'è fra .htm, .html, .shtml e .phtml?

    12. 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 e .php) da dare alle pagine che contengono codice PHP (Hypertext PreProcessor) che il server deve riconoscere e interpretare.

    13. Dove posso trovare una lista di tutti i tag HTML?

    14. 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.01.
      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à con i vari browser, scritta da Brian Wilson.
      http://www.lbtsi.com/compendm/sitemap.htm - Un'altra "check list" che analizza per ogni tag la compatibilità con diversi browser.
      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.

    15. Che cos'è il DHTML?

    16. 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.

    17. Che cos'è l'XHTML?

    18. 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/.

    19. Che cos'è <!DOCTYPE>?

    20. 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//IT">

    21. A cosa servono tbody, thead e tfoot?

    22. Stando alle indicazioni del W3C, questi tre tag devono essere inseriti all'interno di una tabella per dividere in gruppi le celle; thead e tfoot sono rispettivamente l'intestazione e il piede, mentre tbody definisce il "corpo" della tabella. tbody integrato con i CSS può essere usato per realizzare tabelle dal corpo scorrevole e dalle intestazioni fisse. Può essere utile (visto che in una tabella ce ne possono essere più di uno) anche per assegnare stili diversi a vari gruppi di celle, senza dover assegnare lo stile ad ogni riga o ogni cella individualmente.



  3. PUBBLICARE UN SITO

    1. È possibile reindirizzare un utente in base alla lingua del suo browser?

    2. 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
      // [andrea.bergamasco chiocciolina risorse.net]

      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.

    3. Come si fa a caricare automaticamente un'altra pagina dopo tot secondi?
      È possibile ricaricare la stessa pagina automaticamente?

    4. 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.

    5. Come si fa a evitare che il browser ricarichi la pagina dalla cache?

    6. 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.

    7. Come posso evitare che la mia pagina venga inserita in un frameset?

    8. In alcuni casi è sufficiente inserire il seguente script fra i tag <head> e </head> della pagina:

      <script language="JavaScript" type="text/javascript">
      <!-- // semplice ma efficace...
      if (window != window.top)
      top.location.href = location.href;
      // -->
      </script>

      È usato anche per evitare i banner creati da provider gratuiti, ma capita che non funzioni, in tal caso si può utilizzare quest'altro script, da inserire come al solito nell'HEAD della pagina:

      <script language="JavaScript" type="text/javascript">
      <!--
        open("http://url-completo-tuo-sito.com","_top")
      // -->
      </script>

    9. È possibile nascondere il codice HTML?

    10. 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

    11. Come si fa a proteggere una parte del sito con una password?

    12. 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. È 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 nel sito http://www.risorse.net

    13. Come si fa ad indirizzare il browser di un utente in base alla risoluzione del suo monitor?

    14. E' sufficiente utilizzare questo semplice JavaScript:

      <script type="text/javascript">
      <!-- // Original by Stefano Fanari
      // fanaste chiocciolina caltanet.it
      if (screen.height==600)
      {
         location.href = "800per600.htm"
      }
      else if (screen.height==768)
      {
         location.href = "1024per768.htm"
      }
      // -->
      </script>
    15. Come faccio a inserire il mio sito nei motori di ricerca?
      Esistono dei software per inserire automaticamente un sito su più motori contemporaneamente?

    16. Il sistema più semplice è quello di andare direttamente sul sito del motore di ricerca, cercare il link "Add URL", "Inserisci il tuo sito su ..." e compilare il form che viene proposto.
      Ci sono inoltre dei siti web, gratuiti o a pagamento, che offrono la possibilità di inserire il sito su più motori di ricerca. Ecco alcuni link utili:
      http://www.motoridiricerca.it
      http://www.submit.it
      http://visualvision.it/index_00003e.htm
      http://www.advforce.com

    17. È possibile personalizzare la pagina visualizzata quando non viene trovato un file (Error 404)?

    18. Se il web server è Apache e l'amministratore di sistema lo permette (per saperlo basta guardare nella documentazione dei provider oppure inviare una e-mail al sistemista) mettere in pratica questa cosa è un gioco da ragazzi.
      È sufficiente creare un file di testo e nominarlo .htaccess.
      All'interno del file inserite questa riga:
      ErrorDocument 404 error404.html
      dove al posto di error404.html potete inserire il nome di qualsiasi pagina, anche dell'homepage se volete. In quest'ultimo caso chiunque "sbagli strada" verrà riportato direttamente alla pagina principale.



  4. PROGETTAZIONE

    1. Qual è la sintassi corretta del tag iframe?

    2. <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.

    3. Come si fa ad aprire una nuova finestra delle dimensione che voglio io, senza barre ecc, ad esempio per mostrare un'immagine?
      Posso specificarne anche la posizione sullo schermo?
      Come si aprono le finestre popup?

    4. Innanzitutto inserisci questo script fra i tag <head> e </head> della pagina.

      <script type="text/javascript">
      <!-- // nascondi ai vecchi browser
      // original by andrea/bergamasco
      // [andrea.bergamasco chiocciolina risorse.net]

      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);
      if(x && y); {
      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>

      Clicca qui per vedere alcune dimostrazioni

    5. Come faccio a chiudere la finestra cliccando su un link?

    6. 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.

    7. In molti siti, quando il browser viene chiuso, si apre una nuova finestra. Come faccio ad ottenere lo stesso funzionamento?

    8. Se usi lo script che si trova nella FAQ Come si fa ad aprire una nuova finestra delle dimensione che voglio io, senza barre ecc, ad esempio per mostrare un'immagine? devi inserire nel body della pagina:

      <body onUnload="popup('paginachevuoiaprire.htm', 200, 200, 40, 40); return true;">

      Naturalmente lo puoi configurare come vuoi.

    9. Come si disattiva il tasto destro del mouse?
      È possibile disattivarlo solo per le immagini?

    10. 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 È possibile nascondere il codice HTML? e Come posso evitare che le immagini del mio sito possano essere salvate?. 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();">

    11. Vorrei mettere un'immagine in basso a destra in ogni pagina. Come posso fare?

    12. 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>

    13. Come si fa ad aprire una finestrella popup quando si carica una pagina?

    14. Se vuoi utilizzare lo script presentato nella FAQ 4.2 Come si fa ad aprire una nuova finestra delle dimensione che voglio io, senza barre ecc, ad esempio per mostrare un'immagine? devi inserire nel tag body:

      <body onUnload="popup('paginachevuoiaprire.htm', 200, 200, 40, 40); return true;">

      Naturalmente lo puoi configurare come meglio desideri.

    15. Come faccio a ridimensionare la finestra corrente a 800×600?

    16. ATTENZIONE: alcuni utenti potrebbero rimanere molto seccati da questa manovra; cercate di avvertirli prima di perderli per sempre :-)

      Innanzitutto si deve inserire questo script nell'HEAD della pagina.

      <script language="javascript">
      <!--
      // browser window auto resize at 800×600
      // Ridimensionamento automatico della finestra a 800*600
      // by Massimo Arcari, mail: massimo-arcari[at]mclink[dot]it

      function dimensione() {
      if (screen.height<600) {
      alert('Questo sito viene visto meglio alla risoluzione di 800x600 pixel, le impostazioni correnti del monitor non garantiscono una visualizzazione ottimale.');
      }
      else if (screen.height==600) {
      alert('Questo sito viene visto meglio alla risoluzione di 800x600 pixel, aprire completamente la finestra del browser per avere una visualizzazione ottimale.');
      }
      else if (screen.height>600) {
      if ( confirm('Questo sito viene visto meglio alla risoluzione di 800x600 pixel, la finestra corrente verra ridimensionata per avere una visualizzazione ottimale. Le impostazioni del monitor non verranno toccate.')) {
      if (navigator.appName == "Netscape") {
      window.resizeTo(796, 439);
      }
      else {
      window.resizeTo(808, 580);
      };
      }
      }
      }
      // -->
      </script>

      Per l'uso in una struttura con i frame basta modificare due righe:

      window.resizeTo(796, 439);
      diventa:
      parent.window.resizeTo(796, 439);

      window.resizeTo(808, 580);
      diventa:
      parent.window.resizeTo(808, 580);

      I messaggi di avviso sono modificabili a piacere, a 640×480 e a 800×600 si limita ad avvisare, a risoluzioni maggiori ridimensiona la finestra chiedendo la conferma.

      Lo script va richiamato con
      <body onLoad="dimensione()">



  5. LINK

    1. Come posso usare un link per attivare una funzione JavaScript?

    2. È 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.

    3. Come si fa ad aprire un link in una nuova finestra?

    4. <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 Come si fa ad aprire una nuova finestra delle dimensione che voglio io, senza barre ecc, ad esempio per mostrare un'immagine?

    5. Quando passo sopra ad un'immagine o un link con il mouse compare la descrizione in un box giallo. Come si crea?

    6. 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>

      Prova qui!

    7. Come si fa a simulare il tasto "indietro" del browser?

    8. È sufficiente questo semplice JavaScript:

      <a href="javascript:history.back();">Torna indietro</a>

    9. Come si fa a simulare il tasto "avanti" del browser?

    10. È sufficiente utilizzare questo semplice JavaScript:

      <a href="javascript:history.forward();">torna avanti</a>

    11. Come si fa a simulare il tasto "aggiorna" del browser?

    12. È sufficiente questo semplice JavaScript:

      <a href="javascript:location.reload();">Aggiorna</a>

    13. Come si fanno i menu di link con select?

    14. Innanzitutto bisogna decidere che tecnica usare, ovvero se andare al link specificato direttamente dopo aver selezionato l'opzione oppure se prima bisogna premere un tasto "Vai".

      Il primo sistema si sviluppa così:

      <form name="navi" action="link_1.htm">
       <select size="1" name="links" onChange="document.location =
      document.navi.links.options[document.navi.links.selectedIndex].value">
        <option value="link_1.htm">Link 1</option>
        <option value="link_2.htm">Link 2</option>
        <option value="link_3.htm">Link 3</option>
       </select>
      </form>

      mentre il secondo si fa così:

      <form name="navi" action="link_1.htm">
       <select size="1" name="links" onChange="document.navi.action = document.navi.links.options[document.navi.links.selectedIndex].value">
        <option value="link_1.htm">Link 1</option>
        <option value="link_2.htm">Link 2</option>
        <option value="link_3.htm">Link 3</option>
       </select><input type="submit" value="Vai">
      </form>

    15. Cosa sono e come si creano i link relativi?

    16. I link relativi sono dei collegamenti a risorse che si trovano all'interno dello stesso server. Sono molto utili perché permettono di creare un sito web e spostarlo da un server all'altro senza dover cambiare tutti i collegamenti fra pagine, immagini ed altri elementi.
      Sono piú semplici da usare di quanto sembri, supponiamo di avere una struttura di questo genere per il sito che stiamo creando:

      
      /			[cartella principale "root"]
      index.html
      interessi.html
      img/			[cartella secondaria "img"]
      img/pippo.jpg
      img/immagini.html
      

      - per rimanere all'interno della stessa directory basta creare il link al file senza aggiungere altro. Esempio: sto lavorando sul file "index.html" e voglio creare un link al file "interessi.html", non devo aggiungere altro al nome del file.
      <a href="interessi.html">Interessi</a>

      - per entrare in una directory inferiore è sufficiente aggiungere il nome della directory. Esempio: sto lavorando sempre sul file "index.html" e voglio inserire l'immagine "pippo.jpg" che si trova nella cartella "img", in questo caso è sufficiente aggiungere il nome della cartella prima del nome del file.
      <img src="pippo.jpg" width="100" height="100" alt="">

      - per entrare in una directory superiore invece bisogna aggiungere ../ davanti al nome del file o della directory tante volte quante son o le directory da risalire. Esempio: sto lavorando su "immagini.html" contenuto nella directory e voglio creare un collegamento a "index.html" che si trova nella directory principale. Devo risalire di una sola directory quindi inserisco ../ solo una volta.
      <a href="../index.html">Homepage</a>

    17. Come si fa a nascondere l'indirizzo reale di un link che appare nella barra di stato?
      È possibile sostituirlo con qualcos'altro?

    18. È sufficiente un semplicissimo JavaScript applicato al link:
      <a href="pippo.html" onMouseOver="window.status='Questo testo appare nella barra quando ci passo sopra con il mouse.';return true;" onMouseOut="window.status='Quando mi allontano con il mouse compare questo testo.';return true">Prova qui!</a>

      Prova qui!



  6. MULTIMEDIA

    1. Come posso inserire un suono o una musica (midi, wave) in sottofondo, compatibile sia con IE che con NN?

    2. Usando il tag embed

      <embed
      SRC="miofile.mid" : Url del file da eseguire (.mid, .wav, .mp3, .au ... )
      width="10" : Larghezza in pixel del lettore nella pagina
      height="10" : Altezza in pixel del lettore nella pagina
      hidden="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>

    3. Ho messo una musica di sottofondo nel mio sito, ma quando si cambia pagina ricomincia ogni volta. Cosa posso fare?

    4. 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 Come si fa ad aprire una nuova finestra delle dimensione che voglio io, senza barre ecc, ad esempio per mostrare un'immagine?) oppure caricare in un frame nascosto una pagina che contiene il tag EMBED (vedi FAQ Come si fanno i frame nascosti?).

    5. Come posso inserire file multimediali Real Media nel mio sito?

    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>



  7. EFFETTI - STILE

    1. Come si fa lo sfondo fisso in una pagina?
      Lo sfondo fisso funziona anche con Netscape?

    2. 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.

    3. Come si fa a mettere l'icona personalizzata quando si aggiunge il sito ai preferiti?

    4. 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.



  8. MODULI - FORM

    1. Come posso ricevere via e-mail i dati di un form?

    2. 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 sviluppato dal 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.

    3. Come si fanno i link con i pulsanti di un form?

    4. 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>

    5. Come posso controllare l'ordine di tabulazione all'interno di un form?

    6. Il W3C ha inserito nelle specifiche dell'HTML 4.x l'attributo tabindex per gli elementi A, AREA, BUTTON, INPUT, OBJECT, SELECT e TEXTAREA.
      Ecco un esempio:
      <form action="..." method="post">
        <p>
          <input tabindex="1" type="text" name="campo_1">
          <input tabindex="2" type="text" name="campo_2">
          <input tabindex="3" type="submit" name="invia">
        </p>
      </form>

      Attenzione: attualmente questo attributo è supportato solamente da Internet Explorer

    7. È possibile disabilitare un elemento di un form?

    8. Si può utilizzare l'attributo disabled per gli elementi BUTTON, INPUT, OPTGROUP, OPTION, SELECT e TEXTAREA.
      Ecco un esempio:
      <input disabled name="criterio" value="avanzato">

      Attenzione: l'unico modo per modificare il valore dell'attributo è quello di utilizzare uno script.



  9. FRAME

    1. Come si fa a caricare 2 frame con un solo click?

    2. <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)

    3. Come si fa ad aprire un link in un altro frame?

    4. 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 Come si fa ad aprire un link in una nuova finestra?

    5. Perché i miei frame sono completamente sballati con Netscape mentre con IE funzionano benissimo?

    6. 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.

    7. Come si fa a visualizzare il titolo della pagina corrente al posto di quello del frameset?

    8. È 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>

    9. Come faccio a togliere il bordo attorno ai frame?

    10. 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. È consigliabile pertanto usare il codice dell'esempio, poiché è quello che rispetta appieno le specifiche dell'HTML 4.1.

    11. Come si fanno i frame nascosti?

    12. Anche se 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>


  10. SERVIZI - Chat, forum, contatori...

    1. Come posso inserire un contatore nel mio sito?
      Come posso inserire un contatore con FrontPage?

    2. 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

    3. Dove trovo una chat per il mio sito?

    4. 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

    5. Dove trovo un guestbook per il mio sito?

    6. I servizi gratuiti sono molti: eccone alcuni.
      http://www.risorse.net/gratis
      http://www.bravenet.com

    7. Dove trovo un forum per il mio sito?

    8. I servizi gratuiti sono molti: eccone alcuni.
      http://www.risorse.net/gratis/
      http://www.bravenet.com

    9. Come posso inserire nel mio sito un servizio di invio SMS?

    10. 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://www.agenda.it/

      Trovate le recensioni di questo tipo di servizi all'interno del sito: http://www.risorse.net/gratis/

    11. Dove trovo un servizio gratuito di redirect per il mio sito?

    12. I servizi sono moltissimi, qui trovi solo un piccolo elenco.

      Per altri esempi cerca in http://www.risorse.net sezione gratis.



  11. DOWNLOAD DI FILE

    1. Vorrei dare la possibilità di fare il download di file dal mio sito. Come si fa?

    2. Devi semplicemente creare un link al file che intendi far scaricare

      <a href="miofile.zip">Scarica il file</a>

      Ricordati che certi tipi di file, tra cui .mid, .doc, .mp3 se vengono linkati direttamente verranno scaricati nella cache e aperti direttamente del browser. Per evitare questo il sistema migliore è quello di zippare i file, ricordandosi però di indicare dove poter reperire il programma per decomprimerli una volta scaricati.
      Un file .doc si riduce mediamente dell'80% con la compressione zip.

    3. Come si fanno a contare i download di un file?

    4. 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.



  12. E-MAIL

    1. Come faccio a mandare un'e-mail a più persone usando mailto:?

    2. È 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!

    3. Usando mailto: è possibile specificare anche il subject e il body di un'e-mail?

    4. 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. Inoltre è accertato che NON FUNZIONA se l'utente utilizza Eudora o un altro client di posta elettronica diverso da quello fornito con il browser. Usatelo quindi ESCLUSIVAMENTE 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. È il modo più semplice per fare in modo che gli spazi (codificati come %20) vengano interpretati correttamente dal browser, altrimenti potremmo avere grossi problemi...

      PROVA cliccando qui!

    5. Ho usato un mailto: per spedire i dati di un form, ma il risultato è illeggibile! Cosa posso fare?

    6. 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">


  13. IMMAGINI

    1. Ho pubblicato il mio sito. Perché sul mio hard-disk funziona tutto mentre su Internet non vedo le immagini?

    2. 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. "/" da solo indica la root del server, usatelo solo se sapete benissimo quello che state facendo ;).

      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. È meglio usare esclusivamente lettere minuscole senza spazi e senza accenti per evitare problemi.

    3. Come faccio a togliere il bordo blu dalle immagini-link?

    4. 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="">

    5. Cosa si usa per dividere le immagini a "fette"?
      Che cos'è lo "slicing"?

    6. 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.

    7. Come si fanno collimare perfettamente due immagini?

    8. È importante che le due immagini abbiano esattamente la stessa altezza (in pixel) se le vogliamo avvicinare 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>

    9. Come posso evitare che le immagini del mio sito possano essere salvate?

    10. In linea di massima non si può. È 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%).

    11. Che cosa sono le thumbnail?

    12. 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.

    13. È vero che bisogna mettere l'ALT anche nelle immagini che non ne hanno bisogno?

    14. 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="">

    15. Come si fanno le immagini rollover?
      Come si fanno le immagini che cambiano al passaggio del mouse?

    16. 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ù personalizzabile.

      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!

      Se volete scambiare un'altra immagine invece di quella che subisce il rollover, date un'occhiata alla faq successiva

    17. Come si fanno i rollover che scambiano un'altra immagine all'interno della pagina?

    18. Il principio di funzionamento, come avrete già intuito, è sempre lo stesso. In questo caso però, invece di specificare il nome della stessa immagine, bisogna specificare il nome dell'immagine "bersaglio".

      In questo esempio scambieremo l'immagine "didascalia" con una che contiene la descrizione di cosa visiteremo cliccando sul link.

      <!-- L'immagine che segue viene scambiata passando sui vari link -->
      <img src="dida_vuota.jpg" name="didascalia" alt="Didascalia">
      <!-- Le immagini che seguono fanno cambiare la didascalia quando ci passiamo sopra con il mouse -->
      <a href="link_1.htm"
      onMouseOver="document['didascalia'].src = 'dida_1.jpg';"
      onMouseOut="document['didascalia'].src = 'dida_vuota.jpg';">
      <img src="img_1.jpg" name="immagine1" border="0" alt="Link 1">
      </a>
      <a href="link_2.htm"
      onMouseOver="document['didascalia'].src = 'dida_2.jpg';"
      onMouseOut="document['didascalia'].src = 'dida_vuota.jpg';">
      <img src="img_2.jpg" name="immagine1" border="0" alt="Link 2">
      </a>
      <!-- Naturalmente funziona anche con i link di testo! -->
      <a href="link_3.htm"
      onMouseOver="document['didascalia'].src = 'dida_3.jpg';"
      onMouseOut="document['didascalia'].src = 'dida_vuota.jpg';" title="Link 3">Link 3</a>

    19. Come si fanno le immagini mappate?

    20. 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">

    21. GIF o JPEG?

    22. La risposta più corretta è "Dipende..."

      GIF

      • Immagini con pochi colori
      • Testi
      • Loghi
      • Mappe, carte stradali < 256 colori
      • Immagini con trasparenze
      • Piccole animazioni

      JPEG

      • Fotografie
      • Immagini con molti colori



  14. TABELLE

    1. Si può inserire la barra di scorrimento nella cella di una tabella?

    2. 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 Qual'è la sintassi corretta del tag iframe?

    3. Perché Netscape non mi visualizza alcune celle di una tabella?

    4. Molto probabilmente si tratta di celle vuote. Una soluzione "indolore" è quella di inserirvi qualcosa di invisibile, come un &nbsp; oppure &#160; oppure ancora una GIF trasparente. Lo spazio da solo non funziona perché viene ignorato.

      Esempio 1

      <table>
       <tr>
        <td>&nbsp;</td>
       </tr>
      </table>

      Esempio 2

      <table>
       <tr>
        <td>&#160;</td>
       </tr>
      </table>

      Esempio 3

      <table>
       <tr>
        <td><img src="empty.gif" width="1" height="1" alt=""></td>
       </tr>
      </table>



  15. CSS - FOGLI STILE

    1. Come si fanno il link di testo non sottolineati?

    2. Basta inserire questa "cosa" tra i tag <head> e </head> della pagina, in questo caso poi la sottolineatura si vede solamente passando con il mouse sopra il link:

      <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.

    3. È possibile attivare l'hover anche per i link già visitati?

    4. 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>

    5. Posso avere due set di link di colore diverso?

    6. 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>

    7. Come si fa cambiare il colore di un link al passaggio del mouse?

    8. Come nelle risposte precedenti è sufficiente un piccolo CSS:

      <style type="text/css">
      <--
      a:hover { color: #FF0000; }
      // -->
      </style>


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.

 



Disclaimer

SourceNet non riconosce nessun tipo di garanzia per il contenuto di tutta la sezione dedicata alle FAQ sul linguaggio HTML pubblicata su questo sito (SourceNet Italia).
Tutto il contenuto della FAQ sul linguaggio HTML è fornito "così come è", senza alcuna garanzia di qualsiasi tipo, sia espressa che implicita, ivi incluse, senza limitazioni, le garanzie implicite di commerciabilità o idoneità per uno scopo particolare ovvero quelle che escludano la violazione di diritti altrui. L'intero rischio derivante dall'uso o dalle prestazioni del contenuto di tutta la sezione della FAQ sul linguaggio HTML rimane a carico dell'utente.


Copyright

Il contenuto della sezione delle FAQ sul linguaggio HTML situata in questo sito è la copia della FAQ sul linguaggio HTML di Andrea Bergamasco, situata all'indirizzo http://www.ealore.com/html.
Il contenuto dell'intera FAQ sul linguaggio HTML è di proprietà di Andrea Bergamasco.


Note sulla revisione

La versione di questa FAQ in italiano è aggiornata alla versione 2.2b (28/11/2000) della FAQ sul linguaggio HTML di Andrea Bergamasco.


Pagine FAQ sulla programmazione

 

Torna ad inizio pagina

Le FAQ sul linguaggio C ] Le FAQ sul linguaggio C++ ] [ Le FAQ sul linguaggio HTML ] Le FAQ sui Modem ] Le FAQ sul linguaggio Java ] Le FAQ su Outlook Express e sul prefisso R: ] Le FAQ su Outlook Express 5 ] Le FAQ sul linguaggio Perl ] Le FAQ sui dischi rigidi ] Le FAQ sui modem Conexant ] Le FAQ sul linguaggio C++ ] Le FAQ su GeForce ] La FAQ su Hamster ]

Ultimo aggiornamento : 17/01/2009.   
Home ] Su ] Novità ] Hardware ] Software ] Windows ] Sicurezza ] Linguaggi ] Cerca ] Contatta ] Guestbook ] Mappa ] Info su... ]

Copyright © 1997-2070, Joseph Parrello. Tutti i diritti sono riservati.

Siete il visitatore n. Contatore Sito
Bpath Contatore
dal 17 gennaio 2009.