wildepages.com for newbie web builders

HTML coding page

The structure of an html coded page needs to be thought out first, to produce a mental blueprint of what you want the finished item to look like. What you want to put in the page and in what order.

The easiest way of doing this is to quickly sketch the page as you want to see it on a piece of paper. Start with what you want to see in the top of the browser window - this is your title (within the 'head' of the page).

The first thing to place in the 'body' of your page, if you have designed one, is your logo. This is the first item that appears on the web page and is inserted using the following command: <div align="center"><img src="http://www.your site/your image file/your logo.gif "/></div>. Note that the use of div align="center" instruction positions the logo in the middle of the page, it is at the top because there is nothing else on the page yet. Later in the coding section you will see how putting text or other graphics in at the start of the page can completely mess this cozy situation up!

Always include an alternative text description, like alt="Your web site name or details", before the closing image tag for the benefit of visitors who enter your site with images disabled and for search engine spiders (if a business site) as they cannot 'read' pictures, so need a clue as to what the 'blip' was.

Then comes your page title, which should bear some relationship to the title you used in the 'head' section. It doesn't have to be identical, but should have roughly the same words included. Include the title inside the div align="center" tags and use an 'h1 to h3' text attribute, but try not to underline it as this tends to look like a link. Using the 'center' and 'h?' tags gives the title more prominence on the page and centres the eye for the balance of the page.

The next bit is down to you - the main content of the page. If you want to include images, gif's or jpg's, and wish to use text in the same areas see the section on HTML and Graphics coding, the balance of this page will show the most common commands to use when building a web page.

To produce bold text for an entire line or paragraph use the command <b>your text here</b>.

To italicise a word or character substitute b with i, likewise to underline use u. Other control (format elements) are small for small text, strike [Deprecated from HTML 4.0] to put a line through a word (like this terrible) and the <hr> element inserts a dividing line across your page like so:


Of the final two essentials to learn, the first is how to insert a hyperlink so that your site can be navigated. One way to do this is to use the method by which we placed the logo into the top of the page, except that we use the <a href="http://www.your page to link to or external web address">Text description of link</a> to connect the two.

The resultant link will look like this: <a href="http://address of site or page to link to><img src="http://address of image">description of link</a>

Notice that the img address instruction is nested within the <a> </a> tags - the > tag before the <img start isn't closed (just resting).

The last piece of coding is the 'mail-me' link to allow people to contact you. If you have your own domain (web space) you should be able to use an email address like admin@yoursite.com if not, then do not use your main email address but use a hotmail or yahoo email address. (In the 'Putting it all together - The basics' section, there is a piece of JavaScript coding to obscure your email address from spam bots). The reason for this is SPAM avoidance; Spammers and spam list providers trawl web sites for email addresses (the trawlers are called 'harvester bots'). Whilst it is possible to hide your email address from the harvesters, this also tends to hide them from the search engine bots too which isn't such a great idea.

The method for including a contact-me link is as follows: <a href="mailto:admin@your site.com">Contact the Web master</a>

That is all the basic html you need to know to get started on your first web page. Though you must be aware that the first page of your site, the entry page, must be the only page with the suffix /index.html as this is the page that is located when the address http://www.yoursite.com is typed into the address bar of a browser. The naming of all other pages is down to you, but using logical abbreviations where possible is a good idea as it saves on repetitive typing.

Have a go at building a simple index page then have a look at the rest of the coding pages for some tips and tricks for simplifying the site building process. Don't worry if things don't work out first time - just getting a screen to read 'Hello World' is an achievement for a first attempt.

Remember, this is meant to be fun so ENJOY YOURSELF.

Contents Index to Code Section Exit Here Contact:

Created on November 9, 2002

copyright©2002 Wilde Pages Ltd.,
except for JavaScript's where authorship / ownership acknowledged.