Minimo indispensabile per redarre un documento HTML
(breve guida)
Premessa: le pagine HTML sono files ASCII scritti anche con editor Dos, e non necessitano di compilazione, aventi estensione .HTM (o .HTML nei sistemi che non hanno limiti di lunghezza del nome e del tipo del file).Vi sono i TAGS che i browsers (i vari Netscape, Internet Explorer ecc..) leggono e interpretano secondo le specifiche del linguaggio HTML.
Quasi tutti i TAGS (come vedremo di seguito) hanno anche la corrispettiva "chiusura". Esempio:
<HTML> apertura documento HTML, </HTML> (notare lo slash / ) chiusura documento HTML.
Menù rapido alla breve guida HTML:
Tags essenziali
Tags formattazione testo
Links
Immagini
I colori nella pagina web
Le liste
Le tabelle
Frames
Il tag MAP
I TAGS (quelli che proponiamo come minimo per redarre un documento):
Quelli che ogni pagina HTML deve avere !
<HTML>
<HEAD>
<TITLE> titolo documento (nella barra superiore - il titolo di questa pagina è "Breve guida HTML". Se provenite dal frame è "Coordinamento Nazionale R.S.U.") </TITLE>
</HEAD>
<BODY>
testo del documento (deve essere scritto all'interno della coppia <BODY> </BODY>) assieme agli altri TAGS che agiscono sulla formattazione del testo, ai vari links, e-mail, immagini ecc...
</BODY>
</HTML>
Ritorna menù rapido
Quelli che agiscono sul testo:
questa coppia di tags mostra il <B>testo in grassetto</B> e dopo la "chiusura" il testo ritorna normale (naturalmente i tags non verranno visualizzati)
questa coppia di tags mostra il <I>testo in corsivo</I> e dopo la "chiusura" ecc...
(una premessa per la coppia di tags <U>testo sottolineato</U>, previsto per i primissimi browsers, era stato in seguito eliminato nella versione 2.x di Netscape e nei manuali HTML per riapparire nelle versioni dei browsers più recenti)
si possono nidificare i tags. Mostra il <I><B>testo in corsivo-grassetto</B> solo corsivo</I> purché si rispettino le nidificazioni, es: <I><B> </B></I>
Questo tag manda a nuovo rigo <BR>
il testo che segue (normalmente il testo ritorna a nuovo rigo quando raggiunge il margine destro del documento)
Questa coppia di tags mostra <H2>
il testo a caratteri cubitali
</H2> a seconda della cifra che segue la lettera H e dove la cifra è compresa tra 1 e 6.Dove 1 corrisponde alla massima grandezza, 4 corrisponde all'incirca al carattere normale "tipo grassetto" e 6 è quasi illeggibile tanto è piccolo. Questa coppia di tags ha il difetto, o il pregio, di interrompere la frase e andare a capo rigo ponendo un'interlinea tra il rigo precedente e quello seguente senza dover usare un doppio <BR><BR>.
Per avere delle interlinee all'inizio e alla fine si può usare <P> all'inizio di un paragrafo e, se parte un'altro paragrafo, basta riscrivere <P> oppure chiudere con </P> .
Per modificare le dimensioni del carattere senza interrompere la riga si usa <FONT SIZE=n> testo </FONT> dove n è un numero da 1 a 7 compresi. Es.:
con <FONT SIZE=1> </FONT> - con <FONT SIZE=2> </FONT> - con <FONT SIZE=3> </FONT>
con <FONT SIZE=4> </FONT> - con <FONT SIZE=5> </FONT>
con <FONT SIZE=6> </FONT>
con<FONT SIZE=7></FONT>
e si può usare anche il grassetto, o altri tags, ottimo con <FONT SIZE=1> </FONT> se si deve ridurre al massimo lo scritto pur rimanendo leggibile.
Difatti con <FONT SIZE=1><B> questo tipo di testo ... </B></FONT> si ottiene:
questo tipo di testo minuscolo - QUESTO TIPO DI TESTO MAIUSCOLO.
Si può usare <BIG>per questo tipo di carattere</BIG> <STRONG>per questo tipo di carattere</STRONG> oppure <SMALL>per questo tipo di carattere</SMALL>.
Con
<FONT FACE="Arial,Helvetica">
Arial e Helvetica
</FONT>
e con
<FONT FACE="Times">
Times o TIMES
</FONT>
e con
<FONT FACE="Courier">
Courier
</FONT>
e con
<FONT FACE="Wingdings">
Wingdings (ci sarebbe scritto Wingdings)
</FONT>
e con tutti i tipi di caratteri che potrete trovare anche in Write di Windows (Netscape 2.x rimmarrà insensibile a questo tag mentre Internet Explore dalla versione 2.x visualizzerà le differenze).
Per centrare un titolo, una parola, una frase, una immagine, si usa:
<CENTER>
parola
frase
immagine
Quanto sopra si potrà scrivere così:
<CENTER>titolo<BR>parola<BR>frase<BR>immagine</CENTER>
La tabella ASCII standard (quella da 32 a 127) è quella comune a tutti i tipi di computer e sistemi operativi. Oltre si devono usare delle convenzioni HTML (in modo che siano leggibili da qualsiasi computer si colleghi al vostro documento). Tra il set di caratteri che sono oltre vi sono le accentate ì è é ò à ù che si scrivono rispettivamente ì è é ò à ù (notare il ; finale) ed altri ancora (all'URL che segue troverete la lista completa: http://www.uni-passau.de/~ramsch/iso8859-1.html
che io ho salvato per leggerla off-line). Altri importanti, secondo me, le virgolette " che si scrivono " e il segno º per primo secondo ecc.. che si scrive º.Anche lo spazio si deve scrivere in codice oltre al primo spazio in quanto se si programma scrivendo: rigo di prova
il browser lo mostrerà: rigo di prova.
Lo spazio (se ne può mettere anche molti di seguito) è scritto così: .
Un'altra coppia di tags interessante è <PRE> </PRE>. Se scriviamo un testo così:
<PRE>
questo rigo parte dalla prima colonna.
questo rigo parte dalla quinta colonna
questo rigo parte dalla terza colonna
ecc...
Notare l'allineamento a destra
</PRE>il fatto di averlo racchiuso da questa coppia di tag farà si che venga mostrato così com'è senza nessun altro tags vi debba necessariamente agire e creando anche una interlinea all'inizo e alla fine.
Se vogliamo inserire un commento a nostro uso all'interno del documento si deve scrivere: <! commento > (notare il punto esclamativo ! ).
Con <HR> si crea una linea orizzontale:
che si può ingrandire con <HR SIZE=10> :
o accorciare con <HR SIZE=10 WIDTH=65%>
dove con WIDTH=n si può usare qualsiasi n numero percentuale.
Ritorna menù rapido
I links, le e-mail e le immagini:
Per accedere ad un'altra pagina si scrive:
<A HREF="http://www.nome.server/nome.sito/nomefile.htm"> clicca qui </A>
e apparirà: non cliccare qui perché è un link di prova (se lo fai con Netscape ...) .
Se il documento da linkare è sullo stesso server e ancor di più nella stessa directory si scrive:
<A HREF="./nomefile.htm"> clicca qui </A>. Da notare che il ./ si potrebbe anche omettere, ma meglio di no in quanto indica al browser di cercare nella directory corrente.
Diversamente, se ci troviamo nella directory dir_radice/dir1/nomefile1.htm e vogliamo andare in un'altra directory (per caricare un'altra pagina web) nello stesso sito dir_radice/dir2/nomefile2.htm si deve scrivere:
<A HREF="../dir2/nomefile2.htm"> clicca qui </A>. Da notare il punto punto nel percorso ../ che funziona come il comando CD.. del Dos e nel percorso anche la nuova directory ../dir2/ .
Se usate questa breve guida per scrivere dei documenti da inviarci non vi servirà cambiare directory in quanto il Vostro documento o eventualmente il seguito del Vostro documento (qualora fosse troppo lungo e voleste scriverlo in due o più pagine) e le immagini inserite nel Vostro documento saranno posizionate nella stessa directory di questa pagina. Discorso a parte per dei link indirizzati a pagine presenti su altri server che vorrete inserire nel Vostro documento (ci vuole l'indirizzo completo).
Mentre se vorrete cambiare directory da dir_radice/dir1/dir2/nomefile1.htm (come potete vedere vi sono più sub-directory) non vi basterà scrivere ../ (questo dipende anche da come è configurato il server che ospita tali pagine) e dovreste scrivere l'indirizzo completo (come riportato anche sopra):
<A HREF="http://www.nome.server/dir_radice/dir3/nomefile2.htm"> clicca qui </A>
o meglio ancora con <A HREF="../../dir3/nomefile2.htm"> clicca qui </A>,
si può anche usare ../../../ ecc..
Per andare in un punto da Voi stabilito del documento:
<A HREF="./questapagina.htm#vaiavanti"> clicca qui </A> (notare #vaiavanti di seguito al percorso),
a cui seguirà:
<A NAME="vaiavanti"></A>
nel punto al quale il link deve portare.
Si può anche linkare un punto stabilito in un'altra pagina. Basterà cambiare il percorso,
da ./questapagina.htm#vaiavanti
a ./altrapagina.htm#vaialtrapagina
e ancora http://nome.server/nome.sito/paginaweb.htm#vaipagina
Ritorna menù rapido
Per mettere una e-mail nel Vostro documento in modo che un utente cliccandoci vi possa spedire un messaggio, si scrive:
<A HREF="mailto:mio.indirizzo@nome.server"> la mia e-mail </A>. Importante il mailto: .
Ritorna menù rapido
Per inserire una immagine nel Vostro testo si scrive:
<IMG SRC="./immagine.gif"> senza chiusura. Naturalmente nel caso precedente l'immagine (gif o jpg le più riconosciute dai browsers in circolazione o perlomeno dai browsers più usati) deve essere nella stessa directory del testo in cui è inserita.
Se l'immagine non prende, in larghezza, tutta la pagina potrete scrivere del testo accanto ad essa con: <IMG SRC="./immagine.gif" ALIGN= LEFT>. Testo a destra dell'immagine in questo caso oppure a sinistra con RIGHT . Facciamo un esempio. Carichiamo l'immagine rsu.gif a destra e scriviamoci a sinistra (alla Vostra sinistra quardando il monitor) qualcosa:
<IMG SRC="./rsu.gif" ALIGN= RIGHT> <B><BR><BR><BR><BR><BR>questo testo dovrebbe apparire in grassetto a sinistra dell'immagine (l'immagine sarà alla Vostra destra guardando il monitor) e il testo, proseguendo in basso oltre l'immagine ricoprirà l'intero rigo. Scrivo qualcosa per far proseguire questo rigo ...</B> :
questo testo dovrebbe apparire in grassetto a sinistra dell'immagine (l'immagine sarà alla Vostra destra guardando il monitor) e il testo, proseguendo in basso oltre l'immagine ricoprirà l'intero rigo. Scrivo qualcosa per far proseguire questo rigo in modo che si possa notare come si comporta una volta raggiunta la fine dell'immagine ...
Altro uso di una immagine è farle fare da link:
<CENTER><A HREF="http://www.server.ospite/web.page/pagina.htm"><IMG SRC="./rsu.gif" BORDER=5></A></CENTER> . Sarà visualizzata l'immagine e se ci andate sopra con il mouse e cliccate vi porterà alla pagina desiderata (BORDER=n è un tag per mettere un bordo largo n intorno all' immagine - di solito per far vedere che è un link). Così:
Si può cliccare sull'immagine per farne apparire un'altra (in un'altra pagina però):
<A HREF="./altra_immagine.gif"><IMG SRC="./rsu.gif" ALIGN=LEFT></A> .
La pagina che visualizzerà la nuova immagine (in questo caso sempre rsu.gif) sarà una pagina virtuale creata dal browser, perciò usare la funzione "indietro" del Vostro browser per tornare in questo punto della pagina (se vorrete cliccare sull'immagine naturalmente).Con <BODY BACKGROUND="./rsu.gif"> della coppia di tag al cui interno si scrive il testo del documento ( <BODY> </BODY> ) si metterà l'immagine rsu.gif come sfondo del documento stesso. Se l'immagine sarà abbastanza grande coprirà l'intero sfondo. Se sarà piccola si ripeterà tante volte da coprirlo tutto (come nello sfondo di Windows). Attenzione alla colorazione dell'immagine nello sfondo e al colore del testo (i colori li vedremo più avanti) perché potrebbe risultare un testo illeggibile.
Se scrivete male il percorso e/o nome dell'immagine da caricare nel vostro documento o l'immagine non è presente, vi apparirà questa figura:
che può essere diversa nella grafica a seconda del browser usato.Se volete salvare un'immagine da una pagina web non dovete far altro che cliccare con il tasto destro del mouse sull'immagine e scegliere l'opzione "salva ...".
In questa breve guida è stata usata una sola immagine: rsu.gif, che potrete salvare assieme al documento per la lettura off-line.
Una immagine di grandezza 500x500 può essere ridotta nella visualizzazione a (es.) 250x250 con WIDHT e HEIGTH così: <IMG WIDTH=250 HEIGHT=250 SRC="./immagine.gif">. La stessa immagine rsu.gif presa ad esempio più sopra che è 150x150x256 colori può essere ridotta a 75x75 con <IMG WIDTH=75 HEIGHT=75 SRC="./rsu.gif">. Esempio:
È comunque consigliabile ridurre fisicamente l'immagine per ridurre i bytes che la compongono e quindi anche il tempo di caricamento.
Vi consiglio l' ottimo prg shareware Paint Shop Pro, per ridurre le immagini o ingrandirle (con resize) funzioni di foto-ritocco e altro, che potrete prelevare all'URL http://www.jasc.com/pspdl.html
. Versioni per Windows 3.1x/NT3.51 o Windows 95/NT4.0.Sopratutto nei casi dei links, e-mail, immagini, ma anche per gli altri tags, la mancanza di uno di questi caratteri < o > o le virgolette " fa si che il browser non visualizzi quanto precede o segue, con tutte le complicazioni del caso. Ricontrollare sempre la sintassi dei tags quando qualcosa non funziona come dovrebbe - malgrado browsers differenti (prendo a esempio Netscape e Internet Explorer soprattutto nelle versioni precedenti alle ultime) visualizzano sempre piccole differenze nel documento finito e scritto correttamente.
Ritorna menù rapido
I colori nella pagina web.
Cominciamo con l'intero testo. Con
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" ALINK="#00FF00" VLINK="#0000FF"> si ottiene:
Lo sfondo della pagina bianco (FFFFFF in notazione RRGGBB) con BGCOLOR.
Il testo in nero (che è già il colore di default) con TEXT e il codice colore 000000 per il nero.
Con LINK="#FF0000" si ottiene che tutti i links del documento saranno di colore rosso.
Con ALINK="#00FF00" il link si colora di verde nel momento in cui vi si clicca sopra.
Con VLINK="#0000FF" tutti i links già visitati saranno di colore azzurro.
Vi ricordo che di default i links sono, rispettivamente a quanto sopra, inizialmente di colore azzurro, rosso nel momento in cui vi si clicca (un attimo) e porpora quando sono già stati visistati. Nel tag BODY si possono inserire uno o più elementi per la colorazione del testo o dei links.
Anche se si è dato un colore al testo inizialmente con BODY TEXT=ec. o meno, si può cambiare il colore del testo in qualsiasi punto con
<FONT COLOR="#FF0000"> testo in rosso </FONT>.
Per tutti i codici dei colori in notazione RRGGBB vi consiglio l'URL RGB HEX TRIPLET COLOR CHART
composto da una immagine gif rappresentante colori e rispettivi codici (da salvare sul vostro hard disk, l'autore chiede una e-mail con un TANKS).
Ritorna menù rapido
Prima di continuare con le liste, le tabelle e i frame (le doppie o più finestre in una pagina) guardate pure la lista dei comandi HTML Bare Bones datata 7 ottobre 1995 (in italiano) salvata in precedenza su questo sito
oppure visitate l'URL della Bare Bones con la lista attuale (sempre in italiano) all'indirizzo http://werbach.com/barebones/it_barebone.html (.../it_barebone.html) .Le liste.
La (tri)-coppia di tag <UL> <LI> </UL> crea una lista non numerata:
<UL>
<LI> prima parte del testo della lista non numerata
<LI> seconda parte del testo della lista non numerata
<LI> terza parte del testo della lista non numerata
<LI> ecc..
</UL>
così:
- prima parte del testo della lista non numerata. Faccio proseguire questo rigo per far vedere come si comporta il ritorno a capo (senza aver usato nessun altro tag)
- seconda parte del testo della lista non numerata
- terza parte del testo della lista non numerata
- ecc..
<OL>
<LI> prima parte del testo della lista numerata
<LI> seconda parte del testo della lista numerata
<LI> terza parte del testo della lista numerata
<LI> ecc..
</OL>
così:
- prima parte del testo della lista numerata. Faccio proseguire questo rigo per far vedere come si comporta il ritorno a capo (senza aver usato nessun altro tag)
- seconda parte del testo della lista numerata
- terza parte del testo della lista numerata
- ecc..
<UL>
<LI> prima parte del testo della lista non numerata
<LI> seconda parte del testo della lista non numerata
<OL>
<LI> prima parte del testo della lista numerata nidificata
<LI> seconda parte del testo della lista numerata nidificata
<LI> terza parte del testo della lista numerata nidificata
<LI> ecc..
</OL>
<LI> terza parte del testo della lista non numerata
<LI> ecc..
</UL>
con questo risultato:
- prima parte del testo della lista non numerata. Faccio proseguire questo rigo per far vedere come si comporta il ritorno a capo (senza aver usato nessun altro tag)
- seconda parte del testo della lista non numerata
- prima parte del testo della lista numerata nidificata. Faccio proseguire questo rigo per far vedere come si comporta il ritorno a capo (senza aver usato nessun altro tag)
- seconda parte del testo della lista numerata nidificata
- terza parte del testo della lista numerata nidificata
- ecc..
- terza parte del testo della lista non numerata
- ecc..
Ritorna menù rapido
Le tabelle.
La coppia <TABLE> </TABLE> racchiude la tabella.
All'interno, la coppia <TR> </TR> racchiude ogni riga.
All'interno di ogni riga, la coppia <TD> </TD> racchiude ogni cella. All'interno di ogni cella ( e perciò all'interno di <TD> </TD>) si può inserire: testo, links, immagini, e-mail ecc.. e tutti i tags che agiscono sul testo.
esempio:
<TABLE>
<TR>
<TD>testo</TD> <TD>altro testo</TD><TD>immagine</TD>
</TR>
<TR>
<TD>secondo rigo<BR>altro testo</TD> <TD>immagine</TD><TD>link</TD>
</TR>
</TABLE>
risultato:
| testo | altro testo | |
| secondo rigo altro testo | | link: senza uscita |
Si può inserire un bordo tra le celle con <TABLE BORDER=n> dove n è un numero intero da un minimo di 1 a .... Io userò <TABLE BORDER=1> (che, salvo differenze tra vari browser, corrisponde a <TABLE BORDER>).
esempio:
| testo | altro testo | |
| secondo rigo altro testo | | link: senza uscita |
Si può centrare la tabella presa in esempio:
<CENTER>
<TABLE>
<TR>
<TD>
ecc..
</TD>
</TR>
</TABLE>
</CENTER>
| testo | altro testo | |
| secondo rigo altro testo | | link: senza uscita |
Si può centrare il testo, o altro, all'interno della cella (<TD> e </TD>) con <CENTER> e </CENTER>, ma questo l'ho già detto, cioè, di come si possa usare tutti i tags all'interno di una cella che agiscono su testo e altro...
Ogni cella prende le dimensioni di una immagine o della lunghezza di una colonna o righe di un testo. Per dimensionare le celle secondo un ordine stabilito si usa <TABLE WIDTH=n> dove n è un numero intero oppure <TABLE WIDTH="n%"> in percentuale dello schermo. Il tag WIDTH= si può usare anche all'interno della cella (all'interno di TD).
Si può allineare il testo con ALIGN=LEFT o RIGHT o CENTER oppure con VALIGN=TOP o MIDDLE o BOTTOM sia all'interno della coppia di tags <TR> </TR> (la riga) che all'interno di <TD> </TD> (la cella). Tutto questo, e altro, lo troverete nella guida Bare Bones indicata prima. Facciamo un esempio, usiamo un testo lungo in una cella e corto in altre ma allineato:
| questo testo oltre che prendere molte righe è lungo occupando molte colonne | a destra | in alto | normale |
| in basso | occupo molte colonne di questa cella per far notare l'allineamento a destra di quella sopra |
Quanto sopra è stato scritto così:
<TABLE BORDER=1> <TR><TD>questo<BR>testo<BR>oltre<BR>che<BR>prendere molte righe<BR>è lungo<BR>occupando<BR>molte<BR>colonne</TD><TD ALIGN=RIGHT>a destra</TD><TD VALIGN=TOP>in alto</TD><TD>normale</TD></TR>
<TR><TD VALIGN=BOTTOM>in basso</TD><TD>occupo molte colonne di questa cella<BR>per far notare l'allineamento a destra di quella sopra</TD></TR>
</TABLE>
Nidifichiamo delle celle all'interno di un'altra cella:
| cella A1 | cella A2 | cella A3 | |||
| cella B1 |
| cella B3 | |||
| cella C1 | cella C2 | cella C3 |
Praticamente si posiziona una tabella all'interno di un'altra tabella attivando la riga normalmente e inserendo una tabella (con TABLE) all'interno della coppia di tag TD:
<TABLE BORDER=1> <TR><TD><TABLE BORDER=1><TR><TD>sub-cella ecc...
ricordandosi di chiudere le celle (</TD>), le righe (</TR>), la sub-tabella e la tabella (</TABLE>>) con la successione dovuta.
Il testo nelle tabelle si può colorare all'interno di ogni cella con:
...
<TR><TD><FONT COLOR="FF0000">testo rosso</FONT></TD>ecc..
(le impostazioni del colore del tag BODY influenzano anche il testo delle tabelle sempre che questo non sia stato reimpostato come sopra).
Mentre il colore di sfondo dell'intera tabella si imposta nel tag TABLE:
<TABLE BGCOLOR="FFFF00" BORDER=1>.
Segue l'esempio (versioni inferiori alla 3.0 di Netscape Navigator e alla versione 2.0 di Internet Explorer non visualizzano il colore di sfondo nelle tabelle - non conosco tali limiti per altri browsers):
| testo rosso, sfondo giallo |
| testo azzurro, sfondo giallo |
Mentre con <TR BGCOLOR="FF0000" > si colora la riga intera,
e con <TD BGCOLOR="FF0000"> si colora la singola cella.
Esempio:
| testo nero, sfondo rosso | testo azzurro, sfondo di default |
Ritorna menù rapido
Proviamoci con i FRAMES (le doppie o più finestre).
Per visualizzare i frames innanzitutto ci vogliono browsers che li supportano (prendo l'esempio di Netscape Navigator e Internet Explorer che devono essere ambedue almeno nella versione 2.0). Per programmare due finestre bisognerà editare tre files: il primo, sull'esempio della pagina principale di questo sito, si chiamerà index.htm; il secondo index1.htm; il terzo homepage.htm.
Saremo interessati solo dal file index.htm con una sola eccezione per quanto riguarda il file homepage.htm, difatti i due files index1.htm e homepage.htm saranno programmati normalmente.
Il file principale index.htm non avrà il corpo del programma racchiuso dalla coppia di tags <BODY> </BODY> ma dalla coppia <FRAMESET> </FRAMESET>.
Il listato di index.htm:
-----------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> Coordinamento Nazionale R.S.U. </TITLE>
</HEAD>
<FRAMESET COLS=15%,*>
<FRAME NAME="hp1"
src="index1.htm"
scrolling="YES"
frameborder="NO">
<FRAME NAME="hp2"
src="homepage.htm"
scrolling="YES"
frameborder="NO">
<NOFRAMES>
<BODY>
<br><br>
<b>Sito del COORDINAMENTO NAZIONALE R.S.U.<br><br>
Se Le appare questa finestra è perché il Suo browser non supporta le specifiche del linguaggio HTML versione 3.x .<br><br>
Per proseguire:<br><br>
<A HREF="./homepage.htm">Pagina principale</A>
<br><br>
Per prelevare versioni nuove dei browser
<A HREF="http://www.netscape.com/comprod/mirror/
client_download.html">Netscape Navigator
</A>o
<A HREF="http://www.microsoft.com/ie/download/">
Internet Explorer
</A></b>
<br>
<br>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
-----------------------------------------------------------------------------
Passiamo alla spiegazione del listato (che non verrà mai mostrato a video salvo l'eccezione in cui il browser attivo non supportasse i frames benché index.htm sia parte integrante dell'indirizzo del nostro sito - il server che ci ospita, in mancanza del nome della pagina .htm da caricare, cerca automaticamente il file index.htm una volta digitato, nel nostro caso, l'indirizzo http://www.ecn.org/coord.rsu/).
Il corpo del listato è racchiuso, come abbiamo già detto, all'interno della coppia di tags <FRAMESET> </FRAMESET> con l'aggiunta delle istruzioni sulla grandezza delle due finestre e sulla loro disposizione, orizzontale o verticale:
difatti il rigo <FRAMESET COLS=15%,*> all'istruzione COLS=15%,* dice ai browsers che la interpreteranno di dividere lo schermo in due finestre verticali (COLS sta per colonne) invece che orizzontali (ROWS che sta per righe) indicando la grandezza delle finestre con COLS=15%,* dove 15% corrisponde al 15% della grandezza dello schermo per la prima finestra (posta alla Vostra sinistra sullo schermo, in alto se si è usato ROWS) e * (l'asterisco) indica che il restante campo di visualizzazione della finestra verrà occupato dalla seconda finestra (che sarà posizionata alla Vostra destra sullo schermo, in basso se orizzontale). Sarebbe stato uguale a scrivere COLS=15%,85% così come scrivere COLS=*,* dividerebbe lo schermo al 50% per ognuna delle due finestre.
La seguente parte del listato:
<FRAME NAME="hp1"
src="index1.htm"
scrolling="YES"
frameborder="NO">
Nei primi due righi si assegna un nome (variabile (!?) benché le variabili non esistono nell'HTML. Forse con gli applet JAVA...), in questo caso hp1, al file sorgente index1.htm che viene mostrato nella prima finestra. Il nome hp1 si potrà usare nelle due finestre come vedremo più avanti.
scrolling="YES" mostra e attiva le barre di scorrimento qualora il testo dovesse essere più lungo o più largo del campo video. Naturalmente scrolling="NO" si comporta all'esatto contrario.
frameborder="NO"> mostra la finestra senza bordo. Inutile ripetere il suo contrario.
la parte di listato
<FRAME NAME="hp2"
src="homepage.htm"
scrolling="YES"
frameborder="NO">
si occupa della seconda finestra associando il nome hp2 alla seconda finestra in cui verrà visualizzato il file homepage.htm.
Vi sono altre istruzioni che agiscono sulle finestre, e vi rimando alla guida Bare Bones, benché quanto sopra è quanto basta per la nostra pagina principale.
Tutto ciò che è racchiuso all'interno di
<NOFRAMES>
<BODY>
corpo visualizzato da browsers "datati" ...
</BODY>
</NOFRAMES>
non è indispensabile. Serve nel caso che la pagina venga richiamata con un browser "datato", che non supporta i frames cioè. In questo caso sarà mostrato a video quanto vi è inserito.
Passiamo ora al perché di hp1 e hp2.
Li useremo per visualizzare una pagina in una delle due finestre (normalmente si richiama una pagina con un link da una finestra per visualizzarla nell'altra).
Nel caso della nostra pagina principale, nel file index1.htm visualizzato nella finestra di sinistra, vi è una sorta di menù a icone che carica le pagine richiamate nella finestra di destra (mostriamo solo la sintassi dei link):
<A HREF="./homepage.htm" TARGET="hp2">testo o immagine</A>
<A HREF="./pagersu.htm" TARGET="hp2">testo o immagine</A>
<A HREF="./tbox1/box1.htm" TARGET="hp2">testo o immagine</A>
<A HREF="./tbox2/box2.htm" TARGET="hp2">testo o immagine</A>
ecc..
Dunque, per mostrare una pagina nella finestra di destra il cui nome è hp2, richiamandola anche da una pagina nella stessa finestra di destra, si aggiunge al tag del link l'istruzione TARGET="hp2" o TARGET="hp1" per visualizzarla nella finestra di sinistra.
Per visualizzare tre finestre (o più finestre, ma mostreremo l'esempio di tre finestre) bisogna inserire all'interno (o per meglio dire, di seguito) delle istruzioni per una delle finestre. Annideremo dunque all'interno di una finestra due finestre:
<FRAMESET COLS=15%,*>
<FRAME NAME="hp1"
src="index1.htm"
scrolling="YES"
frameborder="NO">
<FRAME NAME="hp2"
src="homepage.htm"
scrolling="YES"
frameborder="NO">
<FRAMESET ROWS=*.*>
<FRAME NAME="hp3"
src="pageter.htm"
scrolling="YES"
frameborder="NO">
<FRAME NAME="hp4"
src="pagequater.htm"
scrolling="YES"
frameborder="NO">
</FRAMESET>
ecc..
</FRAMESET>
Diverso è il caso in questo sito della pagina principale del Tool Box n.3. Vi sono tre finestre, ma quando si richiama dalla finestra hp1, che corrisponde al file index1.htm, la pagina principale del Tool Box n.3, si carica un'altro frame nella finestra hp2 (quella di destra) caricando il file toolbox3.htm che a sua volta richiama e visualizza due finestre orizzontali in cui vengono visualizzate le pagine pagine.htm e immagini.htm che chiameremo sopra e sotto. Quella sopra funziona da menù per il Tool Box n.3 e in quella sotto si può cambiare pagina cliccando i links di quella sopra. Mentre se si richiama un'altra pagina da hp1, la finestra hp2 mostrerà interamente la nuova pagina nascondendo le due finestre orizzontali del Tool Box n.3.
Ritorna menù rapido
In ultimo vi accenniamo brevemente al tag MAP. Su vari punti di una immagine si può inserire dei links. Passandoci sopra con il cursore del mouse possiamo vedere i vari links proposti in una unica immagine.
Di seguito un esempio di MAP:
listato:
<img src="rsu.gif" border=0 usemap="#map1">
<map name="map1">
<area href=../index1.htm shape=rect coords="0,0,75,75">
<area href=../rif.htm shape=rect coords="75,0,150,75">
<area href=../pagersu.htm shape=rect coords="0,75,75,150">
<area href=../mappa/mappa.htm shape=rect coords="75,75,150,150">
</map>
esempio del listato(su una immagine 150x150):
Abbiamo usato nel nostro sito MAP nel menù del frame di sinistra.
Su MAP e sugli altri tags nella versione HTML 3.2 potrete trovare tutto e molto di più alla pagina http://www.w3.org/pub/WWW/TR/REC-html32.html
oppure, molto meno, alla pagina http://home.rmci.net/sbj/sbj_htm.htm (sbj_htm.htm) - tutte e due in inglese.Possiamo chiudere questa breve guida con il consiglio di usare degli editor Html. Ne esistono molti, anche shareware, che oltre ad avere aiuti on-line e altro, permettono soprattutto di visualizzare la pagina creata caricando il Vostro browser preferito semplicemente cliccando su una barra di menù a bottoni o aprendo il menù a tendina del programma.
Se avete osservazioni per migliorare questa breve guida sono ben accettate. Se volete ulteriori informazioni (anche sugli editor), nei limiti della nostra conoscenza e del nostro tempo, inviate una e-mail all'indirizzo a fondo pagina della Redazione del sito.
Ritorna menù rapido
Aggiornamento pagina: 30 novembre 1998
Redazione internet Coord. Rsu