The 30 Min HTML tutorial.

What is HTML?
HTML is the languague the web is written in. If you want to develop webpages,
this is the first thing you need to learn. Though there are enough Visual editors
a familiarity with HTMl helps as the Visual editors too use HTML behind your
back.

HTML: the tags.
A HTML document consists of two parts: the user data and information on how
to display them. The tags are what tell the computer how to display the user
data. The tags are easy to distinguish from normal data as they are present
inside a pair of < and > signs. For example this is a tag is closing tag.

Your first HTML document.
Let us try to write the simplest HTML document possible. Ok here you go. Type
this in your favorite text edtor and save as 1.html

Hello World. Again.

This would get you a screen like this.

Wow looks nothing like our file at all. That is because the tags have been
used up to display our data. If you noticed the tags we used are ,
, and .

Before we move further, lets see the tags a little more.

Any thing between opening and closing tag is the
part of displayable document. The .. section contains
the tag is displayed in the title bar. The ..
will contain most of your content.

If you want to see the document you created, right click inside the web page
and choose “view source”.

Spicing up our pages.

What good is a webpage without any color. So next try to add some formatting
to the page.

Tags have attributes. For example say you want to make the background of your
page red. Now the content between the .. tags is the
body. To make the background red, we need to change the “bgcolor”
attribute of body. So our body tag will become .
Lets modify the page to make it look slightly snazzier.

Hello World. Again.

This is some strong text.

This is some italisized text.

This is some huge heading.

This is a normal heading.

This is a italicised heading.

This is what your page now looks like.






(Only the body is shown, not the title bar.)

We changed the bgcolor attribute of body tag to make our page green. And we
changed the color attribute of font tag to make some text red. The new tags
we added are

, ,,

. They modify the
text within as you can see from the screenshot.

Now the
tag is a bit special. Note that we do not close it. That
is because
tag is used to create line breaks. So the idea of between
doesnot apply to it and it is not closed.

Images, Hyperlinks and other tags.

Now lets try to put images in the HTML document. This is accomplished by the
tag. But we will also need to tell the computer where our image
is located. This is done by the src attribute of the tag. So to
put images we need to put a tag similar to this

.

And you want to link your pages together? Right? This is achieved by the
tag. To tell about the web page you are linking to use the attribute href. So
our tag looks like

. Please note that we had used
the direct links in src and href tag, but you could use paths relative to current
document.

The

..

and

..

tags are used to create
a list. For example you might like to create a list of your favorite singers.
The items of the list are named using

tags. Lets put our
ideas to good use.

Visit yahoo

My favorite singers.


• Metallica



• Bon Jovi



• Udit Narayan

My favorite movies.


1. The Matrix



2. DDLJ



3. ET

After this your page should look something like this.

Formatting your pages.

After all this work, our pages are still pretty badly laid. To lay them like
you want to, you have two options: tables and css.

Suppose we want our page to look like this.

So our table needs to have two rows and two columns. The left column must occupy
only 25% of the screen. So we use the

.. tag. The
tag creates a new row. And the creates a new column in
the present row. So to get a layout with two rows and two columns, the table
will look like this.





















Along with content this is what our whole document is.

Sites I visit. yahoo google	To err is human to forgive divine.

And we will get a page like this.






Since we wanted the table to be invisisble and to be the size of the page we
set the attributes width=”100%” and border=”0”.

The other method to layout a webpage is to use CSS. But since this is a 30 min
tutorial, we will skip it.

The final pot pourri.

Let us put all we have learnt to use, to create a really snazzy site.

	You could put anything here
Sites owned by aliens. Don't visit them. yahoo google blogger	Can you see the image to the left? This was originally a cat. But aliens got her. And see her state now. Warning: Aliens may be trailing you now. Get out of their way. NOW! How to hide from aliens? Visit Nasa's site. They have information about them.
I am not an alien! I hate them!	Copyright you. Contact me

This is our final page.




Thank for for visiting. I hope I have been able to be of some help.