-
.
Tutorial HTML - Creare un orologio
In questo tutorial vedremo come si crea un orologio. Si tratta di creare una vera e propria pagina web, anche se molto semplice, che poi verrà inserita all'interno di un iframe, cioè in una specie di finestra che mostra solo la parte che ci interessa.
Questo ad esempio è l'orologio usato nel tutorial, non inserito in un iframe.
Dopo aver creato l'immagine di sfondo con un qualsiasi programma di grafica, dobbiamo quindi preparare la pagina web.
Il codice è piuttosto semplice, ed è composto, oltre che dai normali tag html, dal foglio di stile, dal javascript che fa funzionare l'orologio e da una tabella che racchiude la data.
Eccolo:CODICE<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-color:#c2a770;
font-family:Verdana,Arial,Sans-serif;
font-size:11px;
}
table{
border-collapse: collapse;
border:0px;
width:146px;
height:146px;
background-image:url(elmore.jpg);
}
.input {
border-style: none;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
background-color:transparent;
color :#000000;
font-weight:bold;
margin-top:5px;
margin-left:5px;
}
</style>
<script type="text/javascript">
<!-- Prelevato e spiegato su: http://www.web-link.it -->
function showFilled(Value) {
return (Value > 9) ? "" + Value : "0" + Value;
}
function StartClock24() {
TheTime = new Date;
document.clock.showTime.value = showFilled(TheTime.getHours()) + ":" + showFilled(TheTime.getMinutes()) + ":" + showFilled(TheTime.getSeconds());
setTimeout("StartClock24()",1000)
}
</script>
</head>
<body topmargin="0" leftmargin="0" onLoad="StartClock24()">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:146px; height:146px; text-align:left; vertical-align:top;">
<form name="clock">
<input type="text" name="showTime" size="10" class="input">
</form>
</td>
</tr>
</table>
</body>
</html>
Come vedete non è molto lungo.
Per lavorarci potete usare un normalissimo editor di testo come il blocco note di Windows, e salvare poi il documento con estensione .htm o .html . Fate attenzione che il programma non aggiunga anche l'estensione .txt; per verificare che tutto sia corretto potete attivare la visualizzazione delle estensioni dei file per la cartella in cui avete salvato il documento (Strumenti -> Opzioni cartella -> Visualizzazione e togliete la spunta alla voce Nascondi le estensioni per i tipi di file conosciuti)
Una raccomandazione: non usate Word, quando salvate il documento come html questo simpatico programma decide per i fatti propri di aggiungere qualche riga qua e là, col risultato di sporcare il codice.
Vediamo ora quali sono le parti da modificare per personalizzarlo.
La parte in verde è il foglio di stile.
body - E' lo stile generale della pagina, che verrà ereditato dall'orologio. Abbiamo prima di tutto il colore di sfondo, che in realtà non sarà visibile, ma io ho l'abitudine di usare comunque un colore che si adatti all'orologio.
Abbiamo poi la famiglia di font e le dimensioni del carattere.
table - Si tratta dello stile che viene applicato alla tabella.
Il primo attributo, border-collapse, permette semplicemente di avere un bordo unico per le celle adiacenti della tabella e in genere non serve modificarlo. Poi incontriamo l'attributo border, che regola le dimensioni, lo stile e il colore del bordo della tabella. Ci sono poi le dimensioni della tabella, che in genere saranno uguali a quelle dell'immagine di sfondo. Infine troviamo il comando che carica l'immagine e la imposta come sfondo.
.input - Questa è la classe che viene applicata al form per la visualizzazione dell'ora. Gli script per generare l'orario fanno uso del marcatore form e del campo input, per cui l'ora sarà in realtà racchiusa all'interno di un piccolo rettangolo. Questo è il motivo per cui troviamo le definizioni per bordo e sfondo, se mancassero vedremmo l'orario contenuto in un rettangolo bianco con bordo nero.
Abbiamo quindi nell'ordine l'impostazione per il bordo (messo a zero) e per lo sfondo, impostato come trasparente. Poi ci sono la famiglia di font, le dimensioni e il colore del carattere. In seguito c'è il comando che rende il testo in grassetto (font-weight:bold;); in questo caso è stato inserito per avere una maggiore leggibilità, ma naturalmente non è necessario.
Infine con i comandi margin-top e margin-left decidiamo di quanto il rettangolo contenente l'ora si dovrà discostare dai bordi.
Proseguendo troviamo il codice javascript che fa funzionare l'orologio e che non va modificato.
Inizia poi il corpo della pagina. Da notare che all'interno del tag <body> è presente il comando onLoad="StartClock24()". Questo non va assolutamente dimenticato, altrimenti l'orologio non partirà.
Dopo il tag <body> troviamo la tabella. La struttura è molto semplice: nella tabella abbiamo una sola riga e una sola colonna, che occupano interamente la tabella stessa. Il rettangolo con l'orologio viene infatti posizionato nel foglio di stile impostando i margini, come abbiamo già visto.
In rosso sono evidenziati i valori che dobbiamo modificare, e cioè larghezza e altezza della cella, che saranno gli stessi impostati nel foglio di stile per la tabella.
Troviamo poi il form che mostra l'ora, e infine i tag di chiusura della tabella e della pagina web.
Completata la modifica del codice, non resta che inserire l'orologio nella pagina in cui vogliamo visualizzarlo e questo, come accennato, viene fatto tramite un iframe:CODICE<iframe frameborder="0" src="file_orologio.html" scrolling="no" width="146" height="146"></iframe>
Larghezza e altezza devono avere gli stessi valori impostati per la tabella all'interno del foglio di stile, o quasi: con il bordo diverso da zero, potrebbe essere necessario aggiungere qualche pixel. In questo caso potrebbero sorgere dei piccoli problemi di visualizzazione a seconda dei browser, dovuti al fatto che internet explorer interpreta diversamente width ed height. Il discorso è un po' complicato, ma questo è il motivo per cui io preferisco disegnare il bordo direttamente sull'immagine e mettere a zero il valore del bordo della tabella.
fonte:graphic vision
. -
batteria98.
User deleted
fantastico .
