This project was from one of my earliest courses at phoenix. This project involved:
- the use of a form with JavaScript for validating the information entered
- designing for SEO
- use of formatting structures like tables
- a navigation system
- style sheets (CSS)
- testing for compatibility through W3C
I try to stick with a minimalist approach to my projects in order to reduce the complexity of narrowing down bugs and to avoid missing deadlines. As a result, I had few images or active content that would have required tags for SEO or that would have presented compatibility issues on some browsers.
It may not have been pretty, but this site passed compatibility testing just fine and was easy to work with. I became very pleased with how easy adding pages becomes when you use style sheets for all style data.
body {background-color:#CCCCCC;}
div#navbar ul
{list-style-type:none;
margin:0;
padding:0;
overflow:hidden;}
div#navbar li
{float:left;}
div#navbar a:link,div#navbar a:visited
{display:block;
width:200px;
font-weight:bold;
color:#FFFFFF;
background-color:#669999;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;}
div#navbar a:hover,div#navbar a:active
{background-color:#336666;}
h1 {
text-align:center;
font-family: "Times New Roman", times, serif;
color: #333333;
}
h2 {
text-align:center;
font-family: Georgia, serif, arial;
font-size:18px;
}
h3 {
text-align:center;
font-family: Georgia, serif, arial;
font-size:22px;
color: #A52A2A;
}
This was my third web design course, I had the hang of JavaScript for basic operations at this point.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<script type="text/javascript">
function validateForm()
{
var x=document.forms["newsletter"]["maillist"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>
<head>
<title>Insights</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Insights on Technology</h1>
<a name="navbar"></a>
<div id="navbar">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="howto.htm">How-Tos</a></li>
<li><a href="musings.htm">Musings</a></li>
<li><a href="aboutme.htm">About Me/Resume</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul></div>
<h3>Contact</h3>
<h2>You can reach me at my email: DylanSloboda@Gmail.com</h2><br></br>
<h2>Use the form below to sign up for my newsletter to stay up to date on articles and how-tos.<a name="content"></a>
<table><form name="newsletter" onsubmit="return validateForm()" method="post">
<tr>
<td>Your Email:</td>
<td><input type="text" name="maillist" SIZE="30" MAXLENGTH="30"></td>
</tr>
<tr>
<td>Click to submit</td>
<td><input type="submit" value="signup" name="btnsignup"></td>
</tr>
</form>
</table>
<a href="#navbar">Back to top</a>
</body>
</html>
