CODICI DI PROGRAMMAZIONE DEL LINGUAGGIO HTML

Codici di programmazione del linguaggio HTML

Di seguito verranno analizzati i principali TAG (codici di programmazione) del linguaggio HTML con esempi operativi.

TAG INIZIALI E BODY(contenuto visibile)

< >	Racchiudono i vari comandi (TAG), es. <HTML> è il tag di inizio della pagina HTML (detta anche pagina WEB).
< / >	L’inserimento di uno slash es. </HTML> indica la fine del tag. Nell’esempio si indica che la pagina HTML è conclusa.
<HTML> e </HTML>	Sono i tag di apertura e chiusura della pagina WEB.
<HEAD> **** </HEAD>	Al posto degli asterischi va inserita l’intestazione della pagina che comparirà sulla barra di stato del browser.
<BODY> ****</BODY>	Fra questi due tag va inserito tutto il contenuto visibile della pagina web.
<BODY TOPMARGIN= "**">	Al posto degli asterischi va inserito un numero che stabilisce la distanza del testo visibile dal margine superiore della pagina.
<BODY BGCOLOR= "#******">	Seleziona il colore dello sfondo della pagina. Al posto degli asterischi va inserito un codice esadecimale che indica il colore. (Cfr. la sezione dedicata al colore).
<BODY BACKGROUND= "***">	Al posto degli asterischi va indicato il percorso completo ma SENZA INDICARE LA LETTERA DELL’UNITA’ (URL) del file (in formato .JPG o .GIF) che serivirà come sfondo della pagina. Es. <BODY BACKGROUND= "IMG/SFONDO.JPG"> indica che il file "Sfondo.jpg" viene utilizzato come sfondo della pagina HTML.
<BODY TEXT= "#******">	Seleziona il colore del testo normale.
<BODY LINK= "#******">	Seleziona il colore delle parole che corrispondono a LINK.
<BODY ALINK= "#******">	Seleziona il colore delle parole che corrispondono al LINK SELEZIONATO.
<BODY VLINK= "#******">	Seleziona il colore delle parole che corrispondono al LINK già VISIONATO.

IL COLORE NELLE PAGINE html

Appare alquanto semplice stabilire i vari colori dei componenti e dello sfondo delle pagine WEB, basta assegnare ove richiesto (vedi tabella precedente) i codici esadecimali ai vari colori.

I codici esadecimali sono i seguenti:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e stabiliscono il valore di emissione dei tre colori primari:

R = rosso

G = verde

B = blu

permettendo la formazione di tutti i colori.

Ad esempio il nero è dato dalla assenza di emissione dei tre colori e corrisponde al valore #000000, cioè

R = 0

G = 0

B = 0.

Il rosso corrisponderà al valore #FF0000, cioè il rosso sarà emesso al massimo valore mentre gli altri colori non verranno emessi.

La seguente tabella riassuntiva aiuterà a scegliere i vari colori.

E’ anche possibile assegnare i vari colori con nomi inglesi: "BLUE", "RED" ...

INSERIMENTO DI IMMAGINI

Il tag permette di inserire una immagine nella pagina (si consiglia di inserire molte immagini anche di testi realizzati con altri programmi in modo da evitare una formattazione del testo molto precisa). Al posto degli asterischi va indicato il percorso ed il nome del file. In genere i file grafici suggerisco di inserirli in una directory "IMG" (immagini) quindi il percorso sarà il seguente:

<IMG SRC="IMG/PROVA.GIF">.

E’ possibile inserire file GIF (in tal caso i colori scuri potranno diventare trasparenti e tale effetto può in taluni casi risultare utile per far scomparire i bordi dell’immagine) o JPG (tutti i colori resteranno inalterati).

<ALIGN = "CENTER"> (o LEFT, RIGHT, MIDDLE, TOP, BOTTOM)

Stabilisce l’allineamento dell’immagine. Es.

Stabiliscono quali debbano essere (in pixel) le dimensioni dell’immagine.

IL TESTO

<P>	Linea di testo
<BR>	Vai a capo
<HR>	Riga orizzontale con i controlli ALIGN, WIDTH, NOSHADE (linea nera) SIZE, COLOR="#******"
</P>	Fine della linea di testo
<FONT FACE= *,*>	Stabilisce il font da utilizzarsi (si indica il font scelto e dopo la virgola un font alternativo qualora quello scelto non sia presente nel sistema) es. <FONT FACE= ARIAL,TIMES NEW ROMAN>
<B> inserire testo </B>	Il testo inserito sarà in grassetto.
<I> inserire testo </I>	Corsivo.
<U> inserire testo </U>	Sottolineato
<TT> inserire testo <TT>	Testo a spaziatura fissa
<H1> inserire testo </H1>	Titolo dalla dimensione H1 alla H6 (dal titolo più piccolo a quello con caratteri più grandi).
<FONT SIZE= "**">	Dimensione del font
<FONT COLOR= #******>	Colore del font
</FONT>	Termine dei tag che definiscono il font.
<CENTER> inserire testo </CENTER>	Il testo inserito sarà centrato nella pagina.
<PRE> inserire testo </PRE>	Il browser rispetterà al normale formattazione ma la visualizzazione del testo sarà tipo macchina da scrivere.
<UL> <UL> inserire testo <UL> inserire testo <UL> inserire testo <UL> inserire testo ... </UL>	Lista con dei punti-elenco
<OL> <OL> inserire testo <OL> inserire testo <OL> inserire testo <OL> inserire testo <OL> inserire testo ... </OL>	Lista numerata. È possibile scegliere vari tipi di lista: TYPE A = A,b,c,... TYPE a = a,b,c,... TYPE I = I,II,III, ... TYPE i = i,ii,iii, ... TYPE 1 = 1,2,3, ...

TABELLE

<TABLE>***</TABLE>	Tag di apertura e chiusura della tabella.
<TABLE BORDER= "**">	Dimensioni del bordo della tabella.
<TABLE CELLSPACING = "**">	Spazio fra le celle della tabella
<TABLE CELLPADDING = "**">	Spazio nelle celle fra il bordo e le parole o l’immagine contenuta.
<TR>	Inserisce una riga.
</TR>	Fine riga.
<TR ALIGN = ****> (CENTER, LEFT...)	Allinea il testo nella riga.
<TD>	Inserisce una cella.
</TD>	Fine cella.
<TD ALIGN = ****> (CENTER, LEFT...)	Allinea il testo nella cella.
<TABLE WIDTH=**>	Larghezza in pixel della tabella.
<TABLE HEIGHT=**>	Altezza in pixel della tabella.
<TABLE> <TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0> <TABLE BORDER=1> <TR> <TD><IMG SRC="img/roundred.gif" HEIGHT=14 WIDTH=14 ALIGN=CENTER></TD> <TD><A HREF="Manifesti.htm">I manifesti</A></TD></TR> <CENTER><TR><TD><IMG SRC="img/roundred.gif" HEIGHT=14 WIDTH=14 ALIGN=CENTER></TD> <TD><A HREF="guerra.htm">La guerra</A></TD></TR> <CENTER><TR><TD><IMG SRC="img/roundred.gif" HEIGHT=14 WIDTH=14 ALIGN=CENTER></TD> <TD><A HREF="letteratura.htm">La letteratura</A></TD></TR> <CENTER><TR><TD><IMG SRC="img/roundred.gif" HEIGHT=14 WIDTH=14 ALIGN=CENTER></TD> <TD><A HREF="arti.htm">Le arti figurative</A></TD></TR></table>	Esempio di applicazione dei codici precedenti: è la tabella della pagina index dell’ipertesto sul futurismo. Si tenga presente che si è realizzata una tabella di quattro righe a due colonne. Nella prima colonna vi è l’immagine "ROUNDRED.GIF", nella seconda sono situati dei link ad altre pagine HTML.

CREAZIONE DEI LINK

<A HREF="URL">***</A>	Crea un link, richiamabile dal testo inserito al posto degli asterischi. Il file a cui si fa riferimento è da indicare al posto della sigla URL. Es. <a href="html/1.htm"> si crea un link al file "1.HTM" che si trova nella cartella "HTML".
<IMG SRC="URL" WIDTH= HEIGHT=>	Incorpora nella pagina un'immagine (che attiva un link se cliccata), il cui indirizzo è da mettere al posto della sigla URL. Es. <a href="html/1.htm"> <img src="img/inizia.gif">. Con tale tag facendo click sull’imamgine "INIZIA.GIF viene attivato il link alla pagina "1.HTM".
<EMBED SRC="URL" WIDTH= HEIGHT=>	Inserisce nella pagina un link ad un file multimediale (es. audio o video). In ogni caso è possibile il link a file multimediali anche con il tag <A HREF="URL">***</A>.
<a href="#testo di riferimento"> testo che verrà visualizzato</a> (è il link di partenza) <a name="testo di riferimento"> testo che cerrà visualizzato</a> (costituisce il punto di arrivo)	Collegamenti al testo nella stessa pagina (ad esempio si può saltare ad un preciso paragrafo a partire da un indice). Un esempio: <a href="#prova">prova link</a> (è il link di partenza nell’indice) <a name="prova">Prova link</a> (è l’obiettivo del link)