Announcement

**Shaheen** · 20 August 2007, 13:47

Re: Learn Complete HTML (English)

How to create a html file?

For Windows Users:
a)Open notepad or wordpad
b)Save the file as test.html
c)When ever we want to edit the file, go to the directory where the file was saved. Select the file. Press Shift and simultaneously right click the mouse over the file. Now select 'Open With' and select notepad / wordpad to open then file.

For Linux User:
a)Use vi in a terminal and open a file as "vi test.html"
b)Save the file by using ":wq"
c)When ever we want to edit the file, Open the file using vi or quanta+

**Shaheen** · 20 August 2007, 13:58

Re: Learn Complete HTML (English)

Basic and Most used html tag list.

The list is an index of html tag.
We will be seeing each tag in depth .

<html> </html> : The main tag
<head> </head> : header tag

<body> </body> : body tag

<b> </b> : makes the font bold

<center> </center> : aligns things in center

<br> : break line tag

  : space tag

<p> </p> : define paragraph

<H1> </H1> : makes the font as a heading

<u> </u> : underlines the font

<i> </i> : makes the font italic

<pre> </pre> : to create pre formated text

<strike> </strike> : makes striked text or word

<font> </font> : sets font color, size, type

<img> </img> : used to add image

<a> </a> : linking tag

<marquee> </marquee> : make text move

<blink> </blink> : make text blink

<ul> </ul> : used to list things

<li> </li> : used to list things

<table> </table> : to define table

<tr> </tr> : table row inside table

<td> </td> : table column inside row

<hr> : horizontal line tag

<form> </form> : define forms

<textarea> </textarea> : shows text area

<input> </input> : creates form types

<select> </select> : used to create combo box

<meta> : meta tags are used to redirect, refreh pages

<iframe> </iframe> : used to create internal frames

**Shaheen** · 20 August 2007, 14:05

Re: Learn Complete HTML (English)

The parent tag <html>.

The first tag that you add on your file will be html.
This is the tag which defines that the document is html.

Insert the tag in to your file as.
<html>
</html>

Any new tag added will lie between this tags.
Any html file should have head and body tag inside the html tag.

<html> is called starting html tag.
</html> is called ending html tag.

Most tags in html will have both starting and ending tags.

**Shaheen** · 20 August 2007, 14:12

Re: Learn Complete HTML (English)

How to set the title of the html page?

Head Tag!
Code:
<html>
<head>
</head>
</html>
It is like the head of a human, because it is used to identify the file.
head tag should lie inside "html" tag. head tag has many purposes
But at this point we will discuss only one of its tags <title>.
Other tags as <script>, <style>, <meta> will we taught later.

title
This tag is used to set the title of the page.
The title will be displayed on the left top corner of the browser page.
This tag should be present inside "title" tag as

**Shaheen** · 20 August 2007, 14:15

Re: Learn Complete HTML (English)

Body Tag!

BODY
Code:
<html>
<body>
</body>
</html>

It is like the body of a human.
BODY tag should lie inside "html" tag.

Any thing we type inside the body tag will be displayed in the browser page.
e.g: Combining all the tags learned so far

<html>
<head>
<title> My Page
</title>
</head>

<body>
This is my first page </body>
</html>

**Shaheen** · 20 August 2007, 14:19

Re: Learn Complete HTML (English)

How to set the background color in html?

First let us know what we call as attributes.
If human body is tag, its color can be called its attribute.
Similarly each tag can have its own set of attributes.

Now we will see about the attributes of body tag.
The most used one is "bgcolor". It is used to set the background color.
<body bgcolor="red">
</body>

SO we add the attribute in the opening tag.
There we give the attribute and equate it to the value we want.
"bgcolor="green"". You can set any value as red, blue, orange, yellow, etc......

e.g: Combining all the tags learned so far

<html>
<head>
<title> My Page
</title>
</head>

<body bgcolor="green">
This is my first page </body>
</html>

**Shaheen** · 20 August 2007, 14:23

Re: Learn Complete HTML (English)

How to set background image in html web page?

background:
This is an attribute for body tag used for setting image or picture as a background.
<body background="./test.jpg">
</body>

The value for the attribute is the path of the image file.
In this example we have a image file named test.jpg in the same directory of the html file, so we use the path as ./test.jpg
It is mainly used when we want a common background a lines/stripes etc.
The image in our example, test.jpg is a very small one as shown here
So a very small image can be used to set the background of such a big page

Combining all the tags learned so far
Code:

<html>
<head>
<title> My Page
</title>
</head>

<body bgcolor="green" background="./test.jpg">
This is my first page </body>
</html>

**Shaheen** · 22 August 2007, 16:01

Re: Learn Complete HTML (English)

How to create bold text in html?
How to create underlined text in html?
How to create italic word aligned center in html?

Now we are going to see how to decorate the text

bold font: <b></b>
Any text given in between the "b" tag will appear as bold

underline tag: <u></u>
Any text given in between the "u" tag will appear underlined

italics: <i></i>
Any text given in between the "i" tag will appear in italics

Align Center: <center></center>
Any text given in between the "center" tag will be aligned center

Line Break: <br>
This is a tag which is used to break the line and move to next line.
This tag does not require closing tag.
When ever you want the text to start in a new line give the tag <br>

Combining Things:

<html>
<head>
<title> My Page
</title>
</head>

<body bgcolor="green" background="./test.jpg">
<center> <b> <u> <i>This is my first page </i> </u> </b> </center> </body>
</html>

**Shaheen** · 22 August 2007, 16:02

Re: Learn Complete HTML (English)

Please note that the order of opening and closing tags.
That is <center> <b> .....</b> </center>
It is like putting a box inside a box. So inner tag should be closed first then next

**Shaheen** · 22 August 2007, 16:06

Re: Learn Complete HTML (English)

How to draw a horizontal line in html?
How to use lists in html?

Horizontal Line: <hr>
This is special tag used to draw new horizontal lines.
It doesn't require closing tags.

This tag has the attribute "width" to specify the width of the line
<hr width=60%> will give the below line

Lists:
Un Ordered Lists: <ul> , <li>
Tag to create a list of items.
Code:

Result:

List1
List2

Ordered Lists: <ol> , <li>
Tag to create a list of numbered items. The numbering will be done automatically.
Code:

Result:

List1
List2

Nested Lists: <ul> , <li>
Code:

Result:

List1
- Sub List1
- Sub List2
List2

**Shaheen** · 22 August 2007, 16:09

Re: Learn Complete HTML (English)

How to use headings tag in html?
How to create blank white space in html?
The use of <div> tag?

Headings: <h1> </h1>
Any text that comes with in this tag will be of heading type 1.
Code:
<h1>
Heading 1
</h1>

Result:Heading 1

Similarly we can draw different headings using <h2> </h2>

< h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

Space:  

This code will help you to give some big space between words or character.
One   (nbsp stands for "non-breaking space") is equal to a single space.

Example: testing       & nbsp;space.
Result: testing space.

DIV: <div> </div>
This tag is basically used to align the text in left/right/center
This tag will widely used in css.

Example 1:
<div align=left>
Left <br>
Left
</div>

Result 1:

Left
Left

Example 2:
<div align=center>
Center <br>
Center
</div>

Result 2:

Center
Center

**Shaheen** · 22 August 2007, 16:11

Re: Learn Complete HTML (English)

How to use <pre> tag in html?
Setting font size and color in html?

Pre Formated: <pre> </pre>

This tag is basically used for pre formating.
Any thing You give in between this tag will be displayed exactly as you give.
That is what ever you type, as space, break line etc will be there

Example:
<pre>
This is pre formated CODE
</pre>

Result: This is pre formated text
Font: <font> </font>

Only with the help of this tag we can change the color and size of the text.

Font Color:
Font color can be changed by using the attribute "color"
Example:
<font color=red> This is red colored text </font>

Result:
This is red colored text

Font Size:
Example:
<font color=red size=5> This font size is 5 </font>

Result:
This font size is 5

**Shaheen** · 22 August 2007, 16:13

Re: Learn Complete HTML (English)

How to create striked text in html?
I want to give base and power text in html?

Striked Font: <strike> </strike>

Any text given in between this tags will appear striked

Example:
<strike> This is striked text </strike>

Result: This is striked text

Sub script Font: <sub> </sub>

This tag will help in creating sub script or base text (e.g log base 10).

Example:
Test <sub> Sub (base) Text </sub>

Result:
Test Sub (base) Text

Super script Font: <sup> </sup>

This tag will help in creating super script text (power text - e.g: x power y).

Example:
Test <sup> Super (power) Text </sup>

Result:
Test Super (power) Text

**Shaheen** · 22 August 2007, 16:14

Re: Learn Complete HTML (English)

How to insert a image in html?
Tag to set image border html?
I want to set image in both left and right ends in the same line?

Image Tag: <img>

To insert a image in your a page we need to use the tag "img" with its attribute "src"
Example Code:
<img src="test.jpg">

Result:

Here we assume that we have the image file in the same directory of the html file.
We can also give the full path of the directory as
Example:
<img src="C:\images\test.jpg">

Width and Height:
We can resize images that are displayed in web pages using the attributes width and height.
Example Code:
<img src="test.jpg" width=100 height=100>
Result:

Alignment:
We can align the image using the attribute "align".
The attribute takes values left or right or center.
Example Code:
<img src="test.jpg" align=left> <img src="test.jpg" align=right>
Result:

Borders:
We can set border around images using the attribute "border". This can be used to create a space around the picture.
Example Code:
<img src="test.jpg" border=4>
Result:

Announcement

Unconfigured Ad Widget

Learn Complete HTML (English)

Learn Complete HTML (English)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment