Efficient HTML

Written by: Maz Published by: Nightscript Published on: 2004-07-09 11:49:24 Topic: Websites

Search OSI about Websites. More articles by Maz.  viewed 9333 times  send this article  printer friendly

Rate this article : -012345

Unlike most tutorials this one will not teach you HTML, you can find millions of bits of information on how to write HTML but very few will teach you how to write it in a way that's efficient and easy to read.

1. Layout You all know why I'm starting with this. I've had enough of sites with a bright yellow background and green scrolling text surrounded by GIFs and 300 images that are irrelevant to the site. HTML provides us with enough to design a clean and useful interface that makes the site easy to browse through and fast loading. The reason it is not a good idea to start a serious site without first considering the design is because people who use computers and the internet for long periods of time generally have tired eyes and prefer duller colours (that's right, I spelled it with a "u") and fast loading sites because they don't have time to wait for your images to load when all they need is the text. Now I will list the main points that you should consider when designing your layout: a. Consistency: Make sure all the pages have the same general layout; a navigation bar or menu somewhere on the site, and the basic things a page requires. DO NOT make a different layout for each page, this is generally bad practice and will cause people to take you less seriously. b. Colours: It is recommended that you use web-safe colours, sometimes black text on a white background works really well, or white text on a black background. Make sure that your all your text is in one colour except for special reasons (hyperlinks, etc.). I've seen sites where the text on the background is literally unreadable and you have to highlight it with your cursor just to read it. c. Navigation: I see this as a must, though some may not agree. But I believe a site should have a navigation system like a menu on the right or left or a nav bar at the top of a page so the user can click around and get to any part of the site easily without having to return to the main page everytime. Make sure it's a simple menu and that it agrees with the colours of your layout and font. Also, one of those "Top" hyperlinks at the bottom of a long page that take you to the top of the page are really helpfull. d. Images/Animations: This is the most annoying. Many sites load animations and images on each page even though these images have nothing to do with the topic being discussed. This is not good practice since many of us have slow modems and need the pages to load fast so we can access the information we want. If an image is not relevant to the site do not include it. Do NOT include animations that you think are "cute", you can make a special page for only animations, and you can create a gallery for images, but don't just stick them anywhere unless they are needed to clarify something. 2. Code that is not your own Ok, this is rarely seen but some people who put code in their sites that isn't their's and then don't bother to give the author credit for it. It's ok if you have the author's permission and they don't want their name anywhere, but if the code is written by someone and they worked hard writing it, they deserve to be mentioned when their code is put on a site. This goes for Javascript stuff and layout designs that are not your own, you can just add a small comment in your HTML document saying who the author is and where you found the code. 3. Comments This brings us to comments, in HTML everything is pretty plain and simple but if there is something you feel should be commented lik a small script in your document then you should comment it for later reference, this will make life easier on you and on the people reading your code. 4. Neatness BE NEAT! This is for all the people out there not using an HTML editor like FrontPage, use good programming principles, you don't need lots of indenting but make sure that different parts of the document are easy to pick out and are seperate. Don't write all your code on one line with no spaces because it blinds whoever's reading it. As I stated above, use comments and be neat. Know what you want to do before doing it. In conclusion, these are just some simple guidelines that I think should be followed when creating a site, an easy to use site is not too much to ask for, and will convey your ideas to your readers efficiently. Hopefully this has helped someone make a better page, it was inspired by the tutorials on http://www.free2code.net . For more information on HTML go to http://www.w3.org , It's a good site with useful information.

Did you like this article? There are hundreds more. Join OSIX Get Involved Challenge or Test your skills

Comments: SAJChurchey 2004-07-13 04:47:36 Don't forget following standards. That way it can be used with a variety of browsers, screen resolutions, etc. make sure to check image placement in different screen resolutions to make your site look uniform (everything should size). bobbykjack 2004-11-06 16:50:46 The points you discuss in this short article are correct, well stated, and should be understood by anyone working with the web. However, the title led me to believe you would be discussing efficiency-related issues such as file (especially image) size, CSS usage, caching, etc. These issues, whilst not directly related to HTML, are a key part of any web developer's knowledge. I rate the article a 2, but I AM critical ;-) Anonymously add a comment: (or register here) (registration is really fast and we send you no spam) BB Code is enabled. Captcha Number: