Scribd
Upload
3 views

web programming (1)

The document provides a comprehensive introduction to HTML, detailing its purpose as the standard markup language for creating web pages. It explains various HTML elements, tags, and attributes, including how to structure a web page, format text, create links, and insert graphics. Additionally, it covers the use of lists, comments, and the differences between tags, offering practical examples and code snippets for better understanding.

Uploaded by

Negasa Alemu
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
3 views

web programming (1)

The document provides a comprehensive introduction to HTML, detailing its purpose as the standard markup language for creating web pages. It explains various HTML elements, tags, and attributes, including how to structure a web page, format text, create links, and insert graphics. Additionally, it covers the use of lists, comments, and the differences between tags, offering practical examples and code snippets for better understanding.

Uploaded by

Negasa Alemu
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 37

Wollega University

UNIT 2
HTML
What is HTML?

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language


 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render
the content of the page

Example Explained
 The <!DOCTYPE html> declaration defines this document to be
HTML
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the
document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward
slash inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag
the closing tag.

HTML tag tells the browser that the document is HTML;

Page 1
Wollega University

<html>

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

</html> ,The '/' bit which tells the browser that this is the end tag

Heading
heading tag 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>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is normal text!</p>
</body>
</html>
Let us study about <br> tag. Please write the code below and save as
an .html file
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>
My name is Abebe. <br>
I am studying at University of wollega .
</body>
</html>
Comments
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.

Page 2
Wollega University

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>

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>Abebe Kebede</b>.<br>
I am </i> at <u>University of wollega</u>.<br>
My major is <i>computer science</i>
</body>
</html>
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.

Page 3
Wollega University

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

<html>
<head>
<title>Welcome to my Home Page</title>
</head>
<body bgcolor="blue">
My name is Abebe Kebede

</body>
</html>

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 Abebe kebede

</body>
</html>

Using the Font tag

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>

Page 4
Wollega University

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>

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 Abebe kebede
<p align="right">I am a student of University of
wollega</p>
</body>
</html>

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’.

Create a Link to new pages using <a href=”“”>.

Page 5
Wollega University

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 first.html


<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Abebe Kebede. <br>
I am teaching at Wollega University <br>
To know about my hobbies, <a href="hobby.html">click
here</a>
</body>
</html>
When you will left click mouse on the link ‘click here’, a new web-
page hobby.html should open. But as such hobby.html 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 hobby.html, remember
that hobby.html should be saved in the same directory which contains
first.html.
<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>
</body>
</html>

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”

Page 6
Wollega University

<a href=””> click here </a> ?


A) The same page will be refreshed again.

Lists
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 hobby.html


<html>
<head>
<title>This is my hobby page</title>
</head>
<body>
<b>My hobbies are</b><br>
<ul>
<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 hobby.html

<html>
<head>
<title>This is my hobby page</title>
</head>

Page 7
Wollega University

<body>
<b>My hobbies are</b><br>
<ol>
<li>Football</li>
<li>Listening Music </li>
<li>Reading</li>
</ol>

</body>
</html>

output?

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>Wollega</li>
<li>incheon</li>
</Ul>
</UL>
</body>
</html>

Create an Email link and External link.


Create an Email link

Page 8
Wollega University

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 Abebe Kebede. <br>
I am studying at University of Wollega <br>
To mail me, Please <a
href="mailto:[email protected]">Click here</a>
</body>
</html>

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 Abebe Kebede. <br>
I am studying at University of Wollega <br>

The sites I visit for fun are


<ol>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.hotmail.com">Hotmail</a></li>
</ol>

Page 9
Wollega University

To mail me, Please <a


href="mailto:[email protected]">Click here</a>
</body>
</html>

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 “asia.gif”.

<html>
<head>
<title>mail</title>
</head>
<body>
My name is Abebe Kebede. <br>
I am studying at University of Wollega <br>
Below is the map of Asia<br>
<img src="asia.gif" alt="map of asia">
</body>
</html>
Link to specific section in another document

Let’s take the previous example

Type the following code and save as first.html


<html>
<head>
<title> First Page</title>
</head>
</body>
My name is Abebe Kebede. <br>
I am teaching at Wollega University <br>
My hobbies are <br>
<a href="hobbies.html#soccer">Soccer</a><br>

Page 10
Wollega University

<a href="hobbies.html#music">Music</a><br>
<a href="hobbies.html#read">Reading</a><br>

</body>
</html>

And type the following code and save as hobbies.html


<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>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>

Page 11
Wollega University

<ul>
My favorite players are
<li>David Batty, Leeds United </li>
<li>Marcus Bent, Ipswich Town </li>
<li>Craig Short, Blackburn Rovers </li>
<li>Dean Windass, Middlesbrough</li>

</ul>
</body>
</html>
Now when you will click on “soccer”, hobbies.html will open and scroll
down, so that you can see the details about soccer. Similarly, when you
click on “music” , hobbies.html 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>
<li>Jewel</li>
<li>Kylie Minogue</li>
</ul>

Page 12
Wollega University

</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>Dean Windass, Middlesbrough</li>
</ul>
</body>
</html>

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 Abebe Kebede. <br>
I am teaching at Wollega University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif"
alt=soccer></a><br>
<a href="hobbies.html#music"><img src="music.gif"
alt=music></a><br>
<a href="hobbies.html#read"><img src="book.gif"
alt=book></a><br>
</body>
</html>

Page 13
Wollega University

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 Abebe Kebede. <br>
I am teaching at Wollega University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif" alt=soccer
width=100 height=100></a><br>
<a href="hobbies.html#music"><img src="music.gif" alt=music
width=100 height=100></a><br>
<a href="hobbies.html#read"><img src="book.gif" alt=book
width=100 height=100></a><br>
</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>

Page 14
Wollega University

<head>
<title> First Page</title>
</head>
</body>
My name is Abebe Kebede. <br>
I am teaching at Wollega University <br>
My hobbies are <br>
<a href="hobbies.html#soccer"><img src="soccer.gif" alt=soccer
width=100 height=100></a>Soccer<br>
<a href="hobbies.html#music"><img src="music.gif" alt=music
width=100 height=100> </a>Music<br>
<a href="hobbies.html#read"><img src="book.gif" alt=book
width=100 height=100></a>Book<br>
</body>
</html>

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
</TABLE> present, your browser displays the table with a border.
<CAPTION> ... defines the caption for the title of the table. The default
</CAPTION> position of 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).

Page 15
Wollega University

<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!

<html>
<head>
<title> Using Table Tag</title>
</head>

<body>
<table border=1>
<caption> Time Table for Mar-June 2005</caption>
<tr>
<th></th>

Page 16
Wollega University

<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>
<td>-</td>
<td><font color="blue">312</font></td>
<td>-</td>
<td>-</td>

Page 17
Wollega University

</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>

Page 18
Wollega University

Time Table for Mar-June 2005


Monda Tuesda Wednesda Thrusda Frida
y y y y y
9:30-
- - - - 109
10:20
10:30-
- - - - 109
11:20
11:30-
- - - - 109
12:20
12:30-
- - 312 - -
1:20
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 abebe kebede.
</body>
</html>

Page 19
Wollega University

The output is
My name is Abebe Kebede.

Although I gave so many spaces between “Abebe” and “Kebede”,


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
Abebe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;kebede.
</body>
</html>

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.

Page 20
Wollega University

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="main.htm" name="mainwindow">
</frameset>

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

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=”webpage.html”. So,

Page 21
Wollega University

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="main.htm" 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="main.htm" 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. http://kumarharmuscat.tripod.com/iprogram. I am
using frames in that.

<html>

<head>

<title>Internet Programming</title>

</head>

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

<frame name="lp" src="leftpane.html">

<frame name="rp" src="ip.html">

</frameset>

Page 22
Wollega University

</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 leftpane.html

<html>

<body>

<B>Intenet Programming</B>

<font size=2 type="arial">

<a href="ipcontents.html" target="lp">Course Contents</a><br>

<a href="ethics.html" target="rp">Code Of Ethics</a><br>

<a href="qb.html" target="rp">Assignment</a><br>

<a href="schedule.html" target="rp">Lecture Notes</a><br>

<a href="project.html" target="rp">Project</a><br>

</body>

</html>

output ?

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.

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. “ethics.html” 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.

Page 23
Wollega University

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="leftpane.html">

<frame name="rp" src="ip.html">

</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?

Page 24
Wollega University

A) Yes

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


A) The solution is below

<html>

<head>

<title>Internet Programming</title>

</head>

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

<frame name="lp" src="leftpane.html" noresize>

<frame name="rp" src="ip.html">

</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="leftpane.html">
<frame name="rp" src="ip.html" 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

Page 25
Wollega University

<frameset cols="15%,85%">
<frameset rows="20%,80%">
<frame src="timetable.html">
<frame src="hobbies.html" name="sidemenu">
</frameset>
<frame src="first.html" 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 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>

Page 26
Wollega University

<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.

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.

Page 27
Wollega University

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=”process.asp”>


Or
<form method=”post” action=”process.asp”>

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>

Page 28
Wollega University

</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;<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

<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="">

Page 29
Wollega University

Enter your name:&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>

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>.

Page 30
Wollega University

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>

Page 31
Wollega University

</head>

<body>

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


Which fruit do you like? <br>
<input type="checkbox" name="fruit" value="apple" checked>
Apple <br>
<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>

Page 32
Wollega University

<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
 Type=”radio”
 All the input tag has a common name “radio”.
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>

Page 33
Wollega University

<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>
<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="">

Page 34
Wollega University

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>
</form>

</body>
</html>
The output will be
Enter your name:
Enter your password:
Write a short note about urself

Page 35
Wollega University

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?
Apple
mango

Page 36
Wollega University

Orange

If you click on the submit button, all the inputs will be passed to the
page specified in action attribute of for

 Exercises
1. Create an HTML page which displays a login screen with
 a username field
 a password field
 a button to submit the form
 a button to reset the content of the form

2. Create an HTML page which displays student registration screen


with
 a name field
 an ID field
 a department field {select box with values:
1. Computer Science
2. Information Science
3. Computer Engineering
 a semester field {select box with values:
1. I
2. II
 an academic year field
{select box with values: 1998-2000, 2000
default}
 a button to submit the form
 a button to reset the form

Page 37

You might also like