Starting with Webpages

Attention:
For convenience of this site '<'commandname'>' is changed to "«commandname»" so make note of it.
and convert it before using it.
Do not use any html editing program like MS FrontPage . You must work
on the codes yourself.


1-1 Start Here
Now open notepad and type the following code.

Example 1-1:
«HTML»
Hello world!
«/HTML»

Now save the text as "page11.html" To browse html file open windows explorer and double click
on the file. You must see your first web page opened in your web browser.Note: If you have any
question about lessons. You can ask them via mail to deshabhishek007@indiatimes.com with subject "WEB TEC".

«HTML» and «/HTML» are called tags. First one is a start tag and second is an end tag. Tags are
something like commands in programming languages. «HTML» tag tells the browser that this is
start of the HTML and «/HTML» marks its end.
«HTML» «/HTML» mark start and end o a html page.

1-5 HTML code headers

Every html page must have a header. Header contains important information about the page.
Different tags are used for different sections of a header. Header of an html page is specified by

«HEAD» and «/HEAD» tags.
«HTML»
«HEAD»
...
«/HEAD»
«/HTML»

We will enter header information between «HEAD» «/HEAD» tags.

1-6 Title

One of the most important parts of a header is title. Title is the small text that will appear in title
bar of viewer's browser. So html document will be as below.

«HTML»
«HEAD»
«TITLE»Title of the page«/TITLE»
«/HEAD»
«/HTML»

1-7 Web page body

Now our web page needs a body in which we will enter web page content. As you may guess we
will use these tags:
«BODY» «/BODY»
Body will come right after header end tag. So our web page will be something like this

Example 1-2:

«HTML»
«HEAD»
«TITLE»My company web page«/TITLE»
«/HEAD»
«BODY»
Welcome to our homepage. More text here.
«/BODY»
«/HTML»

Now type html code in notepad and save it as "page2.html". Then view html file in your browser
by double clicking on it in windows explorer.

1-8 Extended «BODY» tag

Most of html tags we will learn have optional parameters and extensions. Here we will learn to
extensions for «BODY» tag.

1-9 Background color for body of web page

If you want you can change background color of your web page by extending «BODY» tag as
below.

Example 1-3:

«HTML»
«HEAD»
«TITLE»Page with Back Color«/TITLE»
«/HEAD»
«BODY BGCOLOR="#00FF00"»
Page with Back Color
«/BODY»
«/HTML»

This will change your background color to green. Format of color number is RRGGBB. You know
that each color is a combination of three main colors: Red, Green and Blue. In color format RR is
value of red component of the main color in hexadecimal format. GG is value of green
component and BB is the value of blue component.
Two digit hexadecimal number can be anything between 00 to FF i.e. 0 to 255 in decimal format.
So if we write 00FF00 we mean (red=0, green=255, blue=0) so the result is a pure green color.
You can produce 16 million colors in this way but pay attention that not all of the browsers will be
capable to show all these colors. So test your web page in 256 colors mode.

1-10 Background Image

We can use a background picture for web page instead of background color. You must have a
ready image file in .gif or .jpg formats. Now you must extend «BODY» tag as below. "image1.gif"
is file name of he image we want to use as background image.
«BODY BACKGROUND="image1.gif"»

Example 1-4:

«HTML»
«HEAD»
«TITLE»Page with background image«/TITLE»
«/HEAD»
«BODY BACKGROUND="image1.gif"»
«B»Page with background image.«/B»
«/BODY»
«/HTML»

Image file must be in the same folder as your html file. Otherwise browser will not be able to find
it.