Essential HTML Basics and a Short How-To for Homebrew Web Pages

(Please note that you will have to replace the symbols [ and ] with a less than and greater than sign, and all \ signs need to be replaced with / signs since Associated Content's system tries to render everything that looks like html into html, even on article examples)

It's important for people to know how to use HTML this day and age. Most people know at least how to make a url link for their ad postings on craigslist, or their images for myspace or facebook, but it's a good idea to know the basics of HTML tags and how to use them several different ways. Since 1996 I have been working with HTML on Internet Explorer, Original Mozilla, and the older Opera web browser. I had to write all my pages by hand back then, and it took forever to do that!

Now it is much, much easier using graphical tools which make complex code easy to implement, and at times even automated so that you don't have to type a thing. But even despite the advances that have come with web technology, it is still quite common for me to write parts of pages by hand. Other times, even if I use a graphical editor to develop part of a site, I still need to know exactly what each tag does and how it is rendered to be able to edit it properly and see the changes appear automatically on my graphical editor. Heck, there are times that I have to edit by hand for the sheer fact that my graphical editor won't work with it properly at all!

Now I won't get started on PHP programming for web sites or anything more complex (PHP is what most interactive pages on the web seem to use or stem from today, if not ruby and other technologies like coldfusion web apps). But no, we're going to keep this short and sweet as a basic article on the need-to-know aspects of HTML.

The easiest way to make a web page is to start a text editor like notepad on XP (Start, Run, type out the word "notepad" without the quotes, and hit enter), and then to type out the following:

[html]

[head]
[title] My First Web Page [\title]
[\head]

[body]
Hi there! This is my first page!
[\body]

[\html]

Type or copy the HTML above directly onto your text editor using cut and paste. You can save it to the desktop for easy access as mypage.html

Make sure that before you click the 'save' button, you need to select "All files" from the drop down menu on the window that appears when you first save this file, otherwise it will save it to the desktop as a text file instead of an html file. If all goes well, you should be able to return to the desktop on your pc and see that there is a new file called 'mypage.html' with a web browser icon. If you click on this icon, the default web browser on your system should launch and you'll be able to see the title we did above for the box as "My First Web Page", and there should be text that says "Hi there! This is my first page!".

Now, lets go back and edit that page we just made and experiment a little. If you still have notepad up, you can just go to that. If not, then return to the desktop, right-click on the html file that we made, and then select "Open with -] Notepad" from the menu that appears. Viola, we should now have the text editor back and all the html code above to edit as we please.

Two of the most important basic tags for HTML besides the frame we used above are the [b] and [i] tags, which stand for [bold] and [italic] respectively. You may have noticed that with most tags, things start with a [code], and end with a [\code]. This tells the browser exactly where to begin, and where to end an enhancement or feature on the web page as it renders it. We are going to make a few changes to our basic code above. We'd like to make "Hi there!" be bold and thick text, while we make "This is my first page!" appear with italics. Wanna see how? Copy and paste this code onto your text editor, then save the file again to the desktop (if it asks you if you want to overwrite the html file, tell it yes).

[html]

[head]
[title] My First Web Page [\title]
[\head]

[body]
[b]Hi there! [\b] [i]This is my first page![\i]
[\body]

[\html]

Now when you refresh that page or click the html file we made on the desktop again, you will see the same title, but the "Hi there!" part will now be bold, and the "This is my first page!" text will appear with italics. So as a recap, whenever you want to make text appear as bold on a web page, or on a forum or other html-enabled text editor, you just put [b], then you type the text you want to make bold, then [\b] to conclude the tag and tell the browser that text returns to normal. The [i] tag works the same way.

You might notice that even if you press the enter key and try to put a lot of space between the two short sentences on our example html file above you won't get a new paragraph. There's a reason for this: web browsers are designed to ignore spaces (what they refer to as whitespaces commonly). If you want to start a new paragraph, just put a [p] anywhere you need to. As you may have already guessed, the [p] stands for [paragraph]. There are more advanced techniques and tricks that you can do with the [p] tag and different ways you can work with it, but for most uses the [p] is more than good enough. Alternatively, you'll find [br] can be (and often is) used as a page or line break.

If you want to put a straight horizontal line across part of the page, just use [hr] by itself. You don't need to close the tag with anything. Just [hr] will do.

If you want to place an image from a remote location and know the direct link to an html image, you would do this:

[img src="http:\\www.anysite.com\AnyPictureIWant.jpg"]

In English, this would translate to telling the browser: "The img src (image source, aka the place where our image comes from) is equal to "the website address and filename where the picture is at". Generally, you'd want to add an extra [p] tag to the end of that just to make sure that text and anything else you want to put onto an html page, a craigslist ad, or myspace page is on a new line.

If you want to make a clickable link out of text (which is probably the most important thing people seem to want to know how to do online with html outside of making pictures appear from html links), then you would use this code:

Lets say you have text, and want to change the color or other properties of that text. You can modify the font and the specifics of text itself by using the [font] tag like this:

[font color="red"]This is red text[\font]

You'll have red text above if you plug that onto our notepad example, save, and refresh your browser page.

[font color="blue"]This is blue text[\font]

The above creates blue text instead.

You can use an entire color spectrum with hexidecimal values as well which let you select the exact color you need. For example:

[font color="#00FFEECC"]This is an exact color[\font]

You can also change the size of the text with the font tag, like this:

[font size="24"]This is bigger text[\font]

If you wanted to, you could compound them:

[font size="24" color="red"]This is bigger red text[\font]

There are many, many other tags that are useful and important. On your browser, I encourage you to use a menu option that says "View Source" or "Page Source" to see the html of a web page to know how the page was made, and learn new ways to implement tags with your own test web pages. Using this article as a starting point and using Google to look up certain keywords for html tags and meta tag identifiers (which are important for web page placement and search engine optimization; google for html keyword tags and also google for SEO). You should be able to find out a great deal about html if you are dedicated to understanding small changes, and willing to try them out and test them out on notepad as we did above, or with a private host (any of which you can obtain for free from places all over the web to get the hang of being your very own webmaster).

Now please be aware that some pages will not show everything with the HTML these days. This is because of more advanced web programming languages such as perl, php, asp, and coldfusion which literally render many things transparently, and then output only the results of a web script or web program executed on the server itself before it ever got to your browser.

One surefire way you can analyze and teach yourself more html from here is to use a program like Dreamweaver, which will let you go to a split screen mode and literally see the changes as you make them, rather than doing them all by hand or all by graphics and then wondering what was changed and what was not. With Dreamweaver, you can see visual changes on-screen as you make changes to the editable html code on a project, or you can view the changes to the html as you work with the graphical editor in realtime. You won't need a remote server or anything to do this, and you can save any html files you make with a graphical editor or freeware clone to a file on your desktop just like we did above and preview it anytime you like!

This is perhaps the most basic but straight-forward article that I could write on html, how to use the basics of it, and how those basics work without jumping level after level from one thing to another. It does get more complex, but it's gradual, and if you enjoyed this article and want to get your feet wet with web development, then you'll like all the great stuff that is already out there and readily accessible for you online. Otherwise, if you just want to know how to do a few links, place a picture on your profile, or emphasize a little text...then the good news is that by the time you read this last sentence, you will have succeeded at that and now you know how.