[Solved] Need to design a HTML Page with following specification [closed]

Question

I kind of agree with the comments above. My answer would be to hire yourself a web developer. You can put an advert on here, or hire someone through services such as elance. The above is a simple job for a frontend developer, but unfortunately these forums are for questions/answers that form a knowledge base rather then a method to turn requirements into source code.

Having said that, this is how to achieve the above:

1) Any browser is a complex being, and when you say ‘opened in any browser’ are you refering to the top 5 most used browsers, or every browser. Every browser would include text & voice browsers, and browsers that run on any machine, including browsers such as the original IE and netscape ones.

This changes your code, as the old browsers will not react to html5 code, where as the common top 5 ones will. if you ask a frontend developer to build you a site, they are likely to build it within html5.

As HTML was around before the first commercial browsers, html is generally well supported, css is a different beast, but you haven’t asked about that. Javascript tends to be well supported across the browsers, however older browser versions have slight differences in how they response (some different names for functions) and javascript can be disabled in most commonly used browsers.

To get over this latter point, you can use tags that show a message on screen if no javascript is found.

A hello world html page in html5 would look like this:

<!doctype>
  <html>
    <head></head>
    <body>
      <h1>Welcome to my HTML5 page</h1> 
      <p>This is a 'hello world' example</p>
   </body>
</html>

2) To create a timeout, it’s very simple, in your script, just write this:

<script type="text/javascript">
    window.setTimeout(function(){alert('I have been triggered');},1000);
</script>

see this for more details: http://www.w3schools.com/jsref/met_win_settimeout.asp

Now the format of setTimeout is easy (a function, timeout time). The timeout time is in ms, so in the example about, it would fire after 1 second. For 10 minutes, it would need to be 600000 (600k ms) and 2 days would be 172800000 (172.8m ms). Please note that a timeout will only fire if the window is left open on your page.

3) To fetch code from another page is simple and there are multiple options:

you can import it using the html5 method:
http://www.html5rocks.com/en/tutorials/webcomponents/imports/

to hack this into your function you would do this:

function(){
   // assume I have been triggered by the timeout
   var link = document.createElement('link');
   link.rel="import"; 
   link.href="http://www.google.com"
   link.onload = function(e) {...};
   link.onerror = function(e) {...};
   document.head.appendChild(link);
}

or you could use jquery (you’ll need the jquery library to do this): https://jquery.com/

You could have some javascript

$(function(){
      window.setTimeout(function(){
         $("#publishedContent").load("http://www.google.com"); 
      },1000);
    });

and you would need a matching html element on the page like so:

<div id='publishedContent'></div>

There are some other ways of doing it as well, but you’ll need to discuss these with your developer.

4) For custom controls you would be best to look at the various jquery plugins/themes (http://jqueryui.com/themeroller/). If you search for jquery UI themes, or look at Twitter bootstrap (http://getbootstrap.com/getting-started/#examples) you should get inspiration on what is achievable. There are plenty of examples out there: http://olance.github.io/jQuery-switchButton/

5) To acquire images, the safest bet to ensure that you have the copy-write is use a service such as getty images(http://www.gettyimages.co.uk/) or shutterstock(http://www.shutterstock.com) and buy the images. They are pretty cheap.

Accepted Answer