BAHIR DAR UNIVERSITY

BAHIR DAR INSTITUTE OF TECHNOLOGY

SCHOOL OF COMPUTING

INTERNET PROGRAMMING I LABORATORY MANUAL

Prepared By: Chalachew Muluken

Reviewed By: Yibeltal Tafere

[2007E.C]

0
 BAHIR DAR UNIVERSITY
BAHIR DAR INSTITUTE OF TECHNOLOGY
SCHOOL OF COMPUTING

Approval Certificate of the Reviewer

I have certified and approved the Internet programming laboratory manual prepared by

Chalachew Muluken. As I have reviewed and commented the manual, it carries out the

objectives, completes practical part of the course and fulfills the standard of the curriculum of the

course.

___________________ ____________________ __________________

Name Signature Date

i
Contents
PART ONE: STRUCTURING DOCUMENTS FOR THE WEB.................................................1
LABORATORY I: Basics of HTML Structure and Text Formatting ........................................1
Objectives: ...........................................................................................................................1
HTML Basic Structure .........................................................................................................1
HTML Basic Tags................................................................................................................2
Presentational Elements .......................................................................................................7
Phrase elements.................................................................................................................. 11
Exercise ............................................................................................................................. 13
LABORATORY II: List and Link ......................................................................................... 14
Objectives: ......................................................................................................................... 14
Lists ................................................................................................................................... 14
Basic Links ........................................................................................................................ 19
A page Section Link ........................................................................................................... 20
Download Links ................................................................................................................. 21
E-mail Addresses Link ....................................................................................................... 21
Exercise ............................................................................................................................. 21
LABORATORY III: Marquee and Multimedia ...................................................................... 22
Objectives: ......................................................................................................................... 22
HTML Marquees ............................................................................................................... 22
Adding Image .................................................................................................................... 24
Adding Video and Audio ................................................................................................... 25
Exercise: ............................................................................................................................ 26
LABORATORY IV: HTML Tables ...................................................................................... 27
Objectives: ......................................................................................................................... 27
Basic Table Elements and Attributes .................................................................................. 27
Table caption ..................................................................................................................... 30
Nested Table ...................................................................................................................... 31
Exercise ............................................................................................................................. 32

LABORATORY V: HTML Forms ........................................................................................ 33

ii
 Objectives: ......................................................................................................................... 33
HTML Form Controls ........................................................................................................ 33
Exercise: ............................................................................................................................ 39
LABORATORY VI: HTML Frames ..................................................................................... 40
Objectives: ......................................................................................................................... 40
Creating Frames ................................................................................................................. 40
Exercise ............................................................................................................................. 44
PART TWO: CASCADING STYLE SHEETS ......................................................................... 45
LABORATORY VII: Inline and embedded Style Sheet ......................................................... 45
Objectives: ......................................................................................................................... 45
Inline Style Sheet ............................................................................................................... 45
Embedded Style Sheet........................................................................................................ 47
Exercise: ............................................................................................................................ 49
LABORATORY VIII: External and Imported Style Sheet ..................................................... 50
Objectives: ......................................................................................................................... 50
External Style sheet ............................................................................................................ 50
Imported Style sheet........................................................................................................... 54
Exercise: ............................................................................................................................ 56

PART THREE: JAVASCRIPT PROGRAMMING ................................................................... 58

LABORATORY IX: Basics and Program Control I of JavaScript .......................................... 58
Objectives: ......................................................................................................................... 58
Embedding JavaScript into HTML ..................................................................................... 58
Variables and operators ...................................................................................................... 60
Conditional Statement ........................................................................................................ 61
Exercise: ............................................................................................................................ 63
LABORATORY X: Program Control II of JavaScript ........................................................... 64
Objectives: ......................................................................................................................... 64
The for loop ....................................................................................................................... 64
The while Loop .................................................................................................................. 64

iii
 The do …while loop .......................................................................................................... 64
The break Statement: ......................................................................................................... 65
The continue Statement: ..................................................................................................... 65
Exercise: ............................................................................................................................ 67
LABORATORY XI: Functions and Dialog Boxes ................................................................. 68
Objectives: ......................................................................................................................... 68
Function definition ............................................................................................................. 68
Function Calling ................................................................................................................ 68
Alert Dialog Box ................................................................................................................ 70
Confirmation Dialog Box ................................................................................................... 70
Prompt Dialog Box ............................................................................................................ 70
Exercise: ............................................................................................................................ 71

LABORATORY XII: Form Validation .................................................................................. 72

Objectives: ......................................................................................................................... 72
Basic Form Validation ....................................................................................................... 73
Data Format Validation ...................................................................................................... 74
Exercise: ............................................................................................................................ 76

iv
PART ONE: STRUCTURING DOCUMENTS FOR THE WEB
LABORATORY I: Basics of HTML Structure and Text Formatting
Objectives:
 Acquire skills of the basic structure of hypertext Markup Language
 Implement the basic structure tags of web page development
 Commenting the tags
 Use HTML basic tags

HTML Basic Structure

HTML stands for Hyper Text Markup Language, which is the most widely used language
on Web to develop web pages.
 Hypertext –refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a web page are called Hypertext
 Markup – using HTML to simply markup a text document with tags that tell a
web browser how to structure it to display
To create a simple webpage, follow the following steps
Step 1: open notepad /notepad++ (windows-> all programs->accessories->notepad)
Step 2: write the codes shown below on the text editor

<! DOCTYPE html>

<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1> This is a heading </h1>
<p> Document Content goes here…..</p>
</body>
</html>

Step 3: save the file with the extension of file name .html example simple.html
Step 4: Open the file with the web browser to produce the following output.

1
The above example of HTML document uses the following tags:
<! DOCTYPE ….> this tag defines the document type and HTML version
<html> this tag encloses the complete HTML document and mainly comprises of document
header which is represented by <head>…</head>, document title which is represented by
<title>…</title> and document body which is represented by <body>…</body> tags.
<head> this tag represents the documents header which can keep other HTML tags like <title>,
<link> etc. It may contain elements that are designed for search engines to process or elements
that change the overall appearance of the webpage. But elements in the header do not display
directly as normal webpage content.
<title> the title <title> tag is used inside the <head> tag to mention the document title
<body> this tag represents the document’s body which put the text and elements to be displayed
in the main browser windows and also keeps other HTML tags like <h1>, <div>, <p> etc
<h1> this tag represents the heading
<p> this tag represents a paragraph

HTML Basic Tags

Heading Tags
Any document starts with a heading. HTML have six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5> and <h6>. While displaying any heading, browser adds one line
before and one line after that heading.

2
Example: Heading tags

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

The above program will produce the following result

Align headings and Horizontal Line

It is possible to align headings in left, right and center. The HTML code shown below
demonstrates the align headings in left, right, center and horizontal line. The align attribute uses
left, right and center value to align text headings in their respective sides of the browser. And the
tag <hr /> is used to create horizontal line.

3
Example: alignment and horizontal line

<!DOCTYPE html>
<html>
<head>
<title> align and horizontal line Example</title>
</head>
<body>
<h1 align="center">Centered and horizontal line heading </h1><hr />
<h1 align="left"> Left Aligned Heading</h1><hr />
<h1 align="right"> Right aligned Heading</h1><hr />
</body>
</html>

This will produce the following result

N: B. The content of the paragraph can be centered using <center>…. </center> tag.

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and closing </p> tags as shown below in the example:
when a browser displays a paragraph, it usually inserts a new line before the next paragraph and
adds a little bit of extra vertical space

4
Example: Paragraphing

<! DOCTYPE html>

<html>
<head>
<title> Paragraph Example</title>
</head>
<body>
<p> Here is a first paragraph of text. </p>
<p> Here is a second paragraph of text. </p>
<p> Here is a second paragraph of text. </p>
</body>
</html>

This will produce the following result

Line Break Tag

The <br /> element is used when opening and closing of tags is not needed and to start from the
next line. There should be a space between the character br and the forward slash because older
browsers will have trouble rendering the line break.
Example: Line break

<!DOCTYPE html>
<html>
<head>
<title> Line Break Example</title>
</head>
<body>
<p> Good morning <br /> This is the sample program of line break <br />
Is that working <br /> Thanks<br /> Have nice time<br
5 /></p>
</body>
</html>
This will produce the following result

Preserve Formatting
Any text between the opening <pre> and the closing </pre> tag will preserve the formatting of
the source document. This tag keeps the text to follow the exact formate of how it is written in
the HTML document.

Example : preserve formatting

<!DOCTYPE html>
<html>
<head>
<title> Preserve Formatting Example</title>
</head>
<body>
<pre>
function preservingFunction(strText){
alert (strText) }
</pre>
</body>
</html>

This will produce the following result

Comments – comments use the following syntax

<!--comment goes here -->

6
Anything after <!--until the closing --> will not be displayed. It can still be seen in the source
code for the document, and any other notes to anyone looking at the code. It is good practice to
comment your code, especially in complex documents, to indicate sections of a document, and
any other notes to anyone looking at the code.
Non-breaking Spaces

Use a non breaking space entity &nbsp; to give space between words. For example when coding
the “the Student at BDU” in a paragraph, we should use the similar to the following code

<!DOCTYPE html>
<html>
<head>
<title> Non breaking Space Example</title>
</head>
<body>
<p>
this program is developed by "the&nbsp;Student&nbsp;at&nbsp;BDU."
</p>
</body>
</html>

This will produce the following result

Presentational Elements
We are familiar with the ability to make text bold, Italic, or underline in Microsoft word
processor. In HTML, the following presentational elements are used:
The <b> Element
Anything that appears in a <b> element is displayed in bold, like the word “bold” here.
The syntax is <b>bold</b>
The content of a <b> element will be displayed in the same way as the content of the
<strong>element. It is used to indicate that its content have strong emphasis.
The syntax is <strong>content</strong>

7
The <i> Element
the content of an <i> element is displayed in italicized text, like the word “italic” here.
The syntax is <i>italic</i>.
The content of an <i> element will be displayed in the same way as the contents of the <em>
element. It is used to indicate that its contents have emphasis.
The <u> Element
The content of a <u> element is underlined with a simple line. The syntax is <u>Underlined</U>
to produce results like Underlined.
The <s> and <strike> Element
<s> is just the abbreviated form of <strike> which is used to display texts with strikethrough.
Strikethrough is a thin line through the text.
The <tt> Element
The content of a <tt> element is written in monospaced font like that of a teletype machine. It is
used to make each character having the same size. The syntax is <tt>monospaced</tt>.
The <sup> Element
The content of a < sup > element is written in superscript; it is displayed half a character’s height
above the other characters and is also often slightly smaller than the text surrounding it. The
<sup > element is especially helpful in adding exponential values to equations, and adding the st,
nd, rd, and th suffixes to numbers such as dates.
Example : Written on the 31 < sup > st < /sup > February.
The <sub> Element
The content of a < sub > element is written in subscript; it is displayed half a character ’ s height
beneath the other characters and is also often slightly smaller than the text surrounding it.
Example: the molecular formula of water is H < sub > 2 < /sub >O.
The <big> Element
The < big > element was introduced to make the contents of this element one font size larger
than the rest of the text surrounding it.
Example: The following word should be < big > bigger < /big > than those around it.
The <small> Element

8
The < small > element is the opposite of the < big > element, and its contents are displayed one
font size smaller than the rest of the text surrounding it. If the font is already the smallest, it has
no effect.
Example: The following word should be < small > smaller < /small > than those around it.
The <del> and <ins> Elements
Anything that appears within <ins>…</ins> element is displayed as inserted text where as the
content that appears within <del>… </del> element is displayed as deleted text.
All the above presentational elements are coded as shown below

<!DOCTYPE html>
<html>
<head>
<title> Presentational Elements Example </title>
</head>
<body>
<p>I am a <b>Student</b> at BDU.</p>
<p> I am doing <i>Internet Engineering</i> program<br />
to <u>understand</u> <del>user-side</del> <ins>client side</ins> programming</p>
<p>If I make <s>mistake</s> in the source code, my Teacher give <tt>correction</tt></p>
<p>the date is 21^st October</p>
<p> to show the subscript example like H₂0 </p>
<p> whatever the text<big>bigger</big> or <small>Smaller</small>, It is readable</p>
</body>
</html>

This will produce the following result

9
Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections
or subsections of a page. For example: you might want to put all of the footnotes on a page
within a <div> element to indicate that all of the elements within that <div> element relate to the
footnotes.
The <span> element, on the other hand, can be used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want to group together, you could use the
<span> element as follow
Example: Grouping the content

<! DOCTYPE html>

<html>
<head>
<title> Div and Span Example </title>
</head>
<body>
<div id="menu" align="middle">
<a href="/index.html">HOME</a>|
<a href="/about/contact_us.html">CONTACT</a>|
<a href="/about/index.html">ABOUT</A>|
<a href="/about/dept_info.html">DEPARTEMENT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h3>Content Articles</h3>
<P> Actual Content goes here......</p>
the above is the output of the div tag example<hr />
</div>
<P> here is the span example output</p>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red"> div tag</span> along with CSS</p>
</body>
</html>

10
This will produce the following result

Phrase elements
Some of the elements in the phrase elements are working similar to the presentational elements.
For example the words written in an <em> element will look like the words in an <i> element
but the <em> element is supposed to indicate the addition of emphasis.

<em> and <strong> for emphasis

The content of an <em> and <strong> elements are intended to be a point of emphasis and strong
emphasis respectively in the part of document. Browsers display the strong emphasis in a bold
font whereas the <em> emphasis in an italic font.

Example: <p> the <em>emphasis</em> should be given if texts are written in <strong>bold and
italic </strong> font

<cite>, and <q> for quotations and citation

The <q> element is used to add a quote within a sentence. The text enclosed in a <q>…</q>
elements will be embedded in double quotes.

For example: <p> As Albert Einstein said, <q> Learn from yesterday, live for today, hope for
tomorrow</q>. </p>

The <cite> element is used if we are quoting a text. The source should be placed between an
opening <cite> tag and closing </cite> tag. The content of the source is displayed in an italicized
font.
11
 Example: <P> these tags are taken from <cite>Internet and world wide web</cite> book

Marked Text

Any text that appear within the <mark>…</mark> element is marked with yellow ink.

Text Abbreviation

To abbreviate a text, it should be placed inside the opening <abbr> and closing </abbr> tags. The
title attribute should contain the full description.

Special Terms

The <dfn> ….</dfn> element or HTML definition element allows you to specify that you are
introducing a special term. Its usage is similar to italic words in the midst of a paragraph.

Example: Phrase elements

<!DOCTYPE html>
<html> <head> <title> Phrase Elements Example </title></head>
<body>
<p> the <em> emphasis </em> should be given if texts are written within <strong> bold and italic</strong> font type. </p>
<p> As Albert Einstein said, <q> Learn from yesterday, live for today, hope for tomorrow</q>.</p>
<p> these tags are taken from <cite> Internet and World Wide Web</cite> book. </p>
<p>the following word has been <mark> marked</mark> with yellow</p>
<p> my best friend's name is <abbr title="Geberemedehin">Gebrie</abbr>.</p>
<p> The following eord is a <dfn> special</dfn> term.</p>
</body>
</html>

This will produce the following result

12
Exercise
1. Open the text editor and write HTML basic structure that contains title “Bahir dar university”,
heading “Bahir Dar Institute of tecchnology” and the body the following text

“Bahir Dar institute of technology is One of the institute in Bahir dar university that includes five
schools”

Then save it as example.html and run it to see the result.

2. Write the HTML program that include heading 1 “Ethiopia” within which paragraphs “Ethiopia is
the east Africa country. Ethiopia has many tourist attracting places like lalibla, axume, lake tana
highland monasteries etc” and heading 2 “ Regions” within which paragraphs “ there are two
cities and nine regions.”

3. Write HTML program to get the following output

13
LABORATORY II: List and Link

Objectives:
 Use unordered list tag in HTML script program
 Use ordered list tag in HTML script program
 Write link tags in the HTML script programs to refer to another page

Lists
Unordered Lists
The <ul> tag stands for unordered list which is used to make a list of bullet points. Each bullet
point or line you want to write should then be contained between opening <li> tags and closing
</li> tags. li- stands for list item. The type of the bullet can be square, disc, circle and so on.
The figure shown below is the output of the unordered lists of the HTML program shown in the
example below with the square, disc and circle bulletin.

14
Example: Unordered lists

<!DOCTYPE html>
<html>
<head>
<title> Unordered Lists Example </title>
</head>
<body>
<p> the following is Unordered list using square bullet</p>
<ul type="square">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
<li> Gondar University</li>
<li> Awassa University</li>
</ul>
<p> the following is the Unordered list using the default bullet or disc bullet</p>
<ul type="disc">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
<li> Gondar University</li>
<li> Awassa University</li>
</ul>
<p> the following is the Unordered list using the circle bullet</p>
<ul type="circle">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
<li> Gondar University</li>
<li> Awassa University</li>
</ul></body></html>

Ordered Lists
In an order list, rather than prefixing each point with a bullet point, we can use either numbers
(1,2,3), letters(A,B,C), or roman numerals(i,ii,iii) to prefix the list item.
An order list is contained inside the <ol> element. Each item in the list should then be nested
inside the <ol> element and contained between opening <li> and closing </li> tags

15
If you would rather have letters or roman numerals than Arabic numbers, we can use the
following attribute type on the <ol> element.

Value for type attribute Description Example

1 Arabic numerals(the default) 1, 2, 3, 4, 5

A Capital letters A, B, C, D, E

a Small letters a, b, c, d, e

I Large roman numerals I, II, III, IV, V

i Small roman numerals i, ii, iii, iv, v

The figure shown below is the output of the ordered lists of the HTML program shown in the
example below with the Arabic numerals, capital letters, small letters, large roman numerals and
small roman numerals.

16
Example: Ordered List

<!DOCTYPE html>
<html>
<head>
<title> ordered Lists Example </title>
</head>
<body>
<p> the following is ordered list using arabic numerals (the default)</p>
<ol type="1">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
</ol>
<p> the following is the ordered list using the small roman numerals </p>
<ol type="i">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
</ol>
<p> the following is the ordered list using Large roman numerals</p>
<ol type="I">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
</ol>
<p> the following is the unordered list using capital letters</p>
<ol type="A">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
</ol>
<p> the following is the unordered list using small letters</p>
<ol type="a">
<li> Bahir dar University</li>
<li> Addis Abeba University</li>
<li> Arba Minch University</li>
</ol>
</body>
</html>

17
Definition Lists
The definition list is a special kind of list for providing terms followed by a short text definition
or description for them. Definition lists are contained inside the < dl > element. The < dl >
element then contains alternating < dt > and < dd > elements. The content of the < dt > element
is the term you will be defining. The < dd > element contains the definition of the previous < dt >
element.

Nested Lists
Lists can be nested inside other list. The items in the list may have its own list items so that this
list items can be nested inside the outer list item as shown below.
Example: definition and nested lists

<!DOCTYPE html>
<html>
<head><title> Definition and Nested Lists Example </title></head>
<body>
<p> The following is example of definition list</p>
<dl>
<dt>Unordered List</dt>
<dd> A list of bullet points.</dd>
<dt>An Ordered list</dt>
<dd> An ordered list of points, such as a numbered set of steps.</dd>
<dt>definition List</dt>
<dd>A list of terms and definitions.</dd>
</dl>
<p> the following is example of nested list</p>
<ol type="I">
<li>Addis Ababa University</li>
<li> Bahir Dar University</li>
<ol type="i">
<li>Bahir Dar institute of technology</li>
<li>College of Science</li>
<li>College of Social Science</li>
</ol>
<li>Arba Minch University</li>
</ol>
</body></html>

18
This will produce the following result

The start Attribute

Start attribute is sometimes used for ordered list to specify the starting point of number we need.
The syntax of the start attribute for different numbering system will be the following:
<ol type=”1” start =”4”> -numerals start with 4.
<ol type=”I” start =”4”> -numerals start with IV.
<ol type=”i” start =”4”> -numerals start with iv.
<ol type=”a” start =”4”> -Letters start with d.
<ol type=”A” start =”4”> -Letters start with D.

Basic Links
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link that user can click in a
browser.
The syntax of the anchor is <a href=”Document URL” . . . attributes-list>Link Text</a>
href- is an attribute that references the link web page URL and title attribute is also used in the
<a> tag to display in a tooltip when we hover over the link and also the target attribute is used to
open the link page either on new browser or on the same browser windows.
Syntax: <p> <a href =http://www.Google.com/ title=”Search the web with Google”
target=”_blank”>Google</a> is a very popular search engine. </p>

19
Example: link and definition the results will be

<!DOCTYPE html>
<html>
<head>
<title> Definition and Nested Lists
Example </title>
</head>
<body>
<p> <a href="http://www.bdu.edu.et"
title="Click on the link to open the
website">
Bahir Dar University</a> is the website of
bahir dar University</p>
</body>
</html>

Base Path tag

To link HTML documents related to the same website, it is not required to give a complete URL for every
link rather use <base> tag in the HTML document header- used to give a base path for all the links.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.bdu.edu.et/">
</head>
<body>
<p>Click following link</p>
<a href="/bdu/index.html" target="_blank">Bahir Dar University</a>
</body>
</html>

Here, <a href=”/bdu/index.html” is being considered as <a href=http://www.bdu.edu.et/bdu/index.html.

A page Section Link

To create a link to a particular section of a given webpage by using name attribute, use the
following two-step process
i. Create a link to the place where we want to reach within a webpage and name it using
<a …> tag as follows:

<h1>HTML Text Links <a name=”top”></a></h1>

20
 ii. To create a hyperlink to link the document and place where we want to reach:

< a href=”/bdu/html_text_links.html#top”>Go to the Top</a>

Download Links
To create text link to make PDF, DOC or ZIP files downloadable, simply give complete URL of
the downloadable files as follows:

<a href=http://www.bdu.edu.et/page.pdf>Download PDF</a>

E-mail Addresses Link

Mailto links are links on web pages that instead of pointing to a web page URL or anchor, they
point to an email address. Then when a reader clicks on the link, an email client opens and they
can send a message to that email address. To create a link on your website that opens an email
window, we simply use a mailto link. For example:

<a href=”mailto:webdesign@aboutguide.com”>Send email to the Web Design Expert</a>

Exercise

1. Include the following lists and their sub lists and links in the laboratory I exercise 3
Branches of our hotel
A. Bahir dar branch
i. Main hotel
ii. Hotel b1
iii. Hotel b2
B. Markos branch
i. Mark hotel
ii. Selam hotel
C. Dessie branch
Click the links below to visit the sites
Bahir dar branch
Markos branch
Dessie branch

21
LABORATORY III: Marquee and Multimedia

Objectives:
 Implement HTML marquee that rotate texts in specified direction
 Define different behavior of HTML marquee
 Adding image in the web page and using the image as the link
 Adding audio in the web page and using audio as the background of the page
 Adding video in the web page

HTML Marquees
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down the page depending on the settings. This is created by using HTML <marquee> tag. The
HTML marquee may not be supported by some browsers so that javascript or CSS can be used to
create the same effect.
A simple syntax to use HTML <marquee> tag is:
<marquee attribute_name=”attribute_value” …. More attributes>
One or more lines or text message or image
</marquee>
The <marquee> Tag Attributes

Important attributes for the HTML <marquee> tag are:

 width-this specifies the width of the marquee

 height –this specifies the height of the marquee

 direction-this specifies the direction in which marquee should scroll like up, down,
left or right.

 behavior-specifies the type of scrolling of the marquee like scroll, slide and alternate.

 scrolldelay-specifies how long to delay between each jump.

 scrollamount-specifies the speed of marquee text.

 loop-specifies how many times to loop. The default value is infinite (loops endless).
22
  bgcolor-specifies background color in terms of color name or color hex value.

 hspace-specifies horizontal space around the marquee.

 Vspace-specifies vertical space around the marquee.

Example 1: basics of marquee tag

<!DOCTYPE html>
<html>
<head>
<title> HTML marquee Tag </title>
</head>
<body>
<marquee>This is basic example of marquee tag</marquee>
</body>
</html>

Example 2: marquee with specified width

<!DOCTYPE html>
<html>
<head>
<title> HTML marquee Tag </title>
</head>
<body>
<marquee width="50%">This example will take only 50% width</marquee>
</body>
</html>

Example 3: the text scrolls from left to right with a speed of 10

<!DOCTYPE html>
<html>
<head>
<title> HTML marquee Tag </title>
</head>
<body>
<marquee width="50%" direction="right" scrollamount="10">
this text will scroll from left to right and speed 10</marquee>
</body> 23
</html>
 Adding Image
Images are added to a site using the <img> element, which consists at least two attributes: the src
attribute to indicate the source of the image (It tells the browser where to find the image)- the
value is the URL and an alt attribute to provide a description of the image.

Syntax to add photo: <img src=”photo.gif” alt=”my photo” />

The height and width attributes
The size of the image can be determine using height and width attribute –the value of these
attributes can be specified in terms of either pixels or percentage of its actual size.
Syntax: <img src=”testimage.png” alt=”Test Image” width=”150” height=”100” />
Set Image Border and Alignment
By default image will have a border around it and align at the left side of the page, the thickness
can be specified in terms of pixels using border attribute. A thickness of 0 means no border
around the picture. Using align attribute, the image can be align at the center or right.
Syntax: <img src=”testimage.png” alt=”Test Image” border=”3” align=”right” />
Using Image as a Link
To use the image as a link, place the image between the opening <a> tag and closing </a> tag.
The images are used to create graphical buttons or links to other pages.
Syntax: <a href=”../index.html” title=”Click here to return to the Test page”><img
src=”testimage.png” width=”150” height=”100” border=”3” alt=”Test Image” /></a>
Image example

<!DOCTYPE html>
<html>
<head>
<title> Image Example </title>
</head>
<body><p> this is image insertion and image link example</p>
<img src="testimage.png" width="150" height="100" border="3" alt="Test Image" />
<p> click on the logo to return the webpage of the university</p>
<a href="http://www.bdu.edu.et" target="_blank" title="Cleck here to open the home page"><img src="logo.png"
width="150" height="100" border="3" alt="logo Image" /></a>
</body>
</html>

24
Produced result

Adding Video and Audio

To add playable video and audio to the webpage for the user, the non-standard <embed> tag is
required. Non-standard means the <embed> tag will not validate if we try to validate our
webpage. Non standard tags are not listed in the HTML recommendation.
The <embed> tags includes src attribute, autostart, autoplay, width and height attributes. The
autoplay and autostart attribute is used to play the audio and video automatically if they are set to
true otherwise set the value to false and the user should click on the play button to start playing
the audio and video.
The syntax :<embed src=”source URL” autostart=”false/true” autoplay=”false/true” width=”
“ height=” “></embed>
Adding Background music to the webpage
To add a background sound to the webpage, it can be used <embed>, <object>, and <bgsound>
tags. Since <embed> tag supports most browser, we used this tag in our lesson. The <embed> tag
includes src, autoplay, autostart and hidden attributes. The < embed> tag is used to embed music,
videos and other kinds of multimedia in the webpage. The hidden attribute should be set to false
to hide the sound clips control panel.
Syntax: <embed src=”audio/video/image file” autostart=”true” autoplay=”true”
hidden=”true”></embed>

25
 Example: Basic HTML multimedia example

<!DOCTYPE html>
<html>
<head>
<title> HTML Multimedia Tag </title>
</head>
<body>
<p> this is example of adding video</p>
<embed src="video.mp4" type="video/mp4" autoplay="false" width="150" height="144"></embed>
<p>this is example of adding audio</p>
<embed src="audio.mp3" type="audio/mp3" autoplay="false" width="150" height="144"></embed>
<p><marquee scrollamount="5"> the background sound is playing now</marquee> </p>
<embed src="bgaudio.mp3" autoplay="true" hidden="true" loop="infinity"></embed>
</body>
</html>

The produced result is

Exercise:
1. Adding Lake Tana image as the background image of your web page and use your photo
as link image
2. Add your favorite music as the background audio of your web page
3. Add video music or other video files in to your web page

26
LABORATORY IV: HTML Tables

Objectives:
 Creating tables in HTML script using basic table elements
 Defining table background colors
 Define different table attributes
 Creating nested tables

Basic Table Elements and Attributes

To arrange data like text, image, links, other tables and so on into rows and columns of cells, the
HTML tables are used. The tables are created using <table> tag in which the <tr> tag is used to
create table rows, the <td> tag is used to create data cells and the <th> element is used to create
table heading.

The table below contains three column and three rows of records created by the HTML script
program shown below in the example

27
Example: Creating simple table having heading, rows and columns

<!DOCTYPE html>
<html><head><title> HTML table example
</title></head><body>
<p> This is the HTML table with Heading</p>
<table border="1">
<tr>
<th> Name</th>
<th> Status</th>
<th>Salary</th>
</tr>
<tr>
<td>Solomon Tesfa</td>
<td>Lecturer</td>
<td>8400</td>
</tr>
<tr>
<td>Mengistu Belay</td>
<td>Ass.Lecturer</td>
<td>5200</td>
</tr>
<tr>
<td>yebeltal Tegegn</td>
<td>Lab Assistance</td>
<td>3000</td>
</tr>
</table></body></html>

Cellpadding and Cellspacing Attributes

To adjust the white space in the table cells cellpadding and cellspacing attributes are used. The
cellspacing attribute defines the width of the border and cellpadding represents the distance
between cell borders and the content within a cell.

28
Colspan and Rowspan Attributes
To merge two or more columns into a single column, colspan attribute is used and to merge two
or more rows, rowspan is used.
Table Backgrounds
The table background is set using one of the following two ways:
 bgcolor attribute-using this attribute the background color for whole table or for one cell
can be adjusted.

 Background attribute- using this attribute the background image for whole table or for
one cell is adjusted.

Example: background color of the table

<!DOCTYPE html>
<html>
<head>
<title> HTML table example </title>
</head>
<body>
<p>HTML background, cellpadding,cellspacing,colspan and rowspan</p>
<table border="1" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 cell 1</td></tr>
</table>
</body>
</html>

29
Table caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table. In addition to the caption, tables can be divided into three portions: a header, a body, and
footer. The three elements for separating the head, body, and foot of a table are:

 <thead> -to create a separate table header.

 <tbody> - to indicate the main body of the table.

 <tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data. But
it is notable that <thead> and <tfoot> tags should appear before <tbody>

The height and width of the table can be adjusted in terms of pixels or percentage of available
screen area.

The result produced for the example shown below is:

30
Example: table caption

<!DOCTYPE html>
<html>
<head>
<title> HTML table example </title>
</head>
<body>
<p> Table width/Height, Caption, header and footer are shown below</p>
<table border="1" width="500" height="150">
<caption> This is the caption</caption>
<thead><tr><td colspan="4">This is the head of the table</td></tr></thead>
<tfoot><tr><td colspan="4">This is the foot of the table</td></tr></tfoot>
<tbody><tr>
<td>row 1,column 1</td>
<td>row 1,column 2</td>
<td>row 1,column 3</td>
<td>row 1,column 4</td>
</tr>
<tr>
<td>row 2,column 1</td>
<td>row 2,column 2</td>
<td>row 2,column 3</td>
<td>row 2,column 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Nested Table
Nesting tables simply means making a table inside another table. Nesting table can lead to
complex table layouts. Nested tables always need to be placed between <td>…</td> tags of the
outer container table. The following HTML code creates a table with one row and two column
and inside the second column again creates another table (nested table) with two rows.

31
 Example: Nested table Produced result will be:

<!DOCTYPE html>
<html>
<head>
<title> HTML Nested table example </title>
</head>
<body>
<table border="5" bordercolor="red">
<tr><td>First Column of Outer table</td>
<td><table border="5"
bordercolor="green">
<tr><td>First row of Inner
Table</td></tr>
<tr><td>Second row of
Inner Table</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Exercise
1. Create the following table and add this table in to the web page and fill the row
with records

Staff Members with their Salaries

Name Months

Jan. Feb. Mar. Apr. May Jun. Jul.

2. Change the background color to green

32
LABORATORY V: HTML Forms

Objectives:
 Create single line text, multi-line text and password input text boxes
 Create check box and radio buttons in the web page
 Create submit and normal buttons in the web page using HTML scripts
 Implement file upload in the web page using HTML scripts
 Implement hidden file controls in HTML scripts

HTML Form Controls

HTML forms are required to collect some data from the site visitor. For example, during user
registration to collect information such as name, email address, credit card, and so on. There are
different types of form controls that are used to collect data using HTML form.
 Text input controls
 Checkboxes controls
 Radio box controls
 Select box controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
The HTML <form> tag is used to create an HTML form and it has the following sysntax:
<form action=”Script URL” method=”GET/POST”>
Form elements like input, text area, and so on.
</form>
The most frequently used form attributes are:
 action – backend script ready to process passed data.
 method- is used to upload data (GET and POST methods)
 target- specifies the target windows or frame where the result of the script will be
displayed.

33
  enctype- specifies how the browser encodes the data before it sends it to the
server.

Text Input Controls

There are three types of text input used on forms:
 Single line text input controls – used to insert only one line user input like
search box or name. it is created by <input> tag
 Password input controls- a single line text input which is masked the character
as soon as a user enters it. It is created using HTML <input> tag.
 Multi-line text input controls- used to give details that may be longer than a
single sentence. It is created by using HTML <textarea> tag.
Example: the following program contains single line text, password and multi-line text input
controls.

<!DOCTYPE html>
<html>
<head>
<title> HTML Text Input Controls </title>
</head>
<body>
<form>
<p>Single line text input controls<p>
First name: <input type="text" name="first_name" /><br />
Last name: <input type="text" name="last_name" /><br />
<p> Password input controls</p>
User ID: <input type="text" name="user_id" /><br />
Password: <input type="password" name="password" />
<p>Multiple-Line Text Input Controls</p>
Description:<br />
<textarea rows="5" cols="50" name="description">
Enter description here ...
</textarea>
</form>
</body>
</html>

34
The produced result will be:

Some of the attributes of the <input> tag are:

 type- indicates the type of input controls

 name-used to give a name to the control which is sent to the server to be

recognized and get the value

 value-used to provide an initial value inside the control

 size-specify the width of the text-input control in terms of characters

 maxlength-allow to specify the maximum number of characters a user can enter

into the text box

 rows-indicates the number of rows of text area box

 cols-indicates the number of columns of text area box

Selection Control
If multiple options are available to be selected by the user, depending on the selection
requirement checkboxes, radio buttons and dropdown boxes can be used.
Checkboxes are used when more than one option is required to be selected. It is created using
HTML <input> tag and the type attribute is set to checkbox.

35
Radio buttons are used when out of many options; just one option is required to be selected. It is
created by using HTML <input> tag and type attribute is set to radio.
A select box, also called drop down box which provides option to list down various options in
the form of drop down list, from where a user can select one or more options.
Some of the attributes of selection control are:
Type-indicates the type of input control. For checkbox the type set to checkbox and for radio
buttons the type set to radio
Name- used to give to the control which is sent to the server to be recognized and get the value
Value-the value that will be used if the checkbox is selected
Checked- set to checked if you want to select it by default
Example: the HTML code below shows the three selection controls

<!DOCTYPE html>
<html>
<head>
<title> HTML selection Controls </title>
</head>
<body>
<form>
<p>Checkbox Control<p>
<input type="checkbox" name="chemistry" value="chem">Chemistry
<input type="checkbox" name="Biology" value="bio">Biology
<input type="checkbox" name="Physics" value="phys">Physics<br />
<p>Radio Button Control</p>
<input type="radio" name="sex" value="M">Male
<input type="radio" name="sex" value="F">Female<br />
<p>Select Box Control</p>
<select name="dropdown">
<option value="chem" selected>Chemistry</option>
<option value="bio"> Biology</option>
<option value="phys">Physics</option>
</select>
</form>
</body>
</html>

36
The produced result will be:

Creating Buttons
Buttons are most commonly used to submit a form, to clear or reset a form and even to trigger
client –side scripts. The buttons are created using the HTML <input> tag and set the type
attribute to submit, reset or button based on the required button type.
Example: the HTML code to show the type of buttons

<!DOCTYPE html>
<html>
<head>
<title> HTML button type example </title>
</head>
<body>
First name: <input type="text" name="first_name" /><br /><br />
Last name: <input type="text" name="last_name" /><br /><br />
<input type="submit" name="btnSubmit" value="Submit" />
<input type="reset" value="Reset"/>
<input type="button" Value="Calculate" onclick="calculate()" />
</body>
</html>

The result produced for the three type of buttons are:

37
File Upload Box
To allow users to upload a file to the website, it is needed to use a file upload box which is
known as a file select box. It is created using the <input> element and type attribute is set to file.
Example: a file uploads box HTML source code

<!DOCTYPE html>
<html>
<head>
<title> HTML File upload example </title>
</head>
<body>
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
</body>
</html>

The result produced using internet explorer browser is

And the result produced using Firefox browser is

Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can be pushed to the
server. This control hides inside the code and does not appear on the actual page. For example,
following hidden form is being used to keep current page number. When a user will click next
page then the value of hidden control will be sent to the web server and there it will decide which
page has be displayed next based on the passed current page.

38
Example: the hidden form control HTML code

<!DOCTYPE html>
<html>
<head>
<title> HTML Hidden form control </title>
</head>
<body>
<form method="post" action="#URL#">
<input type="hidden" value="08:03:31" name="startTime" />
Username: <input type="text" name="userName" /> <br />
Password: <input type="password" name="password" /><br /><br /><br />
<input type="submit" value="Login" />
</form>
</body>
</html>

The result produced for the hidden form is

Exercise:
Write the HTML code that construct the following form

39
LABORATORY VI: HTML Frames

Objectives:
 Write HTML code for frame set to create frames
 Acquire skills to write HTML script for horizontal and vertical frames
 Define different attributes of frameset and frame tags of HTML
 Loading two different webpages in to two frames

Creating Frames
To create frames on a page, <frameset> tag is used instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of the <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.

Example: HTML code for creating frames

<!DOCTYPE html>
<html>
<head>
<title> HTML Frames Example </title>
</head>
<frameset rows="150,*,100">
<frame name="top" src="top_frame.html" />
<frame name="center" src="main_frame.html" />
<frame name="bottom" src="bottom_frame.html" />
</frameset>
</html>

The result produced will be:

40
From the above example change the rows attribute of the <frameset> tag by cols and change the
width to 25%, 50%, 25% to create all the three frames vertically as shown the result below.

Some important attributes of <frameset> tag are:

 cols-specify how many columns are contained in the frameset and the size of
each column.
 rows-specify the rows in the frameset the same as the cols attribute.
 border- specifies the width of the border of each frame in pixels.
 frameborder-specifies whether a three-dimensional border should be displayed
between frames.
 framespacing-specifies the amount of space between frames in a frameset.
And the <frame> tag has the following attributes
 src-used to give the file name that should be loaded in the frame. Its value can
be any URL.
 name-to give a name to a frame. It is used to indicate which frame a document
should be loaded into.
 marginwidth-specify the width of the space between the left and right of the
frames borders and the frames content.
 marginheight-specify the height of the space between the top and bottom of the
frames borders and its content.
 noresize-by default frames can be resized by clicking and dragging on the
borders of a frame. This attribute prevents a user to resize a frame.
 scrolling-controls the appearance of the scrollbars that appear on the frame.
 longdesc-provides a link to another page containing a long description of the
contents of the frame.
41
Browser Support for Frames
If a user is using any old browser or any browser which does not support frames then
<noframes> element should be displayed to the user. So it is important to place a <body>
element inside the <noframes> element because the <frameset> element is supposed to replace
the <body> element, but if a browser does not understand <frameset> element then it should
understand what is inside the <body> element which is contained in a <noframes> element. It is
nice to transfer message for the user having old browsers. For example Sorry!! your browser
does not support frames.
One of the most popular uses of frames is to place navigation bars in one frame and then load the
main pages into a separate frame.
Example: the HTML code for the target frame and <noframe> tag

<!DOCTYPE html>
<html>
<head>
<title> HTML Target Frames Example </title>
</head>
<frameset cols="200,*">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes><body>
<center><h2>Your browser does not support frames</h2></center>
</body></noframes>
</html>

And the menu frame source code is :

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a><br /><br />
<a href="http://www.bdu.edu.et" target="main_page">Bahir Dar University</a><br
/><br />
<a href="http://www.facebook.com" target="main_page">Facebook User</a><br /><br
/>
</body>
</html>
42
Finally the main frame to display the result of the link will be

<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
<center><h3>This is main page and content from any link will be displayed here</h3></center>
<p> so now click any link and see the result.</p>
</body>
</html>

The result produced by the above three HTML code will be

The HTML IFrames

The <iframe> tag defines a rectangular region within the document in which the browser can display a
separate document including scrollbars and borders. This tag can appear anywhere in the document. The
src attribute is used to specify the URL of the document that occupies the inline frame.
Example: usage of the <iframe> tag

<!DOCTYPE html>
<html>
<head>
<title> HTML IFrames Example </title>
</head>
<body>
<p> Document content goes here ...</p>
<iframe src="menu.html" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here ...</p>
</body>
</html>
43
The result produced will be

Exercise
1. Create a frameset like the one shown below, where clicking a fruit loads a new page in
the main window. When the page loads in the main window, it will carry the details for
the appropriate fruit (to save time, you can use the images and fruit description pages in
the code download, but try to create the frameset and navigation on your own).

44
PART TWO: CASCADING STYLE SHEETS
The Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable. CSS handles the look and feel part of a web page.
Using CSS, the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, as well as a variety
of other effects can be controlled.

The CSS syntax is made up of three parts: a selector, a property and a value.
Selector { property:value }
The selector is normally the HTML element or tag to be defined or changed the style. The
property is the attribute to be changed and each property can take a value. The property and the
value are separated by a colon and surrounded by curly braces.
There are four ways in which to apply CSS code to an HTML document. These are
a) inline
b) embedded
c) External
d) Imported

LABORATORY VII: Inline and embedded Style Sheet

Objectives:
 Write style sheet rules along with the HTML element using style attribute of those
elements

 Define inline style sheets to format the text and the web page

 Define the embedded style sheet to make the web page attractive

 Define the text, background and other element of the web page using inline and
embedded style sheet

Inline Style Sheet

Style sheet rules can be applied directly to any HTML element using style attribute of the tag.
This should be done when there is a need to change the style of a particular HTML element.
Rules define in line with the element overrides the rules define in an external CSS file as well as
the rules defined in <style> element.

45
Example: style sheet rules along with the HTML elements using style attribute of those elements.

<! DOCTYPE html>

<html><head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=”color:red;”>This is red</p>
<p style=”font-size:20px;”>This is thick</p>
<p style=”color:green;”>This is green</p>
<p style=”color:green;font-size:20px”>This is thick and green</p>
</body>
</html>

This will produce the following result:

Example: the color and margin style sheet

<! DOCTYPE html>

<html><head>
<title> Inline Style Sheet</title>
</head>
<h1 style =”color:blue; margin-left:30px;”>This is a heading.</h1>
<p> this is a paragraph.</p>
</body>
</html>

This will produce the following result:

46
Embedded Style Sheet
To make formatting of the HTML document using CSS easier, it is better to embed the entire
style sheet into the document. This creates an embedded style sheet. To embed a CSS inside an
HTML document, it can be defined the styles in the <head> section of the document. The style
sheet section always starts by defining the style’s types. To define an embedded style sheet, it
always start with:
<style type=”text/css”>
The body of the style sheet goes within <style type=”text/css”> and </style> and declares rules
for the HTML element. For example: p {font-size: 16pt} this means that when we use the p
element in our HTML document, the font size of the text enclosed within the <p> tag will be 16.
To add other attribute or properties to the p element, such as
p {font-size: 16pt;color:red;background-color:yellow}
Example: here is a sample embedded style sheet:

<! DOCTYPE html>

<html><head>
<title> embedded style sheet example</title>
<style type=”text/css”>
body{background-color:yellow}
h1{font-size:50;color:blue}
p{font-size:14pt;color:red}
</style>
</head>
<body>
<h1>Embedded Style Sheet Example</h1>
<p> the entire HTML document can be formatted using embedded cascading style sheet, it
makes formatting a web page much easier </p>
</body>
</html>

This will produce the following result:

47
Example: here is the embedded style sheet example to format text of the HTML page

<! DOCTYPE html>

<html><head>
<title> embedded style sheet example</title>
<style type=”text/css”>
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color: green;
}
</style>
</head>
<body>
<p class=”read”>This is red</p>
<p class=”thick”>This is thick</p>
<p class=”green”> This is green</p>
<p class=”thick green”> This is thick and green</p>
</body>
</html>

The produced result will be:

48
Exercise:
1. Develop the drop down menu like shown below using cascading style sheet. When the
curser is being over the menu the menu will be drop down and also when the curser is on
the drop down items the color will be changed.( Note: Use inline and embedded style
sheet rules)

49
LABORATORY VIII: External and Imported Style Sheet

Objectives:
 Write style sheet rules separated from the HTML script

 Define External style sheets to format the text and the web page

 Define the imported style sheet to make the web page attractive

 Define the text, background and other element of the web page using external and
imported style sheet

External Style sheet

It is recommended to define a common style sheet in a separate file from the html file if the style
sheet is needed to use to various pages. An external style sheet is simply a text file containing a
list of CSS rules sets. The file is saved with a .css extension and saved to any directory that can
be accessed by the web pages using it. Unlike embedded style sheets, the CSS rules sets do not
have to be wrapped in the <style>...</style> tags. A cascading style sheet file will have extension
as .css and it will be including in HTML files using <link> tag. The link element can be used to
specify that a web page should use an external style sheet. The link element only requires a start
tag <link> and is inserted in between the <head>…</head> tags of our web page document. It
can be used as many times as we like.
The link element employs three important attributes:
rel : the value of this attribute is always stylesheet
type : the value of this attribute is always text/css.
href : the value of this attribute will be changed according to .css file to be referring to. This
value can be any relative or absolute path.

50
Example1: Consider the following rules for the style sheet file called style.css

.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color: green;
}

Here, three CSS rules are defined which will be applicable to three different classes defined for
the HTML tags shown below. Now let’s make use of the above external CSS file in our
following HTML document.

<! DOCTYPE html>

<html><head>
<title>HTML external CSS example</title>
<link rel=”stylesheet” type=”text/css” href=”/html/style.css”>
</head>
<body>
<p class=”red”>This is red</p>
<p class=”thick”>This is thick</p>
<p class=”green”> This is green</p>
<p class=”thick green”> This is thick and green</p>
</body>
</html>

The produced result will be:

51
Example 2: Consider the following rules for the style sheet file called main.css

H1 {
font-family: “Times New Roman”;
font-size: 36px;
background: #999fff;
color: maroon;
}

H2 {
font-family: arial,verdana,sans-serif;
font-size: 20px;
background: #ffffff;
color: black;
}

P{
font-family: arial,verdana,sans-serif;
font-size: 16px;
background: #ffffff;
color: navy;
}

Now let’s make use of the above external CSS file in our following HTML document.

52
<! DOCTYPE html>
<html><head><title>HTML external CSS example</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<h1>Internet Programming CSS</h1>
<h2>Start up Style Sheet Programming</h2>
<p> Internet programming is a course which is given to help students to develop
their own web page and manage web pages. This course covers the user side
programming to design and program user interacting interface and web pages for
their users. So that learners should attained and doing each of the programming
examples in this manual to proceed the server side programming of the web.</p>
<h2>External Style Sheet</h2>
In external style sheet, the rules of the style are defined separately from the HTML
document and the style sheet is saved with file name extension of .css. In the HTML
program, the style sheet is called using <link> tags which has three basic attributes
such as rel, type, href.</p>
<h2> Imported Style Sheet</h2>
<p>The imported style sheet is implemented in the next chapter. Hence before
implementing the imported style sheet, it is better to understand how the external
style sheet is defined and used to develop webpage and then focus on the next
session to implement the imported style sheet</p>
</body></html>

The produced output will be:

53
Imported Style sheet
A style sheet may be imported with CSS’s @import statement. This statement may be used in a
CSS file or inside the <style>…</style> tag.

Syntax:

<style type=”text/css”>
<!--
@import url(“style1.css”);
@import url(“style2.css”);
Body {background: yellow;color:black}
-->
</style>
Note that other CSS rules may still be included in the style element, but that all @import
statements must occur at the start of the style sheet. Any rules specified in the style sheet itself
override conflicting rules in the imported style sheets. For example, even if one of the imported
style sheets contained body {background : aqua} , definition terms would still have a yellow
background. The order in which the style sheets are imported is important in determining how
they cascade. In the example above, if the style1.css imported style sheet specified that
54
STRONG elements to be shown in red and the style2.css style sheet specified that STRONG
elements be shown in yellow, then the latter rule would win out, and STRONG elements would
be in yellow. The imported style sheets are useful for purposes of modularity. For example if we
have two and above CSS files that define different body of the page, each CSSs are used in the
HTML using import element.
Example: the style.css file that define the headings H1 and H2

H1 {
font-family: 'Times New Roman';
font-size: 36px;
background: #999fff;
color: yellow;
}

H2 {
font-family: arial,verdana,sans-serif;
font-size: 20px;
background: #ffffff;
color: black;
}

The style1.css file that define the paragraph p and body color

P{
font-family: arial,verdana,sans-serif;
font-size: 16px;
background: #ffffff;
color: navy;
}

body {
background: #ff0000
}

The HTML code that uses import style sheet

55
<! DOCTYPE html>
<html><head>
<title>HTML external CSS example</title>
<style>
@import url("style.css");
The produced output of the above code will be:

Exercise:

56
2. Develop the drop down menu like shown below using cascading style sheet. When the
curser is being over the menu the menu will be drop down and also when the curser is on
the drop down items the color will be changed.

57
PART THREE: JAVASCRIPT PROGRAMMING
LABORATORY IX: Basics and Program Control I of JavaScript

Objectives:
 Write javascript codes inside the HTML script in between head tag
 Write javascript codes inside the HTML script in between body tag
 Implement variables and operators in javascript programs
 Acquire skill to use conditional statements in javascript programs

Embedding JavaScript into HTML

JavaScript resides within an HTML document. Usually it is placed into an HTML document
using <script> tag. It also can be added script to the head or the body section (or both) of an
HTML document. Inline scripting is techniques that embed scripting instructions directly into
certain HTML tags. The basic structure of an HTML file with JavaScript is as follows
(JavaScript indicated in bold):

<html>
<head>
<title> Page Title</title>
<script language=”JavaScript”>
<!--
//JavaScript code goes here
//-->
</script>
</head>
<body>
HTML page text
<script language =”JavaScript”>
<!--
//JavaScript goes here too
// -->
</script>
HTML page text
</body>
</html>

58
There are a flexible given to include JavaScript code anywhere in an HTML document. But there
are following most preferred ways to include JavaScript in your HTML file.
 Script in <head>…</head> section
 Script in <body>…</body> section
 Script in <body>…</body> and <head>…</head> section>
 Script in and external file and then include in <head>…</head> section

Example: JavaScript code to write simple text

<html>
<head>
<title> First JavaScript page </title></head>
<body>
<h1> First JavaScript Page</h1>
<script type=”text/javascript”>
document.write(“<HR>”);
document.write(“Hello World Wide Web”); //comments goes here
document.write(“<HR>”);
</script>
</body><html>

The produced output will be:

The word document.write is a standard JavaScript command for writing output to a page. By
entering the document.write command between the <script> and </script> tags, the browser will
recognize it as a JavaScript command and execute the code line. // is used for single line
comment whereas /* comment …*/ is used for multiple line comment in JavaScript coding

59
Variables and operators
Variables in JavaScript should be declared before using them with the var keword. The scope of
the variable is the region of the program in which it is defined . javascript variable will have only
two scopes.

 Global variable –has global scope which is defined everywhere in the JavaScript code.

 Local variable – visible only within a function where it is defined. Function parameters
are always local to that function.

JavaScript allows working with three primitive data type:

 Numbers e.g. 123, 120.50 etc

 String of text e.g. “ javascript is my interest” etc

 Boolean e.g. true or false.

The arithmetic operators (+, - , *, / and %) are supported in JavaScript language. Suppose
variable A holds 15 and variable B holds 5 then:

A+B will give 20, A-B will give 10, A*B will give 65, A/B will give 3 and A%B will give 0

Example: JavaScript code that performs all the arithmetic operations and display the result

<html>
<head><title>Arithmetic Operator Example</title></head>
<body>
<script type="text/javascript">
var num1=15;
var num2=5;
sum=var1+var2;
diff=num1-num2;
prod=num1*num2;
quo=num1/num2;
rem=num1%num2;
document.write("Sum="+sum);
document.write("</br>");
document.write("difference="+diff);
document.write("</br>");
document.write("pProduct="+prod);
document.write(“Quotient=”+quo);
document.write("</br>");
document.write(“Remainder=”+rem);
document.write("</br>");
</script></body><html> 60
To compare the value of two variables, comparison operators are used. These are == for equal,
!= not equal, > greater than, < less than, >= greater or equal and <= less than or equal.

The logical operators supported by javascript language are && called logical AND operator, | |
called logical OR operator and ! called logical NOT operator

Conditional Statement
If statement
The if statement is the fundamental control statement that allows JavaScript to make decisions
and execute statements conditionally.
Syntax:
if (expression){
Statement(s) to be executed if expression is true
}

if...else statement:

The if...else statement is the next form of control statement that allows JavaScript to execute
statements in more controlled way.
Syntax:
if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}
if...else if... statement:
The if...else if... statement is the one level advance form of control statement that allows
JavaScript to make correct decision out of several conditions.
Syntax:
if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if (expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{ Statement(s) to be executed if no expression is true }

61
switch statement:
The basic syntax of the switch statement is to give an expression to evaluate and several
different statements to execute based on the value of the expression. The interpreter checks each
case against the value of the expression until a match is found. If nothing matches, a default
condition will be used.
Syntax:
switch (expression)
{
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
…
case condition n: statement(s)
break;
default: statement(s)
}

Example: the if else JavaScript code

<html><head><title>conditional statement example</title></head><body>

<script type="text/javascript">
var d=new Date();
theday=d.getDay();
if(theday==1)
{document.write("First Monday");}
else if(theday==2)
{document.write("Second Teusday");}
else if(theday==3)
{document.write("third Wednesday");}
else if(theday==4)
{document.write("Happy therusday");}
else if(theday==5)
{document.write("Finally Friday");}
else if(theday==6)
{document.write("super saturday");}
else if(theday==7)
{document.write("Sleepy Sunday");}
else
{document.write("I'm looking forward to this weekend");}
</script></body><html>

62
Exercise:
write the JavaScript code using switch case conditional statement to implement the above if else
code.

63
LABORATORY X: Program Control II of JavaScript

Objectives:
 Acquire skill to use for loop in JavaScript programs

 Acquire skill to use break statements in a JavaScript programs

 Acquire skill to use nested loop statements in JavaScript programs

 Implement loops in JavaScript programs to format the web page

The for loop

The for loop is the most compact form of looping and includes the following three important
parts:
 The loop initialization –counter starting value which is executed before the loop begins
 The test statement- the given condition is true or not is tested
 The iteration statement – increasing or decreasing the counter
Syntax:
for (initialization; test condition; iteration statement){

Statement (s) to be executed if test condition is true

The while Loop

The most basic loop in JavaScript is the while loop which loops through a block of code as long
as a specified condition is true

Syntax:
while (expression){

Statement(s) to be executed if expression is true

The do …while loop

The do…while loop is similar to the while loop except that the condition check happens at the
end of the loop. This means that the loop will always be executed at least once, even if the
condition is false.

Syntax:
do { Statement (s) to be executed; } while (expression);

64
The break Statement:
The break statement, which was briefly introduced with the switch statement, is used to exit a
loop early, breaking out of the enclosing curly braces.

The continue Statement:

The continue statement tells the interpreter to immediately start the next iteration of the loop and
skip remaining code block. When a continue statement is encountered, program flow will move
to the loop check expression immediately and if condition remain true then it start next iteration
otherwise control comes out of the loop.
Example 1: this example illustrates the use of a break statement with a while loop. Notice how
the loop breaks out early once x reaches 5 and reaches to document. write (…) statement just
below to closing curly brace.

<html>
<head><title>conditional statement example</title></head>
<body>
<script type="text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
if (x == 10){
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script>
</body></html>

The output of the above JavaScript code is:

65
 Example 2: this example illustrates the use of a continue statement with a while loop. Notice
how continue statement is used to skip printing when the index held in variable x reaches 5:

This will produce the following result:

<html>
<head><title>conditional statement example</title></head>
<body>
<script type="text/javascript">
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
x = x + 1;
if (x == 5){
continue; // breaks out of loop completely
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
</script></body></html>

Example 3: this example illustrate the continue statement with nested for loop

This will produce the

<html>
following result.
<head><title>conditional statement example</title></head>
<body>
<script type="text/javascript">
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 3; i++)
{
document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++)
{
if (j == 3){
continue outerloop;
}
document.write("<center>"+"Innerloop: " + j + "<br
/>"+"</center>");
}
}
document.write("Exiting the loop!<br /> ");
</script>
</body></html>

66
Exercise:
Develop a pattern like shown below using loop statement

*
**
***
****
*****
******

67
LABORATORY XI: Functions and Dialog Boxes

Objectives:
 Define and call functions in JavaScript programs.
 Define alert dialog box and implement in alerting warning message to the user
 Define confirmation dialog box to accept users option in the JavaScript program
 Define prompt dialog box to input something in the text box and respond accordingly

Function definition: before using a function, the function should be defined. The most common
way to define a function in JavaScript is by using the function keyword, followed by a unique function
name, a list of parameters may be empty, and a statement block surrounded by curly braces.

Syntax:
<script type=”text/javascript”>
function functionname(parameter-list)
{
Statements
}
</script>
Example: A simple function that takes no parameters called sayHello is defined here:
<script type=”text/javascript”>
function sayHello() //function definition
{
Alert(“Hello there”);
}
</script>
Function Calling: to invoke a function somewhere later in the script, we should simple need to
write the name of that function as follows:

<script type=”text/javascript”>
sayHello(); //function calling
</script>

Example: this example illustrates function definition and function calling. When the button is
clicked function calling is executed and then hello there! message will be displayed

68
 The produced result will be:
<html>
<head>
<script type="text/javascript">
function sayHello() //function definition
{ alert("Hello there!");}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
When the button is clicked, the result
<input type="button" onclick="sayHello()" value="Say
Hello"> //sayhello() is function calling displayed in the alert box will be the
</form> following
<p>Use different text in alert box and then try...</p>
</body>
</html>

Example 2: this example illustrates the function definition and function calling with parameters as given
bellow the JavaScript code and the output of the program

<html>
<head>
<script type="text/javascript">
function sayHello(name, age)
{
alert( name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="sayHello('Amanuel ', 12)" value="Say
Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>

69
 The output produced will be: when the button is clicked the output will be:

Alert Dialog Box: an alert dialog box is mostly used to give a warning message to the users.
Like if one input field requires to enter some text but user does not enter that field then as a part
of validation you can alert box to give warning message as follows:

Example: the following JavaScript code shows the alert dialog box message.

The following result will be

<!DOCTYPE html>
produced:
<html>
<head>
<head>
<script type="text/JavaScript">
alert("Warning Message");
</script>
</head>
</html>

Confirmation Dialog Box: A confirmation dialog box is mostly used to take user’s consent
on any option. It displays a dialog box with two buttons: Ok and Cancel. We can use
confirmation dialog box as follows:

Example: this example illustrates the combination of confirmation and alert message. When the
user clicked the try it now button the confirmation dialog box will be displayed and then on the
confirmation dialog box either of the two buttons, the message will be displayed on the alert
dialog box.

<html> The following result will be produced

<head><title>hhhh</title>
</head>
<body>
<form name=myform>
<input type=button value="Try it now"
onClick="if(confirm('Format the hard disk?'))
alert('You are very brave!');
else alert('A wise decision!')">
</form>
</body> Prompt Dialog
</html>
70
Box: the prompt dialog box can be implemented as follows

<html>
<head>
<script type="text/javascript">
var retVal = prompt("Enter your name : ", "your name here");
alert("You have entered : " + retVal );
</script>
</head>
</html>

The following result will be produced

Enter your name then

Exercise:
1. write the JavaScript code that accepts the name and grade of the user to display the following
message in alert dialog box “Congratulation name of user !!! you score grade” using function
definition and function calling.

2. Write the JavaScript code that accept your name, your department and the Name of course and
displays them in order like

Hello Solomon from Computer Science Department you take Internet programming course

71
 LABORATORY XII: Form Validation

Objectives:
 write code to validate whether data is/are entered into the form or not
 write code to validate the entered data is/are valid or not
 write code to validate input forms

Form validation used to occur at the server, after the client had entered all necessary data and
then pressed the Submit button. If some of the data that had been entered by the client had been
in the wrong form or was simply missing, the server would have to send all the data back to the
client and request that the form be resubmitted with correct information. This was really a
lengthy process and over burdening server.
JavaScript provides a way to validate form's data on the client's computer before sending it to the
web server. Form validation generally performs two functions.
 Basic Validation - First of all, the form must be checked to make sure data was entered
into each form field that required it. This would need just loop through each field in the
form and check for data.
 Data Format Validation - Secondly, the data that is entered must be checked for correct
form and value. This would need to put more logic to test correctness of data.

The code shown below in the example produces the output shown in the figure below contains
Name, email and country with submit form

72
Example: understand the process of validation. Here is the simple form to proceed:

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
// Form validation code will come here.
</script> </head> <body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td> </tr>
<tr> <td align="right">EMail</td> <td><input type="text"
name="EMail" /></td> </tr>
<tr> <td align="right">Country</td> <td> <select
name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">Ethiopia</option> <option
value="2">Sudan</option>
<option value="3">Kenya</option>
</select> </td> </tr>
<tr> <td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

Basic Form Validation:

First we will show how to do a basic form validation. In the above form we are calling validate()
function to validate data when onsubmit event is occurring. Following is the implementation of
this validate () function:

73
 <script type="text/javascript">
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
</script>

Data Format Validation:

Now we will see how we can validate our entered form data before submitting it to the web
server. This example shows how to validate an entered email address which means email address
must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the
email address, and the last dot must at least be one character after the @ sign:

<script type="text/javascript">
function validateEmail()
{
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
</script> 74
The following example illustrates the validation of password data and confirms password date. If
the values are not equal the message “your password do not match” will be displayed at the
result text box otherwise it will be ok.

<html>
<head>
<title> User Account</title>
<script type ="text/JavaScript">
function CheckPassword()
{
var Password, ConfPassword, Result;
Password = document.frmRegistration.txtPassword.value;
ConfPassword = document.frmRegistration.txtConfirmPass.value;
Result = document.frmRegistration.txtResult;
if(Password != ConfPassword)
Result.value = "Your Passwords Do Not Match";
}
</script></head><body>
<h1>User password Registration</h1>
<form name="frmRegistration">
<table border="0" width="403">
<tr> <td width="99">Username:</td><td width="290"> <input type="text"
name="txtUsername" size="15"></td></tr>
<tr> <td width="99">Password:</td><td width="290"> <input type="password"
name="txtPassword" size="15"></td></tr>
<tr> <td width="99">Confirm:</td><td width="290"> <input type="password"
name="txtConfirmPass" size="15"></td> </tr>
<tr><td width="99"> Result:</td> <td width="290"> <input type="text"
name="txtResult" size="40"> </td></tr>
</table><input type="button" value="Send It" onClick="CheckPassword()">
</form></body></html>

75
The following result will be produced

Exercise:
Construct the user registration form that registers first name, second name, country, and email
using HTML. Validate that first name, second name and country should only accept alphabet
where as email contains @ and dot (.)

Project: Choose an organization and develop the website of the organization with appropriate
forms with the application of validation of forms.

76