Misc Stuff > HTML Primer
When I wrote this tutorial, I had in mind a lost user of the web looking at some way to put his own home page up without using one of those horrible editors. I ended up writing much more than just an introduction to basic HTML and I hope this page will be useful to all those who visit it, beginner or expert. .
Welcome, oh beginner to HTML
I must state outright that I abhor all those editors that have come out that "lets one create a Web page without the slightest knowledge of HTML". All these editors do is let you create a basic page and destroy your own creativity. I have taken several classes on HTML and one thing I emphasize again and again is NEVER USE AN EDITOR unless all you want is a plain vanilla page. Knowing HTML has several advantages:
  • You see something nice on the web and wonder how it was done? Simple view the source of the page and implement it on your page.
  • There is an addition to HTML that the popular browsers support? Chances are that your editor will not support it.
  • Your page does not look exactly like you wanted? Just have a look at the code and see where you sent wrong. All editors have this problem, they always leave out something that you wanted on your page but could not do.
Of course I am not damming HTML editors outright. You still could use it if you were writing a long text page (such as this ) and wanted to save a lot of formatting, but stay away from them as far as possible.
OK, enough of all that boring stuff, let's get cracking on the actual stuff:
HTML-An Overview
So, what is this complex sounding thing called HTML? HTML stands for Hyper Text Markup Language. This is the language you would use to make a page that is viewable by a browser (such as IE or Netscape) on the WWW (World Wide Web). HTML is very easy to learn and use and all it takes is 2 or 3 days to become an HTML expert. HTML is not a compiled language, all you do is write it up in your favorite word processor (mine is plain old notepad in Windows NT), save it and load that file in your browser and voila! There is your page. HTML is also very forgiving, if you make any mistakes, your browser will at worst just ignore it or at best overlook it and do what you intended anyway! A wrong HTML will in no way damage your system or browser!!
HTML is machine and to a large extent Browser independent, no matter what operating system you use or what browser you use, your page will look the same. There is only one version of HTML for all environments.
So why the term "Hyper Text" in HTML? Well, in a page you can put links to other pages. For example this is a link to my home page. Essentially this means that you can point to other pages, or sound files, movie files or practically anything at all and by clicking on this link you can go to this file. How? More later…
All HTML consists of tags. For example <b> is a tag. All tags are enclosed within greater-than and less-than symbols. Another thing to remember about tags is that you usually end a tag by repeating the tag with a / at the beginning.
For example <b> is the tag for BOLD TEXT. (simple to remember like all HTML, b stands for bold..)
So if you wrote <b> Hello world </b> and viewed it in a browser, you would see it as Hello World
Esentially what you are doing here is "switching off" the tag by repeating it with a / added.
Creating your first Page
Always start a page with the <html> tag and end it with the </html> tag. All the rest of your HTML comes between these tags. The next tag after <html> is the <head> tag which means you are now going to define what to display on the top of your browser. In the head part you want to define your title so use the <title> tag, as follows:
<html>
<head>
<title>
My first page-wow!!
</title>
</head>
</html>
Look at the blue strip on the top of your browser and you will see "Hari's HTML Tutorial For Beginners" written there, I used the <title> tag to get it there.
Now we move on to the body of the page, which is the part you will see inside the main window of your browser.
Start the body with the <body> tag (obviously!!) and end it with the </body> tag. Within these comes the rest of your HTML. For example you want to display the following in your page:
Hello world
use the following HTML:
<html>
<head>
<title>
Another page
</title>
</head>
<body>
Hello World
</body>
</html>
Simple, right? You do not need to put any tags around your text unless you want special formatting, for example:
Bold : <b>Text in here will be bold</b>
Italics: <I>Text in here will be italicized</I>
Underlined : <u>Text in here will be underlined</u>
combination : <u><I><b>This text is underlined, italicized and bold, use any combination you wish</b></I></u>
Remember a few important points here:
  • If you use several tags, like the combination example I used above, use the reverse order when closing the tags. If you started using tag a, then tag b and then tag c, then end starting with tag c, then tag b, then tag a. This rules applies no matter how many tags you are using.
  • HTML is case insensitive, you can use upper case (capital) letters or lower case (small) letters and it would mean the same thing.
  • All your HTML can come in the same line. You do not need to put just one tag per line, but I do that since it looks neater to write.
Another tag you could use here is the heading tag. It starts from <h1> and goes on till <h6>. <h1> provides the largest heading and <h6> the smallest.
e.g. <h2>hello universe</h2> would look like

hello universe

on your browser. Nice, huh?
Lists
Lists are a nice way of arranging the information you have on your page. There are three types of lists: unordered lists, ordered lists and definition lists.
Unordered lists
The following is an example of an unordered list:
  • Hari
  • Punkaj
  • Mohan
  • KrishnaPrasad

  • How was it made? Simple:
First, open the unordered list tag, next open the <li> tag which stands for list item which specifies that you are about to write one of the items in the list, Write your item and close the item tag with the </li>. Then open the next list item tag with another <li> and so on till you finish your list, then close the unordered list tag with a </ul>. I got the above unordered list with the following HTML:
  • <UL>
  • <LI>Hari</LI>
  • <LI>Punkaj</LI>
  • <LI>Mohan</LI>
  • <LI>KrishnaPrasad</LI>
  • </UL>
An ordered list is used to create a numbered list. For example:
  1. 1. Hari
  2. 2. Punkaj
  3. 3. Mohan
    1. 4. KrishnaPrasad
The only difference in tags from the unordered list example is use <OL> instead of <UL> and </OL> instead of </UL> (obviously!).
A definition list is used to create indentation without bullets (as in an unordered list) or numbers (as in an ordered list).
For example:
Hari
Program Manager, COM+
KP
The Designer of Aditi Tech
Here is the code for it, <DL> starts the definition list and <DT> starts the Definition Term and <DD> starts the definition.
<DL>
<DT>Hari
<DD>Program Manager, COM+
<DT>KP
<DD>The Designer of Aditi Tech
</DL>
Notice how I left out the </DT> and </DD>? Well this is one of the tags that you can safely ignore the closing tag. You could do this with the ordered and unordered lists tag <LI> too! HTML and your browser would forgive you.
IMAGES
So you want to add an image to your page? Just use the <img src="filename"> tag. (Notice this tag also does not have a closing tag).
For example <img src=welcome.gif> is what I used at the top of this page to put that lovely glittering welcome picture on my page.
You can use a lot of image formats but the most commonly recognized by popular browsers are .jpg and .gif
I would advise you to use only these two formats.
You can also align your picture on the center, left or right of your page by using the align attribute:
<img align=center src="welcome.gif"> to align the picture in the center of your page.
So how would you add a background color to your page? (This page has gray background)
Simple add the bgcolor attribute to your <body> tag For Example:
<body bgcolor=white>
You can also use the rrggbb scheme in which you can specify any hue you want. 000000 is black and ffffff is white.
(this is in base 15). So you could also write <body bgcolor=ffffff> instead of <body bgcolor=white>
LINKS
And now for the most important tag… the Hyperlink tag. I demonstrated an example of a link earlier in the tutorial, it was a link to my home page, I will repeat it here:
this is a link to my home page.
If you click on this link you will go to my home page at http://www.mayahari.com
This is the HTML I used to get this link:
<A HREF="http://www.mayahari.com/">this is a link to my home page</a>
What does all this mean?
Well <a href means that the following is a hyper reference or link to another page (or any other file like a sound file , as we shall soon see) The quotes contain the place where the link should point to and this is all closed with a >. Then comes the text to be displayed and finally the <A HREF tag is closed with a </a>
You can also point to a sound file. Say you want the user to play a sound file when he clicks on a hyper link. Just point to the sound file and if he had a sound player configured on his computer, the browser will automatically play it for him. If he doesn't have a sound player configured, the browser will ask him what to do with the file. For example:
<A HREF="http://www.wolfenet.com/~hari/mission.mid">Mission Impossible Soundtrack</a>
will produce the following link:
Mission Impossible Soundtrack
Click and enjoy!!
You can also use images to have a hyperlink. For example clicking on the following image will take you to my home page:

And Finally
Congratulations, you are now familiar with the basics of HTML. There is a lot more stuff you can do with HTML. I haven't got around to writing an expert level, but you can find much more on the web. Do go through all the stuff in this page and create your own page before going further. GOOD LUCK!!
Please send me feedback on this page, bouquets and brickbats are equally welcome! I put in a lot of time to get this page done and would appreciate your feedback. Either send me a mail or even better, sign the guestbook. Bye!!