Royal Education Society’s

College of Computer Science and Information Technology, Latur.

Department of Computer Science

Academic Year (2022-23)
Choice Based Credit System (CBCS Revised)
Class/Semester: B.Sc.(CS) FY SEM-I
Name of Paper: Web Technology
Prepared by: Mr. S. G. Momin
Question Paper

Q.1 Attempt any FIVE of the following (3 Marks each) (15)

a) <p> & <pre>Tags.
b) FTP protocol.
c) Span Tag.
d) Heading Tags.
e) Font tag.
f) WWW.
g) Mail to anchor.
Q. 2 Attempt any THREE of the following (5 Marks each) (15)
a) Explain Basic structure of HTML With example.
b) Explain Address & HR tag with all Attributes.
c) Explain <ol> tag with example.
d) Explain <Marquee> in deatail.
e) Explain Historical roots of HTML.
Q . 3 Answer any THREE of the following (5 Marks each) (15)
a) Explain <a> Tag with all Attributes.
b) What is Web Browser.
c) Define DHTML.
d) Explain Image Tag With suitable example.
e) Explain Table in HTML with example.
Q. 4 Attempt any THREE of the following (5 Marks each) (15)
a) Explain Javascript with suitable example.
b) Explain CSS with advantages.
c) Write a Program on Rollover button.
d) Explain Checkbox, Radio button & pull down menu.
e) Write a program on Frames with rows.
Q .5 Write shot note on any THREE of the following (5 Marks each) (15)
a) Text level Element.
b) Varibles in Javascript.
c) Website.
d) Embedded CSS.
e) Input Output Statements In Javascript.
 Modal Question Paper

Q.1 Attempt any FIVE of the following (3 Marks each) 15 M

a) <p> & <pre> Tags.
Ans:
 Paragraph Tag: <P>

 The paragraph tags are used to define a block of text as a paragraph.

 When a block of text is surrounded by the paragraph tags, the browser
automatically addsnew line before and after the paragraph text.
 The <p> element offers a way to structure your text. Each paragraph of
text shouldgo in between an opening <p> and closing </p> tag

<p>The contents of the paragraph.</p>

If you are using an empty paragraph tag like this <p> </p> it will create new line
If you have extra spaces in between your words the browser ignores that, extra spaces are automatically
ignored throughout the html except appeared in <pre> tag. If you want extra space after it or if this is
what you want as the formatting for all paragraphs, use &nbsp; if you want extra space in between text.

<p>Hello &nbsp; &nbsp; &nbsp; &nbsp; world.</p> : Output= Hello world.

Paragraph tag is basic text formatting tag which specifically used to create multiple line of text.
Paragraph Tag Attributes

 align – Align is used to apply aligning to the text as left, right, center.
o Ex: <p align=”right”>Text</p>

 PRE Tag - Preformatted Text - <pre></pre>

 Any text between the pre tags, including spaces, carriage returns and
punctuation, will appear in the browser as it would in a text editor (normally
browsers ignore multiple spaces, new line enter key press)
 Using the PRE tag to define sections of the page as formatted by the typing
itself was a quick and easy way to get the text to display as you expected it to.
This is because pre- formatted text is defined as text in which the structure is
defined by typographic conventions rather than by the HTML.
 Typical HTML ignores more than one white space and carriage returns in the
document. This means that carriage returns, spaces, and tab characters are
 all ignore. If you typed the above quote into a typical HTML tag like the P
tag, you would end up with one lineof text:

Try the PRE tag on your website with various different spacing and carriage returns.
For example, try pasting the following code into your web page HTML (leave the
spaces exactlyas they are written):
Code with PRE tag: Output:
<pre> A
A P
P P
P L
L E
E </pre>

The PRE tag leaves the whitespace characters alone. So line breaks, spaces, and tabs are all
maintained in the browser.

b) FTP Protocol:
1) Ans: FTP Protocol:

The File Transfer Protocol (FTP) is a standard network protocol used to transfer computer
files between a client and server on a computer network. The original specification for the
File Transfer Protocol was written by Abhay Bhushan, he is the author of the File Transfer
Protocol (which he started working on while he was a student at IIT-Kanpur).
FTP is state-full connection protocol that means FTP is built on a client-server model
architecture and uses separate online live data connections between the client and the
server. FTP by default use port number 21.
The first FTP client applications were command-line programs but now it developed for
newer operating systems which had graphical user interfaces like windows, and are still
worked with most Windows, MAC, Unix, and Linux operating systems.

FTP protocol having two types

1. Login FTP: FTP login uses a normal username and password scheme for granting
 access. The username is sent to the server using the USER command, and the password is
sent using the PASS command. If the information provided by the client is accepted by
the server, the server will send a response to the client and the session will established
and from then secure data transfer can be stated.
2. Anonymous FTP: Anonymous means unknown. In this type of FTP user may not enter
username and password to access FTP service. Users typically log into the service with
an 'anonymous' account when prompted for user name. Although users are commonly
asked to send their email address instead of a password, no verification is actually
performed on the supplied data. Many FTP hosts whose purpose is to provide software
updates will allow anonymous logins.

c) Span Tag:
Ans:
 The HTML <span> tag
It is used for grouping and applying styles to inline elements. Span used on single part of data
where div used for group portion of data.
In HTML, span and div elements are used to define parts of a document so that they are
identifiable when no other HTML element is suitable. While other HTML elements such as p
(paragraph), em (emphasis) and so on accurately represent the effect of the content, the use of
span and div leads to better accessibility for readers and easier maintainability for authors.
Where no existing HTML element is applicable, span and div can valuably represent parts of a
document.
Span tag represents an inline portion of a document, for example words within a sentence.
Div tag represents a block-level portion of a document such as a few paragraphs, or an
image with its caption.
There is a difference between the span tag and the div tag. The span tag is used with inline
elements whilst the div tag is used with block-level content.
Example
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is a paragraph <span
style="color:#FF0000;">
This is a paragraph</span>
This is a paragraph</p>
<p><span style="color:#8866ff;">
This is another paragraph</span></p>
</body>
</html>
d) Heading Tags.
Ans:
 Heading tag - <h?>Text</h?>

One of the earliest means of formatting text was the heading tag. It is available in six levels of
importance from <h1>down to <h6>, If you have documents with genuine headings, then there
are HTML tags specifically designed just for them.
They are h1, h2, h3, h4, h5 and h6, h1 being the biggest of headings and h6 being the smallest

Program: Output:
<html>
<head><title>Font Size
Example</title></head> This is a main big heading
<body> This is a main sub heading
<h1>This is a main big heading </h1> This is a sub heading
<h2>This is a main sub heading </h2> This is a heading
<h3>This is a sub heading </h3> This is a small heading
<h4>This is a heading </h4> This is a smallest heading
<h5>This is a small heading </h5>
<h6>This is a smallest heading </h6>
</body>
</html>

Note that the h1 tag is only used once - it is supposed to be the main heading of the page and
have bigger and bold text appearance. h2 to h6 can used repeatedly, but they should always be
used in order, For example, h4 should be a sub-heading of an h3, and h3 which should be a sub-
heading of an h2.

e) Font tag.
Ans:
 The <font> Tag :
Fonts play very important role in making a website more user friendly and increasing
content readability. Font face and color depends entirely on the computer and browser
that is being used to view your page but you can use HTML <font> tag to add style,
size, and color to the text on your website. The font tag was brought in early in HTML’s life
to allow designers to change the size, typeface and color of their text.

 Font Attributes

There are three main font attributes are as follows:

1 Size
2 Color
3 Face

1. Size:
You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.

2. Font Color: You can set any font color you like using color attribute. You can specify
the color that you want by the color name for that color.
3. Font Face: Choose a different font face by specifying any font you have installed. Font
face is synonymous with font type. You can set font face using face attribute but be
aware that if the user viewing the page doesn't have the font installed, they will not be
able to see it. Instead user will see the default font face applicable to the user's computer.
As a web designer, be aware that if you specify a custom font type and users viewing the page
don't have the exact same Font installed, they will not be able to see it. Instead the chosen font
will default to Times New Roman. To reduce the risk of running into this situation, you may
provide a list of several fonts with the face attribute, such as outlined below.

Program to demonstrate font size, color, and face attributes.

<html>
<head>
<title>All Font Attributes</title>
</head>
<body>
<font face="Times New Roman" size="5" color="red"> Font NameTimes New Roman
</font> <br/>
<font face="Verdana" size="5" color="yellow"> Font Name Verdana </font> <br>
<font face="Comicsans MS" size="5" color="blue">Font Name Comic Sans MS</font>
<br>
<font face="Agency FB" size="5">Font Name Wild West</font> <br>
</body>
</html>

This will produce following result:

f) WWW.
Ans:

 WWW:

Full form of www is world wide web and it is an advanced finding information system. It is
being developed very fast. WWW is based on hypertext System.
The concept of the Web was invented at CERN (European Council for Nuclear Research) in
1992 by Tim-Berners Lee, He is the father of the Web or Internet.
The principle of the Web is based on using hyperlinks to navigate between documents (called
web pages) with software called a Web Browser. A web page is a simple text file written in a
markup language (called HTML) that convert the layout of the document, graphical elements,
and links to other documents, all with the help of tags.
Besides the links which connect formatted documents to one another, the web uses the HTTP
protocol to link documents hosted on distant computers (called web servers). On the www,
documents are identified with a unique address, called a URL, which can be used to locate any
resource on the internet, no matter which server may be hosting it.
A URL looks something like this:
http://www.mywebsite.com/webfolder/Home.html
Which means, when the user is browsing on the www he can put up a word or expression within
a text and request for more information about it.

WWW can be started by the command www. then domain name of the website and finish with
top-level domains .com or .in etc Ex: www.mywebsite.com

Advantages: Disadvantages:
1. You can find all type of information 1. Online data not secure
2. You can purchase things online 2. Hacking
3. You can watch or listen to media 3. You can get computer virus infections
4. You can play online games 4. Online fraud.
5. You can check your online bank Etc…
account
6. You can find friends, etc…
g) Mail to anchor.
Ans:
 Creating Email Hyperlinks (using mail to anchor):-

Although links to and within web pages are the most common types of links you’ll create, you
can also link to other types of content on the Internet.

E-Mail Addresses
When you want to give someone easy access to your e-mail address, you can include it on your
page as a mailto link. This means instead of using http://in front of your link, you use the e-mail
protocol mailto:to preface your e-mail address.

Clicking this link in a browser causes the visitor’s e-mail program to launch. Then it opens a new
e-mail message and places your e-mail address in the To: box of that message.

NOTE :
- For a mailto link to work, visitors to your web site must have an offline e-mail program
(such as Microsoft Outlook or Mac Mail) set up on their computers. E-mail links like
these may not work if the visitor uses only a web-based e-mail service such as Gmail or
Hotmail.

- There actually is not a separate HTML tag for creating an HTML email link.

Email Link:
- By adding a couple extra onto the email address in href you can have both the SUBJECT
and the BODY of the email automatically populated for your visitors. This is great when
receiving emails from a website to an email account that handles more mail than just
from that one link on your site.
- By defining a uniform subject that people will automatically have when clicking the link
you will be able to tell right away whether or not an email came from the website or from
another source (as long as your visitors don't mess with the subject that you give them).
- Subject - Insert the subject of the email with the information that you provide.
- Body - Insert the body of the email with the information that you provide.
 Complete email HTML Code:

<a href= "mailto: [email protected] ?subject=Regarding Something &body=Dear

sir,">
Email Us</a>

Mailto: The anchor <A> tag can also be used for enabling emailing, which helps visitors to send
feedback through your web site. This is all fine as long as the visitor has his email client
configured to send emails. However, if this is not the case, his computer will inform to him about
it and the email will not be sent till an email client is configured.
Using the mailto value along with an email address in the HREF attribute of the anchor tag will
create a link, which when clicked will open the default email client email compose window with
already filling to part then subject part and body part with above data.

Q.2 Attempt any THREE of the following (5 Marks each) 15 M

a) Explain Basic structure of HTML with Example.

Ans:
 Structure of HTML document and Basic Tags:
Below program is Structure of HTML:
<html>
<head>
<title>Home</title>
</head>
<body>
This is a basic structure HTML page.
</body>
</html>

 Basic Tags:
There are four basic tags: 1.<HTML>, 2.<HEAD>, 3.<TITLE>, 4.<BODY>

1. <HTML> :
 <HTML> tag is a main tag contains all other tags which is a structure and
skeleton of HTML code.
 The first tag in your html document is <html>.This tag tells your browser that this
is the start of an html document. The last tag in your document is </html>.
 This tag tells your browser that this is the end of the html document. This is the
standard structure tag of an HTML. Make sure that you use <HTML> element at
once in whole html page it never repeat and placed in between code more than
one time.
 It is compulsory kind of tag to make web page. Html contains all other basic tags
 which is head, title, body.
2. <HEAD> :
 The <head> element is just a container for all other header elements. It
should be the first thing to appear after the opening <html> tag. <head> element
should contain a <title> element indicating the title of the document.
 Other tag under head: <script>, <style>,<link>.
3. <TITLE> :
 <TITLE> tag is used to display webpage title name. Page titles are very useful to
know just what subject data is on your website. There can only be one title per
page.
 Please note that this is one of the tags that will go within the HEAD tags. It
displays at the very top of a browser window.

4. <BODY> :
 The <body> element appears after the <head> element and contains the part of the
Web page that you actually see in the main browser window, which is
sometimes referred to as body content.
 All tags which apply some effects to text, image or anything that means
everything you seen and appearing on web page that are placed between under
<body> tag and </body> tag.

b) Explain Address & HR tag with all Attributes.

Ans:
 Address- <address>Text</address>

The address element isn’t used for the purpose that you may expect—that being to mark up a
physical location alone. Instead, it’s used to indicate the contact point for the document in which
it appears. This element would usually appear in a header or footer on the page.
An address element may contain a geographic location, but it doesn’t have to; it could also
contain a mixture of contact points. In the example shown, the address element includes an email
point of contact, a mailing location, and a telephone number.

The basic purpose to write postal address in <address> tag is to find our address webpage in
google search engine easily, because search engine software always searches our address text
with the help of <address> tag.

The contact details of the “XYZ College” are marked up with address in this example:
 <address> Name of the XYZ College: <br>

Gandhi Nagar, Nehru Road, New Delhi.<br>

Pin: 123 456 <br>
Mob +91 3212 123 222 <br>
Fax 321 123 33
</address>

Used For …
This element is used to represent contact related information to the user like Address, Email,
Fax, Mobile, Contact number.

c) Explain List tag with example.

Ans:
 List Tags:

Introduction to lists
List tag is to create lists in web page. HTML offers some tags for specifying lists of information.
All lists must contain one or more list elements (items).

There are three types of lists are present:

1) Ordered List- <OL>
2) Unordered List- <UL>
3) Definitions- <DL>

Lists are especially useful in web pages to draw attention to short pieces of information. Keep
that in mind when you create your lists, and try to include short phrases, instead of long
sentences, in each list item.

1] Ordered List- <OL> tag:

An ordered list is one in which each item is presented by a number or letter. Ordered list
always represent data in sequence or order either it is number or alphabet.

Program:
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<ol type="I">Courses:
<li> BCA </li>
<li> BSc(CS)</li>
 <li> BSc(SE)</li>
<li> BBA</li>
</ol>
</body>
</html>

Output:
Courses:
I. BCA
II. BSc(CS)
III. BSc(SE)
IV. BBA

 <OL> tag : Values of TYPE Attributes:

Values of TYPE Numbering Style Example

Attribute
1 Numbers 1, 2, 3, 4, 5, 6
a Lowercase Alphabet a, b, c, d, e, f
A Uppercase Alphabet A, B, C, D, E, F
i Lowercase Roman Numbers i, ii, iii, iv, v, vi
I Uppercase Roman Numbers I, II, III, IV, V,
VI

2] Unordered List- <UL> tag:

The second type of list is similar to the first, except unordered lists don’t use numbers or letters.
As the name suggests, unordered lists means it is not follow order (Number sequence) for
elements of list. UL lists use bullet symbol to represent each list item. As OL lists UL also use
<LI> tags to represent each list items. The following is an example of an unordered list:
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<ul type=”square”>Name of the colors:
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</body>
</html>
 In the above example we used square value to TYPE attribute hence list will appear with square
bullet symbol, if user want to change the bullet symbol then user can use following options.

Three possible options exist for bullet style:

 disc Usually displayed as a small, filled-in circle

<UL TYPE=”disc”>

o circle Usually displayed as an open circle

<UL TYPE=”circle”>
square Usually displayed as an square.
<UL TYPE=”square”>

Initially, all unordered lists default to the disc style, which is usually represented as a small,
filled-in circle. However, if you nest unordered lists—that is, if you include an unordered list in
another unordered list—the default value changes.

3] Definition Lists <DL> tag

The third type of list you can create in HTML is called a definition list. As its name suggests,
you might use a definition list to show terms and their definitions. For example, in the following
list, the term is listed on the first line, and then the definition is on the line below the term.
<DL> Definition List, <DT> Definition Title, <DD> Definition Description
Code:
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language is the web scripting language used to create documents for
the World Wide Web.</dd>
</dl>

Output:
HTML:
Hypertext Markup Language is the web scripting language used to create documents for the
World Wide Web.

d) Explain <marquee> in detail.

Ans:
  <Marquee> Tag:
This proprietary element originally introduced by Internet Explorer specifies a scrolling, sliding,
or bouncing text marquee. Marquee tag is used as a animation tag to scroll, rotate, move, slide a
text or image or anything that contain <marquee> start tag and </marquee> end tag in web page.
Data can slide with horizontal and vertical direction using some attributes.

Attributes:
Settings of the movement using below
attributes:
1) behavior: If no value is specified, the default value is
Sets how the text is scrolled within themarquee. scroll.Ex. <marquee
Possible values are behavior=”slide”>TEXT</marquee>
1. scroll 2. slide 3. alternate.

2) direction: If no value is specified, the default value is

Sets the direction of the scrolling within the left. Ex. <marquee
marquee. Possible values are direction=”down”>SCROLLING
1. Left 2. Right 3. Up 4.Down DIRECTION DOWN TEXT</marquee>

3) loop: Ex. <marquee loop

Sets the number of times the marquee will scroll on =”3”>LOOP
page. If no value is specified which means the TEXT</marquee>
marquee will scroll continuously.

4) scrollamount: Ex. <marquee scrollamount="100">FASTER

Sets the amount of scrolling speed for marquee TEXT</marquee>
text. The default value is 6. Use more than 6 for
faster speed.

5) scrolldelay: <marquee scrolldelay="150">DELAYED

Sets the interval between each scroll movement in TEXT</marquee>
milliseconds. The default value is 85. Note that
any value smaller than60 is ignored. Use more than
85 for slower speed of marquee.
 e) Explain Historical roots of HTML.
Ans:
 The HTML stands for Hyper Text Markup Language. It is a basic web programming
language which is used to make webpages.
 Before developing HTML the data sharing is very difficult among different nature of
computers, Computers were available in so many different screen sizes, operating systems,
and system structures. That means one computer environment did not supported easily to
another computer environment.
 Such problem faced by Sir Tim Berners-Lee. He is best known as the inventor of the World
Wide Web, he was a researcher scientist at CERN (The European Council for Nuclear
Research) laboratory in Geneva, Switzerland.

In 1989, Berners-Lee developed the hypertext system that could be used as an interface to
access scientific information and this information displayed equally well on different computers
as like Macintosh systems, NeXT Workstations, IBM PCs with Windows OS. This system was
based on software technology which was worked on a various server computers available in
network.

Berners-Lee developed the first versions of HTML, at first he concentrate on sharing the
content and structure of the system and then later he considered the presentation. Hence, first
webpage had become as static webpage. Hypertext documents are navigating using Hyperlinks.

Berners-Lee developed a system to access multiple data to visit single web page, that system
later called as World Wide Web.
In 1989: Developed hypertext system.
In 1990: Developed a text mode browser to access hypertext system.
In 1991: Hypertext system was implemented officially at CERN.
In 1992: Hypertext system named as WWW (World Wide Web)
In 1993: Graphical browser Mosaic used to run www.
In 1994: Most Popular Browser Netscape Navigator used to run www.
In 1995: Microsoft’s Internet Explorer used to run www.

 To access website we need to do this:

1. Hyperlinks are usually visible as underlined words and get activated by mouse click.
2. In website taking the user to another page you can create hyperlinks on text or
graphics.
3. So to read a topic you can click on the hyperlinked text, using this way you can move
from one page to another by simply clicking on some underlined text.
4. The user visits a number of different web pages located all over the world.

Q.3 Attempt any THREE of the following (5 Marks each) 15 M

 a) Explain <a> Tag (Hyperlink) with all Attribute
Ans:
 Hyperlink (Anchor) Tag & it’s all attributes-

The HTML anchor element is used to create a link to a resource (another web page, a file, etc.)
or to a specific place within a web page.
Syntax: <a href=”path&filename.extension”> text </a>
Example: <a href=”www.mywebsite.com/home.html”> text </a>

The anchor tag alone won't do anything without an attribute and value, so let's look at the
attributes we can use.

 HREF Attribute:
Href is short for hypertext reference. To create a link, you have to know the web address url of
the file you want to link to, whether it's another web page of your own site, another website, or a
link to file such as a PDF document, sound file, image, or another type of file.

Suppose you want to link to the front page of website site.

The web address is: http://www.google.com. You'd code the link like this:
<a href="http://www.google.com">Use this link to search Google</a>

The href part, shown in dark blue text with underlined. This is the attribute that defines the
address of the file you want to link to.

The equal sign always connects an attribute to the attribute's value. So in this case, href is the
attribute, and http://www.google.com is the value. The value is always enclosed in quotation
marks.
 Click here to visit Google is the anchor text, or sometimes called the link text. This is the part of
a link that is clickable.
If you link to a page on another site you need to use the full web address as shown in the
example above. If you're linking to a different page on your own same site you only need to use
the page name and extension if the page is keep in the same directory.

For example, suppose you want to link to a page you've saved with the name of HomePage.html.
You'd code it like this:
<a href="HomePage.html">Home Page</a>

By linking to your own internal pages without using the full web address your pages will load
faster. If you use the full web address the browser goes back out to the Internet to find your site
all over again, which takes longer. If you don't use the full path the browser only checks on your
site for the file.

File names, which includes the name of the web page and the extension, are case sensitive. That
means you must use the same capitalization in the web address of the file that was used when the
file was saved.

 TARGET Attribute
The target attribute allows you to determine where the link will open. With a framed site, it
allows you to target a link to a specific frame. The most common use is to have off-site links
open in a new browser window or new tab in same browser window. Target attribute specifies
the target window for a hypertext source link that references frames. The information linked to
target will be displayed in the named window.
 _blank : it open clicked web url webpage in new window of web browser;
 _self : Opens the linked document in the same frame as it was clicked (this is default);

Here's how to open a link in a new window:

<a href="http://www.site.com" target="_blank">Link Text</a>

By adding the part target=”_blank” to a link, the link will open in a new window or a new tab,
depending on the browser in use and how it's configured.

b) What is Web Browser?

Ans:
 Web Browser:

Web browser is software to provide an interface to displaying, presenting, accessing and

browsing information resources of web pages on internet and navigate between one website to
another in an easy manner. Now a day’s website becomes more popular because it is effective
way of advertising and selling products of company.

HTML is simply collection of codes, code means it is collection of some meaningful symbols
which is having some structure and format to create a web document. Those structured
combination of symbols are only recognized by special software called as web browser, web
browser can read HTML symbolic program structure and displays a suitable human readable
form on display screen.

The web pages are written in HTML language in the form of code but whenever you open that
HTML web page in web browser software you don’t see html code, it displays a formatted and
readable data. Web page is a document, typically written in plain text mixed together with
formatting instructions (tags) of Hyper Text Markup Language (HTML). Web pages are
accessed and transported outside the computer in internet with a protocol called as HTTP (Hyper
Text Transfer Protocol)

Protocol is tiny software which defines rules and regulations to transfer data and
communicate another computer across the internet.

Web browser supports numerous protocols such as HTTP, FTP, TELNET, etc…

Web browser perform various task as like file downloading, file uploading, email attachment,
save web page content, play videos from website, print webpage etc. It also bookmarks
(saving address of a web page in web browser) your favorite web page.

 Available Web browsers in internet:

1. Mosaic: Mosaic was older browse, it was first graphical web browser. Mosaic was
developed at the National Center for Supercomputing Applications and released the
browser in 1993.
2. Netscape Navigator: It was first released in 1994. Mosaic was developed with another
name netscape navigator. This is the first most popular commercial web browser in older
days
3. Microsoft Internet Explorer: Microsoft is a software company which designed and
developed a web browser for windows operating system named as Microsoft Internet
Explorer. It is present default as web browser in any newly installed windows operating
system. Today this is one of the most usable browser on internet.
4. Mozilla Firefox: After days creator of Netscape navigator developed a new browser
called Mozilla Firefox. Firefox is rapidly gaining ground right behind internet explorer
because of its tabbed browsing, superior security features, and fast loading web page.
5. Google Chrome: Google specialized in web search engine it is a copyright product of
Google. It is a light weight and fast accessing browser.
6. Mac Safari: Macintosh (Mac) is a computer system of Apple company. Safari is a web
browser works on Macintosh OS. It has a rich graphical appearance.
7. Opera: It is popular mobile web browser and also available in desktop PC.
 c) Define DHTML.

Ans:
 Introduction of DHTML:

It is a collection of technologies used together to create dynamic web sites by using a

combination of a HTML, a client-side scripting language (such as JavaScript, VBScript), a CSS
(Cascading Style Sheet) for designing, and the DOM (Document Object Model).

DHTML is not a language, it is a combination of:

DHTML = HTML + Scripting Language + CSS + DOM

1. HTML
2. JavaScript - the Web's standard scripting language
3. Cascading Style Sheets (CSS) – Making web page more attractive.
4. Document Object Model (DOM) -- a means of accessing a document's individual elements

- The application of DHTML was introduced by Microsoft with the release of Internet
Explorer 4 in 1997.

We put HTML tags (paragraphs, images, etc.) in a specific order in the source code. The browser
always showed all elements in this order. Positioning and styling was done by tables, div's and
such aids. If we wanted to change the order or the positioning of the elements, we had to rewrite
the HTML.

DHTML gives us the chance to re-organize our pages. In fact, we can take some tags out of the
natural flow (Default behavior) of the page. The natural flow of the page is the page as the
browser first shows it. It calculates the tables and paragraphs and other things we put in the page,
then displays them in the best possible way, one by one, from the beginning to the end of the
HTML document.

It provides a richer, more dynamic experience on web pages, making them more like dynamic
applications and less like static content.

DHTML depends on these four component and these are:

1) HTML: we have been using attributes, tags, and generating HTML in a structured
fashion. HTML defines the structure of a Web page, using such tags as headings, forms,
tables, paragraphs and links.

2) Scripting Language (Javascript, VBscript): Scripting provides the mechanisms to

communicate user actions and produce client-side changes to a page. For example, scripts
can handle mouse actions (such as the mouse passing over a specified area of a page
through the event model such as onmouseover) and respond to the action by using a set of
predefined instructions (such as highlighting the text or image activated by the mouse
action) like rollover button. Although DHTML can communicate with several scripting
languages, JavaScript is the standard for creating cross-browser DHTML pages.
 3) Cascading Style Sheets (CSS): A style sheet controls the designing and formatting of
HTML elements. We need to understand style sheets for attractively designing a html
page. That means text and graphics can overlay each other, creating more visual effects.

4) Document Object Model (DOM): The Document Object Model. This means that we are
developing a model in which the document or Web page contains objects (elements,
links, etc.) that can be manipulated. So you will be able to delete, add, or change an
element (as long as the document is still valid, of course!), change its content or add,
delete or change an attribute.

With the Document Object Model, programmers can build documents, navigate their structure,
and add, modify, or delete elements and content. Anything found in an HTML document can be
accessed, changed, deleted, or added using the Document Object Model.

d) Explain Image Tag with suitable example.

Ans:

 The Role of Images on the Web – The Img tag & it’s all attributes:-
The image tag is used to place an image on the web page. Place image inside the page content is also
called as inline image.

<img src="image1.jpg"></img>

The Basics - How it Works

It is very important to understand that images are not technically "part" of the web page file, they are
separate files which are inserted into the page when it is viewed by a browser. So a simple web page with
one image is actually two files - the HTML file and the image file. The example on the right illustrates this.

In this example the two files are both located in the same folder. The HTML file includes an image tag
which refers to image1.jpg.

When the HTML file is displayed in a browser, it requests the image file and places it on the page where
the tag appears.

Attributes of <img> tag with example:

1) Src (Source) Attribute:

As you can see, the most important attribute of the image tag is src, which means source and tells the
browser where the image file is.

Ex: <img src="image1.jpg"></img>

2) Width & height Attributes:

The size define the width and height of the image. They look like this:

<img src="image.jpg" width="200" height="150"></img>

If your image is present on c drive of your computer then you have to mention c:\ in front of image name
in src attribute. These attributes are optional but strongly recommended as to set the size of width and
height for image.

You can mention width and height attribute values either in Percentage or in Pixel value such as

In Percentage: <img src="image.jpg" width="30%" height="20%"></img>

In Pixel: <img src="image.jpg" width="200" height="150"></img>

3) Alt Attributes

These two attributes are very similar and can be confusing. Basically, it makes sense to treat them as the
same thing and use them both.

Alt attribute define a short piece of text which appears instead of the image if the image cannot be
displayed (for whatever reason), and as a "tool-tip" when you hold your mouse over the image it appears
as text.

Beside image is alt attribute output.

<img src="image.jpg" alt="Mr and Mrs Jones"></img>

If no alt or title tag is specified, the results vary depending on the browser and user settings. Some will
show nothing, some will show the file name.

4) Align attribute:

You can use the align attribute to position the image:

<img src="image.jpg" align="right"></img>

The following alignment options are available: left, right, center.

5) Border attribute:

The border attribute places a border around the image. In the following example a 1-pixel border is
applied:

<img src="image.jpg" border="1"></img>

If no border attribute is specified, no border is applied, except when the image is used as a hyperlink. In
this case a 1-pixel border is applied. If you want to make an image into a hyperlink without a border,
specify a zero border like so:

<img src="image.jpg" border="0"></img>

 Image Formats for the Web:
There are four basic formats you will find on the Web. Each denoted to the browser by a different suffix
extension.
 .jpeg or .jpg: JPEG stands for Joint Photographic Experts Group
 .gif: This is an acronym for Graphics Interchange Format.
 .png Pronounced as 'ping', this stands for Portable Network Graphic.
 .bmp (pronounced "bimp") This is a "bitmap."

e) Explain Table in HTML with example.

Ans:
 Tables in HTML:
Table is a two-dimensional matrix consisting of rows and columns. Classification of data
we use table.
HTML tables are used for displaying data in rows and columns on webpage. Tables are useful to
display data in tabular format. Tables are much more powerful. They do not just format and
present textual information but can also contain images, forms, hyperlinks and much more.

 Components of the table:

1) Table Caption:- this is a title of the table which you want to create. For this use <caption>
tag
2) Table Row : this is a row of the table which you want to create. For this use <TR> tag
3) Table Heading Cell:- these are the titles given to a table row/column. They are usually
displayed as bold. For this use <TH> tag.
4) Table Data Cell:- this is a section made by a table row and column. A table cell can contain
text, image or even another table within it. For this use <TD> tag.
5) Table Content:- The text, image, another table, anything itself within the cell is table data.

 All Attributes of TABLE tag:-

1) BORDER:-
Border attribute is used with <TABLE> tag to display lines around rows and columns.
BORDER attribute can take value depending upon the thickness of the border that you want,
value can start with 0 to increased order (0 value represent no border,1 thin border, 5 Thick
border and so on…).
Ex. <TABLE BORDER=”1”>

2) BORDERCOLOR:-
The BORDERCOLOR attribute sets color to the border of the table.
This attribute takes name of color or the equivalent hexadecimal value.
Ex. <TABLE BORDER=”1” BORDERCOLOR=”RED”>

3) BGCOLOR:-
To change the background of the entire table BGCOLOR attribute is used.
BGCOLOR attribute takes the value as name of color or its equivalent hexadecimal value.
Ex. <TABLE BGCOLOR=”PINK”>

4) ALIGN:-
We can align the table to left, right or center location. Table Cell
By default, tables are displayed at left margin. Left Center Right
ALIGN attribute take values as LEFT, RIGHT or CENTER.
Ex. <TABLE ALIGN=”CENTER”>

5) VALIGN (vertical align):-

Table Cell
We can align table cell data vertically in terms of TOP, MIDDLE, and BOTTOM.
Top
VALIGN attribute is used with TOP, BOTTOM, MIDDLE values.
This attribute is also used with table data <td> and table heading <th>. Middle
Ex- <TABLE VALIGN =”TOP”> Or
<TH VALIGN=”TOP”> Or <TD VALIGN=”TOP”> Bottom
Note: We can use both attributes together align and valign.

6) WIDTH:-
WIDTH attribute defines how table appears on the screen with horizontal increment of size.
Width can be given a value either absolute width in pixel such as <TABLE WIDTH=”300”> or
width in percentage value such as <TABLE WIDTH=”50%”>.
Ex-<TABLE WIDTH=”300”>

7) HEIGHT:
Height attribute defines how table appears on the screen with vertical increment of size.
Width and Height can be given a value either absolute width in pixel such as <TABLE
HEIGHT=”200”> or height in percentage value such as <TABLE HEIGHT=”20%”>.
Ex-<TABLE HEIGHT=”20%”>

8) CELLPADDING:-
Cellpadding is the value that determines the amount of spaces within each cell border and its
content data. It tells the browser that how much space to provide between border and text or data
within the cell.
It is placed in the <TABLE> tag with a value defined in pixels.
Ex-<TABLE BORDER=”1” cellpadding=”5”>

9) CELLSPACING:-
Cellspacing is used to create space in between all cells in a table.
Use of cell spacing also effects on spacing of the entire table.
Ex-<TABLE cellspacing=”5”>

10) COLSPAN:-
 These attributes are used to span (Expand in space) multiple number of columns.
 COLSPAN attribute is used with<TH>, <TD> tags.
 COLSPAN attribute is used to create a cell that have size of two or more cells of different
columns, that means visitor thought it merges the two or more cells of different columns
in a single cell of column.
 COLSPAN increase or span cell in horizontal way.
 COLSPAN attribute takes numeric value i.e. how many cells in a column you want to
merge.

11) ROWSPAN:-
 These attributes are used to span (Expand in space) multiple number of rows.
 ROWSPAN attribute is used with <TH> and <TD> Tags.ROWSPAN attribute is used to
create a cell that have size of two or more cells in different row, that means visitor
thought it merges the two or more cells of different rowsin a single cell of column.
 ROWSPAN increase or span cell in vertical way.
 It takes the numeric value i.e how many cells you want to merge and make a single cell.

Program of Colspan and Rowspan:

<html>
<head> <title> Table with Colspan and Rowspan attribute </title> </head>
<body>
<table border="1" bordercolor="black" cellpadding="0" cellspacing="0" width="300px">
<caption> Table with Colspan and Rowspan attribute </caption>
<tr>
<th colspan="2"> Colspan DATA </th>
</tr>
<tr>
<td rowspan="2"> Rowspan DATA </td>
<td> Normal DATA </td>
</tr>
<tr>
<td> Normal DATA </td>
</tr>
</table>
</body>
</html>
 Output:

Q.4 Attempt any THREE of the following (5 Marks each) 15 M

a) Explain Javascript with suitable example.

Ans:
 Introduction of JavaScript:

 Javascript is a dynamic computer programming language. It is lightweight and most

commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming
language with object-oriented capabilities.
 JavaScript was originally developed in 1995 by Brendan Eich.
 The general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
 Supported to and integrated with Java.
 Supported to and integrated with HTML.
 Open and cross-platform (works well with all browsers and operating systems)

 Advantages of JavaScript:

1. Less server interaction − you can validate user input before sending the page off to the
server. This saves server traffic, which means fewer loads on your server. Wrong data
can’t send to server.
2. Immediate feedback to the visitors − they don't have to wait for a page reload to see if
they have forgotten to enter something.
3. Increased interactivity − you can create interfaces that react when the user hovers over
them with a mouse or activates them via the keyboard.
4. Richer interfaces − you can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

 Disadvantages of JavaScript:

1. JavaScript cannot be used for networking applications because there is no such support
available.
2. JavaScript doesn't have any multithreading or multiprocessor capabilities.
 Client-side JavaScript:
 The script should be included in or referenced by an HTML document for the code to be
interpreted by the browser.
 It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.
 The JavaScript client-side mechanism provides many feature For example, you might use
JavaScript to check if the user has entered a valid e-mail address in a form field.
 The JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server.

JavaScript Development Tools:

For development various vendors provide some JavaScript editing tools and they are as follows.
 Microsoft FrontPage
 Macromedia Dreamweaver MX
 Macromedia HomeSite 5

How to Create a Simple JavaScript?

JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page. You can place the <script> tags, containing your JavaScript,
anywhere within you web page, either in <head> and <body>

The script tag takes two important attributes −

 Language − This attribute specifies what scripting language you are using. Typically, its
value will be javascript.
 Type − This attribute is what is now recommended to indicate the scripting language in
use and its value should be set to "text/javascript".

<script language="javascript" type="text/javascript">

JavaScript code
</script>

b) Explain CSS with advantages.

Ans:
 Introduction to Cascading Style Sheets (CSS):

Cascading Style Sheets, commonly referred to as CSS, it is a simple design language used to
simplify the process of making web pages presentable.

CSS handles the look and feel/designing part of a web page. Using CSS, you can control 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, layout designs, and variations in display for
different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML.

 Types of CSS:
There are three types of CSS:
1. Embedded CSS Styles
2. Inline CSS Styles
3. External CSS Styles

1) Embedded CSS Styles:

- Embedded style always used inside <HEAD> tag, for using embedded css you have to use
<style> tag inside <head> tag, then insert css code in to <style> tag.
- This type of css applies for complete webpage and for all tags, suppose you write a css code
for h1, h2, p tag then all h1, h2 and p tags are available inside that web page are applied by
css effect.
2) Inline CSS Styles:
- Inline Styles can be applied directly to tags in the body of a document. Rather than set
<style> tag for the <H1> element inside <Head>, that means you should not write <style>tag
inside <Head> tag.
- Inline style applies css code inside the tag, we can say it is a tag specific css. It is a single tag
oriented css code, which does not disturb the other same tags. it is possible to set the style for
an individual tag.
- For using this css you have to write style attribute inside a start tag of any valid HTML tag,
then apply css code as shown below in example.

<H1 STYLE=”font-size: 48pt; font-family: Arial; color: green”>

CSS Test Text
</H1>

3) External CSS Styles:

- External css means css code present externally in individual file as style.css and applied in
webpage which is html code where <LINK> tag is present inside of <head> tag.

- CSS can be used as external style sheet linked to a document or a set of document, as shown
in the following example. Linked information should be placed inside the <HEAD> tag with
the help of <LINK> tag.

EXAMPLE:
<LINK REL="stylesheet" TYPE="text/css" HREF="newstyle.css">

Advantages of CSS

1) CSS saves time –

 You can write CSS once and then reuse same sheet in multiple HTML pages. You can
define a style for each HTML tags and apply it to as many Web pages as you want.
2) Pages load faster –
If you are using CSS, you do not need to write HTML tag attributes every time. Just write
one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster webpage download times.
3) Easy maintenance –
To make a global change, simply change the style, and all tags in all the web pages will
be updated automatically.
4) Superior styles to HTML –
CSS has a lot of attributes than HTML, so you can give a best look to your HTML page
in comparison to HTML attributes.
5) Multiple Device Compatibility –
Style sheets allow content to be displayed for Mobiles, Tablets, laptops, Desktop
Computers, etc.
6) Global web standards –
Css supported by World Wide Web Standards.
7) Platform Independence –
The CSS Script offer consistent platform independence and can support latest browsers as
well as all operating systems.
c) Write a program on Rollover button.
Ans:

A feature available as dynamic buttons, commonly called rollover buttons, is one of the first
common examples of dynamic page manipulation using JavaScript, and DHTML.

A rollover button is a button that becomes active when the user positions the mouse
over it. The button may also have a special activation state when it is pressed. To create a
rollover button, you will first need at least two or three images, to represent each of the button’s
states—inactive, active, and unavailable.

To run this concept we need three images, a sample set of rollover image is shown here:

Step 1: Create three images as shown below and give name as shows.
Step 2: Take <a>tag and place <img> tag inside <a> tag then apply onmouseover and
onmouseout event in <a> tag.

Step 3: In order to add this rollover image to the page, simply use the <IMG> tag like
another image it will display image1.jpg.

The idea is to swap the image in and out when the user move mouse cursor over the image the
onmouseover event will occur and image2.jpg will appear and when mouse pointer switch back
from the image onmouseout event will occur and image3.jpg will appear. By literally swapping
the value of the SRC attribute, you can achieve the rollover effect. This will happen dynamically
without manually change any code and refresh or reload a web page.

Output Effect: This will show effect as like image of ABOUT will blink as per action from
white background to black background but technically image is not blinked but two individual
images are swapping on action.

Program for Rollover Buttons:

<html>
<head><title> Rollover Buttons without using javascript </title></head>
<body>
<a href='Destination URL' target="_top"
onmouseover="document. Rollover.src='path/image2.jpg'"
onmouseout="document. Rollover.src='path/image3.jpg'">

<img src="path/image1.jpg" width="281" height="55" border="0"

alt="Move your mouse over me" name="Rollover">
</a>
</body>
</html>
 d) Explain Checkbox, Radio button & pull down menu.
Ans:
1) Checkbox Controls :

Checkboxes are used when more than one option is required to be selected. They are also created
using HTML <input> tag but type attribute is set to checkbox.
<form> Output:
Select Services: <br>
<input type="checkbox"
name="internet" value="1">
Internet</input>
<input type="checkbox"
name="hostel" value="2">
Hostel</input>
<input type="checkbox"
name="mess" value="3">
Mess</input>
<input type="checkbox"
name="gym" value="4">
Gym</input>
</form>
2) Radio Button Controls :

Radio buttons are single option selection control, it used when out of many options; just one
option is required to be selected. They are also created using HTML <input> tag but type
attribute is set to radio. Name attribute value must be same for all controls.
<form> Output:
Select Status: <br>
<input type="radio" name="status" value="Married ">
Married
<input type="radio" name="status" value="Un-
Married"> Un-Married
</form>

3) Pull-Down Menus Control :

Pull-down menus are great tools to use when you want users to respond with one specific
answer.

<B>Select a fruit:</B> <BR> Output:

<SELECT NAME="Fruit"> Select a fruit:
<OPTION SELECTED> Apples
<OPTION> Bananas
<OPTION> Oranges
</SELECT>
 e) Write a program on Frames with rows.
Ans:
Program to demonstrate frames divided in rows: This will produce following result:
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="top_frame.html" />
<frame name="main" src="main_frame.html" />
<frame name="bottom" src="bottom_frame.html" />
<noframe>
<body>
Your browser does not support frames.
</body>
</noframe>
</frameset>
</html>

Q .5 Write shot note on any THREE of the following (5 Marks each) (15)
a) Text level Element.
Ans:

1) Bold - <b>Text</b>
The text in between the tags will be bold, and stand out against text around it, the same as in a word processor.
Place the bold tag inside other elements to highlight important words and give feeling to your text.
You may also use it to separate words from their meaning in a dictionary fashion.
<p><b>Cardio:</b> Latin word meaning of the heart.</p>
Output:
Cardio: Latin word meaning of the heart.

The idea here is to use the bold tag in quick formatting situations. It is not a good idea to bold entire
paragraphs or other elements simply because you want the text to be larger or fatter.

2) Italic - <i>Text</i>
Also working the same way as a word processor, italics display the text at a slight angle. This tag is used to
make text cursive or running and you can use <i> tag in paragraph. You can make note, comment of author
 in website etc using this tag.
<p><b>Cardio:</b> <i>Latin word meaning of the heart.</i></p>
Output: Cardio: Latin word meaning of the heart.

3) Underline - <u>Text</u>
Again, the same as underline in a word processor. If you want to make text underlined and considered to
important then you have to use this tag.
<u><h1>Introduction of
HTML:</h1></u> Output:
Introduction of HTML:
Note that html links are already underlined and don't need the extra tag.

4) Superscript - ^Text
Superscript refer to text that are positioned slightly higher the text on the line. For example, a footnote or
endnote number reference is an example of superscript.
12 ^th or 3 ^rd or E=
mc² Output: 12th or 3rd or E=mc2

5) Subscript - _Text
Subscript refer to numbers that are positioned slightly lower than the text on the line. For example, a scientific
formula might use subscript text.
O₂
Output: O2

6) Strikethrough - <strike>Text</strike>
Puts a line right through the center of the text, crossing it out. Often used to show that text is old and no longer
relevant. Also works by using <s></s> instead.
EX: This is <strike>Deleted</strike> text and now <s>no longer</s> used.
Output: This is Deleted text and now no longer used.

7) Center - <center>Text</center>
A useful tag, as it says, it makes text, image, table, everything in between the tags centered (in the
middle of the page).

8) Mark - <mark>Text</mark>
This is a tag which appear text highlighted means this text will appear with background yellow color.
EX: <mark>This text will highlighted with yellow background
color.</mark> Output: This text will highlighted with yellow
background color.
 b) Varibles in Javascript.
Ans:

JavaScript Variables:

Like many other programming languages, JavaScript has variables. Variables can be thought of as named
containers. You can place data into these containers and then refer to the data simply by naming the container.
- Before you use a variable in a JavaScript program, you must declare it. Variables are declared
with the var keyword as follows.
- Storing a value in a variable is called variable initialization. You can do variable initialization at
the time of variable creation or at a later point in time when you need that variable.
- For instance, you might create variable named money and assign the value 100 to it. Later, for
another variable, you can assign a value with any alphabet name like Suraj.

<script type="text/javascript"> var

money=100;
var name=”Suraj”;
</script>

Example program to display calculated value for variable z:

<html>
<title>Addition Using JavaScript</title>
<body>
<p>Output of variable z is as follows</p>

<script type="text/javascript" language="javascript">

var x = 5; var y =
6; var z = x + y;
document.write(z);
</script>
</body>
</html>
c) Website.
Ans:
Website:

Definition: “Website is a collection of interlinked and interrelated webpages that

can access throughout the internet (www).”
 A website is collection of more than one web page. Each website has its own address known as URL.
For example, http://www.example.com/home.html
 When someone gives you their web address, it generally wants to takes you to their website's home
page, which should introduce you to what that site offers in terms of information or other services.

 Why Do People Visit Websites?

Generally, people look at websites for two primary reasons:

1. To find information: Now a day people used internet for getting information about anything, someone
wants to read news, watching knowledgeable videos, to know something new.

2. To complete a task: This means doing work on internet such as, email, purchasing online product, filling
scholarship form, online booking, creating online account in any website.

 Websites have many functions; a website can be a personal website, a commercial website, a
government website or a non-profit organization website. Websites can be the work of an individual,
a business or other organization, and are typically dedicated to a particular topic or purpose.
 A website is stored on a computer system known as a web server, also called as HTTP server.

Types of website:
1 Static Website: Static websites contain static text that is displayed on the screen; it just shows data
content but does not calculate or processed depending upon user input. It has basic presentation and no
database. Ex: College

2 Dynamic Website: A dynamic website changes or customizes itself behavior frequently and automatically
such as user registration form, login form, online shopping websites, Interactive database oriented e-
commerce websites, web-banking websites.

Ex: google.com, facebook.com, youtube.com, amazon.in, snapdeal.com, flipkart.com etc.

Website has .html file extension. For example, the file name "Home.html".
 d) Embedded CSS.
Ans:
Embedded CSS Styles:
- Embedded style always used inside <HEAD> tag, for using embedded css you have to use <style> tag inside
<head> tag, then insert css code in to <style> tag.
- This type of css applies for complete webpage and for all tags, suppose you write a css code for h1, h2, p tag
then all h1, h2 and p tags are available inside that web page are applied by css effect.
- Embedded css is easy way to apply designing for all tags with short and one time written code. That means you
have to write only once as css code in style tag and it applies for all tags so it’s a short cut method to write
designing code.
- Suppose after developing a web page, customer wants to make changes as like color of a h1 then you can easily
change the code of css and fulfill the requirement of customer.

e) Input Output Statements In Javascript.

Ans:
 JavaScript Input Statements:
There are two types of input statements.
1) Html FORM Control
<input type="text" id="userInput">give me input</input>
For input purpose we used html form control i.e input control.
 2) Document.getElementById("userInput").value;
This statement is basically used for to take input from user in javascript variable.

Syntax: var userInput = document.getElementById("userInput").value;

Note: userInput is a valid JavaScript variable, for understanding with example please look out
below program.

 JavaScript Output Statements:

There are two commonly used output statements in javascript:

1) Document.write("any string message" or variable name);

In above variable scope example this statement is used to display value of variable a.

2) Document.getElementById("demo").innerHTML = "any string message";

Example:

<html>
<head>
<title>Take Input from User and Give Output to User</title>
</head>
<body>
<input type="text" id="userInput">give me input</input>
<button onclick="test()">Submit</button>
<script type="text/javascript" language="javascript"> function test()
{
var uservalue= document.getElementById("userInput").value;
document.write(uservalue);
}
</script>
</body>
</html>