Web Page Coding tips for HTML, CSS and Javascript

Using HTML5 and CSS3

You will notice the logo displayed on the index page of this site shows it is converting to HTML5. This is the latest incarnation of the hypertext markup language for preparing web pages. The start of every page is now simplified to this:

<!DOCTYPE html>
<html lang="en">
<head><title> .... </title>	
<meta charset="utf-8" />
<meta name="description" content=" ... " />  <!-- Google Search often uses this description on its results page -->
<meta name="keywords" content=" ... " />  <!-- Search Engines use keywords and look for them elsewhere on the page -->

The footer of every page will become this, which references a tracker coding in a separate .js file. The coding hides the tracker logo using display:none everywhere except on the front index page. If the tracker is replaced at any time, only one .js file needs to be changed rather than altering every page on the website.

<script src="js/tracker.js"></script>
</body></html>

Link to open another file on the same website

In the same folder as this file:

 <a href="linkfile.html">my link</a>

In the next folder down (sources):

 <a href="sources/linkfile.html">my link</a>

In the next folder up:

 <a href="../linkfile.html">my link</a>

In the folder two folders up:

 <a href="../../linkfile.html">my link</a>

Right up several folders to the top folder:

 <a href="/index.html">my link</a>

Note: This is basic information often taken for granted.

Calculating live page width and height with javascript

var livePageWidth; var livePageHeight;

function findLivePageWidth()
{if (window.innerWidth!=null) {return window.innerWidth;}
 else if (document.documentElement.clientWidth!=null) 
 {return document.documentElement.clientWidth;}
 else if (document.body.clientWidth!=null) {return document.body.clientWidth;Width;}
 return (null);}

function findLivePageHeight()
{if (window.innerHeight!=null) {return window.innerHeight;}
 else if (document.documentElement.clientHeight!=null) 
 {return document.documentElement.clientHeight;}
 else if (document.body.clientHeight!=null) {return document.body.clientHeight;}
 return (null);}

livePageWidth=findLivePageWidth();livePageHeight=findLivePageHeight();

Note: This is a cross-browser javascript routine providing the actual window width and height in pixels. I have found it useful to provide different text sizes by choosing different linked css files. It allows me to have a larger size for high-resolution displays. You can also use the dimensions to trigger an alert if the window size is too small to display a spreadsheet without horizontal scrolling.

Producing a lightbox effect

On clicking a thumbnail image, an enlarged 800x600 image is displayed in the centre of the screen and fades the background. It uses the live page dimensions obtained above and uses the basic jquery javascript library script which you need to download from www.jquery.com. A suitable 40x40 closing white X on a square red button gif is set at the top right of the picture:

<script type= "text/javascript" src="jquery-files/jquery.min.js">

<script type= "text/javascript">
function openwindow(imageurl)
 {document.getElementById("picture").src=imageurl;}
function closewindow()
 {setTimeout("resetloadinggif",2000);}
function resetloadinggif()
 {document.getElementById("gravepic").src="loading.gif";}

var leftPosition, topPosition, Xhorizpos, Xvertpos;
leftPosition = (livePageWidth/2) - (400);Xhorizpos=leftPosition+763;
topPosition = (livePageHeight/2) - (300);Xvertpos=topPosition+1;

document.write('<div id="imagewindow" class="content-style" style="position:fixed;top:'+topPosition+'px;left:'+leftPosition+'px;">');
document.write('<img id="picture" src="loading.gif" width="800px" height="600px">');
document.write('<a class="close-panel" href = "javascript:void(0)" onclick="javascript:closewindow();"><img src="images/Xclose.gif" style="z-index:1003;position:fixed;top:'+Xvertpos+'px;left:'+Xhorizpos+'px;cursor:pointer;cursor:hand;">');
document.write('</div>');
document.write('<div id="backscreen" class="shade-style"> </div>'); 

$(document).ready(function() {
		$("a.show-panel").click(function(){
		$("#backscreen,#imagewindow").fadeIn(600);
			})
		$("a.close-panel").click(function(){
		$("#backscreen,#imagewindow").fadeOut(600);
			})
		})

/script

style type="text/css">
.shade-style{
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background-color:#666666;
    z-index:1001;
    opacity:0.85;
	filter:alpha(opacity=85);
    }
.content-style{
    display:none;
    width:800px;height:600px;
    z-index:1002;
    border:2px solid black;
    overflow:hidden;
    }
/style

body
<a class="show-panel" href="javascript:void(0)" onclick="openwindow('image-ref-xxx.jpg"><img src="images/thumbnail-ref-xxx.jpg" width="80" height="60" alt="" /></a>
/body

Providing Print and Find buttons on the web page

To print a page you can use keypress CONTROL+P and likewise for finding text in a page you can use CONTROL+F. However it is convenient for the user to have the choice of clicking in the page to get these functions. The buttons are used on this page in the top right corner using CSS position:fixed;.

<div id="searchbutton">
<img src="images/searchbutton.png" style="cursor:pointer;cursor:hand;" width="70" height="32" alt="resize text" onclick="javascript:window.find();return false;" />
</div>

<div id="printbutton">
<img src="images/printbutton.png" style="cursor:pointer;cursor:hand;" width="45" height="70" alt="print page" onclick="javascript:window.print();return false;" />
</div>

Providing a custom 404 Error page

If a search engine looks for a particular page missing from your website, your webpage hosting company provides a standard error report page. However, you can create a page with an explanation and useful links back to your site. You need to create two files to go in your website root directory - .htaccess and notfound.html. The first is a text file which can be written in Notepad or similar text editor. It has just one line:

ErrorDocument 404 /notfound.html

When you save the file, you need to enter “.htaccess” including the opening and closing quotation marks into the ‘Save As’ dialog box , otherwise Notepad will add a .txt extension on the end.
The notfound.html page is just another html page which can include anything you want.

When you have uploaded these two files to the web hosting service using your ftp programme, you can test it by typing in the browser an address for a non-existent page. I use ‘www.bosburyhistoryresource.org.uk/flapdoodle.html’.