Tutorial
Una volta imparati i tag fondamentali, il Webmaster principiante si pone le classiche domande: da dove cominciare? Come dare una struttura alla pagina?
Questo aspetto viene quasi puntualmente tralasciato dalle varie guide per HTML (e, fatto ben piu' grave, anche da guide a linguaggi decisamente piu' ostici da comprendere).
Cerchiamo allora di porre un rimedio a questa mancanza, definendo gli aspetti piu' importanti riguardanti l'impaginazione del documento.
| Passo 1 |
Probabilmente la cosa migliore da fare e' racchiudere l'intero contenuto in una tabella, disponendo i vari elementi al suo interno, comprese ulteriori tabelle. Questo metodo, a mio avviso uno dei piu' validi, impone pero' una scelta importante: e' meglio impostare le dimensioni della tabella principale in termini assoluti o relativi?
Cerchiamo di chiarire. Per assoluti si intende il dimensionamento in pixel, per relativi, in percentuale. Visto che un esempio vale piu' di mille parole, procediamo.
Ovviamente dovremo prima scrivere i tag fondamentali:
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML>
| Passo 2 |
Passiamo ora alla tabella 'portante'. Personalmente preferisco l'impostazione delle dimensioni in pixel. Non si tratta di una scelta arbitraria, dobbiamo infatti tenere presente che non tutti usano monitor della stessa dimensione e risoluzione. Questo fatto ha alcune conseguenze sulla impaginazione a volte deleterie, puo' scombinare completamente la disposizione degli oggetti che avremo 'cesellato' con tanta cura.
Ci riferiremo percio' alla classica risoluzione 800x600, la piu' diffusa in assoluto.
<HTML> <HEAD> <TITLE> Il layout </TITLE> </HEAD> <BODY> <TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center> <TR> <TD> </TD> </TR> </TABLE> </BODY> </HTML>
La misura riguardante l'altezza serve al solo scopo didattico e una volta 'riempita' la pagina si rendera' inutile. L'allineamento invece e' estremamente importante: manterra' il contenuto della nostra pagina al centro dello schermo, quale che sia la risoluzione impostata dall'utente.
(Per una dimostrazione provare ad impostare la risoluzione a 1024x768 o superiore)
Ecco come si presenta
| Passo 3 |
A questo punto possiamo procedere alla suddivisione della pagina in settori distinti; la parte superiore per un eventuale logo, il lato a sinistra per i link mentre lo spazio rimanente sara' destinato al contenuto vero e proprio.
<HTML> <HEAD> <TITLE> Il layout </TITLE> </HEAD> <BODY> <TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center> <TR> <TD HEIGHT=50> Qui metteremo il logo </TD> </TR> <TR> <TD> Mentre all'interno di questa cella costruiremo un'altra tabella </TD> </TR> </TABLE> </BODY> </HTML>clicca per vedere l'esempio
| Passo 4 |
L'esempio sopra serve per dare una indicazione dei contenuti da inserire. Ora procediamo di un altro passo inserendo il logo nella cella superiore e una tabella in quella inferiore.
<HTML> <HEAD> <TITLE> Il layout </TITLE> </HEAD> <BODY> <TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center> <TR> <TD HEIGHT=50> <IMG SRC=tute_img/logo.jpg> </TD> </TR> <TR> <TD> <TABLE BORDER=1 WIDTH=100% HEIGHT=100%> <TR> <TD WIDTH=145> cella per i link </TD> <TD> cella per il testo </TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>visualizza l'esempio
| Passo 5 |
Trattandosi di un 'sito' a carattere astronomico diviene quasi d'obbligo impostare lo sfondo di colore nero. Questo perche' le eventuali immagini che verranno inserite avranno appunto il nero quale colore dominante. Di conseguenza imposteremo il testo su toni chiari (bianco). E' consigliabile dare colori chiari anche ai link. Effettueremo queste modifiche operando all'interno del tag BODY.
<BODY BGCOLOR=black TEXT=white LINK=#8888ff VLINK=gold>visualizza l'esempio
| Passo 6 |
A questo punto inseriamo testo e link.
<HTML> <HEAD> <TITLE> The Moon </TITLE> </HEAD> <BODY BGCOLOR=black TEXT=white LINK=#8888ff VLINK=gold> <TABLE BORDER=1 WIDTH=750 HEIGHT=100% ALIGN=center> <TR> <TD HEIGHT=50> <IMG SRC=tute_img/logo.jpg> </TD> </TR> <TR> <TD> <TABLE BORDER=1 WIDTH=100% HEIGHT=100%> <TR> <TD WIDTH=145> <A HREF=#> La Luna [Home Page]</A> <BR> <A HREF=#> La storia </A> <BR> <A HREF=#> Le fasi </A> <BR> <A HREF=#> Carta lunare 1 </A> <BR> <A HREF=#> Carta lunare 2 </A> <BR> <A HREF=#> Carta lunare 3 </A> <BR> <A HREF=#> Carta lunare 4 </A> <BR> <A HREF=#> Carta lunare 5 </A> <BR> <A HREF=#> Carta lunare 6 </A> <BR> <A HREF=#> I principali crateri </A> <BR> <A HREF=#> I mari </A> <BR> <A HREF=#> La faccia nascosta </A> <BR> <A HREF=#> Link </A> </TD> <TD> La Luna, satellite naturale della Terra e suo piu' prossimo vicino celeste, e' un oggetto di perenne fascino per l'osservazione con strumenti di qualsiasi dimensione. Nonostante le sue piccole dimensioni (3476 Km di diametro, circa un quarto di quelle della Terra) essa e' tanto vicina, in media 384.400 Km, che anche un comune binocolo rivela una dovizia di particolari della sua superficie piena di crateri.<BR> Ogni mese la Luna attraversa un ciclo di fasi, dalla luna nuova (non illuminata) alla luna crescente (primo quarto), alla luna piena, alla luna calante (ultimo quarto), per ritornare alla luna nuova. Strettamente parlando, vi sono due tipi di mese. Il primo dura 27,3 giorni, il tempo che la Luna impiega per compiere una rivoluzione intorno alla Terra rispetto a un punto fisso, come le stelle remote; questo e' chiamato <I>mese siderale</I>. Ma la Terra, durante questo tempo, si muove anch'essa rispetto al Sole, sicche' la Luna deve compiere qualcosa di piu' di una rivoluzione per ritornare alla medesima fase osservata dalla Terra. Il tempo che la Luna impiega a compiere un'intero ciclo di fasi, 29,5 giorni, si chiama <I>mese sinodico</I>. Ogni punto della superficie lunare e' illuminato dalla luce del Sole per due settimane, durante le quali la temperatura superficiale raggiunge il punto di ebollizione dell'acqua (circa 100 °C), seguite da una notte di due settimane, in cui la temperatura piomba a -170 °C. La Luna ruota sul proprio asse ogni 27,3 giorni, lo stesso tempo che impiega per compiere una rivoluzione intorno alla terra, sicche' ci rivolge sempre la stessa faccia. In pratica, pero', possiamo vedere qualcosa di piu' di meta' della superficie della Luna. L'orbita lunare e' inclinata di circa 5° rispetto all'eclittica e l'asse della Luna e' inclinato di circa 1,5° rispetto alla sua orbita, sicche' talvolta possiamo vedere fino a 6,5° oltre i poli nord o sud della Luna; questo fenomeno viene chiamato <I>librazione in latitudine</I>. Inoltre, la velocita' con cui la Luna si muove lungo la sua orbita ellittica varia ritmicamente come essa si avvicina o si allontana dalla Terra, mentre il suo asse di rotazione rimane costante. Mentre ruota intorno alla Terra, la Luna nella sua orbita sembra quindi oscillare leggermente a est e a ovest, cosicche' possiamo vedere fino a circa 7° oltre a ciascun bordo; questo fenomeno e' chiamato <I>librazione in longitudine</I>. L'effetto complessivo di queste librazioni e' che possiamo vedere il 59% della superficie della Luna. <A HREF=#>continua >></A> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>visualizza l'esempio
| Passo 7 |
Possiamo ora occuparci del lato estetico, ossia conferire lo stile che preferiamo alle nostre pagine:
- portare TOPMARGIN, LEFTMARGIN, MARGINWIDTH e MARGINHEIGHT della pagina a zero
- azzerare il bordo alle tabelle
- impostare a zero CELLPADDING e CELLSPACING della tabella principale
- eliminare le altezze relative alle tabelle, ormai inutili
- adottare un font piu' elegante.
Un accorgimento utile per la navigazione potrebbe essere il 'linkaggio' del logo di tutte le pagine del sito, in modo che un click su di esso ci riporti alla homepage. Sempre allo scopo di favorire la navigabilita', in tutte le pagine dovra' essere presente la cella dei link. Troppo spesso si incontrano infatti siti magari ricchi di contenuti e graficamente accattivanti, ma praticamente impossibili da navigare. Questi piccoli accorgimenti potrebbero evitare la fuga di eventuali visitatori dal nostro sito.
© 2002 Poletti Stefano