Web Technology CS

WEB TECHNOLOGY
SUBJECT CODE: 21UCS08 SEMESTER: V
UNIT-1
Structuring Documents for the Web: Introducing HTML and XHTML, Basic Text
Formatting, Presentational Elements, Phrase Elements, Lists, Editing Text, Core
Elements and Attributes, Attribute Groups. Links and Navigation: Basic Links,
Creating Links with the Element, Advanced E- mail Links. Images, Audio, and Video:
Adding Images Using the Error! Filename not specified. Element, Using Images as
Links Image Maps, Choosing the Right Image
UNIT-2
Tables: Introducing Tables, Grouping Section of a Table, Nested Tables, Accessing
Tables. Forms: Introducing Forms, Form Controls, Sending Form Data to the Server.
Frames: Introducing Frameset, Element, Creating Links between Frames, Setting a
Default Target Frame Using Element, Nested Framesets, Inline or Floating Frames
with <iframe>.
UNIT-3
Cascading Style Sheets: Introducing CSS, Where you can Add CSS Rules. CSS
Properties: Controlling Text, Text Formatting, Text Pseudo Classes, Selectors,
Lengths, Introducing the Box Model. More Cascading Style Sheets: Links, Lists,
Tables, Outlines, The :focus and :activate Pseudo classes Generated Content,
Miscellaneous Properties, Additional Rules, Positioning and Layout wit, Page Layout
CSS , Design Issues.
UNIT-4
Java Script: How to Add Script to Your Pages, Variables and Data Types – Statements
and Operators, Control Structures, Conditional Statements, Loop Statements –
Functions - Message box, Dialog Boxes, Alert Boxes, Confirm Boxes, Prompt Boxes
UNIT-5
Working with JavaScript: Practical Tips for Writing Scripts, JavaScript Objects:
Window Object - Document object - Browser Object - Form Object - Navigator object
Screen object - Events, Event Handlers, Forms – Validations, Form Enhancements,
JavaScript Libraries.
WEB TECHNOLOGY
SUBJECT CODE: 21UCS08 SEMESTER: V
UNIT - 1
WHAT IS HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 It provides some titles, headings, paragraphs, lists, tables, embedded images, etc
INTRODUCING HTML AND XHTML:
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is
a link", etc.
 XHTML stands for EXtensible HyperText Markup Language
 XHTML is a stricter, more XML-based version of HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers
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
 These tags are used to make text bold, italicized, or underlined. There are almost 14 options
available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without any logical
importance. If you write anything within <b>............</b> element, is shown in bold letters.
Example:
<p> <b>Write Your First Paragraph in bold text.</b></p>
Output:
Write Your First Paragraph in bold text.

 The HTML <strong> tag is a logical tag, which displays the content in bold font and informs
the browser about its logical importance.
 If you write anything between <strong>???????. </strong>, is shown important text.
Example:
<p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content
Example
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
2) Italic Text
HTML <i> and <em> formatting elements
 The HTML <i> element is physical element, which display the enclosed content in italic font,
without any added importance.
 If you write anything within <i>............</i> element, is shown in italic letters.
Example:
<p> <i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First Paragraph in italic text.
 The HTML <em> tag is a logical element, which will display the enclosed content in italic
font, with added semantics importance.
example:
<p><em>This is an important content</em>, which displayed in italic font.</p>
Output:D
This is an important content, which displayed in italic font.

Example Program:
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
3) HTML Marked formatting

 If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>
Example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
 If you write anything within <u>.........</u> element, is shown in underlined text.
Example:AD
<p> <u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
 Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
Example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
6) Monospaced Font
If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.
Example:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript; means
it is displayed half a character's height above the other characters.
Example:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ; means it
is displayed half a character's height below the other characters.
Example:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
 Anything that puts within <del>..........</del> is displayed as deleted text.
Example:
<p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
10) Inserted Text

 Anything that puts within <ins>..........</ins> is displayed as inserted text.
Example:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
Output:
Write another paragraph.
11) Larger Text

If you want to put your font size larger than the rest of the text then put the content within
<big>.........</big>. It increase one font size larger than the previous one.
Example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
12) Smaller Text

 If you want to put your font size smaller than the rest of the text then put the content
within <small>.........</small>tag. It reduces one font size than the previous one.
Example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph in smaller font.
PRESENTATIONAL ELEMENTS:
 There are a handful of (X)HTML elements that are explicitly presentation
oriented. Sometimes called “physical” styles, they provide instructions for
the size, weight, or style of the font used to display the element.
 If you’ve been paying attention, you already know that Cascading Style
Sheets are now the preferred way to specify presentation instructions.
 The presentational inline elements, along with the preferred alternative
for achieving the same visual effect.
Presentational inline elements and style sheet alternatives

Element Description Alternative
Use the strong element instead if appropriate, or use the font-

weight property:
b Bold font-weight: bold
Use a relative font-size keyword to make text display slightly larger

than the surrounding text:
big Big font-size: bigger
Use the em element instead if appropriate, or use the font-

style property:
i Italic font-style: italic
Use the text-decoration property to make text display with a line

Strike-
through it:
s (deprecated) through text-decoration: line-through
Use a relative font-size keyword to make text display slightly smaller

than the surrounding text:
small Small font-size: smaller
Element Description Alternative
Use the text-decoration property to make text display with a line

strike (depreca Strike-
through it:
ted) through text-decoration: line-through
Use the font-family property to select a specific or generic fixed-width

font:
tt Teletype font-family: "Andale ...
PHRASE ELEMENTS:
 The HTML phrase tags are special purpose tags, which defines the structural meaning of a
block of text or semantics of text. Following is the list of phrase tags, some of which we
have already discussed in HTML formatting.
o Abbreviation tag : <abbr>
o Acronym tag: <acronym>
o Marked tag: <mark>
o Strong tag: <strong>
o Emphasized tag : <em>
o Definition tag: <dfn>
o Quoting tag: <blockquote>
o Short quote tag : <q>
o Code tag: <code>
o Keyboard tag: <kbd>
o Address tag: <address>
1. Text Abbreviation tag

 This tag is used to abbreviate a text. To abbreviate a text, write text between <abbr> and
</abbr> tag.
Example
<p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pa
ges. </p>
Output:
2. Marked tag:
 The content written between <mark> and </mark> tag will show as yellow mark on
browser. This tag is used to highlight a particular text.AD
Example
<p>This tag will <mark>highlight</mark> the text.</p> Test it Now
Output:
3. Strong text:
 This tag is used to display the important text of the content. The text written between
<strong> and </strong> will be displayed as important text.
Example
<p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p>
OUTPUT:
4. Emphasized text
 This tag is used to emphasize the text, and displayed the text in italic form. The text written
between <em> and </em> tag will italicized the text.
Example
<p>HTML is an <em>easy </em>to learn language.</p> Test it Now
Output:
5. Definition tag:
 When you use the <dfn> and </dfn> tags, it allow to specify the keyword of the content.
Following is the example to show how to definition element.
Example
<p><dfn>HTML </dfn> is a markup language. </p> Test it Now
Output:
6. Quoting text:
 The HTML <blockquote> element shows that the enclosed content is quoted from another
source.
 The Source URL can be given using the cite attribute, and text representation of source can
display using <cite> ..... </cite>element.
Example
1. <blockquote cite="https://www.keepinspiring.me/famous-
quotes/"><p>?The first step toward success is taken when you refuse to be a captive of the environ
ment in which you first find yourself.?</p></blockquote>
2. <cite>-Mark Caine</cite> Test it Now
Output:
7. Short Quotations:
 An HTML <q> ....... </q> element defines a short quotation.
 If you will put any content between <q> ....... </q>, then it will enclose the text in double
quotes.
Example:
p>Steve Jobs said: <q> Have To Be Pushed. The Vision Pulls You.</q>?</p> Tesow
Output:
8. Code tags
 The HTML <code> </code> element is used to display the part of computer code. It will
display the content in monospaced font.
EXAMPLE:
<p>First Java program</p>
<p><code>class Simple{ public static void main(String args[]){
System.out.println("Hello Java"); }} </code>
</p>
Output:
9. Keyboard Tag
In HTML the keyboard tag, <kbd>, indicates that a section of content is a user input from keyboard.
EXAMPLE
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.
</p>
Output:
10. Address tag
 An HTML <address> tag defines the contact information about the author of the content.
 The content written between <address> and </address> tag, then it will be displayed in
italic font.
<address> You can ask your queries by contact us on <a href="">example123@newdomain.com</a
>
<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
</address> TNow
Output:
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example An unordered HTML list:
 Item
 Item
 Item
 Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List

 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists

 HTML also supports description lists.A description list is a list of terms, with a description of
each term.
 The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

HTML text Editors
o An HTML file is a text file, so to create an HTML file we can use any text editors.
o Text editors are the programs which allow editing in a written text, hence to create a web page we
need to write our code in some text editor.
o There are various types of text editors available which you can directly download, but for a
beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
o After learning the basics, you can easily use other professional text editors which are, Notepad++,
Sublime Text, Vim, etc.
o In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to create
your first web page with Notepad, and sublime text.
A. HTML code with Notepad. (Recommended for Beginners)
 Notepad is a simple text editor and suitable for beginners to learn HTML.
 It is available in all versions of Windows, from where you easily access it.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
Step 3: Save the HTML file with .htm or .html extension.
Step 4: Open the HTML page in your web browser.
B. HTML code with Sublime Text-editor.
 the basics of HTML, then you can use some professional text editors, which will help you to write an
efficient and fast code.
 So to use Sublime Text editors, first it needs to download and install from internet.
Step 1: Open Sublime Text editor(Windows 8):
Step 2: Save the page before writing any code.
Step 3: Write the code in Sublime Text editor
Step 4: Open the HTML page in your Browser
HTML ELEMENTS:
 An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags −
Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />
 So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.

 There are some HTML elements which don't need to be closed, such as <img.../>, <hr
/> and <br /> elements. These are known as void elements.
HTML Tag vs. Element
 An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.
 For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element −
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
OUTPUT −
This is italic heading
This is underlined paragraph

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
The href Attribute

 The <a> tag defines a hyperlink.
 The href attribute specifies the URL of the page the link goes to:
Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src Attribute

 The <img> tag is used to embed an image in an HTML page.
 The src attribute specifies the path to the image to be displayed:
Example
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
1.Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
2.Relative URL - Links to an image that is hosted within the website. Here, the URL does not include
the domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg".
The width and height Attributes

 The <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
LINKS AND NAVIGATION:

What is a link?
It is a connection from one web resource to another. A link has two ends, An anchor and
direction. The link starts at the “source” anchor and points to the “destination”.
Basic Links: SYNTAX:
Syntax Explanation:
href : The href attribute is used to specify the destination address of the link used. "href" stands
for Hypertext reference.
Text link : The text link is the visible part of the link. It is what the viewer clicks on.
CREATING LINKS WITH THE <a> ELEMENTS:

Example program:
<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>
<body>
<p>Click on the following link</p>
<a href = "https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>
</html>
Output:
Advanced E-mail Links:

 HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag
as an email tag, you will use mailto: email address along with href attribute. Following is the syntax
of using mailto instead of using http.
<a href = "mailto: abc@example.com">Send Email</a>

NAVIGATION:
 The <nav> tag is used for declaring the navigational section in HTML documents.
Websites typically have sections dedicated to navigational links, which enables
users to navigate the site.
 These links can be placed inside a nav tag. In other words, the nav element
represents a section of the page whose purpose is to provide navigational links,
either in the current document or to another document.
Syntax:
<nav> Links... </nav>
Example program:
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2> HTML nav Tag</h2>

<nav>
<a href="#">Home</a> |
<a href="#">Interview</a> |
<a href="#">Languages</a> |
<a href="#">Data Structure</a> |
<a href="#">Algorithm</a>
</nav>

</body>
</html>
Output:
IMAGE, AUDIO AND VIDEO:

Adding Images Using the <img> Elements:
 The HTML <img> tag is used to embed an image in a web page.

 Images are not technically inserted into a web page; images are linked to web pages.
 The <img> tag creates a holding space for the referenced image.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:

 src - Specifies the path to the image
 alt - Specifies an alternate text for the image
The src Attribute

<img src="url" alt="alternatetext">
The alt Attribute

<img src="img_chania.jpg" alt="Flowers in Chania">
Image Size - Width and Height:

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Using image as links image maps in html:
 The HTML <map> tag defines an image map. An image map is an image with clickable areas.
The areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Choosing the Right Image Format:

The most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari,
Opera):
Abbreviation File Format File
Extension
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg,

.jpeg, .jfif,
.pjpeg,
.pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

ADDING FLASH:
 Flash is a vector animation software that was created with the intention of creating
animations for web pages.
Method-1: Using object and embed tag:
 The web standard for embedding content on a web page is the <object> tag, but
the <embed> tag is a holdover from the days of the Netscape browser and is not a
legitimate tag in web standards.
Syntax:
<object width="500" height="400">
// You should replace somefilename with
// your own filepath or URL of your file
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf"
width="500" height="400">
</embed>
</object>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Adding Flash File</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<object width="500" height="400">
<param name="movie" value="file.swf">
<embed src="file.swf" width="500" height="400">
</embed>
</object>
</body>
</html>
Output:
Audio and video to your web page in html:
HTML Audio
 The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works

 The controls attribute adds audio controls, like play, pause, and volume.
 The <source> element allows you to specify alternative audio files which the browser may
choose from.
 The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support
the <audio> element.
HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:
Example
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and
<audio>
The HTML <video> Element :

 HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such
as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:
1. mp4
2. webM
3. ogg
HTML Video Tag Example
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
Attributes of HTML Video Tag :
Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not
played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is
completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.

ONE MARKS:
1. 1. What is HTML?
a) HTML describes the structure of a webpage
b) HTML is the standard markup language mainly used to create web pages
c) HTML consists of a set of elements that helps the browser how to view the content
d) All of the mentioned
2. Who is the father of HTML?

a) Rasmus Lerdorf
b) Tim Berners-Lee
c) Brendan Eich
d) Sergey Brin
3. HTML stands for __________

a) HyperText Markup Language
b) HyperText Machine Language
c) HyperText Marking Language
4. What is the correct syntax of doctype in HTML5?

a) </doctype html>
b) <doctype html>
c) <doctype html!>
d) <!doctype html>
5. Which of the following is used to read an HTML page and render it?
a) Web server
b) Web network
c) Web browser
d) Web matrix
6. Which of the following is not a difference between HTML and XHTML?

a) Charset in both html and xhtml is “text/html”
b) Tags and attributes are case-insensitive in HTML but not in XHTML
c) Special characters must be escaped using character entities in XHTML unlike HTML
d) Charset in html is “text/html” where as in xhtml it is “application/xml+xhtml”
7. Which of the following tag is used for inserting the largest heading in HTML?
a) head
b) <h1>
c) <h6>
d) heading
8. What is DOM in HTML?

a) Language dependent application programming
b) Hierarchy of objects in ASP.NET
c) Application programming interface
d) Convention for representing and interacting with objects in html documents
9. In which part of the HTML metadata is contained?
a) head tag
b) title tag
c) html tag
d) body tag
10. Which element is used to get highlighted text in HTML5?

a) <u>
b) <mark>
c) <highlight>
d) <b>
11. Which of the following is not a HTML5 tag?

a) <track>
b) <video>
c) <slider>
d) <source>
12. How do we write comments in HTML?

a) </…….>
b) <!……>
c) </……/>
d) <…….!>
13. Which of the following elements in HTML5 defines video or movie content?
a) <video>
b) <movie>
c) <audio>
d) <media>
14. Which of the following is not the element associated with the HTML table layout?
a) alignment
b) color
c) size
d) spanning
15. Which element is used for or styling HTML5 layout?

a) CSS
b) jQuery
c) JavaScript
d) PHP
16. Which HTML tag is used for making character appearance bold?
a) <u>content</u>
b) <b>content</b>
c) <br>content</br>
d) <i>content</i>
17. Which HTML tag is used to insert an image?
a) <img url=”htmllogo.jpg” />
b) <img alt=”htmllogo.jpg” />
c) <img src=”htmllogo.jpg” />
d) <img link=”htmllogo.jpg” />
18. HTML is a subset of ___________

a) SGMT
b) SGML
c) SGME
d) XHTML
19. Which character is used to represent when a tag is closed in HTML?

a) #
b) !
c) /
d) \
20. Which of the following HTML code will make an image clickable?
a)
<a href="https://www.sanfoundry.com/">Sanfoundry Home Page</a>
b)
<img src="https://www.sanfoundry.com/sanfoundry-logo">
</img>
c)
<img src="https://www.sanfoundry.com/sanfoundry-logo" />
d)
<a href="https://www.sanfoundry.com/"><img
src="https://www.sanfoundry.com/sanfoundry-logo" /></a>
21. Among the following, which is the HTML paragraph tag?

a) <p>
b) <pre>
c) <hr>
d) <a>
22. In HTML, which attribute is used to create a link that opens in a new window tab?
a) src=”_blank”
b) alt=”_blank”
c) target=”_self”
d) target=”_blank”
23. Which HTML element is used for short quote?

a) <em>
b) <abbr>
c) <q>
d) <blockquote>
24. Which of the following HTML tag is used to create an unordered list?
a) <ol>
b) <ul>
c) <li>
d) <ll>
25. Which HTML element is used for abbreviation or acronym?

a) <abbr>
b) <blockquote>
c) <q>
d) <em>
26. Which of the following HTML tag is used to add a row in a table?
a) <th>
b) <td>
c) <tr>
d) <tt>
27. What is the work of <address> element in HTML5?

a) contains IP address
b) contains home address
c) contains url
d) contains contact details for author
28. Which of the following tag is used to create a text area in HTML Form?
a) <textarea> </textarea>
b) <text></text>
c) <input type=”text” />
d) <input type=”textarea” />
29. To show deleted text, which HTML element is used?

a) <del>
b) <em>
c) <strong>
d) <ins>
30. What is the correct syntax of web address?

a) port://domain.filenmae:path/scheme/prefix
b) prefix://scheme.port:domain/filename/path
c) path://prefix.port:domain/filename/scheme
d) scheme://prefix.domain:port/path/filename
31. Which tag is used to create a dropdown in HTML Form?

a) <input>
b) <select>
c) <text>
d) <textarea>
32. Which tag is used to create a numbered list in HTML?
a) <ol>
b) <ul>
c) <li>
d) <ll>
33. How to create a checkbox in HTML Form?

a) <input type=”text”>
b) <input type=”textarea”>
c) <input type=”checkbox”>
d) <input type=”button”>
Answer: c
34. How to insert Hyperlink in HTML Page?

a)
<a href="https://www.sanfoundry.com/1000-html-questions-answers/">HTML MCQ</a>
b)
<a target="https://www.sanfoundry.com/1000-html-questions-answers/" HTML Quiz />
c)
<a src="https://www.sanfoundry.com/1000-html-questions-answers/">HTML Test</a>
d)
<a>https://www.sanfoundry.com/1000-html-questions-answers/</a>
35. Which of the following extension is used to save an HTML file?

a) .hl
b) .h
c) .htl
d) .html
36. Which tag is used to create a blank line in HTML?

a) <b>
b) <br>
c) <em>
d) <a>
37. Which HTML tag is used to convert the plain text into italic format?
a) <b>
b) <p>
c) <i>
d) <a>
38. What is the use of <hr/> tag in HTML?

a) For making content appearance italics
b) To create vertical rule between sections
c) To create a line break
d) To create horizontal rule between sections
39. Which attribute is not essential under <iframe>?
a) frameborder
b) width
c) height
d) src
40. Which works similar to <b> element?

a) <blockquote>
b) <strong>
c) <em>
d) <i>
41. Which tag is used to underline the text in HTML?

a) <p>
b) <u>
c) <i>
d) <ul>
42. Which attribute specifies a unique alphanumeric identifier to be associated with an

element?
a) type
b) article
c) id
d) class
43. Which of the following is an HTML specification used to add more information to
HTML tags?
a) Modifydata
b) Minidata
c) Macrodata
d) Microdata
44. Which HTML element is used for YouTube videos?

a) <samp>
b) <small>
c) <frame>
d) <iframe>
45. Which of the following HTML element is used for canvas graphics?
a) <css>
b) <paint>
c) <canvas>
d) <graphic>
5 – MARKS:
1. How to creating links with the <a> elements?
2. Explain about HTML tags?
3. Discuss about Attributes?
4. Explain adding flash?
5. Discuss about advanced E-mail links?
10 – MARKS:
1. Explain about video and audio to your web pages?
2. Discuss about link?
3. Explain detail about HTML?
4. Explain Basic Text Formatting?
UNIT- 2
TABLES:
 The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
 The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under
<td> are regular and left aligned by default.
Example Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
This will produce the following result –
Row 1, Column 1 Row 1, Column 2

Table Heading
 Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell.
 Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings, which are defined in <th> tag are
centered and bold by default.
Example Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000
Cellpadding and Cellspacing Attributes

 There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells.
 The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.
Example Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>5000</td>
</tr>
<tr>
<td>7000</td>
</tr>
</table>
</body>
</html>
Name Salary
Ramesh Raman 5000
Colspan and Rowspan Attributes

 Use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more
rows.
Example Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 3 Cell 1
Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one
cell.
 background attribute − You can set background image for whole table or just for
one cell.
You can also set border color also using bordercolor attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>

Row 1 Cell 1
Row 3 Cell 1
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:
Row 1 Cell 1
Row 3 Cell 1
Table Height and Width

 set a table width and height using width and height attributes.
 You can specify table width or height in terms of pixels or in terms of percentage
of available screen area.
Example Live De
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the
top of the table. This tag is deprecated in newer version of HTML/XHTML.
Example Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
result –
This is the caption
row 1, column 1 row 1, column 2
row 2, column 1 row 2, column 2
Table Header, Body, and Footer
 Tables can be divided into three portions − a header, a body, and a foot. The head
and foot are rather similar to headers and footers in a word-processed document
that remain the same for every page, while the body is the main content holder
of the table.
The three elements for separating the head, body, and foot of a table are −
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of
data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
This is the head of the table

Cell 1 Cell 2 Cell 3 Cell 4
This is the foot of the table
Nested Tables
You can use one table inside another table. Not only tables you can use almost all the
tags inside table data tag <td>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<tr>
<td>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>5000</td>
</tr>
<tr>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:
Name Salary
Ramesh Raman 5000
HTML Forms
 An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
 HTML Forms are required, when you want to collect some data from the site
visitor.
 For example, during user registration you would like to collect information such
as name, email address, credit card, etc.
HTML Form Controls:
There are different types of form controls that you can use to collect data using HTML
form −
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
 The <form> element is a container for different types of input elements:
text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
 The HTML <input> element is the most used form element.
 An <input> element can be displayed in many ways, depending on the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many

choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of

many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
OUTPUT:
First name:
Last name:
The <label> Element

Use of the <label> element in the example above.
 The <label> tag defines a label for many form elements.
 The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focuses on the input element.
 The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes)
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
OUTPUT:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
OUTPUT:
I have a bike
I have a car
I have a boat
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.
Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
OUPUT:
First name:
John
Last name:
Doe
Submit
Sending from data to the server :

 To post HTML form data to the server in URL-encoded format, you need to make an HTTP
POST request to the server and provide the HTML form data in the body of the POST
message in key=value format.
 You must also specify the data type using the Content-Type: application/x-www-form-
urlencoded request HTTP header.
 You can also send HTML form data to the server using the HTTP GET method. To do this,
HTML form data is passed in the URL as key=value pairs separated by ampersands (&), and
keys are separated from values by equality (=).
 In this HTML Form POST Example, we post the form data to the ReqBin echo URL in the
application/x-www-form-urlencoded format. C
 lick Send to run the HTML Form POST example online and see the results.
POST /echo/post/form HTTP/1.1

Host: reqbin.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 23
key1=value1&key2=value2
FRAMES:
 HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document.
Introducing Frameset:
 A collection of frames in the browser window is known as a frameset. The
window is divided into frames in a similar way the tables are organized: into rows
and columns.
SYNTAX:
<frameset cols=" ">............</frameset>
Example:
!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="https://www.javatpoint.com/html-table">
<frame src="https://www.javatpoint.com/css-table">
</frameset>
</html>
Output:
<Frame> elements: Tag-specific attribute

Attribute Value Description
cols Pixels It specifies the number and size of column spaces in the
% frameset. (Not Supported in HTML5)
*
rows Pixels It specifies the number and size of the rows spaces in the
% frameset. (Not Supported in HTML5)
*
r.No Attribute & Description
src
1 This attribute is used to give the file name that should be loaded in the frame.
Its value can be any URL. For example, src = "/html/top_frame.htm" will load
an HTML file available in html directory.
name
This attribute allows you to give a name to a frame. It is used to indicate which
2 frame a document should be loaded into. This is especially important when
you want to create links in one frame that load pages into an another frame,
in which case the second frame needs a name to identify itself as the target of
the link.
frameborder
3 This attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> tag
if one is given, and this can take values either 1 (yes) or 0 (no).
marginwidth
4 This attribute allows you to specify the width of the space between the left
and right of the frame's borders and the frame's content. The value is given in
pixels. For example marginwidth = "10".
marginheight
5
This attribute allows you to specify the height of the space between the top
and bottom of the frame's borders and its contents. The value is given in
pixels. For example marginheight = "10".
noresize
6 By default, you can resize any frame by clicking and dragging on the borders of
a frame. The noresize attribute prevents a user from being able to resize the
frame. For example noresize = "noresize".
scrolling
7 This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example scrolling =
"no" means it should not have scroll bars.
longdesc
8 This attribute allows you to provide a link to another page containing a long
description of the contents of the frame. For example longdesc =
"framedescription.htm"
Creating Links between Frames :

 Creating hyperlinks in HTML frames is a little more complicated than creating them in
standard web pages.
The key difference is outlined in the following:
 In a standard web page, clicking on a hyperlink will —by default— reload the original browser
window with the new page.
 In a framed web page, on the other hand, clicking on a hyperlink will —by default—
reload the frame in which the hyperlink is located in with the new page.
Loading the new page in the same frame, however, may only be desirable in certain situations.
In other situations, you may instead require that:
A. A hyperlink in one frame loads a new page in another frame. OR
B. A hyperlink loads a new page which breaks out of the frame.
In all cases, to make sure hyperlinks in a framed page perform their intended function, you will
have to do two things:
1. Use the name attribute to give each of your frames a special identity.
2. Use the target attribute in your hyperlinks.
There are also some standard frame target names predefined by the HTML specification which
control other possibilities of handling hyperlinks in frames.
 A Link in One Frame Loads a New Page in Another Frame
Example:
<html>
<head>
<title>HTML Frames - A Basic Frame Layout</title>
</head>
<frameset cols="25%,75%">
<frame src="menu.htm" name="menu">
<frame src="chapter1.htm" name="content">
</frameset>
</html>
Setting a default target frame using <base> Elements:

 The <base> target Attribute in HTML is used to specify the default target
for all hyperlinks and forms in the webpage.
 This attribute could also be overridden by the use of the target attribute
for each hyperlink and the Form.
Syntax:
<base target="_blank|_self|_parent|_top|framename" >
Attribute Values:
 _blank: It opens the link in a new window.
 _self: It opens the linked document in the same frame. it is the default value.
 _parent: It opens the linked document in the parent frameset.
 _top: It opens the linked document in the full body of the window.
 framename: It opens the linked document in the named frame.
Example: This example illustrates the use of target attribute in the <base>
element.
Example:
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<title>
HTML Base target Attribute
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML Base target Attribute</h2>
<a href="ide.geeksforgeeks.org/" alt="GFG">

Geeks Link
</a>
</body>
</html>
Output:
Nested frame sets

 Framesets may be nested to any level.
 In the following example, the outer FRAMESET divides the available space into
three equal columns. The inner FRAMESET then divides the second area into two
rows of unequal height.
Example:
<FRAMESET cols="33%, 33%, 34%">

...contents of first frame...
<FRAMESET rows="40%, 50%">
...contents of second frame, first row...
...contents of second frame, second row...
</FRAMESET>
...contents of third frame...
</FRAMESET>
Inline or Floating Frames with <iframe>:
 Inline Frame or an iframe is allows us to open new pages inside main pages.
Inline frames are also referred to as Floating frames.
 <iframe> .. </iframe> tag is used to create inline or floating frame.
Attributes of <iFrame> tag :

name: used to set a name for the iframe.
src: Specifies the url of the document to be loaded into the iframe.
Width: used to specify the width of the iframe.
Height: used to specify the height of the iframe.
Frameborder: used to specify the whether to have a border for the iframe or
not. This attribute possibly takes two values. i.e, 1 for on and 0 for off.
Scrolling: used to specify whether the iframe should have scrolling capability or
not. This attribute possibly takes two values i.e, 1 for on and 0 for off.
vspace: used to leave gaps on the top and bottom of the iframe. This attribute is
similar to cellspacing attribute of a table tag.
hspace: used to leave gaps on the sides of the iframe. This attribute is similar to
cellpadding attribute of a table tag.
marginwidth: used to specify the number of pixels to be left as the left/right
margins.
marginheight: used to specify the number of pixels to be left as the top/bottom
margins.
Example:
<iframe name="iname" src="targetpg.html"></iframe>
Hidden attribute can be added in HTML5
<iframe name='myiframe' src='uploadck.php' width="300" height="300" hidden>
</iframe>
ONE MARK:
1. Each cell of the table can be represented by using __________
a) <tr>
b) <td>
c) <th>
d) <thead>
2. For heading we can use ____________

a) <td>
b) <tr>
c) <thead>
d) <th>
3. Headings of table lies inside ___________

a) <thead>
b) <tfoot>
c) <th>
d) <tbody>
4. Which of the following is not the element associated with HTML table layout?
a) size
b) spanning
c) alignment
d) color
5. Which of the following element is not associated with a class attribute?

a) Row
b) <thead>
c) Column cell
d) Rows
6. For adding caption to the table we use ____________

a) <caption>
b) <thead>
c) <th>
d) <tr>
7. border-spacing is given in _____________

a) pixels
b) cm
c) mm
d) inch
8. Borders can’t be applied on ________________

a) <th>
b) <td>
c) <tr>
d) <thead>
9. Which attribute defines numbers of columns in a group?
a) width=multi-length[CN].
b) span=number[CN].
c) scope=scope-name[CN].
d) headers=idrefs[CS].
10. Which of the following does not specify a column width?

a) Fixed
b) Percentage
c) Proportional
d) Pixels
11. Scope attribute can’t have the value __________

a) row
b) rowgroup
c) col
d) <head>
12. Which of the following is not the value for frame attribute?
a) above
b) void
c) none
d) box
13. Which of the following is not the value for rules attribute?
a) vsides
b) rows
c) all
d) groups
14. Which of the following is not the value for align attribute?
a) justify
b) char
c) middle
d) left
15. valign attribute does not take the value __________________

a) justify
b) middle
c) baseline
d) bottom
16. What is the default type of ‘type’ attribute of <input> element?

a) Text
b) Password
c) Numerals
d) Special Characters
17. Which of the following is a new input attribute introduce by HTML5?
a) text
b) checkbox controls
c) submit buttons
d) date
18. How does the color attribute work?

a) Changes color of the text
b) Changes background color
c) The color picker is defined by it
d) Changes color of the text as well as background
19. Which attribute is used for activation of JavaScript?

a) button
b) checkbox
c) url
20. Which attribute defines the file-select field?

a) file
b) checkbox
c) button
d) text
21. How image attribute works?

a) Sets an image background
b) Set an image as submit button
c) Set an image anywhere on the page
d) Bring default image to the page
22. month attribute defines ___________

a) the only month
b) month and year
c) date
d) date and time
23. week attribute defines ____________

a) week
b) year
c) week and year
d) week, month and year
24. tel attribute is supported by the _________ browser.

a) Chrome
b) Safari
c) Opera
d) Internet Explorer
25. Which attribute is not used on new forms?
a) size
b) text
c) name
d) maxlength
26. Which of the following is not used with password attribute?

a) name
b) size
c) maxlength
d) min
27. Which element is used to create multi-line text input?

a) text
b) textarea
c) submit
d) radio button
28. Which attribute is not used for the radio type?

a) name
b) value
c) checked
d) selected
29. Which attribute is used with <select> element?

a) multiple
b) selected
c) name
d) value
30The __________ attribute lets you turn off scrolling in a frame.

A. SCROLLBAR
B. SCROLLING
C. OFFSCROLL
D. none of the above
31. Which inline function embeds an independent HTML document into current document?
A. <div>
B. <span>
C. <form>
D. <iframe>
32. Which from following is not a type of screen frames in HTML

A. uframe
B. iframe
C. noframe
D. frameset
33. What is the use of iframe in HTML?
A. to display a web page without browser.
B. to display a web page within a web page.
C. to display a web page with animation effect.
D. All of the Above.
34. The __________ attribute indicates the number of rows in a frameset.

A. TR
B. TD
C. ROWS
D. HORIZONTAL
35. Which tag is not included in a frameset page?

A. div
B. body
C. title
D. head
36. Which of the following is a tag used

A. <FRAME>
B. <NOFRAMES>
C. <FRAMESET>
D. All of the above
37. What does the tag <NOFRAMES> do?

A. Specifies that no frames are included in the HTML file.
B. Allows information after the tag to be displayed with browsers that cannot handle frames.
C. Tells the browser to ignore the frame content.
D. None of these.
38. Which attribute of the frameset tag creates two horizontal frames?
A. Cols
B. Rows
C. Both
D. None
39. Which inline function embeds an independent HTML document into current document?
A. <div>
B. <span>
C. <form>
D. <iframe>
5 – Mark:
1. Explain Nested tables?
2. Discuss sending a default target frame using <base> elements?
3. Explain Nested frameset?
4. Sending form data to the server?
10 – Mark:
1. Explain details about Tables with example?
2. Discuss about Forms with example?
3. Explain about Frames with example?
4. Explain Inline or Floating frames with <iframe>?
UNIT - 3
Cascading Style Sheets (CSS):
Introducing css:
 Cascading Style Sheets (CSS) is used to format the layout of a webpage.
 With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or
background colors
CSS properties:
Properties-name Syntax Description
background-color background-color:red; It defines the background color

of that element.
color color: lightgreen; It defines the color of text of

an element
padding padding: 20px; It defines the space between

content and the border.
margin margin: 30px; margin-left: It creates space around an

element.
font-family font-family: cursive; Font-family defines a font for a

particular element.
Font-size font-size: 50px; Font-size defines a font size for

a particular element.
text-align text-align: left; It is used to align the text in a

selected position.
CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more
about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
This is a heading
This is a paragraph.
CSS Border
The CSS border property defines a border around an HTML element.
Example
p{
border: 2px solid powderblue;
}
OUPUT:
This is a heading
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
Example
p{
padding: 30px;
}
OUTPUT:
This is a heading
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example:
p{
margin: 50px;
}
CONTROLLING TAXT:
 The CSS text formatting properties are used to format text, style the text and
perform different types of manipulations like word spacing, alignment,
justification, and text transformation.
Syntax:
The Syntax to write this property:
Selector {
property-name : /*value*/
}
TEXT FORMATTING:
 The color property is used to set the color of a text.

 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space between the
letters that make up a word.
 The word-spacing property is used to add or subtract space between the
words of a sentence.
 The text-indent property is used to indent the text of a paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and strikethrough
text.
 The text-transform property is used to capitalize text or convert text to
uppercase or lowercase letters.
 The white-space property is used to control the flow and formatting of text.
 The text-shadow property is used to set the text shadow around a text.
Set the Text Color

 The following example demonstrates how to set the text color. Possible value
could be any color name in any valid format.
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>
OUTPUT:
This text will be written in red.
Set the Text Direction

 The following example demonstrates how to set the direction of a text.
Possible values are ltr or rtl
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>
OUTPUT:
This text will be renedered from right to left
Set the Space between Characters

Possible values are normal or a number specifying space.
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>
OUTPUT:
T h i s t e x t i s h a v i n g s p a c e b e t w e e n l e t t e r s .
Set the Space between Words

values are normal or a number specifying space.
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>
OUTPUT:
This text is having space between words.
Set the Text Indent

values are % or a number specifying indent space.
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>
OUTPUT:
This text will have first line indented by 1cm and this line will remain at its actual
position this is done by CSS text-indent property
Set the Text Alignment

values are left, right, center, justify.
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">

This will be center aligned.
</p>
<p style = "text-align:left;">

This will be left aligned.
</p>
</body>
</html>
OUTPUT:
This will be right aligned.
This will be center aligned.
This will be left aligned.
Decorating the Text

values are none, underline, overline, line-through, blink.
EXAMPLE:
<html>
<head>
</head>
<body>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>
OUPUT:
This will be underlined
This will be striked through.
This will have a over line.
This text will have blinking effect
Set the Text Cases

values are none, capitalize, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">

This will be in uppercase
</p>
<p style = "text-transform:lowercase;">

This will be in lowercase
</p>
</body>
</html>
OUTPUT:
This Will Be Capitalized

THIS WILL BE IN UPPERCASE
this will be in lowercase
Set the Text Shadow

<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
OUTPUT:
If your browser supports the CSS text-shadow property, this text will have a blue
shadow.
The pseudo-classes
 A pseudo-class can be defined as a keyword which is combined to a selector that defines
the special state of the selected elements.
 It is added to the selector for adding an effect to the existing elements based on their
states. For example, The ":hover"
A pseudo-class starts with a colon (:)
Syntax
selector: pseudo-class
{
property: value;
}
pseudo- Description
class
:active IIt is used to add style to an active element.
:hover IIt adds special effects to an element when the user moves the mouse
pointer over the element.
:link IIt adds style to the unvisited link.
:visited IIt adds style to a visited link.
:lang IIt is used to define a language to use in a specified element.
:focus IIt selects the element which is focused by the user currently.
:first-child It adds special effects to an element, which is the first child of another
element.
:hover pseudo-class
<html>
<head>
<style>
body{
text-align:center;
}
h1:hover{
color:red;
}
h2:hover{
color:blue;
}
</style>
</head>
<body>
<h1>Hello world </h1>
<h2>This is an example of :hover pseudo class</h2>
</body>
</html>
OUTPUT:
Hello world
This is an example of :hover pseudo class

Selectors:
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
Example:
p{
text-align: center;
color: red;
}
Output:
Every paragraph will be affected by the style.
Me too!
And me!
Introducing the box model:

 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 every HTML element.
 It consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:
Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent
Example:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
OUTPUT:
Demonstrating the Box Model
The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.
This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
More cascading style sheet:

Links:
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

OUTPUT:
A Blue Heading
A red paragraph.
Internal CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
OUTPUT:
This is a heading
External CSS
An external style sheet is used to define the style for many HTML pages.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
OUTPUT:
This is a heading
 The external style sheet can be written in any text editor.
 The file must not contain any HTML code, and must be saved with a .css
extension.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Lists:
Lists can be classified as ordered lists and unordered lists
o Set the distance between the text and the marker in the list.
o Specify an image for the marker instead of using the number or bullet point.
o Control the marker appearance and shape.
o Place the marker outside or inside the box that contains the list items.
o Set the background colors to list items and lists.
The CSS properties to style the lists are given as follows:
o list-style-type: This property is responsible for controlling the appearance and shape of the
marker.
o list-style-image: It sets an image for the marker instead of the number or a bullet point.
o list-style-position: It specifies the position of the marker.
o list-style: It is the shorthand property of the above properties.
o marker-offset: It is used to specify the distance between the text and the marker. It is
unsupported in IE6 or Netscape 7.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Lists</title>
<style>
.num{
list-style-type:decimal;
}
.alpha{
list-style-type:lower-alpha;
}
.roman{
list-style-type:lower-roman;
}
.circle{
list-style-type:circle;
}
.square{
list-style-type:square;
}
.disc{
list-style-type:disc;
}
</style>
</head>
<body>
<h1>
Welcome to the javaTpoint.com
</h1>
<h2>
Ordered Lists
</h2>
<ol class="num">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="alpha">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="roman">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<h2>
Unordered lists
</h2>
<ul class="disc">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="circle">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="square">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
OUTPUT:
Welcome to the javaTpoint.com
Ordered Lists
1. one
2. two
3. three
a. one
b. two
c. three
i. one
ii. two
iii. three
Unordered lists
 one
 two
 three
o one
o two
o three
 one
 two
CSS Table
apply style on HTML tables for better look and feel. There are some CSS properties that are widely
used in designing table using CSS:
o border
o border-collapse
o padding
o width
o height
o text-align
o color
o background-color
CSS Table Border
<style>
table, th, td {
border: 1px solid black;
}
</style>
CSS Table Border Collapse
<style>
table, th, td {
border-collapse: collapse;
}
</style>
CSS Table Padding
<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
OUTPUT:
First_Name Last_Name Marks

Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
CSS Outline
 CSS outline is just like CSS border property. It facilitates you to draw an extra border around
an element to get visual attention.
It is as easy as to apply as a border.

Examples:
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: #eee;
outline: 3px solid red;
border: 3px solid lightgreen;
padding: 5px 10px;
}
</style>
<div class="box">Welcome to JavaTpoint</div>
</body>
</html>
Output:
Welcome to Java T point
Outline-width:It is similar to margin and padding. It can be either an absolute value or a relative
value or one of the predefined outline width values i.e. thin, medium or thick. It is preferred to use
either an absolute value or a relative value because different browsers interpret differently while
using predefined outline width values like thin, medium or thick.
Outline-color:It specifies the color that you use for the outline. It supports all the colors available in
HTML and CSS.
Outline-style:In the above example, we have used only solid outline style while there are a lot of
outline style i.e. hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
Outline offset
The outline offset is used to create a distance between outline and border.
:focus and :activate pseudo classs generated contents

:focus Pseudo-class:
 This pseudo-class is used to select an element that is currently focused by the user. It
works on user input elements used in forms and is triggered as soon as the user clicks
on it. In the following example, the background color of the input field which is
currently focused changes.
Example: This example shows the focus pseudo-class in CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
form{
width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 2rem;
}
label{
width: 30%;
}
input{
background-color: default;
float: right;
}
input:focus{
background-color: grey;
}
h1, h2{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:focus Pseudo-class</h2>
<form>
<label for="username">Username:</label>
<input type="text" name="username"
placeholder="Enter your username" />
<br>
<label for="emailid">Email-Id:</label>
<input type="email" name="emailid"
placeholder="Enter your email-id" />
<label for="Password">Password:</label>
<input type="password" name="Password"
placeholder="Enter your password" />
</form>
</body>
</html>
Output:
:active Pseudo-class:
This pseudo-class is used to select an element that is activated when the user clicks on
it. The following example demonstrates that when you click on the box, its background
color changes for a moment.
Example: This example shows the active pseudo-class in CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box{
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}
.box:active{
background-color: orange;
}
h1, h2{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:active Pseudo-class</h2>
<div class="box">
My color changes for a moment if you click me!
</div>
</body>
</html>
Output:
Miscellaneous properties:
CSS Class Name HTML elements on which it is Properties defined
applied
cWarningFont FONT color: red;
cErrorFont FONT color: red;
cListPopupFont FONT color: #FFFFFF;
calenderCls IMG height: 21px;

vertical-align: top;
border: 0;
#linkhovermenu TR position: absolute;
background-color: #BDE0EA;
line-height: 18px;
z-index: 100;
visibility: hidden;
font-family : arial,comic sans
ms,technical;
color : #FFFFFF;
background-color : #396570;
text-align:center;
#linkhovermenu a A text-decoration: none;
text-align:center;
font-family : arial,comic sans
ms,technical;
font-size : 9pt;
font-weight : normal;
color : #FFFFFF;
display: block;
width:100%;
#linkhovermenu A background-color: #DCE2ED;
a:hover color: #396570;
 he @import: rule imports another style sheet into the current style sheet.
 The @charset rule indicates the character set the style sheet uses.
 The @font-face rule is used to exhaustively describe a font face for use in a document.
 The !important rule indicates that a user-defined rule should take precedence over the
author's style sheets.
The @import rule
The @import rule allows you to import styles from another style sheet. It should appear right at the
start of the style sheet before any of the rules, and its value is a URL.
<style type = "text/css">


</style>
The @charset Rule
The @charset rule must be written right at the beginning of the style sheet without even a space
before it. The value is held in quotes and should be one of the standard character-sets. For example
−


</style>
The @font-face Rule
In general, @font-face is extremely complicated, and its use is not recommended for any except
those who are expert in font metrics.


</style>
The !important Rule
The !important rule provides a way to make your CSS cascade. It also includes the rules that are to
be applied always. A rule having a !important property will always be applied, no matter where
that rule appears in the CSS document.


</style>
So, if you wanted to make sure that a property always applied, you would add the
<html>
<head>
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>
OUTPUT:
Tutorialspoint.com
Positioning and lagout wit:
The position Property
 The position property specifies the type of positioning method used for an element.
There are five different position values:
 static
 relative
 fixed
 absolute
 sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the position value.
position: static;
 HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
 An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:
 This <div> element has position: static;
Example:
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
 An element with position: relative; is positioned relative to its normal position.
 Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it
to be adjusted away from its normal position. Other content will not be adjusted to fit into any
gap left by the element.
 This <div> element has position: relative;
Example:
div.relative {
position: relative;
left: 30px;
}
position: fixed;
 An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left properties
are used to position the element.
 A fixed element does not leave a gap in the page where it would normally have been located.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
position: absolute;
 An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).
 However; if an absolute positioned element has no positioned ancestors, it uses the document
body, and moves along with page scrolling.
div.relative {
position: relative;
width: 400px;
height: 200px;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
position: sticky;
 An element with position: sticky; is positioned based on the user's scroll position.
 A sticky element toggles between relative and fixed, depending on the scroll position.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Page Layout css:

CSS layout is easy to design. We can use CSS layout to design our web page such as home page,
contact us, about us etc.
There are 3 ways to design layout of a web page:
1. HTML Div with CSS: fast and widely used now.

2. HTML Table: slow and less preferred.
3. HTML Frameset: deprecated now.
A CSS layout can have header, footer, left pane, right pane and body part. Let's see a simple
example of CSS layout.
CSS layout example
<!DOCTYPE html>
<html>
<head>
<style>
.header{margin:-8px -8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-
align:center;padding:10px;}
.container{width:100%}
.left{width:15%;float:left;}
.body{width:65%;float:left;background-color:pink;padding:5px;}
.right{width:15%;float:left;}
.footer{margin:-8px;clear:both;background-image:linear-
gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
</style>
</head>
<body>
<div class="header"><h2>JavaTpoint</h2></div>
<div class="container">
<div class="left">
<p>Left Page</p>
</div>
<div class="body">
<h1>Body Page</h1>
<p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content goes here</p>
<p>Page Content goes here</p>
</div>
<div class="right">
<p>Right Page</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Output:
Design Issues:
 It was based on a table architecture system.
 Styling was not free of content.
 Unstructured design work.
 Fewer media applications.
 No proper functionality for high graphic elements.
 Fewer animations.
 Less dynamic design (mainly static)
 Low presentation reflexes.
ONE MARK:
1. What is CSS?
a) CSS is a style sheet language
b) CSS is designed to separate the presentation and content, including layout, colors, and fonts
c) CSS is the language used to style the HTML documents
2. Which of the following tag is used to embed css in html page?
a) <css>
b) <!DOCTYPE html>
c) <script>
d) <style>
3. Which of the following CSS selectors are used to specify a group of elements?
a) tag
b) id
c) class
d) both class and tag
4. Which of the following has introduced text, list, box, margin, border, color, and background
properties?
a) HTML
b) PHP
c) CSS
d) Ajax
5. Which of the following CSS framework is used to create a responsive design?
a) django
b) rails
c) larawell
d) bootstrap
6. Which of the following CSS selector is used to specify a rule to bind a particular unique element?
a) tag
b) id
c) class
d) both class and tag
7. Which of the following type of HTML tag is used to define an internal style sheet?
a) <script>
b) <link>
c) <class>
d) <style>
8. Which of the following CSS property is used to make the text bold?
a) text-decoration: bold
b) font-weight: bold
c) font-style: bold
d) text-align: bold
9. What will be the output of following CSS code snippet?
h1 {color: "green";}
a) nothings happen
b) error occurs
c) heading becomes dark-green
d) heading becomes green
10. Which of the following CSS style property is used to specify an italic text?
a) style
b) font
c) font-style
d) @font-face
11. What will be the output of following CSS code snippet?
h1 {color: red text-decoration: underline; font-style: italic;}
a) color: red, text-decoration: underline works
b) only font-style: italic works
c) color: red, text-decoration: underline and font-style: italic all works
d) text-decoration: underline and font-style: italic works
12. Which of the following are the CSS Extension Prefixes for Webkit?
a) -chrome
b) -web
c) -o-
d) -webkit.
13. Which of the following is the correct syntax to link an external style sheet in the HTML file?
a) <link rel=”stylesheet” href=”style.css” />
b) <link rel=”stylesheet” src=”style.css” />
c) <style rel=”stylesheet” src=”style.css” />
d) <style rel=”stylesheet” link=”style.css” />
View Answer
14. Which of the following is the first CSS specification to become an official W3C
Recommendation?
a) CSS level 2
b) (X)HTML CSS
c) CSS level 1
d) CSS level 2.1
15. Which of the following function defines a linear gradient as a CSS image?
a) gradient()
b) linear-gradient()
c) grayscale()
d) image()
16. Which of the following CSS property can be used to set the image as a border instead of the
border style?
a) background-image-source
b) background-image
c) border-image-source
d) border-image
17. Which of the following CSS property defines the different properties of all four sides of an
element’s border in a single declaration?
a) border-collapse
b) border-width
c) padding
d) border
18. Which of the following is the correct way to apply CSS Styles?
a) in an external CSS file
b) inside an HTML element
c) inside the <head> section of an HTML page
d) all of the mentioned
19. Which of the following CSS property sets the font size of text?
a) font-size
b) text-size
c) text
d) size
20. Which of the following is not the property of the CSS box model?
a) margin
b) color
c) width
d) height
21. Which of the following CSS property sets what kind of line decorations are added to an
element, such as underlines, overlines, etc?
a) text-decoration
b) text-style
c) text-decoration-line
d) text-line
22. Which of the following CSS property specifies the look and design of an outline?
a) outline-style
b) outline-format
c) outline-font
d) none of the mentioned
23. What will be the output of the following CSS code snippet?
span {
border: 1px solid red;
outline: green dotted thick;
}
a) All span elements will have a green thick border and a red outline
b) All span elements will have a red border and a green dotted outline
c) All span elements will have a outer green dotted border and an inner red border
d) All span elements will have an outer red border and inner green dotted border
24. Which of the following CSS property sets the shadow for a box element?
a) set-shadow
b) box-shadow
c) shadow
d) canvas-shadow
25. Which of the following CSS property is used to set the color of the text?
a) text-decoration
b) pallet
c) colour
d) color
26. Which of the following CSS Property controls how an element is positioned?
a) static
b) position
c) fix
d) set
27. Which of the following CSS selector selects the elements that are checked?
a) :checked
b) E ~ F
c) ::after
28. Which of the following is an appropriate value for the overflow element?
a) scroll
b) hidden
c) auto
29. Which of the following CSS property is used to specify table borders in CSS?
a) table:border
b) table
c) border
30. Which of the following property is used to align the text in a table?
a) text-align
b) align
c) text
31. Which of the following CSS Property sets the stacking order of positioned elements?
a) y-index
b) z-index
c) x-index
View Answer
32. What will be the output of the following CSS code?
div {
border-width:5px;
border-style:dotted solid double dashed;
}
a) Box having dotted bottom outline, solid right outline, double top outline and dashed left outline
b) Box having dotted bottom outline, solid left outline, double top outline and dashed left outline
c) Box having dotted top outline, solid right outline, double bottom outline and dashed left
outline
d) Box having dotted top outline, solid left outline, double bottom outline and dashed right outline
33. Which of the following property allows a marquee to be used in the case of a text-overflow?
a) overflow-marquee
b) overflow-style
c) overflow-text
34. Which of the following CSS property defines the space between cells in a table?
a) border-spacing
b) border-style
c) border
35. Which of the following CSS3 property can be used to allow line breaks within words?
a) line-break
b) line-wrap
c) word-wrap
d) word-break
36. Which of the following is not a combinatory?
a) *
b) >
c) ~
d) +
37. Which of the following selects all elements that are siblings of the specified element?
a) child selector
b) general sibling selector
c) adjacent sibling selector
d) descendant selector
38. Which of the following adds the value of a counter to an element?
a) counter-increment
b) content
c) counter()
d) counter-reset
39. Which of the following specifies how to slice border image?
a) border-image
b) border-image-source
c) border-image-outset
d) border-image-slice
40. Which web font was developed by Apple and Microsoft in the late 1980s?
a) TTF
b) OTF
c) WOFF
d) WOFF 2.0
41. Which of the following is a format for scalable computer fonts?
a) EOT
b) WOFF
c) OTF
d) WOFF 2.0
42. Which font format is used in web pages?
a) WOFF 2.0
b) WOFF
c) SVG Fonts
d) EOT
43. What value lets animation to play forwards first then backward?
a) alternate
b) alternate-reverse
c) reverse
d) normal
44. Which value specifies animation with slow start?
a) ease-out
b) ease-in
c) linear
d) ease
45. How many values are there for animation-full-mode property?
a) 1
b) 2
c) 3
d) 4
46. Which of the following specifies animation code?
a) @keyframes
b) animation
c) animation-delay
d) animation-direction
47. Which specifies the speed curve of animation?
a) animation-iteration-count
b) animation-name
c) animation-play-state
d) animation-timing-function
48. How many values are there for the object-fit property?
a) 2
b) 5
c) 3
d) 4
49. Which property specifies the number of columns an element should be divided into?
a) column-rule
b) column-count
c) column-gap
d) column-fill
50. Which property is used for setting column-width and column-count?
a) columns
b) column-width
c) column-span
d) column-width-rule
5 – MARK
1.Explain CSS Properties?
2.Discuss text formatting?
3.Explain text pseudo?
4.Explain page layout?
10 – Mark:
1. Explain details about css with example?
2. Discuss about links, list, tables with example?
3. Explain about miscellaneous properties with example?
4. Explain the :focus and :active pseudo classes generated content?
UNIT-4
JavaScript
 JavaScript (JS) is a lightweight, interpreted, or just-in-time
 compiled programming language with first-class functions.
 While it is most well-known as the scripting language for Web pages, many non-browser
environments also use it,
 JavaScript is a prototype-based,
 multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and
declarative (e.g. functional programming) styles.
HISTORY:
 JavaScript was invented by Brendan Eich in 1995.
 It was developed for Netscape 2, and became the ECMA-262 standard in 1997.
 After Netscape handed JavaScript over to ECMA, the Mozilla foundation continued to develop
JavaScript for the Firefox browser. Mozilla's latest version was 1.8.5. (Identical to ES5).
 Internet Explorer (IE4) was the first browser to support ECMA-262 Edition 1 (ES1).
Year ECMA Browser
1995 JavaScript was invented by Brendan Eich
1996 Netscape 2 was released with JavaScript 1.0
1997 JavaScript became an ECMA standard (ECMA-262)
1997 ES1 ECMAScript 1 was released
1997 ES1 IE 4 was the first browser to support ES1
1999 ES2 IE 5 was the first browser to support ES2
2000 ES3 IE 5.5 was the first browser to support ES3
2000 Firefox 1 was released with JavaScript 1.5
2008 ES4 ECMAScript 4 was abandoned
2011 ES5 IE 9 was the first browser to support ES5 *

2011 ES5 Firefox 4 was released with JavaScript 1.8.5
2012 ES5 Full support for ES5 in Safari 6
2012 ES5 Full support for ES5 in IE 10
2012 ES5 Full support for ES5 in Chrome 23
2013 ES5 Full support for ES5 in Firefox 21
2013 ES5 Full support for ES5 in Opera 15
2014 ES5 Full support for ES5 in all browsers
2016 ES6 Full support for ES6 in Chrome 51
2016 ES6 Full support for ES6 in Opera 38
2016 ES6 Full support for ES6 in Safari 10
2017 ES6 Full support for ES6 in Firefox 54
2017 ES6 Full support for ES6 in Edge 15
2018 ES6 Full support for ES6 in all browsers **
How To Add Script To Your Pages:

You can include JavaScript in your HTML in two ways:
 Writing the code in your HTML
 Including it as a link to an external file
For the most part, you will include the JavaScript as an external file.
The Script Tag

 The <script> tag is what we use to includes our JavaScript. It's a lot like the <link> tag
you've already been using to include your CSS files.
 Here's a very basic snippet of JavaScript using the script tag. This JavaScript is
written directly into our HTML page.
 It will call and alert box as soon as the page loads.
<script type="text/javascript">
alert("This alert box was called with the onload event");
</script>
 When using the script tag, we must always use the attribute name and value
of type="text/javascript".
Using the script tag to include an external JavaScript file
 To include an external JavaScript file, we can use the script tag with the
attribute src.
 You've already used the src attribute when using images. The value for the src
attribute should be the path to your JavaScript file.
<script type="text/javascript" src="path-to-javascript-file.js"></script>
 This script tag should be included between the <head> tags in your HTML
document.
JavaScript Files
JavaScript files are not HTML files or CSS files.
 Always end with the js extension
 Only include JavaScript
It's customary to put all JavaScript files in a folder called js on websites, like so:
JavaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of variables in
JavaScript : local variable and global variable.
1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global variable
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
Correct JavaScript variables
var x = 10;
var _value="sonoo";
Incorrect JavaScript variables

var 123=30;
var *aa=320;
Example of JavaScript variable
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
Output of the above example
30
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within the function or
block only. For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
Or,
<script>
If(10<13){
var y=20;//JavaScript local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared outside the
function or declared with window object is known as global variable. For example:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
Javascript Data Types

 JavaScript provides different data types to hold different types of values. There are two
types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
 JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine. You need to use var here to specify the
data type.
 It can hold any type of values such as numbers, strings etc. For example:
var a=40;//holding number
var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description
String represents sequence of characters e.g. "hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or true
Undefined represents undefined value
Null represents null i.e. no value at all
JavaScript non-primitive data types
The non-primitive data types are as follows:
Data Type Description
Object represents instance through which we can access members
Array represents group of similar values

RegExp represents regular expression
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands. For example:
var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. The following
operators are known as JavaScript arithmetic operators.
Operator Description Example
+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands. The comparison operators are as
follows:
== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false
JavaScript Bitwise Operators
The bitwise operators perform bitwise operations on operands. The bitwise operators are as
follows:
& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2

AD
JavaScript Logical Operators
The following operators are known as JavaScript logical operators.
&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true

JavaScript Assignment Operators
The following operators are known as JavaScript assignment operators.
= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0
JavaScript Special Operators
The following operators are known as JavaScript special operators.
Operator Description
(?:) Conditional Operator returns value based on the condition. It is like if-else.
, Comma Operator allows multiple expressions to be evaluated as single statement.
delete Delete Operator deletes a property from the object.
in In Operator checks if object has the given property
instanceof checks if the object is an instance of given type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by the generator's iterator.
JavaScript Control Structures

 The if statement
 if...else
 if...else if...else
 The switch statement
 The for loop
 for...of
 for...in
 The while loop
 do...while
 break and continue
 Nested control structures
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is true or false.
There are three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
JavaScript If statement
It evaluates the content only if expression is true.
Syntax:
if(expression){
//content to be evaluated
}
Flowchart of JavaScript If statement
the simple example of if statement in javascript.

<script>
var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
value of a is greater than 10
JavaScript If...else Statement

 It evaluates the content whether condition is true of false. The syntax of JavaScript if-else
statement is given below.
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
Flowchart of JavaScript If...else statement
the example of if-else statement

<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
a is even number
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions.
Syntax:
if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
}
else if(expression3){
}
else{
//content to be evaluated if no expression is true
}
simple example ::
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
}
else if(a==20){
}
else{
document.write("a is not equal to 10, 15 or 20");
}
</script>
a is equal to 20
javaScript Switch
 The JavaScript switch statement is used to execute one code from multiple expressions.
 It is just like else if statement that we have learned in previous page. But it is convenient
than if..else..if because it can be used with numbers, characters etc.
switch statement syntax:
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:
code to be executed if above values are not matched;
}
the simple example of switch statement in javascript.

<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script>
B Grade
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in loops.
It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
1) JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It should be used if
number of iteration is known. The syntax of for loop is given below.
for (initialization; condition; increment)
{
code to be executed
}
Let’s see the simple example of for loop in javascript.
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
Output:
1
2
3
4
5
2) JavaScript while loop

 The JavaScript while loop iterates the elements for the infinite number of times. It should be
used if number of iteration is not known.
 The syntax of while loop is given below.
while (condition)
{
code to be executed
}
the simple example of while loop in javascript.
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
Output:
11
12
13
14
15
3) JavaScript do while loop
 The JavaScript do while loop iterates the elements for the infinite number of times like
while loop.
 But, code is executed at least once whether condition is true or false. The syntax of do while
loop is given below.
do{
code to be executed
}while (condition);
Let’s see the simple example of do while loop in javascript.
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
Output:
21
22
23
24
25
4) JavaScript for in loop
The JavaScript for in loop is used to iterate the properties of an object. We will discuss about it
later.
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function many times to
reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it save coding.
2. Less coding: It makes our program compact. We don’t need to write many lines of code each time to
perform a common task.
JavaScript Function Syntax
The syntax of declaring function is given below.

function functionName([arg1, arg2, ...argN]){
//code to be executed
}
JavaScript Functions can have 0 or more arguments.
JavaScript Function Example
Let’s see the simple example of function in JavaScript that does not has arguments.
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
CALL FUNCTION
JavaScript Function Arguments
We can call function by passing arguments. Let’s see the example of function that has one
argument.
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
AD
CLICK
Function with Return Value
We can call function that returns a value and use it in our program. Let’s see the example of
function that returns value.
<script>
function getInfo(){
return "hello javatpoint! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>

hello javatpoint! How r u?
JavaScript Function Object
 In JavaScript, the purpose of Function constructor is to create a new Function object.

 It executes the code globally. However, if we call the constructor directly, a function is
created dynamically but in an unsecured way.
Syntax
1. new Function ([arg1[, arg2[, ....argn]],] functionBody)
Parameter
arg1, arg2, .... , argn - It represents the argument used by function.

functionBody - It represents the function definition.
JavaScript Function Methods
Let's see function methods with description.

Method Description
apply() It is used to call a function contains this value and a single array of arguments.
bind() It is used to create a new function.
call() It is used to call a function contains this value and an argument list.
toString() It returns the result in a form of a string.
Example 1
<script>
var add=new Function("num1","num2","return num1+num2");
document.writeln(add(2,5));
</script>
Output:
7
JavaScript Message Boxes: alert(), confirm(), prompt():

Dialog boxes
 There are three types of dialog boxes supported in JavaScript that are alert,
confirm, and prompt.
 These dialog boxes can be used to perform specific tasks such as raise an alert, to get
confirmation of an event or an input, and to get input from the user.
JavaScript provides built-in global functions to display popup message boxes for different
purposes.
 alert(message): Display a popup box with the specified message with the OK button.
 confirm(message): Display a popup box with the specified message with OK and Cancel
buttons.
 prompt(message, defaultValue): Display a popup box to take the user's input with the
OK and Cancel buttons.
alert()
 The alert() method in JavaScript is used to display a virtual alert box. It is mostly used to
give a warning message to the users.
 It displays an alert dialog box that consists of some specified message (which is optional)
and an OK button.
 When the dialog box pops up, we have to click "OK" to proceed.
SYNATX:
alert(message)
EXAMPLE:
<html>
<head>
<script type = "text/javascript">
function fun() {
alert ("This is an alert dialog box");

}
</script>
</head>
<body>
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
</form>
</body>
</html>
OUTPUT:
confirm()
Use the confirm() function to take the user's confirmation before starting some task. For
example, you want to take the user's confirmation before saving, updating or deleting data.
SYNATX:
bool window.confirm([message]);
EXAMPLE:
var userPreference;
if (confirm("Do you want to save changes?") == true) {

userPreference = "Data saved successfully!";
} else {
userPreference = "Save Cancelled!";
}
OUTPUT:
Demo: confirm()
Save Data
prompt()
Use the prompt() function to take the user's input to do further actions. For example, use
the prompt() function in the scenario where you want to calculate EMI based on the user's
preferred loan tenure.
SYNATX:
string prompt([message], [defaultValue]);
EXAMPLE:
var name = prompt("Enter your name:", "John");
if (name == null || name == "") {

document.getElementById("msg").innerHTML = "You did not entert anything. Please enter your
name again";
}
else
{
document.getElementById("msg").innerHTML = "You enterted: " + name;
}
OUTPUT:
Demo: prompt()
Click to enter your name
ONE MARK:
1. What is JavaScript?
a) JavaScript is a scripting language used to make the website interactive
b) JavaScript is an assembly language used to make the website interactive
c) JavaScript is a compiled language used to make the website interactive
d) None of the mentioned
2. Which of the following is correct about JavaScript?

a) JavaScript is an Object-Based language
b) JavaScript is Assembly-language
c) JavaScript is an Object-Oriented language
d) JavaScript is a High-level language
3. Among the given statements, which statement defines closures in JavaScript?

a) JavaScript is a function that is enclosed with references to its inner function scope
b) JavaScript is a function that is enclosed with references to its lexical environment
c) JavaScript is a function that is enclosed with the object to its inner function scope
d) None of the mentioned
4. What will be the output of the following JavaScript code snippet?

<p id="demo"></p>
var txt1 = "Sanfoundry_";
var txt2 = "Javascriptmcq";
document.getElementById("demo").innerHTML = txt1 + txt2;
a) error
b) Sanfoundry_ Javascriptmcq
c) undefined
d) Sanfoundry_Javascriptmcq
5. What will be the output of the following JavaScript code?

<p id="demo"></p>
<script>
var js = 10;
js *= 5;
document.getElementById("demo").innerHTML = js;
</script>
a) 10
b) 50
c) 5
d) Error
6. Arrays in JavaScript are defined by which of the following statements?

a) It is an ordered list of values
b) It is an ordered list of objects
c) It is an ordered list of string
d) It is an ordered list of functions

// JavaScript Comparison Operators
function compare()
{
int num=2;
char b=2;
if(a==b)
return true;
else
return false;
}
a) false
b) true
c) compilation error
d) runtime error

// JavaScript Equalto Operators
function equalto()
{
int num=10;
if(num==="10")
return true;
else
return false;
}
a) false
b) true
c) compilation error
d) runtime error
9. Will the following JavaScript code work?

var js = (function(x) {return x*x;}(10));
a) Exception will be thrown

b) Memory leak
c) Error
d) Yes, perfectly
10. Which of the following is not javascript data types?

a) Null type
b) Undefined type
c) Number type
11. Where is Client-side JavaScript code is embedded within HTML documents?

a) A URL that uses the special javascript:code
b) A URL that uses the special javascript:protocol
c) A URL that uses the special javascript:encoding
d) A URL that uses the special javascript:stack
int a=1;
if(a!=null) // JavaScript not equal to Operators
return 1;
else
return 0;
a) 0
b) 1
c) compiler error
d) runtime error
13. Which of the following object is the main entry point to all client-side JavaScript features and
APIs?
a) Position
b) Window
c) Standard
d) Location
14. What will be the output of the following JavaScript program?
function sanfoundry(javascript)
{
return (javascript ? “yes” : “no”);
}
bool ans=true;
console.log(sanfoundry(ans));
a) Compilation error
b) Runtime error
c) Yes
d) No
// Javascript code snippet to compare the height

function height()
{
var height = 123.56;
var type = (height>=190) ? "tall" : "short";
return type;
}
a) short
b) 123.56
c) tall
d) 190
16. Which of the following can be used to call a JavaScript Code Snippet?
a) Function/Method
b) Preprocessor
c) Triggering Event
d) RMI
17. What will be the output of the following JavaScript function?
<p id="demo"></p>
<script>
function javascript()
{
// javacript abs() method
document.getElementById("demo").innerHTML = Math.abs(-7.25);
}
</script>
a) -7.25
b) 7.25
c) -7
d) 7
var a=5 , b=1

var obj = { a : 10 }
// with keyword in JavaScript
with(obj)
{
alert(b)
}
a) 1
b) 10
c) 5
d) Error
19. Which of the following explains correctly what happens when a JavaScript program is
developed on a Unix Machine?
a) will work perfectly well on a Windows Machine
b) will be displayed as JavaScript text on the browser
c) will throw errors and exceptions
d) must be restricted to a Unix Machine only
20. Which is a more efficient JavaScript code snippet?

Code 1 :
// for loop in javascript

for(var num=10;num>=1;num--)
{
document.writeln(num);
}
Code 2 :
var num=10;
while(num>=1)
{
document.writeln(num);
num++;
}
a) Code 1
b) Code 2
c) Both Code 1 and Code 2
d) Cannot Compare
function printArray(a)
{
var len = a.length, i = 0;
if (len == 0)
console.log("Empty Array");
else
{
// do-while loop in javascript
do
{
console.log(a[i]);
} while (++i < len);
}
}
a) Prints “Empty Array”

b) Prints 0 to the length of the array
c) Prints the numbers in the array in order
d) Prints the numbers in the array in the reverse order
22. What happens in the following JavaScript code snippet?
var js = 0;
while (js < 10)
{
console.log(js);
js++;
}
a) An exception is thrown
b) The values of js are logged or stored in a particular location or storage
c) The value of js from 0 to 9 is displayed in the console
d) An error is displayed
function range(int javascript)

{
int a=5;
for(int i=0;i<javascript;i++)
{
console.log(a);
}
}
range(3);
a) 2
b) 5
c) 555
d) error
24. Which of the following scoping type does JavaScript use?

a) Sequential
b) Segmental
c) Lexical
d) Literal
25. What is the basic difference between JavaScript and Java?

a) Functions are considered as fields
b) Functions are values, and there is no hard distinction between methods and fields
c) Variables are specific
d) There is no difference
var quiz=[1,2,3];
var js=[6,7,8];
var result=quiz.concat(js);
document.writeln(result);
a) 1, 2, 3, 6, 7, 8
b) 123
c) 1, 2, 3
d) Error
27. Why JavaScript Engine is needed?
a) Both Compiling & Interpreting the JavaScript
b) Parsing the javascript
c) Interpreting the JavaScript
d) Compiling the JavaScript
28. What will be the function of the following JavaScript program?
var scope = "js scope";

function checkscope()
{
var scope = "javascript scope";
function f()
{
return scope;
}
return f;
}
a) Returns the value in scope

b) Returns value null
c) Shows an error message
d) Returns exception
int a=0;
for(a;a<5;a++);
console.log(a);
a) 4
b) 5
c) 0
d) error
30. Which of the following methods/operation does javascript use instead of == and !=?
a) JavaScript uses equalto()
b) JavaScript uses equals() and notequals() instead
c) JavaScript uses bitwise checking
d) JavaScript uses === and !== instead
31. What will be the result or type of error if p is not defined in the following JavaScript code
snippet?
console.log(p)
a) Value not found Error

b) Reference Error
c) Null
d) Zero
32. What is the prototype represents in the following JavaScript code snippet?
function javascript() {};
a) Not valid
b) Prototype of a function
c) Function javascript
d) A custom constructor
33. Why event handlers is needed in JS?

a) Allows JavaScript code to alter the behaviour of windows
b) Adds innerHTML page to the code
c) Change the server location
d) Performs handling of exceptions and occurrences
34. Which of the following is not a framework?

a) JavaScript .NET
b) JavaScript
c) Cocoa JS
d) jQuery
View Answer
35. Which of the following is the property that is triggered in response to JS errors?
a) onclick
b) onerror
c) onmessage
d) onexception
function compare()
{
int sanfoundry=1;
char javascript=1;
if(sanfoundry.tostring()===javascript)
return true;
else
return false;
}
a) runtime error
b) logical error
c) true
d) false
37. What will be the firstname and surname of the following JavaScript program?
var book = {
"main title": "JavaScript",
'sub-title': "The Definitive Guide",
"for": "all audiences",
author: {
firstname: "David",
surname: "Flanagan"
}
};
a) objects
b) property names
c) properties
d) property values
38. Which of the following is not an error in JavaScript?

a) Missing of Bracket
b) Division by zero
c) Syntax error
d) Missing of semicolons
39. Consider the following JavaScript statement containing regular expressions and check if the
pattern matches.
var text = "testing: 1, 2, 3";

var pattern = /d+/g;
a) text.check(pattern)
b) pattern.test(text)
c) text==pattern
d) text.equals(pattern)
5 – MARKS:
1. How to add script to your page?
2. Explain about variables?
3. Discuss about data types?
4. Explain function?
5. Discuss about alert boxes, confirm boxes?
10 – MARKS:
1. Explain about java script?
2. Discuss about operators?
3. Explain detail about message box?
4. Explain about control structures?
UNIT – 5
Working with JavaScript:
 JavaScript is a client-side scripting language and one of the most efficient, commonly used
scripting languages.
 The term .client-side scripting language means that it runs at the client-side( or on the client
machine) inside the web-browsers, but one important thing to remember is that client's web-
browser also needs to support the JavaScript or it must be JavaScript enabled.
 Nowadays, most of the modern web browsers support JavaScript and have their JavaScript
engines. For example, Google Chrome has its own JavaScript engine called V8.
Some other web-browsers with their JavaScript engines
Web Browser JavaScript engines
1. Edge Chakra
2. Safari JavaScript Core
3. Firefox Spidermonkey
 It totally depends on the web-developers how they use JavaScript and for what, because it can
be used for several things in web development.
 One of the most common uses of JavaScript is to validate data given by the user in the form
fields.
With the help of following example, we can understand how JavaScript works:
In this example, we have created a simple HTML document and added our JavaScript code in it.
Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Working Process</title>
</head>
<body>
<h1>This how javascript works</h1>
<script>
alert("Hi,Their");
console.log("JavaScript");
</script>
</body>
/html>
 In the above program, we just displayed a alert message to the user by using the "alert()"
method that is a pre-defined method of JavaScript.
 We also used the "console.log();" method and passed "JavaScript" as the String and in the
inspect mode we can see "JavaScript" in the console as shown in the below output.
Output:
Practical Tips for Writing Scripts:
 Read other scripts. ...
 Create an outline. ...
 Want to study for a master's in scriptwriting without giving up your day job? ...
 Show, don't tell. ...
 Keep the action moving. ...
 Keep your audience in mind at all times.
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For example:
car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But, we
direct create objects.
Creating Objects in JavaScript
There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
4.
1) JavaScript Object by object literal
 The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
 As you can see, property and value is separated by : (colon).
simple example of creating object in JavaScript.
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script> Test it Now
Output
102 Shyam Kumar 40000
2) By creating instance of Object
 The syntax of creating object directly is given below:
var objectname=new Object();
 new keyword is used to create object.
the example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Test it Now
Output
101 Ravi 50000
AD
3) By using an Object constructor

 to create function with arguments. Each argument value can be assigned in the current
object by using this keyword.
 The this keyword refers to the current object.
The example of creating object by object constructor
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
Test it Now
Output
103 Vimal Jaiswal 30000
Defining method in JavaScript Object

 We can define method in JavaScript object. But before defining method, we need to add
property in the function with same name as method.
The example of defining method in object
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
this.changeSalary=changeSalary;
function changeSalary(otherSalary){
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);
</script>
Test it Now
Output
103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000
JavaScript Object Methods

 The various methods of Object are as follows :
AD
S.No Methods Description
1 Object.assign() This method is used to copy enumerable and own

properties from a source object to a target object
2 Object.create() This method is used to create a new object with the

specified prototype object and properties.
3 Object.defineProperty() This method is used to describe some behavioral

attributes of the property.
4 Object.defineProperties() This method is used to create or configure multiple

object properties.
5 Object.entries() This method returns an array with arrays of the key,

value pairs.
6 Object.freeze() This method prevents existing properties from being

removed.
7 Object.getOwnPropertyDescriptor() This method returns a property descriptor for the

specified property of the specified object.
8 Object.getOwnPropertyDescriptors() This method returns all own property descriptors of a

given object.
9 Object.getOwnPropertyNames() This method returns an array of all properties

(enumerable or not) found.
10 Object.getOwnPropertySymbols() This method returns an array of all own symbol key

properties.
11 Object.getPrototypeOf() This method returns the prototype of the specified

object.
12 Object.is() This method determines whether two values are the

same value.
13 Object.isExtensible() This method determines if an object is extensible
14 Object.isFrozen() This method determines if an object was frozen.
15 Object.isSealed() This method determines if an object is sealed.
16 Object.keys() This method returns an array of a given object's own

property names.
17 Object.preventExtensions() This method is used to prevent any extensions of an

object.
18 Object.seal() This method prevents new properties from being added

and marks all existing properties as non-configurable.
19 Object.setPrototypeOf() This method sets the prototype of a specified object to

another object.
20 Object.values() This method returns an array of values.
Window Object
1.
Window Object
2.
Properties of Window Object
3.
Methods of Window Object
4.
Example of Window Object

The window object represents a window in browser. An object of window is created
automatically by the browser.
 Window is the object of browser, it is not the object of javascript. The javascript objects are
string, array, date etc.
Methods of window object
The important methods of window object are as follows:
Method Description
alert() displays the alert box containing message with ok button.
confirm() displays the confirm dialog box containing message with ok and cancel button.
prompt() displays a dialog box to get input from the user.
open() opens the new window.
close() closes the current window.
setTimeout() performs action after specified time like calling function, evaluating expressions etc.
Example of alert() in javascript
 It displays alert dialog box. It has message and ok button.
function msg(){
alert("Hello Alert Box");
}
</script>
<input type="button" value="click" onclick="msg()"/>
Example of confirm() in javascript

 It displays the confirm dialog box. It has message with ok and cancel buttons.
function msg(){
var v= confirm("Are u sure?");
if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
Example of prompt() in javascript

 It displays prompt dialog box for input. It has message and textfield.
function msg(){
var v= prompt("Who are you?");
alert("I am "+v);
}
</script>
Example of open() in javascript

 It displays the content in a new window.
function msg(){
open("http://www.javatpoint.com");
}
</script>
<input type="button" value="javatpoint" onclick="msg()"/>
Example of setTimeout() in javascript

 It performs its task after the given milliseconds.
function msg(){
setTimeout(
function(){
alert("Welcome to Javatpoint after 2 seconds")
},2000);
}
</script>

Document Object Model
1. Document Object
2. Properties of document object
3. Methods of document object
4. Example of document object
 The document object represents the whole html document.
 When html document is loaded in the browser, it becomes a document object.
 It is the root element that represents the html document.
 It has properties and methods. By the help of document object, we can add dynamic
content to our web page.
Properties of document object
 the properties of document object that can be accessed and modified by the document
object.
Methods of document object

 We can access and change the contents of document by its methods.
The important methods of document object are as follows:
Method Description
write("string") writes the given string on the doucment.
writeln("string") writes the given string on the doucment with newline character at the end.
getElementById() returns the element having the given id value.
getElementsByName() returns all the elements having the given name value.
getElementsByTagName() returns all the elements having the given tag name.
getElementsByClassName() returns all the elements having the given class name.
Accessing field value by document object

 In this example, we are going to get the value of input text by user. Here, we
are using document.form1.name.value to get the value of name field.
Here, document is the root element that represents the html document.
 form1 is the name of the form.
 name is the attribute name of the input text.
 value is the property, that returns the value of the input text.
the simple example of document object that prints name with welcome message.
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
Enter Name:
Browser Object Model

 The Browser Object Model (BOM) is used to interact with the browser.
 The default object of browser is window means you can call all the functions of window by
specifying window or directly. For example:
window.alert("hello javatpoint");
is same as:
alert("hello javatpoint");
use a lot of properties (other objects) defined underneath the window object like document,
history, screen, navigator, location, innerHeight, innerWidth,
JavaScript Navigator Object
1. Navigator Object
2. Properties of Navigator Object
3. Methods of Navigator Object
4. Example of Navigator Object
 The JavaScript navigator object is used for browser detection.
 It can be used to get browser information such as appName, appCodeName, userAgent etc.
The navigator object is the window property, so it can be accessed by:
window.navigator Or, navigator
Property of JavaScript navigator object

There are many properties of navigator object that returns information of the browser.
No. Property Description
1 appName returns the name
2 appVersion returns the version
3 appCodeName returns the code name
4 cookieEnabled returns true if cookie is enabled otherwise false
5 userAgent returns the user agent
6 language returns the language. It is supported in Netscape and Firefox only.
7 userLanguage returns the user language. It is supported in IE only.
8 plugins returns the plugins. It is supported in Netscape and Firefox only.
9 systemLanguage returns the system language. It is supported in IE only.
10 mimeTypes[] returns the array of mime type. It is supported in Netscape and Firefox only.
11 platform returns the platform e.g. Win32.
12 online returns true if browser is online otherwise false.

Methods of JavaScript navigator object
The methods of navigator object are given below.
No. Method Description
1 javaEnabled() checks if java is enabled.
2 taintEnabled() checks if taint is enabled. It is deprecated since JavaScript 1.2.
Example of navigator object

Let’s see the different usage of history object.
<script>
document.writeln("<br/>navigator.appCodeName: "+navigator.appCodeName);
document.writeln("<br/>navigator.appName: "+navigator.appName);
document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);
document.writeln("<br/>navigator.cookieEnabled: "+navigator.cookieEnabled);
document.writeln("<br/>navigator.language: "+navigator.language);
document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);
document.writeln("<br/>navigator.platform: "+navigator.platform);
document.writeln("<br/>navigator.onLine: "+navigator.onLine);
</script>
OUTPUT:
JavaScript Navigator Object
navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/109.0.0.0 Safari/537.36
navigator.cookieEnabled: true
navigator.language: en-US
navigator.userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/109.0.0.0 Safari/537.36
navigator.platform: Win32
navigator.onLine: true
JavaScript Screen Object
1. Screen Object
2. Properties of Screen Object
3. Methods of Screen Object
4. Example of Screen Object
 The JavaScript screen object holds information of browser screen. It can be used to display
screen width, height, colorDepth, pixelDepth etc.
 The navigator object is the window property, so it can be accessed by:
window.screen Or, screen
Property of JavaScript Screen Object
No. Property Description
1 width returns the width of the screen
2 height returns the height of the screen
3 availWidth returns the available width
4 availHeight returns the available height
5 colorDepth returns the color depth
6 pixelDepth returns the pixel depth.
Example of JavaScript Screen Object

<script>
document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.availWidth);
document.writeln("<br/>screen.availHeight: "+screen.availHeight);
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);
</script>
OUTPUT:
screen.width: 1366
screen.height: 768
screen.availWidth: 1366
screen.availHeight: 728
screen.colorDepth: 24
screen.pixelDepth: 24
JavaScript Events
 The change in the state of an object is known as an Event. In html, there are various events
which represents that some activity is performed by the user or by the browser.
 When javascript code is included in HTML, js react over these events and allow the
execution.
 This process of reacting over the events is called Event Handling. Thus, js handles the HTML
events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute the task to be
performed on the event.
Some of the HTML events and their event handlers are:
Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element
mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.
Keyboard events:
Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
Form events:
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
change onchange When the user modifies or changes the value of a form element
AD
Window/Document events
load onload When the browser finishes the loading of the page
unload onunload When the visitor leaves the current webpage, the browser unloads it
resize onresize When the visitor resizes the window of the browser
some examples over events and their handlers.

Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">

</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
OUTPUT:
MouseOver Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">

</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
OUTPUT:
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>

</script>
</body>
</html>
OUTPUT:
Javascript Events
Enter something here
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>

</script>
</body>
</html>
OUTPUT:
Javascript Events
Enter something here
Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>

</script>
</body>
</html>
OUTPUT:
JavaScript Form Validation

 JavaScript form validation
 Example of JavaScript validation
 JavaScript email validation
 It is important to validate the form submitted by the user because it can have inappropriate
values. So, validation is must to authenticate user.
 JavaScript provides facility to validate the form on the client-side so data processing will be
faster than server-side validation. Most of the web developers prefer JavaScript form
validation.
Through JavaScript, we can validate name, password, email, date, mobile numbers and more fields.
JavaScript Form Validation Example

 In this example, we are going to validate the name and password. The name can’t be empty
and password can’t be less than 6 characters long.
 validating the form on form submit. The user will not be forwarded to the next page until
given values are correct.
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
Output:
Name:
Password:
register
JavaScript Retype Password Validation

function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">

Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
Output:
Password:
Re-enter Password:
Submit
JavaScript Number Validation

Let's validate the textfield for numeric value only. Here, we are using isNaN() function.
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
Output:
Number:
submit
AD
JavaScript validation with image

 An interactive JavaScript form validation example that displays correct and incorrect image
if input is correct or incorrect.
<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;
if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='unchecked.gif'/> Please enter your name";
status=false;
}else{
document.getElementById("nameloc").innerHTML=" <img src='checked.gif'/>";
status=true;
}
if(password.length<6){
document.getElementById("passwordloc").innerHTML=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
}else{
document.getElementById("passwordloc").innerHTML=" <img src='checked.gif'/>";
}
return status;
}
</script>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>
Output:
Enter Name:
Enter Password:
register
JavaScript email validation

 We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate the email id such as:
o email id must contain the @ and . character
o There must be at least one character before and after the @.
o There must be at least two characters after . (dot).
Let's see the simple example to validate the email field.
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-
mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
Output:
Email:
Enhancements
Last Updated: 2021-03-08
 Everywhere you edit scripts in the Configuration Editor, you will get a text editor, enhanced
specifically for editing JavaScript code.
This editor provides code completion, syntax coloring as well as marking syntactical errors.
Some of the enhancements are:
 Code Completion
 Syntax Coloring
 Syntax Checking
 Local Evaluation
 External Editors
 Code Completion
The JavaScript editor supports code completion.

 Syntax Coloring
 Syntax Checking
As you type, the editor performs syntax checking on the script in the background. When you have
errors in the script, it shows the error in the margins and the text will get a red squiggle under it
to mark where the JavaScript interpreter found an error.
 Local Evaluation
 External Editors
JavaScript Libraries :
1. React.js:
 React.js is the most popular and widely used JavaScript library out there these days. It is
an open-source library.
 This is sometimes considered as a framework because there are so many packages
available for reacting like handling routes which you can integrate into react.js and can
develop any type of application.
 It follows SPA (Single Page Application) which is referred to as you need not refresh the
page Reactjs will automatically render the certain component and inject it into the dom
automatically.
2. jQuery:
 jquery is an old javascript library that is used for DOM (Document Object Model)
manipulation and handling events like mouse clicks, scrolling, etc.
 Also, it contains AJAX which handles the Asynchronous part of any application.
3. D3.js:
 D3 stands for Data-Driven Documents. It is basically used for data visualization. It takes a
certain amount of data and applies it to manipulate the Document object model.
4. Underscore.js:
 Underscore.js is a lightweight JavaScript library and not a complete framework that was
written by Jeremy Ashkenas that provides utility functions for a variety of use cases in our
day-to-day common programming tasks.
5. Lodash:
 Lodash is a JavaScript library that works on the top of underscore.js. Lodash helps in
working with arrays, strings, objects, numbers, etc.
 It provides us with various inbuilt functions and uses a functional programming approach
that makes coding in JavaScript easier to understand because instead of writing repetitive
functions, tasks can be accomplished with a single line of code.
 It also makes it easier to work with objects in javascript if they require a lot of
manipulation to be done upon them.
6. Anime.js:
 Anime.js is a small, lightweight JavaScript library with a simple and small powerful API.
 It works with the DOM element, CSS, and JavaScript object.
7. Chart.js:
 Chart.js is an open-source JavaScript library on Github that allows you to draw different
types of charts by using the HTML5 canvas element. Since it uses canvas, you have to
include a polyfill to support older browsers
ONE MARK:
1. What will be printed in the console on execution of the following JS code:
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
var myArr= array.filter(v => v % 3 === 0);
console.log(myArr);
A. myArr
B. [3, 6, 9, 12, 15]
C. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
D. [1, 2, 4, 5, 7, 8, 10, 11, 13, 14]
2. What will be printed in the console on execution of the following JS code:

var array = [2, 4, 6, 7, 8, 10];
var myArr= array.filter(v => v / 2 === 0);
console.log(myArr);
A. myArr
B. [2, 4, 6, 7, 8, 10]
C. [2, 4, 6, 8, 10]
D. [7]
3. What will be printed in the console on execution of the below code?

var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
]; console.log(materials.map (material => material.length));
A. [8, 6, 7, 9]
B. 4
C. [4]
D. 8, 6, 7, 9
4. What will be printed in the console on execution of the below code?

var materials = [
'Table',
'Chair',
'Boxes',
'Press'
];
console.log(materials.map (material => material.length));
A. [5,5,5,5]
B. [5]{4}
C. [5]
D. Both A and B
5. what will be the output of below code?

var val = "JavaScript String"
splittedVal = val.split('a',2)
console.log(splittedVal);
A. [ 'J', 'v' ]
B. [ 'J' ,'v','Script']
C. [ 'J', 'v', 'Script String' ]
D. [ 'JavaScript String' ]

NOTE: The code is executed on 2019-5-9
var todaysDate = new Date()
console.log( todaysDate.toLocaleString() );
A. 2019-05-09T09:29:53.181Z
B. 2019-5-9
C. 15:00:34
D. 2019-5-9 15:02:35
7. ........ serializes only the enumerable own properties of an object.

A. JSON.Parse()
B. JSON.Stringify()
C. JSON.Null()
D. JSON.Objectify()
8. Object ......... is the process of converting an objects state to a string from which it can later be
restored.
A. prototype
B. class
C. serialization
D. extensible
9. If para1 is the DOM object for a paragraph, what is the correct syntax to change the text within
the paragraph?
A. "New Text"?
B. para1.value="New Text";
C. para1.firstChild.nodeValue= "New Text";
D. para1.nodeValue="New Text";

const event = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log (event.toLocaleString('en-IN', { timeZone: 'UTC' }));
A. 20/12/2012, 3:00:00
B. 12/20/2012, 3:00:00
C. 20/12/2012, 3:00:00 am
D. 2012/12/20, 3:00:00 am
11. A programming language can be called object-oriented if it provides ________ basic capabilities
to developers
A. 1
B. 2
C. 3
D. 4
12. The capability to store one object inside another object known as?
A. Encapsulation
B. Aggregation
C. Inheritance
D. Polymorphism
13. The syntax for adding a property to an object is?

A. objectProperty == propertyValue;
B. objectProperty = propertyValue;
C. objectName.objectProperty = propertyValue;
D. objectName.objectProperty == propertyValue;
14. The ________ operator is used to create an instance of an object.
A. this
B. self
C. find
D. new
15. JavaScript provides a special constructor function called Object() to build the object.
A. TRUE
B. FALSE
C. Can be true or false
D. Can not say
16. The type that specifies what kind of event occurred is ____________
a) event type
b) even target
c) both event type and even target
d) interface
17. Which is the object on which the event occurred or with which the event is associated?
a) event type
b) event target
c) both event type and even target
d) interface
18. In general, event handler is nothing but ____________

a) function
b) interface
c) event
d) handler
19. When will the browser invoke the handler?

a) Program begins
b) Any event occurs
c) Specified event occurs
20. Which property specifies the property of the event?
a) Type
b) Target
c) Manner
d) Program
21. The process by which the browser decides which objects to trigger event handlers on is
____________
a) Event Triggering
b) Event Listening
c) Event Handling
d) Event propagation
22. Which form of event propagation handles the registered container elements?
a) Event Propagation
b) Event Registration
c) Event Capturing
d) Default Actions
23. The events that are directly tied to a specific input device are ____________
a) Device-independent input events
b) Device-dependent input events
c) User interface events
d) State change events
24. The high-level events among the following events are ____________
a) User interface events
b) Device-independent events
c) Device-dependent events
d) Stage event change
25. The events that are not directly tied to a specific input device are _____________
a) User interface events
b) Device-independent events
c) Device-dependent events
d) Stage event change
26. In which part does the form validation occur?

a) Client
b) Server
c) Both Client and Server
d) User side
27. What would happen if the data in the client had been wrong?
a) Sends back the data
b) Waits for correction
c) Sends back the data and Waits for correction
28. What is the purpose of the basic validation?
a) Data correctness
b) Mere data existence
c) Both Data correctness and Mere data existence
d) Data modification
29. What is the purpose of data format validation?

a) Data correctness
b) Mere data existence
c) Both Data correctness and Mere data existence
d) Data modification
30. Which is the function that is called to validate a data?

a) validate()
b) valid()
c) validation()
d) no predefined function for data validation
31. How to find the index of a particular string?

a) position()
b) index()
c) indexOf()
d) positionof()
32. How do you focus a particular part of the HTML page in JavaScript?
a) hover()
b) focus()
c) on()
d) focuson()
33. Which of the following is the child object of the JavaScript navigator?
a) Navicat
b) Plugins
c) NetRight
d) Plugs
34. Which of the following is not the properties of a plug-in entry?

a) name
b) filename
c) mimeTypes
d) value
35. What is the purpose of the mimeTypes property of a plug-in entry?

a) Contains MIME properties
b) Contains MIME sizes
c) Contains MIME types
d) Contains MIME methods
36. How many read-only attributes are present in the navigator object?
a) 1
b) 2
c) 3
d) 4
37. Why are HTTP redirects significant?

a) TCP connection available
b) Complete roundtrip absent
c) Complete roundtrip present
d) TCP connection not available
38. Where does the DNS reply go to in a single HTTP redirect?

a) Browser
b) Client
c) Server
d) DNS Server
39. How can one access the redirectCount property?

a) navigation.redirectCount
b) performance.navigation.redirectCount
c) performance.redirectCount
d) redirectCount
40. How many constant values can the property type be represented?
a) 2
b) 3
c) 4
d) 5
41. Which of the following constants has the value 255?

a) TYPE_NAVIGATE
b) TYPE_RELOAD
c) TYPE_BACK_FORWARD
d) TYPE_RESERVED
42. What is the purpose of the constant TYPE_RELOAD?

a) Reload performed
b) Reload not performed
c) Reload must be performed
d) Reload may be performed
43. What does the constant TYPE_BACK_FORWRD indicate?

a) Navigation via browser history
b) Navigation via user request
c) Navigation via URL
d) Navigation via load operation
44. Which of the following constants hold the value 2?
a) TYPE_NAVIGATE
b) TYPE_RELOAD
c) TYPE_BACK_FORWARD
d) TYPE_RESERVED
45. Where does the DNS Lookup direct to ?

a) Browser
b) Client
c) Server
d) DNS Server
5 – MARKS:
1. How to working with JavaScript?
2. Explain about window object?
3. Discuss about document object?
4. Explain browser object?
5. Discuss about JavaScript libraries?
10 – MARKS:
1. Explain about JavaScript object?
2. Discuss about JavaScript events?
3. Explain detail about validations?
4. Explain navigator object screen object?

Web Technology CS

Uploaded by

Copyright:

Available Formats

You might also like

Web Technology CS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology CS

Uploaded by

Copyright:

Available Formats

WEB TECHNOLOGY

SUBJECT CODE: 21UCS08 SEMESTER: V

HTML Formatting Elements

Write Your First Paragraph in bold text.

This is an important content, and this is normal content

Write Your First Paragraph in italic text.

This is an important content, which displayed in italic font.

3) HTML Marked formatting

I want to put a Mark on your face

Write Your First Paragraph in underlined text.

10) Inserted Text

11) Larger Text

12) Smaller Text

Presentational inline elements and style sheet alternatives

Use the strong element instead if appropriate, or use the font-

Use a relative font-size keyword to make text display slightly larger

Use the em element instead if appropriate, or use the font-

Use the text-decoration property to make text display with a line

Use a relative font-size keyword to make text display slightly smaller

Use the text-decoration property to make text display with a line

Use the font-family property to select a specific or generic fixed-width

1. Text Abbreviation tag

An ordered HTML list:

Unordered HTML List

HTML Description Lists

HTML List Tags

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

 So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.

This is underlined paragraph

The href Attribute

The src Attribute

The width and height Attributes

The alt Attribute

LINKS AND NAVIGATION:

CREATING LINKS WITH THE <a> ELEMENTS:

Advanced E-mail Links:

<a href = "mailto: abc@example.com">Send Email</a>

IMAGE, AUDIO AND VIDEO:

 The HTML <img> tag is used to embed an image in a web page.

The <img> tag has two required attributes:

The src Attribute

The alt Attribute

Image Size - Width and Height:

Choosing the Right Image Format:

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg,

PNG Portable Network Graphics .png