Linguaggio HTML. Corso Internet Istituto Comprensivo di Cerreto Appunti HTML

Transcript

1 Linguaggio HTML Un documento HTML è composto da due sezioni ben distinte: una parte iniziale denominata testa <HEAD> ed una centrale denominata corpo <BODY> Nella testa (head) vanno messi quei comandi che inviano informazioni al server (lo spazio web che si trova in rete) o quel codice che deve essere letto con una certa priorità: script, fogli di style, ecc. ecc. Nel corpo (body) tutto il resto. Anche questi elementi, necessitano del relativo elemento di chiusura: e </body> Riassumendo, una struttura HTML tipo potrebbe essere questa: codice per il server, scritps, fogli di style. codice da visualizzare come documento: testo ed immagini </body> </html> Per il momento all'interno di <Head> non metteremo nulla, si vedrà più avanti cosa inserire, adopereremo quindi soltanto la zona. Col vostro editor create la struttura sopra e portatevi col cursore all'interno degli elementi (tags)... </body> Inseriremo del testo, per cui lo faremo precedere dall'elemento <p> che significa: paragrafo, andremo a scrivere un qualsiasi testo: "questa è la mia prima pagina web" per esempio, facciamo in modo di chiudere anche l'elemento <p> con il relativo </p>. Se tutto è stato fatto correttamente dovremo avere una struttura di questo genere: <p> Questa è la mia prima pagina web </p> </body> </html> Non importa come avete disposto le frasi del testo, potete lasciare spazi o ritornare a capo quante volte volete, nessuna importanza; il browser ignorerà il vostro modo di scrivere limitandosi a leggere ed interpretare soltanto gli elementi validi di html. (più avanti si vedrà come lasciare spazi e come andare a capo) A questo punto non resta che salvare il tutto. Se il vostro editor non è specifico per html, fate in modo di salvare in formato ascii, cioè testo puro. Assegnategli un nome: quello che volete, e salvatelo nel vostro PC anche se aarebbe meglio chiamare la pagina iniziale del sito col nome index.html (tutto minuscolo e con html finale) perchè è questo il nome esatto che di solito il server in rete va a ricercare come pagina iniziale del sito. Se non avete un editor che salva direttamente in html con molta probabilità il vostro file avrà un estensione di tipo.txt, ovvio direte voi, visto che è stato scritto con un normale editor per testi. Rinominate questo file in modo che abbia come estensione htm o html altrimenti il browser non riuscirà ad interpretarlo in modo corretto. A proposito di questa operazione di rinomina file dovrei fare alcune precisazioni: l'operazione di per se è molto semplice ma chi adopera Windows potrebbe non vedere l'estensione finale del file appena salvato, in questo caso rinominarlo servirebbe a poco dal momento che windows aggiungerebbe si html al nome appena assegnato, lasciando però di fatto il file in formato txt. Abbiamo visto nella lezione precedente, come creare la nostra prima pagina web mettendo al suo interno una qualunque scritta generica, allo stesso identico modo avremo potuto scrivere un intero libro se solo avessimo voluto farlo. Ma un testo ha bisogno di essere formattato per essere facilmente leggibile; ed è proprio di questo che ci occuperemo in questa lezione. Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato e salvato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui avevate inserito l'elemento paragrafo <p> e precisamente fra la lettera p e la chiusura della parentesi angolare immediatamente alla sua destra. Digitate uno spazio ed inserite l'attributo align="xxx" dove xxx è uno dei seguenti validi attributi: center, left, right, justify. Questi servono rispettivamente per allineare il testo al centro, al margine sinistro, al margine destro, giustificato per entrambi i margini. Se avete eseguito correttamente le istruzioni, dovreste avere qualcosa di questo tipo: <p align="left">questa è la mia prima pagina web</p> Vediamo i vari risultati a video: <p align="left">questa è la mia prima pagina web allineata a sinistra</p> Questa è la mia prima pagina web allineata a sinistra <p align="right">questa è la mia prima pagina web allineata a destra</p> Questa è la mia prima pagina web allineata a destra <p align="center">questa è la mia prima pagina web allineata centrale</p> Questa è la mia prima pagina web allineata centrale <p align="justify">questa è la mia prima pagina web giustificata</p> A.S. 2007/ A.S. 2007/2008 2

2 Questa è la mia prima pagina web giustificata, la sola frase non contiene una quantità di testo sufficiente per poterne vedere l'effetto giustificato, così scrivo qualcosa in modo da aggiungerne e rendere meglio l'idea di come avviene la giustificazione su entrambi i lati adoperata spesso per testi lunghi e ben formattati. Ecco fatto, dovrebbe essere sufficiente, guardate i due margini, sono entrambi allineati. Digitando del testo vi accorgerete presto che a differenza degli editor normali, ogni volta che volete tornare a capo non basta la semplice pressione del tasto invio. Nelle pagine web per tornare a capo si fa uso dell'elemento <br> oppure aprendo e chiudendo un nuovo paragrafo <p></p> Vi accorgerete anche che inserendo più spazi fra una parola e l'altra questi non saranno visualizzati, saranno ignorati tutti quanti lasciando il posto ad uno solo spazio. Provate voi stessi per rendervene conto. Più avanti nella lezione dedicata alla cosmesi del testo vedremo anche altre cose che non è possibile fare in html o almeno non così come siamo abituati a fare con un normale editor di testi. Le Immagini Abbiamo visto nella lezione precedente, come creare la nostra prima pagina web, abbiamo inserito anche del testo, ma in una "bella" pagina web che si rispetti non possono mancare le immagini, ed è proprio di queste che ci occuperemo in questa lezione. Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui dovrà essere inserita l'immagine, questo il TAG o elemento, da adoperare: <img src="xxxxxxxxx.yyy"> Dove xxxxxxxxxxx è il nome della vostra immagine e yyy la sua estensione. Le immagini consentite dal linguaggio html sono.gif.jpg e.png Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle trasparenze (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg essendo questo un formato compresso risulta molto più veloce da caricare; un aspetto quest'ultimo da non trascurare mai quando si adoperano immagini. Ricordatevi che dimensioni esagerate significa anche peso esagerato; sulla rete un'immagine da 200 Kb spesso induce il visitatore ad abbandonare il sito prima ancora che questa sia stata completamente visualizzata, ricordatevi anche che nonostante le attuali linee superveloci ADSL ci sono ancora molti utenti che accedono alla rete con modem analogici da 56Kb, fate dunque in modo da evitare nel modo più assoluto queste immagini pesanti, ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili". Il formato.png nato ultimamente più per problemi legali che non per reali esigenze tecniche, è adoperato molto raramente in quanto non risulta poi così "ottimale", ma questo è un mio modesto parere per altro molto personale. Detto questo, passiamo ad inserire la nostra prima immagine. Supponiamo che questa si chiami web-link.gif, sarà inserita nel listato in questa maniera: <p>questa è la mia prima pagina web </p> <img src="weblink.gif"> </body> </html> Notate la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con <p>, infatti il tag per le immagini non ha il relativo tag di chiusura, quindi non serve mettere </img>. Noterete anche che dopo la parola chiave: img, che indica appunto "immagine", c'è un: "src" che significa: source, ovvero sorgente, cioè quale immagine deve essere visualizzata. Questo nome va inserito all'interno dei doppi apici, ed è praticamente il nome dell'immagine stessa. Tutto chiaro? Perfetto, se adesso salvate il vostro file sovvrascrivendo quello che avevate richiamato e lo andate poi a visualizzare, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo ma non si vede. Come mai? Semplice, vi serve un'immagine che si chiami "web-link.gif" e che si trovi nella stessa cartella dove si trova il file html, cioè questo file che avete appena modificato e salvato. A questo punto vi consiglio di lasciare perdere l'immagine web-link.gif e procuratevi una qualsiasi immagine vostra, quella che preferite, a patto che sia in uno dei due formati gif o jpg, mettetela nella stessa cartella dove avete il file html e cambiate il nome all'interno di SRC=" " inserendo il nome della vostra immagine, fatto? Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine e scrivete: La mia prima pagina web ha finalmente anche la sua prima immagine. Se avete fatto tutto quanto correttamente, la vostra pagina comincia a prendere consistenza, con la stessa procedura potete inserire tutti i testi e le immagini che vorrete, ricordandovi sempre di non superare mai certe dimensioni. Tante piccole immagini vengono sommate e potrebbero creare lo stesso problema di una sola immagine da molti kb. Per evitare questo conviene suddividere in più pagine i documenti lunghi o ricchi di immagini fotografiche. Prima di proseguire vediamo cosa potremo aggiungere al tag: <img src="foto.gif"> Intanto se la nostra fotografia non si trovasse nella stessa cartella dove c'è il file che la richiama, dovremo necessariamente farla precedere dal "path" cioè il percorso che specifica appunto la sua posizione all'interno del vostro PC, questo potrebbe essere anche un URL valido, cioè un indirizzo di un sito Internet che la contiene, in questo caso però l'immagine sarà visibile soltanto nel caso in cui siate collegati alla rete internet. A.S. 2007/ A.S. 2007/2008 4

3 Questi alcuni probabili validi percorsi: Da notare che fra un attributo e l'altro si lascia uno spazio vuoto. <img src="nome_cartella/miosito.gif"> <img src=" <img src="../nome_cartella/miosito.gif"> Se specifichiamo le dimensioni dell'immagine, aiuteremo il browser a visualizzare tutta la pagina con molta più rapidità, per cui sarebbe opportuno inserire sempre queste informazioni. Per farlo si adoperano i due termini in lingua inglese per larghezza ed altezza: <img src="weblink.gif" width="64" height="128"> I numeri 64 e 128 sono pixel, l'unità di misura dell'immagine stessa, rispettivamente: width per la larghezza, e height per l'altezza. E' anche possibile specificare se l'immagine deve avere un bordo e di quale spessore; per ottenere questo si adopera l'attributo: border dove è ammesso anche il valore zero nel caso in cui non si volesse alcun bordo. Attenzione: se non viene specificato alcun border, nel senso che l'attributo viene omesso sarà assunto per default un bordo impostato ad 1 e spesso oltre che fastidioso risulta non voluto, per questo che conviene inserirlo sempre. <img src="weblink.gif" width="64" height="128" border="0"> Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari, <queste> e potrebbero essere messi anche in ordine diverso da quello che ho adoperato io purché ne sia rispettata la corretta sintassi, e per sintassi intendo il segno di = uguale e le virgolette ", anzi i doppi apici". Ci sono poi molti altri attributi che potrebbero essere inseriti allo stesso modo. alt = nome dell'immagine. Questo nome viene visualizzato passando sull'immagine stessa con il puntatore del mouse ed è ritenuto molto importante per chi naviga con la visualizzazione delle immagini disabilitata o per i non vedenti. align = Allineamento dell'immagine: destro, sinistro, nel mezzo, sopra, sotto. Tutti questi termini vanno scritti con l'equivalente termine in lingua inglese: right, left, middle, top, bottom. hspace = Spazio laterale destro e sinistro dall'eventuale testo, da un'altra immagine o dal bordo di una tabella se inserita al suo interno. Questo valore è espresso in pixel. vspace = Spazio laterale sopra sotto dall'eventuale testo, da un'altra immagine o dal bordo si una tabella se inserita al suo interno. Questo valore è espresso in pixel. Gli attributi inseribili all'interno del tag IMG sono molti di più, ma visto il loro utilizzo e considerato che queste lezioni sono destinate ai principianti, credo che quelli citati siano più che sufficienti per coprire la maggior parte delle necessità. Questo un esempio di un richiamo ad un'immagine adoperando tutti gli attributi fino ad ora descritti. <img src="weblink.gif" width="64" height="128" border="0" alt="weblink tutto per la tua pagina web" align="left" hspace="20" vspace="30"> Nota: il nome dell'immagine deve essere scritto esattamente come realmente è, rispettando cioè eventuali maiuscole/minuscole/spazi, questo perché a differenza di windows che non farebbe alcuna distinzione, una volta trasferito il lavoro sul server l'immagine di nome Web-link.gif sarà considerata un'immagine diversa dalla stessa immagine che si chiamasse invece WEB-link.gif (differenza dovuta alle maiuscole). I Links o le Ancore Dopo aver visto come inserire testo e immagini, non resta che affrontare l'argomento che da vita alla grande rete: i links o ancore, cioè quelle scritte interattive che se cliccate col mouse danno modo di saltare da una pagina all'altra o come spesso succede da un intero sito all'altro. Sono proprio queste Ancore, o links ipertestuali, che hanno decretato il successo del web. Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato, quella della lezione precedente per capirci. Posizionate il cursore nel punto esatto in cui dovrà essere inserita un'ancora, questo il TAG da adoperare: <A> </A> A come ancora... così da solo senza altri attributi è praticamente inutilizzabile, ma vediamolo combinato con l'attributo: HREF per esempio. HREF significa hypertext reference, indica che ciò che si trova fra le ancore di apertura e chiusura diventerà un collegamento ipertestuale, ovvero sarà richiamata un'altra pagina o un punto preciso della stessa pagina, quello specificato nell'attributo stesso. Vediamo un esempio pratico, supponiamo che nella pagina web ci sia un link al mio sito: (uno sito a caso tanto per cambiare ) Sarà sufficiente specificarlo in questo modo: <A HREF=" </body> </html> Notate la sintassi del comando, la parola web-link è l'unica cosa che si vedrà sulla pagina, si trova fra i due tags Ancora, di cui il primo <A> ha l'attributo Href che indica quale URL valido richiamare nel momento in cui viene fatto clic sulla scritta, l'ultimo </A> è la chiusura che delimita la frase diventanta link, da non dimenticare mai per evitare che tutto il resto della pagina da quel punto in avanti diventi un link! A.S. 2007/ A.S. 2007/2008 6

4 Potrei sostituire la scritta Web-Link con una qualsiasi altra parola o frase, oppure adoperare delle immagini, il risultato sarebbe comunque lo stesso, tutto ciò che si trova fra i due tags ancora, se cliccato, porterebbe all'apertura del link specificato in questo caso il sito perché è quello l'indirizzo specificato dopo HREF. Se al posto dell'indirizzo web URL avessi inserito il nome di un'altra mia pagina (pagina2.htm) avrei dato vita ad un sito vero e proprio formato da due pagine web. Fate attenzione, se io introducessi una immagine al posto della scritta darei vita ad un processo chiamato nidificazione degli elementi (tags), cioè si possono inserire elementi html all'interno di altri elementi html, questo perché ogni elemento ha i suoi attributi ed i suoi effetti e trovandosi all'interno di un altro elemento eredita eventuali attributi dell'elemento che lo incorpora. <A HREF=" src="weblink.gif" width="64" height="128" border="0" alt="weblink"></a> </body> </html> Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio <A HREF=" è possibile specificare anche : <A HREF="ftp://..."> <A HREF="mailto:..."> <A HREF="news:..."> <A HREF="nomefile.zip"> <A HREF="nomepagina.html"> Che servono rispettivamente per: <A HREF="ftp://..."> Collegamento ad un sito FTP. <A HREF="mailto: nome@server"> Indirizzo di posta elettronica per la spedizione di una all'indirizzo specificato, facendo uso del proprio programma di posta elettronica. <A HREF="news:..."> Collegamento ad un gruppo di discussione (newsgroup Usenet). <A HREF="nomefile.zip"> Scaricamento (download) di un file in formato compresso. <A HREF="nomepagina.html"> Collegamento ad altra pagina all'interno della stessa cartella. Ci sarebbero anche altre possibili forme di links quali: gopher, nntp, telnet, wais, newsrc; ma visto il loro raro utilizzo ritengo che possano servire soltanto per creare confusione e questo non soltanto ad un principiante. Considerate che la pagina richiamata dal link andrà a sostituire la pagina richiamante, se non è questo l'effetto desiderato, è possibile aggiungere un attributo che specifica dove aprire questa pagina, o meglio su quale finestra del browser di navigazione dovrà essere aperta. Vediamo come: target="nome della finestra" Se avete un sito strutturato con frames, cioè i diversi riquadri all'interno di una finestra principale, potete specificare il nome del riquadro nel quale vedere il risultato del link, oppure fare in modo che si possa aprire una nuova del browser adoperando la parola riservata: _blank. che significa appunto questo. Vediamo un esempio completo: <A HREF=" target="_blank">web-link</a> </body> </html> Una nuova finestra sarà aperta in modo da mantenere anche la vostra, quella dalla quale è stato possibile fare il clic sul link, per cui ci saranno due finestre del browser aperte una con la vostra pagina e l'altra con la pagina associata al link. A questo punto conoscete tutto ciò che serve per creare un sito, si ho detto sito e non più pagina web, infatti con l'inserimento del tag ANCORA è possibile passare da una pagina all'altra dando vita ad un vero e proprio sito: il vostro. Caratteri speciali, fonts e cosmesi del testo Se avete seguito con profitto le lezioni precedenti dovreste essere in grado di scrivere la vostra pagina web completa di testo, immagini e links vari. Forse vi sarete già accorti che scrivendo in HTML non sempre è possibile ottenere lo stesso risultato che si ottiene con la normale scrittura di un testo. Certi caratteri infatti hanno regole ben precise, si tratta semplicemente di conoscerle ed applicarle. Una delle prime cose che si nota è la difficoltà di poter lasciare più di uno spazio vuoto fra una parola e l'altra. Html infatti ignora tutti gli spazi inseriti con il metodo normale e ne lascia di fatto uno soltanto, provate dunque a scrivere una frase mettendo più spazi vuoti fra le varie parole, provate poi a guardare il risultato sul vostro browser, noterete con sorpresa che tutti gli spazi sono A.S. 2007/ A.S. 2007/2008 8

5 stati ignorati e sostituiti da uno soltanto, questa è una caratteristica di HTML, come fare allora per averne più spazio nel caso in cui servisse distanziare le parole? Con appositi codici che servono esclusivamente ad introdurre spazi: Questo simbolo significa non-breaking space, (da notare che non va inserito fra parentesi angolari non essendo un elemento o tag), se ne possono mettere tanti quanti sono gli spazi desiderati, così facendo il browser eseguirà la richiesta. Anche tornare a capo diventa difficile all'interno di uno stesso paragrafo; come già detto nella prima lezione: la semplice pressione del tasto invio (o return a seconda del tipo di tastiera), non è sufficiente per forzare un ritorno a capo, per fare questa operazione si adopera il tag <BR> maiuscolo o minuscolo che sia non importa, questo tag forza un ritorno a capo, più <br> consecutivi equivalgono a più ritorni a capo quindi saltare tante righe quanti sono i BR inseriti. I due metodi sopra sono di gran lunga i più adoperati durante la scrittura di un testo html, da qui la logica considerazione: per ottenere un semplice spazio vuoto c'è bisogno di un'operazione macchinosa come digitare quella sequenza di 5 caratteri? Se adoperate un normale editor di testi si, se invece vi siete procurati un editor html, probabilmente si tratta di fare click su un pulsantino che introdurrà quella sequenza di caratteri, quasi come premere il tasto spazio sulla tastiera. Ci sono anche altri caratteri che conviene introdurre con le corrette regole che HTML impone, si tratta di caratteri particolari ma che spesso si adoperano nella comune scrittura; per esempio noi Italiani abbiamo le vocali accentate, se scritte come da tastiera queste potrebbero mettere in crisi il browser che le visualizza, è perciò preferibile adoperare il relativo codice per ottenerle : à = à è = è ì = ì ò = ò ù = ù Anche le doppie virgolette, le parentesi angolari e tutto quello che potrebbe essere male interpretato conviene scriverlo con il suo codice; ecco qui di seguito l'elenco dei caratteri di uso più comune: " = " & = & < = < > = > = Per concludere, alcuni caratteri speciali che potrebbero risultare utili: = = = ¼ = ¼ ½ = ½ ¾ = ¾ ¹ = ¹ º = º Per rendere una pagina più leggibile si fa spesso ricorso ad una specie di cosmesi del testo, si usa infatti sottolinearlo, enfatizzarlo, inclinarlo, ridimensionarlo, ecc. ecc. Vediamo quali sono gli elementi (tags) che producono questi effetti. <B> </B> = bold o grassetto. Tutto quello che sarà scritto all'interno dei tag <B> e </B> sarà visualizzato in grassetto, facciamo un esempio: dovendo scrivere " tutto per la tua pagina web" e volendo la scritta in grassetto, si dovrà racchiudere questa fra i due tag <B> e </B>, in questo modo: tutto per la tua pagina web. Questo il risultato: tutto per la tua pagina web Avremo potuto ottenere lo stesso risultato adoperando <strong> e </strong> che sono equivalenti. <U> </U> = Underline, sottolineato. Tutto quello che sarà scritto all'interno dei tag <U> e </U> sarà visualizzato in sottolineato, facciamo lo stesso esempio: dovendo scrivere " tutto per la tua pagina web" e volendo la scritta in sottolineato, si dovrà racchiudere questa fra i due tag <U> e </U>, in questo modo: tutto per la tua pagina web. Questo il risultato: tutto per la tua pagina web <I> </I> = Italico, inclinato. Tutto quello che sarà scritto all'interno dei tag <I> e </I> sarà visualizzato in italico, facciamo ancora lo stesso esempio: dovendo scrivere " tutto per la tua pagina web" e volendo la scritta in italico, si dovrà racchiudere questa fra i due tag <I> e </I>, in questo modo: tutto per la tua pagina web. Questo il risultato: tutto per la tua pagina web Avremo potuto ottenere lo stesso risultato adoperando <em> e </em> che sono equivalenti. Viene da se che si possono combinare i vari tag fra di loro nidificandoli e di conseguenza sommandone i vari effetti: sottolineato più grassetto più inclinato:<strong><u><i> Cerreto</i></u></strong> così da ottenere: tutto per la tua pagina web E' anche possibile cambiare il colore, le dimensioni, il tipo di carattere adoperato per la scrittura. I metodi sono due: Adoperare il tag <font> con i relativi parametri o fare uso di un foglio di style, per quest'ultimo aspetterei di aver acquisito una certa familiarità con il linguaggio html. Per il tag font invece l'operazione è molto semplice, si tratta di racchiudere il testo fra i tags <font> </font> con la consueta procedura adoperata per tutti gli altri elementi (tags). Fra gli attributi (parametri) adoperabili : color, face, size. Rispettivamente per colore, tipo di carattere e dimensioni dello stesso. A.S. 2007/ A.S. 2007/

6 Vediamo come adoperarli questi attributi: color=" " Fra le doppie virgolette sono ammessi i nomi dei colori in lingua inglese, oppure il numero del colore in formato numerico in base esadecimale (un numero formato da tre coppie esadecimali precedute dal simbolo # cancelletto). <font color="green"> o anche <font color="#008000"> produrranno lo stesso effetto e cioè questo: testo scritto in verde <font face="nome del carattere">cambia il tipo di carattere adoperando quello specificato: <font face="comic Sans MS"> Sto scrivendo con il font Comic Sans MS <font size="numero">cambia le dimensioni del carattere, dove numero può avere un valore compreso fa -6 e +7 : <font size="+3"> Sto scrivendo con un font dimensione +3 <font size="-2"> Sto scrivendo con un font dimensione -2 Anche in questo caso si possono avere più attributi e combinarli fra loro: <font color="#008000" size="3" face="comic Sans MS"> Questo il risultato: Sto scrivendo con un font dimensione 3 di colore verde e carattere Comic Sans MS Attenzione: le dimensioni del carattere dipendono anche dalle impostazioni personalizzate del browser adoperato da chi visiterà la nostra pagina, ci sono impostazioni a volte decisamente diverse da quelle da noi previste ma in questo caso possiamo fare poco visto che il problema non riguarda la nostra pagina ma le preferenze di chi la visita. head & body Nelle lezioni precedenti avete imparato la struttura base di un documento html, se avete seguito attentamente sarete in grado di creare un vostro sito web. Abbiamo spiegato come inserire testo, immagini e links, adesso vediamo come poter essere visti dai motori di ricerca e aggiungeremo alcuni attributi per il tag in modo da estendere questi attributi all'intero documento e non soltanto al singolo tag. Head Iniziamo con i MetaComandi, ovvero tags letti dalla sola rete e che non produrranno alcuna variazione visiva al nostro lavoro, che ci siano o meno sarà ininfluente ma se il sito deve essere "scovato" dai motori di ricerca sarà indispensabile farne uso. Questi metacomandi sono diversi e per svariati utilizzi, potete vederli raccolti su questa pagina:- Meta Tag - Io credo che soltanto tre siano veramente importanti e utili ai fini di essere rintracciati meglio dai motori di ricerca, in fondo all'elenco dei metacomandi raggiungibile dal link sopra, trovate un modulo per generare automaticamente questi tre meta comandi in maniera tale da personalizzarli in base all'argomento trattato dal vostro sito. Cosa sono i motori di ricerca? Quando andate sulla rete e cercate qualche argomento neppure vi rendete conto che lo fate consultando un motore di ricerca, se questo non sapesse che esiste anche la vostra pagina non potrebbe elencarla insieme a tutte le altre che trattano l'argomento ricercato. Per questo motivo è opportuno specificare nella pagina iniziale index.html almeno un minimo di informazioni relative al sito da iscrivere, lo si fa con questi comandi che hanno una sintassi simile a quella degli altri tags adoperati fino ad ora e cioè fra le parentesi angolari inseriremo il metacomando con la seguente sintassi: <meta name="xxxxxx" content="yyyyyy"> Dove al posto di xxxxxx andrà messo il nome del metacomando e al posto di yyyyyy il suo contenuto o descrizione. Come dicevo i metacomandi realmente importanti a mio avviso sono tre: titolo (title), descrizione (description), parole chiave (key words). Vediamo la loro sintassi e a cosa servono: <META NAME="DC.Title" CONTENT="Mio Titolo"> Si adopera per il titolo del documento, quindi al posto di "Mio Titolo" mettete il titolo della vostra pagina o del vostro sito. <META NAME="description" CONTENT="La descrizione del sito o della pagina"> Si adopera per la descrizione, è questo che vi identifica realmente, siate precisi nel descrivere cosa tratta il vostro sito. <META NAME="keywords" CONTENT=" le parole chiave separate da virgole"> Si adopera per dare ulteriori informazioni sull'argomento trattato, spesso si adoperano parole diverse che hanno però lo stesso significato cercando di interpretare e intuire quello che il visitatore digiterà sul motore di ricerca, faccio un esempio: chi cerca javascript potrebbe cercarlo facendo uso della parola "Javascript" ma anche con "JS" oppure con "Java Script". Tutte queste varianti possono essere inserite come keywords (parole chiave) e quindi aiutare nella ricerca. Se ne possono inserire fino a 1000 e dovranno semplicemente essere separate da una virgola e da uno spazio vuoto. Ritengo questo Meta tag il più importante in assoluto, potrei dire indispensabile. Per chiarire ancora meglio questo concetto vi riporto alcune keywords inserite nei mie metacomandi: editor, pagine, html, corsi, principianti. A.S. 2007/ A.S. 2007/

7 ATTENZIONE Questi metacomandi dovranno essere inseriti soltanto nella prima parte della struttura, e precisamente fra i tags e, e non nel body come avete fatto fino ad ora. Riprendendo lo schema della prima lezione: qui i comandi meta tutto quello che serve nel corpo del documento </body> </html> Concluderei la sezione HEAD dicendo che al suo interno trovano posto anche altri elementi (tags) relativi ai - fogli di style - e al codice di programmazione sotto forma di - script -, non ritengo sia il caso di parlarne adesso, o meglio non in questa rubrica almeno, ma se visitate i links relativi troverete comunque tutte le informazioni necessarie al loro utilizzo. Body Il tag che dichiara l'inizio del corpo del documento, supporta diversi attributi con parametri che se inseriti saranno estesi all'intero documento e non al singolo tag, vediamo i principali: automaticamente che è blù) sarà di un porpora per i links non ancora visitati e di un fucsia per quanto riguarda quelli già visti o cliccati. I Frames ovvero i riquadri, le cornici. Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per realizzare il proprio sito, i più impazienti potranno saltare alla lezione 10 dedicata alla pubblicazione in rete del lavoro svolto fino a questo momento. Gli altri proseguiranno con questa lezione leggermente più complessa delle altre e dedicata ai frames. Se il sito è formato da diversi argomenti, presto si avvertirà la necessità di usare un menù, questo sia per agevolarne la navigazione che per dare subito l'idea di quali siano i contenuti trattati. Per fare questo si ricorre alla tecnica dei frames. I Frames o cornici altro non sono che una suddivisione della finestra principale del browser in modo tale che nella stessa ci siano due o più finestre. Quante e come disporle dipende soltanto da noi, dal nostro progetto e dalla sua organizzazione. Non esistono limiti se non quelli del buon gusto e della praticità d'uso che tradotta in termini pratici significa semplicità di navigazione. In molti casi sono sufficienti due sole cornici (frames), una laterale (o superiore) dove inserire il menù e l'altra la vera e propria finestra di navigazione, quella principale. Per dare meglio l'idea vediamo un paio di esempi possibili: bgcolor = nome del colore di sfondo a tinta unita. background = nome dell'immagine gif o jpg di sfondo. topmargin = distanza in pixel dal margine superiore. bottommargin = distanza in pixel dal margine inferiore. leftmargin = distanza in pixel dal margine sinistro. rightmargin = distanza in pixel dal margine destro. link = colore dei links. vlink = colore dei links visitati. text = colore del testo. Possono essere inseriti tutti o soltanto quelli ritenuti necessari, ovviamente se si decide per bgcolors non potremo fare uso anche di background e viceversa, visto che uno escluderebbe di fatto l'altro; la sintassi è lasciare uno spazio vuoto e racchiudere fra doppi apici " " il valore dell'attributo. Un esempio: <body bgcolor="green" topmargin="10" bottommargin="10" leftmargin="5" rightmargin="5" link="purple" vlink="fuchsia"> Questa dichiarazione di attributi nel body imposterà uno sfondo a tinta unita di colore green (verde) con una distanza dal margine superiore e inferiore di 10 pixel, una distanza dai bordi laterali sinistro e destro di 5 pixel, il colore dei links anziché seguire il colore di default (quello impostato varie voci del Menù Con menù laterale, oppure: Finestra Principale varie voci del Menù A.S. 2007/ A.S. 2007/

8 <frame name="menu" src="menu.html"> <frame name="principale" src="principale.html"> Finestra Principale L'elemento o tag "frame" ha diversi attributi più o meno utili e necessari, due sono indispensabili: name che identifica il nome del frame in modo da poter visualizzare su quel frame un link proveniente da un frame diverso, e src (source) che invece richiama la pagina html vera e propria. Con menù superiore. Quale dei due schemi adottare dipende soltanto da noi, da come si è deciso di organizzare il sito, in tutti i casi bisognerà creare una nuova pagina html che contenga al suo interno il solo codice per la struttura dei frames. Questa nuova pagina richiamerà all'interno di se stessa tutte le altre pagine (in questo caso due) che si disporranno affiancate verticalmente oppure orizzontalmente. Di solito questa pagina si chiama index.html, la pagina iniziale del sito. Per prima cosa si preparano le due pagine che servono: menu.html e principale.html, potete adoperare qualsiasi altro nome, l'importante è ricordarsi di cambiare poi i riferimenti laddove io ho adoperato questi due nomi. A questo punto se avete chiamato index.html il lavoro svolto fino ad ora, rinominatelo in principale.html e andiamo a creare la nuova pagina index.html, portatevi col cursore subito sotto il tag, inserite il nuovo elemento (tag) che serve per dichiarare una struttura a frames : <frameset> Si avete capito bene, i frames non vanno inseriti dentro alla testa ne dentro al corpo della pagina ma in mezzo, esattamente dove finisce la testa ed inizia il suo corpo. L'elemento <FRAMESET> è uno di quei tags che da soli non dicono niente, necessita di almeno uno dei suoi due attributi: ROWS o COLS che servono rispettivamente per suddividere la finestra in righe o in colonne. Al suo interno possono essere contenuti annidati altri elementi, quali eventuali altri <FRAMESET> nel caso di suddivisioni multiple e complesse, oppure <FRAME> e/o <NOFRAME>. Supponendo di dover dividere la finestra in modo verticale adopereremo: <FRAMESET COLS="25%, 75%"> </frameset> Assegnando in questo caso il 25% dello spazio al frame piccolo per il menù, ed il restante 75% alla finestra principale, potremo adoperare anche valori fissi espressi in pixel nel caso in cui si debbano rispettare delle misure ben precise senza mantenere le proporzioni dovute alla risoluzione video del visitatore. Una volta stabilite nel frameset le dimensioni della suddivisione, si dovranno richiamare i due files preparati precedentemente e cioè : menu.html e principale.html in questo modo: Dal momento che i frames presuppongono una divisione, dovremo decidere se la cornice divisoria deve essere visibile oppure no, se poi il contenuto del frame menù fosse piuttosto ricco di voci, dovremo prevedere anche un'eventuale barra di scorrimento verticale, tutti questi parametri sono opzionali e dipendono soltanto dalle nostre intenzioni, a questo proposito vi rimando alla mia guida html alla voce frames. Per il momento quello che ci serve è una struttura di questo tipo: <title>struttura per frames</title> <frameset cols="25%, 75%"> <frame name="menu" src="menu.html" scrolling="auto"> <frame name="principale" src="principale.html" scrolling="auto"> </frameset> <noframes> Spiacente, il tuo browser non supporta i frames. </noframes> </body> </html> Salvate la pagina contenente il codice col nome index.html. Vorrei sottolineare che il frameset non è all'interno del tag body e neppure all'interno del tag head ma è stato scritto dopo la chiusura di head, praticamente questo dei frames è l'unico codice che non viene inserito in nessuna delle due sezioni ( head o body) come spiegato all'inizio di questa rubrica corso. Se avete salvato come index.html non resta che provare a vedere cosa succede: richiamate il file appena memorizzato dall'interno del browser, se avete preparato precedentemente i due files: menu.html e principale.html questi saranno visualizzati contemporaneamente, uno di fianco all'altro ma nella stessa finestra. Ricordatevi i nomi che avete assegnato ai vostri frames, e per nomi intendo quelli specificati nell'attributo name, saranno questi nomi che se dichiarati all'interno dell'attributo target di un link, decideranno su quale dei due frames aprire il link stesso. Difficile? Un esempio chiarirà sicuramente meglio. Se avete deciso di avere due frames è molto probabile che uno di questi due debba fare funzioni di menù, i links di questo menù dovranno però aprire la pagina ad essi associata nella finestra principale e non certo nel piccolo frame del menù stesso sul quale si trovano. Per fare si che questo A.S. 2007/ A.S. 2007/

9 avvenga si dovrà aggiungere al link l'attributo target (bersaglio o destinazione) specificando il nome del frame (name) sul quale aprire il link richiamato, quindi: <A HREF="nomepagina.html" target="principale"> Questo link ha in più rispetto a quelli visti nella lezione links, l'attributo target che soltanto adesso ha ragione di esistere, dal momento che abbiamo una struttura con più di una sola finestra, possiamo infatti decidere su quale di queste due finestre aprire il link, per farlo basta semplicemente specificare il nome del frame assegnato precedentemente in fase di struttura, il famoso nome assegnato a name che diventa poi anche il nome nell'attributo target. <table border="1"> <td> qui andrà messo il contenuto della tabella </td> </table> Questo il risultato grafico: contenuto della tabella Le Tabelle. Nelle lezioni precedenti abbiamo imparato a creare un sito, siamo in grado di suddividerlo anche in frames, adesso però ci accorgiamo che non è per nulla facile con le nostre conoscenze, riuscire a posizionare gli elementi che formano la pagina così come ci eravamo prefissati di fare. I metodi più evoluti prevedono l'uso dei CSS ovvero Cascading Style Sheet ma al momento non ci occuperemo di questa tecnica, affronteremo invece il problema in modo tradizionale, facendo uso delle tabelle. Le tabelle, contrariamente a quanto si potrebbe pensare, non servono solo per tabulare colonne di dati, servono anche come "contenitori" per testi ed immagini, quando lo scopo è quello di fargli fare da contenitori. In questo caso si dovrà rendere la tabella invisibile in modo da non rovinare l'aspetto grafico della pagina. vediamo come si crea una semplice tabella: <table> Questo è l'elemento che dichiara una tabella, da solo dice poco o niente, necessita di altri elementi, almeno due:<tr> e <TD> che si trovano annidati al suo interno e che servono rispettivamente per suddividere la tabella in righe e/o in colonne. Intere tabelle possono poi essere a loro volta contenute all'interno di celle di altre tabelle, quindi nidificate, un po' come succede con quelle scatole cinesi una dentro l'altra. Iniziamo nel modo più semplice possibile, supponendo di volere una tabella con una sola cella, questa la definizione: Da notare che ogni elemento che riguarda la tabella necessita del relativo elemento (o tag) di chiusura, dove <TR> decreta l'inizio di una nuova riga, mentre <TD> è la cella vera e propria. Dovendo creare adesso una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <TD> <table border="1"> <td> cella sinistra </td><td> cella destra </td> </table> Questo il risultato : cella sinistra cella destra Con la stessa logica è possibile aggiungere tutte le righe e le celle che servono, quindi: <table border="1"> <td> cella alto sinistra </td><td> cella alto destra </td> <td> cella basso sinistra </td><td> cella basso destra </td> </table> Questo il risultato grafico: cella alto sinistra cella alto destra cella basso sinistra cella basso destra Lo definirei abbastanza semplice oltre che molto logico, quindi facile da capire gestire e da ricordare. Spesso però le tabelle non sono regolari come questa, c'è bisogno di avere colonne A.S. 2007/ A.S. 2007/

10 irregolari con magari diverse celle di lato e/o viceversa. Questo accade molto spesso quando l'uso della tabelle non si limita alla semplice tabulazione per la raccolta di dati ma viene adoperato come contenitore di oggetti quali: immagini, applets, scripts, testi, e tutto quello che può far parte di una pagina web. Vediamo allora come creare delle tabelle particolari: I due attributi: ROWSPAN e COLSPAN, servono rispettivamente per occupare più di una sola cella sia in senso orizzontale che in quello verticale, come tali sono applicabili al solo elemento (o tag) <td>. Vediamo un esempio: supponendo di dover occupare con una sola cella più colonne di una tabella regolare, adopereremo colspan specificando il numero di colonne da occupare, che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo caso è formata da 2 sole colonne): Come abbiamo appena avuto modo di vedere, combinando questi attributi è possibile ottenere una struttura ottimale, tutto dipende da come e che cosa vogliamo impaginare. E' vero che in qualsiasi momento potremo sempre aggiungere o togliere righe e colonne, ma sarebbe meglio avere le idee chiare sin dalla fase di progettazione, questo renderebbe tutto molto più semplice, per cui tentare una pianificazione prima ancora di cominciare a cimentarvi con le tabelle sarebbe auspicabile. Vediamo un altro esempio, supponendo di volere un tipo di impaginazione stile giornale quotidiano: testata, colonne e piede pagina; questo il codice: <table border="1"> <td> cella alto sinistra </td><td> cella alto destra </td> <td colspan="2"> questa cella occupa lo spazio di due celle </td> </table> Questo il risultato grafico: cella alto sinistra cella alto destra questa cella occupa lo spazio di 2 celle Allo stesso modo volendo invece occupare più righe di una tabella regolare, si farà uso di rowspan specificando il numero di righe da occupare, che nel nostro caso potrà essere al massimo 2 (ovvio la nostra tabella in questo caso è formata da 2 sole righe): : <table border="1"> <td rowspan="2"> questa cella occupa 2 righe </td><td> cella alto destra </td> <td> cella basso destra </td> </table> <table border="1"> <td colspan="3">testata pagina</td> <td> </td> <td> </td> <td> </td> <td colspan="3" align="center">piede pagina</td> </table> questo il risultato: testata pagina piede pagina Tutto il testo inserito all'interno degli elementi <td> seguirà l'impaginazione dettata dalla struttura della tabella stessa, la tabella in questo modo risulta essere dinamica, modificherà le proprie dimensioni adattandosi perfettamente alle dimensioni dei testi: Questo il risultato grafico: cella alto destra questa cella occupa 2 righe cella basso destra A.S. 2007/ A.S. 2007/

11 testata pagina testata pagina piede pagina Il bordo in alcuni casi potrebbe risultare fastidioso, oppure per qualche strano motivo lo si potrebbe preferire più vistoso, uno degli attributi dell'elemento <TABLE> è proprio border che se impostato a zero non produce alcun bordo, viceversa è possibile specificarne lo spessore in pixel. Questo sotto un esempio con bordo a zero: <table border="0"> Mentre questo, lo stesso esempio con bordo a 5: <table border="5"> testata pagina piede pagina testata pagina piede pagina Oltre al bordo, nell'elemento <TABLE> è possibile specificare quanto spazio lasciare fra le singole celle: cellspacing ed anche quanto spazio lasciare fra il bordo e i dati contenuti all'interno della singola cella: cellpadding. Se non vengono specificati valori, i due attributi assumono come valore di default 2. <table border="1" cellspacing="10" cellpadding="8" > piede pagina E' anche possibile avere uno sfondo colorato a tinta unita o un motivo grafico. Gli attributi da adoperare sono: bgcolor="nome in inglese del colore" per il colore a tinta unita, o background="nome dello sfondo completo di estensione gif o jpg" per l'uso di un'immagine grafica come sfondo. Valgono praticamente le stesse regole viste per l'elemento body in una delle lezioni precedenti. Ovviamente laddove si adoperasse un colore a tinta unita, non sarebbe possibile adoperare anche uno sfondo grafico e viceversa. Se inseriti all'interno dell'elemento <table> avranno effetto su tutta la tabella, ma è anche possibile adoperare colori e sfondi diversi per ogni singola cella, in questo caso applicando lo stesso sistema visto per table e cioè gli stessi attributi, ma al solo elemento <TD>. <table border="1"> <td colspan="3" bgcolor="red">testata pagina</td> <td bgcolor="green"> </td> <td bgcolor="silver"> </td> <td bgcolor="yellow"> </td> <td colspan="3" bgcolor="blue">piede pagina</td> </table> A.S. 2007/ A.S. 2007/

12 colonna 1 colonna 1 testata pagina colonna 2 colonna 2 piede pagina colonna 3 colonna 3 <form> Questo è l'elemento che dichiara il modulo, da solo dice poco o niente, necessita di alcuni attributi, almeno due: ACTION e METOD volendo anche un terzo opzionale: NAME e servono rispettivamente: ACTION per indirizzare il modulo al server, all' URL, al CGI o all'indirizzo di posta. Gli attributi supportati dalle tabelle sono moltissimi, alcuni sono proprietari dei soli browser IE, altri sono talmente rari che difficilmente avrete modo di farne uso, quelli che invece si adoperano con frequente facilità sono : ALIGN con i parametri: right, left, center, justify che servono per allineare il contenuto delle celle rispettivamente a: destra, sinistra, centro, giustificato. width con i parametri espressi in pixel o in % per fissare le dimensioni in larghezza. height con i parametri espressi in pixel o in % per fissare le dimensioni in altezza. I Moduli o Forms. Nelle lezioni precedenti abbiamo imparato molto, almeno questo voglio credere o sperare :-)) Dovremo essere in grado di creare e gestire un sito, magari semplice ma comunque un sito tutto nostro e al quale non manca assolutamente nulla. Adesso però vorremo anche qualcosa di leggermente più complesso, più professionale, del tipo: come interagire con i nostri visitatori per conoscerli o per sapere cosa ne pensano del nostro lavoro?. Per fare questo ci si deve costruire un Modulo o Form I forms, possono essere utilizzati per svariate forme di comunicazione, adoperati da soli, cioè con i soli elementi offerti da html hanno forse delle limitazioni, e comunque si riesce a risolvere un'elevata percentuale di problematiche. Se associati ad un qualsiasi linguaggio di scripting (javascript per esempio), acquisiscono una potenza incredibile, sono in grado di ricevere ed inviare dati a/da pagine diverse, eseguire operazioni matematiche, effettuare controlli anche di tipo piuttosto complesso e molto molto altro ancora. Un modulo (form) può essere costituito da diversi elementi quali: caselle per introduzione testo, menù a tendina dai quali poter effettuare delle scelte, caselle di tipo spunta, caselle per selezioni singole o multiple, aree più o meno grandi per raccogliere commenti e descrizioni, caselle nascoste per password, pulsanti di invio, pulsanti di annullamento. Potete vedere tutti questi elementi sulla mia guida html, in questa lezione ci limiteremo all'essenziale per poter creare e gestire un modulo. Una volta capita la tecnica potrete poi arricchirlo voi stessi di tutti gli elementi che necessiteranno. METOD per dichiarare con quale dei due possibili metodi: POST e GET si devono trasmettere i dati. NAME Il nome che preferite assegnare al modulo,diventa opzionale in HTML ma indispensabile se si dovesse far uso di JavaScript o altro linguaggio di programmazione. I campi che compongono un modulo si ottengono con l'elemento <INPUT> al quale vanno assegnati alcuni parametri quali : type e sono molti i tipi associabili, noi adopereremo Text name Il nome del campo che raccoglie il dato introdotto. Questo il listato: <form> Inserisci il tuo nome: <input type="text" name="tuo nome"> </form> e questo il risultato a video: Inserisci il tuo nome: Potete anche inserire il vostro nome, di fatto non servirà a nulla in quanto per funzionare correttamente al modulo mancano due cose: il pulsante per l'invio e le specifiche relative a dove inviarlo. Per il pulsante di invio si procede creando un altro elemento <INPUT> questa volta però metteremo come Type l'attributo Submit che serve per creare il pulsante di invio, aggiungeremo anche Value per la scritta che dovrà comparire sul pulsante. Adesso il nostro listato è questo: <form> Inserisci il tuo nome: <input type="text" name="tuo nome"> <input type="submit" value="invia"> </form> Questo il risultato a video: Vediamo come crearne uno; il più semplice: A.S. 2007/ A.S. 2007/

13 Inserisci il tuo nome: invia modulo potrà essere spedito e di conseguenza recapitato. I dati sono meno ordinati ma comunque leggibili. Se provate ad introdurre il vostro nome e a premere il pulsante "invia" vi accorgerete che non succederà ancora nulla, o quasi... Il modulo infatti pur funzionando non sa ancora a chi inviare i dati appena raccolti e neppure in quale formato. Di solito un form lo si invia ad uno script CGI, uno dei tanti messi a disposizione dai vari server della rete, per ragioni di sicurezza e al fine di contenere lo SPAM questa operazione è divenuta ormai possibile soltanto col server sul quale si ha il proprio sito. Gli script in cgi provvedono a ricevere i dati, effettuare dei controlli e dopo averli formattati passano all'immediata spedizione (send-mail), cioè si fa uso di un servizio semplicemente richiamandolo e questo è, come ho appena detto, di solito compreso con lo spazio web dove si ha il proprio sito. Verificatelo negli accessori o servizi offerti, è probabile trovarlo sotto la voce di formmail o sendmail. Questo CGI offre la possibilità di ricevere i dati provenienti dal vostro form e li inoltra sulla casella postale da voi specificata, la vostra ovviamente, con il vantaggio di inviarvi tutti i dati opportunamente ordinati e senza obbligare chi compila il modulo a dover inserire la propria , se da una parte favorisce i messaggi anonimi dall'altra incentiva i commenti anche di coloro che non amano lasciare il proprio indirizzo in giro per la rete. Mi rendo conto che per un principiante non sia molto semplice capire questo meccanismo, ma vi garantisco che non è neppure troppo difficile :-) Vediamo come farci inviare il form sopra, composto da un solo campo adoperando entrambi i sistemi. Dovremo fare uso dei due attributi spiegati all'inizio di questa lezione e cioè: Method ed Action Per spedirlo tramite posta elettronica: <form method="post" action="mailto:vostronome@serverdiposta.it" enctype="text/plain" name="mio_form"> Tuo nome: <input type="text" name="tuo nome"> giudizio: <input type="text" name="giudizio"> <input type="submit" value="invia"> </form> Questo il risultato a video: Il tuo giudizio su questa rubrica: vediamo un paio di esempi che certamente chiariranno molto meglio ogni cosa: I metodi per ricevere un form sono almeno due: 1) inoltrando il tutto al server CGI (quando questo è conosciuto) o script in php, asp ecc.ecc.. Tuo nome: giudizio: invia 2) inoltrando il tutto alla propria casella postale. Vantaggi e svantaggi dei due metodi: 1) Il server CGI o script in php asp è di sicuro il sistema migliore, abbiamo detto che permette l'invio del modulo anche da parte di chi non ha una casella postale o da chi molto più semplicemente non vuole farne uso per non renderla pubblica. Questo sistema provvede all'ordinamento e alla formattazione dei dati prima di recapitarli all'indirizzo . Gli script spesso offrono controlli sui dati introdotti e inviano anche diverse informazioni quali: l'ora, il giorno, l'url del mittente. Purtroppo a volte negli script in CGI non tutti sono a conoscenza dei parametri utilizzabili nel modulo, anche se questi sono forniti dallo stesso provider dove si ha il sito. 2) La propria casella postale che è possibile utilizzare immediatamente non dovendo infatti conoscere altri dati oltre a quello, di contro c'è che si possono ricevere i moduli soltanto se chi li invia è disposto ad adoperare il proprio indirizzo di posta elettronica, è infatti grazie a questo che il Facendo uso di una tabella, le abbiamo imparate nella lezione precedente, è stato possibile dare al form un aspetto molto più ordinato oserei dire professionale :-)) Se volete provarlo funziona tutto ma non sappiamo a chi arriverà ho dovuto infatti togliere il mio indirizzo per ragioni di spam, ma questo è un rischio che chiunque abbia un sito web dovrà correre. Se inserite il vostro vi sarà recapitato in mail-box, in questo formato: tuo nome=xxxxxx giudizio=yyyyyy Se questo sistema vi soddisfa non vi resta che crearvi tutti i moduli che volete e farveli spedire... è possibile aggiungere anche il titolo o subject alla mail che vi consegnerà i dati del modulo, notate l'aggiunta di?subject all'elemento form: A.S. 2007/ A.S. 2007/

14 <form method="post" lezione primi passi" enctype="text/plain" name="mio_form"> Tuo nome: <input type="text" name="tuo nome"> giudizio: <input type="text" name="giudizio"> <input type="submit" value="invia"> </form> L'altro sistema invece è quello di affidare il tutto al server CGI. La struttura resta la stessa ma al posto di : <form method="post" action="mailto:vostronome@serverdiposta.it" enctype="text/plain" name="mio_form"> Dovremo adoperare un indirizzo di CGI valido, ripeto: informatevi sulla home page del server dove avete il sito, vi assicuro che questo servizio è comune a molti, per non dire a tutti gli spazi web offerti gratuitamente. Purtroppo non basta soltanto l'indirizzo del CGI, servono anche altri parametri che il fornitore del servizio richiede. Audio, Script e Applet Nelle lezioni precedenti abbiamo imparato l'essenziale e forse anche qualcosa in più al fine di poter realizzare un discreto sito web, tenuto anche conto e confidando soprattutto nella vostra fantasia ed estro, oltre che nel vostro buon gusto nel saper scegliere sapientemente i colori, gli sfondi, le immagini, i fonts, e tutto il resto. Per concludere vedremo adesso come inserire un sottofondo musicale e come poter utilizzare i molti scripts che la rete mette a disposizione gratuitamente. Audio Musica Un brano musicale può essere introdotto in una pagina web facendo uso dell'elemento embed Questa la sua sintassi: <EMBED src="tuomidi.mid" WIDTH="145" HEIGHT="35" AUTOSTART="true" LOOP="true"> Dove tuomidi.mid è il nome del brano midi da riprodurre, tutto il resto serve per visualizzare l'interfaccia grafica per chi adopera ad esempio il multimedia player di Windows, in questo esempio con dimensioni 145 x 45 pixel. Nell' esempio ho inserito "false" come attributo di AUTOSTART, quindi per ascoltare la musica si dovrà premere sul pulsante dell'interfaccia. Con True si sarebbe avviata automaticamente. Perché ho inserito un brano di tipo midi e non uno di tipo Mp3 o Wave? Semplicemente perché i files di tipo midi sono i più "leggeri" e non costringono il visitatore a lunghe ed estenuanti attese, non dimenticatelo mai, un file audio che superasse i 50 ~ 60 Kb sarebbe a mio avviso da scartare... Il brano musicale, qualunque sia il suo formato, cessa di funzionare nel momento in cui si cambia pagina, da qui la necessità di avere una struttura a frames nel caso in cui si volesse una musica di sottofondo che accompagni durante tutta la navigazione. Trasferire la vostra pagina on-line Ovvero adoperare FTP Nelle lezioni precedenti avete imparato tutto ciò che serve per creare un proprio sito, abbiamo adoperato solo l'indispensabile ma siamo comunque riusciti a creare qualcosa di valido. Adesso, non resta che renderlo pubblico ai fini di condividerlo con altri, per farlo abbiamo bisogno per prima cosa di uno spazio web che ospiti le nostre pagine. A questo proposito sono davvero in molti che offrono gratuitamente lo spazio necessario, forse senza nemmeno saperlo ne possediamo già uno, non è per niente raro infatti che questo si trovi a corredo del collegamento internet che si è deciso di adottare per entrare in rete. I più grossi gestori quali: Libero, Tiscali, Supereva, per citarne solo alcuni, e persino la stessa Telecom, che come si sa non regala mai nulla, ne offrono uno compreso con la connessione gratuita. Che abbiate già un vostro spazio web o che decidiate di averne uno in più grazie ai tanti siti che ne offrono di gratuiti, la procedura è sempre la stessa e cioè si accede tramite FTP, non importa se non sapete cosa sia questo ftp, di fatto vi basta conoscere tre dati fondamentali per poter accedere con un apposito programma al vostro spazio: nome del server ftp A.S. 2007/ A.S. 2007/

15 User ID Password Vediamo cosa sono: nome del server ftp lo decide chi vi offre lo spazio, di solito è il nome dello spazio stesso preceduto dalla sigla ftp, vi faccio alcuni esempi validi e reali: ftp.geocities.com ftp.supereva.it ftp.cerreto User ID Lo decidete voi in fase di registrazione, oppure è lo stesso nome col quale accedete alla rete tramite il gestore che ve lo ha fornito... Insomma un dato personale che cambia a seconda delle vostre scelte personali. Password Come per la User ID è un dato che decidete voi, a volte è la stessa password con la quale accedete in rete tramite il gestore che ve l'ha fornita... Un consiglio: se possibile evitate password tutte uguali, se da un lato è vero che é più semplice ricordarle, dall'altro è altrettanto vero che una volta scoperta una, si sono praticamente scoperte tutte. Se siete in possesso di questi tre dati non resta che inserirli in uno dei tanti programmi FTP che la rete offre, manco a dirlo: gratuitamente. Non importa quello che deciderete di adoperare, in ognuno di questi ci sarà comunque una pagina dedicata alla configurazione dei dati per l'accesso, ed è proprio su quella pagina che dovrete inserire i tre dati, se non avete alcun programma e non sapete quale scegliere, potete scaricarne uno da questo mio sito, si tratta di WSFTP32 in una delle sue prime versioni, quando non costava nulla e quindi completamente gratuito, oppure di FTP Explorer in stile gestione risorse di windows. Qualsiasi programma di questo genere si presenta con una schermata divisa in due: a sinistra il vostro disco rigido, a destra il vostro spazio sul server, quello al quale vi siete appena collegati. Vi ricordo che la vostra pagina iniziale dovrà necessariamente chiamarsi index.html a meno che non abbiate uno spazio su server windows dove di solito il nome della prima pagina è Default.htm con la D maiuscola e senza la elle finale di htm Se avete creato delle cartelle con all'interno files o immagini dovrete fare in modo di ricreare le stesse cartelle anche sullo spazio del server, ci sono programmi che lo fanno in automatico nel momento in cui copiate la cartella stessa, altri invece hanno una voce MAKEDIR o MKDIR che serve appunto per creare una nuova cartella; attenzione ai nomi, dovranno essere perfettamente uguali a quelli che avete nel vostro disco rigido e per uguali intendo qualsiasi cosa: maiuscole, minuscole, spazi vuoti, tutto insomma... tutto ciò che è relativo ai nomi che li compongono. I sistemi Unix, quelli che di solito fanno funzionare tutta la rete, sono molto sensibili a queste differenze anche alle più impercettibili, da qui il termine "case sensitive". Se non avete alcuna esperienza in fatto di files, cartelle e relativi percorsi, vi consiglio di lasciare tutto su una sola ed unica cartella, e di trasferire il suo contenuto dal vostro disco al vostro spazio web senza dover creare niente di più, praticamente tutto ciò che è relativo al vostro sito e che avete sul vostro HD lo copiate pari pari sullo spazio web e siete praticamente a posto. Se in futuro farete modifiche o aggiornamenti, continuate a farli sulla copia nel vostro disco fisso, non preoccupatevi di cancellare o modificare la copia che si trova on-line sul server, questa sarà sovvrascritta nel momento in cui invierete i nuovi files modificati, visto che dovranno necessariamente avere lo stesso nome di quelli da aggiornare. Con questa lezione avete imparato a trasferire il vostro lavoro sulla rete, se tutto è andato a buon fine non vi resta che digitare sul vostro browser (programma di navigazione) l' URL che vi è stato assegnato così da vedere finalmente in linea il risultato. Se tutto è ok, potete cominciare a distribuire il vostro indirizzo agli amici, ai parenti e a tutti i conoscenti; cominciare anche ad iscriverlo nei vari motori di ricerca in modo da essere visto da tutti, comprese le persone che non vi conoscono. A.S. 2007/ A.S. 2007/

Vedere altro