Webpage Coding
Webpage Example #1
The easiest way to explain most things is by example. Here we can put a simple xHTML webpage together and explain each element as we go.
So we will put a page together that has the elements described within 'Page Layouts' elsewhere. More sophisticated explanations and examples can be dealt with later as we modify and refine the example page.
This example is a simple webpage with a regular header and footer as well as a side-bar on the right for the primary navigation links to the rest of the site. (obviously these pages will not be written!) It contains dummy content as the homepage of the fictitious "Generic Web Company". This is the same as the '»Two-Column' layout example website shown elsewhere.
If you want to see different styling examples go and view the main »example website itself and use the style-switcher to view the same page under different CSS stylesheets.
Initially this first 'version' has all of the code within the page and is a bit of a mess! However this is only a starting point, as we refine the design more and more of this content will be moved away to external files.
The full source code is shown below, »the page itself is here, and will open in another window.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Example Webpage #1</title>
</head>
<body style="font-family:lucida console,courier,verdana,georgia, arial,Comic Sans MS,sans serif;">
<div style="background:#f0f0f0;border:1px solid #000000; width:90%;"><!--frame-->
<div style="background:#fff0f0;border:1px solid #ff0000;"><!--header-->
<h1>Example Webpage</h1>
</div><!--header-->
<div style="background:#fffff0; border:1px solid #ff00ff;"><!--content-->
<div style="background:#f0f0ff; border:1px solid #0000ff; float:right; width:20%;"><!--rightbar-->
Site Links
<div><!--navbar-->
<a href="./simpleskel1.shtml#link" style="display:block;"
title="Return to the example notes page..."
>Example Notes</a>
<a href="./example1.shtml#link" title="View the first example page - raw..."
>Example #1</a>
<a href="./example2.shtml#link" title="View the second example page - CSS tidied away - content separated from style..."
>Example #2</a>
<a href="./example3.shtml#link" title="View the third example page - External CSS and page metadata added..."
>Example #3</a>
<a href="./example4.shtml#link" title="View the fourth example page - Email addresses masked using JavaScript..."
>Example #4</a>
<a href="./example5.shtml#link" title="View the fifth example page - Code sharing using server-side includes..."
>Example #5</a>
<a href="./example6.shtml#link" title="View the sixth example page - Testing for DHTML and 'advanced' support..."
>Example #6</a>
</div><!--navbar-->
More text here in the sidebar
</div><!--rightbar-->
<h2>Example #1</h2>
<p style="font-size:larger;font-weight:bold;">Welcome line - hello visitor etc etc</p>
<p>Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go... Mary had a little lamb, its fleece was white as snow, and everywhere that Mary went that lamb was sure to go...</p>
<p>Some more website content here</p>
</div><!--content-->
<div style="background:#f0fff0;border:1px solid #00ff00;"><!--footer-->
Footer section code and credits here... Email: <a href="mailto:fred@nowhere.com"
title="Contact us by email...">fred@nowhere.com</a>
</div><!--footer-->
</div><!--frame-->
</body>
</html>
Page Code Shortcomings
There is no real attempt to make the resulting page look 'pretty', as it is an example we really want to see which part of the page is rendered by each element, this is most easily done by adding different light background colours and borders. The CSS is very basic, setting it to use other colours or fonts would be trivially simple.
The CSS that has been used is fairly unremarkable and will be discussed in the next example...
There really isn't that much more to say about this particular example except to comment that it has all of the basic elements of the page in place except the meta-data. The specific issues with this page that we will fix in the subsequent examples are as follows:
- Content and style are jumbled together...
- Page meta-data is missing...
- Email address is 'en clar'...
- Code is not easily shared or maintained between pages
- Support for DHTML and 'advanced' features?
The most pressing issue for now is the amount of formatting that has been placed within the HTML tags, here content and style are intertwined which is not what we ultimately want! We really need to fix that, so on to the next example...