Department of Information Technology

&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------

WOMEN’S POLYTECHNIC
HAPANIA, TRIPURA (WEST)

WEBTECHNOLOGY LAB
LAB MANNUAL

Paper Code:- DCS-504S Total Marks: 100

Cpw: 4 Credit: 2

For
3rd semester
Diploma Engineering in Information Technology
&
Diploma Engineering in Computer Science

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 1
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------

INDEX

Sl. No. Contents Page No.

1 Lab Objective 3
2 Introduction About Lab 3
3 Guidelines to Student 4
4 Syllabus (TU) 4
5 Common Web Terminologies 6
6 List of Lab Exercise with solutions 9

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 2
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
LAB OBJECTIVE
This course is intended to:-

1. Teach the basics involved in publishing content on the World Wide Web. This includes
the ‘language of the Web’ – HTML
2. Give basic ideas about introduction to java application, applets-control and embedding
of applet code in HTML webpages.
3. Teach more advanced topics such as programming and scripting. This will also expose
students to the basic tools and applications used in Web publishing.

COURSE OUTCOMES:-
The students will be able to:

· Analyze a web page and identify its elements and attributes.

· Create web pages using HTML and Cascading Style Sheets.

. Write and embed java applet code in HTML document.

· Build dynamic web pages using ASP.

INTRODUCTION ABOUT LAB

There are 50 systems installed in this Lab. Their configurations are as follows:

Processor: Intel CORE i7-4770 CPU 3.40 GHz

RAM : 4 GB

Hard Disk : 500 GB

Mouse : Optical Mouse

Software

 JVM is installed in the machines so that students can create and run applet code in the
machine.
 Browser are also installed in each of the machine.
 Xammp is also installed in so that students can create and see the outputs of ASP
webpages.

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 3
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------

GUIDELINES TO STUDENT:-
 Computers and othet equipments in the lab for the use of student community. Students
need to maintain a proper decorum in the computer lab. Students must use the equipment
with care.
 Students are required to carry their Lab copy every time during Webtech Lab.
 Students must sign into the log register in the lab before occupying any machine every
time.
 Students are not supposed to talk or make noise in the lab.
 Lab records need to be submitted on or before date of submission.

SYLLABUS (TU)
Sessional / Practical subjects for 5th Semester
W E B T E C H N O L O G Y L A B (DCS-504S)
Total Marks: 100, Cpw: 4, credit: 2

HTML Basics : a. Basics:

 To create an HTML document with the main structure elements (HTML, HEAD, BODY), save it
and display it on a browser.
 To create an HTML document and add the following: (a) Comments, (b) Headings (H1 to H6),
(c) Paragraph, (d) Visual line break.

b. Fonts, Colour, and Lists & Tables:

 To create an HTML document and add the following: (a) Fonts, (b) Colors, (c) Lists, (d)
Signature Text blocks.
 To create in an HTML document a Table and mention the following: (a) Table variables, (b)
Table element, (c) CAPTION element, (d) Table ROW element, (e) Table Data element,
(f) Table Heading element.
c. Hyper Links, Frames & Images :
 To create a web page using HTML and clarify the following: (a) how to create hyperlink, (b)
how to create frames, (c) how to Insert an image.

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 4
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
HTML / Applet :
 Creating simple HTML file, place it in web server and access it from client Browser.
Creating a HTML form incorporating GUI components (Command button, text box, radio
button, check box, combo box etc).
 Creating a simple applet and embedding it in HTML file. Writing applet to in corporate GUI
components (Command button, text box, radio button, check box, combo box etc).
 Writing applet to incorporate events.

Active Server Pages :

 Introduction to Active Server Pages.
 Elements of ASP (Scripts, Objects, Components). Making your first Active Server Page.
 Working with ASP: Using HTTP — Writing simple ASP files — Controlling Execution of
server side scripts — Problems on HTML forms to get user information and retrieving HTML
form contents — Working with query string.
 ASP Session: Introduction to session — Familiarity and working with session objects
(simple problems) — Using session events — Familiarity and working with cookies.
 ASP Application: Introduction to ASP Application features of ASP Application
 Creating a Simple ASP Application, Setting the properties of ASP Application
 Using Application objects and Application events.
 ASP Components: Using Components in ASP ( Simple problems) — Creating Components
with page scope, session scope, Application scope — Working with browser capability
component, file assess components , counter components etc.(Simple problems)

LIST OF REFERENCE BOOKS :

HTML: The Complete Reference / Thomas A. Powell / Tata Mc-Graw Hill Pub. Co. Ltd.
HTML and XML an Introduction / Prentice Hall of India Pvt. Ltd.
Internet: An Introduction / Tata Mc-Graw Hill Pub. Co. Ltd

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 5
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------

COMMON WEB TERMINOLOGIES:

WEB BROWSER: A web browser (commonly referred to as a browser) is a software
application for retrieving, presenting and traversing information resources on the World Wide
Web. An information resource is identified by a Uniform Resource Identifier (URI/URL) and
may be a web page, image, video or other piece of content. Hyperlinks present in resources
enable users easily to navigate their browsers to related resources. Although browsers are
primarily intended to use the World Wide Web, they can also be used to access information
provided by web servers in private networks or files in systems. The major web browsers are
Google Chrome, Mozilla Firefox, Internet Explorer, Opera, and Safari.

WWW: WWW stands for "World Wide Web." It is important to know that this is not a synonym
for the Internet. The World Wide Web, or just "the Web," as ordinary people call it, is a subset of
the Internet with hyperlinked text, addio, video files and remote sites that can be accessed and
searched by browsers based on standrards such as HTTP and TCP/IP.

Internet: The Internet is the global system of interconnected computer networks that use
the Internet protocol suite (TCP/IP) to link devices worldwide. It is a network of networks that
consists of private, public, academic, business, and government networks of local to global
scope, linked by a broad array of electronic, wireless, and optical networking technologies. The
Internet carries a vast range of information resources and services, such as the inter-
linked hypertext documents and applications of the World Wide Web (WWW), electronic
mail, telephony, and file sharing.

SEARCH ENGINE: A web search engine is a software system that is designed to search for
information on the World Wide Web. The search results are generally presented in a line of
results often referred to as search engine results pages (SERPs). The information may be a
specialist in web pages, images, information and other types of files. Some search engines also
mine data available in databases or open directories. Unlike web directories, which are
maintained only by human editors, search engines also maintain real-time information by
running an algorithm on a web crawler.
A search engine operates in the following order:
1. Web crawling

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 6
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
2. Indexing
3. Searching
Webpage: Web pages are what make up the World Wide Web. These documents are written in
HTML (hypertext markup language) and are translated by your Web browser. Web pages can
either be static or dynamic. Static pages show the same content each time they are viewed.
Dynamic pages have content that can change each time they are accessed.

Website: A website is a collection of related web pages, including multimedia content, typically
identified with a common domain name, and published on at least one web server. Notable
examples are wikipedia.org, google.com, and amazon.com.

WEB PORTAL: A web portal is most often one specially-designed Web page at a website
which brings information together from diverse sources in a uniform way. Usually, each
information source gets its dedicated area on the page for displaying information (a portlet);
often, the user can configure which ones to display. Variants of portals include Mashup (web
application hybrid) and intranet"dashboards" for executives and managers.

E-COMMERCE: Electronic commerce, commonly known as e-commerce or eCommerce,is a

type of industry where the buying and selling of products or services is conducted over electronic
systems such as the Internet and other computer networks. Electronic commerce draws on
technologies such as mobile commerce, electronic funds transfer, supply chain management,
Internet marketing, online transaction processing, electronic data interchange (EDI), inventory
management systems, and automated data collection systems. Modern electronic commerce
typically uses the World Wide Web at least at one point in the transaction's life-cycle, although it
may encompass a wider range of technologies such as e-mail, mobile devices, social media, and
telephones as well.

HTML: HTML stands for "Hypertext Markup Language." HTML is the language used to
create webpages. "Hypertext" refers to the hyperlinks that an HTML page may contain. "Markup
language" refers to the way tags are used to define the page layout and elements within the page.

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 7
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
HTML Page Structure

Below is a visualization of an HTML page structure:

<!doctype html>
<html>
<head>
<title>TechTerms.com</title>
</head>
<body>
<p>This is an example of a paragraph in HTML.</p>
</body>
</html>

JAVA Applet: An applet is a small Internet-based program written in Java, a programming

language for the Web, which can be downloaded by any computer. The applet is also able to run
in HTML. The applet is usually embedded in an HTML page on a Web site and can be executed
from within a browser.

ASP: An Active Server Page (ASP) is an HTML page that includes one or more scripts (small
embedded programs) that are processed on a Microsoft Web server before the page is sent to the
user. An ASP is somewhat similar to a server-side include or a common gateway interface (CGI)
application in that all involve programs that run on the server, usually tailoring a page for the
user. Typically, the script in the Web page at the server uses input received as the result of the
user's request for the page to access data from a database and then builds or customizes the
page on the fly before sending it to the requestor.

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 8
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
List of problems with solution on HTML Basics

a. Basics

 To create an HTML document with the main structure elements (HTML, HEAD, BODY), save it
and display it on a browser.
 To create an HTML document and add the following: (a) Comments, (b) Headings (H1 to H6),
(c) Paragraph, (d) Visual line break.

 WHERE TO WRITE HTML CODE

1. Open Text Editor, (Notepad in case of Windows Operating System).
2. Type the HTML code in it.
3. Save the file with extension .html/.htm
4. To view the created HTML file in browser, double click on the file
Problem1 : To display the web page title as ‘My First HTML Page’.
<HTML>
<HEAD>
<TITLE> My First Page </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Problem 2: To make the background appear black, text lime , links yellow and
recently visited links red.
<HTML>
<HEAD>
<TITLE>Attributes of Body Tag </TITLE>
</HEAD>
<BODY bgcolor =”black” text= “white” link =”red” alink =”yellow”>
Informatics practices Class XII
<a href=”https://www.google.com”> Click here to access google search engine</a>
</BODY>
</HTML>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 9
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
Problem 3: To make body text appear 60 pixels away from the top edge of page and 75
pixels away from left edge of page.

<HTML>
<HEAD>
<TITLE>Usage of Margins </TITLE>
</HEAD>
<BODY topmargin = “60” leftmargin = “75”>
Information Technology is an important subject of Engineering.
</BODY>
</HTML>

Problem 4: To display multiple headings in multiple forms using H1 …. H6 tags.

<HTML>
<HEAD>
<TITLE> Headings in HTML </TITLE>
</HEAD>
<BODY>
<H1> Level 1 Heading </H1>
<H2 align = “center”> Level 2 Heading </H2>
<H3> Level 3 Heading </H3>
<H4 align = “right”> Level 4 Heading </H4>
<H5> Level 5 Heading </H5>
<H6 align = “left”> Level 6 Heading </H6>
</BODY>
</HTML>

Problem 5: To display text with line and paragraph breaks.

<html>
<head>
<title> Paragraph</title>
</head>
<body>
Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 10
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<p> This will start a new paragraph</p>
<p align=”center”> Again starting of new paragraph </p>
</body>
<html>

7. Display the output of <BR> tag - To end one line , and to jump to the next <BR> tag is
used.
<html>
<head>
<title> Paragraph</title>
</head>
<body>
Writing a line. I want to write in next line.<br/> I am in a new line.
</body>
<html>

Problem 8: WAP tp display horizontal rules of various sizes.

<HTML>
<HEAD>
<TITLE> Various Horizontal Rule </TITLE>
</HEAD>
<BODY>
<P> This is conventional document text. </P>
<HR>
The next three horizontal rules are of different sizes.
<HR size=12>
<HR size =36>
<HR size =72>
<BODY>
</HTML>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 11
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
Problem 9: To display horizontal rules of different widths.

<HTML>
<HEAD>
<TITLE>Width of Horizontal Rule</TITLE>
</HEAD>
<BODY>
<P>
The following two rules have widths of 100 and 200 pixels respectively
<HR width=100><br><br>
<HR width=200>
</BODY>
</HTML>

 Unsolved Problem:

Write a program to display the following:

GENERATIONS OF COMPUTER
The history of computer development is a computer science topic that is often used to reference
the different generations of computing devices.
Each one of the five generations of computers is characterized by a major technological
development that fundamentally changed the way computers operate. Most major developments
from the 1940's to present day have resulted in increasingly smaller, cheaper, more powerful and
more efficient computing devices.

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 12
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
b. Fonts, Colour, and Lists & Tables:
 To create an HTML document and add the following: (a) Fonts, (b) Colors, (c) Lists, (d)Signature
Text blocks.
 To create in an HTML document a Table and mention the following: (a) Table variables, (b)
Table element, (c) CAPTION element, (d) Table ROW element, (e) Table Data element,
(f) Table Heading element.

Problem 10: To display a paragraph on red color in size 4 but its first letter should be of
size 7 and of blue color.

<HTML>
<HEAD>
<TITLE>Base Font</TITLE>
</HEAD>
<BODY>
<FONT size=7 color=”blue”> U </FONT>
<FONT size=4 color=”red”> sing the largest font </FONT>
</BODY>
</HTML>

Problem 11: To display text in a particular font-type.

<HTML>
<HEAD>
<TITLE>Font Faces</TITLE>
</HEAD>
<BODY>
<FONT size=7 color=”blue” face=”Broadway,Arial, Albertus”>
The font are displaying .
</FONT><br>
This is the text without any specific font.
</BODY>
</HTML>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 13
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
Problem 12: To display text by changing base font sizes.

<HTML>
<HEAD>
<TITLE> Base Font </TITLE>
</HEAD>
<BODY>
This text is being displayed in default font size as no basefont size hase beenset as yet.
<BASEFONT size =5>
This text has base font size =5.
</BODY>
</HTML>

Problem 13: Setting a Solid Background Color

<HTML>
<HEAD>
<TITLE> Base Font </TITLE>
</HEAD>
<BODY background-color: #FFFF00; >
</HEAD>
</BODY>
</HTML>

Problem 13: Setting a Solid Color for a paragraph.

<HTML>
<HEAD>
<TITLE> Base Font </TITLE>
</HEAD>
<BODY>
<P style="background-color:#99FFFF;">Background color is Hexadecimal</P>
</BODY>
</HTML>
Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 14
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
Problem 14: Setting a Background color set in <div> Tag.
<HTML>
<HEAD>
<TITLE> Base Font </TITLE>
</HEAD>
<BODY>
<DIV style="background-color:yellow; width:220px;" align="left">
<P>Division Section background background color is yellow and paragraph width is
220px.</P>
</DIV>
</BODY>
</HTML>

 Color Chart Reference

Colors are combin on RED, GREEN, and BLUE light.
Hexadecimal Value - #FFFFFF RGB Color Code - R=255 G=255 B=255,
RGB(xxx,xxx,xxx)

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00

R=255 R=255 R=255 R=255 R=255 R=255

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0

#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00

R=255 R=255 R=255 R=255 R=255 R=255

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0

#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900

R=255 R=255 R=255 R=255 R=255 R=255

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0

#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600

R=255 R=255 R=255 R=255 R=255 R=255

G=102 G=102 G=102 G=102 G=102 G=102

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 15
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
B=255 B=204 B=153 B=102 B=51 B=0

#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300

R=255 R=255 R=255 R=255 R=255 R=255

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0

#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000

R=255 R=255 R=255 R=255 R=255 R=255

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0

#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00

R=204 R=204 R=204 R=204 R=204 R=204

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0

#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00

R=204 R=204 R=204 R=204 R=204 R=204

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0

#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900

R=204 R=204 R=204 R=204 R=204 R=204

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0

#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600

R=204 R=204 R=204 R=204 R=204 R=204

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0

#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300

R=204 R=204 R=204 R=204 R=204 R=204

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0

#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 16
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------

R=204 R=204 R=204 R=204 R=204 R=204

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0

#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00

R=153 R=153 R=153 R=153 R=153 R=153

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0

#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00

R=153 R=153 R=153 R=153 R=153 R=153

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0

#9999FF #9999CC #999999 #999966 #999933 #999900

R=153 R=153 R=153 R=153 R=153 R=153

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0

#9966FF #9966CC #996699 #996666 #996633 #996600

R=153 R=153 R=153 R=153 R=153 R=153

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0

#9933FF #9933CC #993399 #993366 #993333 #993300

R=153 R=153 R=153 R=153 R=153 R=153

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0

#9900FF #9900CC #990099 #990066 #990033 #990000

R=153 R=153 R=153 R=153 R=153 R=153

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0

#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00

R=102 R=102 R=102 R=102 R=102 R=102

G=255 G=255 G=255 G=255 G=255 G=255

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 17
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
B=255 B=204 B=153 B=102 B=51 B=0

#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00

R=102 R=102 R=102 R=102 R=102 R=102

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0

#6699FF #6699CC #669999 #669966 #669933 #669900

R=102 R=102 R=102 R=102 R=102 R=102

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0

#6666FF #6666CC #666699 #666666 #666633 #666600

R=102 R=102 R=102 R=102 R=102 R=102

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0

#6633FF #6633CC #663399 #663366 #663333 #663300

R=102 R=102 R=102 R=102 R=102 R=102

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0

#6600FF #6600CC #660099 #660066 #660033 #660000

R=102 R=102 R=102 R=102 R=102 R=102

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0

#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00

R=51 R=51 R=51 R=51 R=51 R=51

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0

#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00

R=51 R=51 R=51 R=51 R=51 R=51

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0

#3399FF #3399CC #339999 #339966 #339933 #339900

R=51 R=51 R=51 R=51 R=51 R=51

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 18
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0

#3366FF #3366CC #336699 #336666 #336633 #336600

R=51 R=51 R=51 R=51 R=51 R=51

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0

#3333FF #3333CC #333399 #333366 #333333 #333300

R=51 R=51 R=51 R=51 R=51 R=51

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0

#3300FF #3300CC #330099 #330066 #330033 #330000

R=51 R=51 R=51 R=51 R=51 R=51

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0

#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00

R=0 R=0 R=0 R=0 R=0 R=0

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0

#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00

R=0 R=0 R=0 R=0 R=0 R=0

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0

#0099FF #0099CC #009999 #009966 #009933 #009900

R=0 R=0 R=0 R=0 R=0 R=0

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0

#0066FF #0066CC #006699 #006666 #006633 #006600

R=0 R=0 R=0 R=0 R=0 R=0

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0

#0033FF #0033CC #003399 #003366 #003333 #003300

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 19
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
R=0 R=0 R=0 R=0 R=0 R=0
G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0

#0000FF #0000CC #000099 #000066 #000033 #000000

R=0 R=0 R=0 R=0 R=0 R=0

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0

Problem 15: To display the list items in unordered lists are marked with bullets (small
black circles), by default.
<html>
<body>
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
</body>
</html>

Problem 16: To display multiple unordered list.

<html>
<body>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ul>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ul>
<li>OK</li>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 20
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<li>Your browser should automatically use different bullet styles for each level.</li>
</ul>
</ul>
</ul>
</body>
</html>

Problem 17: To display multiple ordered list with different types of bullets.

<html>
<body>
<ol style=”1”>
<li>Item one</li>
<li>Item two</li>
<li>Watch, you can easily nest list items: This item has some sub-items</li>
<ol style=”a”>
<li>Sub-item one</li>
<li>Sub-item two</li>
<li>Shall we do a 3rd nested list?</li>
<ol style=”i”>
<li>OK</li>
<li>Your browser should automatically use different bullet styles for each level.</li>
</ol>
</ol>
</ol>
</body>
</html>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 21
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
Problem 17: To display definition list with.

<html>
<body>
<dl>
<dt> The dl element </dt>
<dd>Paired tags define the start and end of a definition list.</dd>
<dt> The dt element </dt>
<dd>Paired tag that indicates the term being defined.</dd>
<dt> The dd element </dt>
<dd>Paired tag that indicates the definition of the term. Each term should be followed by a
definition.</dd>
</dl>
</body>
</html>

 Unsolved problem:

WAP to display

The ingredients:

 100 g. flour
 10 g. sugar
 1 cup water
 2 eggs
 salt, pepper

The procedure:

1. Mix dry ingredients thoroughly.

2. Pour in wet ingredients.
3. Mix for 10 minutes.
4. Bake for one hour at 300 degrees.

Notes:
The recipe may be improved by adding raisins.

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 22
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
Problem 18: To create signature using <div> tag.

<html>
<body>
<div>
Address:&nbsp;Agartala, Tripura<br>
Phone:&nbsp;0381-526-2339<br>
Web:&nbsp;www.xyz.com<br>
</div>
</body>
</html>

Problem 19: To create signature using <div> tag with link.

<html>
<body>
<div>
Address:&nbsp; Agartala, Tripura <a href="https://www.abc.com">India.</a><br>
Phone:&nbsp;<a href="callto:0381-526-2339">0381-526-2339</a><br>
Web:&nbsp;<a href="https://www.xyz.com">www.xyz.com</a><br>
</div>
</body>
</html>

Problem 20: To display simple table with 2 rows and 2 columns.

<html>
<body>
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 23
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<td>row 2, cell 2</td>
</tr>
</table>
</body>
<html>

Problem 20: To display two simple tables with different borders.

<html>
<body>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<table border="5">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Problem 20: To display a simple tables with headings in a Table

<html>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 24
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
<html>

Problem 21: To display a simple table with cellspacing.

<html>
<body>
<table border="1" cellspacing="5">
<tr>
<td>some text</td>
</tr><tr>
<td>some text</td>
</tr>
</table>
<body>
<html>

Problem 22: To display a simple table with cellpadding.

<html>
<body>
<table border="1" cellpadding="10">
<tr>
<td>some text</td>
</tr><tr>
<td>some text</td>
</tr>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 25
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
</table>
</body>
</html>

Problem 23: To display a simple table with cellspacing,cellpadding, width and border
attribute.

<HTML>
<BODY>

<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3">

<TR>
<TH COLSPAN="2"><BR><H3>TABLE TITLE</H3>
</TH>
</TR>
<TR>
<TH>Column A</TH>
<TH>Column B</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
</TR>
</TABLE>

</BODY>

</HTML>

Problem 24: Application of Colspan and Rowspan Attributes.

<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 26
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<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>

Problem 25: Setting up of background colour in table.

<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 27
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<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>

Problem 25: Setting up of table header and footer.

<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<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>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 28
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Problem 25: Setting up of table height and width.

<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 29
Department of Information Technology
&
Department of Computer Science WebTechnology Lab Mannual
----------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------
c. Hyper Links, Frames & Images :
 To create a web page using HTML and clarify the following: (a) how to create hyperlink, (b)
how to create frames, (c) how to Insert an image.
--------------------------------------------------------------------------------------------------------------------------

Problem 26: Setting up of 3 frames row-wise .

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,70%,20%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Browser does not support frames.</body>
</noframes>
</frameset>
</html>

Problem 27: Setting up of 3 frames column-wise .

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
</frameset>
</html>

***lots more to come****

Prepared by,
Soma Saha
Lecturer (Sr. Scale),
Department of Information Technology
Women’s Polytechnic, Hapania Page 30