wviewweather.com Forum Index wviewweather.com
wview and Weather Topics
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

HTML Templates using Cascading Style Sheets
Goto page 1, 2  Next
 
Post new topic   Reply to topic    wviewweather.com Forum Index -> Web Sites and HTML Templates
View previous topic :: View next topic  
Author Message
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Wed Nov 16, 2005 11:31 pm    Post subject: HTML Templates using Cascading Style Sheets Reply with quote

I've completed the changes to the template files and the CSS file. Remember the CSS file needs to live in the img directory (or whatever your root directory is) for your live webpage where you're final html files live.

You can see the result at my weather page at http://www.alberniweather.ca

For those not familiar with Cascading Style Sheets. What these basically do is allow you to keep your webpage code as simple as possible and have all the formatting and "look" of your site controlled by one file.

This is done by adding the <link> element in the <head> section of each page. Then control the look by encasing your data in <div> tags that are modified by adding "classes" and "id". All those classes and ids are defined in the single CSS file.

This makes it very easy to update. It keeps the need for touching the actual HTML files (in this case "htx" template files) to a minimum. While giving you the ability to make dramatic cosmetic changes to the webpage.. INSTANTLY!

For some great examples and helpful information on using CSS... consult http://www.w3schools.com/css/css_reference.asp

Anyway, I've update this thread to include each file in source form, just copy and paste into your file.

I've also added some javascript to the file to allow for "alerts" when rain and wind values reach a certain threshold.

Hopefully this stuff is useful for people![/url]


Last edited by chrisale on Tue Jan 17, 2006 12:43 pm; edited 6 times in total
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Wed Nov 16, 2005 11:32 pm    Post subject: Reply with quote

Ignore this...

Last edited by chrisale on Tue Jan 17, 2006 12:31 pm; edited 1 time in total
Back to top
View user's profile Send private message MSN Messenger
mteel



Joined: 30 Jun 2005
Posts: 435
Location: Collinsville, TX

PostPosted: Wed Nov 16, 2005 11:41 pm    Post subject: Reply with quote

Thanks for providing those for public consumption. I really like what you've done - it's a really cool alternate look...

You might want to include your index.htx file (home page), and it would be nice to see them ultimately without the rain conversion code lest you get a bunch of questions later about errant rainfall readings Wink

Also, the wview web site is wviewweather.com (link at bottom of your home page).

Mark
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Thu Nov 17, 2005 8:30 am    Post subject: Reply with quote

And I actually had a question about the javascript.

I've been having a hard time adding in comments to the .htx file. It seems the html generator always trys to interpret them. Is there a way I can add comments into the code so that the HTML generator doesn't try to parse them? (This way I could keep the javascript code in there as an example... and also properly comment everything I've done)


Last edited by chrisale on Tue Jan 17, 2006 12:32 pm; edited 3 times in total
Back to top
View user's profile Send private message MSN Messenger
mteel



Joined: 30 Jun 2005
Posts: 435
Location: Collinsville, TX

PostPosted: Thu Nov 17, 2005 9:22 am    Post subject: Reply with quote

Unfortunately, the answer is no. I adopted the "tag" format of weatherview when I started developing wview, and it is nothing more than a standard html comment construct. I have regretted this since then, wishing I had used "<!--$" or some such as the start of a wview tag instead of the standard html form.

Problem is if I change it now it will hose up everyone with existing custom html templates...

If you use something like "<!--@" to start your comments, at least the htmlgenerator will easily see that the "@" does not match any wview html tag and avoid confusion. There is no way really to avoid it looking at all html comments, as discussed above.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Thu Nov 17, 2005 10:27 am    Post subject: Reply with quote

OK.. well I'll play around with it.. if using <!--@ should work in most cases anyway.

Maybe that will be something for a later "major" release? Software often breaks past versions... it's not uncommon, and I don't think users object to it as long as it is done for good reasons, which I think this would be.

As long as there is a clear migration path, people will gladly follow along.
Back to top
View user's profile Send private message MSN Messenger
mteel



Joined: 30 Jun 2005
Posts: 435
Location: Collinsville, TX

PostPosted: Thu Nov 17, 2005 11:05 am    Post subject: Reply with quote

Not quite the same thing. It would be like a new version of MySQL not reading databases from earlier versions. Now, that might happen but they would provide a "convertor" to convert the old tables to the new. We are talking about program data here, the html templates are input data to wview.
If a convertor were written to check every html comment in a template file to see if it is a wview tag and convert it to the new format if it were, that would be a workable solution.

Now, so you can comment html templates (which you already can) and have the warm feeling of knowing that they are not making the htmlgenerator work just a little bit harder (and it is only a little), we should all make these sacrifices?

Very poor bang for the buck ratio there...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Thu Nov 17, 2005 11:25 am    Post subject: Reply with quote

roger dodger.. no worries
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:12 pm    Post subject: Template Update: CSS file Reply with quote

Updated Templates are below I'll spread into its' own reply so that people can comment on it seperately more easily.

First... the CSS file.. weatherstyle.css

This controls all display functionality for all the webpages... without this file, it's just a bunch of text.

Code:

/*
Theme Name: Weather Style
Version: 1.0
Author: Chris Alemany

*/

/*** Common Rules ***/
body {
   background-color:#FFF;
   width: 975 px;
   }




h1,h2,h3,h4 {
font-size: 16px;
font-family: arial, geneva, serial-serif;
}

h5 strong {
color: red;
}

h5 {
font-size: 9px;
font-family: arial, geneva, serial-serif;
}

.column {
position: relative;
background-color: #CCCCCC;
font-style: italic;
padding: 1px;
font-size: 12px;
width: 145px;
}


/*** END COMMON Rules ***/

/************************/

/* Specific Current Conditions.htx */

#page {
position: absolute;
width: 400px;
top: 50px;
left: 200px;
background-color:#EEEEEE;
}
#head {
text-align: center;
}

h5 span.small {
color: red;
}

h5 a {
color: blue;
text-decoration: none;
}

#current {
position: relative;
top: 1px;
width: 400px;
padding: 5px;
}

#curcol1 {
position: relative;
top: 1px;
left: 1px;
width: 90px;
font-size: 14px;
text-align: right;
}

#curcol2 {
position: absolute;
top: 6px;
left: 105px;
width: 80px;
font-size: 14px;
text-align: left;
font-style: italic;
}

#curcol3 {
position: absolute;
top: 6px;
left: 215px;
font-size: 14px;
text-align: right;
}

#curcol4 {
position: absolute;
top: 6px;
left: 302px;
font-size: 14px;
text-align: left;
font-style: italic;
}

/* End Current Conditions.htx */

/************************/

/*** Main Index.htx ***/

#indexpage {
position: relative;
font-family: arial, geneva, serial-serif;
width: 800px;
text-align:center;
top: 5px;
right: 5px;
left: 75px;
background-color:#DEF;
padding-bottom: 900px;
}
.headingindex a
{
text-align: center;
text-decoration: none;
color: black;
}

ul#minitabs {
   list-style: none;
   margin: 0;
   padding: 0;
   font-weight: bold;
     text-align: center;
     white-space: nowrap;
     }

ul#minitabs li {
   display: inline;
   margin: 0;
   font-size: 10pt;
   }

ul#minitabs a {
   text-decoration: none;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 5px;
     border-bottom: 5px solid #ABF;
     color: #000;
}

ul#minitabs a#current {
   background-color:#ABF;
   border-color: #ABF;
   color: #000;
}

ul#minitabs a:hover {
   background-color:#ABF;
   border-color: #ABF;
   color: #000;

}

#forecast {
position: absolute;
top: 320px;
left: 100px;
width: 600px;
text-align: center;
font-style: italic;
font-size: 10px;

}
#imagesmain {
position: absolute;
top: 400px;
left: 10px;
width: 780px;
bottom: 1px;
text-align: center;
}

#dials {
position: relative;
text-align: center;
width: 100%;
top: 0px;
bottom: 1px;
}

#satellite {
position: absolute;
text-align: left;
top: 930px;
left: 20px;
}
.textlinks {
position: absolute;
text-align: center;
width: 500px;
top: 270px;
left: 155px;
}

div#ads table {
white-space: nowrap;
}

#satheaddiv {
position: relative;
left: 5px;
width: 750px;
padding: 0px;
}
.sathead {
position: relative;
padding-left: 38px;
padding-right: 50px;
padding-bottom: 0px;
padding-top: 0px;
font-size: 14px;
font-style: bold;
margin: 0px;
}

/*Weather Data Table in Main Index.htx*/
#tabledata {
position: relative;

top: 5px;
width: 755px;
left: 25px;
text-align: left;
font-family: arial, geneva, serial-serif;
font-size: 12px;

}

#col1 {
position: relative;
top: 1px;
left: 1px;

}

#col2 {
position: absolute;
top: 1px;
left: 151px;


}

#col3 {
position: absolute;
top: 1px;
left: 302px;
}

#col4 {
position: absolute;
top: 1px;
right: 155px;


}

#col5 {
position: absolute;
top: 1px;
right: 5px;

}
.odd {
background-color: #EEE;
}

.even {
background-color: #DDD;
}

/*END Weather Data Table*/

/** End Main Index.htx **/



/* Daily, Monthly and Yearly Summary Weather Pages */

#sumpage {
position: relative;
font-family: arial, geneva, serial-serif;
width: 800px;
text-align:center;
top: 5px;
right: 5px;
left: 75px;
background-color:#EEE;
padding-bottom: 180px;
}

div.textlinks p {
font-style: normal;
font-color: #000;
font-size: 10px;
text-decoration: none;
}

#hilotable {
position: relative;
top: 1px;
width: 1px;
left: 1px;
text-align: left;
font-family: arial, geneva, serial-serif;
font-size: 12px;

}


.hilocolumn {
position: relative;
background-color:#EEE;
font-style: italic;
padding: 1px;
font-size: 14px;


}


#hiloblock1 {
position: absolute;
width: 300px;
font-size: 12px;
top: 60px;
left: 10px;
text-align:left;

}

#hiloblock2 {
position: absolute;
width: 300px;
font-size: 12px;
top: 60px;
right: 10px;
text-align:left;

}

#hiloblock1year {
position: absolute;
width: 210px;
font-size: 12px;
top: 60px;
left: 100px;
text-align:left;

}

#hiloblock2year {
position: absolute;
width: 300px;
font-size: 12px;
top: 60px;
right: 10px;
text-align:left;

}

.hilocol1 {
position: relative;
width: 100px;
top: 1px;
left: 1px;
text-align: right;


}

.hilocol2 {
position: absolute;
width: 100px;
top: 2px;
left: 100px;
text-align: center;


}


.hilocol3 {
position: absolute;
width: 100px;
top: 2px;
left: 200px;
text-align: center;


}


#dailycharts {
position: relative;
top: 90px;
width: 705px;
left: 70px;
text-align: left;
font-family: arial, geneva, serial-serif;
font-size: 12px;
}

#chartscol1 {
position: float;
width: 300px;
top: 1px;
left: 1px;
text-align: right;

}

#chartscol2 {
position: absolute;
width: 300px;
top: 1px;
left: 320px;
text-align: right;

}

.hilohead {

text-align: center;
font-style: bold;
font-size: 16px;
background-color: #AAA;
}

/*End Daily, Monthly and Yearly Summary Weather Pages */
/**************************/
/*Almanac*/

#almpage {
position: relative;
font-family: arial, geneva, serial-serif;
width: 800px;
text-align:center;
top: 5px;
right: 5px;
left: 75px;
background-color:#EEE;
padding-bottom: 850px;
}

#almspacer {
position: relative;
width: 200px;
font-size: 12px;
top: 110px;
left: 1px;
text-align:left;

}

#almtemp {
position: absolute;
width: 250px;
font-size: 12px;
top: 110px;
left: 10px;
text-align:left;

}

#almdew {
position: absolute;
width: 250px;
font-size: 12px;
top: 110px;
left: 270px;
text-align:left;

}

#almhum {
position: absolute;
width: 250px;
font-size: 12px;
top: 110px;
left: 530px;
text-align:left;

}

#almwindchill {
position: absolute;
width: 250px;
font-size: 12px;
top: 370px;
left: 10px;
text-align:left;

}

#almheat {
position: absolute;
width: 250px;
font-size: 12px;
top: 370px;
left: 270px;
text-align:left;

}

#almwindrun {
position: absolute;
width: 250px;
font-size: 12px;
top: 370px;
left: 530px;
text-align:left;

}

#almwind {
position: absolute;
width: 350px;
font-size: 12px;
top: 470px;
left: 90px;
text-align:left;

}

#almbar {
position: absolute;
width: 250px;
font-size: 12px;
top: 470px;
left: 530px;
text-align:left;

}

#almrain {
position: absolute;
width: 250px;
font-size: 12px;
top: 730px;
left: 530px;
text-align:left;

}

.almanachead {
text-align: center;
font-style: bold;
font-size: 16px;
padding-right: 1px;
background-color: #AAA;
}

.almcol {
position: relative;
width: 250px;
top: 1px;
left: 1px;
text-align: left;


}

.almcol1 {
position: relative;
width: 200px;
top: 1px;
left: 1px;
text-align: left;


}

.almcol2 {
position: absolute;
width: 200px;
top: 19px;
left: 100px;
text-align: left;


}

.almwindcol2 {
position: absolute;
width: 200px;
top: 19px;
left: 150px;
text-align: left;


}

.almwindcol {
position: relative;
width: 350px;
top: 1px;
left: 1px;
text-align: left;


}
[/code]
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:36 pm    Post subject: Index.htx Reply with quote

Now the index.htx file... updated to include new tags from wview-3.0.0 note that i have removed some of the unit tags for rain and barometer as I have made other modifications, you will need to add those tags back in.

I'm going to update this code so that it is more generic and totally XHTML Strict valid... it's totally functional now, just not perfect. So please continue to use it, just know that it will change. Smile

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Wview Weather Conditions</title>
  <meta http-equiv="refresh" content="300">
<link href="weatherstyle.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/rss+xml" title="Wview Weather RSS" href="wxrss.xml">

<script type="text/javascript">
//<![CDATA[
//
// The following is to control the NOAA form for archived data
//

function createDaySelect(name)
{
    document.write("<select name=" + name + " size='1'>");
    document.write("<option selected='selected' value='01'>01</option>");
    document.write("<option value='02'>02</option>");
    document.write("<option value='03'>03</option>");
    document.write("<option value='04'>04</option>");
    document.write("<option value='05'>05</option>");
    document.write("<option value='06'>06</option>");
    document.write("<option value='07'>07</option>");
    document.write("<option value='08'>08</option>");
    document.write("<option value='09'>09</option>");
    document.write("<option value='10'>10</option>");
    document.write("<option value='11'>11</option>");
    document.write("<option value='12'>12</option>");
    document.write("<option value='13'>13</option>");
    document.write("<option value='14'>14</option>");
    document.write("<option value='15'>15</option>");
    document.write("<option value='16'>16</option>");
    document.write("<option value='17'>17</option>");
    document.write("<option value='18'>18</option>");
    document.write("<option value='19'>19</option>");
    document.write("<option value='20'>20</option>");
    document.write("<option value='21'>21</option>");
    document.write("<option value='22'>22</option>");
    document.write("<option value='23'>23</option>");
    document.write("<option value='24'>24</option>");
    document.write("<option value='25'>25</option>");
    document.write("<option value='26'>26</option>");
    document.write("<option value='27'>27</option>");
    document.write("<option value='28'>28</option>");
    document.write("<option value='29'>29</option>");
    document.write("<option value='30'>30</option>");
    document.write("<option value='31'>31</option>");
    document.write("</select>");
}

function createMonthlySelect(name)
{
    document.write("<select name=" + name + " size='1'>");
    document.write("<option value='01' selected='selected'>Jan</option>");
    document.write("<option value='02'>Feb</option>");
    document.write("<option value='03'>Mar</option>");
    document.write("<option value='04'>Apr</option>");
    document.write("<option value='05'>May</option>");
    document.write("<option value='06'>Jun</option>");
    document.write("<option value='07'>Jul</option>");
    document.write("<option value='08'>Aug</option>");
    document.write("<option value='09'>Sep</option>");
    document.write("<option value='10'>Oct</option>");
    document.write("<option value='11'>Nov</option>");
    document.write("<option value='12'>Dec</option>");
    document.write("</select>");
}

function createYearlySelect(name)
{
    document.write("<select name=" + name + " size='1'>");
    document.write("<option selected='selected' value='2005'>2005</option>");
    document.write("<option selected='selected' value='2006'>2006</option>");
    document.write("</select>");
}

function openNoaaFile(month, year)
{
    var url = "NOAA-";
    url = url + year;
    if (month != '')
    {
        url = url + "-";
        url = url + month;
    }

    url = url + ".txt";
    window.location=url;
}

function openARCFile(day, month, year)
{
    var url = "ARC-" + year + "-" + month + "-" + day + ".txt";
    window.location=url;
}

function openURL(urlname)
{
    window.location=urlname;
}

//
// The following javascript controls dynamic "alerts" for wind and rain
// values.  These alerts are based on metric values, if you use other units // you should change your values accordingly.
//

// This will grab all the current data from wview for the values that are
// we checking.

function changeColor() {
var windspeed = <!--windSpeed-->;
var hiwindspeed = <!--hiWindSpeed-->;
var rainvalue = <!--dailyRain-->;
var stormvalue = <!--stormRain-->;
var rainratevalue = <!--rainRate-->;
var hirainratevalue = <!--hiRainRate-->;

// Now we're assigning each element in our HTML page below
// according to it's ID so that we can change the background color
// appropriately according to our comparisons.

var windvar = document.getElementById('wind');
var hiwindvar = document.getElementById('hiwind');
var rainvar = document.getElementById('rain');
var stormvar = document.getElementById('storm');
var rainratevar = document.getElementById('rainrate');
var hirainratevar = document.getElementById('hirainrate');

//////////////WindSpeed Warning Check/////////////////////////

// Yellow Warning Value
if (windspeed >= 35 && windspeed < 50) {
windvar.style.backgroundColor = '#F2EE68';
}

// Orange Warning Value
if (windspeed >= 50 && windspeed < 85) {
windvar.style.backgroundColor = '#FFBB48';
}

// Red Warning Value
if (windspeed >= 85) {
windvar.style.backgroundColor = '#FF3B44';
}

//////////////High WindSpeed Warning Check/////////////////////////
if (hiwindspeed >= 35 && hiwindspeed < 50) {
hiwindvar.style.backgroundColor = '#F2EE68';
}

if (hiwindspeed >= 50 && hiwindspeed < 85) {
hiwindvar.style.backgroundColor = '#FFBB48';
}

if (hiwindspeed >= 85) {
hiwindvar.style.backgroundColor = '#FF3B44';
}

//////////////Rain Warning Check/////////////////////////

if (rainvalue >= 30 && rainvalue < 75) {
rainvar.style.backgroundColor = '#F2EE68';
}

if (rainvalue >= 75 && rainvalue < 100) {
rainvar.style.backgroundColor = '#FFBB48';
}

if (rainvalue >= 100) {
rainvar.style.backgroundColor = '#FF3B44';
}

//////////////Storm Rain Warning Check/////////////////////////

if (stormvalue >= 50 && stormvalue < 100) {
stormvar.style.backgroundColor = '#F2EE68';
}

if (stormvalue >= 100 && stormvalue < 150) {
stormvar.style.backgroundColor = '#FFBB48';
}

if (stormvalue >= 150) {
stormvar.style.backgroundColor = '#FF3B44';
}

//////////////Current Rain Rate Warning Check/////////////////////////

if (rainratevalue > 0 && rainratevalue < 15) {
rainratevar.style.backgroundColor = '#C9FFF6';
}

if (rainratevalue >= 15 && rainratevalue < 40) {
rainratevar.style.backgroundColor = '#F2EE68';
}

if (rainratevalue >= 40 && rainratevalue < 55) {
rainratevar.style.backgroundColor = '#FFBB48';
}

if (rainratevalue >= 55) {
rainratevar.style.backgroundColor = '#FF3B44';
}

//////////////High Rain Rate Warning Check/////////////////////////

if (hirainratevalue >= 15 && hirainratevalue < 40) {
hirainratevar.style.backgroundColor = '#F2EE68';
}

if (hirainratevalue >= 40 && hirainratevalue < 55) {
hirainratevar.style.backgroundColor = '#FFBB48';
}

if (hirainratevalue >= 55) {
hirainratevar.style.backgroundColor = '#FF3B44';
}


}

// -->
  </script>

</head>

<body onload="changeColor();">

<div id="indexpage">
<form method="post">
<h4 class="headingindex"><a href="index.htm">Welcome to WView Weather</a></h4>

<h5 class="headingindex">
<br/><br/>
Weather Observations at Port Alberni, B.C. as of: <!--stationDate--> <!--stationTime--><br/>
Latitude 49.2N - Longitude 124.8W - Elevation 155ft - 47m<br/>
<a href="http://www.sky-watch.com/weekly.html#ASTRONOMICAL_SUNRISE">Astronimical Sunrise</a>: <!--astroriseTime--> - <a href="http://www.sky-watch.com/weekly.html#ASTRONOMICAL_SUNRISE">Astronomical Sunset</a> <!--astrosetTime--><br/>
<a href="http://www.sky-watch.com/weekly.html#ASTRONOMICAL_SUNRISE">Civil Sunrise</a>:  <!--civilriseTime--> - <a href="http://www.sky-watch.com/weekly.html#ASTRONOMICAL_SUNRISE">Civil Sunset</a> <!--civilsetTime--><br/>
Sunrise:<!--sunriseTime--> - Sunset:<!--sunsetTime--><br/>
Moon: <!--moonPhase--><br/></h5>

    <ul id="minitabs">
    <li><a href="Current.htm">Current Conditions</a></li>
    <li><a href="almanac.htm">Almanac</a></li>
    <li><a href="Daily.htm">Last 24 Hours</a></li>
    <li><a href="Monthly.htm">Last Month</a></li>
    <li><a href="Yearly.htm">Last Year</a></li>
    <li><a href="#">Insert Link to Forecast</a></li>
    </ul>

<hr/>
<div id="tabledata">

            <div class="column" id="col1">
               
               <div class="odd">
                      <span>Temperature<br/><!--outsideTemp--><!--tempUnit-->  </span>
               </div>
               
               <div class="even">
               <span>Wind Chill<br/><!--windChill--><!--tempUnit--> </span>
               </div>
               
               <div class="odd">
                      <span>High Temp<br/><!--hiOutsideTemp--><!--tempUnit--> at <!--hiOutsideTempTime--></span>
               </div>
               
               <div class="even">
               <span>Low Temp<br/><!--lowOutsideTemp--><!--tempUnit--> at <!--lowOutsideTempTime--></span>
               </div>
               
               <div class="odd">
               <span>Low Wind Chill<br/><!--lowWindchill--><!--tempUnit--> at <!--lowWindchillTime--></span>
               </div>
               
               
                  </div>
                  
                  <div class="column" id="col2">
                  
                  
                    <div class="odd">
               <span>Barometer<br/><!--barometer--> hPa</span>
               </div>
               
               <div class="even">
               <span>High Bar<br/><!--hiBarometer--> hPa at <!--hiBarometerTime--></span>
               </div>
               
               <div class="odd">
                      <span>Low Bar<br/><!--lowBarometer--> hPa at <!--lowBarometerTime--></span>
               </div>
            
               <div class="even">
               <span>Est. Cloud Base<br/><!--cumulusBase-->&nbsp;<!--cumulusBaseUnit--></span>
               </div>
               
               <div class="odd">
                      <span>5min Wind Chill Avg.<br/><!--intervalAvgWindChill-->
                      &nbsp;<!--tempUnit--></span>
               </div>
               
 
               <div class="even" id="wind">
                       <span><strong>Wind</strong><br/><!--windDirection-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--windSpeed-->&nbsp;<!--windUnit--> </span>
               </div>
                    
               
            </div>

            <div class="column" id="col3">
                    
                    
                    <div class="odd" id="rain">
                      <span>Today's Rain<br/><!--dailyRain--><!--rainUnit--></span>
               </div>
                                   
               <div class="even" id="rainrate">
               <span>Current Rain Rate<br/>
                  <!--rainRate--><!--rateUnit--></span>
               </div>
               
               <div class="odd" id="hirainrate">
                      <span>High Rain Rate<br/><!--hiRainRate--><!--rateUnit--> @ <!--hiRainRateTime--></span>
               </div>
               
               <div class="even">
                      <span>&nbsp;</span>
               </div>
               
               <div class="odd" id="storm">
               <span>Rain Storm Total<br/><!--stormRain--><!--rainUnit--> since <br/> <!--stormStart--></span>
               </div>
               
            </div>
                     
            <div class="column" id="col4">
                    
                    <div class="odd">
                      <span>Dewpoint<br/><!--outsideDewPt--><!--tempUnit--></span>
               </div>
               
               <div class="even">
                      <span>High Dewpoint<br/><!--hiDewpoint--><!--tempUnit--> at <!--hiDewpointTime--></span>
               </div>
                  
                  <div class="odd">
                      <span>Low Dewpoint<br/><!--lowDewpoint--><!--tempUnit--> at <!--lowDewpointTime--></span>
               </div>
               
               <div class="even">
               <span>Air Density<br/><!--airDensity-->&nbsp;<!--airDensityUnit--></span>
               </div>
               
               <div class="odd">
                      <span>5min Wind Avg.<br/><!--intervalAvgWindSpeed-->
                      &nbsp;<!--windUnit--></span>
               </div>
   
               <div class="even" id="hiwind">
                      <span><strong>High Wind</strong><br/><!--hiWindSpeed--> <!--windUnit--> at <!--hiWindSpeedTime--> from <!--dayhighwinddir--></span>
               </div>
               
               
               
            </div>
                     
            <div class="column" id="col5">
                    
                 <div class="odd">
                      <span>Humidity<br/><!--outsideHumidity--><!--humUnit--></span>
               </div>
               
               <div class="even">
               <span>Heat Index<br/><!--outsideHeatIndex--><!--tempUnit--></span>
               </div>
               
               <div class="odd">
                      <span>High Heat Ind<br/><!--hiHeatindex--><!--tempUnit--> at <!--hiHeatindexTime--></span>
               </div>

               <div class="even">
                      <span>High Humidity<br/><!--hiHumidity--><!--humUnit--> at <!--hiHumTime--></span>
               </div>
               
               <div class="odd">
               <span>Low Humidity<br/><!--lowHumidity--><!--humUnit--> at <!--lowHumTime--></span>
               </div>
               
               
                    
            </div>
</div>

<p id="forecast"><img src="<!--forecastIconFile-->" height="50" width="80" alt="Forecast Icon"/><br/> <!--forecastRule--> </p>

<div id="imagesmain">

      <div>
          <span><img src="tempdaycomp.png" width="300" height="180" alt="24hr Temp Dew Chart"/>&nbsp;
          <img src="tempdial.png" width="160" height="160" alt="Current Temperature Dial"/>&nbsp;
          <img src="heatchillcomp.png" width="300" height="180" alt="24hr Chill Heat Chart"/></span>
       </div>
       
      <div>
         <span><img src="rainday.png" width="300" height="180" alt="24hr Rain Chart"/>&nbsp;
         <img src="netRainDay.png" width="160" height="160" alt="24hr Rain Dial"/>&nbsp;
         <img src="baromday.png" width="300" height="180" alt="24hr Barometer Trend"/></span>
      </div>

      <div>
         <img src="netRainMonth.png" width="160" height="160" alt="30day Rain Dial"/>
         <img src="wind.png" width="160" height="160" alt="Current Wind Dial"/>
         <img src="humiddial.png" width="160" height="160" alt="Current Humidity Dial"/>
         <img src="netRainYear.png" width="160" height="160" alt="Year Rain Dial"/>
         
      </div>      
</div>

<div id="satellite">
          
          <div id="satheaddiv">
          <span class="sathead">NorthEast Pacific Jetstream</span>
          <span class="sathead">Western Canada Satellite</span>
          <span class="sathead">Victoria Radar</span>
          </div>
         
         <a href="http://squall.sfsu.edu/gif/jetsat_pac_00.gif">
         <img src="jetsat_pac_00.gif" height="200" width="250" alt="JetStream Image Unavailable"/>
         </a>
         <span id="satbox">
         <a href="http://weatheroffice.ec.gc.ca/data/satellite/goes_wcan_1070_100.jpg">
         <img src="goes_wcan.jpg" height="200" width="200" alt="EnviroCanSat Image Unavailable"/>
         </a>
         </span>
         
         <a href="http://weatheroffice.ec.gc.ca/radar/index_e.html?id=XSI">
         <img src="radar_image.gif" height="200" width="250" alt="Click here if RADAR missing"/>
         </a>
         
         
      
<div id="textlinks"><p>NOAA Summaries:&nbsp;
         <script type="text/javascript">
         createMonthlySelect("month");
         createYearlySelect("year"); 
         </script>
         <input type="button" value="Monthly Report" onclick="openNoaaFile(this.form.month.value, this.form.year.value)"/>
         <input type="button" value="Yearly Report " onclick="openNoaaFile('',this.form.year.value)"/><br/>
     Browse Archive Records:
         <script type="text/javascript">
         createDaySelect("day");
            createMonthlySelect("month1");
         createYearlySelect("year1");
         </script>
         <input type="button" value="Browse Day Records" onclick="openARCFile(this.form.day.value, this.form.month1.value, this.form.year1.value)"/>
         </p>
         <p> Hosted By: <a href="http://www.murkyview.com/">Murkyview.com - Striving for Perspective</a></p>
         
         <p> Data Feed By: <a href="http://www.wviewweather.com"><!--wviewVersion--> from wviewweather.com</a> </p>
         <p>Uptime: <!--wviewUpTime--></p>
         
   
   
   <div>
      
      
         <div id="adblockleft">
         
            <p><a href="http://www.worldweatherstation.tk">Member of World Weather Stations</a></p>
            <p><a href="http://www.awekas.at/en">Automatic Weather Map System</a></p>            
            <p>and</p>
            <p><a href="http://www.findu.com/cgi-bin/wxpage.cgi?call=CW4610!Port%20Alberni&amp;radar=***&amp;last=120&amp;units=metric">Citizen Weather Observer Program</a></p>      
            
            <div id="adblockcenter">
               <a href="http://www.wunderground.com/weatherstation/WXDailyHistory.asp?ID=IBCPORTA1">
               <img src="http://banners.wunderground.com/cgi-bin/banner/ban/wxBanner?bannertype=WeatherStationCount&amp;weatherstationcount=IBCPORTA1" width="160" height="163" alt="Weather Underground"/>
               </a>
            </div>
            
            <div id="adblockright">      
                              <p>
               <!-- Site Meter -->
               <script type="text/javascript" src="http://s17.sitemeter.com/js/counter.js?site=s17alberniweather">
               </script>
               <!-- Copyright (c)2006 Site Meter -->
               </p>
               <p>
               <a href="http://weather.chrisale.info/weatherrss.xml" title="PA Weather Feed"><img src="http://www.murkyview.com/images/xml.gif" style="border: 0px" alt="Comments RSS Feed" width="36" height="14"/></a>
               </p>
               <p>
                   <a href="http://validator.w3.org/check?uri=referer"><img
                 src="http://www.w3.org/Icons/valid-xhtml10"
                 alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
                 </p>
                 <p>
                <a href="http://jigsaw.w3.org/css-validator/check/referer">
                 <img style="border:0;width:88px;height:31px"
                   src="http://jigsaw.w3.org/css-validator/images/vcss"
                   alt="Valid CSS!" />
                </a>
               </p>
            </div>
         
         </div>
   <div id="webring">
      <script type="text/javascript" src="http://ss.webring.com/navbar?f=j;y=chrisale;u=defurl"></script>
      <noscript><table cellspacing="0" border="2">
      <tr><td><table cellpadding="2" cellspacing="0" border="0"><tr><td align="center">
      This site is a member of WebRing.
      To browse visit <a href="http://ss.webring.com/navbar?f=l;y=chrisale;u=defurl">here</a>.</td></tr></table></td></tr></table></noscript>
   </div>   
   
   </div>
</div>
</div>
      

</form>
</div>
</body>
</html>


Last edited by chrisale on Sun Feb 12, 2006 10:30 pm; edited 2 times in total
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:41 pm    Post subject: Current_Conditions.htx Reply with quote

Here is my Current_Conditions.htx file:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="refresh" content="60";>
<TITLE>Current Conditions - Port Alberni, BC</TITLE>

<link href="weatherstyle.css" rel="stylesheet" type="text/css">

</HEAD>
<BODY>

<div id="page">

<div id="head">

<h2>Port Alberni, BC</h2>
<h2>Current Conditions </h2>



<h5>on <!--stationDate--> at <!--stationTime--> <BR>
<span class="small">Updated Every 60 Seconds</span> <br>
<a href="http://www.alberniweather.ca">Weather Summary</a></h5>

</div>

<div id="current">

<div id="curcol1">
   <div>Temp:</div>
   <div>Humidity:</div>
   <div>Dewpoint:</div>
   <div>Rain Rate:</div>
   <div>Monthly Rain:</div>
   <div>Yearly Rain:</div>
</div>

<div id="curcol2">
   <div><!--outsideTemp--><!--tempUnit--></div>
   <div><!--outsideHumidity--><!--humUnit--></div>
   <div><!--outsideDewPt--><!--tempUnit--></div>
   <div><!--rainRate--> mm/hr</div>
   <div><!--monthlyRain--> mm</div>
   <div><!--totalRain--> mm</div>
</div>

<div id="curcol3">
   <div>Wind Chill:</div>
   <div>Heat Index:</div>
   <div>Barometer:</div>
   <div>Today's Rain:</div>
   <div>Storm Total:</div>
   <div>Wind:</div>
</div>

<div id="curcol4">
   <div><!--windChill--><!--tempUnit--></div>
   <div><!--outsideHeatIndex--><!--tempUnit--></div>
   <div><!--barometer--> hPa</div>
   <div><!--dailyRain-->  mm</div>
   <div><!--stormRain-->  mm</div>
   <div><!--windDirection--> at <!--windSpeed--><!--windUnit--></div>
</div>

</div>

</div>
</BODY>
</HTML>

Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:44 pm    Post subject: Daily.htx Reply with quote

Here is the Daily.htx file

again, double check the images and values for rain and barometer as I might have custom values in there.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Last 24 Hours Weather: Port_Alberni, British_Columbia</title>
</head>
<meta http-equiv="refresh" content="1800";>
<script language="JavaScript">

function openURL(urlname)
    {
    window.location=urlname;
    }

</script>

<link href="weatherstyle.css" type="text/css" rel="stylesheet">

<body>

   <div id="sumpage">
       

    <h4>Observations for the Last 24 Hours <br> vs. Yearly Averages<br>
    Port Alberni, British Columbia</h4>
 
    <h5><input type="button" value="Weather Summary" onclick="openURL('index.html')"><br>
    <!--stationDate--> <!--stationTime--></h5>

   

<div id="hiloblock1" class="hilocolumn">
      <div class="hilocol1">
      <div class="hilohead">Hi - Lo</div>
      <div>High Temp</div>
       <div>Low Temp</div>
       <div>High Humidity</div>
       <div>Low Humidity</div>
       <div>High Dewpoint</div>
       <div>Low Dewpoint</div>
       </div>
       
       <div class="hilocol2">
       <div class="hilohead"> Daily </div>
       <div><!--hiOutsideTemp--><!--tempUnit--></div>
       <div><!--lowOutsideTemp--><!--tempUnit--></div>
       <div><!--hiHumidity--><!--humUnit--></div>
       <div><!--lowHumidity--><!--humUnit--></div>
       <div><!--hiDewpoint--><!--tempUnit--></div>
       <div><!--lowDewpoint--><!--tempUnit--></div>
      </div>
      
      <div class="hilocol3">
      <div class="hilohead"> Yearly </div>
       <div><!--hiYearlyOutsideTemp--><!--tempUnit--></div>
       <div><!--lowYearlyOutsideTemp--><!--tempUnit--></div>
      <div><!--hiYearlyHumidity--><!--humUnit--></div>
      <div><!--lowYearlyHumidity--><!--humUnit--></div>
      <div><!--hiYearlyDewpoint--><!--tempUnit--></div>
      <div><!--lowYearlyDewpoint--><!--tempUnit--></div>
      </div>
</div>   

<div id="hiloblock2" class="hilocolumn">
      <div class="hilocol1">
      <div class="hilohead">Hi - Lo</div>      
       <div>High Wind Speed</div>
       <div>High Barometer</div>
       <div>Low Barometer</div>
       <div>Rain Total</div>
       <div>High Rain Rate</div>

       <div>Low Wind Chill</div>
       </div>
       
       <div class="hilocol2">
       <div class="hilohead"> Daily </div>
       <div><!--hiWindSpeed-->&nbsp;<!--windUnit--></div>
       <div><!--hiBarometer-->&nbsp; hPa</div>
       <div><!--lowBarometer-->&nbsp; hPa</div>
       <div><!--dailyRain--> mm</div>
       <div><!--hiRainRate--> mm/hr</div>

       <div><!--lowWindchill--><!--tempUnit--></div>
      </div>
      
      <div class="hilocol3">
      <div class="hilohead"> Yearly </div>
      <div><!--hiYearlyWindSpeed-->&nbsp;<!--windUnit--></div>
      <div><!--hiYearlyBarometer-->&nbsp;<!--barUnit--></div>
      <div><!--lowYearlyBarometer-->&nbsp;<!--barUnit--></div>
      <div><!--totalRain--> mm</div>
      <div><!--hiYearlyRainRate--> mm/hr</div>

      <div><!--lowYearlyWindchill--><!--tempUnit--></div>
      </div>
</div>       
      
   <div id="dailycharts">
    <div id="chartscol1">
    <img src="tempdaycomp.png" width="300" height="180" alt="24hr Temp Dew Chart">
    <img src="wspeedday.png" width="300" height="180" alt="24hr Wind Speed Chart">
    <img src="wdirday.png" width="300" height="180" alt="24hr Wind DIrection Chart">
    <img src="heatchillcomp.png" width="300" height="180" alt="24hr Chill Heat Chart">
     <img src="intempdaycomp.png" width="300" height="180" alt="24hr Inside Temp Chart">


   </div>
   
    <div id="chartscol2">
    <img src="baromday.png" width="300" height="180" alt="24hr Barometer Trend Chart">
   <img src="hiwspeedday.png" width="300" height="180" alt="24hr Hi Windspeed Chart">
   <img src="rainday.png" width="300" height="180" alt="24hr Rain Rate Chart">
   <img src="humidday.png" width="300" height="180" alt="24hr Humidity Trend Chart">
   
      </div>
      </div>


</div>
</BODY>
</HTML>
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:45 pm    Post subject: Monthly.htx Reply with quote

Here is the Monthly.htx file


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Last 24 Hours Weather: Port_Alberni, British_Columbia</title>
</head>
<meta http-equiv="refresh" content="1800";>
<script language="JavaScript">

function openURL(urlname)
    {
    window.location=urlname;
    }

</script>

<link href="weatherstyle.css" type="text/css" rel="stylesheet">

<body>

   <div id="sumpage">
       

    <h4>Observations for the Last 28 Days <br> vs. Yearly Averages<br>
    Port Alberni, British Columbia</h4>
 
    <h5><input type="button" value="Weather Summary" onclick="openURL('index.html')"><br>
    <!--stationDate--> <!--stationTime--></h5>

   

<div id="hiloblock1" class="hilocolumn">
      <div class="hilocol1">
      <div class="hilohead">Hi - Lo</div>
      <div>High Temp</div>
       <div>Low Temp</div>
       <div>High Humidity</div>
       <div>Low Humidity</div>
       <div>High Dewpoint</div>
       <div>Low Dewpoint</div>
       </div>
       
       <div class="hilocol2">
       <div class="hilohead"> Monthly </div>
       <div><!--hiMonthlyOutsideTemp--><!--tempUnit--></div>
       <div><!--lowMonthlyOutsideTemp--><!--tempUnit--></div>
       <div><!--hiMonthlyHumidity--><!--humUnit--></div>
       <div><!--lowMonthlyHumidity--><!--humUnit--></div>
       <div><!--hiMonthlyDewpoint--><!--tempUnit--></div>
       <div><!--lowMonthlyDewpoint--><!--tempUnit--></div>
      </div>
      
      <div class="hilocol3">
      <div class="hilohead"> Yearly </div>
       <div><!--hiYearlyOutsideTemp--><!--tempUnit--></div>
       <div><!--lowYearlyOutsideTemp--><!--tempUnit--></div>
      <div><!--hiYearlyHumidity--><!--humUnit--></div>
      <div><!--lowYearlyHumidity--><!--humUnit--></div>
      <div><!--hiYearlyDewpoint--><!--tempUnit--></div>
      <div><!--lowYearlyDewpoint--><!--tempUnit--></div>
      </div>
</div>   

<div id="hiloblock2" class="hilocolumn">
      <div class="hilocol1">
      <div class="hilohead">Hi - Lo</div>      
       <div>High Wind Speed</div>
       <div>High Barometer</div>
       <div>Low Barometer</div>
       <div>Rain Total</div>
       <div>High Rain Rate</div>
       <div>Low Wind Chill</div>
       </div>
       
       <div class="hilocol2">
       <div class="hilohead"> Monthly </div>
       <div><!--hiMonthlyWindSpeed-->&nbsp;<!--windUnit--></div>
       <div><!--hiMonthlyBarometer-->&nbsp; hPa</div>
       <div><!--lowMonthlyBarometer-->&nbsp; hPa</div>
       <div><!--monthlyRain--> mm</div>
       <div><!--hiMonthlyRainRate--> mm/hr</div>

       <div><!--lowWindchill--><!--tempUnit--></div>
      </div>
      
      <div class="hilocol3">
      <div class="hilohead"> Yearly </div>
      <div><!--hiYearlyWindSpeed-->&nbsp;<!--windUnit--></div>
      <div><!--hiYearlyBarometer-->&nbsp; hPa</div>
      <div><!--lowYearlyBarometer-->&nbsp; hPa</div>
      <div><!--totalRain--> mm</div>
      <div><!--hiYearlyRainRate--> mm/hr</div>

      <div><!--lowYearlyWindchill--><!--tempUnit--></div>
      </div>
</div>       
      
   <div id="dailycharts">
    <div id="chartscol1">
    <img src="tempmonthcomp.png" width="300" height="180" alt="Month Temp Dew Chart">
   <img src="wspeedmonth.png" width="300" height="180" alt="Month WInd Speed Chart">
   <img src="wdirmonth.png" width="300" height="180" alt="Month Wind Diretion Chart">
   <img src="heatchillmonthcomp.png" width="300" height="180" alt="Month Chill Heat Chart">
   <img src="intempmonthcomp.png" width="300" height="180" alt="Month Inside Temp Chart">
   </div>
   
    <div id="chartscol2">
   <img src="barommonth.png" width="300" height="180" alt="Month Barometer Trend Chart">
   <img src="hiwspeedmonth.png" width="300" height="180" alt="Month Hi Windspeed Chart">
   <img src="rainmonth.png" width="300" height="180" alt="Month Rain Rate per Day Chart">
   <img src="humidmonth.png" width="300" height="180" alt="Month Humidity Trend Chart">
      </div>
      </div>


</div>
</BODY>
</HTML>
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:46 pm    Post subject: Yearly.htx Reply with quote

Here is the Yearly.htx file

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Last 24 Hours Weather: Port_Alberni, British_Columbia</title>
</head>
<meta http-equiv="refresh" content="1800";>
<script language="JavaScript">

function openURL(urlname)
    {
    window.location=urlname;
    }

</script>

<link href="weatherstyle.css" type="text/css" rel="stylesheet">

<body>

   <div id="sumpage">
       

    <h4>Observations for the Last Year<br>
    Port Alberni, British Columbia</h4>
 
    <h5><input type="button" value="Weather Summary" onclick="openURL('index.html')"><br>
    <!--stationDate--> <!--stationTime--></h5>

   

<div id="hiloblock1year" class="hilocolumn">
      <div class="hilocol1">
      <div class="hilohead">Hi - Lo</div>
      <div>High Temp</div>
       <div>Low Temp</div>
       <div>High Humidity</div>
       <div>Low Humidity</div>
       <div>High Dewpoint</div>
       <div>Low Dewpoint</div>
       </div>
      
      <div class="hilocol2">
      <div class="hilohead"> Yearly </div>
       <div><!--hiYearlyOutsideTemp--><!--tempUnit--></div>
       <div><!--lowYearlyOutsideTemp--><!--tempUnit--></div>
      <div><!--hiYearlyHumidity--><!--humUnit--></div>
      <div><!--lowYearlyHumidity--><!--humUnit--></div>
      <div><!--hiYearlyDewpoint--><!--tempUnit--></div>
      <div><!--lowYearlyDewpoint--><!--tempUnit--></div>
      </div>
</div>   

<div id="hiloblock2year" class="hilocolumn">
      <div class="hilocol1">
      <div class="hilohead">Hi - Lo</div>      
       <div>High Wind Speed</div>
       <div>High Barometer</div>
       <div>Low Barometer</div>
       <div>Rain Total</div>
       <div>High Rain Rate</div>
       <div>Low Wind Chill</div>
       </div>
      
      <div class="hilocol2">
      <div class="hilohead"> Yearly </div>
      <div><!--hiYearlyWindSpeed-->&nbsp;<!--windUnit--></div>
      <div><!--hiYearlyBarometer-->&nbsp; hPa</div>
      <div><!--lowYearlyBarometer-->&nbsp; hPa</div>
      <div><!--totalRain--> mm</div>
      <div><!--hiYearlyRainRate--> mm/hr</div>

      <div><!--lowYearlyWindchill--><!--tempUnit--></div>
      </div>
</div>       
      
   <div id="dailycharts">
    <div id="chartscol1">
    <img src="tempyear.png" width="300" height="180" alt="Year Temp Dew Chart">
   <img src="wspeedyear.png" width="300" height="180" alt="Year Wind Speed Chart">
   <img src="wdiryear.png" width="300" height="180" alt="Year Wind Direction Chart">
   <img src="hindexyear.png" width="300" height="180" alt="Year Heat Chart">
   <img src="wchillyear.png" width="300" height="180" alt="Year Chill Chart">

   </div>
   
    <div id="chartscol2">
   <img src="baromyear.png" width="300" height="180" alt="Year Barometer Trend Chart">
   <img src="hiwspeedyear.png" width="300" height="180" alt="Year High Windspeed Chart">
   <img src="humidyear.png" width="300" height="180" alt="Year Humidity Trend Chart">
   <img src="dewyear.png" width="300" height="180" alt="Year Dewpoint Trend Chart">
   <img src="rainyear.png" width="300" height="180" alt="Year Rain per Week Chart">
      </div>
      </div>


</div>
</BODY>
</HTML>
Back to top
View user's profile Send private message MSN Messenger
chrisale



Joined: 09 Nov 2005
Posts: 187

PostPosted: Tue Jan 17, 2006 12:46 pm    Post subject: almanac.htx Reply with quote

and finally here is the almanac.htx file:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Weather Almanac: Port_Alberni, British_Columbia</title>
</head>
<meta http-equiv="refresh" content="1800";>
<script language="JavaScript">

function openURL(urlname)
    {
    window.location=urlname;
    }

</script>

<link href="weatherstyle.css" type="text/css" rel="stylesheet">

<body>

   <div id="almpage">
       

    <h4> Port Alberni, British Columbia <br> Weather Almanac<br>Sunrise:<!--sunriseTime--> - Sunset:<!--sunsetTime--></h4>
 
    <h5><input type="button" value="Weather Summary" onclick="openURL('index.html')"><br>
    <!--stationDate--> <!--stationTime--></h5>

   <div id="almtemp" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Temperature
         </div>
         
         <div class="almcol1">
            <div>Current:</div>
             <div>Hour Average:</div>
             <div>Hour Change:</div>
             <div>Day Average:</div>
             <div>Day Change:</div>
             <div>Day High:</div>
             <div>Day Low:</div>
             <div>Week Average:</div>
             <div>Week Change:</div>
             <div>Month Average:</div>
             <div>Month High:</div>
             <div>Month Low:</div>
             <div>Year Average:</div>
             <div>Year High:</div>
             <div>Year Low:</div>
          </div>
       
          <div class="almcol2">
             <div><!--outsideTemp--><!--tempUnit--></div>
             <div><!--houravgtemp--><!--tempUnit--></div>
             <div><!--hourchangetemp--><!--tempUnit--></div>
             <div><!--dayavgtemp--><!--tempUnit--></div>
             <div><!--daychangetemp--><!--tempUnit--></div>
             <div><!--hiOutsideTemp--><!--tempUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiOutsideTempTime--></div>
             <div><!--lowOutsideTemp--><!--tempUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--lowOutsideTempTime--></div>
             <div><!--weekavgtemp--><!--tempUnit--></div>
             <div><!--weekchangetemp--><!--tempUnit--></div>
             <div><!--monthtodateavgtemp--><!--tempUnit--></div>
             <div><!--hiMonthlyOutsideTemp--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxtempdate--></div>
             <div><!--lowMonthlyOutsideTemp--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemintempdate--></div>
             <div><!--yeartodateavgtemp--><!--tempUnit--></div>
             <div><!--hiYearlyOutsideTemp--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxtempdate--></div>
             <div><!--lowYearlyOutsideTemp--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemintempdate--></div>
             
          </div>
       </div>
    
   </div>   

   <div id="almdew" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Dew Point
         </div>
         
         <div class="almcol1">
            <div>Current:</div>
             <div>Hour Average:</div>
             <div>Hour Change:</div>
             <div>Day Average:</div>
             <div>Day Change:</div>
             <div>Day High:</div>
             <div>Day Low:</div>
             <div>Week Average:</div>
             <div>Week Change:</div>
             <div>Month Average:</div>
             <div>Month High:</div>
             <div>Month Low:</div>
             <div>Year Average:</div>
             <div>Year High:</div>
             <div>Year Low:</div>
          </div>
       
          <div class="almcol2">
             <div><!--outsideDewPt--><!--tempUnit--></div>
             <div><!--houravgdewpt--><!--tempUnit--></div>
             <div><!--hourchangedewpt--><!--tempUnit--></div>
             <div><!--dayavgdewpt--><!--tempUnit--></div>
             <div><!--daychangedewpt--><!--tempUnit--></div>
             <div><!--hiDewpoint--><!--tempUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiDewpointTime--></div>
             <div><!--lowDewpoint--><!--tempUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--lowDewpointTime--></div>
             <div><!--weekavgdewpt--><!--tempUnit--></div>
             <div><!--weekchangedewpt--><!--tempUnit--></div>
             <div><!--monthtodateavgdewpt--><!--tempUnit--></div>
             <div><!--hiMonthlyDewpoint--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxdewptdate--></div>
             <div><!--lowMonthlyDewpoint--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemindewptdate--></div>
             <div><!--yeartodateavgdewpt--><!--tempUnit--></div>
             <div><!--hiYearlyDewpoint--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxdewptdate--></div>
             <div><!--lowYearlyDewpoint--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemindewptdate--></div>
          </div>
       </div>
    
   </div>   
   
   <div id="almhum" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Humidity
         </div>
         
         <div class="almcol1">
            <div>Current:</div>
             <div>Hour Average:</div>
             <div>Hour Change:</div>
             <div>Day Average:</div>
             <div>Day Change:</div>
             <div>Day High:</div>
             <div>Day Low:</div>
             <div>Week Average:</div>
             <div>Week Change:</div>
             <div>Month Average:</div>
             <div>Month High:</div>
             <div>Month Low:</div>
             <div>Year Average:</div>
             <div>Year High:</div>
             <div>Year Low:</div>
          </div>
       
          <div class="almcol2">
             <div><!--outsideHumidity--><!--humUnit--></div>
             <div><!--houravghumid--><!--humUnit--></div>
             <div><!--hourchangehumid--><!--humUnit--></div>
             <div><!--dayavghumid--><!--humUnit--></div>
             <div><!--daychangehumid--><!--humUnit--></div>
             <div><!--hiHumidity--><!--humUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiHumTime--></div>
             <div><!--lowHumidity--><!--humUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--lowHumTime--></div>
             <div><!--weekavghumid--><!--humUnit--></div>
             <div><!--weekchangehumid--><!--humUnit--></div>
             <div><!--monthtodateavghumid--><!--humUnit--></div>
             <div><!--hiMonthlyHumidity--><!--humUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxhumiddate--></div>
             <div><!--lowMonthlyHumidity--><!--humUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodateminhumiddate--></div>
             <div><!--yeartodateavghumid--><!--humUnit--></div>
             <div><!--hiYearlyHumidity--><!--humUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxhumiddate--></div>
             <div><!--lowYearlyHumidity--><!--humUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodateminhumiddate--></div>
          </div>
       </div>
    
   </div>   

   <div id="almwindchill" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Wind Chill
         </div>
         
         <div class="almcol1">
            <div>Current:</div>
             <div>Day Low:</div>
             <div>Month Low:</div>
             <div>Year Low:</div>

          </div>
       
          <div class="almcol2">
             <div><!--windChill--><!--tempUnit--></div>
             <div><!--lowWindchill--><!--tempUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--lowWindchillTime--></div>
             <div><!--lowMonthlyWindchill--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodateminchilldate--></div>
             <div><!--lowYearlyWindchill--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodateminchilldate--></div>

          </div>
       </div>
    
   </div>   

   <div id="almheat" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Heat Index
         </div>
         
         <div class="almcol1">
            <div>Current:</div>
             <div>Day High:</div>
             <div>Month High:</div>
             <div>Year High:</div>

          </div>
       
          <div class="almcol2">
             <div><!--outsideHeatIndex--><!--tempUnit--></div>
             <div><!--hiHeatindex--><!--tempUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiHeatindexTime--></div>
             <div><!--hiMonthlyHeatindex--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxheatdate--></div>
             <div><!--hiYearlyHeatindex--><!--tempUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxheatdate--></div>

          </div>
       </div>
    
   </div>   
   
   <div id="almwindrun" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Wind Run
         </div>
         
         <div class="almcol1">
            <div>Hour</div>
             <div>Day</div>
             <div>Week</div>
             <div>Month</div>
             <div>Year</div>

          </div>
       
          <div class="almcol2">
             <div><!--hourwindrun--></div>
             <div><!--daywindrun--></div>
             <div><!--weekwindrun--></div>
             <div><!--monthtodatewindrun--></div>
             <div><!--yeartodatewindrun--></div>
          </div>
       </div>
    
   </div>   
   
   <div id="almwind" class="hilocolumn">
      
      <div class="almwindcol">
      
         <div class="almanachead">Wind
         </div>
         
         <div class="almcol1">
            <div>Current Direction:</div>
             <div>Hour Dom Direction:</div>
             <div>Hour Direction Change:</div>
             <div>Day Dom Direction:</div>
             <div>Day Direction Change:</div>
             <div>Week Dom Direction:</div>
             <div>Week Direction Change:</div>
             <div>Month Dom Direction:</div>
             <div>Year Dom Direction:</div>
             <div>Current Speed:</div>
             <div>Hour Avg Speed:</div>
             <div>Hour Speed Change:</div>
             <div>Day Avg Speed:</div>
             <div>Day Speed Change:</div>
             <div>Day High Speed:</div>
             <div>Week Avg Speed:</div>
             <div>Week Speed Change:</div>
             <div>Month Avg Speed:</div>
             <div>Month High Speed:</div>
             <div>Year Avg Speed:</div>
             <div>Year High Speed:</div>
          </div>
       
          <div class="almwindcol2">
             <div><!--windDirectionDegrees--> °</div>
             <div><!--hourdomwinddir--> °</div>
             <div><!--hourchangewinddir--> °</div>
             <div><!--daydomwinddir--> °</div>
             <div><!--daychangewinddir--> °</div>
             <div><!--weekdomwinddir--> °</div>
             <div><!--weekchangewinddir--> °</div>
             <div><!--monthtodatedomwinddir--> °</div>
             <div><!--yeartodatedomwinddir--> °</div>
             <div><!--windSpeed--><!--windUnit--></div>
             <div><!--houravgwind--><!--windUnit--></div>
             <div><!--hourchangewind--><!--windUnit--></div>
             <div><!--dayavgwind--><!--windUnit--></div>
             <div><!--daychangewind--><!--windUnit--></div>
             <div><!--hiWindSpeed--><!--windUnit-->&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiWindSpeedTime--></div>
             <div><!--weekavgwind--><!--windUnit--></div>
             <div><!--weekchangewind--><!--windUnit--></div>
             <div><!--monthtodateavgwind--><!--windUnit--></div>
             <div><!--hiMonthlyWindSpeed--><!--windUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxgustdate--></div>
             <div><!--yeartodateavgwind--><!--windUnit--></div>
             <div><!--hiYearlyWindSpeed--><!--windUnit-->&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxgustdate--></div>

          </div>
       </div>
    
   </div>   

   <div id="almbar" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Barometer
         </div>
         
         <div class="almcol1">
            <div>Current:</div>
             <div>Hour Average:</div>
             <div>Hour Change:</div>
             <div>Day Average:</div>
             <div>Day Change:</div>
             <div>Day High:</div>
             <div>Day Low:</div>
             <div>Week Average:</div>
             <div>Week Change:</div>
             <div>Month Average:</div>
             <div>Month High:</div>
             <div>Month Low:</div>
             <div>Year Average:</div>
             <div>Year High:</div>
             <div>Year Low:</div>
          </div>
       
          <div class="almcol2">
             <div><!--barometer--> hPa</div>
             <div><!--houravgbarom--> hPa</div>
             <div><!--hourchangebarom--> hPa</div>
             <div><!--dayavgbarom--> hPa</div>
             <div><!--daychangebarom--> hPa</div>
             <div><!--hiBarometer--> hPa&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiBarometerTime--></div>
             <div><!--lowBarometer--> hPa&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--lowBarometerTime--></div>
             <div><!--weekavgbarom--> hPa</div>
             <div><!--weekchangebarom--> hPa</div>
             <div><!--monthtodateavgbarom--> hPa</div>
             <div><!--hiMonthlyBarometer--> hPa&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxbaromdate--></div>
             <div><!--lowMonthlyBarometer--> hPa&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodateminbaromdate--></div>
             <div><!--yeartodateavgbarom--> hPa</div>
             <div><!--hiYearlyBarometer--> hPa&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxbaromdate--></div>
             <div><!--lowYearlyBarometer--> hPa&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodateminbaromdate--></div>
          </div>
       </div>
    
   </div>   
   
   <div id="almrain" class="hilocolumn">
      
      <div class="almcol">
      
         <div class="almanachead">Rain
         </div>
         
         <div class="almcol1">
            <div>Rate:</div>
             <div>Day:</div>
             <div>Storm:</div>
             <div>Day High Rate:</div>
             <div>Month:</div>
             <div>Month High Rate:</div>
             <div>Year:</div>
             <div>Year High Rate</div>
          </div>
       
          <div class="almcol2">
             <div><!--rainRate--> mm/hr</div>
             <div><!--dailyRain--> mm</div>
             <div><!--stormRain-->  mm</div>
             <div><!--hiRainRate-->  mm/hr&nbsp;&nbsp;at&nbsp;&nbsp;
                        <!--hiRainRateTime--></div>
             <div><!--monthlyRain--> mm</div>
             <div><!--hiMonthlyRainRate-->  mm/hr&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--monthtodatemaxrainratedate--></div>
             <div><!--totalRain-->  mm</div>
             <div><!--hiYearlyRainRate-->  mm/hr&nbsp;&nbsp;on&nbsp;&nbsp;
                        <!--yeartodatemaxrainratedate--></div>
          </div>
       </div>
    
   </div>
   </div>

</div>
</BODY>
</HTML>
Back to top
View user's profile Send private message MSN Messenger
Display posts from previous:   
Post new topic   Reply to topic    wviewweather.com Forum Index -> Web Sites and HTML Templates All times are GMT - 6 Hours
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group