Scribd
Upload
2 views52 pages

HTML Notes

The document provides a comprehensive overview of HTML tags, including heading tags (<h1> to <h6>), the <br> tag for line breaks, and comment tags. It also covers text formatting using tags for bold, italic, and underline, as well as setting background and text colors. Additionally, it explains the use of the <font> tag for font styling and alignment options for text.

Uploaded by

Gilbert Ronoh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
2 views52 pages

HTML Notes

The document provides a comprehensive overview of HTML tags, including heading tags (<h1> to <h6>), the <br> tag for line breaks, and comment tags. It also covers text formatting using tags for bold, italic, and underline, as well as setting background and text colors. Additionally, it explains the use of the <font> tag for font styling and alignment options for text.

Uploaded by

Gilbert Ronoh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

Lecture 2

What we will Learn


 Heading tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
 <br> tag
 Comment Tag: <!-- -- >

In the last lecture, we learned that the first tag on the web page we made is the HTML tag
which tells the browser that the document is HTML;

<html>

The last tag on the page is the end HTML tag, which tells the browser that the HTML bit
has finished;

</html>

Did you notice the '/' bit which tells the browser that this is the end tag, not the start?

Heading
Today we will learn about heading tag, which looks like <h1> or <h2> or <h3> or <h4>
or <h5> or <h6>.
Let us take an example to understand this tag.

<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
<h1>My Heading</h1>
You write things here...
</body>
</html>

Write the code above and save as an .html file.


And the output looks something like this
My Heading

You write things here….

Take another example


<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
1
<h6>Heading 6</h6>
<p>This is normal text!</p>
</body>
</html>

And the output is now,

Heading 1
Heading 2
Heading 3

Heading 4

Heading 5

Heading 6

This is normal text!

So, that was different ways of representing text.

Let us study about <br> tag. Please write the code below and save as an .html file
<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
My name is Harshit.
I am studying at University of Suwon .
</body>
</html>

The output will be


My name is Harshit I am studying at University of Suwon

Q) Can any one tell me what is the problem with the above output?
A) When I wrote the code, I made two lines, one line contains my name and the other line
contains the name of University. But the output shows two lines one after the other.
So that means, HTML does not interpret the <return> key.

The solution to the above problem is <br> take. <br> tag is also called as blank rule. It
inserts a line.
<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
2
My name is Harshit. <br>
I am studying at University of Suwon .
</body>
</html>

Now the output will be

My name is Harshit.
I am studying at University of Suwon.

Q What is the output for the code below?


<html>
<head>
<title >My Home Page with a heading</title>
</head>
<body>
My name is Harshit. <br> I am studying at University of Suwon.
</body>
</html>

Answer)

Comments
Q) Why do we need comments? infact every language supports comments, be it C,
C++ or Java?
Answer) When we write a page with a lot of code, and we come back to it later to wonder
what we did, it can be made easier if we have comments in the document which don't
show up in the browser.

For example

<html>
<head>
<!-- This is the title of my page

<title>My Page</title>
</head>
<body>
<!--This is the start of my page! As if I didn't know
that - I did say it was a trivial example!-->

<!--Start of my heading-->
<h1>My Heading - What my page is about.</h1>
<!--End of my heading-->

</body>

3
So the output is

My Heading - What my page is about.


Everthing contained in <!-- -- > is not visible on the browser.

4
Lecture3
Today we will discuss about formatting the text on the browser. That is
 How to make our text appear as bold, italic or underlined
 To set the page color, i.e. background color and Text color
Formatting the text
The following are the tags for bold, underline, italic
<b> </b> for bold
<u> </u> for underline
<i> </i> for italic

Let us look at an example


<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body>
My name is <b>Harshit Kumar</b>.<br>
I am </i> at <u>University of Suwon</u>.<br>
My major is <i>computer science</i>
</body>
</html>

The output will be


My name is Harshit Kumar.
I am at University of Suwon.
My major is computer science

Q) What is the output of the following code?


html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body>
My name is <b><u><i>Harshit Kumar</b></u></i>.
</body>
</html>

A)

Q) What is the default background color of webpage?


A) White.

Q) How can I change the background color of a web page?


A) We can change the background color of a web page by using bgcolor attribute of
<body> tag.

Let us discuss an example to understand this


Write the code below and save as an .html file.

5
<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body bgcolor="blue">
My name is Harshit Kumar

</body>
</html>

The output is

The text color can also be changed, i.e. we can change the background color and text
color.
Write the code below and save as an .html file.
<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body bgcolor="black" text="yellow">
My name is Harshit Kumar

</body>
</html>

The output is

If you put <body bgcolor=”black”> or


<body bgcolor=”#FFE4C4”>, then you will get the same effect on the page color, i.e.
background color will be black. The # tells the browser that the number is hexadecimal.
bgcolor="red" bgcolor="#FF0000"

Similarly, by using the colour name or the code shown in the following table, you will get
the same colour results;

aliceblue antiquewhite aqua aquamarine


Code=#F0F8FF #FAEBD7 #00FFFF #7FFFD4
azure beige bisque black
#F0FFFF #F5F5DC #FFE4C4 #FFE4C4
blanchedalmond blue blueviolet brown
#FFEBCD #0000FF #8A2BE2 #A52A2A
burlywood cadetblue chartreuse chocolate
#DEB887 #5F9EA0 #7FFF00 #D2691E
coral cornflowerblue cornsilk crimson

6
#FF7F50 #6495ED #FFF8DC #DC143C
cyan darkblue darkcyan darkgoldenrod
#00FFFF #00008B #008B8B #B8860B
darkgray darkgray darkkhaki darkmagenta
#A9A9A9 #A9A9A9 #BDB76B #8B008B
darkolivegreen darkorange darkorchid darkred
#556B2F #FF8C00 #9932CC #8B0000
darksalmon darkseagreen darkslateblue darkslategray
#E9967A #8FBC8F #483D8B #2F4F4F
darkturquoise darkviolet deeppink deepskyblue
#00CED1 #9400D3 #FF1493 #00BFFF
dimgray dodgerblue firebrick floralwhite
#696969 #1E90FF #B22222 #FFFAF0
forestgreen fuchsia gainsboro ghostwhite
#228B22 #FF00FF #DCDCDC #F8F8FF
gold goldenrod gray green
#FFD700 #DAA520 #808080 #008000
greenyellow honeydew hotpink indianred
#ADFF2F #F0FFF0 #FF69B4 #CD5C5C
indigo ivory khaki lavender
#4B0082 #FFFFF0 #F0E68C #E6E6FA
lavenderblush lawngreen lemonchiffon lightblue
#FFF0F5 #7CFC00 #FFFACD #ADD8E6
lightcoral lightcyan lightgoldenrodyellow lightgreen
#F08080 #E0FFFF #FAFAD2 #90EE90
lightgrey lightpink lightsalmon lightseagreen
#D3D3D3 #FFB6C1 #FFA07A #20B2AA
lightskyblue lightslategray lightsteelblue lightyellow
#87CEFA #778899 #B0C4DE #FFFFE0
lime limegreen linen magenta
#00FF00 #32CD32 #FAF0E6 #FF00FF
maroon mediumaquamarine mediumblue mediumorchid
#800000 #66CDAA #0000CD #BA55D3
mediumpurple mediumseagreen mediumslateblue mediumspringgreen
#9370DB #3CB371 #7B68EE #00FA9A
mediumturquoise mediumvioletred midnightblue mintcream
#48D1CC #C71585 #191970 #F5FFFA
mistyrose moccasin navajowhite navy
#FFE4E1 #FFE4B5 #FFDEAD #000080
oldlace olive olivedrab orange
#FDF5E6 #808000 #6B8E23 #FFA500
orangered orchid palegoldenrod palegreen

7
#FF4500 #DA70D6 #EEE8AA #98FB98
paleturquoise palevioletred papayawhip peachpuff
#AFEEEE #DB7093 #FFEFD5 #FFDAB9
peru pink plum powderblue
#CD853F #FFC0CB #DDA0DD #B0E0E6
purple red rosybrown royalblue
#800080 #FF0000 #BC8F8F #4169E1
saddlebrown salmon sandybrown seagreen
#8B4513 #FA8072 #F4A460 #2E8B57
seashell sienna silver skyblue
#FFF5EE #A0522D #C0C0C0 #87CEEB
slateblue slategray snow springgreen
#6A5ACD #6A5ACD #FFFAFA #00FF7F
steelblue tan teal thistle
#4682B4 #D2B48C #008080 #D8BFD8
tomato turquoise violet wheat
#FF6347 #40E0D0 #EE82EE #F5DEB3
white yellow yellowgreen
#FFFFFF #FFFF00 #9ACD32

8
LECTURE 4

Today we will learn


 Using the Font tag
 Align the text

Font means a specific size and style of the text. Size means the width of the text, and
style means whether the text is Arial, Times New Roman, etc.

Type the following code in notepad and save the file as .html.
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<font face="arial" size="4"> This is a text with font type Arial and font size
4</font>
</body>
</html>
</body>
</html>

The output will be


Here is normal text without any font tag.
This is a text with font type Arial and font size 4

Q) Try the above code with font Batang, and print the output?

You can also specify the color with the font tag. i.e. color is another attribute of the font
tag. For example
Type the following code in notepad and save the file as .html.
<html>
<head>
<title>
Using the Font tag
</title>
</head>

9
<body>
Here is normal text without any font tag. <br>
<html>
<head>
<title>
Using the Font tag
</title>
</head>
<body>
Here is normal text without any font tag. <br>
<font face="arial" size="4" color=”blue”> This is a text with font type Arial and
font size 4</font>
</body>
</html>
</body>
</html>

The output will be


Here is normal text without any font tag.
This is a text with font type Arial and font size 4

Align the text

To align the text means whether the text will appear on the left of the page or
right of the page or center of the page.

Type the following code in notepad and save as .html file.


<html>
<head>
<title>
Using the Align tag
</title>
</head>
<body>
My name is Harshit Kumar
<p>I am a student of University of Suwon</p>
</body>
</html>

The output will be


My name is Harshit Kumar

I am a student of University of Suwon

If there was no <p> tag, then two statements “My name is Harshit Kumar” and “I am a
student of University of Suwon” would come one after the other on the same line.

10
Whereas <p> tag inserted a new line between the two statements, doing some what the
same as <br> tag.

If you notice the output very carefully there is some difference between <p> tag and <br>
tag.

Q) What is the difference between the <p> tag and <br> tag?

A) The difference is <p> tag inserts a double new line between two statements whereas
<br> tag inserts single new line between two statements. Actually <p> tag means
paragraph tag, and <p> tag indicates the browser to start a new paragraph.

Now let us come back to aligning the text

Type the following code and save as .html file.

<html>

<head>

<title>

Using the Align tag

</title>

</head>

<body>

My name is Harshit Kumar

<p align="right">I am a student of University of Suwon</p>

</body>

</html>

The output is

My name is Harshit Kumar

I am a student of University of Suwon

So, You can see that the second statement is aligned towards the right. Similarly the align
attribute of <p> tag can be used as ‘left’ or ‘center’.

Q) Try the above code with <p align=”left”> and also with <p align=”center”>? Show
what the output is?

11
Lecture 5

Today we will learn


 Create a Link to new pages using <a href=””>.
 Writing the text as a List of Items using <UL>, <LI>, <OL>.

Creating a link to a new page mean that you make one web page which contains a link to
another page and when you click on the link, another page opens. For example

Type the following code and save as [Link]


<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
To know about my hobbies, <a href="[Link]">click here</a>
</body>
</html>

Now what you will see in the output is, an underline below ‘Click here’ and the color will
be blue. This is a link, which links to a new page, and all the links appear as blue color
i.e.
The output will be

My name is Harshit Kumar.


I am teaching at Suwon University
To know about my hobbies click here

When you will left click mouse on the link ‘click here’, a new web-page [Link]
should open. But as such [Link] is not created. So we need to create this page also.
If clicking on a link displays ‘The link cannot be displayed’, then such a link is called as
broken link. A web-site should not contain broken link.

Now you can type the code below and save as [Link], remember that [Link]
should be saved in the same directory which contains [Link].
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<p align="center">Football</p>
<p align="center">Listening Music </p>
<p align="center">Reading</p>

12
</body>
</html>

After clicking on the ‘click here’, a new page [Link] will open, and the output will
be

My hobbies are

Football

Listening Music

Reading

The <a href=””> is also called as anchor tag.

Q) What will happen if the <a> tag is used as follows, and use click on “click here”
<a href=””> click here </a> ?
A) The same page will be refreshed again.

Q) I told you that both the html files i.e. [Link] and [Link] should be in the
same directory, what if both of them are not in the same directory?
A) The answer to this is relative addressing, which we will discuss in later lecture, but
right now remember the word relative addressing.

I listed above my hobbies; there is a tag which helps in listing. The name of the tag is
<UL> tag. <UL> tag is also known as Un-ordered List tag.

Write the code below which does not use <UL> tag, and save as [Link].

<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>

<p>Football</p>
<p>Listening Music </p>
<p>Reading</p>
</body>
</html>

After clicking on the ‘click here’, a new page [Link] will open, and the output will
be
My hobbies are

13
Football

Listening Music

Reading

So, there is not proper indentation. The hobbies football, listening music, reading should
appear towards the right.

The <UL> tag will do the required indentation.


<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<ul>
<p>Football</p>
<p>Listening Music </p>
<p>Reading</p>
</ul>

</body>
</html>

And, now the output is


My hobbies are

Football

Listening Music

Reading

So, now the hobbies football, Listening music, Reading are indented towards the right.

I can further improve upon the hobbies listing.

Q) How can I have a bullet (dark solid circle) before each hobby?
A) There is different tag called as <LI> which is used with the <UL> tag.

Type the code below in notepad and save as [Link]


<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<ul>

14
<li>Football</li>
<li>Listening Music </li>
<li>Reading</li>
</ul>

</body>
</html>

So, the output is


My hobbies are
 Football
 Listening Music
 Reading

What I have done, I have replaced the <p> tag with the <li> tag, still keeping the <ul>
tag.

Q) What if I want numbers instead of bullets?


A) For that, I have to replace <UL> with <OL>.

Please type the code below in notepad and save as [Link]

<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<ol>
<li>Football</li>
<li>Listening Music </li>
<li>Reading</li>
</ol>

</body>
</html>

The output will be


My hobbies are
1. Football
2. Listening Music
3. Reading

We can also do nesting of lists, for details see below.

15
Nested Lists

Write the following code and save as .html file

<html>
<head>
<title>Country visit</title>
</head>
<body>
<b>The countries and cities that I have visited are</b><br>
<UL>
<li>Oman</li>
<UL>
<li>Muscat</li>
<li>Salalah</li>
<li>Nizwa</li>
</UL>
<li>South korea</li>
<ul>
<li>Seoul</li>
<li>Suwon</li>
<li>incheon</li>
</Ul>

</UL>

</body>
</html>

The output will be

The countries and cities that I have visited are


 Oman
o Muscat
o Salalah
o Nizwa
 South korea
o Seoul
o Suwon
o incheon

Oman and South Korea are countries. Muscat, Salalah, Nizwa are cities in Oman whereas
Seoul, Suwon, Incheon are cities in South Korea.

--------------------------------------------------------Finish--------------------------------------------

16
Lecture 6

Today we will learn about


 Create an Email link and External link.
 Insert graphics.
 Link to specific section in another document.

Create an Email link


When you visit a web site, generally at the bottom you see a link for mail to the
creator of the website. The subject of today’s lecture is how to create such link. Such a
link which on clicking opens an email client is called as email link.

Please type the following code in notepad and save as .html file.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Harshit Kumar. <br>
I am studying at University of Suwon <br>
To mail me, Please <a href="[Link] here</a>
</body>
</html>

The output will be

My name is Harshit Kumar.


I am studying at University of Suwon
To mail me, Please Click here

When you will click on “Click here”, mail client will open, through which you can send
email.

Create an External Link


When you visit a web site, you find links to other websites. When you click on the
link, another web site opens. Such a link which on clicking opens another website is
called as external link.

Please type the following code in notepad and save as .html file.
<html>
<head>
<title>mail</title>
</head>
<body>
My name is Harshit Kumar. <br>
I am studying at University of Suwon <br>

17
The sites I visit for fun are
<ol>
<li><a href="[Link]
<li><a href="[Link]
</ol>
To mail me, Please <a href="[Link] here</a>
</body>
</html>

The output will be

My name is Harshit Kumar.


I am studying at University of Suwon
The sites I visit for fun are
1. Yahoo
2. Hotmail

To mail me, Please Click here

So, when you will click on “Yahoo”, yahoo website will open, and if you will click on
“Hotmail”, Hotmail website will open.

Insert Graphics
Most of the websites that you visit contain graphics along with text. So graphics
need to be inserted in a web page.

To understand this, you need an image file, please download an image file from the
internet or locate for an image file on your computer. I have got an image file by the
name of “[Link]”.

<html>
<head>
<title>mail</title>
</head>
<body>
My name is Harshit Kumar. <br>
I am studying at University of Suwon <br>
Below is the map of Asia<br>
<img src="[Link]" alt="map of asia">
</body>
</html>

And the output is


My name is Harshit Kumar.
I am studying at University of Suwon

18
Below is the map of Asia

Link to specific section in another document


In lecture5 we discussed about, how to make a link from one document to another
document. Now we will learn about how to make a link to specific part inside a
document.

Let’s take the previous example

Type the following code and save as [Link]


<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="[Link]#soccer">Soccer</a><br>
<a href="[Link]#music">Music</a><br>
<a href="[Link]#read">Reading</a><br>

</body>
</html>
19
And type the following code and save as [Link]
<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<a name="music"> <p align="center">Listenin Music</p></a>
<p>
I like listening to music a lot.<br>
I like rock, instrumental music.<br>
My favorites are <br>
<ul>
<li>Michael Jackson</li>
<li>Aerosmith</li>
<li>Savage Garden</li>
<li>Celin Deon</li>
<li>Guns & Roses</li>
<li>Britny Spears</li>
<li>50 Cents</li>
<li>Richard Marx</li>
<li>Elton John</li>
<li>Bryan Adams</li>
<li>All Saints</li>
<li>Backstreet Boys</li>
<li>Bon Jovi </li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
<li>Eric Clapton</li>
<li>George Michael</li>
<li>Faithless</li>
<li>Queeb</li>
<li>Cher</li>
<li>Janet Jackson</li>
<li>Jennifer Lopez</li>
<li>Jewel</li>
<li>Kylie Minogue</li>

</ul>

</p>
<a name="read"> <p align="center">Reading </p></a>
My favorites are <br>
<ul>
<li>Computer Books</li>
<li>Fiction</li>
<li>Non-fiction</li>

20
<li>Science</li>
<li>Newspaper</li>
</ul>

<a name="soccer"><p align="center">Soccer</p></a>


<ul>
My favorite players are
<li>David Batty, Leeds United </li>
<li>Marcus Bent, Ipswich Town </li>
<li>Craig Burley, Derby County </li>
<li>Mike Salmon, Ipswich Town </li>
<li>David Seaman, Arsenal </li>
<li>Craig Short, Blackburn Rovers </li>
<li>Dean Windass, Middlesbrough</li>

</ul>
</body>
</html>

Now when you will click on “soccer”, [Link] will open and scroll down, so that
you can see the details about soccer. Similarly, when you click on “music” , [Link]
will open and if required, page will scroll down, so that you can see the details about
music.

Links to Specific Sections within the Same Document


The above concept can also be used for linking a specific section with in the same
document. For example.

<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<a href="#music">Listening Music</a><br>
<a href="#read">Reading</a><br>
<a href="#soccer">Soccer</a><br>

<a name="music"><p align="center">Listenin Music</p></a>


<p>
I like listening to music a lot.<br>
I like rock, instrumental music.<br>
My favorites are <br>
<ul>
<li>Michael Jackson</li>
<li>Aerosmith</li>
<li>Savage Garden</li>
<li>Celin Deon</li>

21
<li>Guns & Roses</li>
<li>Britny Spears</li>
<li>50 Cents</li>
<li>Richard Marx</li>
<li>Elton John</li>
<li>Bryan Adams</li>
<li>All Saints</li>
<li>Backstreet Boys</li>
<li>Bon Jovi </li>
<li>Eminem</li>
<li>Enrique Iglesias</li>
<li>Eric Clapton</li>
<li>George Michael</li>
<li>Faithless</li>
<li>Queeb</li>
<li>Cher</li>
<li>Janet Jackson</li>
<li>Jennifer Lopez</li>
<li>Jewel</li>
<li>Kylie Minogue</li>

</ul>

</p>
<a name="read"> <p align="center">Reading </p></a>
My favorites are <br>
<ul>
<li>Computer Books</li>
<li>Fiction</li>
<li>Non-fiction</li>
<li>Science</li>
<li>Newspaper</li>
</ul>

<a name="soccer"><p align="center">Soccer</p></a>


<ul>
My favorite players are
<li>David Batty, Leeds United </li>
<li>Marcus Bent, Ipswich Town </li>
<li>Craig Burley, Derby County </li>
<li>Mike Salmon, Ipswich Town </li>
<li>David Seaman, Arsenal </li>
<li>Craig Short, Blackburn Rovers </li>
<li>Dean Windass, Middlesbrough</li>

</ul>
</body>
</html>

22
Lecture 7
In this lecture, we will learn about
 Using an Image as a Link
 Aligning Images

Using an Image as a Link


I am using three images, for my hobby page. Type the following code and save
as .html file.
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="[Link]#soccer"><img src="[Link]" alt=soccer></a><br>
<a href="[Link]#music"><img src="[Link]" alt=music></a><br>
<a href="[Link]#read"><img src="[Link]" alt=book></a><br>
</body>
</html>

The above code is similar to the previous code, but the only difference is instead of text,
now there are images. Earlier clicking on text opens a new page, but now clicking on link
will open a new page.

Aligning Images

With the <img src= > tag, you can specify the width and height of the image i.e.
<img src=” “ width=” “ height=” “>

<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="[Link]#soccer"><img src="[Link]" alt=soccer width=100
height=100></a><br>
<a href="[Link]#music"><img src="[Link]" alt=music width=100
height=100></a><br>
<a href="[Link]#read"><img src="[Link]" alt=book width=100
height=100></a><br>

23
</body>
</html>
The above code will reduce the size of the image, and make the web page look more
sensible.

You have some flexibility when displaying images. You can have images separated from
text and aligned to the left or right or centered. Or you can have an image aligned with
text. Try several possibilities to see how your information looks best.

You can align images to the top or center of a paragraph using the ALIGN= attributes
TOP and MIDDLE. i.e.

<img src=”” align=”top/middle”>

Let us take an example, and see how image and text look without align attribute and with
align attribute. First take an example of how image and text look without align attribute.
<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="[Link]#soccer"><img src="[Link]" alt=soccer width=100
height=100></a>Soccer<br>
<a href="[Link]#music"><img src="[Link]" alt=music width=100
height=100> </a>Music<br>
<a href="[Link]#read"><img src="[Link]" alt=book width=100
height=100></a>Book<br>
</body>
</html>

24
So, the output is
My name is Harshit Kumar.
I am teaching at Suwon University
My hobbies are

Soccer

MusicMusic

Book

The output shows that, the text is at the bottom of the image, whereas it looks better to be
text in the middle of the image or at the top of the image.

Let us take another example, and see how text and image text and image look with align
attribute. We have used align=middle.

<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Harshit Kumar. <br>
I am teaching at Suwon University <br>
My hobbies are <br>
<a href="[Link]#soccer"><img src="[Link]" alt=soccer width=100
height=100

align=middle></a>Soccer<br>
<a href="[Link]#music"><img src="[Link]" alt=music width=100
height=100 align=middle></a>Music<br>
<a href="[Link]#read"><img src="[Link]" alt=book width=100
height=100 align=middle></a>Book<br>
</body>
</html>
The output can be seen on the browser.

25
Lecture 8

In this lecture, we will learn about

- How to create Table


- Escape Sequences: Special Characters

Tables are very useful while creating HTML pages; especially tables solve the alignment
problem. A table tag has headings where you explain what the columns/rows include,
rows for information, and cells for each item. In the following table, the first two rows
contain the heading information, each detail row explains an HTML table tag, and each
cell contains a paired tag or an explanation of the tag's function.

Table Elements
Element Description
<TABLE> ... defines a table in HTML. If the BORDER attribute is present, your
</TABLE> browser displays the table with a border.
<CAPTION> ... defines the caption for the title of the table. The default position of
</CAPTION> the title is centered at the top of the table. The attribute
ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> ... </TR> specifies a table row within a table. You may define default attributes
for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or
VALIGN (TOP, MIDDLE, BOTTOM).
<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and
centered. Table header cells may contain other attributes to determine
the characteristics of the cell and/or its contents.
<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left
and centered vertically. Table data cells may contain other attributes
to determine the characteristics of the cell and/or its contents.

Here is the single cell table, the simplest table possible.

<CENTER>

<table border=1>

<tr>

<td>here is a single-celled table!</td>

</tr>
</table>

</CENTER>

The output on the browser is


here is a single-celled table!
26
<html>
<head>
<title> Using Table Tag</title>
</head>

<body>
<table border=1>
<caption> Time Table for Mar-June 2005</caption>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
</tr>

<tr>
<td>9:30-10:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>

<tr>
<td>10:30-11:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>

<tr>
<td>11:30-12:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">109</font></td>
</tr>

<tr>
<td>12:30-1:20</td>
<td>-</td>

27
<td>-</td>
<td><font color="blue">312</font></td>
<td>-</td>
<td>-</td>
</tr>

<tr>
<td>1:30-2:20</td>
<td>-</td>
<td><font color="blue">306</font></td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>

<tr>
<td>2:30-3:20</td>
<td>-</td>
<td><font color="blue">306</font></td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>

<tr>
<td>3:30-4:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>

<tr>
<td>4:30-5:20</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td><font color="blue">309</font></td>
<td>-</td>
</tr>
<table>
</body>
</html>

Time Table for Mar-June 2005


Monday Tuesday Wednesday Thrusday Friday
9:30-10:20 - - - - 109

28
10:30-11:20 - - - - 109
11:30-12:20 - - - - 109
12:30-1:20 - - 312 - -
1:30-2:20 - 306 - - -
2:30-3:20 - 306 - 309 -
3:30-4:20 - - - 309 -
4:30-5:20 - - - 309 -

Escape Sequences: Special Characters (a.k.a. Character Entities)

Special characters are composed of short sequence of characters that are translated by the
browser and displayed as a single character.
Special characters begin with an ampersand(&) and end with a semicolon (;), for example
&nbsp, which is used for giving spaces between words or characters

To understand &nbsp; type the following code in notepad


<html>
<head>
<title>Using nbsp </title>
</head>

<body>
My name is Harshit Kumar.
</body>
</html>

The output is
My name is Harshit Kumar.

Although I gave so many spaces between “Harhsit” and “Kumar”, still the output shows
only one space.

This means that browser shrink the spaces, so to insert spaces, we need &nbsp;.

Type the following code in notepad


<html>
<head>
<title>Using nbsp </title>
</head>

<body>
My name is Harshit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kumar.
</body>
29
</html>

The output is
My name is Harshit Kumar.

------------------------------------------------------Finish----------------------------------------------

Lecture 9
In this lecture, we will learn about
- Frames

What are Frames?


Frames are a way to put one more than one page at a time on a computer screen. Usually
frames are made, to add a menu on one side, and the corresponding pages on the other
side by clicking each option of the menu.

Here is the code for the above


<html>
<head><title>Using Frames</title></head>

<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="[Link]" name="mainwindow">
</frameset>

Note that there is no actual body coding involved when creating frames.

30
About <frameset> and <frame>
The frameset tag is used to declare multiple frames. As you can see in the above example,
there was one frameset, and it reads as

<frameset cols="15%,85%">
This tells the browser that we are creating column of framed pages, in this case two
frames, each in one column. The first one will take the 15% of the total browser screen
and the second one will take 85% of the total browser screen.

After that we use frame tag, which actually loads the desired web page. Each frame must
have a source, such as src=”[Link]”. So, because we used two framed areas
within the frameset, we need two frame tags, each of them to load a page.

<frameset cols="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="[Link]" name="mainwindow">
</frameset>

If we would like to add a third column, we would need to add a third size definition in the
cols (so that all would add up to 100%) and another frame tag inside the frameset.

In the above case we had a vertical menu bar; we can also have a horizontal menu bar.
For that we have to use rows instead of cols. For example

<frameset rows="15%,85%">
<frame src="menu_bar.htm" name="sidemenu">
<frame src="[Link]" name="mainwindow">
</frameset>

Linking with Frames


Now, let us take an example which you have been using, yes it is your course URL i.e.
[Link] I am using frames in that.

<html>

<head>

<title>Internet Programming</title>

</head>

<frameset cols="20%,80%">

<frame name="lp" src="[Link]">

<frame name="rp" src="[Link]">

31
</frameset>

</html>

So, in the above code, I have divided the whole webpage into two frames, first frame
contains the menu and is on the left, second frame load the menu link.

Let us look at the coding of [Link]

<html>

<body>

<B>Intenet Programming</B>

<font size=2 type="arial">

<a href="[Link]" target="rp">Course Contents</a><br>

<a href="[Link]" target="rp">Code Of Ethics</a><br>

<a href="[Link]" target="rp">Assignment</a><br>

<a href="[Link]" target="rp">Lecture Notes</a><br>

<a href="[Link]" target="rp">Project</a><br>

</body>

</html>

Notice, that there is no head tag here. It is quite obvious that I don’t need a head tag now,
because this webpage is contained inside another webpage.

The output of this web page is

Intenet Programming

Course Contents
Grading Policy
Assignment
Lecture Notes
Project

So, when you click on “Course Contents”, your course content opens, when you click on
Grading policy, the page corresponding to grading policy i.e. “[Link]” opens and
same is the case with other links.

Q How come when you click on the menu option, the page opens in the second frame?
A) This is possible through the target attribute of anchor tag.

32
Notice two things, when I created frames, I gave a name to each frame.

<html>

<head>

<title>Internet Programming</title>

</head>

<frameset cols="20%,80%">

<frame name="lp" src="[Link]">

<frame name="rp" src="[Link]">

</frameset>

</html>

So, the name of frame on the left is “lp”, and the name of frame on the right is “rp”.

If I don’t specify target attribute in the anchor tag, then on clicking the menu option, the
page will open in the first frame on the left, and nothing will open in the second frame.
So, I specify where I want the page to open.

There are other possibilities with the target attribute of anchor tag.
- target="_blank" - link is loaded into a new blank browser window (and your
old window stays open).
- target="_self" - link is loaded into frame that link was clicked in. (this is the
default selection. Leave it out if you so please.)
- target="_top" - link is loaded into current full browser window, and all frames
disappear, leaving the new linked page to occupy the entire window.

Special attributes of <frame>

Q) Can I change the size of the frame using my mouse, I mean taking my mouse over the
vertical bar, then left click and dragging it to the left or right?
A) Yes

Q) What if I don’t want the user to drag the vertical boundary?


A) The solution is below

<html>

33
<head>

<title>Internet Programming</title>

</head>

<frameset cols="20%,80%">

<frame name="lp" src="[Link]" noresize>

<frame name="rp" src="[Link]">

</frameset>

</html>

The other useful attribute is scrolling. Say you always want a scrollbar to appear in the
main window. Add scrolling="yes". Want there to never be a scrollbar? Add
scrolling="no".

To understand more about scrolling, type the following code

<html>
<head>
<title>Internet Programming</title>
</head>
<frameset cols="20%,80%">
<frame name="lp" src="[Link]">
<frame name="rp" src="[Link]" scrolling="yes">
</frameset>
</html>

More Advanced Frames


Let us discuss move advanced frames now, where we will see how to divide
the browser window into more than two frames. Take an example first

<frameset cols="15%,85%">
<frameset rows="20%,80%">
<frame src="[Link]">
<frame src="[Link]" name="sidemenu">
</frameset>
<frame src="[Link]" name="mainwindow">
</frameset>

In the above code, browser window is divided into two frames vertically, first frame is
15% of the total size of the browser, and the second frame is 85% of the total size of the
browser. Then again the first frame is divided into two more frames, i.e. the frame which

34
occupied 15% is again divided into two frames horizontally, and the ratio is 20% and
80%.

<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>

The above code will divide the browser window into four frames, each of equal size.

<frameset cols="33%,33%,33%">
<frame>
<frame>
<frame>
</frameset>

The above code will divide the browser window vertically into three frames each
occupying 33% of the total browser window size.

<frameset rows="25%,50%,25%">
<frame>
<frame>
<frame>
</frameset>

The above code will divide the browser window horizontally into three frame, first frame
occupies the 25% of the total browser window, second frame occupies the 50% of the
total browser window, and third frame occupies the 25% of the total browser window.

-------------------------------------------------Finish---------------------------------------------------

Lecture 10

- More about body tag- Setting up link colors


- More about body tag- Setting up Background Image
- Meta tags

In previous lecture, you learned the BODY tag. The BODY tag has many attributes... here are
the most useful ones...

 BACKGROUND="location_of_image" - Background image for web page.


Example: If you have [Link] in the same directory as your HTML file, use
<body background="[Link]"> to load it as your background image.

35
 BGCOLOR="name of color" – Sets the Background Color for the web page

 LINK="name of color" - Color Code for Links (if left blank, most browsers
default to blue.)

 VLINK="name of color" - Code for Links the User has Already Visited (if left
blank, most browsers default to purple.)

 TEXT="name of color"

More About Table Tag


TWO DEMONSTRATIONS OF ROWSPAN

Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

Item 2 Item 3 Item 4


Item 1
Item 5 Item 6 Item 7
<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

DEMONSTRATION OF COLSPAN

36
Item 1 Item 2
Item 3 Item 4 Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

DEMONSTRATION OF HEADERS, <TH>

Head1 Head2 Head3


A B C
D E F
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

DEMONSTRATION OF COLSPAN AND HEADERS,

Head1 Head2
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

DEMONSTRATION OF MULTIPLE HEADERS, COLSPAN

37
Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

DEMONSTRATION OF SIDE HEADERS

Head1 Item 1 Item 2 Item 3


Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TD>Item 4</TD> <TD>Item 5</TD> <TD>Item 6</TD></TR>
<TR><TH>Head3</TH>
<TD>Item 7</TD> <TD>Item 8</TD> <TD>Item 9</TD></TR>
</TABLE>

DEMONSTRATION OF SIDE HEADERS, ROWSPAN

Item 1 Item 2 Item 3 Item 4


Head1
Item 5 Item 6 Item 7 Item 8

38
Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item
11</TD>
</TR>
</TABLE>

SAMPLE TABLE USING ALL OF THESE

<TABLE BORDER>
<TR> <TD>
<TH ROWSPAN=2></TH>
<TH COLSPAN=2>Average</TH>
</TD>
</TR>
<TR> <TD><TH>Height</TH><TH>Weight</TH></TD>
</TR>
<TR> <TH ROWSPAN=2>Gender</TH>
<TH>Males</TH><TD>1.9</TD><TD>0.003</TD>
</TR>
<TR> <TH>Females</TH><TD>1.7</TD><TD>0.002</TD>
</TR>
</TABLE>

CLEVER USES OF ROWSPAN/COLSPAN

12
A
34
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
39
</TR>
<TR>
</TR>
</TABLE>

ADJUSTING MARGINS AND BORDERS


A TABLE WITHOUT BORDERS

Item 1 Item 3
Item 2
Item 4 Item 5
<TABLE>
<TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item
3</TD>
</TR>
<TR> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

A TABLE WITH A BORDER OF 10

Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR> <TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
</TABLE>

CELLPADDING AND CELLSPACING

A B C

D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

Cellpadding tag is used to create space between the text inside your
table and the border surrounding the text.

40
A B C
D E F

Cellspacing tag is used to create space between different cells


within your table.

<TABLE BORDER CELLPADDING=0 CELLSPACING=10>


<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A B C

D E F
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

A B C

D E F
<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ALIGNMENT, CAPTIONS, AND SUBTABLES


DEMONSTRATION OF MULTIPLE LINES IN A TABLE

January February March


Another cell,
This is cell 1 Cell 2
cell 3
and now this
Cell 4 Cell 6
is cell 5

41
<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR>
<TD>This is cell 1</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD>Cell 4</TD>
<TD>and now this<br>is cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>

ALIGN=LEFT|RIGHT|CENTER

can be applied to individual cells or whole ROWs

January February March


Another cell,
all aligned center Cell 2
cell 3
default,
aligned right aligned to center
aligned left
<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR ALIGN=center>
<TD>all aligned center</TD>
<TD>Cell 2</TD>
<TD>Another cell,<br> cell 3</TD>
</TR>
<TR>
<TD ALIGN=right>aligned right</TD>
<TD ALIGN=center>aligned to center</TD>
<TD>default,<br>aligned left</TD>
</TR>
</TABLE>

VALIGN=TOP|BOTTOM|MIDDLE

can be applied to individual cells or whole ROWs

42
January February March
all aligned to top and now this Cell 3
is cell 2
aligned to the top default alignment,
aligned to the bottom center
<TABLE BORDER>
<TR>
<TH>January</TH>
<TH>February</TH>
<TH>March</TH>
</TR>
<TR VALIGN=top>
<TD>all aligned to top</TD>
<TD>and now this<br>is cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD VALIGN=top>aligned to the top</TD>
<TD VALIGN=bottom>aligned to the bottom</TD>
<TD>default alignment,<br>center</TD>
</TR>
</TABLE>

Meta Tag
The <META> tag can be used for a few different purposes. META tag are used in search
engines. When a search engine finds your page, it adds your page to the searchable
database with some information. The information that it adds is actually information
contained in meta tag.

<meta name="description" content="description of page goes here">


<meta name="keywords" content="keywords go here">

Meta tags are not visible in the web page unless the user selects to 'view source'.

<html>

<head>
<title>Using Meta Tags </title>
<meta name="description" content="Joe's Collection of Cool Sound files
for you to use in your home page!">
<meta name="keywords" content="music sounds midi wav joe collection">
</head>

<body>
Page Goes Here
</body>

</html>

43
Lecture 11
In this lecture, we will learn about
- Using Forms

This topic is very important; actually this topic is the base for web programming. Forms
are used for taking input from the user. After receiving input from the user, that
information is generally stored in database, and for storing information in the database,
either CGI, or ASP, or JSP, or some other scripting language is used. So after this, we can
study ASP also.

So, whatever you will learn in this chapter, will be used later when you will learn ASP.

There is a tag for making forms and it is <form> tag. Like each tag, a form opens by
<form> and closes by <form>. The <form> tag must contain method and action attribute.
Method and action are two important attribute for a <form> tag, there are other attributes
also which are not that important.

The method attribute of <form> tag can be either get or post i.e.
<form method=”get”>
Or
<form method=”post”>

I will explain the difference between them later on.

Let us discuss about the other attribute first. A Form consists of some input boxes, list
boxes, check boxes so as to accept input from the user. After user enter input, he presses
the submit button, and all the inputs are processed. This statement “all the inputs are
processed”, means that the inputs are generally saved or inputs are used to generate some
information for the user.

For example, if you are searching for a particular book on the internet, you have to fill up
a form. That form may ask you for the name of the book, or the name of author i.e. you
have to provide some input. The input provided by you is then processed, obviously
HTML cannot process the input, and HTML can only accept the input from the user. The
processing of input can be done using only scripting languages, like ASP, or JSP.

So to process the input, this HTML page passes the information to another web page
which is made in ASP or JSP or in some other scripting language. Action attribute of the
<form> tag specified the name of that web page.

So, <form method=”get” action=”[Link]”>


Or
<form method=”post” action=”[Link]”>

44
Let us now discuss about form elements i.e. input box, list box, check box etc, which are
used for accepting inputs from the user and we will come back to <form> tag latter.
Forms: input TEXT

The above box is called as a text box; we want a text box like this in
our HTML form. For this, we have a tag

<input type=”text” name=”u_name”>

Let us see how it works, type the following code in notepad and save as
a html file.
<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Enter your name:&nbsp;&nbsp;<input type="text"
name="u_name">
</form>

</body>
</html>

The output will be

Enter your name:


There is another attribute that can be used with <input type=”text”>,
and it is value.
<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"
value="Harshit">
</form>

</body>
</html>

The output will be

Enter your name:


If you want the user should be able to enter password, and that password
appears as ‘*’ the screen, then

45
<input type=”password” name=”u_pass”>

Type the following code


<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"
value="Harshit"> <br>
Enter your password:&nbsp;&nbsp; <input type="password"
name="u_pass">
</form>

</body>
</html>

And the output is

Enter your name:


Enter your password:

There are two more attributes of the <input> tag, size and maxlength. Size attribute
defines the initial width of the control, and maxlength attribute specifies the maximum
number of character a user can enter.

For example:
Type the following code in notepad and save as .html
<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"
value="Harshit" maxlength="10"> <br>
Enter your password:&nbsp;&nbsp; <input type="password"
name="u_pass">
</form>

</body>
</html>

46
Forms: additional input types
There are other input types that can be used with < input type= >.
We have used type=text/password.
Type can also be used as <input
type=checkbox/radio/image/submit/button/hidden>.

Let us take an example for each type, and try to understand this.
Type the following code which is for checkbox.

<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Which fruit do you like? <br>
<input type="checkbox" name="fruit" value="apple"> Apple
<br>
<input type="checkbox" name="fruit" value="Mango"> mango
<br> <input type="checkbox" name="fruit" value="Orange">
Orange <br>
</form>

</body>
</html>

The output is
Which fruit do you like?
Apple
mango
Orange
Notice that in the above code,
 type=”checkbox”.
 All the input tag has a common name, i.e. name=”fruit”. You can
give any name, but name should be common for all the checkboxes

If you think that most people like apples, you can pre-select it, some thing like this.
<input type="checkbox" name="fruits" value=”apple” checked> Apples<br>

Type the following code,


<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Which fruit do you like? <br>
<input type="checkbox" name="fruit" value="apple"
checked> Apple <br>
47
<input type="checkbox" name="fruit" value="Mango">
mango <br>
<input type="checkbox" name="fruit" value="Orange">
Orange <br>
</form>

</body>
</html>

And the output is


Which fruit do you like?
Apple
mango
Orange
Radio buttons are sets of circle-like selectors in which the user may only make one
choice. The only difference between radio button and check box is number of selections.
With checkbox user can select more than one option but with the radio button, use can
only select one option.

The above code with radio button is like this.

<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">


Which fruit do you like? <br>
<input type="radio" name="fruit" value="apple"> Apple
<br>
<input type="radio" name="fruit" value="Mango"> mango
<br>
<input type="radio" name="fruit" value="Orange">
Orange <br>
</form>

</body>
</html>

The output is
Which fruit do you like?
Apple
mango
Orange
Notice that

48
 Type=”radio”
 All the input tag has a common name “radio”.

We will discuss later on about type=”image/button/submit/hidden”

Forms: textarea and option/select


<textarea> tag allows the user to enter multiple lines of text. It also
has an opening and closing tag, like most of the form elements. It is
used as follows

<textarea name=”u_text” rows=”4” cols=”10” wrap=”virtual>,

I think only one thing needs explanation here, and it is wrap,


wrap=”virtual” means if user types any thing, the text should not go
beyond the right side of the box.

Type the following code to understand more about <textarea>


<html>
<head>
<title>Using Form tag-TextArea</title>
</head>

<body>

<form method="post" action="">


Write a short note about urself<br>
<textarea name=”u_text” rows=”4” cols=”10”
wrap=”virtual>If you write something here, it will appear in the browser
also.
</textarea>
</form>

</body>
</html>

Write a short note about urself

Anything you include between the opening and closing textarea tags will appear in the
textarea box.

The <select> element works a lot like a radio button, except in that it used a cool drop
down box. It also has a closing tag, </select>. Choices for the drop down box are
created by using <option> tags.

<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>

49
<option value="bananas">bananas</option>
</select>

Which fruit is your favorite?

Now let us put all this into one form, and then complete this lecture.

<html>
<head>
<title>Using Form tag-text box</title>
</head>

<body>

<form method="post" action="">

Enter your name:&nbsp;&nbsp;<input type="text" name="u_name"


value="Harshit"> <br>

Enter your password:&nbsp;&nbsp; <input type="password" name="u_pass"><br>

Write a short note about urself<br>


<textarea name=”u_text” rows=”4” cols=”10” wrap=”virtual>If you write something
here, that will appear in the

browser also.
</textarea><br>

Which fruit do you like? <br>


<input type="checkbox" name="fruit" value="apple"> Apple <br>
<input type="checkbox" name="fruit" value="Mango"> mango <br>
<input type="checkbox" name="fruit" value="Orange"> Orange <br>

Which fruit do you like? <br>


<input type="radio" name="fruit" value="apple"> Apple
<br>
<input type="radio" name="fruit" value="Mango"> mango
<br>
<input type="radio" name="fruit" value="Orange">
Orange <br>

<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>

50
</form>

</body>
</html>

The output will be


Enter your name:
Enter your password:
Write a short note about urself

Which fruit do you like?


Apple
mango
Orange
Which fruit do you like?
Apple
mango
Orange

So, user will provide input, but after providing input he has to submit the input, for
submitting input, we need a button.

So, next topic is How to make a button in HTML page. Very simple, tag for that is
<input type = submit name=”sub_b” >

Insert the line in the above code, and the output will be

Enter your name:


Enter your password:
Write a short note about urself

Which fruit do you like?


Apple
mango
Orange
Which fruit do you like?

51
Apple
mango
Orange

If you click on the submit button, all the inputs will be passed to the page specified in
action attribute of form tag. This topic we will discuss later when we will discuss ASP.

52

You might also like