Il linguaggio HTML :

Il linguaggio HTML (Hyper Text Markup Language) è lo standard attuale per la creazione di pagine web. Un documento html è un semplice file di testo che viene interpretato dal browser dopo essere stato "letto" e "scaricato" da un server remoto secondo il protocollo HTTP (Hyper Text Transfert Protocol).
Alla base dell'html vi sono i TAG, cioè marcatori che delimitano i comandi che il browser deve interpretare per la corretta visualizzazione di una pagina. I tag sono inseriti fra i simboli minore e maggiore < > e sono sempre in coppia : il primo tag indica l'inizio del comando, il secondo (uguale al primo ma con lo "slash" davanti) la fine. Esempio: <FONT> </FONT> .
In mezzo ai due TAG devono essere ovviamente inseriti i testi, le immagini e altri tag del codice.
Ogni file in formato html deve essere costruito secondo una struttura fissa e sempre uguale.

La parte compresa fra i due tag "HEAD" prende il nome di testata del documento e contiene il TITOLO della pagina e i METATAG. La parte compresa fra i due tag "BODY" è detta il corpo del documento e comprende tutti gli elementi visibili della pagina html: testo, immagini, link, tabelle, suoni, elenchi, sfondi colorati, ecc..

Creare un sito Internet non è difficile, ne' può essere messo a confronto con veri e propri sistemi di programmazione. Su quest'ultimo punto, in particolare, è bene sottolineare come HTML non sia un linguaggio di programmazione ma un semplice sistema di contrassegno, i cui tag vengono riconosciuti ed interpretati dai browser Web (Netscape, Ms Explorer, Opera, ecc). Questa caratteristica rende l' HTML un sistema facile da comprendere perchè non pressuppone alcuna conoscenza tecnica preesistente.

Non è comunque strettamente necessario avere delle approfondite conoscenze del linguaggio per costruire una pagina Web. Per costruire le pagine puoi usare due tipi di editor: gli Editor WYSIWYG (l'acronimo sopraindicato sta per: What You See Is What You Get, ed italianizzando significa che ciò che si vede sullo schermo è ciò che si ottiene in un browser Web) e gli Editor testuali (cioè che permettono di scrivere solo il codice direttamente in formato testo).
In altre parole gli editor WYSIWYG non visualizzano il codice HTML ma esclusivamente gli oggetti, le immagini ed il testo. In questo modo lo sviluppatore non si trova a lavorare su codice HTML ma sulla pagina così come verrà visualizzata dal browser: spostando oggetti con il semplice trascinamento del mouse, sfruttando layout predefiniti ecc. Il vantaggio di questo tipo di editor è evidente: lo sforzo di comprensione delle specifiche HTML è ridotto al minimo e il tempo di apprendimento è brevissimo. Molti programmi permettono di "scrivere" la pagina come se fosse un documento normale e poi traducono e salvano il documento in linguaggio HTML. Anche il Word e il Publisher permettono questo, oppure il Front Page e l'Adobe Page Mill che sono i programmi più completi attualmente in circolazione. Però questo tipo di editor non dà la possibilità di comprendere l'HTML e personalizzarne l'uso. Si corre, infatti, il rischio di creare siti fotocopia con un layout identico agli altri e, in presenza di errori che l'editor non riesce a risolvere, di non riuscire ad andare oltre ciò che il programma prevede.
Gli editor testuali permettono modifiche dirette sul codice HTML puro con possibilità di preview (anteprima) del risultato. Per facilitare la scrittura del codice mettono a disposizione comandi preconfezionati attivabili con semplici click. L'utilità maggiore di questi strumenti è la padronanza del codice HTML puro che riescono a comunicare agli utilizzatori. Il difetto maggiore è nell'apprendimento, che risulta più difficile rispetto agli editor WYSIWYG. Le pagine di questo sito sono scritte proprio con un editor testuale, l'Ace Expert 3.

Senza avere la pretesa di una vera e propria guida all'HTML, questa pagina è solamente una breve introduzione al codice. Seguirà quindi una breve spiegazione dei TAG principali. Puoi utilizzare il codice delle finestre successive usando "copia e incolla". Se invece vuoi approfondire l'argomento, puoi trovare una guida completa sul sito HTML.It.

I principali TAG HTML :

Struttura di un documento HTML:

Il tag <BODY> è utilizzato, oltre che per fornire al browser indicazioni sulla posizione degli oggetti nel documento, anche per impostare vari attributi di visualizzazione per il documento. Vediamo quali:
BGCOLOR: l'attributo BGCOLOR imposta un colore unitario di sfondo. La sintassi corretta è la seguente: <BODY BGCOLOR="red">
E' possibile sostituire al nome in inglese, valori esadecimali. Per esempio, il colore rosso (red) si sostiuisce in questo modo: <BODY BGCOLOR="#ff0000">
L'utilità dei colori esadecimali si ha laddove non si vuole un colore standard ma sfumato o con diversa tonalità. I più diffusi editor HTML prevedono palette per la definizione di colori esadecimali, mentre Paint Shop Pro fornisce, oltre al colore, anche il corrispondente valore esadecimale da copiare/incollare.
BACKGROUND: ha una funzione simile a BGCOLOR, ma mentre il secondo mostra un tinta unica del colore, il primo visualizza sullo sfondo un'immagine in formato grafico .gif o .jpg, ripetendola per tutto il documento.
Esempio: <BODY BACKGROUND="sfondo.gif"> (sfondo.gif deve essere un file grafico posto nella stessa cartella del file html).
Se non stabilito diversamente il colore del testo del documento è nero, in quanto i browser assegnano quel colore di default. Grazie all'attributo TEXT è possibile assegnare al testo un colore diverso dal nero. Questa la giusta sintassi:
<BODY BACKGROUND="sfondo.gif" TEXT="red">
Anche in questo caso i colori possono esprimersi in nomi o valori esadecimali. All'interno del documento è possibile marcare parte del testo in colori differenti da quello impostato su TEXT.
Se non stabilito diversamente il colore dei link (non ancora visitati) è blue. Grazie all'attributo LINK è possibile definire colori differenti:
<BODY BACKGROUND="sfondo.gif" LINK="red">
Tutti i link della pagina non saranno più blue ma rossi (red). Tale colore può essere espresso in valori esadecimali.

Paragrafo e testo:

Il tag <P> definisce un nuovo paragrafo del testo indicando al browser che lo stesso deve rimanere su una nuova riga ed essere posizionato a destra, a sinistra o al centro. Se non specificato oltre, il tag P allinea il testo di default sulla sinistra. Per indicare altri tipi di posizionamento esistono attributi specifici:
<P ALIGN=left> : definisce un paragrafo e allinea sulla sinistra (left).
<P ALIGN=right> : definisce un paragrafo e allinea sulla destra (right).
<P ALIGN=center> : definisce un paragrafo ed allinea al centro (center).
<BR> è un tag di interruzione di riga. Ha un funzionamento simile al paragrafo visto in precedenza, ma se ne discosta perchè non inizia un nuovo paragrafo. In altri termini la sua funzione è simile alla pressione del tasto "invio" della tastiera. Va usato singolarmente senza tag di chiusura.
L'elemento DIV viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. L'attributo ALIGN è fondamentale a questo scopo.
<DIV ALIGN=left> </DIV> : sposta gli elementi contenuti tra i suoi tag sulla sinistra.
<DIV ALIGN=right> </DIV> : sposta gli elementi sulla destra.
<DIV ALIGN=center> </DIV> : sposta gli elementi in posizione centrale.
Le linee orizzontali sono un ottimo strumento per dividere parti del documento e rendere il testo più leggibile. La sintassi necessaria al loro inserimento in un documento HTML è la seguente:
<HR align="CENTER" size="2" width="400" color="Red" noshade> .

Elenchi puntati e numerati:

Gli elenchi rappresentano uno dei modi più diffusi per organizzare informazioni all'interno di siti Web. Una delle loro caratteristiche principali è sicuramente quella di fornire un quadro chiaro e sintetico dell'argomento trattato. HTML mette a disposizione diversi tipi di elenchi che di seguito andiamo a trattare singolarmente.
Elenchi ordinati (numerati) : gli elenchi ordinati sono costiuiti da un singolo tag di apertura e chiusura <OL> </OL> e tanti tag di apertura per quante sono le voci di menu <LI>.
Gli elenchi non ordinati funzionano in modo simile a quelli ordinati. La differenza di fondo è che le risorse indicizzate non sono legate da stretti rapporti di successione gerarchica, per cui non sono previsti elenchi progressivi quali numeri o lettere.
Gli elenchi non ordinati (o puntati) si compongono di un tag unico di apertura e chiusura <UL> </UL> e tanti tag di elenco per quante sono le voci da indicizzare <LI>.

Tabelle:

La larghezza e l'altezza complessiva di una tabella vengono indicate all'interno dell'attributo TABLE, il quale appunto è quello che deve aprire e chiudere una tabella. Le dimensioni vengono definite con WIDTH (larghezza) e HEIGHT (altezza) e possono essere espresse in pixel o in percentuale della pagina:
<TABLE WIDTH=500> </TABLE> : 500 pixel (larghezza fisssa)
oppure
<TABLE WIDTH=50%> </TABLE> : 50% della pagina (larghezza variabile a seconda della risoluzione video del monitor).
l'attributo TABLE genera la tabella mentre con <TD> </TD> si definiscono le colonne presenti all'interno di tale tabella.
Ogni coppia <TD> </TD> inserisce una nuova colonna all'interno della tabella.
<TR> </TR> invece delimitano le righe della colonna, e all'interno di una riga possono trovarsi varie colonne.
Ogni riga o colonna possono avere una larghezza fissa impostata con WIDTH, un colore di sfondo impostato con BGCOLOR, allineamento testo orizzontale e verticale (ALIGN e VALIGN).

Immagini e link:

Un ipertesto è un modo di formattare i documenti in forma non sequenziale. Per comprendere questa caratteristica si pensi ad un libro cartaceo che si struttura in: indice, capitoli e glossario. Ha, dunque, una struttura sequenziale nel senso che si legge l'indice per passare ai capitoli (dal primo all'ultimo) e terminando con il glossario dei termini. Il lettore, in questo caso, ha un percorso di lettura che lo porta necessariamente a leggere il primo capitolo per giungere all'ultimo. Con gli ipertesti questa struttura sequenziale cessa di esistere grazie ai collegamenti ipertestuali (link) che permettono di leggere il documento senza seguire necessariamente un ordine sequenziale. La peculiarità di saltare da un punto all'altro del documento è tipica del WWW, dove spesso seguendo un documento si passa da un sito all'altro senza soluzione di continuità.
I documenti HTML sono degli ipertesti il cui funzionamento è in massima parte dovuto agli HyperLink o ancoraggi, il cui tag specifico è <A>.
<A HREF>
L'elemento <A> (la A sta per Anchor) ha bisogno di un tag di apertura e chiusura e al suo interno è possibile inserire testo, immagini o altri elementi multimediali.
Perchè funzioni, l'elmento A deve essere associato ad altri attributi. Il più importante di questi è HREF (abbreviazione di Hypertext Reference) contenente l'URL o la pagina da raggiungere. Questa la sintassi:
<A HREF="http://www.virgilio.it/">Visita Virgilio</A>
Nel codice sopra citato cliccando sul testo "Visita Virgilio" (compreso tra i tag A in apertura e chiusura) si raggiunge l'URL http://www.virgilio.it/ indicato dall'attributo HREF.
E' possibile sostituire al testo un'immagine con effetto identico.
HREF può contenere sia link a risorse esterne (come in questo caso) ovvero link ad altri documenti dello stesso sito. Per esempio, se ci troviamo nella pagina 1.htm e vogliamo inserire un link alla pagina 2.htm presente nella stessa cartella, il codice corretto è:
<A HREF="2.htm">Clicca qui per raggiungere la nuova pagina</A> .

Il linguaggio JAVASCRIPT :

Javascript è molto semplice da imparare per chi già conosce linguaggi di programmazione simili come il C++ o Java, ma non è neanche difficile per chi si approccia per la prima volta a questo linguaggio data la sua semplicità sintattica e la sua maneggevolezza. Tuttavia ciò può rappresentare un'arma a doppio taglio perché la semplicità si gioca anche su una disponibilità limitata di oggetti per cui alcuni procedimenti, all'apparenza molto semplici, richiedono script abbastanza complessi. Il Javascript fa parte dei linguaggi interpretati: sono quei linguaggi che risultano molto simili all'HTML, ma hanno potenzialità maggiori perché consentono di effettuare controlli e operazioni complesse, vengono inviati in file ASCII, quindi con codice in chiaro che viene interpretato ed eseguito riga per riga dal browser in modalità runtime.
Perchè usare Javascript ? Perchè è un linguaggio che permette alle pagine html di diventare dinamiche e attive. Attivato da eventi come il passaggio del mouse, form, moduli, è in grado di attivare cambiamenti d'immagini come i rollover, di eseguire calcoli per il controllo dei moduli, di aprire finestre del browser con contenuto variabile a seconda del tipo di browser o dell'utente.

Struttura di uno script:

Le variabili sono dei nomi simbolici che servono ad inviduare delle locazioni di memoria in cui possono essere posti dei valori. In Javascript le variabili vengono create con la dichiarazione "var", attribuendole anche nessun valore, ma anche semplicemente all'atto di assegnazione di un valore (ad esempio x=15 crea automaticamente una variabile numerica). La dichiarazione var su più variabili va ripetuta per ognuna oppure va fatta con un'interruzione di linea. Vi sono variabili globali e variabili locali. I due differenti tipi sono generati da esigenze diverse in quanto le variabili locali hanno una vita brevissima ed esistono finché opera la funzione, alla chiusura della parentesi vengono distrutte liberando memoria, mentre le variabili globali sono dei contenitori che durano per tutta la durata della pagina e servono a veicolare dei valori tra le funzioni e tra gli script, ma anche tra le varie pagine o al server. A questo punto vi chiederete perché utilizzare variabili locali, in quanto quelle globali sono più comode, ma la necessità del loro utilizzo sta nella modularità: le variabili locali rendono uno script riutilizzabile anche in altre pagine HTML, soprattutto se salvato in un file esterno con estensione js.

Gli eventi sono utilizzati per richiamare delle istruzioni. Infatti lo script va eseguito in maniera sequenziale, ma per fare in modo da inserire la dinamicità e l'interattività occorre che questo resti caricato in memoria e venga attivato o richiamato solo quando si verificano particolari situazioni come il passaggio del mouse, il caricamento di un documento, ecc. Il problema della conciliazione con le funzioni sta nel fatto che ad un evento può essere associata una sola istruzione, ma il più delle volte l'associazione è fatta con un blocco di istruzioni e, quindi, con le funzioni che prendono il nome di handler o gestori di eventi. Gli eventi, per poter interfacciare HTML con Javascript, non vengono definiti nel tag SCRIPT (tranne che in qualche caso), ma sono inseriti all'interno dei tag HTML: il browser compatibile con Javascript incontrando un evento lo interpreta e lo attiva.

Esempio:

Il linguaggio Javascript è un linguaggio orientato agli oggetti e quindi bisogna prima conoscere la gerarchia e le caratteristiche di ogni oggetto, ha una sua grammatica con delle regole ben precise, e dei gestori di eventi. Qualsiasi elemento attivo, cioè in movimento, di una pagina HTML è una funzione Javascript oppure un'Applet Java che, sebbene abbiano un nome simile, sono completamente diversi.
Se vuoi imparare la programmazione in Javascript puoi seguire ottimi corsi on-line presenti su vari siti oppure cercare delle funzioni già pronte e disponibili gratuitamente nel web. Ti consiglio di iniziare da HTML.It direttamente alla pagina Corso Javascript di I.Valdelli.