Getting Started in HTML
HTML (HyperText Markup Language) is a simple type of computer code used to format text and graphics for use on the Internet. The code is comprised of TAGS enclosed in arrow brackets<>For every opening tag there is a closing or end of code tag. The closing tag is the same as the opening tag except it has a slash</>in the brackets prior to the code. Tags can be doubled up or "nested" such as:
<B><I>Bold Italic</I></B>Note that the closing tags are mirror image of the opening tags. Doing it in reverse or with overlapping tags are called 'nesting errors' and can produce unpredictable results. If you learn ONE thing about HTML learn to close those tags and do it in the right order. Even when you are very careful they slip in and can be difficult to straighten out if you have more than a few.
With HTML you can do all kinds of things to text:
Make it Bold or BIG or SMALL or change its COLOR or Font
The basic text formatting structures in HTML are adequate but not great. It is worse for images and the two combined can be tricky. Do not feel bad if you can't make them stay where you want. LEFT, RIGHT and CENTER are about all you can do and making the text go where you want it is almost impossible. To make matters worse the various browsers (brands and versions) do not display everything the same. Structures called TABLES and FRAMES help a lot but start to make your HTML look like computer code! Keep your page designs simple until you understand HTML.
An HTML page has a basic format:
The opening and closing HTML tags tell the browser this is an HTML file and when it ends. The two main parts are the HEAD and the BODY. Everything that displays in the browser window goes in the BODY. The HEAD is reserved for the TITLE displayed at the very top of your browser window and for other special codes. They include META tags that provide information to the SERVER and SEARCH engines, and programming CODE such as Java Script.<HTML>
<HEAD>
<TITLE>Title displayed by browser goes here</TITLE>
</HEAD>
<BODY>
.
.
The information displayed in the browser window goes here.
.
.
</BODY>
</HTML>
You can build a very nice serviceable site with nothing but the basic format above and your text content. Remember, the user of your site is looking for information. Most REAL information will be text. WHO, WHERE, WHAT, WHEN and WHY. The biggest mistake in web design is to leave out the simple information, a phone number, date, e-mail address. Multi-million dollar web pages leave out simple things like a company 800 number or mailing address. You can do better, its easy!
Pretty graphics take time to load and some experience in the handling and selection. Pages overloaded with high res graphics are slow to load and will drive people away. The sample chapter pages I provided have too many buttons that are too inefficient a file format. Even though I have a lot of practice preparing images for use on the web these buttons generated by a "button maker" program would not cooperate. The file sizes are all three or four times larger than they should be.
Some graphics rules:
640x480 Rule The last rule is a hard convince web designers. Your page should always display properly at 640x480 resolution. Graphics are not the only thing that will make the page wider, frames and tables do it too. 640x480 is full screen on most older Win 3.1 PC's and even on some newer ones. On higher resolution monitors the browser is often kept in an 80% window. On an 800x600 screen this is 640x480.
- Always resize the image to the size to be displayed, no bigger.
- Use a file compression utility to make the image file size smaller
- Use ALT="" , HEIGHT and WIDTH tags.
- Use no more than 3-4 large images on a page.
- Use black & white when possible to reduce file sizes.
- Do not use large background images or images that make the text difficult to read.
- Do not use graphics that make the page wider than 600 pixels.
You should never see a horizontal 'scroll' bar due to page width. Yep, I know you see them all the time and on some expensive looking sites. It is still BAD web-design. When all the low res monitors are gone it will STILL be bad web design. WHY? Because you can't print wider pages either.
An example of a complicated page designed to fit 640x480 is our Webmasters Forum. If you size your browser window to just fit that page horizontally and vertically (there are vertical scroll bars in both windows but they should not be required on the lower window) then you are looking at a 640x480 window. Test all your pages in that size.