MGA - Web Page basics

The MGA With An Attitude

MGAguru.com

WEB PAGE BASICS - WP-101

This is on introduction to the basics of WEB PAGES and HTML coding, not a complete primer, but just to get you started. In keeping with the same philosophy as the rest of this web site, the push is in the direction of keeping things simple and easy so you don't have to spend too much time tinkering with your web site, and leaving more time for enjoying your LBC.

Now if you're thinking this is going to be complicated, forget it. You are about to get a crash course in Hyper-text Markup Language. Don't let the name scare you, just call it HTML for short. The term refers to being able to "Mark up" a piece of Text so that when you click on it with the mouse you get a Hyper jump (a link, or hyper link) to another web page or to some other web file, like an Image file or a sound file for instance. Simple, just click and you go somewhere else. In fact you can also Mark up an Image on the web page so that you can click on the picture (hyper-image?) to go somewhere else. This is the ONE and ONLY thing that makes a web browser do what it does rather than just posting a picture in a window. You click on things to make it do the stuff that is instructed in the hyper-links. Ooooww, Links! That's what it's all about. Web site construction is even simpler than maintenance on your very basic MG. To get you started on the right foot, check this out:
- - - - - - - - - -

<HTML>
<HEAD>
</HEAD>
<BODY>

</BODY>
</HTML>

- - - - - - - - - -
That's a web page. Just put that alone in a text file, save it to your hard drive with a "htm" extension on the file name (such as mypage1.htm), point your web browser to it, and you have a working (blank) web page. In fact the <HEAD>....</HEAD> part is not even required for a simple web page. Whatever is contained within the <HEAD> area of the page coding will be fully executed before processing of the body of your web page. Otherwise it's not required. After that you can put anything you want in between the <BODY> and the </BODY>, and it will appear in the browser window. Beyond that, anything else is just an enhancement to the basic web page, and you can build it up a little at a time as you add more stuff to the page. If you have never created a web page you might like to try it now. It only takes a minute.

Once you have created a web page it's very easy to make another one. Just copy the file and save it with a new name, then open the new file, make changes to text, image references, links, etc, save it again, and you have a new web page. Once you settle on a pleasing page format you can clone and modify pages ad infinitum and keep a nice constant appearance to the pages throughout your web site. And you may have noticed that I didn't say anything about those complicated web page creator programs (until now).

When first venturing into web page construction you might find some advantage in trying out one of those page creator software packages. They are technically known as GUI (Graphical User Interface), or more commonly known as WYSIWYG (What You See Is What You Get) programs. They do have the capability of allowing you to create web pages with very little initial knowledge of HTML (HyperText Markup Language) code by using pull down menus with point and click. It may look quick and easy at first, but as you build up larger more complex page structures the complex software can eat up a lot of processor time and slow things down quite a bit. Once you get the hang of it a simple text editor will serve to modify the HTML code, and you may ultimately find that to be much faster than using the page generator software.

When learning this stuff from scratch with no textbook and no assistance I did use a web page editor with a tutorial to get through the creation of one web page, the basics of which is still my home page. I can honestly tell you that is the only web page I have ever created initially by using a web page generator. By the time I had the basic configuration of that page working and on line, I had learned enough about HTML code to edit the code page much quicker with a plain text editor, and I usually just use Windows NotePad. Since then that page has more than doubled in size and features and gets updated regularly, and I haven't used any form of page generator software since early 1998. And I have created many hundreds of additional web pages, with nearly every one of them being some form of modified clone from a previously existing web page.

The point of all that is the coding for basic web pages is actually quite easy and quick to accomplish, as long as you adhere to the KISS principal (Keep It Simple, Stupid). I do not (usually) do anything very complex with web page coding, for a number of reasons, the most important of which is that I have better things to do with my time (like writing this page for instance). Another reason to keep it simple is that some of the fancy features cannot be handled by all web browsers. For instance, you will not find the use of frames anywhere on my web site, and this should be the last time I ever mention it. Not that it's so exotic, just that some browsers can't handle it. If you want to use some of the more advanced features you may have to get used to the fact that some visitors may not be able to view everything you are trying to present. Some browsers can't handle frames, some don't process java script or cookies, and some visitors with slow net links will simply disable java script or cookies or other browser features to speed up the download. So even when you do use some of these features on your web page, it is nice if the page is still minimally functional when these features are not working.

And now on with the simple stuff. You may quickly notice that HTML coding looks and works a lot like word processor using control tags, which is exactly what it is. These tags are often used in pairs to begin and end a particular function. For instance, if you want bold print you could use these tags, .... .... .... or .... .... ...., and whatever text you place between these tags will be displayed in the browser window in heavy type face. Or you might use , with the result that you have just changed the type face, and when you use it will revert back to the original type face. is for italics, and shifts it back to normal print again.

Next is the practice of nesting the control tags. If you want both bold and italics you can use the tags like this: .... .... ..... Notice that it is best to close the latest used tag first, or in this case keep the I's inside of the B's ( or keep the B's inside of the I's ). If you have them unnested like this: .... .... ...., they may or may not work properly depending on the browser being used to view the web page. When in doubt, better to be safe than sorry. In some cases the control tags may be nested many levels deep in rather complex ways, similar to using parenthesis in long mathematical equations, and it will be important to keep track of the nesting order. In some cases the closing tag will be far away from the opening tag, such as having <BODY> near the top of the page and </BODY> near the bottom of the page, with lots of other nested tags being used in between.

Some HTML tags are used alone rather than in pairs. One common example is to force a "break" at the end of a text line by using this tag: 
And if you use two of these together 

you get a double line feed, and <HR> gives you a "Horizontal Rule".

forces the beginning of a new paragraph, and a paragraph may (or may not) be ended with . In practice an entire page may be a single logical paragraph with multiple line breaks in between to emulate physical (visible) paragraphs.

The next thing you may want to do is to place a picture image on your web page. For this you use the single tag <IMG SRC="........."> where the character string between the quotes is the URL for the location where the image source data file is stored. This could be a complete URL for an image located anywhere on the internet, anywhere in the world, and that tag will effectively cause the browser to locate and fetch that image and place it on your web page in the browser window. Of course a complete URL can be a very long text string. If the image file you are referring to is located within your own web site server memory, or even in the same directory (folder) as you web page, then you can use a relative address that could be as simple as "myimage.gif". Aside from brevity, there are some other very good reasons for using relative addressing, which I will get to on the next page.

There are some additional options that can be used with the image tag, such that the entire thing may look something like this:
<IMG src="mymg.jpg" width=300 height=200 border=3 align=right alt="My MG in the snow" hspace=5 vspace=2>
The control tags and other parameter specifications will generally work as well in either upper or lower case characters, but some browsers are now case sensitive when it comes to finding file names on the server. The width and height parameters will set aside physical space for the image on the web page when it is first displayed in the browser window, even before the image is loaded, so that the layout of the page does not have to be reconfigured part way through loading. "Align=right" forces the image to the right margin of the page (or table data cell) and causes text to flow around the image, rather than placing the image in line with the text or other images. The alt="......." allows for an alternate text string to be displayed before the image is loaded, or if the image is not loaded such as if the visitor has disabled graphics in his browser to speed up downloading. Hspace=5 will reserve a 5-pixel blank space to the left and right of the displayed image (horizontal) which is nice for keeping text or adjacent images from crowding in.

And now one of the most important features of the web browser, the hyperlink. This is what allows you to click on a text string or picture and "link" or branch to another web page or to display perhaps a larger picture image, or maybe play a music file or a video clip. This is done with the "anchor" tag like this:
<A href="............"> ..................... </A>.
In place of the first dot string you put the URL that you want to jump to when the link is activated (hyper-reference). Then whatever you put in place of the second dot string will have that link attached to it. If this is a text string it will generally be underlined on the web page, and clicking on the text will activate the link (force the jump). If you put an image tag there, then the displayed image will be endowed with the hyperlink, and clicking on the image will force the jump. By this means you can install any number of hyperlinks on your web page, and similar links on successive pages can allow consecutive linking all around the internet. Or if you want to click to send an e-mail message to joe@aol.com you do this:
<A href="mailto:joe@aol.com">Send Joe an e-mail message</a>

If the HREF points to an image, or to a web page that has no other links, or to a video clip or to any other entity that has no other links, then it's a dead end, and you will have to click on the Back button to return to the current web page, or click on the Home button, or enter another URL in the browser Address box, or perhaps click on some "Favorite" or "Bookmark" to direct the browser to another URL.

This is not intended to be a full course in HTML coding, but only an introduction. You can learn more about HTML coding from textbooks web page generator tutorials, or elsewhere on the net. One of my favorite tricks for figuring out how something is done when you see it happen on a web page is to look at the source code for the page being displayed in the browser window. For this you just poke the pull-down menu (or right mouse button) and select "View, Source", and then find the place in the code page that corresponds to the feature being displayed in the browser window.

Now what I really want to get on to is some do's and don'ts of web page design, particularly those things that would offend your visitors. See that little green arrow down there? Give it a poke now.