INTRODUZIONE AD HTML

Transcript

1 INTRODUZIONE AD HTML I Frames ovvero Le cornici. Nelle lezioni precedenti abbiamo imparato a creare il nostro sito facendo uso di testo, immagini, links e meta comandi. Pochi e semplici ingredienti per realizzare il proprio sito, i più impazienti potranno saltare alla lezione 10 dedicata alla pubblicazione in rete del lavoro svolto fino a questo momento. Gli altri proseguiranno con questa lezione leggermente più complessa delle altre dedicata ai frames. Se il sito è formato da diversi argomenti, presto si avvertirà la necessità di usare un menù, sia per agevolare la navigazione che per dare subito l'idea di quali siano i contenuti trattati, per fare questo si ricorre alla tecnica dei frames Frames o cornici. Si tratta di suddividere la finestra principale del browser in modo tale che nella stessa ci siano due o più finestre. Quante e come disporle dipende soltanto da noi, dal nostro progetto e dalla sua organizzazione. Non esistono limiti se non quelli del buon gusto e della praticità poi di navigazione. In moltissimi casi sono sufficienti due sole finestre, quindi due frames, uno laterale o superiore dove inserire il menù e l'atro la vera e propria finestra di navigazione, quella principale. Per dare meglio l'idea vediamo un paio di esempi: varie voci del Menù Finestra Principale Con menù laterale, oppure: varie voci del Menù Finestra Principale

2 Con menù superiore. Quale adottare dipende solo da come si è deciso di organizzare il sito, in ogni caso bisognerà creare una terza nuova pagina html che ha il solo scopo di richiamare le altre due, facendo in modo di visualizzarle all'interno della stessa unica finestra; di solito la pagina index.html, la pagina iniziale del sito. Per prima cosa si preparano le due pagine: menu.html e principale.html, potete adoperare qualsiasi altro nome, l'importante ricordarsi di cambiare i riferimenti laddove io adopererò questi. Nella pagina index.html, subito sotto il tag </head>, inserite il nuovo elemento (tag) che serve per dichiara una struttura a frames : <frameset> L'elemento <FRAMESET> è uno di qui tags che da soli non dicono niente, necessita di uno dei suoi due attributi: ROW S o COLS che servono rispettivamente per suddividere la finestra in righe o in colonne. Al suo interno può contenere annidati altri elementi, quali altri <FRAMESET> nel caso di suddivisioni multiple e complesse, oppure <FRAME> e/o <NOFRAME>. Supponendo di dover dividere la finestra in modo verticale adopereremo: <FRAMESET COLS="25%, 75%"> </frameset> Assegnando in questo caso il 25% dello spazio al frame piccolo per il menu, ed il restante 75% alla finestra principale, potremo adoperare anche valori fissi espressi in pixel nel caso in cui si debbano rispettare delle misure ben precise senza mantenere le proporzioni in base alla risoluzione del visitatore. Una volta stabilite nel frameset le dimensioni della suddivisione, si dovranno richiamare i due files preparati precedentemente: 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, più o meno utili e necessari, due sono indispensabili: name che identifica il nome del frame, in modo da visualizzare un link proveniente da un frame diverso, e src che invece richiama la pagina html vera e propria. Dal momento che avremo una divisione, dovremo decidere se la cornice divisoria deve essere visibile oppure no, se poi il contenuto del frame menù fosse piuttosto ricco di voci, dovremo prevedere anche un eventuale barra di scorrimento verticale, tutti questi parametri sono opzionali e dipendono soltanto dalle nostre intenzioni, a questo proposito vi rimando alla mia guida html alla voce frame s, per il momento quello che ci serve è una struttura di questo tipo: <html><head><title>struttura per frames</title></head> <frameset cols="25%, 75%"> <frame name="menu " src="menu.html" scrolling="auto"> <frame name="principale " src="principale.html" scrolling="auto"> </frameset> </html>

3 Salvate la pagina col nome index.html al suo interno il codice sopra, richiamatela all'interno del browser, se avete preparato precedentemente i due files: menu.html e principale.html questi saranno visualizzati contemp oraneamente, uno di fianco all'altro e nella stessa finestra. Ricordatevi i nomi che avete assegnato ai vostri frames, e per nomi intendo quelli specificati nell'attributo name, saranno questi nomi che se dichiarati all'interno dell'attributo target di un link, decideranno su quale dei due frames aprire il link associato. Difficile? Un esempio chiarirà sicuramente meglio. Se avete deciso di avere due frames è molto probabile che uno di questi due debba fare funzioni da menù, i links di questo menù dovranno però aprire la pagina ad essi associata, nella finestra principale. Per fare si che questo avvenga si dovrà aggiungere al link stesso l'attributo target (bersaglio) specificando il nome del frame (target) sul quale aprire il link richiamato, quindi: <A HREF="nomepagina.html" target=" principale"> Questo link ha in più rispetto a quelli visti nella lezione sui links, l'attributo target Adesso ha ragione di esistere, visto che abbiamo una struttura con più di una sola finestra, possiamo infatti decidere su quale di queste finestre aprire il link, specificando semplicemente il nome del frames nell'attributo target. C'è anche la possibilità di aggiornare contemporaneamente due frames cliccando su un solo links, oppure aprire il link su una nuova finestra del browser. Lasciate da parte per il momento queste possibilità, è sufficiente sapere che esistono, una volta poi acquisita una certa dimestichezza alla voce F.A.Q di questo mio sito, troverete ulteriori informazioni per una gestione ottimizzata dei frames. 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, non ho mai capito il motivo, forse hanno incontrato problemi dovuti ad una errata pianificazione degli stessi, personalmente li trovo molto utili e facili da gestire, in certi casi sono addirittura l'unica soluzione possibile. Nella prossima sezione vedremo le tabelle, che a differenza di quanto potrebbe sembrare dal nome, non servono solo per impaginare dati, ma anzi, spesso adoperate per scopi completamente diversi, come il posizionamento degli elementi quali testo ed immagini; in modo tale da disporli secondo precisi schemi e pianificazioni..

4 Le Tabelle. Nelle lezioni precedenti abbiamo imparato a creare un sito, siamo in grado di suddividerlo in frames, adesso però ci accorgiamo che non è per nulla facile, con le nostre conoscenze, riuscire a posizionare gli elementi che formano la pagina così come ci eravamo preposti. I metodi più evoluti prevedono l'uso dei CSS ovvero Cascading Style Sheet ma al momento non ci occuperemo di questa tecnica, affronteremo invece il problema in modo tradizionale, facendo uso delle tabelle. Le tabelle, contrariamente a quanto si potrebbe pensare, non servono solo per ordinare i dati, servono anche come contenitori, di testo e di immagini, ovviamente se lo scopo è quello di fare da contenitore per posizionare i vari oggetti, dovremo rendere la tabella invisibile in modo da non rovinare l'aspetto grafico della pagina. vediamo come si crea una semplice tabella: Questo è l'elemento che dichiara una tabella, da solo dice poco o niente, necessita di altri elementi, almeno due:<tr> e <TD> che si trovano annidati al suo interno e che servono rispettivamente per suddividere la tabella in righe e o in colonne. Intere tabelle possono poi essere a loro volta contenute in celle di altre tabelle, quindi nidificate ancora una volta. Inizia mo supponendo di volere una tabella con una sola cella, questa la definizione: <td> qui andrà messo il contenuto della tabella </td> 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 adesso una tabella con due celle affiancate, praticamente due colonne, sarà sufficiente affiancare due elementi <TD> <td> cella sinistra </td><td> cella destra </td> Questo il risultato : cella sinistra cella destra

5 Con la stessa logica si possono aggiungere righe e celle, quindi: <td> cella alto sinistra </td><td> cella alto destra </td> <td> cella basso sinistra </td><td> cella basso destra </td> Questo il risultato grafico: cella alto sinistra cella alto destra cella basso sinistra cella basso destra Lo definirei abbastanza semplice oltre che logico, quindi facile da capire e gestire. Spesso però le tabelle non sono regolari come questa, c'è bisogno di avere colonne irregolari con magari diverse celle di lato e o viceversa. Questo accade molto spesso quando l'uso della tabelle non si limita alla semplice tabulazione e raccolta di dati, ma adoperato come contenitore di oggetti quali: immagini, applets, testi, ecc.ecc. che formano la pagina stessa. Vediamo allora come creare tabelle particolari: I due attributi: ROWSPAN e COLSPAN, servono rispettivamente per occupare più di una sola cella sia in orizzontale che in verticale, come tali sono applicabili al solo elemento o tag <td>. 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: <td> cella alto sinistra </td><td> cella alto destra </td> <td colspan="2"> questa cella occupa lo spazio di due celle </td> Questo il risultato grafico: cella alto sinistra cella alto destra questa cella occupa lo spazio di 2 celle Allo stesso modo volendo invece occupare più righe di una tabella regolare, si adopererà row spa n specificando il numero di righe da occupare, che nel nostro caso potrà essere al massimo 2: <td rowspan="2"> questa cella occupa 2 righe </td><td> cella alto destra </td> <td> cella basso destra </td>

6 Questo il risultato grafico: questa cella occupa 2 righe cella alto destra cella basso destra Combinando questi attributi, è possibile ottenere una struttura ottimale, tutto dipende da come e cosa vogliamo impaginare. E' vero che in qualsiasi momento potremo aggiungere e togliere righe e colonne, ma se abbiamo le idee chiare in fase di creazione, sarà tutto molto più semplice. Supponendo di volere un tipo di impaginazione stile giornale quotidiano: testata, colonne, ; questo il codice: <table > <td colspan="3"></td> <td> </td> <td> </td> <td> </td> <td colspan="3" align="center"></td> questo il risultato: Tutto il testo inserito all'interno degli elementi <td> seguirà l'impaginazione dettata dalla struttura della tabella stessa, la tabella in questo modo risulta essere dinamica, modificherà le proprie dimensioni adattandosi perfettamente alla lunghezza dei testi: Il bordo potrebbe risultare fastidioso, oppure per qualche strano motivo lo si potrebbe preferire più vistoso, uno degli attributi dell'elemento <TABLE> serve proprio a questo, si tratta di: border che se imp ostato a zero non produce alcun bordo, viceversa è possibile specificarne la sua larghezza. Questo sotto un esempio con bordo a zero:

7 <table border="0"> Mentre questo, lo stesso esempio con bordo a 5: <table border="5"> Oltre al bordo, nell'elemento <TABLE> è possibile specificare quanto spazio lasciare fra le singole celle: cellspacing ed anche quanto spazio lasciare fra il bordo e i dati all'interno della singola cella: cellpadding. Se non vengono specificati valori, i due attributi assumono come valore di default: 2. <table border="1" celspacing="10" celpadding="8" >

8 E' anche possibile avere uno sfondo colorato o recante un motivo grafico. Gli attributi da adoperare sono: bgcolor=" nome in inglese del colore" per il colore, o background=" nome dello sfondo completo di estensione gif o jpg" per lo sfondo. Ovviamente laddove si adopera un colore a tinta unita, non sarà possibile adoperare anche uno sfondo e viceversa. Se inseriti all'interno dell'elemento avranno effetto su tutta la tabella, è poi possibile adoperare colori e sfondi diversi anche nelle singole celle, in questo caso applicando gli stessi attributi di table ai singoli elementi <TD>. <table border="1"> <td colspan="3" bgcolor="red"></td> <td bgcolor="green"> </td> <td bgcolor="silver"> </td> <td bgcolor="yellow"> </td> <td colspan="3" bgcolor="blue"></td> Sono molti altri gli attributi supportati dalle tabelle, alcuni sono proprietari dei soli browser IE, altri sono talmente rari che difficilmente avrete modo di farne uso, quelli che invece si adoperano con facilià sono : ALIGN con i parametri: right, left, center, justify che servono per allineare il contenuto delle celle rispettivamente a: destra, sinistra, centro, giustificato. w idth 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 lunghezza. Per tutti gli altri, che sono certo al momento servirebbero soltanto a confondervi, potete fare riferimento alla mia guida html.

9 Con questa lezione abbiamo imparato ad impaginare dati e oggetti con l'ausilio di tabelle. Nella prossima lezione vedremo i moduli, meglio conosciuti come: "form" che servono a creare questionari o semplici moduli per interagire direttamente col visitatore del nostro sito.