View source for Editing content of a webpage using either HTML or Script

=Introduction=
Essentially, HyperText Mark-up Language is for describing the content of a web page. The elements available in the language can identify the type of content (e.g. anchors, headings, sections, articles, asides, code, audio, button, caption, table, form, input, navigation, images, video and other media).

In some circumstances, the page needs to be dynamic, i.e. we need to be able to change part of the content.  This article shows two ways of changing Cumulus derived content. Elsewhere on this Wiki, there are 3rd party web applications for displaying a year's observations in a calendar summary format, for frequently updated 'now' reporting, and for displaying weather graphically.  Other dynamic pages such as those processing forms are outside the scope of this article.

If a web page change simply involves inserting a different object (e.g. an embedded web page, a text file, or an image), and that object is available, then HTML provides a mechanism for changing the content without using a script (Pure HTML example below).

For more flexibility in changing the content of a HTML page, there can be a call to a JavaScript code (Script example below) and that can do the same as pure HTML and more advanced manipulation. Although a particular person may choose not to enable it, JavaScript is available in most modern browsers across most hardware platforms (including smart phones).  The browser will interpret the instuction in the script normally after it has loaded the initial direct HTML content.

Finally, the server that hosts  a web page may offer a language that allows a script to be followed that results in a set of instructions being followed to generate some HTML code that is then sent to the user's browser.  One example is PHP and again there are PHP using routines elsewhere in this Wiki.
[[Category:WebTips]][[User:Sfws|Sfws]] 17:02, 28 November 2012 (UTC)

===Pure HTML example===
<pre>   <!-- Large Image Position -->
	<iframe src="images/tempm.png" name="graphs" title="Weather Graphs" width="900" height="400">
	Your browser settings prohibit the 'iframe' element<img src="images/tempm.png" id="graphs"
 title="Weather Graph" alt="Monthly temperature trend graph" width="750" height="300"></iframe>
	<!-- IMAGES THUMBNAILS -->
	<table id="Graph_menu" title="Small images for all observation types">
		<tr><th>LAST MONTH</th><td colspan="2" class="labels td-data">Select from graphs</td>
                <th colspan="2"> LAST <#graphperiod>&nbsp;HOURS </th>
		</tr><tr>
			<td title="Min/Max/Average" class="td_thumbnails"><a target="graphs"
 href="images/tempm.png"><img src="images/tempmsm.png" alt="Temp Min/Max Graph Thumbnail"/></a></td>
			<td colspan="2" rowspan="2">These graphs present:<br>temperature,<br> pressure,
 rainfall, and<br>wind speed trends<br>
 for either the last <#graphperiod>&nbsp;hours or<br> the last month (as shown on X axis).<br>
<em>Click on a thumbnail<br> to show related large graph.</em> </td>
			<td title="outside temp" class="td_thumbnails"><a target="graphs"
 href="images/temp.png"><img src="images/tempsm.png" alt="Temperature Graph Thumbnail"/></a></td>
			<td title="Relative Humidity" class="td_thumbnails"><a target="graphs"
 href="images/hum.png"><img src="images/humsm.png" alt="Humidity Graph Thumbnail"/></a></td>
		</tr><tr>
			<td title="Histogram of daily rain" class="td_thumbnails"><a target="graphs"
 href="images/raind.png"><img src="images/raindsm.png" alt="Daily Rain Graph Thumbnail"/></a></td>
<!-- text spans this cell -->
			<td title="rainfall rate" class="td_thumbnails"><a target="graphs"
 href="images/rain.png"><img src="images/rainsm.png" alt="Rain Graph Thumbnail"/></a></td>
			<td title="Rain plotted against time" class="td_thumbnails"><a target="graphs"
 href="images/raint.png"><img src="images/raintsm.png" alt="Today's Rainfall Graph Thumbnail"/></a></td>
		</tr><tr>
			<td colspan="2" class="box"><div class="p1"><img src="static_images/cumuluslogo.gif"
 title="logo for cumulus software" alt="Picture of a clumulus cloud with the words 'powered by cumulus'">
<br>Graphs<br>uploaded<br><#shortdayname> <#update></div></td>
			<td title="pressure" class="td_thumbnails"><a target="graphs"
 href="images/press.png"><img src="images/presssm.png" alt="Pressure Graph Thumbnail"/></a></td>
			<td title="wind speed" class="td_thumbnails"><a target="graphs"
 href="images/wind.png"><img src="images/windsm.png" alt="Wind Graph Thumbnail"/></a></td>
			<td class="td_thumbnails" title="wind direction"><a target="graphs"
 href="images/windd.png"><img src="images/winddsm.png" alt="Wind Direction Thumbnail"/></a></td>
		</tr></table></pre>
This extract from HTML code for 'trendsT.htm' displays a large graph in the HTML element 'iframe' and then displays a number of small thumbnails generated by Cumulus. These are grouped according to the time period they cover. The 'a' HTML element round each of the small graphs means that clicking that image causes its larger version to be displayed in the iframe.
If you want to copy this code, note the 'target' attribute in the 'a' (anchor) element refers to the 'name' attribute in the 'iframe' element.
===Script Example===
<pre>
<script type="text/javascript">
function changeImage(im) {document.images["graphs"].src = im + "?" + new Date().getTime();}
</script></pre>
NOTE: In this version, a query string is used containing the time.  A query string is something that starts with a question mark and follows a Universal Resource Locator (URL). The URL tells the browser where to find the (image) file it is being asked to load. The query string, in this case, tells the browser to load a fresh copy of the (image) file from its source because it will not match the query string on the file contained in a browser cache (if the browser options/preferences are set to allow cache copies to be used when the same file is requested again).
<pre><p> <img src="images/wind.png" name="graphs" id="graphs" title="Weather Graphs" alt="Weather Graphs"/></p>
<table cellpadding="0" cellspacing="0" id="Graph_menu">
  <tr><td colspan="5">Click on a thumbnail to show a large graph in the panel above.</td></tr><tr>    
    <td class="td_thumbnails"><a onclick='changeImage("images/wind.png")'><img src="images/windsm.png"
 alt="Wind Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/temp.png")'><img src="images/tempsm.png"
 alt="Temperature Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/intemp.png")'><img src="images/intempsm.png"
 alt="Inside Temperature Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/press.png")'><img src="images/presssm.png"
 alt="Pressure Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/rain.png")'><img src="images/rainsm.png"
 alt="Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td>
  </tr><tr>
    <td class="td_thumbnails"><a onclick='changeImage("images/windd.png")'><img src="images/winddsm.png"
 alt="Wind Direction Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/tempm.png")'><img src="images/tempmsm.png"
 alt="Temp Min/Max Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/hum.png")'><img src="images/humsm.png"
 alt="Humidity Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/raint.png")'><img src="images/raintsm.png"
 alt="Today's Rainfall Graph Thumbnail" width="150" height="100" border="0" /></a></td>
    <td class="td_thumbnails"><a onclick='changeImage("images/raind.png")'><img src="images/raindsm.png"
 alt="Daily Rain Graph Thumbnail" width="150" height="100" border="0" /></a></td></tr></table>
<p class="credits"><br/>Page updated <#update><br/>powered by <a href="http://sandaysoft.com/products/cumulus" target="_blank">Cumulus</a> v<#version> (<#build>)</p></pre>
This is the code supplied with Cumulus (and stored in web/originals directory) as at 5 July 2011.  This extract from HTML code for 'trendsT.htm' displays a large graph in the HTML element 'p' (paragraph) and then displays a number of small thumbnails generated by Cumulus. It only works if JavaScript is enabled so the 'changeImage' function in the first pre-formatted area above is called by the 'onclick' argument in the second pre-formatted area.


= The next article to read …… =

Learn how to use a PHP script to generate HTML web pages. See [[PHP|PHP Hypertext Preprocessor]].