How to Create This Web page

This set of pages started life in mid 2004. Mostly because I was begining to post a fair bit, in the then iChat Discussion Area, and I wanted to keep some often requested bits somewhere. Also I had Posted the first of the iChat FAQs in the New FAQ folder that had been created. That was in the previuos software of the Apple Discussions. That FAQ can now be found here. There is a limit to those posts and it seemed to me that I could do with somewhere that expanded on these somewhat.

At first the pages were on an mac.com homepage and made with the same tools as everyone else. But like you do you want yours to be significantly different. So I looked on the Mac Magazine's CDs that I had to find out what was there.

Enter FreeWay2.5 Lite Website for current products. This was a application that would take a page layout where you could place you things and then convert them into a full size .gif that you uploaded as your page. This was fine as far as What-You-See-Is-What-You-Get but people could not download the info by highlighting it as it was part of a larger picture. Also it was a complete nightmare to try and redesign a page.

So then came using FrontPage from Microsoft (and on a PC at that). This was a very strange place to be. It has a very odd layout that it not page like at all (or at least as I remember). but it did give the chance to see the Basic HTML code play with it a bit.

Your basic page has to have several key parts or Elements

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
</title>
</head>
<body>
This is my first web page
</body>
</html>
As you can see here, A DOCTYPE, the html element, the head, then the title and after the title and head have been closed in the right order, the body element (your webpage goes in the space) before the body is closed and the html to end the page. This sort of thing can be created in a text editor as long as it can save in HTML format.

Depending how good your editor is at saving what you type in the way of formatting you may get a reasonable page with the spaces between paragraphs and and indents as well. But mostly a simple editor will just save the text you type as a single stream of words. So I started to look around by searching on Google. That led me to these sites.

htmldog.com I have linked to the beginners page.
htmlgoodies.com Again a beginners page.
cwru.edu This is a list of the Tags for HTML but look for links to Chapter one from there.

There are others that you can find in a Google search for HTML.

That lead be to look at the View Page Source item in the Brower's View menu. From there I found that some people were using something called CSS (Cascade Style Sheets) and much of their formatting appeared to be invisible. So to more sites.

w3scools.com A good one as it lets you practice changes to see what certain things look like.
Web Design Group Another basic starter.
CSS/edgeTricks and links from Meyerweb.
CSS play This is from Stu Nichols and has recently undergone an update. Useful stuff about different browser considerations.
htmldog.com again. This time for my menu.
and usamriid.army.mil just to show what I would like to do next with the menu. (Mouseover the menu).
Currently in a move to get close to the usamridid.army.mil page I went to this page http://webhost.bridgew.edu/etribou/layouts/ for the Skidoo layout.

An example of where the basic HTML looks like for this page with no CSS or other formatting Example 1
This contains some basic tags to create the bolder header 

<h2>
The paragraphing and the Pre tag to show the code 
<p> & <pre&> with <code>
If you use View Source you can see what I did.

Obviously this page has more to it. For one there is the menu. 


<ul>
				
Menu

<li>iChat 2 and Set up
	<ul><li> Test link to page 1</li>
	</ul>
</li>
<li>iChat 3</li>
<li>Blog</li>
<li>iChat by Pictures</li>
<li>You are here
<li>Back to the Front
	<ul><li> Are you Sure ?</li>
	</ul>
</li>
</ul>
Here for Example 2

About this time I discovered Taco HTML Edit which I find is a great way write HTML pages and CSS formating before separating the two. It also has a preview of what the page looks like and colours the tags for somewaht easier identification. It can also check the syntax which is not the same as Validate but gives you an idea if you move something whether it will likely work.

Anyhow back to the Web Page construction. The HTML page can be considered to be in layers. The HTML can be considered to be the background. Then the Body sits on top of this. It is onto the body that you can set up divisions and use CSS to position them. Like here at Glish.com. Move the size of the window of you Browser to see some of the advantages of this style.

Then there is CSS Zen Garden that puts pictures on different elements background's. This site shows you the basis HTML and the CSS on seperate pages. It also shows different styles in the links.

So this leads to the next stage. Putting back ground pics in each or at least some of the elements.
Example 3 for the main background. This shows a background at the HTML level and a div to shade the background when the text get too unreadable without. It also shows that you can make the scroll bars disappear.

It also shows the way to get text over a picture.

Example 4 shows a variation on this. Scroll the page up and down. The small pic in this is not repeated and fixed to the body and a mid point and some pixels down. To get back to here there is a link in the menu and at the top of the text and at the bottom of the whole page.

next we have to add a header div and a footer div.
Example 5

In fact that is actually the final thing. Most of the CSS is displayed there with the exception of the menu. It links to the place by Stu Nichols where I got the idea and the starting CSS code for the page.

Example 6 or rather the Previous version of Page 1



© 2005 Ralph Johns: Edited 24/9/2005.