computer weblink

Muovere i primi passi in HTML Benvenuti su questa rubrica, se siete arrivati fin qui, e non per caso, significa che siete interessati a muovere i primi passi in HTML, ovvero il linguaggio base che da vita alle pagine della rete Internet.

Con questo aggiornamento sono state eliminate alcune informazioni considerate "deprecate" dall'evoluzione del linguaggio html regolato dal consorzio W3C (organo che si occupa proprio di queste regole). Con questa versione potrete dire che il vostro sito è certificato perchè il codice usato risulterà corrispondente alle attuali regole di html 4.01. Chi vorrà approfondire potrà leggere anche la Guida HTML e quella XHTML con Style.

Su questa rubrica è possibile apprendere passo dopo passo, lezione dopo lezione, tutto ciò che serve per creare una propria pagina web e perché no, un vero e proprio sito web!

La rubrica è scaricabile anche in formato compresso (zip) per essere consultata comodamente off-line. Per stampare le singole pagine basta un clic sull'immagine della stampante che si trova alla fine di ogni pagina, oppure dal menù file del vostro browser di navigazione alla voce stampa Useremo soltanto il minimo indispensabile, così facendo sarà tutto più semplice per chi si avvicina per la prima volta a questo "sistema di programmazione". Pochi essenziali comandi per un buon risultato da ottenere subito. Chi volesse potrà proseguire dai due links appena riportati sopra per le guide HTML e XHTML. Vediamo cosa serve e come si costruisce una pagina web. Una pagina web è una sorta di ipertesto, cioè testo apparentemente "normale" generato da un normalissimo editor per testi, a volte lo stesso che si adopera per scrivere le normali lettere. La differenza consiste nello scrivere "parole" riservate che diventano vere e proprie istruzioni per il browser e che sono chiamate <tags> (elementi), si distinguono perchè racchiuse fra parentesi angolari < >, particolarità che ne consente poi la corretta interpretazione da parte del browser. Cos'è il browser?

E' quel programma che serve per navigare la rete, lo stesso che state adoperando in questo momento per leggere questa pagina che fa uso proprio del linguaggio HTML, questa sigla è ormai sinonimo di WEB, di pagina web, il suo significato deriva dalle iniziali della frase inglese: Hyper Text Markup Language. Senza html non sarebbe possibile leggere questo che sto scrivendo.

Non c'è nulla di particolarmente difficile e non serve avere alcuna esperienza di programmazione; non si tratta infatti di programmare ma di assemblare delle istruzioni tags (elementi) predefinite e molto semplici da inserire, direi anche abbastanza facili da ricordare ma soprattutto con pochissime regole da rispettare, e poi provare... provare, e riprovare fino ad ottenere il risultato che, vi assicuro, é garantito per tutti.

Fare delle buone pagine web non è per niente difficile, i problemi possono nascere quando non bastano più semplici pagine statiche o quando queste debbano produrre risultati elaborati, ma avremo modo di parlarne in seguito. Al momento basta imparare le regole, il meccanismo necessario, e si potranno assemblare tutti gli altri elementi che in questa rubrica non saranno trattati per non confondere il principiante ma che sono presenti sulla guida HTML di Web-Link.

Vediamo in concreto cosa serve e quali sono gli strumenti necessari per creare la nostra prima pagina web. Abbiamo detto un editor, cioè uno di quei programmi che si adoperano per scrivere testi, il wordpad o il blocco notes che di solito si trovano a corredo di windows, tanto per fare un esempio, potrebbero andare bene, ma anche qualsiasi altro elaboratore di testi potrebbe fare al caso nostro; unica raccomandazione: ricordarsi sempre di salvare il tutto in formato ASCII, cioè puro testo senza aggiunta di formattazioni particolari.

Alcuni di questi programmi, word di microsoft per citarne uno, aggiungono dei caratteri particolari che soltanto loro riescono poi a riconoscere ed interpretare, questi caratteri non vanno d'accordo con il codice html e relative pagine web. Non lasciatevi ingannare dal fatto che word possa esportare in HTML, lasciate perdere, se proprio volete adoperare word e seguire questo corso, salvate in ascii (txt) e rinominate poi il file così salvato xxx.txt in xxx.htm o xxx.html (dove xxx sarà sostituito dal nome che voi avrete assegnato al vostro documento).

Personalmente vi consiglio di procurarvi un editor specifico per HTML, in rete se ne trovano di potenti ed anche di gratuiti per cui non vedo perché se ne dovrebbe fare a meno. Dovendo parlare di editor HTML, due sono le categorie in cui si suddividono: visuali e testuali.

Quelli visuali sono sicuramente molto più semplici e comodi da adoperare, assomigliano a dei programmi di grafica, è sufficiente trascinare al loro interno testi ed immagini per avere un'impaginazione più che soddisfacente. Se avete deciso per quelli, potete smettere di leggere questa mia rubrica, non vi servirà a molto infatti, arrivederci, sono però sicuro che ci rivedremo presto.

Presuntuoso?

No, lo so per esperienza, quella che voi stessi mi avete permesso di acquisire in tutti questi anni.

Gli editors testuali richiedono da parte di chi li adopera una minima conoscenza di base, ecco il motivo di questa rubrica. Potrebbero sembrare più dispendiosi in termini di impegno ma alla lunga si rivelano invece un autentico investimento. Consentono di fare cose che editors visuali non riescono a fare ed offrono la possibilità di avere il controllo assoluto su ogni parte del codice, anche di questo avremo modo di parlare meglio quando torneremo in seguito sull'argomento.

E con questa le premesse sono finite, possiamo finalmente iniziare a fare qualcosa di concreto...

Aprite il vostro editor preferito, qualunque esso sia, anche uno di quelli visuali se ha però la possibilità di andare in modalità testo, ovvero in html.

Sul foglio bianco inseriremo i TAGS, o elementi, che compongono HTML e che devono essere racchiusi fra parentesi angolari <queste> Si tratta di parole chiave, termini in lingua inglese riservati. L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra / contenuta sempre all'interno delle parentesi angolari.

L'inizio di un documento HTML avrà come elemento (tag) iniziale: <HTML> e come elemento (tag) finale </html> nessuna importanza se scritti in maiuscolo o minuscolo, tutto ciò che sarà contenuto all'interno di questi due elementi (tags) sarà interpretato dal browser come codice HTML. Consiglio di abituarsi fin da subito a scrivere in minuscolo, chi infatti decidesse poi di passare ad xhtml avrà il vantaggio di avere questa buona abitudine che in xhtml è una regola ferrea.

Vi sembra difficile ?

No! Direi proprio di no.

Nella prossima lezione vedremo la struttura della pagina html.

Se avete domande o dubbi potete scrivere sul forum di supporto in area html, è gratuito ed aperto a tutti.

Non vi resta che seguire cronologicamente dall'alto verso il basso le voci del menù laterale saltando quello che non vi interessa.

Buona lettura. Andrea Bianchi La struttura di un documento HTML è composta da due sezioni ben distinte: una parte iniziale denominata testa <head> ed una parte centrale denominata corpo <body> Nella testa (head) vanno inseriti quei comandi che inviano informazioni al server (lo spazio web in rete) meta comandi, titolo, ecc. o quel codice che deve essere letto con una certa priorità: script, fogli di style, ecc. tutte cose che a voi al momento interessano poco.

Nel corpo (body) tutto il resto. Anche questi elementi, necessitano del relativo elemento di chiusura: </head> e </body> Riassumendo: una struttura HTML tipo potrebbe essere questa: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> codice per il server: meta comandi, script, fogli di style, ecc. </head> <body> Codice da visualizzare: testo, immagini, moduli, ecc. </body> </html> Per il momento all'interno di <head> non metteremo nulla, si vedrà più avanti cosa inserire, adopereremo quindi soltanto la zona <body>. Avrete notato una riga di codice iniziale di cui non abbiamo parlato, si tratta di DOCTYPE Questa prima riga chiamata "prologo" ha il compito di informare il browser che si tratta di un documento html relativo a determinate specifiche dettate dal W3C, in questo caso versione 4.01 Transitional, potrebbe essere omessa ma diventa molto importante se vogliamo rispettare le regole ed ottenere una validazione. Essa predispone gli attuali browser ad una corretta interpretazione del codice contenuto nella pagina.

Create col vostro editor la struttura sopra descritta e portatevi col cursore all'interno degli elementi (tags) <body> ... </body>. Inseriremo del testo, per farlo useremo l'elemento <p> che significa: paragrafo, andremo a scrivere un qualsiasi testo, per esempio: "Ecco la mia prima pagina in html destinata al web.". 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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body>

<p>Ecco la mia prima pagina in html destinata al web.</p> </body> </html> Non importa come avete disposto le frasi del testo, potete lasciare più spazi vuoti fra una parola e l'altra o ritornare a capo quante volte volete col tasto invio, nessuna importanza; il browser ignorerà il vostro modo di scrivere limitandosi a leggere ed interpretare soltanto quello che avete scritto, più avanti si vedrà come lasciare più spazi vuoti o 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 (txt).

Assegnategli un nome: quello che preferite, e salvatelo nel vostro PC, trattandosi della pagina iniziale sarebbe meglio chiamarla fin da subito 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 quando si digita il solo url. (voi digitate www.web-link.it ed il server richiama www.weblink.it/index.html automaticamente) Se non avete un editor specifico che salva direttamente in html con molta probabilità il vostro file avrà un estensione di tipo .txt, ovvio direte voi, dal momento che è stato scritto con un normale editor per testi.

Rinominate questo file in modo che abbia come estensione html altrimenti il browser non riuscirà a capire che dentro ci sono i tags in html e non potrà interpretarlo nel modo corretto.

A proposito di questa operazione per rinominare il file dovrei fare alcune precisazioni: l'operazione in se è molto semplice, basta un clik sul nome ma chi adopera Windows potrebbe non vedere l'estensione finale del file così salvato. Questo perchè windows non è impostato per farvi vedere le estensioni dei files ma soltanto i loro nomi, in questo caso rinominarlo servirebbe a poco dal momento che si aggiungerebbe html al nome lasciando però di fatto il file in formato txt.

Mi rendo conto che non sia molto semplice capire quello che ho appena detto se siete dei principianti del PC in senso generale. Per chi avesse problemi nel fare questa operazione vi rimando a questo esempio che credo potrà chiarire meglio.

Incredibile ma questa operazione del rinomina potrebbe essere la cosa più difficile da fare e non c'entra nulla con HTML. Consapevole che se avessimo adoperato un editor visuale non ci sarebbe stato bisogno di niente altro che non fosse stato scrivere: questa è la mia prima pagina web e salvare...

Preferivate una cosa fatta in quella maniera?

Se si, avete sbagliato rubrica, questa è infatti dedicata a chi vuole sapere come fare le pagine web e non come farle fare ai vari editors visuali :-) Per essere la prima lezione introduttiva, credo possa bastare, esercitatevi, soltanto dopo aver compreso questo meccanismo ed aver acquisito quel un minimo di familiarità con la creazione ed il salvataggio dei files in formato html potrete passate alle lezioni successive.

Se avete domande o dubbi potete scrivere sul forum di supporto in area html, è gratuito ed aperto a tutti.

Il testo Abbiamo visto nella lezione precedente, come creare la struttura della nostra prima pagina web inserendo 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, richiamate la pagina che avevate precedentemente 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 a destra.> Digitate uno spazio vuoto 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: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <p align="center">Ecco la mia prima pagina in html destinata al web.</p> </body> </html> questo il risultato: Ecco la mia prima pagina in html destinata al web.

Questi sotto i risultati facendo uso dei vari possibili attributi di allineamento: <p align="left">Questo paragrafo è allineato a sinistra.</p> Questo paragrafo è allineato a sinistra.

<p align="right">Questo paragrafo invece è allineato a destra.</p> Questo paragrafo invece è allineato a destra.

<p align="center">Questo paragrafo è allineato al centro.</p> Questo paragrafo è allineato al centro.

<p align="justify">Questo paragrafo è allineato al centro con giustificazione.</p> Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ?

Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi vuoti fra le parole.

Notate il segno di = e le doppie virgolette " " fanno parte della sintassi e devono essere scritte senza spazi vuoti, tutti gli attributi che incontreremo fanno uso di queste regole, per cui abituatevi ad usarle in modo corretto fin da subito.

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 chiudendo il paragrafo ed aprendone uno nuovo </p><p> Vi accorgerete anche che inserendo più spazi fra una parola e l'altra questi non saranno visualizzati ma ignorati tutti quanti per lasciare il posto ad un solo spazio.

Provate per rendervene conto. Più avanti nella lezione dedicata alla cosmesi del testo vedremo come fare questa ed altre operazioni che in html hanno una regola diversa da quella usata con un normale editor di testi.

Per questa lezione credo possa bastare... Avete imparato a creare una pagina web e ad introdurvi del testo, nella prossima lezione vedremo come inserire le immagini.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Le Immagini Abbiamo visto nella lezione precedente come inserire del testo nella nostra prima pagina web, in una "bella" pagina web che si rispetti non possono però mancare le immagini, ed è proprio di immagini grafiche 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="xxx.yyy"> Dove xxx è il nome della vostra immagine e yyy la sua estensione. Le immagini consentite dal linguaggio html sono solo di tipo: .gif .jpg e .png qualsiasi altro formato rischia di non essere visto da tutti i browser.

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle zone in

trasparenza (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg che essendo questo un formato compresso risulta essere molto più veloce da caricare non appesantendo troppo la pagina, un aspetto quest'ultimo da non trascurare mai quando si adoperano immagini. Ricordatevi che grandi dimensioni significa anche peso esagerato che si traduce in lunghi tempi di attesa. Sulla rete un'immagine da centinaia di 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 56 Kb, fate dunque in modo da evitare immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili".

Il formato .png nato per ultimo più per problemi legali che non per reali esigenze tecniche è adoperato meno frequentemente in quanto non risulta poi così "ottimale", ma questo è un modesto parere per altro del tutto personale.

Passiamo ad inserire la nostra prima immagine. Supponiamo che questa si chiami web-link.gif, sarà inserita nel listato in questa maniera: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <p align="center">Ecco la mia prima pagina in html destinata al web.</p> <img src="web-link.gif"> </body> </html> Notate la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con <p> Il tag per le immagini non ha infatti il relativo tag di chiusura, non serve quindi 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 htm sovvrascrivendo quello che avevate richiamato e lo andate a visualizzare nel browser, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo ma non si vede. Dovreste avere questo: Come mai?

Perchè vi serve un'immagine che si chiami "web-link.gif" e che si trovi nella stessa cartella dove avete il file html, praticamente dove c'è questo file html che avete appena modificato e salvato.

Vi consiglio di lasciare perdere l'immagine web-link.gif che adopero io e di procurarvi una qualsiasi immagine vostra, quella che preferite, a patto che sia in uno dei tre formati descritti sopra: gif, jpg o png e mettetela nella stessa cartella dove avete il file html, cambiate il nome all'interno di src=" " inserendo il nome esatto della vostra immagine, fate attenzione a maiuscole e minuscole perchè sul web ci sono delle differenze. Fatto?

Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine e scrivete adoperando un

altro paragrafo: 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 tutte le immagini che vorrete, ricordatevi sempre il discorso del peso, 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, se le immagini sono molte, conviene suddividere in più pagine e richiamare poi queste altre pagine con i links, oggetto della prossima lezione.

Prima di proseguire vediamo cosa potremo aggiungere al tag: <img src="web-link.gif">

Se la nostra immagine non si trovasse nella stessa cartella dove c'è il file che la richiama, dovremo necessariamente specificare il suo "path" cioè il percorso che identifica la sua posizione all'interno del nostro PC, questo potrebbe essere anche un URL valido, cioè un indirizzo web di un sito Internet che la contiene, in questo caso però l'immagine sarà visibile soltanto nel momento in cui sarete collegati alla rete internet.

Questi alcuni possibili percorsi: <img src="nome_cartella/weblink.gif"> <img src="http://www.web-link.it/weblink.gif"> <img src="../nome_cartella/weblink.gif"> Se specifichiamo le dimensioni dell'immagine aiuteremo il browser a visualizzare tutta la pagina con molta più rapidità, per cui è buona regola inserire sempre queste informazioni. Per farlo si adoperano i due termini in lingua inglese width ed height per larghezza ed altezza: <img src="weblink.gif" width="125" height="35"> l'unità di misura delle immagini, rispettivamente: I numeri 125 e 35 sono i pixel, width 125 px per la larghezza, e height 35 px 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 visualizzare alcun bordo.

Impostarlo a zero risulta particolarmente utile nel caso di immagini usate come link, cioè all'interno del tag href dove questo bordo risulterebbe visibile con lo stesso colore impostato per i links.

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 motivo conviene inserirlo sempre. <img src="weblink.gif" width="125" height="35"border="0"> Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari, <queste> e non c'è un preciso ordine da rispettare, potrebbero essere messi anche in ordine diverso da quello che ho adoperato io a patto che ne sia rispettata la corretta sintassi e per sintassi si intende il segno di = uguale e le virgolette " ", anzi i doppi apici " ".

Ci sono molti altri attributi che potrebbero essere inseriti allo stesso modo, vi elenco quelli che

secondo me si adoperano più spesso, rimandandovi alla guida HTML nel caso vi servisse conoscere l'elenco completo: alt="descrizione dell'immagine". L'attributo alt (alternativa alla grafica) permette di specificare un testo per quei browser non grafici. Viene adoperato per descrivere l'immagine e non va confuso con title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del W3C.

title="nome dell'immagine". L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine, simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia visibile o meno. Portate il cursore del mouse sull'immagine per leggere il suo titolo.

align="valore". L'attributo align permette di specificare il tipo di allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom. I due valori principali: left e right (sinistro e destro) fanno si che l'immagine diventi di tipo flottante.

hspace e vspace="valore in pixel". L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali ed orizzontali (Vertical Space ed Horizontal Space) fra il testo e l'immagine stessa ed anche fra l'immagine e la sua cornice.

Questo un esempio di un richiamo ad un'immagine adoperando tutti gli attributi fino ad ora descritti. <img src="web-link.gif" width="128" height="64" border="0" alt="weblink tutto per la tua pagina web" title="immagine logo di web-link" align="left" hspace="20" vspace="30"> Da notare che fra un attributo e l'altro si lascia uno spazio vuoto.

Nota: il nome dell'immagine deve essere scritto esattamente come è realmente, rispettando cioè eventuali maiuscole/minuscole o spazi vuoti, questi ultimi andrebbero sempre evitati e se proprio necessari sostituiti magari dal simbolo underscore _ Tutta questa attenzione perchè a differenza di windows che non farebbe alcuna distinzione fra una maiuscola ed una minuscola inserita nel nome di un file, sul server web, una volta trasferito il lavoro, l'immagine di nome Web-link.gif sarà considerata un'immagine diversa dalla stessa immagine che si chiamasse invece WEB-link.gif Una delle prime difficoltà che si incontrano quando si vogliono inserire delle immagini in una pagina web è il loro posizionamento preciso all'interno della pagina, gli attributi di allineamento visti sopra non bastano, sono riferiti al testo che di solito accompagna le immagini. Per posizionare una immagine si può fare uso di contenitori vuoti <div> ... </div> ai quali assegnare un tipo di

allineamento: left, right, center o adoperando i css specificare le coordinate per posizionarlo in modo assolutamente preciso. <div align="center"> <img src="weblink.gif" width="128" height="64" border="0"> </div> Questo il risultato del codice sopra: div align center

Io consiglio di fare uso di una tabella, sebbene sia nata per tabulare dati si presta molto bene anche per impaginare, questa guida che state leggendo ne è un chiaro esempio essendo strutturata in una complessa tabella.

Anche per questa lezione credo possa bastare... Avete così imparato ad introdurre testi ed immagini, nella prossima lezione conosceremo i links, la vera forza delle pagine web. Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

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 internet: i links o ancore, cioè quelle scritte interattive che se cliccate col mouse danno modo di generare un'azione: spostarsi all'interno della stessa pagina, da una pagina all'altra, o come spesso accade da un sito all'altro. Sono queste Ancore, che chiameremo anche links ipertestuali, ad aver decretato il successo del web.

Come al solito aprite il vostro editor e richiamate la pagina creata precedentemente. Posizionate il cursore del mouse nel punto esatto in cui dovrà essere inserito un link. Questo il TAG da adoperare: <a> </a> A come Ancora... così da solo però, senza attributi, è praticamente inutilizzabile. Vediamolo combinato con l'attributo più importante: href La sigla HREF nasce dalle iniziali della frase inglese 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, dipende soltanto da cosa è stato specificato nell'attributo stesso.

Vediamo un esempio pratico, supponiamo che nella vostra pagina web vogliate inserire un link al mio sito: www.Web-Link.it Sarà sufficiente specificarlo in questo modo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> <head> </head> <body> <a href="http://www.web-link.it">Web-Link</a> </body> </html> Notate la sintassi del comando, la parola Web-Link sarà 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 verrà fatto clic sulla scritta, l'ultimo </a> è la chiusura che determina la fine del link e delimita la frase o anche l'immagine grafica da usare come riferimento cliccabile.

Attenzione a non dimenticare di chiudere un link perchè da quel punto in avanti tutto il resto della pagina web sarebbe un enorme link!

Potete sostituire la scritta Web-Link con una qualsiasi altra parola o frase, oppure adoperare delle immagini usando quanto imparato nella lezione precedente, 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 www.Web-Link.it perché è quello l'indirizzo inserito dopo HREF. Da notare che per i links ad altri siti si fa precedere il www da un http:// necessario per indicare che quanto stiamo richiamando non si trova all'interno del nostro sito ma esternamente nella rete.

Se al posto dell'indirizzo web (URL) http://... avessi inserito semplicemente il nome di un'altra mia pagina, per esempio pagina2.htm avrei dato vita ad un sito vero e proprio formato da due pagine: questa che state leggendo e la pagina2.htm richiamata dal link. Sulla pagina2 poi dovrei inserire un link a questa pagina1 per dare modo al visitatore di fare avanti e indietro comodamente senza usare i tasti del browser.

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 ne eredita eventuali proprietà dell'elemento stesso che lo incorpora.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <a href="http://www.web-link.it"><img src="weblink.gif" width="128" height="64" border="0" alt="weblink"></a> </body> </html> Nel caso in cui si decidesse di usare una immagine grafica al posto del testo, questa mostrerebbe un bordo perimetrale colorato

dello stesso colore scelto per i colori dei links. Se non si vogliono

vedere bordi colorati si deve usare l'attributo border="0" all'interno del tag <img nell'esempio riportato sopra.

come

Oltre agli indirizzi (URL) validi, come quello dell'esempio: <a href="http://...">, l'attributo href accetta anche altri valori quali : <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 in modalità FTP. <a href="mailto: nome@server"> Indirizzo di posta elettronica per la spedizione di una e-mail 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 magari non soltanto ad un principiante.

Considerate sempre che la pagina così richiamata dal vostro link andrà a sostituire la pagina richiamante, quella in cui c'è il link. Se non è questo quello che volete che accada è possibile aggiungere l'attributo target che specifica dove aprire questa pagina, o meglio su quale finestra del browser di navigazione dovrà essere aperta. target="nome della finestra" Dove nome della finestra è lo stesso nome assegnato con name in caso di frames, li vedremo più avanti, o la parola riservata _blank che apre una nuova finestra (o una nuova scheda) del browser, lasciando di fatto anche la pagina che ha generato il richiamo. <a href="http://www.web-link.it" target="_blank">Web-Link</a> Una nuova finestra sarà aperta in modo da mantenere anche la vostra, quella dalla quale è stato possibile fare clic sul link, per cui ci saranno due finestre (o due schede nei browser più recenti).

A questo punto conoscete quanto basta per creare un sito, si ho detto proprio sito e non più pagina web. Con l'inserimento del tag a href che vi consente di richiamare altre pagine date vita ad un vero e proprio sito: il vostro.

Sono ancora molte le cose da sapere per fare dei buoni siti ma già con questa terza lezione potrete cominciare a fare qualcosa di concreto, dalla prossima torneremo sulla struttura, sul testo e sulle immagini, aggiungendo alcuni particolari e precisazioni molto importanti.

Con questa lezione siete in grado di introdurre testi, immagini e links.

Nella prossima lezione , dedicata alla cosmesi del testo e ad alcuni caratteri "speciali", imparerete a tornare a capo, a lasciare più spazi fra una parola e l'altra e molto ancora, tutte cose che vi serviranno soltanto se nel frattempo avrete cominciato a fare qualcosa di vostro.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

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 hanno infatti delle regole ben precise, si tratta semplicemente di conoscerle ed applicarle.

Una delle primissime cose che si notano è la difficoltà di poter lasciare più di uno spazio vuoto fra una parola e l'altra. Html ignora tutti gli spazi in più inseriti con il metodo normale (barra spaziatrice) e ne lascia di fatto uno soltanto.

Se non ve ne siete accorti provate a scrivere una frase mettendo più spazi fra le varie parole, provate poi a guardare il risultato sul vostro browser, noterete con sorpresa che tutti gli spazi sono stati ignorati e sostituiti da uno soltanto. Questo è del tutto normale trattandosi di una caratteristica di HTML. Come fare per averne più spazio nel caso in cui servisse distanziare le parole?

Con appositi codici che servono esclusivamente ad introdurre spazi vuoti. Questo simbolo &nbsp; 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 e di conseguenza saltare tante righe quanti sono i br inseriti.

I due metodi sopra descritti 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 così macchinosa come digitare una sequenza di 5 caratteri?

Se adoperate un normale editor di testi si, se invece vi siete procurati un editor specifico per html

no, nella peggiore delle ipotesi si tratta probabilmente di fare click su un pulsantino che introdurrà quella sequenza di caratteri, quasi come premere la barra spaziatrice sulla tastiera.

Ci sono anche altri caratteri che conviene introdurre con le corrette regole che HTML richiede, si tratta di caratteri particolari che spesso si adoperano nella comune scrittura. Noi Italiani per esempio 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: à = &agrave; è = &egrave; ì = &igrave; ò = &ograve; ù = &ugrave; 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: " = &quot; & = &amp; < = &lt; > = &gt; € = &euro; Per concludere alcuni caratteri speciali che potrebbero risultare utili: © = &copy; ® = &reg; £ = &pound; ¼ = &frac14; ½ = &frac12; ¾ = &frac34; ¹ = &sup1; º = &ordm; Per rendere una pagina più leggibile o anche solo più gradevole, 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.

<strong></strong> = bold o grassetto.

Tutto quello che sarà scritto all'interno dei tags <strong> e </strong> sarà visualizzato in grassetto.

Facciamo un esempio: dovendo scrivere "Web-Link.it tutto per la tua pagina web" e volendo evidenziare la scritta Web-Link.it in grassetto, si dovrà racchiudere questa fra i due tags <strong> e </strong> in questo modo:

<strong>web-link.it</strong> tutto per la tua pagina web.

Questo il risultato: web-link.it tutto per la tua pagina web Avremo potuto ottenere lo stesso risultato adoperando <b></b> che sono equivalenti di<strong></strong>. B è stato usato fino ad oggi ed era l'iniziale della parola inglese Bold.

<em> </em> = Italico, inclinato.

Tutto quello che sarà scritto all'interno dei tags <em> e </em> sarà visualizzato in italico.

Facciamo ancora lo stesso esempio: dovendo scrivere "Web-Link.it tutto per la tua pagina web" e volendo la scritta Web-Link.it in italico, si dovrà racchiudere questa fra i due tags <em> e </em>, in questo modo: <em>web-link.it</em> tutto per la tua pagina web.

Questo il risultato: web-link.it tutto per la tua pagina web Avremo potuto ottenere lo stesso risultato adoperando <i></i> che sono equivalenti di <em></em>.

I è stato usato fino ad oggi ed era l'iniziale della parola inglese Italic.

Risulta abbastanza logico pensare che si possono combinare i vari tags fra di loro nidificandoli e di conseguenza sommandone i vari effetti: grassetto più inclinato: <strong><em> web-link.it </em></strong> così da ottenere: web-link.it tutto per la tua pagina web.

Consiglio: Alcuni attributi non sono più ammessi e di conseguenza disapprovati dal W3C anche se di fatto funzionerebbero ugualmente. E' preferibile usare questi attributi all'interno dei fogli di style anche se in questo contesto ritengo sia prematuro.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.

I: Riproduce come stile corsivo del testo.

B: Riproduce come stile grassetto del testo.

BIG: Riproduce il testo con un carattere "grande".

SMALL: Riproduce il testo con un carattere "piccolo".

STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.

U:Disapprovato. Riproduce del testo sottolineato.

E' anche possibile cambiare il colore, le dimensioni, il tipo di font ed altro ancora. I metodi sono due: Adoperare il tag <font> con i relativi parametri o fare uso di un foglio di style, prima di parlare di fogli di style aspetterei di aver acquisito un minimo di familiarità con il linguaggio html di base.

Per il tag font l'operazione è molto semplice, si tratta di racchiudere il testo fra i tags <font> e </font> con la consueta procedura adoperata per tutti gli altri elementi (tags). Fra gli attributi (parametri) adoperabili con font si trovano: color, face e size. Rispettivamente per: colore, tipo di carattere e dimensioni dello stesso.

Vediamo come si adoperano: <font color="valore o nome"> fra le doppie virgolette sono ammessi i nomi dei colori in lingua inglese o il numero del colore in formato esadecimale (un numero formato da tre coppie esadecimali precedute dal simbolo # cancelletto). Su questo link alcuni esempi. <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 font o carattere adoperando quello specificato fra le doppie virgolette: <font face="Comic Sans MS"> Testo scrivendo con il font Comic Sans MS <font size="valore numerico"> cambia le dimensioni del font o carattere, dove il valore specificato può avere un numero 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

<font size="+2">

Sto scrivendo con un font dimensione +2 Anche in questo caso si possono avere più attributi per lo stesso font e combinarli fra di loro: <font color="#008000" size="3" face="Comic Sans MS"> testo con font dimensione 3 colore verde carattere Comic Sans MS

Attenzione: le dimensioni del carattere dipendono anche dalle impostazioni personalizzate sul browser di chi ci visita, soltanto con i CSS si possono forzare queste impostazioni.

Per il tipo di font evitate di adoperare fonts particolari che sono sicuramente molto belli per voi che li preferite ad altri ma che di fatto poi non si trovano installati nel PC di chi visita la pagina, in quel caso sarebbero sostituiti con un font standard ed il risultato sarebbe decisamente diverso e deludente da quello previsto.

Con questa lezione avete imparato ad introdurre caratteri speciali e modificare il testo in modo da renderlo più gradevole alla lettura, nella prossima lezione vedremo come ottenere uno sfondo fatto da una immagine o come cambiare il colore dei links e l'importanza dei comandi che è possibile inserire in head.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

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 il nostro sito potrà essere visto meglio dai motori di ricerca ed aggiungeremo alcuni attributi per il tag <body> in modo da estendere questi attributi a tutto il documento e non soltanto al singolo tag.

Head Iniziamo con i MetaComandi, ovvero i tags letti dalla sola rete e che non produrranno alcuna variazione visiva al nostro lavoro. Che ci siano o meno sarà ininfluente ai fini estetici ma se il sito deve essere "scovato" dai motori di ricerca o dovrà essere validato da W3C, sarà indispensabile farne uso.

I metacomandi sono diversi e per svariati utilizzi, potete vederne molti raccolti su questa pagina: - I MetaTags - dove a fondo pagina (quella del link) trovate un piccolo modulo per generare automaticamente i metacomandi che servono al vostro sito personalizzandoli in base al vostro contenuto. Io credo che soltanto alcuni siano veramente importanti ed utili per essere rintracciati meglio dai motori di ricerca. Voi potete valutare ed inserire tutti gli altri presenti in quella pagina, Che cosa sono i motori di ricerca?

Quando andate sulla rete internet 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 web non potrebbe elencarla insieme a tutte le altre che trattano l'argomento ricercato.

Per questo motivo è opportuno specificare nella pagina iniziale, quella dal nome index.html almeno un minimo di informazioni relative al contenuto del sito, lo si fa con questi meta 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="xxx" content="yyy">

Dove al posto di xxx andrà messo il nome del metacomando ed al posto di yyy il suo contenuto o descrizione.

Come dicevo sopra, i metacomandi veramente importanti (a mio avviso) sono pochi: titolo (title), descrizione (description), parole chiave (key words), decodifica caratteri (charset).

Vediamo la loro sintassi e a cosa servono nello specifico: <meta name="DC.Title" content="Mio Titolo"> Si adopera per il titolo del documento, al posto di "Mio Titolo" mettete il titolo della vostra pagina. <meta name="description" content="La descrizione del sito o della pagina"> Si adopera per la descrizione, è questo che vi identifica realmente in rete, 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 nella pagina, spesso si adoperano parole diverse che hanno però lo stesso significato, cercando così di interpretare ed 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 "Script Java". 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 dove per certi motori è addirittura indispensabile.

Per chiarire ancora meglio questo concetto vi riporto alcune keywords inserite nei mie metacomandi: editor, pagine, html, corsi, principianti,. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> Si adopera per specificare il set di caratteri usato all'interno della pagina. In questo esempio quello di windows-1252 molto adoperato il charset=iso-8859-1.

ATTENZIONE Questi metacomandi dovranno essere inseriti soltanto nella prima parte della struttura, e precisamente fra i tags <head> e </head>, e non nel body come avete fatto fino ad ora.

Riprendendo lo schema della prima lezione: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> qui i comandi meta </head>

<body> qui immagini, testi, links </body> </html> Concluderei la sezione Head dicendo che al suo interno trovano posto anche altri elementi (tags) quali richiami o dichiarazioni per i fogli di style e codice di programmazione sotto forma di script , non ritengo sia il caso di approfondire questo argomento adesso, non in questa rubrica almeno, ma se visitate i due links sopra troverete comunque tutte le informazioni necessarie al loro utilizzo. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="DC.Title" content="Il titolo"> <meta name="description" content="La descrizione della pagina"> <meta name="keywords" content=" le parole chiave separate da virgole"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> </head> <body> qui immagini, testi, links </body> </html>

Body Il tag <body>, che dichiara l'inizio del corpo del documento, supporta diversi attributi con relativi parametri che se inseriti direttamente in questo tag saranno estesi all'intero documento dal momento che body fa riferimento a tutto il documento e non soltanto ad una sua parte specifica.

Vediamo gli attributi principali: bgcolor="nome del colore di sfondo a tinta unita". background="nome dell'immagine gif, jpg o png 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, se si decide per bgcolor non potremo fare uso anche di background o viceversa, dal momento che uno escluderebbe logicamente l'altro, a meno che non si faccia uso di immagini con zone in trasparenza che lascerebbero vedere il fondo sotto. 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" text="#4f4f4f"> Questa dichiarazione di attributi nel body imposterà uno sfondo a tinta unita di colore green (verde) con una distanza dai margini superiore ed inferiore di 10 pixel, una distanza dai margini laterali sinistro e destro di 5 pixel, il colore dei links anziché essere del colore di default (quello impostato automaticamente che è blu) sarà porpora per i links non ancora visitati e fucsia per quanto riguarda quelli già visitati o cliccati, ed infine il colore del testo: grigio scuro.

I colori possono essere espressi oltre che col nome in lingua inglese anche dall'equivalente numero in base esadecimale nelle classiche sei cifre precedute dal simbolo # (pound o cancelletto). Una vasta scelta di colori la trovate su questa pagina della guida html.

Con questa lezione avete imparato ad introdurre i metacomandi per i motori di ricerca e gli attributi del body, siete finalmente pronti per trasferire il sito sul server, cioè on-line. C'è ancora molto da imparare ma già così le vostre pagine hanno tutto il necessario per essere gradevoli e soprattutto leggibili: testo, immagini e links.

Nota: Da qualche anno ormai i moderni browser fanno uso dei CSS, ovvero i fogli di style a cascata. All'interno dei quali è possibile specificare gli attributi come quelli che in questa lezione sono stati assegnati all'elemento body. Sono una vera comodità, chi avesse intenzione di farne uso o semplicemente di approfondire l'argomento potrà consultare la guida CSS ma sono sicuro che per comprendere bene l'uso dei fogli di style si debba prima aver compreso il meccanismo degli attributi di html che, come in questo caso, sono stati assegnati all'elemento body.

Nella prossima lezione vedremo come strutturare il sito facendo uso dei FRAMES cioè quei riquadri con cornici che suddividono la pagina in due o più finestre, struttura che si rende particolarmente comoda e versatile nel caso di: pagina menù laterale o superiore fissa, pagina principale sulla quale alternare i vari links della pagina menù, praticamente la stessa struttura che adopero io con www.web-link.it dove ho un terzo frame per la sola musica.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

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 fin da subito qualcosa di concreto, 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 soltanto se interessati a strutturare il proprio sito in due parti ben distinte: menù laterale (sopra, sotto, destra o sinistra) e pagina principale. Se il sito che avete intenzione di creare dovesse trattare decine di argomenti e di conseguenza decine di pagine,

molto probabilmente si renderebbe necessario fare uso di un menù, il quale dovrà essere riportato su tutte le pagine per dare modo al visitatore di scegliere ogni volta comodamente l'argomento. Per evitare di ripetere questo menù su tutte le pagine è possibile usare una struttura a frames. Così facendo si userà il menù una sola volta su una sola pagina che resterà fissa al variare di tutte le altre pagine degli argomenti. Detto così sembra molto complesso ma vi assicuro che è più semplice di quello che potete immaginare.

I Frames (o cornici) altro non sono che una suddivisione della pagina principale in due o più pagine all'interno della stessa finestra del browser. Quante e come disporle dipende soltanto da noi, dal nostro progetto e dalla sua organizzazione. Non esistono limiti anche se si raccomanda di non esagerare per non compromettere la semplicità di gestione da parte del suo stesso ideatore.

In molti casi sono sufficienti due soli frames (cornici), uno laterale dove inserire il menù e l'altro la vera e propria finestra di navigazione. Per dare meglio l'idea di struttura vediamo un paio di esempi: Con menù laterale:

Frame laterale sinistro per le voci del menù

Frame laterale destro per la pagina principale.

Con menù superiore.

Frame superiore per le voci del menù o per un banner sponsor

Frame inferiore per la pagina principale.

Quale dei due schemi adottare dipende soltanto da noi, in qualsiasi caso bisognerà creare una nuova pagina html che dovrà contenere al suo interno soltanto il codice per la struttura dei frames.

Questa nuova pagina così creata richiamerà all'interno di se stessa le altre pagine (in questo esempio due) che si disporranno affiancate verticalmente (oppure orizzontalmente). Di solito essendo questa la pagina iniziale del sito viene chiamata index.html, come spiegato nelle lezioni precedenti.

Per prima cosa si preparano le altre due pagine: menu.html e principale.html, potete assegnare loro qualsiasi altro nome, l'importante è ricordarsi di cambiare i riferimenti laddove io ho adoperato questi due nomi per gli esempi di questa spiegazione.

A questo punto, se avete chiamato index.html il lavoro svolto fino ad ora, rinominatelo in principale.html e creiamo una nuova pagina dal nome index.html. Riprendete la struttura base e portatevi col cursore del mouse subito sotto il tag </head>, inserite il nuovo elemento (tag) che serve per dichiarare una struttura a frames: <frameset> Si avete capito bene, nessun errore da parte mia, i frames non vanno inseriti ne dentro alla testa <head> ne dentro al corpo <body> ma in mezzo, esattamente dove finisce la testa ed inizia il suo corpo. Questo è l'unico tag di html a comportarsi così.

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. Da non dimenticare la chiusura </frameset>. Al suo interno possono essere contenuti altri elementi <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%"> Assegnando in questo caso il 25% dello spazio totale 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 cioè mantenere le proporzioni dovute a risoluzioni video e dimensioni diverse impostate dal visitatore. Per esperienza suggerisco di impostare il frame menù con una misura fissa, magari 220 pixel ed il frame principale variabile a seconda di quanto spazio rimane, per fare questo si usa il carattere * asterisco, una specie di jolly: <frameset cols="220,*"> 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: <frame name="menu" src="menu.html"> <frame name="principale" src="principale.html"> L'elemento o tag "frame" ha diversi attributi, due sono indispensabili: name che identifica il nome del frame così da poter richiamare su quel frame un link proveniente da un frame diverso, e src (source) che invece richiama la pagina html vera e propria.

Dal momento che i frames impartiscono una divisione della finestra del browser, dovremo decidere se la cornice divisoria deve essere ben visibile oppure no. Nel caso in cui il contenuto del frame menù fosse piuttosto ricco di voci, quindi abbastanza lungo, 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 che tratta dei frames in maniera più approfondita. Per il momento quello che ci serve è una struttura di questo tipo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html> <head> <title>Struttura per frames da Web-Link </title> </head> <frameset cols="220,*"> <frame name="menu" src="menu.html" scrolling="auto"> <frame name="principale" src="principale.html" scrolling="auto"> <noframes> <body> <p>spiacente il tuo browser non supporta i frames</p> </body> </noframes> </frameset> </html>

Prima di proseguire nella spiegazione si noti il doctype che è diverso, in questo caso viene usato Frameset e non Transitional come nelle normali pagine senza frame. Questo doctype serve solo per la pagina che ha la struttura a frames mentre per tutte le altre si dovrà continuare ad usare Transitional.

Si noti anche il tag noframes che serve a visualizzare un messaggio o eseguire altro codice html nel caso in cui il browser non supportasse i frames.

Salvate la pagina col nome index.html. Vorrei sottolineare che il frameset non è all'interno del tag body e nemmeno all'interno del tag head ma è stato scritto dopo la chiusura di head, praticamente questo dei frames è l'unico tag che non viene inserito in nessuna delle due sezioni (head o body) come spiegato all'inizio di questa rubrica Se avete salvato il file come index.html non resta che provare a vedere cosa succede: richiamatelo come avete fatto fino ad ora, se avevate preparato precedentemente i due files: menu.html e principale.html questi saranno visualizzati contemporaneamente, uno di fianco all'altro nella stessa finestra dando l'impressione di essere una sola ed unica pagina.

Ricordatevi i nomi che avete assegnato nella struttura ai vostri frames con l'attributo name, saranno questi nomi che richiamati all'interno dell'attributo target dei links decideranno su quale dei due frames aprire il link.

Difficile? Per un principiante si, Un esempio chiarirà sicuramente meglio.

Se avete deciso di usare due frames è molto probabile che uno di questi due debba ospitare un menù, i links di questo menù dovranno però aprire la pagine nella finestra principale e non certo nel piccolo frame del menù stesso sul quale si trovano. Per fare questo si dovrà aggiungere al link l'attributo target (bersaglio o destinazione) specificando il nome del frame usato con (name), quindi: <a href="nome_pagina.html" target="principale">

Questo link ha in più, rispetto a quelli visti nella lezione sui links, l'attributo target che soltanto adesso ha ragione di esistere dal momento che abbiamo una struttura con più di una sola finestra, possiamo adesso decidere su quale di queste due finestre aprire il link, per farlo basta semplicemente specificare il nome del frame assegnato precedentemente con name che diventa il valore dell'attributo target.

Su questo link è possibile vedere 18 schemi di frames combinati in modo diverso e selezionare il codice html già pronto, voglio sperare che lo facciate soltanto per apprendere e confrontare il codice adoperato e non per copiarlo spudoratamente :) Con questa lezione avete imparato a gestire il vostro sito adoperando più di una sola pagina web contemporaneamente. Molte persone manifestano una certa diffidenza alla gestione del sito con i frames, alcuni hanno validi motivi, forse, altri ne parlano male soltanto perchè hanno incontrato problemi e difficoltà dovuti ad una errata pianificazione degli stessi. Personalmente li trovo molto utili e per niente complicati da gestire, in alcuni casi sono addirittura l'unica soluzione possibile. Il fatto stesso che il W3C ne continui ad approvare l'uso è di per se una garanzia.

Nella prossima lezione vedremo le tabelle che a differenza di quanto potrebbe sembrare dal nome non servono soltanto per ordinare ed incolonnare dati, anzi, molto spesso sono adoperate per scopi completamente diversi, come per esempio il posizionamento degli elementi di html quali testo ed immagini, così da poterli facilmente disporre secondo precisi schemi di impaginazione.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Le Tabelle.

Nelle lezioni precedenti abbiamo imparato a creare un sito, siamo in grado di suddividerlo in frames, adesso però ci accorgiamo che con le nostre conoscenze non è per nulla semplice riuscire a posizionare gli elementi che formano la pagina così come avremo voluto.

I metodi più evoluti prevedono l'uso dei CSS ovvero Cascading Style Sheet ma al momento noi da buoni principianti non ci occuperemo di queste tecniche. Affronteremo il problema in modo tradizionale, facendo uso delle care vecchie tabelle.

Le tabelle contrariamente a quanto si potrebbe pensare non servono soltanto per incolonnare e tabulare dati, la struttura di una tabella serve anche come "contenitore" per testi ed immagini, proprio come ho fatto io per creare questa rubrica Primi Passi. In questo caso ho reso la tabella invisibile in modo da non compromettere l'aspetto estetico 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 in colonne. Intere tabelle possono poi essere a loro volta contenute all'interno di celle di altre tabelle, da qui il termine nidificate, un po' come succede con quelle scatole cinesi dove una è all'interno di un'altra.

Iniziamo nel modo più semplice possibile, supponendo di volere una tabella con una sola cella, questa la sua definizione: <table border="1"> <tr> <td> qui andrà messo il contenuto della tabella </td> </tr> </table> Questo il risultato grafico: contenuto della tabella

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 una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <td> all'interno di uno stesso elemento <tr> <table border="1"> <tr> <td> cella sinistra </td><td> cella destra </td> </tr> </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"> <tr> <td> cella alta a sinistra </td><td> cellaalta a destra </td> </tr><tr> <td> cella bassa a sinistra </td><td> cella bassa a destra </td> </tr> </table> Questo il risultato grafico: cella alta a sinistra

cella alta a destra

cella bassa a sinistra cella bassa a destra Definirei questo meccanismo abbastanza semplice oltre che molto logico, quindi facile da capire.

Spesso però servono tabelle che non siano regolari come quella appena vista, c'è bisogno di avere colonne o righe irregolari. Questo accade abbastanza spesso quando l'uso della tabelle non si limita alla semplice tabulazione dei dati ma viene adoperata 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 facendo uso di altri due attributi: rowspan e colspan che servono rispettivamente per occupare più di una sola cella in senso orizzontale ed in quello verticale. Visto che modificano la cella 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): <table border="1"> <tr> <td> cella alto sinistra </td><td> cella alto destra </td> </tr> <tr> <td colspan="2"> questa cella occupa lo spazio di due celle </td> </tr> </table> Questo il risultato grafico:

cella alto sinistra

cella alto destra

questa cella occupa lo spazio di 2 celle Allo stesso modo volendo 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"> <tr> <td rowspan="2"> questa cella occupa 2 righe </td><td> cella alto destra </td> </tr> <tr> <td> cella basso destra </td> </tr> </table> Questo il risultato grafico: questa cella occupa 2 righe

cella alto destra cella basso destra

Come abbiamo appena avuto modo di vedere combinando questi attributi è possibile ottenere una struttura ottimale, tutto dipende da come e che cosa vogliamo impaginare.

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"> <tr> <td colspan="3" align="center">testata pagina</td> </tr> <tr> <td>colonna 1 </td><td>colonna 2 </td><td>colonna 3 </td> </tr> <tr> <td colspan="3" align="center">piede pagina</td> </tr> </table> questo il risultato: testata pagina colonna 1

colonna 2

colonna 3

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, cioè modificherà le proprie dimensioni adattandosi perfettamente alle dimensioni dei testi: testata pagina colonna 1 inserimento di testo casuale al solo scopo colonna 3 dimostrativo, notate come colonna con meno questo torna a capo da solo 2 testo della colonna 1 e come allunga ed allarga la tabella stessa. 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"> testata pagina colonna 1 testo colonna 2 testo colonna 3 testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo piede pagina

Mentre questo, lo stesso esempio, con bordo a 5: <table border="5"> testata pagina colonna 1 testo colonna 2 testo colonna 3 testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo piede pagina Oltre al bordo è 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 viene specificato alcun valore, i due attributi assumono come valore di default 2. <table border="1" cellspacing="10" cellpadding="8">

testata pagina

colonna 1 testo testo testo testo testo testo testo testo testo

colonna 2 testo testo testo testo testo testo testo testo testo

colonna 3 testo testo testo testo testo testo testo testo testo

piede pagina

E' anche possibile avere uno sfondo colorato a tinta unita o un motivo grafico. Gli attributi da adoperare sono: bgcolor per il colore a tinta unita, o background per un'immagine grafica valida (gif, jpg, png) da usare 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 è possibile adoperare colori o sfondi diversi per ogni singola cella, in questo caso invece di applicare gli attributi al tag table si applicano al tag cella <td>. <table border="1"> <tr> <td colspan="3" bgcolor="Red">testata pagina</td>

</tr> <tr> <td bgcolor="Lime">colonna 1 </td> <td bgcolor="Silver">colonna 2 </td> <td bgcolor="Yellow">colonna 3 </td> </tr> <tr> <td colspan="3" bgcolor="Aqua">piede pagina</td> </tr> </table>

testata pagina colonna 1 testo colonna testo colonna 3 testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo piede pagina

Gli attributi supportati dalle celle sono molti: 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.

Per tutti gli altri, che al momento servirebbero soltanto a confondervi, potete fare riferimento alla mia guida html.

Con questa lezione abbiamo imparato ad impaginare gli elementi di una pagina web facendo uso di tabelle.

Nella prossima lezione vedremo i moduli, meglio conosciuti come: "forms" che servono a creare questionari o semplici mezzi per poter interagire direttamente col visitatore del nostro sito.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

I Moduli o Forms.

Nelle lezioni precedenti abbiamo imparato molto, almeno questo voglio credere e 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. 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 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 di tutti gli elementi che si renderanno necessari.

Vediamo come creare il più semplice: <form> Questo è l'elemento che dichiara il modulo, da solo dice poco o niente, necessita di alcuni attributi, almeno due: action e metod e volendo anche un terzo opzionale: name che servono rispettivamente: action per indirizzare il modulo al server, all' URL, al CGI o all'indirizzo di posta. motod 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 ad oggetti.

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: Inserisci il tuo nome:

invia

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 web. Verificatelo negli accessori o nei servizi offerti dal vostro gestore, è probabile trovarlo sotto la voce di formmail o sendmail.

Questo Formail offre la possibilità di ricevere i dati provenienti dal vostro form e li inoltra sulla casella postale da voi specificata, con il vantaggio di inviarvi tutti i dati opportunamente ordinati e senza obbligare chi compila il modulo a dover inserire la propria e-mail. Se da una parte favorisce i messaggi anonimi dall'altra incentiva i commenti anche di coloro che non amano lasciare il proprio indirizzo e-mail 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 un paio di esempi che certamente chiariranno 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..

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 e-mail. Gli script offrono controlli sui dati introdotti ed inviano anche diverse informazioni quali: l'ora, il giorno, l'URL del mittente.

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 modulo potrà essere spedito e di conseguenza recapitato. I dati sono meno ordinati ma comunque leggibili.

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: Tuo nome: giudizio: invia

Facendo uso di una tabella con border=0, l'abbiamo imparato nella lezione precedente, è stato possibile dare al form un aspetto molto più ordinato, oserei dire quasi professionale :-) Se volete provarlo funziona ma non sappiamo a chi arriverà, ho dovuto infatti togliere il mio indirizzo e-mail per ragioni di spam ma questo è un rischio che chiunque abbia un sito web dovrà correre.

Se inserite il vostro indirizzo email vi sarà recapitato in mail-box, in questo formato: tuo nome=dati inseriti giudizio=dati inseriti 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: <form method="post" action="mailto:vostronome@serverdiposta.it?subject=dalla lezione 8 di 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: action="mailto:vostronome@serverdiposta.it" Dovremo adoperare un indirizzo di CGI valido, ripeto: informatevi sulla home page del fornitore del vostro spazio web, gratuito o a pagamento che sia. Vi assicuro che questo servizio è comune a molti degli spazi web offerti anche gratuitamente.

Con questa lezione abbiamo imparato anche a cosa servono a come si costruiscono i moduli, una delle cose più difficili per un principiante. Siamo quasi alla fine, non arrendetevi proprio adesso, ormai non resta molto.

Nella prossima lezione, vedremo come inserire la musica, gli script e le applet.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Audio Script Applet Nelle lezioni precedenti abbiamo imparato l'essenziale e forse anche qualcosa in più per poter realizzare un discreto sito web, confido soprattutto nella vostra fantasia ed estro oltre che nel vostro buon gusto nel saper scegliere i colori, gli sfondi, le immagini, i fonts, e quant'altro possa servire per una gradevole pagina web.

Se avete imparato il meccanismo per inserire e far funzionare i tags di html, come usare i loro attributi e relativi parametri, siete praticamente in grado di inserire qualsiasi altro tag, vi basta sapere che esiste e quali sono i suoi attributi. La guida HTML ne raccoglie molti che non sono stati trattati su queste pagine, il meccanismo è lo stesso per tutti, se lo avete appreso non avrete alcuna difficoltà nell'inserire tutti quelli che secondo voi servono alla realizzazione del vostro sito.

Per concludere ve ne mostro alcuni un po' particolari: inserire un sottofondo musicale ed 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 object Questa la sua sintassi: <object type="audio/x-mid" data="nome_file.mid"> <param name="src" value="nome_file.mid"> <param name="autostart" value="false"> <param name="loop" value="true"> </object> Questo il risultato: Se non vedete alcuna interfaccia grafica è perchè sul vostro browser non è stato installato alcun plug-in per riprodurre il file di tipo midi da me adoperato nell'esempio, questo è uno degli ostacoli per i quali si continua ad usare l'elemento embed che il W3C ha deprecato. <embed src="nome_file.mid" width="145" height="35" autostart="false" loop="true"> Dove per entrambi gli esempi nome_file.mid è il nome del brano midi da riprodurre, autostart= true o false per avviare il brano automaticamente o manualmente, loop= true o false per ripeterlo all'infinito o una sola volta. width e height servono per visualizzare l'interfaccia grafica. Chi adopera ad esempio il multimedia player di Windows ne vedrà in questo esempio una porzione di dimensioni 145 x 45 pixel.

Nell'esempio ho inserito "false" come attributo di autostart, quindi per ascoltare la musica si dovrà premere sul pulsantino play dell'interfaccia grafica. 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, come per le immagini non dimenticate mai che un file di qualsiasi tipo che superasse i 1000 ~ 150 Kb sarebbe a mio avviso da scartare.

Il brano musicale smette 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 il visitatore durante tutta la navigazione. Per la struttura a frames vi rimando alla lezione 6 e alle mie F.A.Q. o anche alla guida html dove troverete maggiori e più dettagliate informazioni sui tags

dell'audio.

L'introduzione di brani musicali protetti da diritto d'autore implica un certo rischio. Fate attenzione.

Scripting Html da solo ha dei limiti, visto che era nato soltanto per pubblicare documenti statici, limiti facilmente superabili grazie all'integrazione di linguaggi di scripting. Il migliore è senza alcun dubbio JavaScript, non fosse altro perché è compatibile con tutti i browser. Funziona lato client, cioè sul browser di navigazione senza fare uso del server in cui si trova la pagina web che ne fa uso.

La rete ne distribuisce in gran numero e per ogni esigenza, anche qui su Web-Link ce ne sono diversi, li trovate alla voce scripting, si tratta di seguire alla lettera le istruzioni riportate all'interno di ogni script facendo attenzione a non omettere niente, neppure una sola virgola del codice fornito, compresi i ritorni a capo e le spaziature, pena il mancato funzionamento dello script se non addirittura il blocco totale del vostro programma di navigazione.

Di solito uno script è formato da una o più parti di codice, queste devono essere posizionate fra gli elementi <head> </head> e/o <body> </body> come farlo funzionare lo si trova scritto nelle spiegazioni, per cui non è quasi mai un problema.

Un esempio di scripting potrebbe essere questo sotto, vi permette di distinguere un link richiamando un messaggio in caso di clik. <script language="javascript" type="text/javascript"> <!-function clic() { alert ("Hai fatto click sul link giusto."); } // --> </script> Provate adesso a fare click su questo link. Questo è un banalissimo esempio ch eserve per capire il meccanismo. Guardate questo orologio invece: Al tuo Orologio sono le ore:

17:45:57

Qui le cose si complicano, per modo di dire perchè questo script è formato da tre parti di codice: una inserita fra i tags <head>, un'altra direttamente nel tag body, una terza per visualizzare il risultato dello script, inserita nel punto preciso della pagina sulla quale farvi vedere l'ora.

Lo trovate nella sezione dedicata agli script completo di tutte le istruzioni per inserirlo e personalizzarlo.

Applets La stessa cosa detta per gli scripts vale anche per l'introduzione di applets...

Cosa sono le applets ?

Si tratta sempre di codice java ma questa volta compilato e salvato in uno o più files di tipo .class, questi files di solito dovrebbero trovarsi sul server, nella stessa cartella dove c'è la pagina che li richiama.

Le applets a differenza degli script non si limitano ad impartire istruzioni precise al browser, sono dei veri e propri programmi che lavorano in assoluta autonomia. Sulla rete si trovano molte applets per gli usi più disparati, dai giochi alle utility, dalle applicazioni grafiche alle funzioni matematiche.

Anche in questo caso sarà l'autore stesso a fornire le spiegazioni necessarie al suo inserimento e più di ogni altra cosa come impostare i vari parametri per ottenere un corretto funzionamento. provate a visitare la sezione dedicata alle applets, non ne sono io l'autore, mi sono limitato a raccoglierne alcune molto belle, potrete così rendervi conto di cosa si tratta e come si adoperano.

Con questa lezione avete imparato tutto, si insomma diciamo moltissimo di quello che c'era da imparare :-) Non vi resta che trasferire on line (sulla rete) il vostro lavoro. Sarà proprio quello che faremo nella prossima lezione. Assicuratevi che tutto funzioni in locale, cioè nel vostro PC, e se funziona bene, funzionerà anche in rete.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Consigli e conclusioni Siamo giunti al termine di questa rubrica dedicata a tutti i principianti che hanno deciso di imparare a creare e gestire un proprio sito web.

Nelle lezioni precedenti credo di aver detto tutto quello che c'era da dire per permettervi di crearlo nel modo più semplice e rapido possibile.

Ho volutamente tralasciato molte cose che non ritengo al momento indispensabili e questo al solo scopo di non confondervi troppo le idee.

Se qualcuno di voi, una volta acquisita la giusta dimestichezza col metodo, volesse approfondire... oltre alla letteratura specializzata potete leggere anche la mia guida su HTML, il procedimento resta lo stesso identico, così come avete imparato ad introdurre gli elementi base potete introdurre anche tutti gli altri elementi che fanno parte del linguaggio HTML. Molte cose sono state semplificate dall'uso dei fogli di style (CSS) che dovete necessariamente leggere prima o poi. Per il momento credo possa bastare quello che è stato detto nelle 11 lezioni.

Le tecniche apprese sono importanti ma il successo del sito dipenderà in gran parte dal vostro buon gusto, dalla vostra fantasia nel saper scegliere e dosare sapientemente i colori, gli sfondi, le immagini, i fonts e quant'altro possa far parte di una pagina web.

Non c'è cosa peggiore di una scritta scura su sfondo nero o di una bianca su sfondo chiaro.

Ricordatevelo sempre!

Vi suggerirei di evitare pagine di grosse dimensioni e magari farcite anche di immagini animate, applets, scripts, scritte in movimento e chi più ne ha più ne metta.

Tutte cose che appesantiscono e confondono la visualizzazione delle informazioni che invece dovrebbero essere le più leggere e semplici possibili.

Non tutti forse sanno che una pagina web prima di essere visualizzata dal browser deve essere scaricata completamente nel proprio PC, in una zona chiamata memoria cache o temporanea, per cui il tempo richiesto per la sua visualizzazione varia molto non solo dal tipo di connessione adoperata ma a seconda di quello che avete introdotto in quella pagina. Tenete sempre presente che non tutti dispongono di una linea a larga banda, se il vostro visitatore ha tempi d'attesa lunghi sarà facilmente indotto ad abbandonare il vostro sito a favore di un altro che offre lo stesso argomento e difficilmente tornerà a farvi visita.

In caso di molte informazioni evitate lunghe pagine, dividetele facendo in modo che diventino più di una, come ho fatto io per questa rubrica. Se il contenuto è interessante, saranno sfogliate comunque tutte quante proprio come si farebbe con la lettura di un libro.

Pagine che contengono molto testo dovrebbero avere delle piccole immagini, anche se non sono strettamente necessarie, questo darebbe un insieme di aspetto estetico più gradevole senza affaticare la sua lettura.

Offrite la possibilità di navigare il sito con menù e/o con rimandi a fine pagina, il navigatore dovrebbe muoversi nel modo più agevole possibile, senza dover adoperare ogni volta i tasti del browser per pagina avanti e pagina indietro.

Evitate immagini pesanti, se le acquisite voi stessi con uno scanner usate 75 dpi. più che sufficienti per una buona grafica web. Se ne avete di già pronte sottoponetele ad una elaborazione da parte di quei programmi che le "strizzano" un poco riducendone il peso senza perdere in qualità. Ricordate che se non vi servono immagini animate o con trasparenze, quelle di tipo .jpg sono da preferirsi essendo in assoluto le più leggere.

Ho finito, vi lascio questo utile link dove poter verificare la corretta stesura del codice html. Se come credo farete un vostro sito vi piacerà che sia privo di errori.

Come sempre,se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Chi non ha mai avuto la tentazione di farsi un proprio sito o più semplicemente una semplice Pagina web personale?

Considerando che sarebbe tutto gratuito, è praticamente quasi impossibile non provarci prima o poi. :-) Bene, se abbiamo deciso di farlo vediamo cosa ci serve.

Prima di tutto un Editor Html per trasformare nel modo più semplice possibile le nostre idee in codice comprensibile ai browser. Qualcuno si starà chiedendo cosa sia un editor, cosa possa essere HTML e alcuni persino cos'è un browser...

Un editor altro non è che un programma di scrittura del codice, il codice generato prende il nome di codice HTML, questo codice viene letto ed interpretato dal browser, ovvero dal programma che adoperate normalmente per la navigazione in rete.

Gli editors si dividono sostanzialmente in due categorie: visuali e testuali, per approfondire meglio questo argomento vi rimando alla mia rubrica primi passi dedicata ai principianti. Se avete invece un minimo di conoscenza, consultate la mia guida HTML. e la rubrica sui CSS fogli di style in cascata o alla più recente XHTML con Style dedicata sempre ai principianti.

Oltre allo strumento editor per la costruzione della vostra pagina web vi serviranno anche delle immagini e o qualche animazione, come costruirsele? Non è proprio necessario, non serve infatti essere dei grafici esperti, fortuna vuole che tutto, o quasi, si trovi già sulla rete stessa e cosa ancora più sorprendente che sia tutto quanto gratuito... è sufficiente andare su uno dei tanti siti che offrono questo genere di materiale e prelevarlo. Anche Web-Link ha la sua area dedicata a questo genere di materiale sulla quale prelevare oltre alle immagini anche molti degli sfondi più belli.

Navigando si incontrano siti che hanno effetti spettacolari, viene da chiedersi come sia possibile realizzarli, alcuni li ho raccolti su questo mio stesso sito alle voci: scripting per quanto riguarda Javascript e Applets per quanto riguarda invece Java.

Se non avete trovato nulla di soddisfacente provate su uno dei tanti altri siti che ne distribuiscono davvero molti: Applet Java , JavaScript . Ci sono anche altri effetti che si possono ottenere grazie a Dynamic HTML e Flash di Adobe.

Terminata la parte grafica, è possibile inserire altri utili accessori quali: Contatori di visite (counter) per sapere in quanti visitano il nostro sito.Guestbook ovvero libro degli ospiti, per raccogliere commenti e suggerimenti dai vari visitatori. Banners ,striscioni pubblicitari, per farsi conoscere in rete attraverso lo scambio link e l'iscrizione, sempre gratuita, sui principali motori di ricerca italiani e stranieri.

Se abbiamo finalmente realizzato qualcosa e vogliamo vederlo funzionare non soltanto sul nostro PC ma anche in rete, dovremo trasferirlo su uno dei tantissimi spazi web gratuiti, dovete solo scegliere quale; le istruzioni per prenotarlo e cosa fare per la relativa manutenzione si trovano descritte sul sito stesso di chi offre lo spazio, per questo motivo vi consiglio di scegliere possibilmente uno spazio free italiano, in modo che sia più semplice comprendere le varie procedure da compiere.

Quanto deve essere grande questo spazio? Dipende solo dalle vostre esigenze e dai vostri progetti futuri, tenete presente che pochi Mega Byte sono più che sufficienti per tutti.

Quando finalmente sarà tutto pronto, non resterà che trasferire il tutto fisicamente on-line (in linea o sulla rete), operazione possibile con uno dei tanti programmi per il trasferimento via FTP. E' infatti questo il sistema più adoperato oltre che più comodo per l'invio sulla rete dei files che compongono il nostro sito. Per configurare questi programmi nessuna preoccupazione, si tratta di inserire semplicemente tre dati, i quali saranno forniti dallo stesso gestore dello spazio web nel momento dell'iscrizione. Per chi non avesse mai visto uno di questi programmi ho preparato alcune schermate relative alla loro configurazione e sono raggiungibili sempre su questo link.

Facile a dirsi, ma a farsi? Vi assicuro che se da parte vostra c'è un minimo di buona volontà non sarà poi così difficile, ho una sezione dedicata proprio ai principianti che muovono i loro primi passi in html, e se non bastasse tenete sempre presente che la rete è una miniera inesauribile di informazioni, esistono siti che offrono soltanto questo, e cioè corsi gratuiti in italiano Se avete domande o dubbi, potete consultare la mia sezione F.A.Q. ovvero: frequently asked questions, (le domande più frequenti) che sono spesso un'ottima risorsa per chi si affaccia per la prima volta a questo mondo. E poi su questo sito c'è anche un forum, gratuito ovviamente, molto ricco di argomenti è frequentato da persone disponibilissime a dare sempre una mano a tutti, te compreso :) Tutto il materiale di cui avete bisogno è reperibile seguendo i links (frasi in grassetto o di colore diverso) che trovate in questa stessa pagina, quello che non posso offrirvi sono le idee, ma sono certo che basterà la vostra fantasia.

Se poi volete prendere spunto o qualsiasi altra cosa da questo mio sito, nessun problema, servitevi pure visto che è stato costruito proprio per questo. Nel caso poi che non riusciate più a dormire la notte, vi offro anche la possibilità di tranquillizzare la vostra coscienza, vi basta mettere sul vostro nuovo sito un piccolo link al mio.

Andrea Bianchi

Benvenuti su questa mia guida dedicata a HTML. Nessuna pretesa, vuole semplicemente essere una guida di aiuto con basi introduttive, qualcosa che illustri con esempi pratici le potenzialità di questo metalinguaggio che nonostante le continue evoluzioni del web continua ad essere il pilastro portante della rete. Nasce dalle molteplici domande che ricevevo in forma privata nella mia mailbox e da qualche anno ormai sul forum gratuito di supporto. Come potrete notare cerco di tenerla sempre aggiornata nonostante non sia facile visto il continuo evolversi della rete stessa, mi auguro con questo mio ennesimo sforzo di riuscire a soddisfare tutte (o quasi) le vostre esigenze. Se poi l'argomento dovesse interessarvi al punto tale di volerlo ulteriormente approfondire, la cosa migliore sarebbe affidarsi alla letteratura specializzata. Da modesto quale sono credo di aver trattato in queste pagine tutto quello che realmente serve per creare un buon sito web.

Settembre 2008: La guida è stata scritta nella sua prima versione nel Settembre del 1998 ed oggi molte cose sono cambiate, o sarebbe meglio dire evolute, grazie soprattutto all'uso dei CSS: fogli di stile, e ad alcune regole ben precise e più restrittive che hanno dato vita al XHTML (evoluzione del linguaggio html) entrambi regolati dal W3C, consorzio che si occupa proprio di questo argomento.

Tutto quello che troverete in questa guida è e resta comunque perfettamente funzionante, vi informo che esiste una rubrica che tratta Xhtml con i fogli di style. La trovate su questo link:

http://www.web-link.it/xhtml mentre qui la guida ai fogli di style CSS. Con questo aggiornamento mi prefiggo di rendere questa stessa guida adeguata e di conseguenza sempre al passo coi tempi.

E' possibile scaricare la guida anche in formato compresso .zip per poterla consultare comodamente off-line, cioè scollegati dalla rete, è sufficiente cliccare su questo link: Scarica guida html Attenzione! eventuali ultime modifiche potrebbero non essere ancora inserite nella versione scaricabile, queste vengono infatti aggiornate ad intervalli prestabiliti o quando siano di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi. Alcuni consigli per adoperarla al meglio: nel menù laterale trovate disposto verticalmente l'indice degli argomenti: tabelle, links, immagini ecc. Per ogni argomento esistono altri due menù disposti orizzontalmente che riportano in ordine alfabetico i nomi degli elementi o tags 

Elementi o Tags:

ed i relativi attributi, (sempre in ordine alfabetico o di assemblaggio codice). 

Attributi:

Basterà un clik sul nome dell'elemento o su quello del suo attributo per raggiungere la descrizione.

Alla fine di ogni descrizione una riga come questa sotto separa e conclude gli elementi, grazie alla piccola freccia verde posizionata a destra della riga separatrice sarà possibile (cliccandola) ritornare all'indice degli argomenti.

HTML (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma usato per la navigazione) delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati fra loro per avere la padronanza del linguaggio.

Per la stesura di questo metalinguaggio si fa uso di un normale editor di testi, meglio se un editor specifico per HTML, cominciamo proprio da qui, cliccando su questo link sarà possibile scaricarne uno dalla rete.

Cosa è un editor e cosa è il codice html?

Un editor altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; quel codice che i vari browser di navigazione, qualunque essi siano, riconoscono ed interpretano. Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono molte le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto, da qui il nome sigla HTML: Hyper Text Markup Language.

Gli editors per HTML si dividono in due categorie: Visuali: molto semplici, simili ai programmi di grafica, permettono di disegnare o semplicemente

trascinare quello che serve all'interno del loro ambiente di sviluppo, operazione che genera automaticamente codice html valido.

Testuali: bisogna scrivere il codice, quindi conoscerlo, offrono gli strumenti giusti con i suggerimenti necessari alle varie situazioni, si ha il pieno controllo di quello che si sta facendo superando così quelli che spesso sono i limiti degli editors visuali. Personalmente adopero: HomeSite da quando era di Allaire, poi Macromedia ed oggi Adobe, fermo alla sua versione 5.5 da anni, ma guarda caso sempre molto attuale, lo trovo formidabile consapevole che si tratta di un parere del tutto soggettivo. Ha un solo difetto: costa, a differenza di molti altri editors distribuiti gratuitamente.

Dopo quanto appena detto è abbastanza ovvio immaginare che il principiante si affiderà agli editors visuali. Non fatelo se non per prova. C'è chi consiglia di adoperare il notepad o il wordpad di windows, personalmente reputo la scelta a dir poco illogica, della serie "facciamoci del male da soli". Non capisco perchè mai si dovrebbe adoperare uno strumento che di html non ha nulla quando la rete offre ottimi programmi, alcuni addirittura gratuiti (freeware), che danno un grosso aiuto proprio nella stesura di questo tipo di codice.

Chi avesse comunque deciso di affidarsi agli editors visuali può tranquillamente smettere di leggere il seguito di queste pagine, non gli serviranno a molto visto che parleremo di codice che l'editor visuale gestisce in assoluta autonomia. Un arrivederci a queste persone che probabilmente torneranno qui non appena insorgeranno le prime difficoltà dovute alla mancata realizzazione di determinate "cose" che non sempre un editor visuale è in grado di fare. Non ho nulla contro gli editor visuali ve lo assicuro, anzi per certe "cose" ho sempre pensato che avrei dovuto farne uso anch'io.

Un'ultima raccomandazione prima di passare in rassegna i vari elementi (tags): è bene ricordare sempre che qualsiasi pagina creata per la rete prima di poter essere visualizzata dovrà essere scaricata nella memoria interna del browser (cache); quindi, pagine lunghe o farcite di immagini, applets e suoni, sono spesso per il visitatore un ottimo motivo per decidere di abbandonare quella pagina perchè stanco di attendere. Evitatele nel modo più assoluto, meglio pianificare diverse pagine al posto di una singola. Suddividere il lavoro in più pagine non costa nulla ed offre maggiore flessibilità anche a voi stessi per eventuali future modifiche.

Html non è un vero e proprio linguaggio di programmazione, o almeno non come si è abituati a pensare quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: <TAGS>, che il browser legge in maniera sequenziale: dall'alto verso il basso, da sinistra verso destra, esattamente come avviene per noi umani la normale lettura di un testo.

Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) impartisce un ordine preciso che termina con lo stesso elemento preceduto da una barra retroversa, per rifarmi all'esempio appena citato: </queste> Non sono molti gli elementi che compongono il linguaggio, alcuni non vengono addirittura mai adoperati, al punto che spesso mi sono chiesto cosa li abbiano inventati a fare :). Come già detto, mi limiterò ad illustrare soltanto quelli che secondo il mio modesto parere possono realmente essere utili.

Per chi non avesse mai avuto prima d'ora alcuna esperienza con HTML è consigliabile iniziare dalla rubrica primi passi che in poche e semplici lezioni chiarisce quelli che sono i meccanismi per usare gli elementi illustrati in questa stessa guida, sulla quale potrete sempre ritornare una volta acquisito

quel minimo di esperienza necessaria ad assemblare gli elementi trattati.

Non vi resta che selezionare dal menù laterale il gruppo di elementi che vi interessano.

Buona lettura. Andrea Bianchi Vedi un esempio della Struttura Base

<!DOCTYPE...> Affinché un documento sia identificato come HTML esso deve iniziare con il suo identificatore di prologo: <!DOCTYPE...

HTML 4.01 prevede tre tipi di DTD e sono rispettivamente:

Strict, la più rigida che prevede l'abolizione dei tag deprecati a favore dei CSS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional, maggiormente tollerante è quella più largamente usata, anche questa guida fa uso di transitional. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset, nel caso in cui il sito sia strutturato a frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Questo tipo di riga chiamata prologo, è solitamente generata in modo automatico dall'editor che adoperate per la stesura del codice html, visuale o testuale che sia. Non è obbligatoria anche se molto consigliata, specialmente in caso di validazione del documento da parte del W3C. Ha il compito di informare il browser che si tratta di un documento html relativo a quelle determinate specifiche, in mancanza di questa dichiarazione il documento sarà identificato come rispondente alla specifica HTML 2.0

<html>...</html> L'elemento <html> identifica un documento che contiene elementi HTML, esso dovrebbe seguire l'identificatore di prologo e circondare tutto il testo restante, inclusi tutti gli altri elementi o tags. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> la parte restante del documento </html>

<head>...</head> L'elemento <head> viene utilizzato per fornire informazioni sul documento, in questa sezione trovano posto tutti quei tags che impartiscono direttive ai browser quali: titolo, Meta comandi , richiami ai fogli di stile, script.

Notare che tutto ciò che si trova all'interno della struttura head non sarà visualizzato, ma interpretato dal browser, quindi una zona destinata ad uso esclusivo dei soli comandi che impartiscono direttive ben specifiche. <!DOCTYPE HTML...> <html> <head> elementi di informazione quali: </head> la parte restante del documento </html>

<base> <link> <meta> <style> <title> <script>

<base> Consente di specificare la destinazione per tutti i link della pagina, qualora questa fosse strutturata in frames: <base target="nome_del_frame_sul_quale_aprire_i_links">

<link> Ha diverse funzioni ma la piÚ adoperata è il richiamo a fogli di style esterni: <link rel="stylesheet href="weblink.css" type="text/css">

<meta> Sono davvero molti i Meta Comandi che si possono inserire: <meta http equiv="clicca questo link per un elenco completo.">

<style>...</style> Dichiarazione di uno stile interno alla pagina che contiene la dichiarazione: <style type="text/css"...">

<title>...</title> Il titolo da assegnare alla pagina. <title>Web-Link - Tutto per la costruzione delle tue pagine web </title>

<script>...</script> Inserimento di funzioni, effetti, controlli e molto altro sotto forma di script (linguaggio di programmazione lato client): <script type="text/javascript">......</script>

<body>...</body> L'elemento <body> contiene la pagina vera e propria, quello che si vedrĂ a video: testo, immagini e tutti gli elementi che forniscono il controllo e la formattazione della pagina stessa. I possibili attributi sono: background, bgcolor, link, vlink, alink, text. background bgcolor link Molti gli attributi associabili a questo tag: vlink alink text <body attributo>

bgproperties topmargin evidenziati in giallo gli attributi proprietari bottommargin di singoli browser dei quali si sconsiglia leftmargin l'utilizzo. rightmargin

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-image: url("sfondo.gif"); background-attachment: fixed; background-color: #ff00ff; color: #000066; margin-left: 2px; }

background

Permette di adoperare un'immagine come sfondo della pagina, immagine che dovrà essere di tipo .gif .jpg o .png. Indipendentemente dalle dimensioni verrà usata a riempimento di tutta la finestra del browser, qualunque sia la sua dimensione e risoluzione del video: <body background="nome_immagine.gif">

E' possibile richiamare l'immagine anche da altro sito, specificandone l'indirizzo completo (URL) <body background="http://www.weblink.altervista.org/nome_immagine.gif">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-image: url("nome_immagine.gif"); }

bgproperties L'immagine adoperata a riempimento può essere tenuta ferma durante lo spostamento verticale (scrolling) sulla pagina, dando l'impressione di scivolare con le immagini e i testi sullo sfondo.

Attributo proprietario di alcuni browser non riconosciuto dal W3C. <body background="nome_immagine.gif" bgproperties="fixed">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-attachment: fixed; }

bgcolor Si adopera questo attributo per colorare lo sfondo della pagina di una tinta unita, il colore può essere espresso sia col nome inglese che nel relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base con relativo nome e codice esadecimale. <body bgcolor="green">

oppure <body bgcolor="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori.

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ background-color: #006600; }

link Si adopera questo attributo per decidere il colore di tutti i links facenti parte della pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body link="green"> oppure <body link="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è blu (blue) #0000ff Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: a:link{ color: #006600; }

vlink Si adopera questo attributo per decidere il colore di tutti i links, dopo che questi sono stati visitati, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body vlink="green"> oppure

<body vlink="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è porpora (purple) #800080 Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: a:visited{ color: #800080; }

alink Si adopera questo attributo per decidere il colore di tutti i links attivi, colore che cambierà nel momento del click su di esso, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body alink="green"> oppure <body alink="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Per default questo colore è rosso (red) #ff0000 Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: a:active{ color: #800080; }

text Si adopera questo attributo per decidere il colore di tutto il testo nella pagina, può essere espresso sia col nome inglese che col relativo codice esadecimale. A questo proposito su questa pagina è possibile vedere 140 colori di base. <body text="green"> oppure

<body text="#006600"> La notazione esadecimale è da preferirsi, in quanto permette con estrema semplicità di poter scegliere fra una tavolozza di ben 16 Mil. di colori. Fate attenzione a non assegnare colori assomiglianti allo sfondo, scelta che renderebbe il testo quasi invisibile.

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body{ color: #006600; }

MARGINI topmargin, bottommargin, leftmargin, rightmargin sono i quattro attributi per definire la distanza in pixel rispettivamente da: margine superiore, margine inferiore, margine sinistro e margine destro.

Un margine uguale a zero farĂ si che il testo inizi praticamente sul bordo della finestra del browser.

Attributo proprietario di alcuni browser non riconosciuto dal W3C. <body topmargin="30"> <body bottommargin="30"> <body leftmargin="30"> <body rightmargin="30">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { margin-bottom: 30px; margin-top: 30px; margin-left: 30px; margin-right: 30px; }

ESEMPIO Riassumendo, questa potrebbe essere una definizione del corpo (body), di una pagina che abbia uno sfondo come riempimento, e questo resti fisso durante le operazioni di spostamento (scrolling), con un testo di colore nero, i links di colore rosso, i links visitati di colore verde, il tutto con una distanza dai quattro margini di 50 pixel.

<body background="nome_immagine.gif" bgproperties="fixed" text="black" link="red" vlink="green" topmargin="50" bottommargin="50" leftmargin="50" rightmargin="50" >

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { background-image: url("nome_immagine.gif"); background-attachment: fixed; color: black; margin: 50px; } a:link { color: red; } a:visited { color: green;}

Il Testo Cosa sarebbe una pagina web senza testo?

Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza.

Oltre al colore e al tipo di font (carattere) ci sono molti altri elementi che servono per formattarlo ed impaginarlo. <BASEFONT> Specifica le dimensioni del font (carattere) di base su cui si basano poi tutte le relative modifiche di <font size=.......>Il valore di default è 3 e può essere compreso tra 1 e 7. Questo Tag è in via di estinzione visto che i nuovi browser ed i relativi fogli di style hanno fatto si che vi sia una tendenza a non adoperarlo più <basefont size="4"> Si possono inserire anche altri due attributi face specifica il tipo di font color specifica il colore che potrebbe essere espresso oltre che col nome in inglese anche con il codice numerico esadecimale. <basefont size="4" face="arial" color="green"> Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { font-size: 14pt;

font-family: arial, verdana, sans-serif; color: green; } Il mio consiglio è di non adoperarlo, guardate quello che è possibile fare con i CSS fogli di style e capirete il perchè.

<BR> L'elemento <br> specifica che una nuova riga deve iniziare in un determinato punto, un ritorno a capo forzato, più <br> consecutivi equivalgono a più righe saltate. <br> Con l'aggiunta di immagini flottanti, allineate a destra o sinistra con il testo che le contorna, è possibile aggiungere l'attributo CLEAR con i seguenti risultati: clear="left": spezza la riga e si sposta verticalmente verso il basso fino ad avere un margine sinistro libero. clear="right": stessa cosa ma con margine libero destro. clear="all": Si sposta verso il basso fino a quando entrambi i margini non siano liberi da immagini. <br clear="all">

<CENTER>...</CENTER> Tutto ciò che si trova fra gli elementi center e /center sarà centrato rispetto ai margini destro e sinistro della finestra del browser. Questo Tag è in disuso da quando elementi quali <DIV> offrono maggiore flessibilità, si ottengono analoghi risultati anche assegnando l'attributo align="center" ai vari tags di formattazione. <center> Questo testo è centrato sulla finestra di visualizzazione </center>

Deprecato, meglio usare un contenitore come <div> al quale assegnare un attributo di allineamento centrato: <div align="center">...</div>

<!--

-->

Consente di lasciare un testo di commento all'interno del listato html senza che questo possa influire o essere visualizzato dal browser.

<!-Questo testo non serve a niente per il buon funzionamento della pagina web, è semplicemente un commento, un qualcosa da ricordare dovendo visionare e modificare il listato.

--> I simboli di commento sono molto utili anche per gli script ed i fogli di style e servono a nascondere il listato a quei browser che non supportano ne script ne fogli di style, anche se mi chiedo quanti e quali saranno i browser ancora in funzione che non supportano queste due cose divenute ormai parte integrante del web.

<DIV>...</DIV> L'elemento <DIV> non ha una sua vera e propria caratteristica, serve infatti da supporto, da scatola contenitore ed è molto usato anche con l'associazione dei fogli di style. Tutti gli attributi e le associazioni applicate al tag DIV saranno estese a tutto il blocco di codice in esso contenuto. <div align="center"> Questa riga di testo ed anche eventuali altri elementi, se presenti, subiranno l'allineamento centrato. </div> L'uso del contenitore div provoca un ritorno a capo con la sua chiusura /div

<SPAN>...</SPAN> L'elemento <span> non ha alcuna caratteristica se non quella di fare da supporto per gli stili, come DIV si presta bene come contenitore per l'associazione di tutto quello che serve ad Html. <span style="color: red"> Questa riga di testo è colorata di rosso, anzi di red. :-) </span> L'uso del contenitore SPAN non provoca alcun ritorno a capo con la sua chiusura /SPAN, a differenza di /DIV ed è quindi indicato per assegnare attributi con i CSS a parti di un testo senza scombinarne l'impaginazione.

<FONT>...</FONT> L'elemento <FONT> definisce le dimensioni, il colore ed il tipo di carattere adoperato per la scrittura del testo. Questo Tag viene adoperato sempre meno dal momento che i fogli di style riescono a gestire il tutto in modo più semplice e versatile. Il Tag <font> ha dimensione di base (default) del carattere uguale a 3, si veda a questo proposito anche <basefont>. Font da solo non ha ragione di esistere, al suo interno si deve sempre inserire almeno un attributo. <font attributo="specifica"> Testo che avrà tutti gli attributi specificati nel tag font </font> E' possibile specificare quale carattere adoperare dando anche delle eventuali alternative separandole da virgole. Se il font scelto non fosse presente sulla macchina del visitatore si tenterà di visualizzare il secondo font, poi il terzo, e se nessuno dei tre fosse presente il browser adopererà quello di default. Evitate dunque fonts particolari e poco comuni o quasi sicuramente nessuno riuscirà poi a vedere il testo allo stesso modo di come avreste voluto voi.

face="nome" [,nome] [,nome] L'attributo face imposta il carattere utilizzato e questo deve trovarsi già installato nel computer dell'utente, le alternative sono separate da uno spazio e da una virgola. <font face="Comic Sans MS">Testo con font Comic Sans MS</font>

color="#rrggbb" oppure COLOR="nome" in inglese del colore. A questo proposito su questa pagina è possibile vedere 140 colori di base. <font color="red">Testo con font di colore rosso</font>

SIZE="n" oppure SIZE="+n" o anche SIZE="-n" dove n è un numero compreso fra 1 e 7, mentre i vari + o - si riferiscono al numero che per default è 3, salvo variazioni specificate con basefont <font size="-1">Testo con font di dimensione -1 rispetto a quella di default.

Tutti gli attributi di font possono essere adoperati anche contemporaneamente <font face="Comic Sans MS" color="red" size="-1"> Testo con font Comic di colore rosso ed una dimensione -1

</font>

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno: body { font-size: 14pt; font-family: "Comic Sans MS", arial, sans-serif; color: red; }

<HR> L'elemento <HR> Horizontal Rules, altro non è che una linea orizzontale divisoria, come quella che potete vedere in questa pagina a divisione dei vari elementi (tags), per default questa linea è ombreggiata e in rilievo. Si possono modificare i vari attributi. <hr> questo sotto il risultato attributi di formattazione quali:

align noshade size width color

evidenziati in giallo gli attributi proprietari di singoli browser dei quali si sconsiglia l'utilizzo.

<hr align=left | right | center>Dove left right center sono allineamento a sinistra, a destra o centrato Adopero una linea ridotta del 50% per meglio rendere l'idea <hr align="left">

<hr align="right">

<hr align="center">

<HR COLOR=nome | #rrggbb>Dove nome è il nome in inglese di uno dei colori possibili, mentre #rrggbb è il codice numerico esadecimale del colore scelto. L'attributo color è supportato dai soli browser IE. <hr color="red">

color attributo proprietario di singoli browser, se ne sconsiglia l'utilizzo.

<hr noshade>Nessuna ombreggiatura, praticamente una barra solida. <hr noshade>

<HR SIZE=numero>Dove numero è espresso in pixel e si riferisce allo spessore della barra. una riga di spessore 5 pixel <hr size="50">

<HR WIDTH=numero | percentuale>Senza alcuna specifica la linea orizzontale occupa tutta la largezza della pagina. Con questo attributo si possono specificare con esattezza la sua ampiezza, dove numero sono i pixel. percentuale invece è relativa alla percentuale della finestra del browser una riga di lunhezza 150 pixel <hr width="150">

Si possono anche combinare i vari attributi, quello sotto è un esempio per ottenere una riga che sia di colore blu, spessore 3 pixel, che occupi il 70% della finestra alla quale è destinata e che non sia ombreggiata (la percentuale di ampiezza è relativa alla cornice che la ospita): <hr width="70%" size="3" noshade>

Consiglio, meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag hr: hr { height: 3px; width: 70%; }

<Hx>...<Hx> Titoli - è possibile avere sei livelli di titolo che dimensionano i caratteri. Il più alto livello è <H1> scalano a salire tutti gli altri:

<H1>...</H1>

Grassetto, carattere molto grande e centrato, una o due righe vuote sopra e sotto. <H2>...</H2>

Grassetto, carattere grande a sinistra, una o due righe vuote sopra e sotto. <H3>...</H3> Corsivo, carattere grande leggermente rientrato sul margine sinistro, una o due righe vuote sopra e sotto. <H4>...</H4>

Grassetto, carattere normale, rientro maggiore rispetto a H3, una riga vuota sopra e sotto.

<H5>...</H5> Corsivo, carattere normale, rientro normale come H4, una riga vuota sopra.

<H6>...</H6> Grassetto, rientro come testo normale ma più di H5, una riga vuota sopra.

Consiglio, è possibile ridefinire in un foglio di stile CSS i vari tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6> inserendo tutte le personalizzazioni che si desiderano, basterà poi richiamarlo alla solita maniera per avere un risultato decisamente diverso che definirei molto più versatile e comodo. h1{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 16pt; color: #006400; font-style: italic; text-indent: 12pt; }

<P>...</P> L'elemento <P> specifica un paragrafo di testo, ha come attributo ALIGN che permette di allineare il testo in quattro possibili modi: CENTER, LEFT, RIGHT, JUSTIFY, rispettivamente per: Centrato, a sinistra, a destra e giustificato. Viene adoperato prevalentemente con l'attributo CLASS che richiama una classe di style in modo da avere paragrafi con font, colori e formattazioni personalizzate. Si veda a questo proposito le spiegazioni relative ai fogli di stile. <p align="left">Questo paragrafo è allineato a sinistra.</p> Questo paragrafo è allineato a sinistra.

<p align="right">Questo paragrafo invece è allineato a destra.</p> Questo paragrafo invece è allineato a destra.

<p align="center">Questo paragrafo è allineato al centro.</p> Questo paragrafo è allineato al centro.

<p align="justify">Questo paragrafo è allineato al centro con giustificazione.</p> Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ?

Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi fra le parole.

Consiglio, è possibile ridefinire il tag <p> all'interno di un foglio di stile (CSS) o creare una apposita classe ed inserire tutte le varie personalizzazioni, basterà poi richiamare questa classe per avere un risultato uguale su tutti i paragrafi della pagina web. p{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 16pt; color: #006400; text-indent: 12pt; }

<B>...</B> L'elemento <B> specifica un blocco di testo da mostrare in grassetto (bold). Risultato simile si ottiene anche con <STRONG>...</STRONG> Questa guida è offerta da <b> Web-Link </b> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.

I: Riproduce come stile corsivo del testo.

B: Riproduce come stile grassetto del testo.

BIG: Riproduce il testo con un carattere "grande".

SMALL: Riproduce il testo con un carattere "piccolo".

STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.

U:Disapprovato. Riproduce del testo sottolineato.

<U>...</U> L'elemento <U> specifica un blocco di testo da mostrare sottolineato (underline).

Questa guida è offerta da <u> Web-Link </u> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.

I: Riproduce come stile corsivo del testo.

B: Riproduce come stile grassetto del testo.

BIG: Riproduce il testo con un carattere "grande".

SMALL: Riproduce il testo con un carattere "piccolo".

STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.

U:Disapprovato. Riproduce del testo sottolineato.

<I>...</I> L'elemento <I> specifica un blocco di testo da mostrare in corsivo (italic). Risultato simile si ottiene anche con <EM>...</EM> Questa guida è offerta da <i> Web-Link </i> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Gli elementi possono essere fra loro nidificati, combinando i vari attributi, per esempio posso scrivere weblink in modo marcato, inclinato e sottolineato:

Questa guida è offerta da <U><I><B> Web-Link </B></I></U> tutto per la tua pagina web.

Questa guida è offerta da Web-Link tutto per la tua pagina web.

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style.

TT: Riproduce come testo di telescrivente o a spaziatura fissa.

I: Riproduce come stile corsivo del testo.

B: Riproduce come stile grassetto del testo.

BIG: Riproduce il testo con un carattere "grande".

SMALL: Riproduce il testo con un carattere "piccolo".

STRIKE e S:Disapprovato. Riproduce il testo come se fosse cancellato con un frego.

U:Disapprovato. Riproduce del testo sottolineato.

<PRE>...</PRE> L'elemento <PRE> specifica un blocco di testo preformattato, cioè a larghezza e spaziatura fissa.

Attenzione: talmente fissa che non torna neppure a capo se non con il comando <br>. <pre> Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente <br> dai vari parametri di pagina </pre> Questo è un testo preformattato che manterrà una certa spaziatura indipendentemente dai vari parametri di pagina

Le immagini Cosa sarebbe una pagina web senza immagini?

Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. I formati supportati dal www sono diversi e variano a seconda del browser adoperato, diciamo che .gif .jpg e .png sono quelli riconosciuti ufficialmente da tutti i browser e non si dovrebbero usare formati diversi da questi. <IMG...> L'elemento <img> necessita di attributi, di cui almeno uno necessariamente obbligatorio: src, a differenza di molti altri elementi html (tags), questo non ha bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa </img>. vediamo gli attributi più comuni:

SRC L'attributo src è indispensabile per l'elemento img, senza di questo non funzionerebbero neppure tutti gli altri. Permette di specificare il nome dell'immagine da visualizzare quando questa si trovasse nella stessa cartella (dir) in cui è presente la pagina web che la richiama. E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL assoluti richiamanti l'immagine da altri siti.

Il tag img src può essere adoperato anche all'interno del tag <a href (ancora o link), potrà essere cliccato come un normale link testo.

Questa la sintassi: <img src="nome_immagine.jpg"> o anche <img src="http://www.weblink.it/nome_immagine.jpg">

ALIGN L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom. I due valori principali left e right fanno si che l'immagine diventi di tipo flottante, vediamo come: align="left" Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del browser, il testo che segue circonda la parte destra dell'immagine.

Allineamento di tipo left, il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

align="right" Allinea l'immagine sul bordo destro della finestra di visualizzazione del browser, il testo che segue circonda la parte sinistra dell'immagine.

Allineamento di tipo right il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietĂ float: img { float: left; } valori per float sono: left, right, none, inherith

align="top" Allinea il testo che segue l'immagine con la parte superiore dell'elemento piĂš alto nella riga.

Allineamento di tipo top il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento.

Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

align="middle" Allinea la linea di base della riga corrente con la parte centrale dell'immagine.

Allineamento di tipo middle il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento.

Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

align="bottom" Allinea il testo che segue l'immagine con la parte inferiore dell'elemento piĂš basso nella riga di testo.

Allineamento di tipo bottom il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento.

Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

Alcuni attributi sembrano gli stessi di altri, è vero, ma ognuno svolge una funzione differente.

L'importante è farsi un'idea, ognuno di noi poi adopererà quello che riterrà più adatto alle proprie esigenze.

Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà vertical-align: img { vertical-align: top; } valori per vertical-align sono: baseline, middle, top, super, sub, text-top, bottom e text-bottom

ALT L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici.

Viene adoperato per descrivere l'immagine e non va confuso con title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del W3C. Questo il codice: <img src="tarta.jpg" alt="Questa è una tartaruga"> Ho volutamente tolto l'immagine e come potete vedere al suo posto c'è il testo alternativo immesso con l'attributo ALT.

TITLE L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine, simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia visibile o meno.

Questo il codice: <img src="tarta.jpg" title="Ciao sono una tartaruga"> Provate a posizionare il mouse sull'immagine, sarà così possibile leggere il testo immesso con l'attributo Title.

BORDER L'attributo border permette di specificare lo spessore del bordo intorno all'immagine. Risulta utile impostare border="0" quando l'immagine fa parte di un collegamento (link o ancora) e non si vuole visualizzare quel bordino azzurro di default, tipico delle immagini facenti parte di un link.

Questo il codice: <img src="tarta.jpg" border="3"> Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato come spessore 3.

Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietà border: img { border: 3px solid #ff0000; } Per non avere un bordo sulle immagini linkate si usa border: none. E' possibile specificare il tipo di bordo, per esempio solid o anche il colore, per esempio #ff0000.

VSPACE e HSPACE L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali ed orizzontali (vertical space ed horizontal space) fra il testo e l'immagine stessa, ed anche fra l'immagine e la sua cornice. Un esempio chiarirà sicuramente meglio:.

Questa la sintassi: <img src="tarta.jpg" hspace="25"> ho impostato uno spazio orizzontale di 25 pixel.

Questa la sintassi: <img src="tarta.jpg" vspace="25"> ho impostato uno spazio verticale di 25 pixel.

Questa la sintassi: <img src="tarta.jpg" hspace="25" vspace="25"> ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 25 pixel.

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno usando la proprietà float insieme a quella padding: { float: left; padding: 25px 10px 35px 5px; } Avendo il pieno controllo sui quattro lati in modo indipendente grazie alla proprietà padding

WIDTH e HEIGHT L'attributo WIDTH, così come l'attributo HEIGHT, vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo, per questo motivo conviene impostare sempre questi valori, visto poi che sono noti. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, compreso un'eventuale distorsione.

Questa la sintassi: <img src="tarta.jpg" width="114" height="75"> ho impostato le dimensioni orizzontali e verticali dell'immagine. potrei decidere di modificare l'immagine assegnando valori diversi da quelli reali, come in questo caso: <img src="tarta.jpg" width="60" height="35"> ho impostato le dimensioni orizzontali a 60 px e verticali a 45 px.

Potrei deformare l'immagine assegnando valori sproporzionati, come in questo caso: <img src="tarta.jpg" width="35" height="60"> ho impostato dimensioni orizzontali 50 px e verticali 100 px.

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style. { width: 114px; } Con i CSS è possibile esprimere le dimensioni anche in em o in percentuale

USEMAP L'attributo USEMAP viene adoperato per indicare che l'immagine è una mappa d'immagine sul lato client. Cosa significa mappa di immagini ? E' possibile suddividere un'immagine in diverse aree tipo una mappa, da qui appunto il nome. Associare ad ognuna di queste aree la possibilità di richiamare un link diverso. In pratica la stessa immagine usata come link è in grado di richiamare links diversi a seconda del punto in cui viene cliccata. Se l'argomento USEMAP inizia con un simbolo # si assume che la descrizione della mappa si trovi nello stesso documento in cui si trova il tag IMG; risulta infatti possibile avere la definizione della mappa anche su un file di testo separato.

Questo un esempio: <img src="../img/tarta.jpg" usemap="map.htm#mappa1" > Questo codice utilizza la mappa descritta come mappa1 in map.htm, per il file di immagine tarta.jpg

Le aree attive dell'immagine vengono descritte adoperando i tags MAP e AREA <MAP>...</MAP> L'elemento MAP descrive ciascuna delle aree dell'immagine a cui è stata assegnata una mappa, e indica la posizione del documento da scaricare quando viene attivata l'area definita.

Questo un esempio: <map name="nome"> <area [shape="forma"] coords="x,y,..." [href="riferimento"] [nohref] > </map>

dove: nome specifica il nome della mappa in modo che USEMAP possa fare riferimento ad essa. forma fornisce la forma dell'area specificata es. RECT per rettangolo.

Nel caso si omettesse l'attributo SHAPE viene assunto SHAPE="RECT" per default, le altre forme sono circle e poly.

L'attributo COORDS fornisce le coordinate nella forma utilizzando pixel dell'immagine come unitĂ .

Per un rettangolo le coordinate vengono fornite - sinistro, alto, destro, basso - L'area rettangolare definita comprende l'angolo inferiore destro specificato , se per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le coordinate saranno:"0,0,99,99" HREF richiama il link ad esso associato NOHREF indica che eventuali clic in questa zona non richiameranno alcun link.

<AREA> L'elemento AREA specifica le diverse aree, nel caso in cui due aree si intersecano quella che appare per prima nella definizione avrĂ prevalenza.

Vediamo un esempio per riassumere il tutto: <map name="tartaruga"> <area shape="circle" coords="57,65,14" href="interno.htm"> <area shape="rect"coords="13,2,99,37" href="guscio.htm"> </map> <img src="../img/tarta.jpg" usemap="#tartaruga">

Provate a cliccare sulla testa o sul guscio della tartaruga, per andare rispettivamente ad inizio o fine di questo documento.

Non so bene se funzioni con tutti i browser, alcuni infatti supportano solo RECT e non CIRCLE e POLY. Questa spiegazione ha il solo scopo di chiarire meglio il funzionamento di una immagine suddivisa in mappa. Per la sua realizzazione nessuno ricorre ai comandi manuali, i programmi in grado di generare mappe da un'immagine sono infatti ormai moltissimi. Esistono anche editors HTML in grado di generare automaticamente codice per mappe cliccabili, sarĂ sufficiente tracciare le aree da cliccare, esattamente come adoperare un programma di grafica.

Links o Ancore Una pagina senza Links (ancore) non sarebbe una pagina web. La vera forza delle pagine web è proprio quella di agganciare ed essere a sua volta agganciate alle altre pagine rendendo tutta la rete un unico grande documento. Quando cliccate sopra un link azionate un meccanismo, di fatto interagite con la pagina web. Questo meccanismo potrebbe essere semplicemente un cambio pagina o l'inizio dello scaricamento di un file o l'apertura del vostro programma di posta elettronica preferito per inviare mail. Tutte queste azioni sono gestite dal tag ancora <A> di sicuro uno dei tags più importanti di HTML <A>...</A> L'elemento <A> necessita di uno dei due attributi possibili, e cioè NAME o HREF, da solo infatti non servirebbe a nulla. Vediamo questi due attributi:

NAME L'attributo NAME serve per creare una specie di etichetta, questa viene collocata nel punto esatto in cui è stata creata, sarà poi possibile richiamarla con l'elemento <A> seguito dall'attributo HREF. In questo modo anziché richiamare una pagina richiameremo quel punto preciso dove si trova l'etichetta.

Complicato?

Con NAME si crea un punto nel documento e con HREF="#nome assegnato al name" si raggiunge quel punto, praticamente un collegamento ipertestuale normalissimo con la sola differenza che anziché richiamare una nuova pagina se ne richiama anche o un punto preciso della stessa.

Vediamo un esempio: <a name="weblink"></a> Così facendo ho creato un'etichetta col nome weblink

L'etichetta risulterà essere completamente trasparente alla pagina web, cioè non si vedrà nulla a video. Fatto questo non resta che richiamarla da qualsiasi altra parte del documento o da qualsiasi altra pagina web. Il link cliccato sposterà la visualizzazione nel punto preciso dove è stata creata e collocata l'etichetta. Poco più avanti, spiegando le varie possibilità di HREF, sarà possibile avere una dimostrazione pratica di come funziona l'etichetta WebLink appena creata.

HREF L'attributo HREF (Hypertext REFerence) all'interno dell'elemento <A> trasforma in un collegamento ipertestuale il testo o l'immagine che segue fino alla chiusura dell'elemento con </A>.

Generalmente il testo o la cornice dell'immagine diventa di colore blu sottolineato salvo diverse impostazioni volute all'interno dell'elemento <body> o di un CSS. Questo per meglio evidenziare che si tratta di un collegamento, il cursore del mouse una volta posizionato sopra la scritta (o l'immagine usata) si trasformerà in una piccola mano col dito indice teso pronto a premere il link.

Vediamo quali sono le diverse forme per questo attributo: Deprecato, per cambiare colore ai links meglio usare una dichiarazione di style, in linea o su foglio esterno: a:link {color: #0000cc;} a:visited {color: #009900;} con possibilità di eliminare la sottolineatura grazie alla proprietà: text-decoration: none;

Nota:, in aggiunta alle due pseudoclassi: link e visited ne esistono altre dinamiche quali: hover focus ed active. Molto interessante hover che permette di rendere dinamico il passaggio del mouse sopra ad un link creando un effetto di animazione, come per esempio un semplice cambio di colore. a:link { ~ } a:visited { ~ } a:hover { ~ } a:focus { ~ } a:active { ~ } Per evitare conflitti le pseudoclassi dovranno essere inserite nell'ordine sopra riportato. Se infatti venisse dichiarata prima hover di visited quando si passa col cursore del mouse su un link già visitato questo non farebbe alcun cambiamento legato ad hover avendo prevalenza la pseudoclasse visited.

Questo simbolo # (pound o cancelletto) seguito dal nome che è stato assegnato con l'attributo NAME permette di saltare nel punto esatto in cui l'etichetta è stata posizionata, si veda la spiegazione di NAME un paio di righe sopra. Vediamo un esempio pratico: <a href="#weblink"></a> Clicca su questa scritta per saltare all'etichetta WebLink definita sopra.

Si possono richiamare punti precisi presenti su altre pagine web, facendo precedere al nome dell'etichetta creata con name, il nome della pagina o l'intero percorso: <a href="http://weblink.it/html/link.htm#weblink"></a> http:// questo tipo di ancora è senza dubbio la più adoperata e serve per richiamare altre pagine. E' sufficiente specificare l'intero percorso. Vediamo un esempio pratico: <a href="http://www.web-link.it"></a>

Clicca su questa scritta per accedere a WebLink tutto per la tua pagina web.

mailto: questo tipo di ancora serve per ricevere un msg nella propria casella postale, oltre all'indirizzo è possibile impostare anche il subject della mail ed il corpo della mial stessa, infatti questo collegamento richiama il programma client di posta elettronica adoperato dal navigatore.

Vediamo qualche esempio pratico: <A HREF="mailto:Tuo_Nome@Server_di_posta.it"></A> Clicca su questa scritta per inviare una e-mail

E' possibile impostare anche il subject, si dovrĂ aggiungere un punto interrogativo e la parola subject dopo l'indirizzo. Questo un esempio: <a href="mailto:Tuo_Nome@Server_di_posta.it?subject=La tua guida HTML"></a> Per inviare una mail con soggetto: la tua guida HTML

Infine è possibile impostare anche il corpo del messaggio, aggiungendo &body= quindi il corpo del messaggio. Questo un esempio: <a href="mailto:Tuo_Nome@Server_di_posta.it?subject=La tua guida HTML&body=corpo della e-mail"></a> Per inviarmi una mail con soggetto: la tua guida HTML e al suo interno parte del messaggio preconfezionato con la frase: tutto quello che vi pare dalla guida html

Queste le altre forme che sono ammesse dall'attributo HREF: <a href="nome_pagina.html">Realizza un collegamento ad una pagina che si trova nella stessa cartella <a href="http://www.nome_server.it/nome_pagina.html"> Realizza un collegamento ad una pagina che si trova in un server web <a href="ftp://nome_del_server.it"> Realizza un collegamento di tipo FTP <a href="gopher://nome_del_server.com"> Realizza un collegamento ad un server gopher

<a href="mailto:indirizzo@di_posta.it"> Realizza un collegamento al client di posta elettronica (per farsi scrivere dal proprio sito una e-mail) <a href="news:..."> Realizza un collegamento a NewsGroup Usenet <a href="nome_file.zip"> Realizza un collegamento ad un file da scaricare in formato compresso (zip o rar) che avvierà un download Ci sono anche altre forme quali newsrc:... nntp://... telnet://... wais://... ma credo siano adoperate molto raramente.

TARGET L'attributo TARGET serve per aprire il collegamento su un frame diverso da quello in cui si trova.

Ovviamente questo attributo è adoperato solo in caso di un sito strutturato in frames, è utile specialmente per chi avendo un menu laterale voglia fare in modo che i links richiamati dal menu siano visualizzati sulla pagina principale. Per fare questo si dovrà specificarne il nome, quello che è stato assegnato al frame. Ipotizziamo di avere con nome home il frame principale , volendo fare in modo che il link venga aperto su quel frame questa la sintassi:

<a href="http://www.web-link.it" target="home"></a>

Nel caso in cui non esistesse un frame con nome home verrà aperta una nuova finestra del browser.

Le altre possibili destinazioni sono:

_blank: Apri il collegamento su una nuova finestra. _self: Apri il collegamento sulla finestra che ha generato il collegamento _parent: Apri il collegamento sul frame di origine o su quello corrente _top: Apri il collegamento al livello superiore

Le Tabelle Non servono soltanto per incolonnare e tabulare i dati come si potrebbe facilmente pensare. Le tabelle se sapientemente sfruttate permettono una precisa impaginazione di tutti gli elementi che compongono la pagina web, siano questi semplici testi, immagini o qualsiasi altra cosa. Un esempio è questa mia guida che è impaginata proprio con l'uso delle tabelle.

Ci sono elementi ed attributi ad uso esclusivo dei soli browser IE, alcuni li ho volutamente

trascurati oltre che per la loro esclusiva anche perchè personalmente li ritengo inutili.

Chi sono per poter giudicare cosa serve e cosa non serve?

Nessuno, non sono nessuno... ma se pensate che potevano esservi utili potete sempre ricredervi più avanti :-) <TABLE>...</TABLE> Una tabella inizierà sempre con questo elemento: <TABLE> e finirà con </TABLE> delimitatore della tabella stessa. Questo elemento da solo non dice nulla, necessita di una definizione di celle e colonne che vedremo più avanti. Sono molti gli attributi che si possono assegnare a table: <table>

attributi assegnabili all'elemento table:

evidenziati in giallo gli attributi proprietari di singoli browser dei quali si sconsiglia l'utilizzo.

align bgcolor border cellpadding cellspacig frame rules summary width background bordercolor bordercolordark bordercolorlight height

Si inseriscono lasciando uno spazio vuoto fra la scritta table e la sua chiusura > gli attributi possono essere più di uno e specificati uno di seguito all'altro.

ALIGN Consente di specificarne l'allineamento della tabella rispetto al documento, con le seguenti possibilità: Center, Left e Right rispettivamente per centrato, a sinistra, a destra.

E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.

BACKGROUND Permette di avere un'immagine come sfondo della tabella, è possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.

Si possono utilizzare come immagini di sfondo i vari tipi di file grafici consentiti dal web: gif, jpg, png.

Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se inserito in un CSS <table background="immagine_di_sfondo.jpg">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno riconosciuta da tutti i browser: table { background-image: url(immagine_di_sfondo.jpg); }

BGCOLOR Permette di avere un colore in tinta unita come sfondo della tabella, è possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti.

Il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di base. E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti. <table bgcolor="Yellow">

<table bgcolor="#ffa500">

BORDER Permette di avere un bordo perimetrale che contorna tutte le celle facenti parte della tabella; è possibile impostarne anche lo spessore. Alcuni browser in mancanza di questo attributo lasciano un piccolo spazio pur non facendo vedere alcun bordo, per recuperare quello spazio è necessario impostare il border a zero. <table border ="1"> <table border ="5">

<table border ="10">

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove oltre allo spessore del bordo è possibile scegliere il tipo ed il colore del bordo stesso. table { border: solid 3px #000000; }

<table con richiamo al CSS>

<table con richiamo al CSS>

BORDERCOLOR Permette di selezionare il colore del bordo, questo attributo supportato solo da IE per funzionare deve necessariamente avere impostato anche l'attributo border, il colore può essere espresso col suo nome in lingua inglese o con la solita tripletta di numeri esadecimali. A questo proposito su questa pagina è possibile vedere 140 colori di base.

Attributo proprietario di alcuni browser non riconosciuto dal W3C ma approvato se inserito in un CSS.

<table border="1" bordercolor="Red">

Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno riconosciuta da tutti i browser: table { border: double 3px #ff0000; }

BORDERCOLORDARK Permette di selezionare il colore più scuro su un bordo (l'opposto di BORDERCOLORLIGHT); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border. Meglio fare uso dei CSS con i quali è possibile ottenere un effetto simile ma visto da tutti i tipi di browser.

BORDERCOLORLIGHT Permette di selezionare il colore più chiaro su un bordo (l'opposto di BORDERCOLORDARK); creando un effetto di luce. Questo attributo supportato soltanto da IE per funzionare deve necessariamente avere impostato anche l'attributo border. Meglio fare uso dei CSS con i quali è possibile ottenere un effetto simile ma visto da tutti i tipi di browser.

CELLPADDING Specifica la quantità di spazio vuoto lasciato tra i bordi delle celle di una tabella e il dato vero e proprio in esse contenuto, il valore per default è 2 , quindi per tabelle più compresse si dovrà impostare cellpadding uguale a zero. <table cellpadding="0"> <table cellpadding="0"> <table cellpadding="10"> <table cellpadding="10">

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove cellpadding è sostituito dalla proprietà padding.

td { padding: 10px; }

CELLSPACING Specifica la quantità di spazio vuoto da lasciare tra le singole celle di dati di una tabella, il valore per default è 2, per tabelle più compresse si dovrà impostare cellspacing uguale a zero . <table cellspacing="0"> <table cellspacing="0"> <table cellspacing="10"> <table cellspacing="10">

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove cellspacing è sostituito dalla proprietà border-spacing. { border-spacing: 10px; } IE non supporta la proprietà border-spacing che regola lo spazio fra i bordi delle celle e fra il bordo delle celle e quello della tabella. Per eliminare questo spazio esiste la proprietà border-collapse che accetta due valori: separate e collapse, rispettivamente per separare o unire le celle:

FRAME Permette di scegliere quale tipo di visualizzazione assegnare al bordo. Questo attributo per funzionare deve avere impostato l'attributo border. I valori possibili sono: void = rimuove tutti i bordi esterni above = visualizza solo i bordi esterni in cima alla tabella below = visualizza solo i bordi esterni in fondo alla tabella hsides = visualizza solo i bordi orizzontali in cima e in fondo alla tabella lhs = visualizza i bordi esterni solo al margine sinistro della tabella

rhs = visualizza i bordi esterni solo al margine destro della tabella vsides = visualizza i bordi esterni ai due margini destro e sinistro della tabella box = visualizza un riquadro attorno alla tabella (tutti i margini) border = visualizza un riquadro attorno alla tabella (come box) <table border="2" frame="void"> <table border="2" frame="above"> <table border="2" frame="below"> <table border="2" frame="hsides"> <table border="2" frame="lhs"> <table border="2" frame="rhs"> <table border="2" frame="vsides"> <table border="2" frame="box"> <table border="2" frame="border">

HEIGHT Permette di specificare l'altezza della tabella, può essere in pixel o in percentuale dell'altezza della finestra del browser che la visualizza. Questo attributo è supportato soltanto dai browser IE e non riconosciuto dal W3C. Diventa un attributo valido se applicato ai singoli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH>.

<table height="50">

SUMMARY A differenza di caption serve per una descrizione più lunga e dettagliata a beneficio soprattutto di quei browser non grafici che fanno uso di programmi vocali o con sistema Braille. <table summary="descrizione dettagliata">

WIDTH Permette di specificare la larghezza della tabella, che può essere in pixel o in percentuale della larghezza della finestra del browser che la visualizza. E' possibile applicarlo oltre che all'elemento <TABLE> anche agli elementi che costituiscono la struttura della tabella stessa quali: <TD> e <TH> descritti più avanti. <table width="300"> <table width="25%"> Provate a variare le dimensioni della vostra finestra del browser, quella in cui state vedendo questa pagina, noterete che anche la larghezza della tabella espressa in percentuale varia mantenendo il 25% di visualizzazione specificato.

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style dove width è sostituito dalla proprietà width. { width: 350px; width: 50%; }

<CAPTION>...</CAPTION> L'elemento <caption> rappresenta la didascalia della tabella, deve trovarsi all'interno della tabella subito dopo table e non all'interno di righe (tr) o di celle (td).

<table> <caption align="attributo"> Didascalia della tabella </caption> <tr><td>cella</td></tr> </table> align di caption L'attributo ALIGN imposta la posizione della didascalia rispetto alla tabella. Gli attributi possibili sono TOP, BOTTOM, LEFT e RIGHT. rispettivamente per: Didascalia con align top 1 2 3 4 5 6 Didascalia con align right 1 2 3 4 5 6 Didascalia con align left 1 2 3 4 5 6 1 2 3 4 5 6 Didascalia con align bottom

VALIGN Permette di specificare l'allineamento verticale del testo visualizzato all'interno delle celle di una tabella, i valori attribuibili sono: middle, top, baseline, bottom. baseline bottom testo che serve solo Top per evidenziare le altre quattro celle che contengono un middle allineamento verticale

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style con la proprietà text-align: { vertical-align: top; }

ALIGN Permette di specificare l'allineamento orizzontale del testo visualizzato all'interno delle celle di una tabella, i valori attribuibili sono: left, right, center,char e justify center

left right justify - Testo giustificato su char . con riferimento entrambi i lati, per poterlo notare la al punto nella nostra quantità di testo deve tornare a capo lingua italiana nella cella.

Consiglio, è preferibile usare questi attributi all'interno dei fogli di style con la proprietà text-align: { text-align: justify; }

HEIGHT Permette di specificare l'altezza della cella, può essere espresso in pixel o in percentuale dell'altezza della tabella. Più celle affiancate avranno tutte l'altezza max specificata in una delle celle della stessa riga.

<td height="50">

<td height="50"> <td height="10"> <td height="10"> <td height="10">

WIDTH Permette di specificare la larghezza della cella, che può essere espresso in pixel o in percentuale della larghezza della tabella. Più celle incolonnate avranno tutte la larghezza max specificata in una delle celle della stessa colonna. <td width="300"> <td width="300"> <td width="100">

<td width="100"> <td width="100">

<TR>...</TR> Questo tag inserito all'interno di table definisce l'inizio di una riga della tabella, significa che il numero di righe di una tabella è pari al numero di elementi TR in essa contenuti. Supporta molti degli attributi di TABLE e di TD. A differenza di TD non contiene dati al suo interno in quanto serve solo per creare la struttura, non hanno quindi ragione di esistere attributi quali BGCOLOR o BACKGROUND che se occorrono potranno essere definiti nel tag TD inserito all'interno di TR stesso. <tr><td>questa è una riga con una cella </td></tr> <tr><td>queste sono due righe </td></tr> <tr><td>con una cella per riga </td></tr>

<TH>...</TH> Questo tag inserito all'interno di table e di tr definisce la cella intestazione della tabella.

Praticamente il testo all'interno di questo tag sarà in neretto, supporta tutti gli attributi di TABLE e di TD. Attenzione all'attributo NOWRAP, se presente impedisce il ritorno a capo del contenuto

della cella forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Necessita di essere racchiuso fra i tags <TR> e </TR> esattamente come TD <table> <tr><th> questa la cella th </th></tr> <tr><td> questa la cella td </td></tr> </table>

Questo il risultato questa la cella TH questa la cella TD

<TD>...</TD> Questa coppia di tags inseriti all'interno di table e di tr definiscono la cella vera e propria della tabella, TD supporta tutti gli attributi di TABLE; quindi non soltanto i vari allineamenti ma è possibile avere anche colori e/o immagini di sfondo e volendo tutti diverse fra le singole celle.

Attenzione però, a differenza di table è possibile adoperare anche l'attributo NOWRAP, che se presente impedisce il ritorno a capo del contenuto della cella, forzando questa a mantenere le dimensioni necessarie per contenere tutto il testo su una sola riga. Questo tag è di norma preceduto dal tag <tr> che definisce l'inizio della riga. All'interno di una stessa tabella si dovranno definire lo stesso identico numero di celle, a meno che non si faccia uso dell'attributo COLSPAN che sarà visto più avanti. <tr><td>questa è una cella </td></tr> <tr><td>queste sono due</td> <td>queste sono due</td></tr> <tr><td>queste sono tre</td> <td>queste sono tre</td></tr> <td>queste sono tre</td></tr>

E così via... Il tutto rigorosamente all'interno dei tags <table> e </table> e di <tr> e </tr>. Ho reso visibile il bordo per permettere di capirne meglio il funzionamento, molto spesso invece il bordo è impostato a zero in modo da usare la tabella solo come struttura portante dei dati. Oggi con XHTML e l'uso dei box non sarebbe forse più necessario ma vi assicuro che è e resta comunque una buona tecnica di impaginazione.

Le tabelle si possono nidificare, cioè è possibile mettere delle tabelle all'interno di celle di altre tabelle creando così strutture più complesse che si adattano perfettamente a qualsiasi tipo di impaginazione voluta.

Potrebbero persino contenere parti di immagini che si ricompongono cella per cella come se si

trattasse di un puzzle. Anzi, per immagini di grosse dimensioni vengono ancora oggi adoperate a questo scopo per non creare lunghe attese di caricamento.

RULES Serve per la visualizzazione dei bordi fra le celle interne quando si fa uso dei tags <THEAD> <TBODY> e <TFOOT>, per funzionare deve essere necessariamente impostato anche l'attributo border. I valori possibili sono: none = rimuove tutti i bordi esterni groups = visualizza bordi orizzontali fra le sessioni <THEAD><TBODY><TFOOT> rows = visualizza bordi orizzontali tra ciascuna riga cols = visualizza bordi orizzontali tra ciascuna colonna all = visualizza tutti i bordi interni

<THEAD>...</THEAD> Questo elemento è utilizzato per specificare la sezione di intestazione della tabella. E' simile all'elemento HEAD di html. Si adopera con TBODY e va dichiarato prima di tbody stesso. Utile per tabelle lunghe dove anche in fase di stampa su ogni pagina sarebbe ripetuta l'intestazione. Per evidenziare l'intestazione è possibile fare uso di TH <table> <thead> <tr> <th>titolo head sinistra</th><th>titolo head destra</th> </tr> </thead> <tbody> <tr> <td> cella alto sinistra </td><td> cella alto destra </td> </tr> <tr> <td> cella basso sinistra </td><td> cella basso destra </td> </tr> </tbody> </table>

Ricordatevi che facendo uso di <thead> o di <tfoot> sarà necessario usare anche <tbody>.

Questo il risultato : titolo head sinistra titolo head destra cella body alto sinistra cella body alto destra cella body basso sinistra cella body basso destra La scritta in grassetto è una caratteristica dell'elemento <th> (senza il colore giallo chiaro inserito appositamente per meglio evidenziare l'intestazione).

<TBODY>...</TBODY> Questo elemento serve per specificare la sezione del corpo della tabella, è analogo all'elemento <BODY> di html ed influenza direttamente la visualizzazione della tabella stessa. Si adopera in presenza di THEAD o TFOOT descritti sopra e sotto.

<TFOOT>...</TFOOT> Questo elemento è utilizzato per specificare l'intestazione della tabella ma posizionata nel piede (fondo pagina) della tabella stessa. Si adopera con TBODY e va dichiarato prima di tbody stesso.

Utile per tabelle lunghe dove anche in fase di stampa su ogni pagina sarebbe ripetuta l'intestazione a fondo tabella. Per evidenziare l'intestazione è possibile fare uso di TH Lo stesso esempio usato per thead ma inserendo <tfoot> al posto di <thead>: <table> <tfoot> <tr> <th>titolo foot sinistra</th><th>titolo foot destra</th> </tr> </tfoot> <tbody> <tr> <td> cella alto sinistra </td><td> cella alto destra </td> </tr> <tr> <td> cella basso sinistra </td><td> cella basso destra </td> </tr> </tbody>

</table> Si avrà questo il risultato : titolo foot sinistra titolo foot destra cella body alto sinistra cella body alto destra cella body basso sinistra cella body basso destra La scritta in grassetto è una caratteristica dell'elemento <th> (senza il colore giallo chiaro inserito appositamente per meglio evidenziare l'intestazione).

ROWSPAN e COLSPAN Come già accennato le tabelle, salvo casi particolari, hanno un numero di celle uguale per ogni riga se per esempio su una riga abbiamo tre celle si dovranno avere tre celle per ogni altra riga precedente e seguente.

Fortunatamente però è possibile intervenire sulla struttura facendo in modo che una cella sia più larga o più lunga delle altre in modo da occupare lo spazio delle celle che mancano o che vengono tolte. in parole povere avremo sempre una forma rettangolare o quadrata della struttura ma al suo interno le celle potranno essere accomodate. Se così non fosse sarebbero piuttosto rigide nel loro utilizzo e sicuramente poco utilizzabili dal lato pratico.

Gli attributi COLSPAN e ROWSPAN servono proprio a spezzare queste regole e dare la possibilità di modificarle a proprio piacimento, si tratta di avere le idee chiare su come dovrà essere fatta questa tabella, prima di passare alla sua realizzazione. Vediamo alcuni esempi che chiariranno certamente meglio il concetto. <table> <tr><td> riga 1 cella 1 </td><td> riga 1 cella 2 </td></tr> <tr><td> riga 2 cella 3 </td><td> riga 2 cella 4 </td></tr> </table>

Questo sotto il risultato riga 1 cella 1 riga 1 cella 2 riga 2 cella 3 riga 2 cella 4

Risulta intuitivo che se servisse una tabella con 16 celle si potrebbe disporla su 4 righe con 4 celle, oppure due righe con 8 celle, o anche 8 righe con 2 celle. E perchè no 16 righe da una sola cella.

Quando però la tabella non è più regolare, per esempio nel caso servano 7 celle e dove magari la prima di dimensioni maggiori, per mettere al suo interno un'intestazione o altro... come fare?

ROWSPAM e COLSPAN servono proprio a questo, a modificare il numero di righe e colonne mantenendone la struttura regolare a forma di quadrato o di rettangolo, vediamo un esempio.

La tabella regolare prevede due <tr> ed otto <td>, praticamente quattro celle (colonne) per ogni riga. questo il risultato:

riga 1 cella 1 riga 1 cella 2 riga 1 cella 3 riga 1 cella 4 riga 2 cella 5 riga 2 cella 6 riga 1 cella 7 riga 1 cella 8 Adesso al primo td, quello della cella 1 riga uno, applichiamo l'attributo ROWSPAN seguito dal numero 2, così facendo la tabella espanderà la colonna cella 1 di due righe (row) in modo che prenda 2 posti, quindi si fonderà con la cella sottostante che di fatto noi non avremo dichiarato nella seconda riga per lasciare il posto alla cella sopra espansa con rowspan.

Questo il listato ed anche l'esempio pratico: <table> <tr><td rowspan="2">riga 1 e 2 cella 1</td><td> riga 1 cella 2 </td><td> riga 1 cella 3 </td><td> riga 1 cella 4 </td></tr> <tr><td> riga 2 cella 5 </td><td> riga 2 cella 6 </td><td> riga 2 cella 7 </td></tr> </table>

riga 1 e 2 riga 1 cella 2 riga 1 cella 3 riga 1 cella 4 cella 1 riga 2 cella 5 riga 2 cella 6 riga 2 cella 7 Vediamo adesso lo stesso esempio ma facendo in modo che la prima cella si espanda in orizzontale, quindi non più rowspan (righe) ma colspan (colonne). Sarà impostata in modo che dovrà essere di dimensioni pari a 4 celle. Tornando al primo td, quello della cella 1 riga 1, e richiamando l'attributo COLSPAN seguito dal numero 4; la tabella espanderà la riga cella 1 in modo da prendere altri 3 posti, quindi occuperà il posto delle celle laterali che non andranno inserite.

Questo il listato ed anche l'esempio pratico: <table> <tr><td colspan="4">riga 1 cella 1, 2, 3 e 4 </td></tr> <tr><td> riga 2 cella 1 </td><td> riga 2 cella 2 </td><td> riga 2 cella 3 </td><td> riga 2 cella 4 </td></tr> </table>

riga 1 celle 1, 2, 3 e 4 riga 2 cella 1 riga 2 cella 2 riga 2 cella 3 riga 2 cella 4

avrei potuto fare anche cosĂŹ: riga 1 cella 1 riga 1 celle 2 e 3 riga 1 cella 4 riga 2 cella 1 riga 2 cella 2 riga 2 cella 3 riga 2 cella 4 Dicevo all'inizio di questa sezione che le tabelle possono essere nidificate fra di loro, non ci sono limiti se non quello della propria fantasia e del buon senso. Magari evitate di complicarvi troppo la vita se non ce ne fosse realmente il bisogno. Ecco un altro esempio pratico: <table border="1"> <tr><td rowspan="2"><table align="center" border="2"> <tr> <td>tab 2 rig 1 cel 1</td> <td>tab 2 rig 1 cel 2</td> </tr> <tr> <td>tab 2 rig 2 cel 3</td> <td>tab 2 rig 2 cel 4</td> </tr> </table> </td><td>tab1 riga 1 cella 2</td><td>tab1 riga 1 cella 3</td></tr> <tr><td>tab 1 riga 2 cella 4</td><td>tab1 riga 2 cella 5</td></tr></table> tab 2 rig 1 cel 1 tab 2 rig 1 cel 2 tab1 riga 1 cella 2 tab1 riga 1 cella 3 tab 2 rig 2 cel 3 tab 2 rig 2 cel 4 tab 1 riga 2 cella 4 tab1 riga 2 cella 5 La tabella 2 formata da 4 celle di colore ocra si trova dentro ad una cella della tabella 1 espansa con rowspan 2

Elenchi <UL>, <OL> e <LI> Capita che su una pagina web si abbia la necessitĂ di descrivere voci sottoforma di elenchi puntati, html offre questa possibilitĂ con i tags (UL) elenchi non ordinati, (OL) elenchi ordinati e (LI) per le voci di elenco. Questi tags permettono di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.

<LI> Elemento voce dell'elenco, da solo serve a poco deve essere combinato con altri elementi descritti sotto. Non necessita della chiusura </li> anche se è consigliato metterla.

<OL>...</OL> L'elemento <ol> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato. Usato per evidenziare una precisa sequenza nelle voci che compongono la lista. Per esempio i passi da seguire per un principiante che inizi da zero qui su web-link sono: <ol> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: 1.

2.

3.

4.

Primi Passi Guida HTML Guida CSS XHTML con Style

TYPE Per default la numerazione segue l'ordine cronologico 1, 2, 3, e cosĂŹ via ma grazie all'attributo type si possono cambiare le voci dell'elenco di una lista ol in uno dei seguenti modi: type="A" Lettere maiuscole: A , B, C, ... type="a" Lettere minuscole: a, b, c, ... type="I" Numerazione romana maiuscola: I, II, III, ... type="i" Numerazione romana minuscola: i, ii, iii, ... type="l" I numeri come da default: 1, 2, 3, ... <ol type="a"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: a. b. c. d.

Primi Passi Guida HTML Guida CSS XHTML con Style

Questo il risultato: <ol type="I"> <li>primi passi I. Primi Passi <li>Guida HTML II. Guida HTML <li>Guida CSS III. Guida CSS <li>XHTML con Style IV. XHTML con Style </ol>

START Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarĂ sufficiente fare uso dell'attributo start impostando il numero da cui iniziare l'incremento.

<ol start="15"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: 15. Primi Passi 16. Guida HTML 17. Guida CSS 18. XHTML con Style

Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il numero "3": <ol type="a" start="3"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: c. d. e. f.

Primi Passi Guida HTML Guida CSS XHTML con Style

<UL>...</UL> L'elemento <ul> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato. <ul> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

Questo il risultato:    

Primi Passi Guida HTML Guida CSS XHTML con Style

TYPE Per default i simboli delle voci in una lista non ordinata sono dei dischi solidi o pallini pieni.

Grazie all'attributo type si possono cambiare questi simboli (dell'elenco di una lista ul) in cerchietti (circle) o quadratini (square).

A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo con l'attributo TYPE: type="disc" disco solido type="circle" cerchietto

type="square" quadrato <ul type="circle"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

<ul type="square"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

Questo il risultato: o o o o

Primi Passi Guida HTML Guida CSS XHTML con Style

Questo il risultato:    

Primi Passi Guida HTML Guida CSS XHTML con Style

Consiglio: l'uso dei fogli di style permette un controllo molto più accurato e versatile come per esempio inserire una qualsiasi immagine grafica al posto di uno dei simboli standard. ol { list-style-image: url(file:nome_immagine.gif); } la proprietà list-style-image è in grado di richiamare una piccola immagine grafica da usare al posto del pallino.

Questo il risultato: 1.

2.

3.

4.

Primi Passi Guida HTML Guida CSS XHTML con Style

DIR Nel caso in cui si volesse avere la numerazione o il simbolo a destra della lista anziché a sinistra, si farà uso dell'attributo dir che va bene sia per le liste ordinate che per quelle non ordinate impostando il valore destro rtl (sinistro ltr). <ol dir="rtl"> <li>primi passi

Questo il risultato:

<li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

siPrimi Pas Guida HTML Guida CSS XHTML con Style

<ul type="square" dir="rtl"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

.1 .2 .3 .4

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

   

Elenchi di definizione <DT>, <DD> e <DL> dove con dt si definisce il termine e con dd la sua definizione o descrizione. Il tutto racchiuso in una struttura dl

<DL>...</DL> L'elemento <dl> prevede al suo interno gli elementi <dt> e <dd> come voci dell'elenco. Serve per una visualizzazione non ordinata e formata da due voci: un termine (dt) e la sua definizione (dd). <dl> Questo il risultato: <dt>principianti</dt> principianti <dd>rubrica primi passi</dd> si consiglia l'uso della rubrica primi passi <dt>appassionati</dt> appassionati <dd>guida html e guida CSS</dd> meglio approfondire con la guida html e quella CSS </dl>

<DT>...</DT> L'elemento <dt> specifica il termine e da solo non ha senso, deve precedere l'elemento dd che serve per la sua definizione. Usato anche nei dialoghi dove con dt si identifica chi parla e dd le sue parole. <dl> <dt>Andrea</dt> <dd>oggi è una bella giornata</dd>

Questo il risultato: Andrea oggi è una bella giornata

<dt>Mario</dt> Mario <dd>si, ammesso che non piova</dd> si, ammesso che non piova </dl>

<DD>...</DD> L'elemento <dd> specifica la definizione e da solo non ha senso, deve seguire l'elemento dt che specifica il termine. Usato anche nei dialoghi dove con dt si identifica chi parla e dd le sue parole. <dl> Questo il risultato: <dt>Andrea</dt> Andrea <dd>oggi è una bella giornata</dd> oggi è una bella giornata <dt>Mario</dt> Mario <dd>si, ammesso che non piova</dd> si, ammesso che non piova </dl>

Consiglio non usate le liste per l'indentazione o i ritorni a capo, per questo ci sono appositi attributi da dichiarare nei CSS. A proposito di CSS i due menù orizzontali che sono ad inizio pagina sono fatti proprio da liste opportunamente ridefinite all'interno di un CSS, da non credere ma è così. Per saperne di più a riguardo di questo tipo di menù si veda questa pagina.

I Moduli o Form permettono di interagire con i visitatori del proprio sito offrendo loro la possibilità di immettere, o richiedere, informazioni tramite semplici caselle di testo, in alcuni casi menù a scorrimento, radiocomandi, caselle di tipo "spunta" ed altro ancora. Utilissimi, per non dire indispensabili, nella raccolta di dati sotto forma di questionari.

Il modulo per funzionare al meglio ha bisogno di un'ulteriore elaborazione da parte di un linguaggio

di programmazione, il solo HTML infatti si limita ad inviare il tutto in modo spartano richiamando il programma di posta elettronica (client) installato sul PC dell'utente: Outlook express o Thunderbird, tanto per citare due dei più famosi e gratuiti client di posta.

Non tutti però hanno la possibilità di usare il proprio client, o almeno non sempre. Immaginiamo infatti chi si collega dall'ufficio, da casa di un amico o da un internet point dove non è possibile adoperare il proprio programma installato sul proprio PC. Per questo ed altri motivi conviene, laddove sia fattibile, affidarsi ad uno script installato e configurato nel proprio spazio web. Uno dei più famosi è il FormMail di Andrea Matta, reperibile gratuitamente da questo link. In Alternativa ci si può affidare ad uno dei linguaggi lato server: PHP o ASP oppure ad uno dei servizi di sendmail che di solito lo stesso fornitore di spazio web offre ai propri clienti.

Qualcuno si starà chiedendo perchè mai sia tutto così complicato, perchè lo spam, spazzatura, che ogni giorno raggiunge milioni di utenti è talmente frequente e fastidioso che tutti i vari server free che offrivano un sendmail gratuitamente hanno limitato questo servizio ai soli clienti.

In ogni caso, che si decida di usare il proprio client di posta, un linguaggio lato server o un servizio già pronto, quanto descritto sotto a proposito dei moduli resta valido sempre.

<FORM>...</FORM> L'elemento <form> serve per delimitare un modulo di input per l'inserimento dati. In un documento html possono esserci più moduli ma questi dovranno essere tutti indipendenti fra di loro, nel senso che il tag <form> non può essere annidato (un modulo all'interno di un altro modulo) come per le tabelle o per altri tags di html. L'elemento form necessita di alcuni attributi per funzionare:action, method ed enctype <form ... attributi...> attributi assegnabili all'elemento form:

action method enctype

action L'attributo action è un URL che specifica la locazione a cui vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati del modulo debbano essere inviati dal client di posta di chi lo compila. Se manca l'attributo action viene assunto per default lo stesso URL in cui si trova il modulo.

method

L'attributo method specifica il metodo per accedere all'URL dichiarato in action due le possibilità: post o get. Il metodo get viene preferito per quei moduli che non necessitano di elaborazioni esterne. Per tutti gli altri casi si adopera post

enctype L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE. Un esempio tipo potrebbe essere questo: <form method="get" action="/cgi-bin/usermail.pl" enctype="text/plain" name="mio_form">

<INPUT> L'elemento <input> rappresenta il campo più importante di un modulo. Questo campo, sul quale i dati possono essere introdotti o modificati dall'utente, ha diversi attributi e fra questi vi è type dal quale dipende il tipo di controllo che input riesce ad esercitare sul modulo.

<input> attributi assegnabili all'elemento input:

align checked maxlength name size src value type

ALIGN Questo attributo specifica l'allineamento dell'immagine, quindi adoperato con l'impostazione TYPE=IMAGE.

CHECKED Attributo che indica la selezione della casella o del pulsante di controllo, quindi adoperato con TYPE=CHECKBOX o TYPE=RADIO.

MAXLENGTH Attributo che indica il numero massimo di caratteri che possono essere immessi nel campo testo, quindi adoperato con TYPE=TXT. Il numero potrebbe essere anche piĂš grande di quello specificato dall'attributo SIZE, in questo caso il testo scorrerĂ orizzontalmente, essendo il numero di default illimitato.

NAME Attributo che indica un nome univoco per il campo o per un gruppo di file correlati.

SIZE Attributo che specifica le dimensioni del campo in numero di caratteri.

SRC Attributo che indica l'URL a cui fare riferimento per l'immagine desiderata, da utilizzare con TYPE=IMAGE.

VALUE Attributo che se utilizzato con gli attributi TYPE=... imposta il valore di visualizzazione iniziale di un campo, sia esso testo che numerico.

TYPE Attributo che definisce il tipo di controllo da assegnare al campo input, per default è text: libero testo; possono essere definiti diversi tipi quali:

type="..." tipi di campi assegnabili all'attributo type di input:

button checkbox file hidden image password radio

reset submit text

BUTTON Utilizzato per incorporare pulsanti. L'attributo NAME è utilizzato per assegnare al pulsante un nome univoco. L'attributo VALUE specifica il testo da visualizzare sul pulsante stesso.

CHECKBOX Utilizzato per semplici attributi booleani, dove un campo può essere vero o falso , si o no.

FILE Con l'attributo File è possibile inviare un file contenuto nel proprio PC, ovviamente il server che lo riceve deve essere configurato per la scrittura sul disco.

HIDDEN Con questo tipo di input non viene mostrato alcun campo a video, ma il contenuto del campo viene comunque spedito con il modulo.

IMAGE E' un campo di immagine su cui poter cliccare, è necessario l'attributo NAME e l'immagine è specificata dall'attributo SRC, proprio come avviene per l'elemento <IMAGE>.

PASSWORD

Con l'attributo password è possibile inserire del testo in un campo senza che questo venga visualizzato, si vedranno una serie di asterischi.

RADIO Utilizzato per un valore singolo su campi con diverse alternative. Se infatti allo stesso gruppo viene assegnato lo stesso nome, un solo valore potrà essere selezionato. E' possibile con CHECKED stabilire anche una scelta iniziale, sono obbligatori gli attributi NAME e VALUE.

Si noti come sia possibile selezionare una sola delle tre voci e come la prima sia già selezionata per default.

RESET E' un pulsante che riporta il modulo ai valori iniziali, cioè vuoto, anche in questo caso l'attributo VALUE serve per il nome da visualizzare sul pulsante.

Reset

SUBMIT E' un pulsante che serve per inviare il modulo riempito, anche in questo caso l'attributo VALUE serve per il nome da visualizzare sul pulsante.

Invia Dati

TEXT Utilizzato per i campi di testo a riga singola, si devono utilizzare gli attributi SIZE e MAXLENGTH per impostare la quantità massima di testo ammesso. Sono necessari gli attributi VALUE e NAME rispettivamente per assegnare un valore iniziale e per definire il nome univoco. testo iniziale

<OPTION> L'elemento <OPTION> è utilizzato soltanto con l'elemento SELECT, rappresenta una scelta fra diversi valori. Ha due possibili attributi: SELECTED per indicare l'opzione inizialmente selezionata e VALUE per indicarne il valore rappresentato.

Discreto

<SELECT>...</SELECT> L'elemento <SELECT> consente di effettuare delle scelte rappresentate dall'elemento OPTION . Ha tre possibili attributi: MULTIPLE per effettuare diverse selezioni, NAME il nome che sarà inviato come coppia nome/valore, SIZE specifica il numero di voci visibili. Provate a selezionare le voci tenendo premuto il tasto CTRL o SHIFT come avviene normalmente per selezionare i files nel vostro sistema operativo.

Discreto

<TEXTAREA>...</TEXTAREA> L'elemento <textarea> consente di immettere testo su più righe. Gli attributi ROWS e COLS specificano le dimensioni visibili del campo in caratteri. Provate ad introdurre del testo:

<form ...> <textarea cols"20" rows="5"></textarea> </form>

Un esempio chiarirà meglio. Il Form riportato sotto serve per raccogliere dati e pareri. I dati vengono elaborati da uno script CGI che li controlla, li riordina ed infine li spedisce via e-mail all'indirizzo configurato nel form stesso. Attenzione!!! in questo esempio non succederà nulla perchè ho volutamente tolto i riferimenti al mio FormMail dal momento che vi sono stati abusi, è dunque solo dimostrativo ma sarebbe perfettamente funzionante nel caso in cui voi cambiaste i dati di riferimento.

Nome: E-mail: Inserisci qui di lato il tuo commento Come sei arrivato su WebLink: Se altro specificare:

seleziona -->

Pessima Se vuoi..... puoi dirmi come giudichi questa guida:

Mediocre Sufficiente Buona Ottima Non saprei

0-15 16-25 Sempre se vuoi.... puoi dirmi la tua EtĂ ?

26-35 36-45 46-55 55+ Invia i Dati

Annulla

Questo il codice HTML per ottenerlo: <form name="parere" action="mailto:vostronome@serverdiposta.it" method="post"enctype="text/plain"> <table border="0" cellspacing="5" cellpadding="5"> <tr> <td>Nome:</td><td><input type="text" name="nome" size="35" maxlength="40" value=""></td> </tr><tr> <td>E-mail:</td><td><input type="text" name="email" size="35" maxlength="40" value=""></td>

</tr><tr> <td valign="middle">Inserisci<br>qui di lato <br>il tuo commento</td> <td><textarea name="commento" rows="4" cols="30"></textarea></td></tr> <tr><td>Come sei arrivato su Web-Link:<br>Se altro specificare:</td><td> <select name="come sei arrivato"> <option selected>motore di ricerca</option> <option>banner</option> <option>link su altro sito</option> <option>guestbook</option> <option>news group</option> <option>casualmente</option> <option>(altro)</option> </select> <br> <input type=text name="come" size="35" maxlength="40" value=""> </td> </tr><tr> <td>Se vuoi.....<br>puoi dirmi <br>come giudichi<br> questa guida: </td><td><hr width="50%" align="left"> <input type=radio name="giudizio" value="pessimo">&nbsp;Pessima<br> <input type=radio name="giudizio" value="mediocre">&nbsp;Mediocre<br> <input type=radio name="giudizio" value="sufficiente">&nbsp;Sufficiente<br> <input type=radio name="giudizio" value="buono">&nbsp;Buona<br> <input type=radio name="giudizio" value="ottimo">&nbsp;Ottima<br> <input type=radio name="giudizio" value="non saprei">&nbsp;Non saprei&nbsp;<hr width="50%" align="left"></td></tr> <tr><td>Sempre se vuoi....<br>puoi dirmi<br>la tua Et&agrave;? </td><td><hr width="50%" align="left"> <input type=radio name="eta" value="0-15">&nbsp;0-15<br> <input type=radio name="eta" value="16-25">&nbsp;16-25<br> <input type=radio name="eta" value="26-35">&nbsp;26-35<br> <input type=radio name="eta" value="36-45">&nbsp;36-45<br> <input type=radio name="eta" value="46-55">&nbsp;46-55<br> <input type=radio name="eta" value="55+">&nbsp;55+<br><hr width="50%" align="left"></td></tr> <tr><td></td><td><input type=submit value="Invia i Dati"><input type=reset value="Annulla"></td></tr> </table> </form>

Da notare nella prima riga di codice vostronome@serverdiposta.it dovrà essere sostituito dal vostro indirizzo di posta, oppure per chi ha un Formail o Sendmail installato dovrà fare riferimento a quello ed ai suoi parametri di configurazione.

Consiglio Con l'uso dei CSS è possibile cambiare i colori, il font e molto altro ancora dei vari elementi che compongono un modulo.

I Frames Introdotti a partire dalla versione 2 di NS e 3 di IE, sono ancora oggi un'ottima soluzione per strutturare siti più o meno complessi. Permettono di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata o contenere dati in modo completamente autonomo rispetto alle altre. Il mio sito: www.web-link.it ne è un chiaro esempio dimostrativo. A destra il frame principale, il più grande, dove visualizzare le pagine degli argomenti. A sinistra centrale il frame per il menù formato da decine di voci. A sinistra in alto il piccolo frame per la musica. Si possono inserire tutti i frames che servono e combinarli nel più svariato dei modi a seconda delle proprie necessità. Come sempre in questi casi meglio non esagerare per non complicarsi troppo la loro gestione, quindi creare solo i frames che realmente vi servono.

Da notare che in caso di frames si dovrà usare nella sola pagina dove avviene la dichiarazione del framest una riga <DOCTYPE adatta per i frames, come spiegato su questo link.

<FRAMESET>...</FRAMESET> L'elemento <frameset> è l'elemento principale, possiede due attributi: rows e cols. Al suo interno può contenere annidati altri elementi quali <frameset>, <frame> o <noframe>.

Da solo serve a poco, necessita di almeno un elemento <frame> Questo elemento non va inserito all'interno del body come avviene per tutti gli altri elementi di html, caso più unico che raro non va inserito neppure in head. Questo elemento in una pagina web va inserito subito dopo la chiusura di </head> ed in questo caso la struttura della pagina non necessita di alcun <body> a meno che non si faccia uso dell'attributo <noframes> spiegato più avanti. <frameset ... > attributi assegnabili: </frameset>

rows cols

ROWS L'attributo rows raccoglie i valori per l'altezza della riga quando si suddivide la finestra principale in righe. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Esiste anche l'asterisco * che significa tutto il rimanente della porzione di schermo. <frameset rows="30%, 70%"> L'esempio sopra crea due frames (cornici) suddividendo orizzontalmente la finestra del browser, la prima in alto che occupa il 30% delle dimensioni totali lasciando il rimanente 70% alla seconda finestra in basso. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in

questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio: <frameset rows="180, 600"> In questo caso si hanno sempre due frames con dimensioni fisse: 180 e 600 px indipendentemente dalla dimensione dalla finestra del browser che le visualizza. Così facendo si vanno a penalizzare le risoluzioni grafiche più grandi di quelle da noi impostate. Per evitare questo rischio è possibile adoperare il carattere * (asterisco) che fa da jolly, praticamente imposta la massima dimensione rimanente. (vedi esempio sotto) <frameset rows="180, *"> Così facendo si otterrà un frame orizzontale di dimensione fissa di 180 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende dal monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame superiore fisso: 180 pixel

Frame inferiore variabile: * dipende dalle dimensioni della finestra del browser.

COLS L'attributo cols raccoglie i valori per la larghezza della colonna, quando si suddivide la finestra principale in colonne. Questi valori devono essere separati da virgole e possono essere espressi sia in numeri interi che in numeri percentuale; nel primo caso equivalgono al numero di pixel mentre nel secondo caso sono in percentuale delle dimensioni della finestra del browser. Esiste anche l'asterisco * che significa tutto il rimanente della porzione di schermo. <frameset cols="25%, 75%"> L'esempio sopra crea due frames (cornici) suddividendo verticalmente la finestra del browser, la prima a sinistra che occupa il 25% delle dimensioni totali lasciando il rimanente 75% alla seconda finestra a destra. Si possono adoperare anche valori numerici, senza il simbolo di % percentuale, in

questo caso si fa riferimento al numero di pixel dello schermo. Queste dimensioni restano fisse indipendentemente dalle dimensioni della finestra del browser, vediamo un esempio: <frameset cols="220, 600"> In questo caso si hanno sempre due frames con dimensioni fisse: 220 e 600 px indipendentemente dalla dimensione dalla finestra del browser che le visualizza. Così facendo si vanno a penalizzare le risoluzioni grafiche più grandi di quelle da noi impostate. Per evitare questo rischio è possibile adoperare il carattere * (asterisco) che fa da jolly, praticamente imposta la massima dimensione rimanente. (vedi esempio sotto) <frameset cols="220, *"> Così facendo si otterrà un frame verticale di dimensione fissa di 220 pixel lasciando per il secondo frame tutto lo spazio rimanente, qualsiasi esso sia, è ovvio che dipende dal monitor e dalla risoluzione grafica adoperata dal visitatore. L'esempio pratico sotto è al solo scopo di rendere l'idea di come avviene la suddivisione.

Frame laterale sinistro fisso: 220 pixel

Frame laterale destro variabile: * dipende dalle dimensioni della finestra del browser.

<FRAME> L'elemento frame definisce le proprietà del frame vero e proprio all'interno di FRAMESET, non necessita del relativo tag di chiusura /frame. Questi gli attributi possibili:

<frame ... > attributi assegnabili:

src name marginwidth marginheight scrolling noresize frameborder

SRC="url" L'attributo src="url" definisce l'indirizzo del file che verrà richiamato e quindi visualizzato nel frame di frameset. Potrebbe sembrare complicato ma altro non è che il nome del file html da visualizzare, con o senza un eventuale percorso (path) per raggiungerlo. <frame src="nome_file.html">

NAME="nome_frame" L'attributo name (da non confondere con nome) è di vitale importanza al fine di una corretta gestione di tutta la struttura. Serve per assegnare un nome univoco al frame stesso potendo così richiamarlo come frame di destinazione nell'apertura dei collegamenti (links) presenti su altre pagine, si veda a questo proposito l'uso di target nei links spiegati in questa sezione.

Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi. Se tutto ciò può sembrare complesso, e non lo è, a fine pagina trovate un esempio riassuntivo che chiarirà al meglio ogni cosa. <frame src="..." name="xxxxx">

MARGINWIDTH="valore" L'attributo marginwidth accetta valori numerici che corrispondono a pixel. Forza il rientro sui due lati: destro e sinistro, in base a tale valore. Non può essere impostato a zero. <frame... marginwidth="valore">

MARGINHEIGHT="valore" L'attributo marginheight accetta valori numerici che corrispondono a pixel. Forza il rientro sui lati: superiore ed inferiore, in base a tale valore. Non può essere impostato a zero. <frame... marginheight="valore">

SCROLLING="yes|no|auto" L'attributo scrolling serve per visualizzare il controllo della barra laterale di scorrimento. Quando il

contenuto della pagina supera le dimensioni del frame viene visualizzata una barra di scorrimento: yes= si visualizza questa barra, no= nessuna barra, auto= solo se il contenuto del frame la richiede in base alle dimensioni dei contenuti rispetto alla finestra del browser. <frame... scrolling="auto">

NORESIZE L'attributo noresize non ha alcun parametro, se inserito evita al frame di poter essere ridimensionato. Diversamente sarĂ possibile, portando il puntatore del mouse nella divisione dei due frames, ottenere un puntatore a forma di doppia freccia che consentirĂ di modificare le dimensioni prestabilite. <frame noresize>

FRAMEBORDER="1|0" L'attributo frameborder, serve per rendere visibili o meno i bordi dei frames, per default si trova a 1 quindi impostare 0 soltanto nel caso in cui non si voglia visualizzare il bordo. <frame frameborder="0">

<NOFRAMES>...</NOFRAMES> L'elemento noframes serve per creare un alternativa per quei browser che non supportano i frames.

Ad oggi mi resta difficile anche solo pensare che vi siano ancora browser cosĂŹ obsoleti da non riconoscere i frames. Alcuni motori di ricerca si fermano di fronte ad un frame, in questo caso potranno proseguire da quello che avrete inserito fra i tags <noframes>...</noframes> <noframes> Spiacente ma il tuo browser non supporta i frames, clicca su questo link per continuare </noframes>

ESEMPIO Forse un esempio pratico chiarirà ogni dubbio, diciamo subito che la struttura di un sito a frames si basa su almeno 3 pagine web: Una per dichiararne la struttura.

Le altre due rispettivamente per i due frames dichiarati.

Ipotizziamo di voler creare un sito con tre frames: uno laterale per il menù, uno centrale principale per la navigazione, ed uno fisso in alto per eventuali banner pubblicitari, musica, informazioni varie ecc.

Inizieremo col creare le tre pagine menu.html, home.html e sponsor.html le ho chiamate così ma qualsiasi altro nome non farebbe alcuna differenza.

Fatto questo non resta che creare la pagina dove viene dichiarata la struttura a frames, io la chiamerò index.html Per questa pagina valgono le stesse regole di tutte le altre pagine html, quindi avrà i tags di base quali: doctype, html, head, title, metatags, body e tutti gli altri eventuali.

Attenzione al doctype che dovrà essere quello per frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Web-Link.it Tutto per la tua pagina web </title> </head> <frameset cols="120, *"> <frame name="menu" src="menu.html" scrolling="auto"> <frameset rows="150, 650"> <frame name="sponsor" src="sponsor.html" scrolling="auto"> <frame name="homepage" src="home.html" scrolling="auto"> </frameset> <noframes> <body> <p>spiacente il tuo browser non supporta i frames</p> </body> </noframes> </frameset> </html>

Il listato sopra produrrà un risultato simile a questo sotto. Si noti la struttura nidificata del frameset che crea due frame laterali ed all'interno del secondo frameset ne imposta un altro.

Frame Sponsor

Frame menù Frame Home Page

E' possibile vedere su questo link 18 schemi di strutture a frames combinate nelle più comuni disposizioni. Basterà selezionare il codice html già pronto ed incollarlo nella vostra pagina web.

Voglio sperare che lo facciate soltanto per apprendere e verificare il codice e non per copiarlo spudoratamente :)

Iframe Introdotto e supportato inizialmente soltanto dai browser IE è poi stato riconosciuto anche dagli altri browser.

Si adopera per creare una cornice (frame) all'interno di una pagina web, (internal frame) in questa cornice è possibile visualizzare una qualsiasi altra pagina web. Così facendo si ottengono pagine o porzioni di pagine web all'interno di altre pagine web.

Non è necessario avere una struttura a frames per farne uso, questo elemento è indipendente dai frames ed è sufficiente richiamarlo in qualsiasi punto di una qualsiasi pagina web.

<IFRAME>...</IFRAME> L'elemento <IFRAME> possiede al suo interno diversi attributi, quello fondamentale è src che

serve per specificare il nome della pagina web da richiamare. Necessita del relativo elemento di chiusura </iframe> e tutto il codice html che sarà inserito dopo la chiusura di iframe> e prima del tag </iframe sarà eseguito da quei browser che non supportano iframe stesso. Come per frame mi rifiuto di pensare che vi siano ancora browser che non supportano questo elemento. <iframe ...>

attributi assegnabili:

</iframe>

align frameborder height marginwidth marginheight name scrolling src width

SRC="url nome pagina" L'attributo src è fondamentale in quanto specifica il nome della pagina da visualizzare all'interno di iframe. <iframe src="nome_pagina.html"></iframe>

L'esempio sopra con src è privo di qualsiasi altro attributo e genera una finestra con le stesse dimensioni e caratteristiche di quella che vedete in questo esempio. Vengono assegnate per default le due barre di scorrimento orizzontale e verticale nel caso in cui la pagina da visualizzare fosse di dimensioni superiori a quella generata da iframe. Anche i bordi sono in evidenza: interni ed esterni, per dare un senso di tridimensionalità.

Conviene specificare sempre le dimensioni per larghezza ed altezza facendo uso degli appositi attributi.

WIDTH="valore" HEIGHT="valore" Gli attributi width e height servono rispettivamente per impostare le dimensioni in larghezza ed in altezza per la finestra interna generata da iframe.

<iframe ... height="170" width="80%"></iframe>

Da notare che le dimensioni possono essere espresse sia in pixel "170" (fissa), che in percentuale "95%" (variabile), oppure in entrambi i modi. Se anche una sola delle misure adoperate viene espressa in percentuale(%) verranno generate in modo automatico le relative barre di scorrimento orizzontale e/o verticale nel caso in cui le dimensioni della finestra del browser fossero piĂš piccole di quelle della finestra di iframe. Provate adesso a ridimensionare questa vostra finestra del browser; noterete come anche iframe si ridimensioni ed una volta raggiunte le dimensioni minime della pagina vengono generate automaticamente le barre di scorrimento.

SCROLLING="yes|no|auto" L'attributo scrolling serve per le barre di scorrimento, quando le dimensioni della pagina iframe superano le dimensioni della finestra del browser vengono visualizzate le barre di scorrimento. yes = si alla visualizzazione di queste barre sempre, no = no nessuna barra mai, auto = si ma soltanto se il contenuto di iframe la richiede. <iframe ... scrolling="No"></iframe>

Questo è un esempio simile a quello sopra, è stato impostato No nel parametro per la generazione dello scrolling. Da notare che questa volta ridimensionando la finestra del browser il suo contenuto tende a sparire senza che siano visualizzate le barre di scorrimento.

FRAMEBORDER="0|1" L'attributo frameborder serve per rendere visibili o meno i bordi di iframe, per default si trova a [1] quindi impostare [0] soltanto nel caso in cui non si voglia ridisegnare il bordo. <iframe ... frameborder="0"></iframe>

Notare la mancanza assoluta di bordi quasi non fosse un iframe ma una immagine piatta inserita nella pagina web.

MARGINWIDTH="valore" MARGINHEIGHT="valore" Gli attributi marginwidth e marginheight accettano valori numerici che corrispondono a pixel, forzano il rientro sui lati: destro e sinistro, alto e basso. <iframe ... marginheight="100"></iframe>

In questo esempio 100 pixel per il bordo verticale.

ALIGN=" left | center | right | justify " Allineamento del riquadro iframe rispetto al testo e agli altri elementi che compongono la pagina web.(a sinistra, al centro, a destra, giustificato) <iframe ... align="right"></iframe>

In questo esempio l'allineamento scelto è quello destro (right). Per i vari modi di allineare vale quanto detto per l'attributo align dell'elemento IMG

NAME="nome_frame" L'attributo NAME è estremamente importante nel caso in cui volessimo aprire dei links all suo interno, serve per assegnare un nome ad iframe che deve essere univoco e sarà poi il "bersaglio" target o destinazione di collegamenti da altri links tramite l'attributo TARGET. A questo proposito si veda anche la sezione dedicata proprio ai links e loro gestione. Non confondete il nome che avete scelto per il file html con il nome da assegnare al frame, questi potrebbero essere due nomi completamente diversi oppure lo stesso nome ma con funzioni decisamente diverse. <iframe ... name="pippo"></iframe>

Così facendo è stato assegnato il nome pippo al nostro iframe, adesso basterà inserire l'attributo target="pippo" ad eventuali links che questi saranno aperti dentro iframe stesso. Provate con questi links di prova: link 1 link 2 link 3 Con l'aiuto dei CSS (fogli di style) è possibile posizionare i vari iframe in un punto preciso dello schermo, guardate questo esempio dove vengono sovrapposti, non è pratico e di conseguenza non serve a nulla ma rende bene l'idea.

La musica ed i suoni non saranno indispensabili ai fini di un buon documento html ma a volte non dispiace essere accompagnati da una musica di sottofondo mentre si navigano pagine web.

In html 4.01 si fa uso di object ma descriveremo anche bgsound ed embed sebbene il primo sia proprietario dei soli browser IE e l'altro riconosciuto da vari browser ma deprecato.

Vi ricordo che per come lavora il browser qualsiasi oggetto inserito in una pagina web per essere visualizzato o, come nel nostro caso, per essere ascoltato, lo si deve prima scaricare nella memoria interna del browser. Se ne deduce che files molto grandi (pesanti) richiederanno tempi piuttosto lunghi a seconda del tipo di connessione usata dal visitatore.

<BGSOUND> L'elemento <bgsound> necessita di attributi di cui almeno uno necessariamente obbligatorio: src, a differenza di molti altri elementi html (tags), questo non ha bisogno di essere concluso dallo stesso elemento preceduto dalla barra retroversa </bgsound>. questi gli attributi che è possibile usare: Disapprovato! dal W3C a favore di object

SRC L'attributo SRC specifica il nome del file audio da riprodurre, questo può essere in formato: wav , midi, mp3 o qualsiasi altro formato audio valido purché supportato dal plug-in o programma associato nel PC per la riproduzione audio. Il brano così richiamato si avvierà automaticamente. <bgsound src="nome_file.mid">

LOOP Con l'attributo loop si stabilisce il numero di volte che il brano deve essere ripetuto, se al posto di un numero viene inserito il termine "infinite" il brano sarà ripetuto all'infinito. <bgsound src="..." loop="infinite">

<EMBED> L'elemento <embed> supporta attributi quali: src, loop, hidden, autostart, width, heigth ed è riconosciuto dai vari browser IE compreso a partire però dalla versione 4.0. Questi gli attributi: Disapprovato! dal W3C a favore di object

SRC L'attributo src specifica il nome del file audio da riprodurre, questo può essere in formato: wav , midi, mp3 o qualsiasi altro formato audio valido purché supportato dal plug-in o programma associato al PC per la riproduzione audio. Il brano così richiamato si avvierà automaticamente.

<embed src="nome_file.mid">

Se non vengono specificate le dimensioni con width e heigth i browser IE visualizzano l'intera interfaccia grafica per offrire il controllo diretto sul player, compresi: volume, avvio, stop, pausa.

LOOP="true/false" Con l'attributo loop si stabilisce se il brano deve essere ripetuto all'infinito (true) o una sola volta (false). <embed src="..." loop="true">

AUTOSTART="true/false" Con l'attributo autostart si stabilisce se il brano deve avviarsi da solo: automaticamente (true), oppure no (false). <embed src="..." autostart="false">

HIDDEN="true/false" Con l'attributo hidden si stabilisce se l'interfaccia grafica sia visibile (false), oppure nascosta (true). <embed src="..." hidden="false">

WIDTH e HEIGTH Con questi attributi è possibile stabilire la porzione dell'interfaccia grafica da visualizzare. Questa varia a seconda del browser adoperato, per IE la mancanza di valori farà si che sia visualizzata per intero. A volte è più comodo avere solo i pulsanti. <embed src="..." width="145" height="35">

Queste dimensioni variano a seconda del programma associato al browser adoperato, per questo motivo è preferibile non far vedere alcuna interfaccia, oppure affidarsi ad uno script che una volta intercettato il tipo di browser richiami o una dimensione o un'altra. Si veda a questo proposito la sez. F.A.Q.

<NOEMBED>...</NOEMBED> L'elemento <noembed> esegue il codice html in esso contenuto soltanto nel caso in cui il browser non supportasse l'elemento embed.

Si potrebbe allora assemblare un codice html che adoperi embed, e nel caso in cui questo non dovesse essere supportato, vedi alcune versioni del browser IE, richiamare bgsoud. Così facendo si avrebbe quasi la certezza di riuscire a far ascoltare la musica a qualsiasi tipo di browser: <embed src="nome_file.mid" autostart="true" loop="false" hidden="false"> <noembed><bgsound src="nome_file.mid"></noembed>

Disapprovato! dal W3C a favore di object

<OBJECT>...</OBJECT> L'elemento <object> necessita del relativo elemento di chiusura, serve per definire un elemento oggetto generico incorporato. Viene utilizzato anche per altri tipi di oggetti quali filmati, applets, ed altro ancora.

Nel nostro caso sfruttando alcuni suoi attributi e sarĂ cosĂŹ possibile fargli riprodurre un brano musicale. Si farĂ uso oltre che di type e data anche dell'elemento <param> grazie al quale definire le preferenze di impostazione. <object type="audio/x-mid" data="nome_file.mid"> <param name="src" value="nome_file.mid"></param> </object>

type L'attributo type di object specifica quale sia il tipo di file da riprodurre, di solito per i file audio si possono avere file di tipo: midi, mp3, wav, ogg. Per ognuno di questi esiste una apposita sigla: <object type="audio/x-mid" data="nome_file.mid"> <param name="src" value="nome_file.mid"> </object> Questa la tabella dei tipi mime per i files audio: = mid audio/x-mid = wav audio/x-wav = mp3 audio/mpeg application/ogg = ogg

<PARAM> L'elemento <param> non necessita del relativo elemento di chiusura, serve per l'inizializzazione di un oggetto. Ha diversi attributi ma nel nostro caso useremo: src, autostart, loop che serviranno per passare ad object i valori dei parametri specificati.

param name SRC Con l'attributo src si stabilisce il nome del brano completo della sua estensione ed eventuale percorso (path) per raggiungerlo. <object type="audio/x-mid" data="nome_file.mid"> <param name="src" value="nome_file.mid"> </object> param name AUTOSTART Con l'attributo autostart si stabilisce se il brano deve avviarsi automaticamente: value="true", oppure no value="false", sono ammessi anche valori come "1" e "0". <object type="audio/x-mid" data="nome_file.mid"> <param name="src" value="nome_file.mid"> <param name="autostart" value="false"> </object> param name LOOP Con l'attributo loop si stabilisce se il brano deve essere ripetuto all'infinito: value="true" o una sola volta value="false" sono ammessi anche valori come "1" e "0". <object type="audio/x-mid" data="nome_file.mid"> <param name="src" value="nome_file.mid"> <param name="autostart" value="0"> <param name="loop" value="1"> </object>

Nota: ho fatto uso di un file midi per due motivi, il primo perchè questo formato è molto leggero e non richiede tempi lunghi di attesa prima di essere riprodotto. Il secondo è che quel midi l'ho creato io anche se con un apposito programma, questo mi garantisce da eventuali problemi di violazione del diritto d'autore. Fate sempre molta attenzione ai brani audio che riproducete sul sito, meglio avere il permesso da parte del suo autore o essere certi che siano brani musicali free.

Nota: Html è un metalinguaggio piuttosto semplice, nella sua semplicità risiedono purtroppo alcune limitazioni dovute sicuramente al fatto che quando è nato non c'erano le molte necessità che ci sono oggi.

Per colmare queste carenze si ricorre spesso a linguaggi esterni da integrare con il codice html. Fra i più adoperati ci sono Java, che non ha nulla in comune con JavaScript se non la sua parte iniziale del nome e Flash.

A proposito di Javascript, applet java e codice Flash se ne sentono dire molte ed alcune prive di ogni fondamento. Mi riferisco al fatto che possano recare danni alla macchina sulla quale vengono eseguiti. Ritengo che non sia possibile perchè non sono in grado di scrivere nulla su disco fisso. Le storie che circolano a proposito di virus o formattazioni varie sono solo storielle inventate di proposito, questo almeno ad oggi. Sappiamo con quale rapidità si evolve e si sviluppa il settore, domani è un altro giorno e tutto potrebbe accadere. Al momento posso però dirvi di stare tranquilli.

Java Un linguaggio completo e indipendente col quale ottenere vere e proprie applicazioni eseguibili all'interno di pagine web. Si tratta di un linguaggio basato sul C++ che genera codice precompilato sottoforma di applet. Non preoccupatevi, non dobbiamo creare queste applet ma sapere come inserirle, la rete è piena di applet già pronte, anche Web-Link ne raccoglie alcune fra le più belle; si tratta soltanto di scegliere quelle che fanno al caso nostro ed incorporarle. Vediamo come:

<APPLET>...</APPLET> L'elemento <applet> nonostante i vari attributi funziona soltanto se richiama il file di tipo .class che contiene il codice java compilato. I vari elementi da soli non sarebbero in grado di fare nulla senza questo file esterno richiamato dall'applet stesso.

<APPLET> attributi assegnabili: </APPLET>

align alt code codebase name width heigth vspace hspace

Deprecato, disapprovato insieme a tutti i suoi attributi in favore di object.

ALIGN L'attributo ALIGN, opzionale, specifica l'allineamento dell'applet; i valori possono essere gli stessi dell'elemento img quindi: left, right, top, middle e bottom. <applet align="center">

ALT L'attributo alt, opzionale, specifica un testo alternativo da visualizzare nel caso in cui il browser riconoscesse l'elemento applet ma non fosse in grado di eseguirne il codice.

<applet alt="spiacente il tuo browser non è in grado di visualizzare questo applet">

CODE L'attributo code, obbligatorio, specifica il nome del file che contiene il codice compilato dell'applet.

Di norma un file con estensione .class <applet code="weblink.class">

CODEBASE L'attributo codebase, opzionale, specifica l'URL di base dell'applet; ovvero la cartella (directory) che contiene il codice compilato dell'applet sottoforma di file .class I valori di questo attributo possono soltanto riferirsi a sottocartelle derivate dalla cartella di base. <applet codebase="http://www.web-link.it/cartella/sotto_cartella">

NAME L'attributo NAME, opzionale, specifica il nome per l'istanza dell'applet, consentendo agli altri applet che si trovano sulla stessa pagina di riconoscersi e comunicare a vicenda tra di loro. <applet name="web">

WIDTH e HEIGHT Gli attributi width e height, obbligatori, specificano le dimensioni dell'area di visualizzazione dell'applet stesso. <applet whidth="200" height="150">

VSPACE e HSPACE Gli attributi vspace e hspace, opzionali, specificano il numero di pixel da lasciare sopra e sotto l'applet, una sorta di margini. <applet vspace="12" hspace="5"> Deprecato: disapprovati tutti gli attributi di APPLET in favore di object.

<PARAM> L'elemento <param> non necessita del relativo elemento di chiusura. Ha diversi attributi ma nel nostro caso ne useremo due: name e value, che serviranno per passare all'applet i valori dei parametri specificati. Ipotizziamo che l'applet richieda un determinato font, questo sotto un possibile esempio: <applet> <param name="FontName" value="TimesRoman"> </applet>

ESEMPIO Vediamo un esempio che racchiude molti dei parametri specificati. Lo specchio d'acqua mosso dalla corrente è generato da un applet di Fabio Ciucci: <applet code="AnLake.class" width="180" height="234"> <param name=regnewframe value="YES"> <param name=regframename value="_blank"> <param name=statusmsg value="AnLake applet"> <param name=res value="1"> <param name=image value="mountain1.jpg"> <param name=overimgX value="0"> <param name=overimgY value="156"> <param name=textscroll value="NO"> Spiacente ma il tuo browser non supporta Java. </applet> Le righe di codice che compongono l'applet sarebbero molte di più, non credo però serva o sia il caso di elencarle tutte. Si potrà notare che certi parametri sono specifici di quel tipo di applet, quindi fini a se stessi. Di solito chi fornisce l'applet fornisce anche l'elenco dei parametri e quali possano essere gli effetti prodotti da questi, oltre a fornire i relativi valori ammessi. Lo scopo di questo esempio è soltanto quello di rendere l'idea di come fare per inserire codice java integrandolo con Html. Spero e mi auguro di esserci riuscito.

<OBJECT>...</OBJECT> L'elemento <object> necessita del relativo elemento di chiusura, serve per definire un elemento oggetto generico incorporato. Viene utilizzato anche per altri oggetti quali filmati, audio, ed altro ancora.

Nel nostro caso sfruttando alcuni suoi attributi sarà possibile fargli riprodurre l'applet dell'esempio sopra. Si farà uso anche dell'elemento <param> grazie al quale definire e passargli le preferenze di impostazione. <object classid="java:Lake.class" type="application/x-javaapplet" height="350" width="130"> <param name="image" value="nome_img.jpg"> </object>

<PARAM> L'elemento <param> non necessita del relativo elemento di chiusura, serve per l'inizializzazione di un oggetto. Ha diversi attributi ma nel nostro caso ne useremo due: name e value che serviranno per passare ad object i valori dei parametri specificati. <object classid="java:Lake.class" type="application/x-java-applet" height="400" width="140"> <param name="image" value="nome_img.jpg"> </object> Attenzione: Se nel tuo PC non è installata la JVM (Java Virtual Machine) necessaria per visualizzare le applets java, puoi scaricarla gratuitamente da questo link che è il sito ufficiale di Java Sun, la casa madre di Java.

oggetti in FLASH Facendo uso di object è possibile incorporare anche files di tipo swf prodotti da flash di adobe (ex macromedia). <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0" width="xxx" height="yyy">

<param name="src" value="nome_file.swf"> <embed src="nome_file.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/xshockwave-flash" width="xxx" height="yyy"> </embed> </object>

dove xxx ed yyy sono le misure del vostro filmato

Premessa Html non è un linguaggio di programmazione e come tale non è in grado di eseguire elaborazioni come gestire i dati, scrivere sul disco o prendere decisioni come un linguaggio più o meno complesso riesce a fare. Possiamo definirle limitazioni forse ma sono quelle che lo hanno reso semplice e alla portata di tutti. Sono dipese dal fatto che quando è nato non c'erano le molte necessità che ci sono oggi.

Per colmare queste carenze si ricorre spesso a linguaggi di scripting da integrare con lo stesso html.

Il più famoso e adoperato è in assoluto JavaScript, un linguaggio che viene eseguito all'interno del browser, da qui il descriverlo come un linguaggio "lato client". Javascript non ha nulla in comune col Java se non in quella sua parte iniziale del nome, anzi inizialmente aveva un nome diverso e non avrebbe dovuto chiamarsi così.

A proposito di Javascript se ne sentono dire molte ed alcune prive di ogni fondamento. Mi riferisco al fatto che possa recare danni alla macchina sulla quale viene eseguito. Ritengo che non sia possibile perchè non è in grado di scrivere nulla su disco fisso se non a livello di piccolissimi file di testo chiamati cookie. Le storie che circolano a proposito di virus o formattazioni varie sono solo storielle inventate di proposito, questo almeno ad oggi. Sappiamo con quale rapidità si evolve e si sviluppa il settore, domani è un altro giorno e tutto potrebbe accadere. Al momento posso però dirvi di staree tranquilli.

JavaScript Come dice la parola stessa si tratta di script, istruzioni precise che vengono eseguite dal browser di navigazione che le legge e le interpreta in modo sequenziale. Se combinate insieme ai fogli di style danno vita al DHTML (Dynamic HTML). Sono abbastanza semplici da comprendere e da adoperare. Per alcuni controlli ed azioni sono indispensabili, si pensi alla verifica dei dati di un modulo o ad un menù complesso per navigare gli argomenti.

Lo scopo di questa guida non è insegnare JavaSscript ma più semplicemente descrivere come integrarlo con html. Per questo motivo mi soffermerò soltanto su ciò che si trova in stretta relazione

fra i due linguaggi. Vi ricordo che la rete è piena di siti che offrono script. Qui su Web-Link ne trovate circa 200 per ogni scopo ed utilizzo. Vediamo alcune regole:

<SCRIPT>...</SCRIPT> Gli elementi <script> </script> fanno da contenitore al codice del linguaggio usato. La loro collocazione avviene di norma nella sezione <head>...</head> del documento html ma non è raro trovare dichiarazioni di script anche nella sezione body. Il richiamo o l'attivazione del codice (se prevista) è di solito associata ad un gestore di eventi posto all'interno di <body>...</body>.

Alcuni dei gestori di eventi potrebbero essere: il passaggio del mouse sopra un link (OnMouseOver), il suo click (OnClink), l'avvenuto caricamento della pagina (OnLoad), la spedizione di un modulo (onSubmit), ecc. ecc.

<script ... attributi...></script> attributi assegnabili all'elemento script:

language type src

<head> <script ...> funzioni e codice di scripting </script> </head> <body> ... il richiamo alla funzione del codice di scripting </body>

LANGUAGE L'attributo language se non specificato diversamente si intende valido per tutti i browser che supportano JavaScript. Con l'evolversi del web è stato possibile introdurre nuovi comandi e nuove funzioni e questo attributo in html 4.01 è stato deprecato a favore di type.

<script language="javascript"

JavaScript

alcuni language per l'elemento script:

JavaScript1.1 JavaScript1.2 php VBScript

Disapprovato! a favore dell'attributo type

TYPE="content-type" L'attributo type specifica il linguaggio di script adoperato. Va sempre inserito per chiarire meglio al browser quale tipo di linguaggio di scripting viene adoperato evitando cosĂŹ possibili errori di interpretazione.

<script type="text/javascript" type assegnabili all'elemento script:

text/javascript text/jscript text/livescript text/php text/tcl text/vbscript

<head> <script type="text/javascript"> funzioni e codice </script> </head> <body> ... </body>

SRC="nome_file.js" L'attributo src (source) specifica il nome del file esterno alla pagina web che contiene il codice script, può essere completo del percorso (path) per raggiungerlo.

<script src="web-link.js"></script>

<head> <script type="text/javascript" src="file.js"></script> </head> <body> ... </body>

<!-- --> Questi simboli di commento, gli stessi che fa uso html, devono racchiudere tutto il codice all'interno dello script, così facendo si nasconde il codice a quei browser che non lo supportano evitando interpretazioni strane.

<head> <script type="text/javascript"> <!-righe di codice // end --> </script> </head> <body> ... </body>

Gestori di eventi Abbiamo detto che uno script quasi sempre per essere eseguito deve essere attivato da un preciso evento. Sono molti i gestori di eventi nella attuale versione 1.3 di javascript, mi limiterò ad elencarli dando per ognuno di essi una breve descrizione, evitandomi così il rischio di dover scrivere anche una guida su JavaScript, sto scherzando, per il momento la programmazione è al di fuori dello scopo di questa guida.

Gli eventi di JavaScript e le relative azioni:

onAbort

Avvia uno script quando l'utente interrompe il caricamento di una immagine Avvia uno script quando il puntatore del mouse esce dalla finestra, dal frame, dal onBlur campo di un form. onChange Avvia uno script quando il contenuto di un campo modulo è modificato. onClik Avvia uno script quando il tasto del mouse viene premuto. onError Avvia uno script quando gli attributi del tag <img> generano un errore.

Avvia uno script quando il puntatore del mouse entra nella finestra, nel frame, nel onFocus campo di un form. (l'opposto di onBlur). onLoad Avvia uno script quando la pagina è stata caricata completamente.

Avvia uno script quando il puntatore del mouse abbandona il testo o l'immagine onMouseOut associata ad un link.

Avvia uno script quando il puntatore del mouse passa sopra al testo o all'immagine onMouseOver associata ad un link.(l'opposto di onMouseOut). onReset Avvia uno script quando viene premuto sul pulsante reset di un modulo form.

Avvia uno script quando si seleziona col mouse del testo all'interno di una casella onSelect testo di un form. onSubmit Avvia uno script quando viene premuto il pulsante invio di un modulo form. onUnload Avvia uno script quando si abbandona un documento o una pagina web.

Un piccolo esempio chiarirà meglio tutto quanto. Con i due gestori di evento: onMouseOver ed onMouseOut è possibile cambiare immagine passando sopra ad un link, provate a portare il puntatore del mouse sulla tartaruga sotto. Muovetevi entrando ed uscendo da sopra l'immqagine, poi fate un clic. Si tratta di banali esempi ma rendono bene l'idea delle potenzialità di un linguaggio di script.

Questo il codice html adoperato:

<a href="..." onMouseOver="nome_funzione()" onMouseOut="nome_funzione()" onclick="nome_funzione();">