1.0 Welcome

I wrote the pages on this site, using HTML (Hyper Text Markup Language), not by using one of the many HTML editor applications on the market, but simply by using "Windows Notepad"! Yep, it can be done, and what's more, it's dead easy! If you want to know more: read on! If you want more detailed information regarding HTML and web site design: go to my Links page, where you will find more resources; or go buy one of the many fat and expensive books that there are now available on the subject!

If you want to know how I asked for your name, I just did it using a very simple JavaScript. But you will have to wait a while to see more information on that. Let's concentrate on getting yourself started with a web site first...

I learnt to write HTML through trial and error and reference to the W3C Standards back in the mid-nineties (when the web was in its early days) because there weren't any decent HTML editors at the time and the ones that were available were just not able to do the stuff I wanted!

Hence the reason I decided to write this tutorial: to make HTML and its "secrets" more accessible to those who are either just interested, or who cannot afford to pay a web site designer to build a site for them. I also wish to dispel the myth: that HTML is only for "geeks" or is just plain "difficult" - it really isn't!

Nowadays when I design a site, I do use Macromedia Dreamweaver - but being able to tweak the HTML by hand (and in fact, I still end up hand coding most of my sites) has these advantages:

  1. Firstly - it is major fun! There is something magical and exciting (if you are a sad geekess like me!) about writing a boring looking page in Notepad, then loading it up into your browser and seeing the page "spring to life"! It's almost better than......ahem...well, you know! ;-))) I just love it when someone says, "hey, great site...so whatya use to build it then?", to which I reply (trying not to look too smug), "Actually, I built it myself" in Notepad! To me, this is the same as when someone says, "Hey, love your outfit, must've cost you a fortune?", and I reply, "yeah, cool innit, but actually I got it from a jumble sale"!LOL In other words, you don't have to pay fortunes to have a cracking outfit, any more than you need to pay fortunes to have a groovy site! This site cost me "absolutely nothing" to build apart from my time as it is completely hand-coded and when I built it, I didn't own Dreamweaver at all when I wrote this back in about 1998! The tutorial has since been updated (in 2008) - but to be consistent, I did that in a text editor too!
  2. Secondly - and probably more importantly - a knowledge of HTML enables you to "tweak" the code that an HTML editor such as Dreamweaver or FrontPage has produced for you. This is often quicker than trying to find out just how to get the editor to do what you want - Dreamweaver is a really complex program and it can take ages to solve a problem which, if you know how to hand code HTML, you can do it yourself in seconds.
  3. Thirdly, many HTML editors can give a web site a "templatey" feel - as in they rely on basic HTML templates into which you input your content. Any pro designer will recognise that the web site is a template site straight away, and many users will too, because they'll have - or will - come across other sites that use the same template as yours! If you don't mind that, then fine! If you want to be different, then you'll need to learn some HTML...
  4. Fourthly, what about if you have paid to have someone design your site, but you need to make updates to it? This would cost yet more money if you got the designer to do what are usually simple updates. If you know how HTML works, then you can save yourself that money by doing the updates yourself!

The updated version of this site conforms to the transitional HTML 4.01 Standard as specified by the governing body of the web - the W3C (world Wide Web Consortium), and this is what the symbol at the bottom of the page means. However, even so, you will find that all browsers "parse" (read) code differently, which means even if your coding conforms to the Standard, your site might look slightly different in, say, Firefox compared to Internet Explorer. Being able to hand code can help these problems, although Dreamweaver has support for cross-checking code in browsers. We'll talk more about code validation later...

One of the exciting things about web design is, like any other facet of the 'tech.' world, you just never stop learning! So whilst I may know a little about 'hard coding' web pages in HTML, there is a wealth of information about which I have yet to learn, and many other codes to play with, e.g. Java (applets), JavaScript, CGI, DHTML (dynamic hyper text markup language), CSS (Cascading Style Sheets), XML, etc. All these are other types of code that a browser can read, again one would tend to use some software to write these - but why do it the easy way when you can have fun and learn the hard way?!!

To conclude, this tutorial will show you everything you need to know to build up a site in HTML. You will learn how to set up a basic web page, text attributes, pulling in graphics, linking. Then you can move on to the more advanced "gizmoey" stuff like image maps, tables, forms and frames. Lastly, there is a section on how to actually get your pages published on the web (useful, that!). The next page is simply a list of Golden Rules of Web Design which I thought may be useful.

I have structured this site in a logical order of 'learning'. There are also extensive internal navigation links (the back and forward arrows) at the top and bottom of each of these pages. I would very much like to hear feedback (or notification of errors) from you, so do make use of the email link below the copyright information appearing at the bottom of each page.

So enjoy, good luck and here goes!

  To Noframes Version Next

Didi Barnes is a member of:
The International Webmasters Association The HTML Writers Guild
web site design
© 1998-2008 Didi Barnes - All Rights Reserved.
No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted,
in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior permission of the copyright owner who may be contacted using the link above.

Passed HTML 4.01