Editing content of a webpage using either HTML or Script

From Cumulus Wiki
Revision as of 18:50, 28 November 2012 by Mcrossley (talk | contribs)
Jump to navigationJump to search

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).

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 on the web site host, 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.Sfws 17:02, 28 November 2012 (UTC)

Pure HTML example

   <!-- 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> 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> 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>

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

<script type="text/javascript">
function changeImage(im) {document.images["graphs"].src = im + "?" + new Date().getTime();}
</script>
<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>

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 preformatted area above is called by the 'onclick' argument in the second preformatted area.

Retrieved from "https://www.cumuluswiki.org/index.php?title=Editing_content_of_a_webpage_using_either_HTML_or_Script&oldid=2010"