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!

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!

The original version of this HTML Tutorial was written in about 2000 - when there still weren't that many HTML editors about (or not ones that didn't cost!). I wanted to make HTML and its "secrets" more accessible to those who were either just interested, or who could not afford to pay a web site designer to build a site for them. I also wished to dispel the myth: that HTML was only for "geeks" or was just plain "difficult".

Nowadays there are a whole host of freeby programs for designing your own web site. And these days, when I design a site, I do often use Macromedia Dreamweaver. But being able to tweak the HTML by hand, and just because often it is quicker for me to do so rather than spending a while finding out how to do something in Dreamweaver, means that I still end up hand coding the majority of my web pages. So, if you want to know more about HTML: read on!

I reckon that being able to code your own HTML has these advatages:

  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, bunging some code in it, 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"! 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 (and the ISP charges!) because it is completely hand-coded.
  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 a templatey web site straight away - but, more importantly, many visitors to the site 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!
  5. Fifthly, I (personally) take pride in trying to code a site so it complies with the HTML W3C Standards. For example, the majority of the pages on this site conform 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. If you code with that kind of compliance, it means that your web pages should work seamlessly across any web browser. I say "should" with a bit of caution though. The trouble is that you will find that all browsers "parse" (read) code slightly differently. In the same way, all HTML editors tend to produce slightly different varieties of code. This means that your site might look slightly different in, say, Firefox compared to Internet Explorer. Being able to hand code can help resolve these kinds of problem - you can put the required code tweaks in so that the site looks how you want it to in any web browser!

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 what I hope is 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