Learn HTML page

Jalfrezi Html lessons..Lesson 2 .. Home Page..Learn to read Hindi..Write to us if you find this lesson useful

Many people could set up their own web page on space provided free by their Internet Service Providers - but do not do so as they are not sure about writing html ( hypertext markup language) which is needed to write web pages .

Its really quite easy and you can learn most of the basics just in these short lessons. The secret as in learning all languages is to go very slowly understanding each line and memorising it before going to the next one.

You can write html in a text editor like windows notepad - remember to save it as a .htm file -and then open it in your browser to check it out ; or other programs like Word or by getting a proper editor from various sites. Most ukindia pages are written with Html assisstant editor -a small compact but excellent freeware program you can download from the web from Htmlasst.

Supposing we wanted to write on our web page a list say 1. Income 2. Expenses
then without html the computer would write

1. Income 2. Expenses

If we want the Expenses item to be on a separate line we have to tell the comptuer that by putting a command or tag

br - break line - after the first line like so

and the computer will now print

1. Income
2. Expenses

Note in the above image that the tag for break line - br- has an opening angled bracket < before it and and a closing angled bracket > after it. Anything written between the angled brackets <> is not printed on the screen but obeyed by the computer.

If we wanted two lines ie a paragraph between them we would write

and the computer would print

1. Income

2 Expenses

Suppose we wrote three sentences .

My name is Joe. I live in Toronto . This is my house.
But if we wanted a paragraph ( two empty lines ) before the last sentence. We would write it as

And it results in

My name is Joe. I live in Toronto .

This is my house.

This below will result in a horizontal line after the word house.

like so

My name is Joe. I live in Toronto . This is my house.

You may have noticed that the horizontal line is only half as long as the page as we have put width =50% in the tag . If you just wrote HR ( from now on we will put tags in capitals with the understanding that you have to put an opening angled bracket before and a closing angled bracket after the tag, you would get a horizontal line drawn right across the page.

There are about 20 or so tags and you already know three of them

for break line , paragraph and horizontal line.

Go to the menu on top of this page and under options in netscape select document source and you will find the tags hiding . Note the first tag is title .

This tells the computer that this is the title of the page used by Yahoo and others to index it but do not print it out. Of course we have to tell the computer when the title heading has ended -otherwise it will think the whole document is a title ! so we put a / in the closing title tag to tell it where it has ended.

We can write different size letters by using the h1...h6 tages , h1 being the largest . Note we need a / to tell the computer where each heading ends. .






If we wanted to centre these six hellos we would write a center opening and /center closing tag






Next if you look at the source code again is very useful body color tag . Note bg stands for background . For this ukindia web page the tag reads

the first two letters in the inverted "" marks are 8c and belong to red color , the next two b7 are for green and the last 96 for blue. It tells the computer what strength of colors to use. Numbers run from 0 to 9 and then a-f where a is 10 , b is 11 ..f is 16.

In the "8cb796" we know that b=11 the first color for green is higher than 8 of red and 9 of blue so this page is predominantly green.

If we used "ffffff" ie ff for red ff for green and ff for blue we would get all colors strong and equal ie R+G+B= White ! and if we used body bgcolor="000000" ie no red no green and no blue we would get a black page and we would not be able to see anything unless as below we specified that the text color was white.

We would then get a black background with ghostly white text.

A body bg color tag of ffff00 would give us just R+G with no blue ie yellow color.

Sometimes you may see a marbled look in the background. The way to do it is to save a picture as a transparency and make that the background eg in Rakesh's page Rakesh there is a marble background . This is done by writing Html as BODY BACKGROUND="marble.gif" . Of course you have to upload the marble.gif file first which you can get from Rakesh's page.
Since putting a left angled bracket means tag open we cant show that here as the computer will think it is an html instruction and will try to execute it , so we will use the other brackets { } , so when we write {br} {p } {hr} we mean

The angled brackets are the ones you should use in writing your html document .

Another useful tag is font color to change the text color for eg.

{font color="ff0000"} This is red color {/font}

leads to red color like so

This is red color

The {/font} , tells it to end red color .

For yellow you would write {font color="ffff00"} This is yellow{/font} .

This is yellow .

Remember again to change { to the angled bracket .

This following section is the most important as it tells us how to link things. If we want to go from one part of a page to another we just put a LINK tag at the place we want to link FROM and an ANCHOR tag where we want to go TO

Notice one space between a and href

Lets use the link tag "jump".

For eg click on the following link after reading the rest of the paragraph.This is what happens . It says Lets link from here . Note the color of the link ( Lets link for here) is different from normal text color and each link must be given a name , in this example the name given is "jump" and the hash mark # signifies that the link jump is to somewhere on this page. Note that the link information is hidden below the link color and only the computer knows where to go .if you just hover your mouse over the link ( Lets link from here) you will see at the bottom the hidden name of the link.

If you go to the menu at the top and ask for 'source' from view or options you will see the hidden html language of the whole web page .

We can link to a different page by leaving out the hash mark and writing the page name ( Ukindia lyrics page ) and in the tag put the file name ( zlyr.htm) as below..

Note the /a tag at the end to tell the computer where the link tag finishes. The name in the angled brackets -zlyr.htm- is the name of the file you want people to go to . Its a good idea to start with x, y or z the file names you wont update frequently as they will fall to the bottom when you ftp( file transfer protocol ) to update your site while a file like the film page is named afil.htm as it is updated frequently and stays at the top. Remember to come back to this page by clicking on the back arrow of the browser Go to Ukindia Lyrics Page.

You can link to another person's web page by putting a link to that site. This is what the web is all about ,surfing from , from site to site and page to page . For example the following link will get you to Jennifer's excellent home page.

Jennifer's Home Page

Note her website address is within the "" marks and the name Jennifer's home page is what we have described it as, which may be different from what she calls it .

Another link is for the pictures as gif or jpg files . Here is how you would get a picture of australia on your web page.

This would show the australian map in the bottom of the text.

The align=bottom in the tag means put the image named austral.gif at the bottom of the text.

You can change this bottom word to middle or top or right or left .
Align=middle would show the australian map in the middle of the text.

You can get many pictures from other sites by right clicking your mouse over the picture and then saving them . Right click on the map of australia above and save it . You have to save it in the same directory as your htm file to load it.

You have learnt enough html to make up some simple web pages . Lets design a sample page . Lets list it in yahoo as 'My home page' . Have yellow as the background color .Have a large h1 heading centred saying My Web Page followed by a horizontal line . Then write in h2 size 'Hello Everybody' followed by a paragraph. Then write 'This is where I live' followed by a break line and the text 'In Australia!' and a picture of Australia at the top end of the text .Then a 75% horizontal line 5 sizes thick ( just add size=5 after width % ) . Next a paragraph and then text saying 'For another good home page go to' and a link to Jennifer's page.Next a full horizontal line followed by a jump 'To the top'. Finally put in a link to this page zhtm1.htm with the text reading 'Ukindia Learn Html Page. This is what your page should look like.Note the name anchor at the top .

Now see if your page looks like this Sample page
There are conventional info tags like html , body , head which are not necessary but can be added as below

Note the /body, /html at the end

Lesson 2
LINK TO HERE IF THE NAME TAG IS JUMP. With your cursor go back to the link point you came from.