2.2 HTML Files

"So why on earth is she writing about this stuff - surely anyone knows how to save a file?", I hear you say! Well, whilst it may not make much sense now, if you take heed of the following you may be inclined to write and thank me someday!

  1. SAVING: when you go to save your html page don't just hit "Save". Instead select "File", and "Save As". When you do this, there will not appear to be the option of saving as an .htm file and your text editor will be set to save as a .txt file - which won't look right in your browser! No problemo! Just type the .htm extention in yourself, making sure you use a suitable filename (see further down here).
  2. DIRECTORIES/FOLDERS: in the "Save As" dialogue box, you will be able to choose the location on your hard drive to which to save the file. Make sure you save your web pages in a specific and separate folder on your system. I have an area of my hard drive called "WWW" and in there I have one directory per web site, e.g. in the case of this web site, "didilogix" all the .htm files go in there. In that directory I also create a subdirectory called "Assets" and that is where all the image files go, e.g. the logo on the left and the wooden-looking navigation buttons at the bottom of each page. There are two reasons this is a good idea. Firstly, it makes uploading your web site to your web server a breeze because you can just click, say, the "didilogix" folder and select to upload that, rather than having to upload individual files from different locations on your hard drive. Secondly, when you are building your web site and accessing the files locally (i.e. have opened one of the .htm files on your local hard drive into your browser), all the links and images should work properly (if you've coded them right in the first place). If they are sitting all over your hard drive, then even if you have coded to support this, when you go to upload your site, nothing will work unless you have managed to exactly replicate the directories on your hard drive, which would be rather silly!
  3. VERSION CONTROL: this simple, vital technique has saved me many tears. All it means is that, in addition to saving your work regularly, you incrementally save your files. If you are working on an .htm file and make a drastic change to it (e.g. layout), then use the "Save As" command and name the file "{filename}-V2.htm", then the next "-v3.htm" and so on. Why? Because if you decide you have made changes that look horrid, you can just revert back to the last version. This is very useful when doing complicated code that could have a massive impact on the page and be difficult to troubleshoot if you decide you don't like it! When I was learning web design, I learnt the merits of doing this the hard way. For, having made some dramatic changes to the source code of a page and overwritten the original, I loaded the revised page into my browser only to find it didn't work as I had intended. It took me ages to unpick the screwy code I had written - sorting duff HTML tags can sometimes be like looking for a needle in a haystack! Had I used version control, I could just have loaded up the previous (non-dodgy) version!
  4. FILE NAMING: when you code up your pages, you will be putting in links to the various other pages you want on your site and also linking (or "inlining") various image files into your documents. Whatever you do, make sure you are really happy with the names you call your files! This is because, if you change the filename/s after you have coded your pages, you will have to go through all your pages and change all the links to the new name! Trust me, this can be a total pain. This is why it is a good idea to have a set file naming convention. Normally I prefix htm pages as pg-filename.htm, headline graphics as hg-filename.gif (or jpg), animated gifs as an-filename.gif, navigational gifs as d-filename.gif ("d" for "direction") and suchlike. Obviously, you don't have to use my naming conventions but it will save you huge amounts of coding time if you decide upon, and then stick, to using one.
  5. HOME PAGE NAME: contrary to the above, there is one page that you do have to name in a certain set way - your "Home" or "Start" page - the one user's first land on when they type in your domain name. This always has to be called "index.htm" because most web servers have a default that states that this will be the name of your initial page.
  6. UPPERCASE: be very careful to name your files in a convention that also takes into account use of lower or uppercase. Again this saves time and heartache in coding because Apache and other servers are case-sensitive - if you have a graphic called "Image.jpg" in your Assets file, but you link to it in your web page as "image.jpg" in your "assets" directory - the image will not appear! I have a convention that my filenames are usually are all in lowercase - that way, I can just always code in lowercase and then it doesn't matter because the links will always work!

NEXT: Wanna know how to format text using HTML?

Back 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