Recently I was asked to develop a solution to the problem of displaying two independently scrollable content areas side by side in the browser window.
The current solution used in the project didn’t work very well and involved a mixture of frames and a strict doctype, which is not valid in HTML4. The solution I came up with validates to HTML4 Strict and uses JavaScript to detect the window height.
Lately I have been focusing on developing my knowledge of JavaScript as I feel that the ability to write custom JavaScript is the weak spot in my skill set. Whilst doing so I have found books and online resources to be an excellent source of knowledge. However one area that I have found both these resources to be lacking in is the reinforcement of this knowledge through practical application. To help me practice and further develop my skills I have been setting myself exercises. I am posting both these and my solutions here for future reference and to aid anyone else that may wish to practice.
Prompt the user to enter their name.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript Exercise</title>
<script type="text/javascript">
var name=prompt("Please enter your name");
</script>
</head>
<body>
<h1>JavaScript Exercise</h1>
</body>
</html>
Use a pop-up box to welcome the user.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript Exercise</title>
<script type="text/javascript">
var name=prompt("Please enter your name");
alert("Hello " name);
</script>
</head>
<body>
<h1>JavaScript Exercise</h1>
</body>
</html>
Display today’s date on the page in the following format: November 25, 2010.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript Exercise</title>
</head>
<body>
<p>
<script type="text/javascript">
var currentTime = new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth() 1;
var day = currentTime.getDate();
if (month == 01){
month = "January";
}
else if (month == 02){
month = "February";
}
else if (month == 03){
month = "March";
}
else if (month == 04){
month = "April";
}
else if (month == 05){
month = "May";
}
else if (month == 06){
month = "June";
}
else if (month == 07){
month = "July";
}
else if (month == 08){
month = "August";
}
else if (month == 09){
month = "September";
}
else if (month == 10){
month = "October";
}
else if (month == 11){
month = "November";
}
else if (month == 12){
month = "December";
}
document.write(month " " day ", " year ".");
</script>
</p>
</body>
</html>
Display the last modified date of the document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript Exercise</title>
</head>
<body>
<p>
<script type="text/javascript">
var fileModified = document.lastModified;
document.write("This file was last modified: " fileModified);
</script>
</p>
</body>
</html>
Display a greeting based on the time of day. For example; Good Morning if it is in the morning or Good Afternoon if it is the afternoon.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JavaScript Exercise</title>
</head>
<body>
<p>Good
<script type="text/javascript">
var currentTime = new Date();
var hour = currentTime.getHours();
if (hour >= 6 && hour <= 12 ){
document.write("Morning");
} else if (hour >= 13 && hour <= 18 ){
document.write("Afternoon");
} else if (hour >= 18 && hour <= 22 ){
document.write("Evening");
} else {
document.write("Night");
}
</script>.
</p>
</body>
</html>
HTML e-mail, and in particular newsletters, is an area that is very challenging to design and code. The biggest obstacle is that there are so many different clients available for reading email, each of which can display the same e-mail in vastly different ways. Even when the HTML e-mail is displayed properly by the software, the user preferences can be modified extensively; making the final layout even more difficult to predict. This makes testing HTML e-mail a far more challenging task than testing the cross browser compatibility of web sites.
HTML support in e-mail clients is a long way behind HTML support in browsers in terms of standards and support for them. This means that when coding HTML e-mail the rules of semantic clean mark-up and the separation of content and presentation go straight out the window if any kind of cross client compatibility is hoped to be achieved.
In my experience following the best practices below provides the greatest chance of success.
<a style="color: #ccc;" href="http://www.waynemoir.com/"><span style="color: #ccc;">Wayne Moir></span></a>