0.0 -PREFAZIONE – CIÒ CHE SERVE PER REALIZZARE UNA PAGINA HTML
Ciò che primariamente servirà nell’applicazione di questi appunti è:
• Un editor di testo – preferibilmente il NOTEBOOK
• Un browser internet – INTERNET EXPLORER o NETSCAPE o Mozilla, ecc...
• Una connessione internet ad almeno 28.8 kbps [ma le fanno ancora???] tramite un qualsiasi fornitore di servizi (ISP – internet services provider). Per quanto riguarda l’editor di testo è consigliabile usare il NOTEBOOK ma è anche vero che troverete centinaia di software che vi permettono di creare pagina HTML. Alcuni sono semplicemente degli editor di testo finalizzati alla battitura dell’HTML e tranne qualche particolarità che li differenzia dal NOTEBOOK non hanno alcunché di speciale. Altri programmi invece sono pensati e realizzati in modo tale da permettervi di creare le pagine togliendovi l’onere di dover elaborare il codice HTML. Questi programmi detti WYSIWYG (what you see is what you get – quel che vedi è quel che ottieni) vi permetteranno di gestire le pagine in maniera istintiva.
Allora perché imparare l’HTML??
Semplice. Il sottoscritto s’è accorto che usando i suddetti programmi spesso e volentieri, dopo aver cambiato alcune cose qui e lì nella pagina, controllando il codice HTML era possibile trovare degli errori nei punti in cui erano stati effettuati i cambiamenti.
Sicuramente battersi il codice HTML tag per tag non è la cosa più entusiasmante del mondo tantomeno la più creativa ma per certo è la più affidabile per avere le cose fatte come si deve. Un consiglio che voglio dare prima di iniziare il “corso” vero e proprio è il seguente: prima di iniziare la realizzazione della vostra pagina HTML (soprattutto della prima) abbiate cura di esservi già procurati i files che vorrete inserire e prima d’ogni altra cosa di avere già sottomano il testo che sarà parte integrante delle stesse. I suddetti files, poi dovranno avere nomi possibilmente privi di spazii al loro interno.
Buon Lavoro
||STEBO||
1.0 - CAPITOLO I –I TAG FONDAMENTALI
Ogni pagina HTML è formata da tutta una serie di codici che permettono ai vari browsers di decodificare in maniera esatta ciò che stanno leggendo. Alcuni di questi codici sono necessari altri meno. In questo capitolo impareremo quali sono i necessari e come inserirli.
Definizione = Tag: comando codificato utilizzato per indicare in che modo debba essere visualizzata una determinata parte di una pagina web.
Attributo: particolare parola del codice utilizzata all’interno di un tag al fine di controllare con precisione quel che fa quel tag.
L’inserimento dei codici, tranne dove espressamente negato, avviene in questo modo:
<CODICE DI APERTURA>…<CODICE DI CHIUSURA>
cioè
<TAG DI APERTURA>…<TAG DI CHIUSURA>
dove al posto dei puntini andrà inserito il testo. I tag di chiusura si differenziano da quelli di apertura per la presenza di una barra al loro interno
es.:
<html> tag di apertura
</html> tag di chiusura
NOTA: gli attributi vanno usati esclusivamente con i tag di appartenenza ed esclusivamente con il tag d’inizio in questo modo:
<tag attributo>testo</tag> dove tra il tag e l’attributo c’è uno spazio.
A seguire un esempio di pagina HTML che fornisce l’elenco dei tag fondamentali in ordine di apparizione:
<html>
<head>
<title>Nuova pagina 1</title>
</head>
<body>
testo della pagina
</body>
</html>
Il tag <html> è quello che dice al browser che tipo di pagina è quella che dovrà interpretare e va posizionato in apertura e chiusura di pagina; il tag <head> è il tag di intestazione: oltre a contenere il tag del titolo della pagina che apparirà sulla barra del titolo della finestra del browser (<title>…</title>) è il tag all’interno del quale andremo a posizionare i vari script java o dhtml che ci serviranno ad arricchire la stessa con effetti particolari – e che vedremo più avanti; il tag <body> è, ovviamente, quello che conterrà tutto il corpo della pagina.
Eccovi un breve elenco dei tag più comuni commentati:
<html>…</html> inizio – fine definisce la pagina
<head>…</head> inizio – fine intestazione sulla barra del titolo
<title>…</title> inizio – fine titolo sulla barra del titolo
<body>…</body> inizio – fine tutto il corpo della pagina contiene tutti i tag seguenti
<p>…</p> inizio fine paragrafo. Per allineare il testo o centrarlo usare l’attributo align=”…” in questo modo: <p align=”right” (oppure “left” oppure “center”)>testo del paragrafo</p> per avere il paragrafo allineato a destra, sinistra o centrato
<div>…</div> inizio - fine da usare con l’attributo align=”…” serve ad allineare un’intera porzione di corpo: <div align=”left”>parte del corpo allineata a sinistra</div>
<br/> alla fine di una riga interruzione di riga
<hr/>all’ inizio di riga inserisce riga orizzontale
<h1 (2 o 3)>…</h1> inizio – fine assegna il livello al titolo in modo decrescente
<ul>…</ul> inizio – fine fornisce l’elenco puntato. L’attributo type=”…” indica il tipo di simbolo grafico da utilizzare nell’elenco. I valori possibili sono: disc (circonferenza), circle (cerchio pieno) e square (quadrato)
<ol>…</ol> inizio – fine fornisce l’elenco numerato. L’attributo type=”…” indica il tipo di numerali usati. I valori possibili sono: A, a, I, i, 1. L’attributo start=”…” indica il valore col quale inizia la lista.
<li>…</li> inizio – fine da usare con <ul> e <ol>. L’attributo type=”…” indica il tipo di simbolo grafico da utilizzare nell’elenco. I valori possibili sono: disc (circonferenza), circle (cerchio pieno) e square (quadrato). L’attributo value=”…” indica il valore numerico che l’elemento della lista deve avere.
Per una lista strutturata in questo modo:
RIGA UNO
--------RIGA DUE
RIGA TRE
--------RIGA QUATTRO
si usano i tag: <dl>…</dl> per aprire e chiudere l’intera sezione; <dt>…</dt> per ogni riga dispari
e <dd>…</dd> per ogni riga pari. Per ogni <dt> e <dd> oltre ai rispettivi tag di chiusura
corrispondono altrettanti rientri.
<big>…</big> inizio – fine ingrandisce il testo
<sup>…</sup> inizio – fine testo in apice
<sub>…</sub> inizio – fine testo in pedice
<strike>…</strike> inizio – fine testo barrato
<u>…</u> inizio fine testo sottolineato
<em>…</em> oppure <i>…</i> inizio – fine testo in corsivo
<strong>…</strong> oppure <b>...</b> inizio – fine testo in grassetto
<tt>…</tt> inizio – fine testo come macchina per scrivere: tutti i caratteri hanno le stesse dimensioni (=testo monospazio)
<pre>…</pre> inizio – fine da testo monospazio ma mantiene gli spazi e le interruzioni di riga nella pagina definitiva nello stesso modo in cui vengono digitati in html
<small>…</small> inizio – fine rimpicciolisce il testo
<font>…</font> inizio – fine cambia dimensioni e colori dei caratteri. Con size=”…” decidete la grandezza (da 1 a 7); con color=”…” il colore; con face=”…” il tipo: al posto dei puntini scriverete il nome del carattere da usare
NOTA. Ciò che trovate scritto vicino ai tag è per ricordarvi se vanno usati in apertura e chiusura, solo apertura o solo chiusura.
2.0 -CAPITOLO II –LA NOSTRA PRIMA PAGINA
Vi riporto come esempio il codice HTML di una delle vecchie pagine del mio sito depurata di alcuni elementi che per ora non ci interessano:
<html>
<head>
<title>||STEBO||'s Home Page</title>
</head>
<body aLink=”red” bgColor=”black” link=”purple” vLink=”#800000”>
<p>
<h1 align=”center”><I><font color=”red” face=”chiller” size=”7”>||STEBO||'s Home Page<br/></font></i></h1><br/>
<hr>
<hr>
<font color=”red” face=”chiller” size=”5”><br/>
Come sicuramente avrete notato siete capitati sulla peggior homepage della storia di internet...<br/>
...Che dire...<br/>
...peggio per voi!!!<br/>
Se non doveste avere un cavolo da fare nella vostra vita potreste scrivere commenti su ciò che avete appena visto semplicemente clickando qua sotto<br/>
</font>
<p align=”center”>
<a href="guest.html">
<img alt="guest book" border=”0” height=”54” src="1.gif" width=”29”>
</a>
</p>
</body></html>
Ora analizziamola parte per parte, escludendo i tag fondamentali che ora potete interpretare tranquillamente.
Partiamo direttamente con l’analisi del tag <body>. Come vedete contiene diversi attributi.
Iniziamo con:
. link=”…” indica il colore dei collegamenti ipertestuali non ancora visitati
. vlink=”…” indica il colore dei collegamenti ipertestuali già visitati
. alink=”…” indica il colore del collegamento ipertestuale attivato: quando clickate sul link esso cambia colore in base al valore che avete inserito.
. bgcolor=”…” indica il colore di sfondo della pagina
Al posto dei puntini va inserito un valore che identifichi il colore.Il suddetto può essere identificato da uno dei colori della tabella uno oppure da valori alfanumerici a sei cifre preceduti dal simbolo #; valori che potrete trovare facilmente all’indirizzo 24hourHTMLcafe.com/colors.
BLACK - NERO
WHITE - BIANCO
RED - ROSSO
GREEN - VERDE
BLUE - BLU
YELLOW - GIALLO
FUCHSIA O MAGENTA - FUCSIA O MAGENTA
CYAN O AQUA - AZZURRO
PURPLE - PORPORA
GRAY - GRIGIO
LIME - VERDE CHIARO
MAROON - MARRONE
NAVY - BLU SCURO
OLIVE - VERDE OLIVA
SILVER - ARGENTO
TEAL - VERDE
Scendiamo ancora più giù e troviamo il tag <a> del quale ora andiamo a parlare in maniera più attenta.
2.1 – COLLEGAMENTI IPERTESTUALI
Un collegamento ipertestuale è una funzione che permette di passare da una pagina ad un’altra o da una pagina ad un file (in questo caso si ottiene il “download” cioè lo scaricamento del file) semplicemente clickando sulle parole facenti parte del collegamento stesso. Un collegamento ipertestuale è, ad esempio, il titolo di una notizia sulla pagina principale del sito
www.tiscali.it: clickando su di esso avrete accesso ad un’altra pagina (nella stessa o in un’altra finestra) nella quale troverete l’articolo che vi interessa. Il tag corrispettivo è: <a>…</a> (inizio – fine) che va appaiato all’attributo href=”…” che serve ad indicare l’indirizzo esatto del collegamento. Un collegamento ipertestuale sarà quindi da scrivere nel seguente modo: <a href=”qui_scrivete_l’indirizzo”>clicka qui</a> N.B.: per i collegamenti a pagine o files presenti nello stesso sito (cartella) della pagina che state creando non è necessario scrivere l’intero indirizzo internet di quella pagina o del file che vi interessa. È come se scrivendo un documento da inserire nella cartella alfa e volendo fare un richiamo al documento “fotocopia uno” della stessa cartella voi annotaste: “… da cercare nella cartella alfa nel documento fotocopia uno…”. Sarebbe superfluo scrivere la cartella visto che essa è la stessa: basterebbe scrivere:”… da cercare nel documento fotocopia uno…”. “E se la pagina o il file si trovassero in un’altra cartella?” In questo caso dovreste scrivere il percorso necessario a raggiungerlo, anche stavolta evitando di inserire un URL (indirizzo internet) completo.
Mia_cartella_internet
cartella_immagini ----------- cartella_testi
---------mie_foto - miei_disegni ----- mie_poesie - miei_racconti
Osservate sopra. Poniamo il caso che la pagina web che state scrivendo si trovi nella cartella “miei_racconti” e che di sfondo vogliate mettere un’immagine che si trova nella cartella “miei_disegni”. La prima cosa che dovrete fare è andare a scrivere l’indirizzo che vi serve seguendo questa modalità per viaggiare da una cartella ad un’altra:
1) se la cartella che vi serve è una cartella superiore rispetto a quella dove andrete a mettere il file che state scrivendo (ora guardate la FIGURA UNO) digiterete = ..\..\cartella_immagini\miei_disegni\nome_file.estensione dove i due puntini servono a farvi salire di una cartella alla volta: la prima coppia per passare dalla cartella miei_racconti alla cartella cartella_testi e la seconda coppia da cartella_testi a Mia_cartella_internet.
2) se la cartella che vi serve è una sottocartella di quella in cui vi trovate digiterete il percorso così =
cartella_iniziale\sottocartella\nome_file.estensione;
Ovviamente, se il collegamento ipertestuale che state scrivendo si riferisce ad una pagina web che nulla ha a che vedere col vostro sito, l’indirizzo andrà scritto per intero senza omettere nulla. Il tag per i collegamenti ipertestuali è anche fruibile per spedire e – mails, come vedrete più avanti, o, ad esempio, creare, grazie ad un altro attributo, un sommario grazie al quale una pagina web di notevole lunghezza sarà più facilmente visitabile dividendola in paragrafi, argomenti ecc…, permettendo al lettore di partire dal sommario e raggiungere l’argomento desiderato per poi tornare di nuovo al sommario. Per quanto riguarda le e – mails vi troverete a dover usare insieme al tag <a>…</a> con l’attributo
href=”…” dove, al posto dei puntini di sospensione andrete ad inserire quanto segue:
mailto:nomeutente@provider.estensione.
Per quanto riguarda, invece, il discorso del sommario cercherò, prima di darvi il tag preciso, di essere più esaustivo.
2.1.1 – COLLEGAMENTI A PUNTI PRECISI IN UNA PAGINA (SEGNALIBRI)
Ponete il caso che vogliate scrivere in un’unica pagina web delle recensioni ad una serie di libri e che questa serie di libri abbia un numero totale di 50. Il risultato sarebbe una pagina web molto lunga, non vi pare? Per prima cosa dovreste risolvere un problema e cioè far sapere quanti e quali libri sono recensiti. Potreste fare ciò inserendo all’inizio della pagina l’elenco (leggi = sommario) di tutti i suddetti libri recensiti. Certo il lettore sarebbe ora facilitato perché conoscerebbe il materiale contenuto nella pagina che sta leggendo.
E proprio qui subentra il problema fondamentale: il lettore dovrebbe scorrere tutta la pagina in cerca della recensione che gli interessa col pericolo di saltarla per una distrazione. Siccome però lo scopo della vostra pagina web è di essere il più facilmente comprensibile questa cosa non è accettabile.
Il lettore dovrebbe invece poter raggiungere il più rapidamente possibile ciò che gli interessa e cioè con un semplice click.
Qui arriva il nocciolo del discorso: il click non è altro che un collegamento ipertestuale che, però, in questo caso, presenta una particolarità perché non reindirizzerà il lettore ad un’altra pagina bensì ad un punto preciso della stessa (o di un’altra) pagina. Dovrete perciò usare due attributi diversi, uno
che invia e l’altro che riceve il collegamento, ora, per il tag <a>…</a>.
In sostanza sto parlandovi dell’attributo:
href=”…” che già conosciate e che ora costruirete in questo modo =
<a href=”#ilrichiamodellaforesta”> il richiamo della foresta </a>
Questo è il collegamento di invio cioè tramite il quale dal sommario delle recensioni andrete a finire alla recensione del libro Il Richiamo Della Foresta.
L’altro attributo, quello che riceve il collegamento, è:
name=”…”
costruito in questo modo =
<a name=”ilrichiamodellaforesta”>Il Richiamo Della Foresta</a>.
Questo è il tag che va posizionato vicino al titolo della recensione, il tag cioè che riceve il primo collegamento.
(Notate bene che nel caso in cui voleste inserire un collegamento che non avesse bisogno di testo indicativo del punto stesso, tra il tag di apertura con l’attributo name=”...” e quello di chiusura non sarebbe necessario inserire alcun testo.)
ESEMPIO
...
<a name=”top”></a>
Clicka qui per la recensione di: Libro uno
Clicka qui per la recensione di: Libro due
<a href=”#ilrichiamodellaforesta”>Clicka qui per la recensione di:
Il richiamo della foresta</a>
...
...
...
Clicka qui per la recensione di: Libro cinquanta
Recensione libro uno
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Recensione libro due
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<a name=”ilrichiamodellaforesta”>Recensione Il Richiamo Della Foresta</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
...
...
...
Recensione libro cinquanta
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<a href=”#top”>CLICKA QUI PER TORNARE ALL’INIZIO DELLA PAGINA</a>
...
FINE ESEMPIO
Voi chiederete: ”e se volessimo fare un collegamento ad un punto preciso di un’altra pagina?”
Ma mi stupisco di voi!!!
In quel caso dovreste modificare lievemente ciò che va tra le virgolette dell’attributo nel seguente modo:
PAGINA DI PARTENZA
Nella pagina dalla quale voi partirete, nel punto in cui vi serve di inserire il collegamento, scriverete così:
<a href=”pag_arrivo.html#p.to_arrivo> clicka qui per arrivare alpunto X della pagina di arrivo </a>
PAGINA DI ARRIVO
Nella pagina di arrivo nella quale si trova il punto di arrivo che vi interessa, all’altezza del suddetto punto di arrivo scriverete il seguente collegamento:
<a name=”p.to_arrivo”> qui se volete o dovete scriverete qualcosa</a>
3.0 – L’IMPATTO GRAFICO
Finora, riguardo l’aspetto grafico, ci siamo limitati ad osservare sfondi a tinta unita o testi colorati (se non ricordate andate a dare un’occhiata all’elenco dei tag). Ciò che però dona ad una pagina HTML un tono diverso è proprio l’uso di una grafica adatta, d’effetto. Programmi come Macromedia Dreamweaver o Microsoft Frontpage – WYSIWYG – hanno, tra le tante particolarità, la possibilità di attribuire ad una pagina un tema preciso, come quelli usati per il Desktop, con colori e immagini di sfondo intonati tra loro. Siccome però noi quei programmi lì non li usiamo – almeno per il momento – dobbiamo e vogliamo imparare come attribuire manualmente i temi che desideriamo.
Innanzitutto dobbiamo ben studiare l’impatto grafico che desideriamo: l’accostamento dei colori non può essere casuale!!! Dobbiamo decidere altresì se per lo sfondo desideriamo un’immagine – detta anche pattern – che sarà ripetuta per tutta l’ampiezza della finestra.
Fatto ciò possiamo cominciare a procurarci il materiale che necessitiamo e/o desideriamo. Useremo programmi di grafica per creare il pattern di sfondo, i pulsanti ed i vari effetti su di essi, ecc…; surferemo fino alla paranoia tra i vari siti internet e i vari motori di ricerca in cerca di gifs animate o di altri files immagine che useremo all’interno delle nostre pages per abbellirle. Ricordate una cosa fondamentale, però: non tutte le immagini che troverete su internet potranno essere usate come sfondo o come elemento interno. Questo per via delle dimensioni dei files: affinché non ci siano problemi di caricamento le immagini dovranno essere non più pesanti di qualche KByte.
Scegliete quindi con molta attenzione!!!
Ora che abbiamo tutto il necessario ecco come vanno inserite le immagini.
Partiamo dallo sfondo della pagina e ritorniamo al tag <body>:
<body background=”nomefile.estensione”>
mentre per il resto della pagina
<img src=”nomeimmagine.estensione”/>
Questo tag non ha bisogno di un secondo tag di chiusura. Capite bene osservando il tag che senza l’attributo src=”…” non potrebbe apparire alcun’immagine. Non mi sembra tanto complicato no?
Una cosa molto carina da fare a favore di chi vedrà le immagini della vostra pagina web è dar loro una “etichetta” in maniera tale che, quando i lettori passeranno il mouse sull’immagine, al di sotto del mouse apparirà una piccola etichetta nella quale voi potrete scrivere quel che volete. Il tutto è fattibile con l’aggiunta di un attributo al tag <img/> che sarà scritto subito dopo l’attributo src=”...” nel modo seguente:
<img src=”nome_immagine.estensione” alt=”qui digitatel’etichetta”/>
Facciamo un salto indietro ai collegamenti ipertestuali.
Finora abbiamo parlato di collegamenti che sulla pagina web definitiva saranno visualizzati come testo e basta.
Come dovreste fare per inserire un collegamento in un’immagine?
Dopo aver allineato tutto quello che scriverete, dovrete innanzi tutto scrivere il tag di apertura per i collegamenti contenente il percorso del file di arrivo; poi inserire il tag dell’immagine come indicato sopra; inserire un’interruzione di riga, se voleste andare a scrivere qualcosa sotto l’immagine stessa; chiudere tutte i tag che devono essere chiusi.
Per concludere alcuni attributi:
vspace=”…” si decide la spaziatura sopra o sotto l’immagine tra la stessa e il testo e al posto dei puntini vanno inseriti valori numerici;
hspace=”…” determina la spaziatura orizzontale ma per il resto funziona come il precedente;
border=”…” determina lo spessore del bordo di un elemento immagine: con valore 0 non si ha alcun bordo.
4.0 – LE TABELLE
Tra i modi per ordinare il testo in una pagina web, in modo tale che sia più funzionale e creativo della semplice disposizione classica, c’è l’uso delle tabelle che ci permettono di ordinare il testo in righe e colonne come fa Microsoft Excel, per capirci. Immaginate di aver bisogno e, semplicemente, di desiderare di disporre il testo della vostra pagina su più colonne oppure di contornare il testo con dei bordi particolari e immaginate come procedere… non vi viene in mente nulla? Bene, allora avete bisogno di sapere come si creano righe, colonne e bordi.
Innanzitutto avrete bisogno di dire al browser dove inizia e dove finisce la tabella col tag <table>…</table> da porre, ovviamente prima e dopo quelli che andiamo a vedere di seguito.
Quando il tag <table> è posizionato userete il tag <tr>…</tr> per creare le righe. Visto che ogni riga conterrà più celle avrete bisogno del tag <td>…</td> per crearle.
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center">Nome Del File</td>
<td width="72%" align="center">Descrizione</td>
<td width="9%" align="center">Peso</td>
</tr>
Analizziamo l’esempio. Nel tag <table> potete notare diversi attributi:
border=”…” indica lo spessore del bordo delle celle ed accetta valori solo numerici;
width=”…” indica la larghezza della tabella nella pagina ed accetta valori numerici espressi in pixel o (più semplicemente) in percentuale;
cellspacing=”…” indica lo spazio tra le varie celle con valori solo numerici;
cellpadding=”…” indica lo spazio tra I margini ed il contenuto di una cella.
Altri attributi che possono essere aggiunti sono:
bgcolor=”…” e background=”…” che abbiamo già visto in precedenza.
Gli attributi per il tag <td> sono:
align=”…”, bgcolor=”…”, background=”…” che già conosciamo e valign=”…” che indica l’allineamento verticale del contenuto delle celle per ogni riga e i valori sono: top, middle, bottom.
Per il tag <tr> oltre agli attributi già visti abbiamo a disposizione:
rowspan=”…” per indicare il numero di righe totali della cella;
colspan=”…” per indicare il numero di colonne totali della cella.
5.0 – I FRAMES
Ora immaginate di voler avere a disposizione, per creare la vostra pagina web, una grande tabella nelle celle della quale posizionare diverse pagine da consultare, da collegare tra loro, ecc, come fare?
Beh coi frames, ovvio!!!
Più precisamente un frame è un’ area rettangolare all’interno della finestra del browser che visualizza la pagina web unitamente ad altre pagine in altri frames. Un esempio pratico è dato da una pagina che contenga un frame usato come indice o sommario ed un altro frame come pagina vera e propria.
Per lavorare con pagine formate da frames diversi dobbiamo innanzitutto creare le pagine web vere e proprie complete in tutto e per tutto. Successivamente creeremo un documento frameset, che in effetti non ha contenuto vero e proprio, strutturato così:
<html>
<head>
<title>||STEBO||'s Home Page</title>
</head>
<frameset cols="15%,85%" framespacing="0" border="0"
frameborder="0">
<frame src="sommario.html" name="left" noresize scrolling="auto" >
<frame SRC="homepage.html" name="main" noresize>
</frameset>
</html>
<frameset> è il tag che indica al browser che la pagina utilizza i frames;
cols=”…” è l’attributo che indica lo spazio espresso in percentuale che andranno ad occupare i frames da sinistra verso destra;
framespacing=”…” è lo spazio presente tra i vari frames espresso con valori numerici;
border=”…” per chi usa Netscape Navigator indica lo spessore del bordo tra i frames;
frameborder=”…” è l’equivalente di border=”…” per utenti Microsoft Internet Explorer.
Da aggiungere è
rows=”…” l’equivalente di cols=”…” per quanto riguarda le righe.
All’interno del tag <frameset> dobbiamo inserire il tag <frame/> (che come vedete non ha bisogno di un tag di chiusura) nel quale tramite l’attributo src=”…” andremo ad inserire l’indirizzo della pagina web o dell’immagine che vogliamo sia visualizzata al suo interno.
Con l’attributo name=”…”, invece, possiamo assegnare ad un frame un *nome* che ci sarà utile quando andremo a mettere, nelle varie pagine dei vari frames, collegamenti ipertestuali ad altre pagine in modo tale da visualizzarle in frames specifici. Cioè, tornando ad una pagina costituita da due frames, uno per il sommario ed uno per la pagina principale, potremo attribuire al frame della pagina principale l’attributo name=”main” in modo tale che, ponendo nella pagina del sommario il tag <a href=”pagina.html”> e al suo interno l’attributo target=”main” otterremo che pagina.html verrà caricata nel frame principale anziché in quello del sommario.
<html>
<head>
<title>SOMMARIO</title>
<head>
<body>
<p align="center">
<a href="immagini.html" target="main">
Clicka Qui Per La Pagina Delle Immagini
</a>
<br/>
</p>
</body>
</html>
Quello che leggete qui sopra altro non è che la pagina sommario.html del documento frameset visto prima mentre il link è indirizzato ad una ipotetica pagina chiamata immagini.html che, come indicato dall’attributo target=”main”, verrà visualizzata al posto della homepage.
*nome* le tipologie di nomi accettati dall’attributo target=”…” sono di due tipi.
1) potete inserire una qualsiasi parola
2) potete inserire una categoria ristretta di parole costruite da un tratto basso + la parola necessaria in questo modo:
_blank - carica il collegamento ipertestuale in una nuova finestra senza nome;
_top - carica il collegamento nell’intera finestra del browser, utile se volete cambiare completamente pagina sbarazzandovi dei frames o caricando nuovi frames;
_parent - carica il collegamento nel frame genitore se quello corrente è nidificato in altri frames;
_self - carica il collegamento nello stesso frame, effetto che si può ottenere anche senza inserire l’attributo.
5.1 – MARGINI, BORDI E SCORRIMENTO
Nel tag <frame> del quale sinora abbiamo parlato possiamo includere altri attributi che ci aiutino a gestire i margini dei frames, i loro bordi ed il loro scorrimento interno.
marginwidth=”…” esprime in pixel la misura dei margini laterali del frame;
marginheight=”…” esprime in pixel la misura dei margini superiore ed inferiore del frame;
scrolling=”…” visualizza la barra di scorrimento – valori accettati: “yes” per il sì e “no” per il no;
frameborder=”…” visualizza i divisori tra il frame corrente e quelli adiacenti – valori accettati: 1 per il sì e 0 per il no;
noresize non permette all’utente di cambiare le dimensioni del frame corrente.
6.0 – PROGETTARE UNA PAGINA
Di seguito riporto alcuni elementi fondamentali da tener presenti durante la creazione di una pagina web.
CONTENUTO TRA LE 100 E LE 500 PAROLE PER PAGINA
INTERRUZIONI UNA RIGA D’INTESTAZIONE, UNA LINEA O
UN’IMMAGINE OGNI 40/100 PAROLE
DIMENSIONE DEL FILE NON PIÙ DI 50 KB PER PAGINA, IMMAGINI
COMPRESE
VELOCITÀ LA PRIMA SCHERMATA DI TESTO E LE IMMAGINI
CHIAVE DEVONO APPARIRE ENTRO MASSIMO 2 O 3
SECONDI
COLORI DA DUE A QUATTRO COLORI TEMATICI DOMINANTI
FONT NON PIÙ DI TRE TIPI DI CARATTERE (FONT)PER
PAGINA
SPAZIO VUOTO LO SFONDO DEVE APPARIRE SU ALMENO IL 50%
DELLA PAGINA
CONTRASTO NESSUN COLORE DELLO SFONDO DEVE ESSERE
SIMILE A QUELLO DEL TESTO
TONALITÀ E STILE TESTO E GRAFICA DEVONO ESSERE COERENTI DAL
PUNTO DI VISTA STILISTICO E TEMATICO
IMPATTO GLOBALE LA PAGINA NEL SUO CONTESTO DEVE APPARIRE
EQUILIBRATA E ATTRAENTE
È da tenere sempre presente che tutti i tags trattati sinora possono ed in alcuni casi debbono essere
utilizzati anche per strutturare lo spazio stesso di una pagina così da renderla più facilmente
elaborabile dall’utente. Ad esempio potreste usare i tags di interruzione di riga per inserire un certo
numero di spazii (e quindi di linee vuote) tra due parti del testo che volete o avete necessità di
dividere.
7.0 – SUGGERIMENTI
“Sì, okay, parli tanto bene ma fino adesso le pagine che mi hai fatto fare stanno lì e no si muovono… mi mettono una tristezza!!!”
Beh non avete tutti i torti.
Le volete abbellire?
Ok, allora vi do un bell’elenco di siti nei quali andare a cercare materiale vario per arricchire le pagine che state creando…
JAVA
www.javascript.it
www.a1javascripts.com
www.free-javascripts.com
home.javaarchives.com/java_applications.html
www.javafile.com
javascript.internet.com
www.java-scripts.net
www.javasite.com
javaboutique.internet.com/cathome.html
VARII
www.webgif.com
www.barrysclipart.com
www.bignosebird.com
www.tech-sol.net/interlinks/website.htm
www.clip-art.com
www.widearea.co.uk/designer
www.dynamicdrive.com
www.flamingtext.com
www.thingamabob.com/links/248562/index.html
members.xoom.it/freesource
www.freewebtools.it
www.gifworks.com
www.html.it
www.rad-gfx.com
24hourhtmlcafe.com
www.webpagesthatsuck.com
www.webmasterpoint.org/home.asp
8.0 – CONCLUSIONI
Se siete arrivati sin qui vuol dire che siete armati di tanta pazienza e passione, ma soprattutto che non avete ancora dato di matto tentando di seguire le mie spiegazioni.
In questo capitolo mi accingo a darvi delle indicazioni a causa delle quali mi odierete.
Ricordate quanto detto su i vari programmi WYSIWYG?
Avevamo detto che il loro uso non è consigliato per ottenere delle pagine web “pulite” perché spesso, maneggiando e rimaneggiando la stessa pagina, è possibile che rimangano tracce di tags o duplicati di tags non voluti che non fanno altro che confondere i browsers o aumentare il tempo di caricamento.
Ebbene il loro uso non sempre è sconsigliato. Essi sono ottimi per la gestione delle pagine non per la loro creazione.
Mi spiego.
Immaginate di aver creato tutte la pagine web che vi servono. Ora immaginate che, per un motivi o per un altro, dobbiate cambiare alcune cose qui e lì in buona parte di esse. Utilizzando il BLOCCO NOTE diventereste ciechi a cercare i tags, per esempio, mentre con il Microsoft Frontpage, nella finestra HTML, troverete i tags evidenziati in un bel blu elettrico, gli script in rosso ed il resto del testo in nero.
Non è un grosso aiuto questo?
E non sarebbe un grosso aiuto anche il poter visualizzare un’anteprima della pagina mentre la state creando? Anche questa è una cosa che potete fare con essi.
E poter visualizzare, a seconda dell’esigenza, un documento frameset come tale, o come due pagine distinte all’interno della stessa finestra?
E ridimensionare un’immagine col semplice movimento del mouse?
E gestire le tabelle con lo stesso metodo?
Capite bene che chi ha progettato questi programmi l’ha fatto per facilitare il singolo utente e non per rendergli impossibile la vita.
Il trucco quindi non consiste nel non usarli ma nell’usarli con “coscienza” sapendo dove andare a mettere le mani, capito?
Tra l’altro questi programmi vi aiutano anche – wow wow wow – nell’upload delle pagine, cioè nel caricarle sul server dal quale consultarle.