LCW Business Group - APSense help and tutorials

LCW Business Group - APSense help and tutorials  »  Creating a Web Site - Basics Part 3

Creating a Web Site - Basics Part 3

by Bj aka Bill Brown Hosting and Backup Service provider
Bj aka Bill Brown Magnate I   Hosting and Backup Service...
Creating a Web Site - Basics Part 3

This is the third part of my web site basics series.
Sorry for the delay in posting it, but clients have to come first.

In this part I am showing the basic code to produce the layout as shown in part 1

Points to note.

The <!-- --> designates a remark and will not show when a page is displayed.

Things like <!-- header table --> <!-- This is the main section --> and so on (color coded Blue) should be left in so you can find these places in your coding fast if you need to change something.

The ones starting <!-- comments (color coded RED) can be removed once you have the things in there.

Also make sure when removing them you remove up to and including the closing --> which can be two or three lines below the opening <!--

It is always a good idea to comment your code as it helps you know what is where when developing your pages.

Take note also of how I have used blank lines between some things to give a clear view of what is what. These blank lines will not affect your page layout.

The last point to note is that I always use percentages for my widths rather than a fixed number of pixels. This gives my pages a dynamic witdth adjustment when a viewer changes the width of their browser window.



The code.

<html>
<head>

<!-- Place your meta tags in this section -->
<TITLE>Put the name of the site or page here example My domain name home page</TITLE>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META NAME="DESCRIPTION" CONTENT="Put your web site description here.">
<META NAME="KEYWORDS" CONTENT="Put your keywords here">
<META NAME="OWNER" CONTENT="Bill Brown">
<META NAME="AUTHOR" CONTENT="Bill Brown">
<META NAME="RATING" CONTENT="General">
<META NAME="ROBOTS" CONTENT="index, follow">
<META NAME="REVISIT-AFTER" CONTENT="2 Weeks">


</head>
<body>


<!-- header table -->

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

<!-- comment The header graphic goes here.
Note I have only used one long section here the
full width of the page. and centered the graphic.-->


<center>
<img src="/images/header.jpg">
</center>

</td>
</tr>
</table>




<!-- center table -->

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%">
<!-- This is the menu section -->

<br />
<a href="/pages/abc.html">Program abc</a>
<br /><br />
<a href="/pages/def.html">Program def</a>
<br /><br />
<a href="/pages/ghi.html">Program ghi</a>
<br /><br />
<a href="/pages/aboutme.html">About Me</a>
<br /><br />
<a href="/pages/links.html">Links</a>
<br /><br />
</td>

<td width="70%">
<!-- This is the center or main body section -->

This is the main body area and your page content goes here

</td>

<td width="15%">
<!-- This is the right hand column -->

You can use this to put in adsense code, widgets etc

</td>
</tr>
</table>


<!-- Footer table -->

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

<!-- comment copy right info and any thing else that you want at the bottom of the page.-->

<center>

<!-- comment this is an example of a secondary bottom menu so
visitors don't have to scroll back up to find the menu
Note there is a deliberate space at the start of then second to 6th lines to give a space between the last letter of the previous line and the following | character -->

| <a href="/pages/abc.html">Program abc</a>
 | <a href="/pages/def.html">Program def</a>
 | <a href="/pages/ghi.html">Program ghi</a>
 | <a href="/pages/aboutme.html">About Me</a>
 | <a href="/pages/links.html">Links</a>
 |<br />

<!-- end of bottom menu -->


copyright mydomainname.com 2008 - hosted by <a href="http://www.lowcost-webspace.com" target="_blank">lowcost-webspace.com</a>



</center>

</td>
</tr>
</table>


</body>
</html>

Click here for Part 1 Click here for Part 2
Jan 20th 2008 21:51

Sponsor Ads


Comments

Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
ok sorry if you got a couple of notifications about this post
There were a couple of things just not right in the presentation layout but its correct now.
Jan 20th 2008 22:23   
Mark Hultgren Senior   Wordpress Specialist
Great Job BJ!
This should have all our members here building some great tables and websites!
Now, if we wanted to set our page to a set width (instead of a percentage of the display) we could use

<table width="1040px" border="0" cellpadding="0" cellspacing="0">

instead of 100%, but the issue with setting the width by pixel, is people using a lower screen resolution would have to scroll sideways to see the whole page.
Jan 21st 2008 06:42   
Mark Hultgren Senior   Wordpress Specialist
Quick question,
Where do you prefer to put your css? Does it depend on how involved it is? Or if you are applying an 'override' for just this page?

For example, I wanted to add a different background image and make my links on this page show as Purple with an underline, but my styles.css has them showing red, with no underline.

Please note, I do know how this is done and have my own preference, but I am asking for everyone else here without trying to hijack his posts.
Jan 21st 2008 06:47   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Mark,

insted of width="100% you would use width="1040" although i would suggest that you actually set maximum page width to width="800" as many still use the 800 x 600 sreen settings

As for the <td> elements you then have to start calculating what you want .

In my example with left and right columbs of width="15%", and center of width="70%"
based on 800 wide
left and right columbs of width="120", and center of width="560"


Jan 21st 2008 06:56   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Again mark,

you can put a script in the header to do basic css wich will be shown in the next section I do.

We are going to move step by step and the next phase is to add some slightly advanced things to make life easier as you expand your site and add pages.

No I am not telling what it is yet lol



Jan 21st 2008 07:06   
Mark Hultgren Senior   Wordpress Specialist
Hi BJ,
Just trying to help this thread along :-)

So will we be looking at the differences between HTML, DHTML and PHP too?
Jan 21st 2008 09:00   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Mark

I dont know DHTML
I went from HTML to combining bits of PHP and then on to PHP/MySql with my learning curve.

Took me 8 weeks to write a website with members area/ administration back office complete with various reporting and so on in PHP/MySql as I was learning it as I went along.


Jan 21st 2008 09:09   
Jenny Stewart Professional   
Hi BJ

This is the lesson I have been dreading.

I have had a brief look and nearly passed out in horrow - Will go back to it and read a bit at a time. I am going to learn this if it kills me!

Jenny
Jan 21st 2008 10:21   
Mark Hultgren Senior   Wordpress Specialist
Hi BJ,
If you have ever gone to a website and seen the menus that cascade when you roll your mouse across them, they are more than likely DHTML (Dynamic Hypertext Markup Language) they are also the culprit that creates many of the 'Unstoppable' pop ups!
You can also use it to expand a section of a page (Similar to a ..more.. tag but the content displays where the tag is instead of taking you to another page). Since it is a 'part' of the page, the content in the DHTML scetion WILL show in a SE listing, but not impact the loading of your page.,
Jan 21st 2008 11:05   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Lol Jenny,

dont know what I got up my sleeve next for you hehehehehe

.


Jan 21st 2008 13:50   
Jean DAndrea Senior   Retired
Hey Jenny, don't panic, it's not as bad as it looks, honest! :-)
Jan 21st 2008 15:20   
Susan coils Senior   Web Design & Marketing Services for Small Business
OMG - how scary is this?
You know I think you all are just masochists, LOL. I look at this and RUN. And yes, I know I should at least try it, but it is too scary.

having said that, I need to check out the bit about meta tags, as I created mine using frontpage I'm assuming there won't be any metatags there. Or if there are, they will be to do with frontpage and not to do with me or my website!
And somehow I don't think that will help with the search engines.
Right or Wrong?
Do I need to check this out?

Thanks.
Jan 21st 2008 16:01   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
hi San,

yes you need to check but the tags i have in this example are just some of what you can use.

more on that later

Jan 21st 2008 16:28   
Jenny Stewart Professional   
"Hey Jenny, don't panic, it's not as bad as it looks, honest! :-)"

Jean, I appreciate you, but this time I don't believe you!!
Jan 21st 2008 20:17   
Viola Bontrager Advanced   
I have been wanting to learn all this but I am finding I am quite intimidated by it all!
Jan 22nd 2008 13:18   
Mark Hultgren Senior   Wordpress Specialist
Hi Viola,
The way I started out was thinking of the tags (The part of the code between the < and > as being the clothes of what I was writing. Since I think of my websites as my 'babies', it is nothing more than dressing them up. You wouldn't put shoes (</body></html>) on a baby's head, just like you wouldn't put a shirt (<td>) on over a sweater (<tr>) or put either of them on over a snowsuit (<table>).
Another way to look at it is you start with a table <table>, then you add a tablecloth <tr> and finish with the dishes <tr>. and for every <XX> you need a matching </XX>
Jan 22nd 2008 14:09   
Marko S. Professional   Web Presence Provider
well, I think that each HTML document - aka web page - should start with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
this is a document type declaration before <head> tag which defines allowed syntax and grammar in XHTML documents (HTML 4.01) which are official standards nowadays.

From my personal view, nowadays is better (practical and easier) for average computer user to build web page with a WYSIWYG (what you see is what you get) web editor like NVU or FrontPage or Dreamveawer. Hand scripting in some text or code editor is a hard work not only for proffesional coders and programers but for novices, also!
Jan 22nd 2008 15:36   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Mars,

The doc declaration will be included as we progress right now it is irrelevant as the idea of this exersie it to just learn and view on the PC we are not ready to upload anything yet and run it live.


If you are happy with creating pages that are 10 x bigger than they need to be and therefore 10 times slower to load with all the extra crap that page makers add then that fine.

I am teaching how to make fast loading easy to manage sites for those that want to lear it.
Jan 22nd 2008 16:03   
Jean DAndrea Senior   Retired
Hi

Jenny - a few years ago, I didn't believe I'd ever be able to build a webpage
either. Still learning too! ;-)

Bill,

Wil we be working on the relative placement of text around images, and
their placement on the page without tables? That's something I really
haven't been able to do so far. If not, doesn't matter, but just interested.

Thanks
Jean
Jan 22nd 2008 16:49   
Bj aka Bill Brown Magnate I   Hosting and Backup Service provider
Hi Jean

No I wont be covering relative location of things as i have found that pages mess up easily by doing this.
one small error can take days to find.

My aim is simple easy to manage sites
they wont win any best site design awards but they will load fast and be as presentable as each individual makes them as we progress because once the basics are done then the rest will be pick and chose what you want.





Jan 22nd 2008 17:20   
You are not yet a member of this group.