A.I/MATHS/PHYSICS/STAT/MULTI/D.

WEB

admin
[Link]
DEGREE COLLEGE GUNTUR
A

UNIT I

Internet Language, Understanding HTML, HTML document structure, Create a Web Page, Publishing
HTML Pages, Tags in HTML, title tag, Text Alignment tags, Text Formatting tags, heading tags, horizontal
rule tag, paragraph tag, break [Link] Lists - Ordered List, Unordered List & Definition List – Using
colors – Using Images

UNIT II

Horizontal Rule Tag - HTML Tables – Nested Tables - Hyperlinks: Textual, Graphical Links to sections –
Multimedia Objects – Frames – Nested Frames – Forms – Form Controls: textbox, password, checkbox,
radio button, select, text area - Processing of forms

UNIT III

JavaScript- Introduction, simple programming, Obtaining User Input with prompt Dialogs, Operators
(arithmetic, Decision making, assignment, logical, increment and decrement) Control Structures - if…
else selection statement, while, do… while repetitions statement, for statement, switch statement,
break and continue statements.

UNIT IV

Functions – program modules in JavaScript, programmer defined functions, function definition, scope
rules, global functions, and recursion JavaScript: Arrays, declaring arrays, accessing elements of an array.

UNIT V

Cascading Style Sheets: Introduction – Using Styles: As an attribute, tag & external file –Defining your
own styles Properties and values: properties related to Fonts, Backgrounds & colors, text, boxes &
borders Formatting blocks of information: Classes - Divisions – Spans - Layers with suitable examples.
Q) EXPLAIN INTERNET LANGUAGE ?

"Internet Language" refers to a style of communication that has evolved uniquely in online
communities. It's a blend of words, symbols, and cultural references that convey emotions, ideas,
and humor efficiently. Here are some key elements:

1. Abbreviations and Acronyms

• Shortened forms make typing faster and more casual:

o LOL: Laugh Out Loud
o BRB: Be Right Back
o BTW: By The Way
o IDK: I Don’t Know

2. Emoticons and Emojis

• Emoticons: Text-based symbols expressing emotions, like :-) for a smile or :( for a
frown.
• Emojis: Colorful symbols representing emotions, objects, and ideas ( , , ). They
add tone and context, which can be difficult to convey in text alone.

3. Memes

• Memes are images, videos, or phrases with cultural or humorous significance. They are
often shared, remixed, and adapted, creating in-jokes within communities.

4. Leetspeak (1337)

• Leetspeak is a playful way of writing words with numbers and symbols, popular in
hacker culture and gaming communities. For example, "leet" is written as "1337" by
replacing letters with numbers that resemble them.

5. Shorthand Expressions

• Internet users often type in shorthand to save time:

o AFK: Away From Keyboard
o DM: Direct Message
o FOMO: Fear Of Missing Out

6. Typing Quirks
 • Some users type in all lowercase for a casual, understated feel or use deliberate
misspellings like "thx" for "thanks" or "u" for "you."

7. Reaction GIFs and Images

• Reaction GIFs or short animations express emotions or reactions visually. For instance, a
GIF of someone laughing can be used instead of typing "LOL."

8. Hashtags and Trends

• Hashtags (e.g., #TBT for "Throwback Thursday") organize topics and start conversations
across social media. They allow users to join trending topics and stay connected to
community discussions.

9. Mock Syntax for Tone

• Mock syntax includes asterisks for actions (e.g., sigh), or ALL CAPS and repeated
letters for emphasis (e.g., "NOOOO!"). These add a layer of personality or tone.

10. Platform-Specific Jargon

• Each platform has its own language style; for example:

o Reddit: Users might use terms like "TL;DR" (Too Long; Didn't Read) or "OP"
(Original Poster).
o Twitter/X: RT (Retweet), #hashtags, and character limits shape its own unique
style.

Q. Briefly outline the early history of the World Wide Web.

HTML is a method of describing the format of documents which allows then to be

viewed on computer screens. HTML documents are displayed by web browsers, programs
which can navigate across networks and display wide variety of types of information. HTML
pages can be developed to be simple text or to be complex multimedia containing sound,
moving images, virtual reality and Java applets.

The Internet is a global phenomenon which can provide documents from servers
across the world to browser clients which can be in any location. Finally HTML is not really
very complicated although the creators of WYSIWYG (what you see is what you get)
authoring tools would like you to think that it is.

HTML was developed by Tim Berners Lee. He worked at CERN the European center
for practical physics. HTML is an application of something called SGML (standardized general
markup language). In 1960’s Charles Gold Farb, Adward Mosher and Raymond Lorie
at IBM created a general markup language.

In 1970’s the use of SGML in US department of Defense the DOD being swamped
by electronic documentation.

1978 ANSI setup a committee to investigate a text processing languages. In 1980

the first draft of SGML was released and after a series of reviews and revisions became
standard in 1985.

HTML standards are created by group of interested organizations and

individuals called W3C. in 1994 HTML 2.0 version is released. HTML 3.2 version was
released in 1996. HTML 4.0 version released at end of 1997.

Q)How to create a HTML document and execute ?

1 open a text editor start->run->notepad

2 Type the html code in a blank text file

3 save the file by selecting the required drive and folder with html or htm extention

4 double click on the selected file

Or

1 open the default browser application and selected the file->open

2 select browser and give the filename and destination->ok

Q. What are the HTML tags? How do the tags that switch a format on differ from
those which switch it off?

Any formatted text document is composed of a set of elements such as paragraphs,

headings, and lists. Each element has to be surrounded by control information which tells
the presentation or printing software when to switch on a piece of formatting and when to
switch it off.

In HTML formatting is specified by using tags. The tags is format name surrounded
by angle brackets (< >). End tags which switch a format off also contain forward slash.
HTML tags can be 2 types. 1 paired tags <i> </i> 2) unpaired tags
<br>,<hr> these tags does not required any companion tag.

1. They are not case sensitive. <head> <HEAD> <hEAd>

2. Tags are delimited by angular brackets. <h1>
3. Some characters have to be replaced in the text by escape sequences.
4. White space, tabs, and new lines are ignored by the browser. They can be
used to make the HTML source more readable with out affecting the way
that the page is displayed.

Features of HTML

1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make effective presentation with HTML because it has a lot of
formatting tags.

3) It is a markup language so it provides a flexible way to design web pages along with the
text.

4) It facilitates programmers to add link on the web pages (by html anchor tag) , so it
enhances the interest

of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows,

Linux and

Macintosh etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more

attractive and interactive.

Advantages of HTML:

1. First advantage it is widely used.

2. Every browser supports HTML language.

3. Easy to learn and use.

4. It is by default in every window so you don't need to purchase extra software.

Disadvantages of HTML:

1. It can create only static and plain pages so if we need dynamic pages then HTML is not
useful.
2. Need to write lot of code for making simple webpage.

3. Security features are not good in HTML.

4. If we need to write long code for making a webpage then it produces some complexity

Q. Explain structure of HTML document.

<html>

<head>

<title> Simple HTML page </title>

</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>

• The text between <html> and </html> describes the web page
• The text between <title> and </title> describes the title of your document. The title
is displayed in your browser’s caption.
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a heading
• The text between <p> and </p> is displayed as a paragraph

The BODY element contains the document content, i.e. the information that is shown in the
browser's window.

BODY immediately follows the HEAD.

BODY takes a number of attributes for specifying the background and colors of the
document on visual browsers.

Syntax:

<BODY
TEXT="color"
BGCOLOR="color"
BACKGROUND="URI"
LINK="color"
 ALINK="color"
VLINK="color"

Height/width

Scroll

Right/left>
.....
</BODY>

Attribute Description

TEXT="color" Specifies the text color for the document.

BGCOLOR="color" Specifies the background color for the document.

BACKGROUND="URI" Specifies the URI of background image for the document.

LINK="color" Specifies the link color for the document.

VLINK="color" Specifies the visited link color for the [Link] color

Specifies the active link color for the [Link] color

ALINK="color"

Q. How is a comment show in HTML?

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the
browser. You can use comments to explain your code, which can help you when you edit the source code at a later
date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
The purpose of comments is:

1. Name of the Application.

2. Name of the Author.
3. Description of the purpose of the code in the file.
4. Version number.
 5. Copy rights information.

Q. What is the difference between <title> </title> and <h1> </h1> tags.

If you align a paragraph either to right or center of the screen always specify that
the next paragraph is aligned to the left. Not all browsers automatically return to the default
value.

<h1 [align = “left” | “center” | “right”] > </h1>

In fact HTML has 6 levels of headings starting from <h1> to <h6>. The largest
heading is <h1> which should be used for main titles often these will be the same as the
title of the document as given in the <head> section of the page. Use <h2> and <h3> for
sub sessions of the document.

Syntax:

<h1 [align=”left” | “center” | “right”]>....... </h1>

<h2 [align=”left” | “center” | “right”]>....... </h2>

<h3 [align=”left” | “center” | “right”]>....... </h3>

<h4 [align=”left” | “center” | “right”]>....... </h4>

<h5 [align=”left” | “center” | “right”]>....... </h5>

<h6 [align=”left” | “center” | “right”]>....... </h6>

<title> tag is used in all HTML documents have just one title which is displayed at
the top of the browser window.

Q. Explain paragraph tag? And <hr> tag?

HTML Horizontal line tag (<hr>):

<hr [align=”left” | “center” | “right”] [size=”n”] [noshade] [width=”nn %”]>

<P ALIGN="left"|"center"|"right">
.....
</P>

The end tag for P is optional when the paragraph is followed by another paragraph. If </P>
is omitted, the paragraph is not followed by a blank line.

Q) HOW TO CREATE A WEB PAGE ?

Creating a simple web page involves writing HTML (HyperText Markup Language) and CSS
(Cascading Style Sheets). HTML provides the structure and content, while CSS handles the
styling. Here’s a step-by-step guide to creating a basic web page:

1. Set Up Your Development Environment

• Text Editor: You can use any text editor like Visual Studio Code, Sublime Text, Atom,
or Notepad++.
• Browser: To preview your web page, use any modern web browser (like Chrome,
Firefox, or Edge).

2. Create a Basic HTML File

• Create a new file and name it [Link]. The .html extension tells the computer that
this is an HTML document.

3. Write the HTML Structure

• Open [Link] in your text editor and add the following basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<p>This is a simple web page created with HTML and CSS.</p>
</header>

<main>
<section>
<h2>About Me</h2>
<p>This is a short paragraph about me. I love coding and creating
new things on the web!</p>
</section>
 <section>
<h2>My Interests</h2>
<ul>
<li>Programming</li>
<li>Web Design</li>
<li>Traveling</li>
</ul>
</section>
</main>

<footer>
<p>&copy; 2023 My Web Page</p>
</footer>
</body>
</html>

4. Add CSS for Styling

• Create another file named [Link] in the same folder as your HTML file. Add some
CSS to style your page:

/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body Styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f9;
color: #333;
margin: 20px;
}

/* Header Styling */
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}

/* Main Content Styling */

main {
margin: 20px 0;
}

section {
margin-bottom: 20px;
}
h2 {
color: #333;
margin-bottom: 10px;
}

/* Footer Styling */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}

5. Link the CSS File to the HTML

• Make sure the CSS file is linked in the <head> section of your HTML document:

<link rel="stylesheet" href="[Link]">

6. Open the HTML File in Your Browser

• Locate [Link] in your file explorer, right-click on it, and open it in a browser. You
should see your basic web page with HTML content styled by CSS.

7. Experiment and Build on It

• Try adding more HTML elements (like images, tables, or links) and styling them with
CSS. Experiment with color schemes, fonts, and layouts!

This approach introduces the essentials for creating a simple static web page. For interactive or
dynamic content, you can eventually add JavaScript.

Q) HOW TO Publishing HTML Pages

Publishing HTML pages online allows anyone to access your web page via a web browser.
Here’s a step-by-step guide to publishing your HTML pages:

1. Choose a Web Hosting Service

• Free Hosting Options: Good for beginners, includes GitHub Pages, Netlify, and
Firebase.
• Paid Hosting Options: Offers more control and customization, includes Bluehost,
HostGator, or SiteGround.
• Static Site Hosts: Services like GitHub Pages, Netlify, or Vercel are particularly good
for HTML/CSS/JavaScript projects and are often free for basic use.
2. Prepare Your Files

• Make sure all your files are in a single folder with a clear structure. For example:

my-website/
├── [Link]
├── [Link]
├── [Link]
└── images/

3. Upload Your Files to a Hosting Service

Depending on your hosting service, here’s how to upload your files:

Option A: GitHub Pages (Free for Public Repositories)

1. Sign up for a GitHub account.

2. Create a new repository and name it something like "my-website."
3. Upload your HTML, CSS, JavaScript, and other files to the repository.
4. Go to the repository settings, scroll to GitHub Pages, and select the main branch as the
source for GitHub Pages.
5. GitHub will publish your page at [Link]

Option B: Netlify (Free for Basic Use)

1. Sign up for a Netlify account.

2. Click on Add new site and select Deploy manually if you want to drag and drop your
files.
3. Upload the folder containing your HTML files.
4. Netlify will provide a link to your live site.

Option C: Using a Paid Hosting Service

1. Sign up for a paid hosting service and choose a domain name (or use one they provide).
2. Access the cPanel or FTP option to upload your files.
3. Upload your files to the public_html directory.
4. Your site will be available at your domain (e.g., [Link]

4. Use FTP to Upload Files (If Required)

• FTP (File Transfer Protocol) is a way to manually upload files to a server. You can use
software like FileZilla to connect to your host:
o Open FileZilla, enter the FTP details (provided by your hosting provider), and log
in.
o Drag your site files into the public_html directory on the server.

5. Check Your Website

 • Once published, go to your site’s URL to make sure it displays correctly.
• Test it on different devices and browsers to ensure it looks good everywhere.

6. Update Your Content

• Anytime you want to make changes, just edit the files locally and upload them again to
replace the old files.
• GitHub Pages and Netlify update your live site every time you commit changes, making
it easy to maintain.

This should get your HTML pages online and accessible to anyone with the link!

Q. Explain formatting on HTML page .or text formating

The actual font is used can be changed to attempt to force the browser to
use a specific font and look on the text can be changed for emphasis.

<FONT
COLOR="color"
FACE="font_name"
SIZE="size">
.....
</FONT>

Attribute Description

COLOR="color" Specifies the color of the font.

FACE="font_name" Specifies the font name or list of font names.

Specifies the size of the font. The size is:

number from 1 to 7 (absolute size, e.g. SIZE=6)

SIZE="size"
-OR-
+ or - followed by number (relative size, e.g.
SIZE="+3" or SIZE="-2").

Example 1

Write the following text:

SIZE=1
SIZE=4
SIZE=7

<HTML>
<HEAD>
</HEAD>
<BODY>
<BASEFONT SIZE=1>SIZE=1
<BR>
<BASEFONT SIZE=4>SIZE=4
<BR>
<BASEFONT SIZE=7>SIZE=7
</BODY>
</HTML>
Q) Explain Some more text formatting tags are
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<ubr>,<center>,<strong>,<tt>,<marquee>,<hr>
<strike>,<sup>,<sub>,<blink>,<bgsound>,<big>,<em>

Q. Explain <br> tag and <pre> tag and explain about escape
sequence characters.
<br> tag forces a line break within a passage of a text where a paragraph
is not desirable.
Inside a <pre> tag the text is only wrapped when the source has a line
break and tabs or multiple white spaces are not converted to a single space.

&amt; &lt; &gt; &quot; &nbsp; &copy;

 These are character escape sequence which are required if you want to
display characters that HTML uses as control sequence.

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#180;
< less than &lt; &#60;
> greater than &gt; &#62;
& Ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &acute; &#39;

Example 6

Write the text inside PRE element in the following way:

<HTML>
<HEAD>
</HEAD>
<BODY>
<PRE>
This
is
a
preformatted
text.

Enter the text

the same way you see it.
</PRE>
</BODY>
</HTML>

3) html colors?
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX
HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity).

HTML supports 140 standard color names.

Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

4 HTML Quotation
The HTML <q> tag defines a short quotation.
<p>PYK's: <q>SUN GIVES 12 HOURS BUT KUMAR METERIALS GIVES
CHANGE YOUR LIFE.</q></p>

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",

"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address,

phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.
Example
<address>
[Link].<br>
Visit us at:<br>
[Link]<br>
GUNTUR<br>
A.P
</address>

Q) EXPLAIN IMAGES IN HTML?

 Images are second aspect of pleasant web experience. Browsers display a
limited range of image types.

Two types of image files are commonly used:

---> .GIF - short for Graphics Interchange Format and pronounced jiff or giff
(hard g);
---> .JPEG - short for Joint Photographic Experts Group and pronounced jay-
peg.

GIF supports color and various resolutions. It also includes data compression,
making it especially effective for scanned photos.

JPEG is a lossy compression technique (data compression technique in which

unnecessary information is eliminated) for color images. Although it can reduce
files sizes to about 5% of their normal size, some detail is lost in the
compression.

<IMG
ALIGN="left"|"right"|"top"|"middle"|"bottom"
ALT="text"
BORDER="pixels"
HEIGHT="height"
WIDTH="width"
HSPACE="pixels"
VSPACE="pixels"
SRC="URI">

IMG has no end tag.

Attributes
Attribute Description

Specifies the position of the image with respect to the

"left"
surrounding content.
"right"
ALIGN= "top"
left - the image is placed at the left margin and
"middle"
content flows around it;
"bottom"
 Attribute Description

right - the image is placed at the right margin and

content flows around it;

top - the image is placed within a row of text and

breaks it. The row "goes through" the top end of the
image;

middle - the image is placed within a row of text and

breaks it. The row "goes through" the middle of the
image;

bottom - the image is placed within a row of text and

breaks it. The row "goes through" the bottom end of
the image;

Specifies the alternate text for those not loading

ALT="text"
images.

BORDER="pixels" Specifies the width of the image's border.

Specifies the height of the image as:

pixels - (e.g. HEIGHT="20");

HEIGHT="height" -OR-
percentage of window height - (e.g. HEIGHT="30%").

If omitted the image is shown in its original height.

Specifies the width of the image as:

pixels - (e.g. WIDTH="20");

WIDTH="width" -OR-
percentage of window width - (e.g. WIDTH="30%").

If omitted the image is shown in its original width.

HSPACE="pixels" Specifies the horizontal gutters around the image.

VSPACE="pixels" Specifies the vertical gutters around the image.

 Attribute Description

SRC="URI" Specifies the URI of the image.

Example:

<HTML>
<HEAD> </HEAD>
<BODY> This is a text that can be replaced by any sequence of symbols.
<IMG SRC="[Link]" WIDTH="80" HEIGHT="80" BORDER="2"
ALIGN="left">
If you type sequences of symbols, don't forget to leave spaces between
"words".
</BODY>
</HTML>

Q) EXPLAIN LISTS IN HTML?

One of the most effective ways of structuring a web site or its contents is to use
lists. List may be for something as simple as supplying a piece of information
or providing a straight forward index to the site, but could become highly
complex. HTML provides three types of lists.
1. Basic bulleted list.
2. Numbered list.
3. Definition list.
Most flexible is definition list.

Ordered Lists:
The OL element defines an ordered list. The element contains one or
more LI elements that define the actual items of the list.

Syntax
<OL
START="number"
TYPE="A"|"a"|"I"|"i"|"1">
.....
</OL>

Attribute Description
 START="number" Specifies the starting number of the list.

Specifies the numbering style of the list.

"A"
"a" A - uppercase alphabetic;
TYPE= "I" a - lowercase alphabetic;
"i" I - uppercase Roman numerals;
"1" i - lowercase Roman numerals;
1 - decimal numbers. Used by default.

Un ordered Lists:
The UL element defines an unordered list. The element contains one or
more LI elements that define the actual items of the list.

Syntax
<UL TYPE="disc"|"circle"|square">
.....
</UL>

Attributes
Attribute Description

Specifies the style of bullets preceding list items.

"disc"
TYPE= "circle" • disc - a filled-in circle;
"square" o circle - a circle outline;
▪ square - a square;

List Items
The LI element defines a list item. The element must be contained within
OL or UL.

Syntax
<LI
TYPE="disc"|"circle"|"square"|"A"|"a"|"I"|"i"|"1"
VALUE="number" >
.....
</LI>

The end tag </LI> may be omitted.

Attributes
Attribute Description

Specifies the style of list item marker.

"disc"
"circle" disc - a filled-in circle;
"square" circle - a circle outline;
"A" square - a square;
TYPE=
"a" A - uppercase alphabetic;
"I" a - lowercase alphabetic;
"i" I - uppercase Roman numerals;
"1" i - lowercase Roman numerals;
1 - decimal numbers.

Specifies the number of LI when used with an OL.

VALUE="number" VALUE allows changes in the sequence number of
LI.

Definition Lists
A definition list is not a list of items. This is a list of terms and
explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts
with the <dt> tag. Each definition-list definition starts with the <dd> tag.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs,
line breaks, images, links, other lists, etc.
Example: creating an ordered list.
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL START="1" TYPE="1">
<LI>Math's</LI>
<LI>Chemistry</LI>
<LI>Biology</LI>
<LI>Geography</LI>
</OL>
</BODY>
</HTML>

Example: Creating an unordered list.

Define the following list:

• Rivers
• Seas
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL TYPE="disc">
<LI>Rivers</LI>
<LI>Seas</LI>
</UL>
</BODY>
</HTML>

Q) HTML <hr> Tag

Use the <hr> tag to define thematic changes in the content:

<!DOCTYPE html>

<html>
<body>

<p>A normal horizontal line:</p>

<hr>

<p>With CSS:</p>

<hr style="height:9px;border-width:5;color:BLUE;background-color:RED">

</body>

</html>

UNIT-II
Q) EXPLAIN TABLES IN HTML?
Tables have two uses. Structuring piece of information and structuring the
whole web page.

<TABLE
ALIGN="left"|"center|"right"
BGCOLOR="color"
BORDER="pixels"
CELLPADDING="pixels"
CELLSPACING="pixels"
HEIGHT="height"
WIDTH="width">
 .....
</TABLE>

Attributes
Attribute Description

"left"
Specifies the horizontal alignment of the table.
ALIGN= "center"
The default is left.
"right"

Specifies the background color of table cells. The

background color of specific cells may differ if
BGCOLOR="color"
specified by attribute BGCOLOR of elements TR,
TH and TD.

Specifies the width of border around the table. If

BORDER="pixels"
omitted the table has no border.

Specifies the spacing within cells i.e. between the

CELLPADDING="pixels" cell border and cell contents. Default cell padding
is 1.

Specifies the spacing between cells of the table.

CELLSPACING="pixels"
Default cell spacing is 2.

Specifies the table height as:

pixels - (e.g. HEIGHT="60");

HEIGHT="height"
-OR-
percentage of window height - (e.g.
HEIGHT="20%").

Specifies the table width as:

pixels - (e.g. WIDTH="60");

WIDTH="width"
-OR-
percentage of window width - (e.g.
WIDTH="20%").

Table elements:
Tables are defined with the <table> tag. A table is divided into rows (with the
<tr> tag), and each row is divided into data cells (with the <td> tag). The letters
td stands for "table data," which is the content of a data cell.<caption> provide
a visual caption for the table.<thead> logically groups header elements in a
table.<tbody> logically groups elements that make the body of the table
content.<tfoot> logically groups elements that comprise the footer area of
tables content. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.

<table border="1">
<tr>
<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>

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Example:

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE ALIGN="center" BORDER="2" BGCOLOR="red" CELLPADDING="5"
CELLSPACING="0">
<CAPTION><B>Table</B></CAPTION>
<TR ALIGN="center">
<TH COLSPAN="2">School</TH>
</TR>
<TR ALIGN="center" BGCOLOR="green">
<TH BGCOLOR="aqua">Name of student</TH>
<TH>Grade</TH>
</TR>
 <TR ALIGN="left" BGCOLOR="yellow">
<TD>Steve</TD>
<TD>K-11</TD>
</TR>
<TR ALIGN="right">
<TD>Peter</TD>
<TD>K-12</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Colspan: This is used to merge the selected number of columns in the given
row.
Example:
<table border=5 cellpadding=10 cellspacing=10>
<tr><th colspan=3>tic tac toe</th></tr>
<tr><td>x<td>0<td>x</tr>
<tr><td>x<td>0<td>x</tr>
<tr><td>x<td>0<td>x</tr>
<table>

Rowspan: The rowspan attribute works in the same way as colspan.

It combines multiple vertical cells and display he content in horizontal format.

<table border=5 cellpadding=10 cellspacing=10>

<tr><th rowspan=3>tic tac toe</th>
<td>x<td>0<td>x</tr>
<tr><td>x<td>0<td>x</tr>
<tr><td>x<td>0<td>x</tr>
<table>

Q. Explain Hyper [Link] Relative paths

The powerful and flexible of HTML comes from the simple method it uses to link
documents together. Links should be used freely within documents where they either added
to the understanding of the work or can be used to reduce download times.

HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and
the words between the open and close of the anchor tag will be displayed as a hyperlink. url means uniform resource
locator.

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:

<a href="[Link]
target="_blank">Visit students blogs!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that
can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is
looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to
use.

The line below defines a named anchor:

<a name="tips">Useful Tips Section</a>
You should notice that a named anchor is not displayed in a special way.
To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="[Link]
Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Attribute Description

HREF="URI" Specifies the hypertext reference for the link.

NAME="name" Specifies the destination for the link.

 Specifies the name of the frame, in which the link should be
rendered. If no frame with such a name exists, the link is
rendered in a new window.
Special frame names begin with an underscore:

_blank renders the link in a new, unnamed window;

TARGET="name"

_parent renders the link in the immediate FRAMESET parent;

_self renders the link in the current frame;

_top renders the link in the full, unframed window.

Relative path url: this is used if the file is located in the same folder where the html
document is stored

<a href=”[Link]”> clidk here to view the content</a>

Absolute path url:

This is used if the file is located on a remote site outside the folder that contains the html
document.

Eg:

<a href=”c:\sairam\[Link]”>click here to view</a>

Example:

Define the following list, in which items are links to files: [Link], [Link],
[Link], [Link]
Use relative URI's.

<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<B>HTML TUTORIAL</B><BR>
<LI><A HREF="[Link]">Lesson1</A></LI>
<LI><A HREF="[Link]">Lesson2</A></LI>
<LI><A HREF="[Link]">Lesson3</A></LI>
<LI><A HREF="[Link]">Lesson4</A></LI>
</UL>
</BODY>
</HTML>

Example:

Define two links to files [Link] and [Link], and one to the non-existing file
[Link]

Lesson8
Lesson9
Lesson10

Use the BODY attributes to define colors for links, visited links and active link.

<HTML>
<HEAD>
</HEAD>
<BODY LINK="purple" VLINK="blue" ALINK="red">
<A HREF="[Link]">Lesson8</A>
<BR>
<A HREF="[Link]">Lesson9</A>
<BR>
<A HREF="[Link]">Lesson10</A>
<BR>
</BODY>
</HTML>

Q) Explain types of Hyperlinks?

There are four types

of hyperlinks.

• Text hyperlink – Uses a word or phrase to take visitors to another page,

file or document.

• Image hyperlink – Uses an image to take visitors to another page, file or

document.

• Bookmark hyperlink – Uses text or an image to take visitors to another

part of a web page.

• E-mail hyperlink – Allows visitors to send an e-mail message to the

displayed e-mail address.

When adding a text or image hyperlink that moves off your site, have it open in a new
window. This allows visitors to easily come back to your site without having to use the back
button on their browser. Text or image hyperlinks can also be used to move between pages
within a site.

EXPLAIN ROLE OF MULTIMEDIA OBJECTS IN WEB PAGES

MULTIMEDIA is every thing you can hear or see.

(text, books, music, sounds, videos, dvd's etc) multimedia comes in many
different formats in web pages.
multimedia elements are stored in media files picture formats like .gif, .jpg
ex:- 1) <object height ="100%" width="100%"
type ="image/jpeg" data ="[Link]">
</object>
The easiest way to add video or sound to the web site to include the special
html tag called <embed>.
2) <embed src=”[Link]”width=”100%”height=”60”>
<noembed><img src=”[Link]”></noembed>
</embed>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
videos stored in the real video format have the extension .rm or .ram
WMA (windows media audio) format is on audio format developed by
Microsoft.
WMV (windows media video) developed by Microsoft.
Format File Description
AVI .avi AVI (Audio Video Interleave) was developed by Microsoft,
and is therefore playable on all Windows computers. It
is commonly used in video cameras and TV hardware,
but is difficult to play on non-Windows computers.
WMV .wmv WMV (Windows Media Video) was developed by
Microsoft, and is therefore playable on all Windows
computers. It is commonly used in video cameras and
by TV hardware, but is difficult to play on non-Windows
computers.
QuickTime .mov QuickTime was developed by Apple, and is therefore
playable on all Apple computers. It is commonly used in
video cameras and by TV hardware, but is difficult to
play on non-Apple computers.
RealVideo .rm RealVideo was developed by Real Media to allow video
.ram streaming with low bandwidths. It is still used for online
video and Internet TV, but because of the low bandwidth
priority, the quality is also low.
Flash .swf Flash was developed by Macromedia. Flash requires an
.flv extra component to play in a browser.
Ogg .ogg Theora Ogg was developed by the [Link] Foundation.
WebM .webm WebM is a project ([Link]) by the web
giants, Mozilla, Opera, Adobe, and Google.
MPEG .mpg MPEG, developed by the Moving Pictures Expert Group,
.mpeg used to be the most popular video format on the
Internet. It used to be supported by all major browsers,
but it is not supported by HTML5.
MPEG-4 .mp4 MP4 is the upcoming format on the internet. It is
or MP4 supported by all major browsers in HTML5. YouTube
recommends using MP4, and it is commonly used in
newer video cameras and TV hardware.
Q) Explain about Frames.
HTML frames allow authors to present documents in sub windows. Sub
windows provide a way to keep certain information visible, while other views
are scrolled or replaced.
For example, right now the browser window is divided on three sub windows.
The disadvantages of using frames are:
1 The web developer must keep track of more HTML documents
2 It is difficult to print the entire page
3 The users back button often does not work.
4 Frames often reduce the amount of usable space on the page.
5 It can’t link directly to a framed page.
6 Search engines don’t del with frames well
7 Broken frameset happens when the frames are not loaded or display
correctly
The FRAMESET element is a frame container for dividing a window into
rectangular subspaces called frames.

In a Frameset document, the outermost FRAMESET element takes the place of

BODY and immediately follows the HEAD.

The FRAMESET element contains one or more FRAMESET or FRAME elements,

along with an optional NOFRAMES element.

Syntax
<FRAMESET
COLS="list"
ROWS="list"
BORDER="pixels"
BORDERCOLOR="color"
FRAMEBORDER="yes"|"no"
FRAMESPACING="pixels">
.....
</FRAMESET>

Attributes
Attribute Description

Defines a comma-separated list of widths for

division of window on columns.

COLS="list" (For example, to divide the window on two

columns 20% and 80% width, write
COLS=(20%,80%) or COLS=(20%,*). The asterisk
* replaces the remaining percentage to 100%.)

ROWS="list" Specifies the comma-separated list of heights for

 Attribute Description

division of window on rows.

(For example, to divide the window on two rows

20% and 80% height, write ROWS=(20%,80%) or
ROWS=(20%,*). The asterisk * replaces the
remaining percentage to 100%.)

BORDER="pixels" Specifies the border width around frames.

Specifies the border color around frames. If

BORDERCOLOR="color"
omitted, the default color is gray.

Specifies whether or not the frames have a

visible border. If FRAMEBORDER="yes" the
"yes"
FRAMEBORDER= space between frames is filled with
"no"
BORDERCOLOR, if FRAMEBORDER="no" the
space between frames is left blank (white color).

FRAMESPACING="pixels" Specifies the space between frames.

Note: The attribute FRAMESPACING overrides the attribute BORDER, i.e. if

FRAMESPACING="20" and BORDER="0", the space between frames is 20
pixels.

The FRAME element defines a frame -- a rectangular subspace within a

Frameset document.

Each FRAME must be contained within a FRAMESET that defines the

dimensions of the frame.

Syntax
<FRAME
NAME="name"
MARGINHEIGHT="pixels"
MARGINWIDTH="pixels"
BORDERCOLOR="color"
FRAMEBORDER="yes"|"no"
NORESIZE
 SCROLLING="yes"|"no"|"auto"
SRC="URI">

Attributes
Attribute Description

Specifies the name of the frame for use with

NAME="name"
the TARGET attribute of A element.

Specifies the number of pixels to use as the

MARGINHEIGHT="pixels"
top/bottom margins, within the frame.

Specifies the number of pixels to use as the

MARGINWIDTH="pixels"
left/right margins, within the frame.

Specifies the border color around the frame.

If omitted, the default color is gray.
BORDERCOLOR="color"
. This attribute overrides the same attribute
of FRAMESET element.

Specifies whether or not the frame has a

visible border. If FRAMEBORDER="yes" the
"yes" space between the frame and all adjoining
FRAMEBORDER=
"no" frames is filled with BORDERCOLOR, if
FRAMEBORDER="no" the space is left blank
(white color).

NORESIZE Prevents the user from resizing the frame.

Specifies whether scrollbars are provided for

the frame.

yes - gives scrollbars at all times;

"yes"
SCROLLING= "no"
no - suppresses scrollbars--even when they
"auto"
are needed to see all the content;

auto - generates scrollbars only when

necessary (the default value).

Specifies the URI for the document to render

SRC="URI"
in the frame.
Example:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="40%,*">
<FRAME SRC="[Link]">
<FRAME SRC="[Link]">
</FRAMESET>
</HTML>

Example:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="40%,*" BORDER="10" BORDERCOLOR="red">
<FRAME SRC="[Link]" MARGINHEIGHT="50"
MARGINWIDTH="50">
<FRAME SRC="[Link]">
</FRAMESET>
</HTML>

Explain target frames?

A hyper link which loads a document in a frame is created , the file references
in the hyperlink will be opened and will replace the current document that is in
the frame. This is done by the name attribute of the <frame></frme> [Link]
name is one of the parameter.
Ex
<a href=”[Link]” target=”second”>kumar</a>
Here the file is called [Link] is loaded into the frame names [Link]
the hyper link clicked [Link](where is name is targeted location)
Q)EXPLAIN FORMS IN HTML?

The form can contain interface elements such as text fields, buttons,
checkboxes, radio buttons, and selection lists that let users enter text and
make choices, and then submit the form by clicking a "Submit" button.
The form can be submitted to a program on server or to an E-mail address.

Syntax:
<FORM ACTION="action" METHOD="GET"|"POST">
</FORM>

Attributes
Attribute Description

Specifies the action the browser have to take on

submit.
ACTION="action"
Action may be: URI of a program on server that
handles the form or [Link]

"GET"
METHOD= Specifies how the form input is sent to the server.
"POST"

The INPUT element defines a form control for the user to enter input.
INPUT must be contained within FORM.

Syntax
<INPUT
NAME="name"
SIZE="number"
TYPE="text|checkbox|radio|submit|reset"
VALUE="value"
CHECKED>

Attributes
Attribute Description
 Attribute Description

Specifies the name of the control. Attribute is

required, because data is sent as: name="value"
NAME="name"
The value is: entered text for text control; value of
VALUE attribute for radio and checkbox controls.

SIZE="number" Specifies the size of text control.

Specifies the type of the control.

text - provides a single-line text input field; Used

by default.
"text"
"checkbox"
checkbox - provides switch (square button)Which
TYPE= "radio"
is used for multiple selections
"submit"
radio - provides switch (radio button)it is circular
"reset"
format
“password” submit - defines a button for submitting the form;

reset - defines a button for resetting the form to its

initial values.

The value depends on the form control.

The VALUE attribute:

specifies the initial value for the text field;

VALUE="value"
provides the text of the button for reset and
submit controls;

gives the value of the control when it is checked

for radio and checkbox controls.

CHECKED Specifies

The SELECT element defines a form control for the multiple choice selection of
options on the screen.
SELECT must be contained within FORM.
Syntax

<SELECT
NAME="name"
SIZE="number"
MULTIPLE>
.....
</SELECT>

Attributes

Attribute Description

Specifies the name of the control. Attribute is

required, because data is sent as: name="value"
NAME="name"
The value is determined by VALUE attribute of the
selected OPTION.

SIZE="number" Specifies the number of visible options.

MULTIPLE Allows multiple selections.

The OPTION element defines a menu choice within a SELECT menu.

Syntax

<OPTION SELECTED VALUE="value">

.....
</OPTION>

Attributes
Attribute Description

SELECTED Defines the OPTION to be initially selected.

Specifies the value of the option, sent with the

VALUE="value" submitted form. In the absence of a VALUE attribute,
the value is the content of the OPTION element.

Element Text Area:

 The TEXTAREA element defines a form control for the user to enter
multi-line text input. TEXTAREA must be contained within FORM.

Syntax
<TEXTAREA
NAME="name"
COLS="number"
ROWS="number">
.....
</TEXTAREA>

Attributes

Attribute Description

Specifies the name of the control. Attribute is

NAME="name" required, because data is sent as: name="value"
The value is entered text.

COLS="number" Specifies the number of visible columns.

ROWS="number" Specifies the number of visible rows.

Example:

<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="[Link]
<H4>FORM</H4>
Enter your name here
<INPUT TYPE="text" NAME="var1" SIZE="30" VALUE="">
<BR><BR>
<B>Are you a student?</B>
<INPUT TYPE="checkbox" NAME="var2">
<BR><BR>
<B>How old are you?</B>
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15
<BR>
 <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25
<BR><BR>
<B>Where are you from?</B>
<BR>
<SELECT NAME="var6" SIZE="1">
<OPTION VALUE="BG">Bulgaria
<OPTION VALUE="UK">United Kingdom
<OPTION VALUE="USA" SELECTED>USA
</SELECT>
<BR><BR>
<B>Your comment:</B>
<BR>
<TEXTAREA NAME="var7" COLS="30" ROWS="6">
</TEXTAREA>
<BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Send">
<INPUT TYPE="reset" NAME="var5" VALUE="Clear">
</FORM>
</BODY>
</HTML>

UNIT III
Q) INTRODUCTION OF JAVA SCRIPT

JavaScript is a versatile, high-level programming language primarily used to make web pages
interactive and dynamic. Created in 1995 by Brendan Eich, it initially started as a small scripting
language to add simple effects to web pages, but it has since evolved into one of the most
important technologies of the web. Alongside HTML and CSS, JavaScript forms the foundation
of web development, enabling websites to be not just static displays of information but
interactive, responsive applications.

Key Features of JavaScript

1. Client-Side Scripting: JavaScript is commonly run directly in the user's browser,

meaning it executes on the client side (the user’s device), which helps reduce server load
and improves speed.
 2. Event-Driven Language: JavaScript responds to user interactions (clicks, keyboard
input, form submissions) in real-time, making websites more dynamic and user-friendly.
3. Dynamic Content and DOM Manipulation: JavaScript can interact with the Document
Object Model (DOM), which represents the HTML structure of a page. This allows it to
dynamically add, modify, or remove HTML and CSS elements, changing the content or
style of the web page without reloading.
4. Platform Independent: JavaScript is supported by all modern web browsers, making it
accessible to a wide audience across different devices and operating systems. No
additional software installation is needed to run JavaScript in the browser.
5. Lightweight and Flexible: JavaScript is designed to be simple to learn, yet flexible
enough to handle complex operations. It supports object-oriented, functional, and
imperative programming styles, giving developers multiple approaches to solving
problems.
6. Integration with Other Technologies: JavaScript can work in tandem with backend
technologies (like [Link] for server-side scripting) and integrates seamlessly with APIs,
JSON, and frameworks like React, Angular, and Vue.
7. Rich Ecosystem of Libraries and Frameworks: JavaScript has a vast ecosystem of
libraries and frameworks that provide pre-built solutions for tasks like animations, form
validation, and data fetching. Libraries like jQuery, and frameworks like React, have
become essential tools in modern web development.

How JavaScript Works

When you write JavaScript code in a .js file or inline within HTML, the browser’s JavaScript
engine (such as V8 in Chrome or SpiderMonkey in Firefox) interprets and executes the code.
This code can manipulate the content, structure, and appearance of the page by interacting with
the HTML and CSS.

Example of Basic JavaScript

Here’s a simple example to demonstrate JavaScript's ability to respond to a user action:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Welcome to JavaScript!</h1>
<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
alert("Hello! You clicked the button.");
 }
</script>
</body>
</html>

In this example:

• When the user clicks the "Click Me" button, the showMessage function runs, displaying an alert
with a message.

Modern Use of JavaScript

Today, JavaScript is not only used for front-end development but also on the server side through
[Link]. With frameworks like React, Angular, and Vue, JavaScript is central to building
single-page applications (SPAs), which allow users to interact with different views in a single
web page without reloading.

Why JavaScript Matters

JavaScript has become indispensable for modern web development due to its interactivity, speed,
and ease of use. Its ability to provide a seamless, engaging user experience makes it a key
technology in building applications that are fast, responsive, and feature-rich.

Whether you are building a simple interactive website or a full-scale web application, JavaScript
is an essential language to learn and use in web development.

Q. What are the key points that you need to apply in java script. Outline the
structure of java script program.

1. Each line of code is terminated by semicolon.

2. Functions have parameters which are passed inside parenthesis.
3. Variables are declared using the keyword var.
4. Blocks of code must be surrounded by a pair of curly brackets.
5. A block of code is a set of instructions that are to be executed together as a unit.
6. Script required neither main function nor an exit condition. These are major
differences between scripts and proper programs. Execution of scripts starts with the
first line of code and runs until there is no more code.

<html>

<head>

<script language="javascript">

<!--
function sai()

var major =parseInt([Link]);

var minor = parseFloat([Link]);

var agent = [Link]();

[Link]("<h1> details in sai </h1>");

[Link] ("agent = " + agent + "\n major = " + major);

function ram()

[Link]("Thanks for visiting");

-->

</script>

</head>

<body onLoad="sai()" onUnload="ram()">

</body>

</html>

Note: Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing
this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Just
add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last
JavaScript statement

Java Scripts in the body section will be executed WHILE the page loads.

Java Scripts in the head section will be executed when CALLED.

Q. What is the difference between a variable and value, how should variables be
named. How Variables used in java script.
 These are data items that you can manipulate as the program runs. A variable is a
named value that used in your programs like x=5. Here variable name is x which is
set to the value 5. Global variables and local variables

Ex:

Var money;

Var name;

Var age=40;

Rules:

1. Names must begin with a letter, digit or the underscore.

2. You can’t use spaces in names.
3. Names are case sensitive.
4. You can’t use the reserved words as variable name.

<html>

<head>

<title> variables used </title>

</head>

<body>

<script language = "javascript">

<!--

var name=prompt ("Enter your name");

[Link]("<h1> your name is </h1>" );

[Link]("<h2>" + name +" </h2>" );

[Link]();

-->

</script>

</body>

</html>
Q. What data types does java script use?

There are several data types commonly programmers may use.

Character, Integer, Boolean, String, and Real.

Java script has only 4 types of data.

1. Numerical data types: These are the basic numbers it can include all the integers,
fractions and expression data.

Example: Numeric a=10;

2. String data type: These are collection of characters or a single character in the
double quotes. The string data type can also store numbers represented in the form
of string using double quotes.

Example: string s=”c”;

String s1=”1234”;

3. Boolean data type: Boolean variables hold the values “ true” and “false”. These are
used a lot in programming to hold results of conditional text.

4. Null data types: This is used when you don’t know something. A Null value means one
that has been decided.

Q. Explain different types of Confirmation Messages

Whenever we are downloading or installing certain software in our computer, on

clicking the cancel button in the middle of the process, usually a pop window will be
displayed carrying a message. Such messages are known as confirmation messages.

These messages can be introduced in our scripts by using three predefined functions
of methods. These are given below:

Prompt(“string”, “string”)

Confirm(“string”)

Alert(string”)

In the above three functions introducing “prompt” causes a prompt window to be

displayed (as soon as certain ongoing sessions are aborted by the user) carrying certain
message as being introduced by the developer. The confirm function causes a window to be
displayed carrying two buttons like OK and CANCEL. Choosing any one of them causes the
required operation to take place. Finally the function alert causes a small window to be
displayed (same as prompt and confirm) along with OK button. On clicking the OK button,
required operation will take place.

Q. Describe each of the conditional and loop constructors in java script.

Conditional Statements
Very often when you write code, you want to perform different actions for different decisions. You can use
conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
• if statement - use this statement to execute some code only if a specified condition
is true
• if...else statement - use this statement to execute some code if the condition is
true and another code if the condition is false
• if...else if....else statement - use this statement to select one of many blocks of
code to be executed
• switch statement - use this statement to select one of many blocks of code to be
executed
If Statement
Use the if statement to execute some code only if a specified condition is true.

Syntax
if (condition)
{
code to be executed if condition is true
}

Example:

<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10

var d=new Date();

var time=[Link]();

if (time<10)
{
[Link]("<b>Good morning</b>");
}
</script>
If...else if...else Statement

Use the if....else if...else statement to select one of several blocks of code to be executed.

Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and condition2 are not true
}

The JavaScript Switch Statement

Use the switch statement to select one of many blocks of code to be executed.

Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from case 1 and 2
}

Example
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date();

theDay=[Link]();
switch (theDay)
{
case 5:
[Link]("Finally Friday");
break;
case 6:
[Link]("Super Saturday");
break;
case 0:
[Link]("Sleepy Sunday");
break;
default:
[Link]("I'm looking forward to this weekend!");
}
</script>

JavaScript Loops

In JavaScript, there are two different kind of loops:

• for - loops through a block of code a specified number of times
• while - loops through a block of code while a specified condition is true
The for Loop
The for loop is used when you know in advance how many times the script should run.

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

The while Loop

The while loop loops through a block of code while a specified condition is true.

Syntax
while (var<=endvalue)
{
code to be executed
}
Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
[Link]("The number is " + i);
[Link]("<br />");
i++;
}
</script>
</body>
</html>

Break and Continue

The break statement will break the loop and continue executing the code that follows after the loop (if any).
Example
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
[Link]("The number is " + i);
[Link]("<br />");
}
</script>
</body>
</html>

Continue
<html>

<body>
<h2>JavaScript Loops</h2>

<p>A loop with a <b>continue</b> statement.</p>

<p>A loop which will skip the step where i = 3.</p>

<p id="demo"></p>

<script>

let text = "";

for (let i = 0; i < 10; i++) {

if (i === 3) { continue; }

text += "The number is " + i + "<br>";

[Link]("demo").innerHTML = text;

</script>

</body>

</html>

Q. What are the operators available in java script?

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:

Operator Description Example Result

+ Addition x=y+2 x=7

- Subtraction x=y-2 x=3

 * Multiplication x=y*2 x=10

/ Division x=y/2 x=2.5

% Modulus (division remainder) x=y%2 x=1

++ Increment x=++y x=6

-- Decrement x=--y x=4

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript variables.
Given that x=10 and y=5, the table below explains the assignment operators:

Operator Example Same As Result

= x=y x=5

+= x+=y x=x+y x=15

-= x-=y x=x-y x=5

*= x*=y x=x*y x=50

/= x/=y x=x/y x=2

%= x%=y x=x%y x=0

Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x=5, the table below explains the comparison operators:

Operator Description Example

== is equal to x==8 is false

=== is exactly equal to (value and type) x===5 is true

x==="5" is false

!= is not equal x!=8 is true

> is greater than x>8 is false

< is less than x<8 is true

>= is greater than or equal to x>=8 is false

<= is less than or equal to x<=8 is true

Logical Operators
Logical operators are used to determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x==5 || y==5) is false

! not !(x==y) is true

Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

Syntax

variablename=(condition)?value1:value2
Example

Greeting = (visitor=="PRES")?"Dear President ":"Dear ";

UNIT IV
Q. Explain arrays in java script.

What is an Array?
An array is a special variable, which can hold more than one value, at a time.
An array can hold all your variable values under a single name. And you can access the values by referring to the
array name.
Each element in the array has its own ID so that it can be easily accessed.
Create an Array
The following code creates an Array object called myCars:
var myCars=new Array();

There are two ways of adding values to an array (you can add as many values as you need to define as many
variables you require).

1:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2:
var myCars=new Array("Saab","Volvo","BMW");

Access an Array
You can refer to a particular element in an array by referring to the name of the array and the index number. The
index number starts at 0.
The following code line:

[Link](myCars[0]);

will result in the following output:

Saab

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index number:
 myCars[0]="Opel";

Now, the following code line:

[Link](myCars[0]);

will result in the following output:

Opel

Array Object Properties

In java script an array can act like an object.
Property Description

constructor Returns a reference to the array function that created the object

index

input

length Sets or returns the number of elements in an array

prototype Allows you to add properties and methods to the object

Array Object Methods

Method Description

concat() Joins two or more arrays and returns the result

join() Puts all the elements of an array into a string. The elements are
separated by a specified delimiter

pop() Removes and returns the last element of an array

push() Adds one or more elements to the end of an array and returns
the new length

reverse() Reverses the order of the elements in an array

shift() Removes and returns the first element of an array

slice() Returns selected elements from an existing array

sort() Sorts the elements of an array

splice() Removes and adds new elements to an array

toSource() Represents the source code of an object

toString() Converts an array to a string and returns the result

unshift() Adds one or more elements to the beginning of an array and

returns the new length

valueOf() Returns the primitive value of an Array object

Q. What are functions used for, how are functions defined in java script, how does
parameter passing work.

A function is a piece of code that performs a specific task. Java script has a lot of
functions built into the language. Once you have created some functions you need to know
how to use them, this is done by calling the function.

How to defining a function:

Function name(parameters)

Body of function

Functions are defined using the function keyword. The name can be any combination
of digits, letters of underscore. The function receives value as a parameter.

Function call:

In java script parameters are passed as arrays. Every function has two properties
that can be used to find information about the parameters.

1. [Link] – this is the array of parameters that have been passed.

2. [Link] – this is the no. of parameters have been passed into
the function.

Q. Why do some functions return values to the calling statement?

Variables are declared in a function are local. You can’t get their value outside the
function unless you pass them around as parameters. That mechanism is provided by the
return statement.

Example:

Function sai(number)
 {

Var answer = sin(number);

Return answer;

Var x=sai(32);

Scoping rules:

Programming languages usually impose rules, called scoping, which determine how a
variable can be accessed. In java script variables can be either local or global.

Global:

Global scoping means that a variable is available to all parts of the program. Such
variables are declared outside the function and are usually used to hold static data.

Local:

Local variables are declared inside a function. They can only be used by that
function.

Q) recursion JavaScript

Recursion in JavaScript is a programming technique where a function calls itself to solve smaller
instances of a problem until it reaches a base case, which stops further recursive calls. Recursion
is commonly used for tasks that can be divided into similar, smaller sub-tasks.

How Recursion Works

1. Base Case: This is the condition under which the recursive function stops calling itself. Without a
base case, the function would call itself indefinitely, leading to a stack overflow.
2. Recursive Case: This is the part of the function where the function calls itself with a modified
argument to gradually approach the base case.
Example: Factorial Calculation

The factorial of a number nnn (written as n!n!n!) is the product of all positive integers from 1 to
nnn. For example, 5!=5×4×3×2×1=1205! = 5 \times 4 \times 3 \times 2 \times 1 =
1205!=5×4×3×2×1=120.

Here's how you can calculate factorial using recursion:

javascript
Copy code
function factorial(n) {
// Base case: when n is 0, return 1
if (n === 0) {
return 1;
}
// Recursive case: multiply n by factorial of (n - 1)
else {
return n * factorial(n - 1);
}
}

// Test the function

[Link](factorial(5)); // Output: 120
Explanation

1. Base Case: When nnn reaches 0, the function returns 1 (since 0!=10! = 10!=1).
2. Recursive Case: If nnn is greater than 0, the function returns n×factorial(n−1)n \times
\text{factorial}(n - 1)n×factorial(n−1).

The function calls itself with progressively smaller values of nnn until nnn reaches 0, at which
point the recursion stops.

UNIT V
Q)What do web designers mean when they are talk about a style?
A style is simply a set of formatting instructions that can be applied to a
piece of text. Styles define how to display HTML elements. There are three
mechanisms by which we can apply styles to our HTML documents.

1. The style can be defined with in the basic HTML tag.

2. Styles can be defined in the <head> session and applied to the whole
document.
3. Styles can be defined in external files called style sheets which can
then be used in any document by including the style sheet via URI.

Styles can be cascaded. This means the formats override any which were
defined or included earlier in the document.
The page may be viewed on a television screen, a computer screen or
mobile phones, any of which may show images, text, tables, or a mixture of
them all. Straightforward HTML does not have the facilities that are needed to
manage with this variety, but style sheets provide them.

Example:
<html>
<head>
<title> simple style sheet </title>
<style>
<!--
h1
{ color: red; border: thin groove; text-align: center;}
-->
</style>
</head>
<body>
<h1> simple style sheet </h1>
<p> The first paragraph is left </p>
<p style = "margin-left:10%; border: ridge ; background: #ffffcc">
but this paragraph undergoes
</p>
<p> we finish with un altered paragraph </p>
</body>
</html>
The syntax of the style definition changes when it is done inside an html tag.
The definition becomes an attribute, named style of the tag.
Rules:
A style rule has two parts. Selector and set of declarations:
The selector is used to create link between the rule and html tag. The
declaration has two parts. A Property and a value: declaration must be
separated using colons and terminated using semicolons.
 Selector {property: value; property: value; ……….}
If you miss the colon or fail to put the semi colon between the declarations, the
style can not be processed.

Advantages and Disadvantages of CSS

CSS stands for Cascading Style Sheet. It allows you to specify how documents
are presented to users by using various style properties for a given HTML
element. CSS properties are the key to altering the styling of HTML elements in
your web documents.

Some Advantages of using CSS

Separation of Style and Structure
It allows separating content of an html document from the layout & style of
that document.
Search engine friendly
It helps get your pages found in a search engine. Since your CSS website
contains less code and has a simpler structure which allows search engine
spiders to pass from your code faster means your web pages can be indexed
faster
Save time
It flexibility to set the properties of an component. You can write CSS code and
then the same code can be applied to the HTML components groups, and also
can be reused in different HTML pages.
Easy to Maintain
It gives an easy mode to update document formatting and manage consistency
across various documents. By doing one change to the website's CSS file, all
the web pages’ elements will be updated automatically.
Pages load faster
it empowers multiple pages to share formatting, and reduce complexity and
redundancy in the structural content. It significantly reduces the file transfer
size, which helps to lode page faster.
Superior styles to HTML
It has more extensive presentation capabilities than HTML, so you can give far
superior look to your HTML pages in contrast with the HTML elements and
attributes.
Multiple Device Compatibility
It allows the HTML document to be improved for more than kind of device.
Using it the same HTML document can be presented in various review styles
for various rendering devices.
Provide Platform independence
It offer consistent platform independence and also support latest browsers as
well.
Global web standards
It’s a better to start using CSS in all the HTML pages to make them compatible
for future browsers There are various CSS properties which help to enhance
your web [Link] CSS has several benefits, some designers are quick
to list the following cons:
Speed: Downloading an HTML page will always take longer if CSS is embedded
within it. However, with ever-increasing Internet speeds, this is less of a
problem than you might imagine.
Weirdness: While CSS is easy to use and understand, its syntax is very
different from HTML and not terribly user-friendly. This forces developers to
take time to learn two different types of code and then understand how they
interact with each other.
Complications: CSS can get messy and complicate the creation of websites
with third-party software, such as Dreamweaver or Microsoft FrontPage.

Q. What is a style sheet class and explain?

Classes:

This method similar to style. This is fine if you want every paragraph equally
intended or every level one heading in the same font if you only want to apply a style to
some paragraphs, for instance you have to use classes.

Syntax:

Selector {property: value}

Ex:

1. Body {color:black}

2. P {font-family: ”verdana”; text-align: center; color: red}

Grouping style

3. H1,h2,h3,h4,h5,h6

Color: green;

Font-family:arial

Class selector

With the class selector you can define different styles for the same type of HTML
element.

Selector. class name { property: value; property: value}

<selector class = “class name” >

The class name is unique name.

Ex:

[Link] { text-align:right}

[Link] {text-align:center}

<p class=”right”> this paragraph will be right aligned </p>

Classes can be declared in 2 ways element wise and universal.

Element wise where the name of the element is given before the class name

Ex:

p.c1{background:blue}

universal use for multiple elements declared only with .symbol before the class name

ex:

<style type=”text/css”>
[Link]{background-color:blue}

.red{background-color:red}

.yellow{background-color:yellow}

</style>

Anonymous classes:

Some times you want to apply a piece of formatting to many different elements
within a page but not necessarily to the entire page. Cascading style sheets provides a way
of defining styles within reusable classes in the example.

.center { text-align:center}

.mystyle

font-family: verdana;

font-size:4;

font-color: magenta

<h1 class=”center”> This is sample heading </h1>

<p class=”center”> This is sample paragraph </p>

<p class=”mystyle”> This is another paragraph applying my own style </p>

Example:

<html>

<head>

<title> simple style sheet </title>

<style>
<!--

.sai {text-align:center}

-->

</style>

</head>

<body>

<h1 class="sai">This heading will be center-aligned</h1>

<p class="sai">This paragraph will also be center-aligned.</p>

</body>

</html>

Q. Explain different Ways to insert CSS

Or

Q. Describe the different ways that styles can be added to a web page.

1. External
2. Internal(embedded)
3. Inline
4 imported style sheets

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you
can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the
<link> tag. The <link> tag goes inside the head section.

<head>
<link rel="stylesheet" type="text/css"
href="[Link]">
</head>

The href is hyper link to your style sheet. Rel tells the browser what type of link you
are using. And the type statement gives the relevant MIME type, it is optional. An external
style sheet can be written in any text editor. The file should not contain any html tags. Your
style sheet should be saved with a .css extension.
Internal style sheets

Internal styles are the styles declared in head section of a web page. The styles are
declared here using <style> and </style> tag.

Ex:

<head>

<style type=”css/text”>

Hr {color: sienna}

P {margin-left: 20px}

Body {background-image: url (“f:\examples\[Link]”) }

</style>

</head>

Inline styles

The inline styles are another way of style declaration for the basic HTML tags. These
inline styles are declared itself in the tag declaration as a tag argument named “style” for
the tag.

<p style=”color: pink; margin-left: 15px”> This is sample paragraph applying inline styles
</p>

Imported style sheets:

An imported style sheet is a sheet that can be imported to or combined with another style
sheet. This allows creating one main sheet containing declarations that apply to the whole
[Link] the @ import notation in the style element.

Ex:

File 1: [Link]

<style>

H1{font-style:italic;color:red}

P{background:yellow}

</style>
File 2: [Link]

<style>

@import url([Link]);

</style>

File 3:[Link]

<html>

<head>

<link rel=stylesheet href=”[Link]”type=”text/css”>

</head>

<body>

Sairam

</body>

</html>

Cascading (Inheritance)

Multiple styles declared in a web page will cascade into one. The cascading order for
more than one style specified to an HTML element is below. Generally all styles will be
cascaded into a new virtual style sheet.

1. Browser default
2. External style sheet
3. Internal styles
4. Inline styles

Q) EXPLAIN BACK
GROUND,BORDERS,MARGING,PADDING?
The CSS background properties are used to add background effects for
elements.
body {
background-color: lightblue;
}
1 background color for any HTML elements:
Example

Here, the <h1>, <p>, and <div> elements will have different background colors:
h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p{
background-color: yellow;
}
2 The background-image property specifies an image to use as the
background of an element.

background image for a page:

body {
background-image: url("[Link]");
}

3 background-position property is used to specify the position of the

background image.
Example

Position the background image in the top-right corner:

body {
background-image: url("[Link]");
background-repeat: no-repeat;
background-position: right top;
}

BORDERS

border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border

• dashed - Defines a dashed border
 •solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-
color value
• ridge - Defines a 3D ridged border. The effect depends on the border-
color value
• inset - Defines a 3D inset border. The effect depends on the border-color
value
• outset - Defines a 3D outset border. The effect depends on the border-
color value
• none - Defines no border
• hidden - Defines a hidden border
BORDER COLOR

different border colors:

<html>
<head>
<style>
[Link] {
border-style: solid;
border-color: red;
}

[Link] {
border-style: solid;
border-color: green;
}

[Link] {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the 3 borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>

</body>
</html>
Border - Shorthand Property

Like you saw in the previous page, there are many properties to consider when
dealing with borders.

To shorten the code, it is also possible to specify all the individual border
properties in one property.

The border property is a shorthand property for the following individual border
properties:

• border-width
• border-style (required)
• border-color
<html>
<head>
<style>
p{
border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<P>SAIRAM IS GOD </P>

</body>
</html>

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
 margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>SAIRAM IS GOD.</div>

</body>
</html>
padding
CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>ABHYUDAY MAHILA DEGREE COLLEGE.</div>

</body>
</html>
CSS height and width Values

The height and width properties may have the following values:
 • auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm, etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: YELLOW;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>SAIRAM IS GOD</div>

</body>
</html>
Q) EXPLAIN TEXT IN CSS?
Text: The CSS text properties define the appearance of text:
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified. When text-align
is set to "justify", each line is stretched so that every line has equal width, and
the left and right margins are straight (like in magazines and newspapers).

Example
h1 {text-align:center}
[Link] {text-align:right}
[Link] {text-align:justify}

Text Decoration
The text-decoration property is used to set or remove decorations from
text. The text-decoration property is mostly used to remove underlines from
links for design purposes.
Example
a {text-decoration:none}
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text. It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word.

Example
[Link] {text-transform:uppercase}
[Link] {text-transform:lowercase}
[Link] {text-transform:capitalize}

Text Indentation
The text-indentation property is used to specify the indentation of the first line
of a text.

Example
p {text-indent:50px}

Q) The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout. The CSS box model is
essentially a box that wraps around HTML elements, and it consists of:
margins, borders, padding, and the actual content. The box model allows us to
place a border around elements and space elements in relation to other
elements.

Explanation of the different parts:

• Margin - Clears an area around the border. The margin does not have a
background color, and it is completely transparent
• Border - A border that lies around the padding and content. The border
is affected by the background color of the box
• Padding - Clears an area around the content. The padding is affected by
the background color of the box
• Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.
Width and Height of an Element
Important: When you specify the width and height properties of an
element with CSS, you are just setting the width and height of the content
area. To know the full size of the element, you must also add the padding,
border and margin. The total width of the element in the example below is
300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Q) EXPLAIN FONT IN CSS

Fonts:
In CSS, there is two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")

Generic Font family Description

family

Serif Times New Serif fonts have small lines at the

Roman ends on some characters
Georgia

Sans-serif Arial "Sans" means without - these fonts do

Verdana not have the lines at the ends of
characters

Monospace Courier New All monospace characters has the

Lucida Console same width

Font Family
The font family of a text is set with the font-family property. The font-
family property can hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font.
 Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in
quotation marks, like font-family: "Times New Roman". More than one font
family is specified in a comma-separated list.

Example
p{font-family:"Times New Roman",Georgia,Serif}

Font Style
The font-style property is mostly used to specify italic text. This property
has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)

Example
[Link] {font-style:normal}
[Link] {font-style:italic}
[Link] {font-style:oblique}

Q. What is a layer, how are they described within the HTML code.

The page layout that a browser creates results from layering text and images on top
of each other. Use images as the backgrounds of their pages and then place further images
and text over them. Some of the powerful attributes in a DIV tag.

z-index: n –

The background image is placed first, with text and image on top of it.

The lowest layer appearing on top of the background has a z-index of 1. Many layers can
have same z-index value if you want to place them at the same level. If you number of
layers sequentially as you move up the stack you are unlikely to place more than about 20
layers before the screen becomes unmanageable.

Position: absolute | relative

 Divisions have to be placed on the screen so that the top left corner starts at pixel 0,
0. The default option is absolute. You can specify the location relative to the placement of
the content.

Left: n

Top: n

You locate divisions around the screen by specifying the positions of their top left
corner. Default 0, 0.

Width: n

Height: n

The size of division in pixels.

Example:

<html>

<head>

<title> layer text </text>

</head>

<body>

<h1> layer text </h1>

<div style = "z-index:2; left:50px; top:250px; position: absolute; color: red; text:
white;

font-size: 36pt; border: thin-groove;">

<p> this is the higher layer </p>

</div>

<div style = "z-index:1; left:100px; top:225px; position: absolute; color: magenta;

font-size: 46pt; border: thin-groove; background-color: green;">

<p> some more text </p>

</div>

<div style = "z-index:4; left:10px; top:30px; width: 150px; position: absolute; color: black;
background-color: yellow; font-size: 18pt;">

<p> some text placed in a box

</div>

<div style = "z-index:2; left:500px; top:300px; position: absolute; width: 25; color:
blue;

font-size: 16pt; font-style: italic; background-color: #aeae00;">

<p> this is bottom right corner </p>

</div>

<hr>

</body>

</html>

Q What are units of urls ?

Relative units:

Em: the height of the font for this element

Cx: the height of the letter “x” in the current

Px:pixels

Absolute units:

In:size in inches

Cm: size in centimeters

 Mm: size in millimeters

Pc: picas where 1 pc= 12 pt

Pt: points where 1 pt=1/72 inch

Q. Compare and contrast the use of DIV and [Link] Formatting blocks of
information?

DIVISIONS

HTML document is a block elements. A block could be something like paragraph,

text, figures, or an individual character that is part of a block. Each of these can be
manipulated separately. This is really very simple rather than applying the formatting to the
element itself. A <DIV>, </DIV> pair of tags wrapped around the elements.

<div class = “any element”>

<p>………..</p>

<h2>……..</h2>

<hr>

</div>

Spans:

The HMTL standard no longer supports the idea of modifying individual items in
place. A simple and effective model has been devised based around the span tag.

The DIV and SPAN tags are identical parameters. But the effects of those parameters are
altered by the context in which they are used. Each can have an ID so that it can be
identified by other elements on the page. It is not useful on static page of text but it is
useful in Dynamic HTML. Styles are applied to SPAN and DIV through either the class or
style parameters