Unit-1 HTML

1. What is a Web Browser? Difference between URL and Domain Name.

● The web browser is software that allows users to access and experience the
World Wide Web.
● It works as a compiler to render HTML, which is used as the interface
between your computer and the internet.
● It displays webpages in different ways, depending on its settings; this
includes what site you're browsing, how it looks, and which features are
enabled.
● For example, you can use Google Chrome to browse Google websites and
search for information.

Domain Name Uniform Resource Locator

A domain name is a human-friendly text URL is a string that represents the

form of the IP address. complete web address of any web page.

It is the part of the URL that is more It is the string that represents a complete
human friendly. web address that contains the domain
name

It contains three parts-Top Level It also contains the following parts-

Domain, Intermediate Level, and the method, protocol, hostname, port, and
Low Level. path of the file.

Example: google.com Example: https://www.google.com/

2. What is Client Side Scripting? What is Server Side Scripting? And

Differentiate.
 Client-side scripting Server-side scripting

It is a technique used in web development It is a technique that uses scripts on the

in which scripts run on the client’s webserver to produce a response that
browser. is customized for each client’s request.

Its main function is to provide the Its primary function is to manipulate

requested output to the end user. and provide access to the respective
database as per the request.

Source code is visible to the user. Source code is not visible to the user
because its output of server-sideside is
an HTML page.

It runs on the user’s computer. It runs on the webserver.

It does not provide security for data. It provides more security for data.

HTML, CSS, and javascript are used. PHP, Python, Java, Ruby are used.

It reduces load on processing unit of the It surge the processing load on the
server. server.

No need of interaction with the server. It is all about interacting with the
servers.

3. Define: Website, Web Server, Responsive Website

Website:-

A website is a collection of publicly accessible, interlinked Web pages that share a

single domain name. Websites can be created and maintained by an individual,
group, business or organization to serve a variety of purposes.

OR

Website:-
A website is a collection of many web pages, and web pages are digital files that are
written using HTML(HyperText Markup Language). To make your website available
to every person in the world, it must be stored or hosted on a computer connected
to the Internet round a clock. Such computers are known as a Web Server

Web Server:-

● Web server is a program which processes the network requests of the users
and serves them with files that create web pages. This exchange takes place
using Hypertext Transfer Protocol (HTTP).
● Basically, web servers are computers used to store HTTP files which makes a
website and when a client requests a certain website, it delivers the
requested website to the client.

Responsive Website:-

● Responsive web design is an approach that simply reflows, adjust,

reposition, resize overall content and images according to width of browser
or screen size.

● In simple words, responsive websites are designed to be accessed across all

devices regardless of size of device screen.
● Some screen sizes that are kept in mind while creating responsive websites
are desktop, laptop, mobile phones, and tablet.

4. Difference between a Desktop Application and Web Application.

Desktop Application Web Application

It is installed in the windows platform The web application is installed on a
using Windows operating system. web server.

It is accessible only from system in It can be accessed from anywhere

which it is installed. around world using internet.

Windows application is easy to build as The web application is difficult to build

compared to the Web application. as compared to the Windows
application.

This application can be directly IIS aka Internet Information Services

executed using the operating system on server is needed to run web
the system. applications.

Maintenance is carried out at the user Users are not responsible for updating
level in Windows-based applications. Web-based applications.

5. Difference between Static and Dynamic Website.

Static Website Dynamic Website

In static web pages, Pages will remain In dynamic web pages, Content of
same until someone changes it pages are different for different visitors.
manually.

Static Web Pages are simple in terms of Dynamic web pages are complicated.
complexity.

In static web pages, Information are In dynamic web page, Information are
change rarely. change frequently.

Static Web Page takes less time for Dynamic web page takes more time for
loading than dynamic web page. loading.

Static web pages does not contain any Dynamic web pages contains
application program . application program for different
services.

In Static Web Pages, database is not In dynamic web pages, database is

used. used.

Static web pages are written in Dynamic web pages are written in
languages such as: HTML, JavaScript, languages such as: CGI, AJAX, ASP,
CSS, etc. ASP.NET, etc.

6. Write a short note on the client side scripting language HTML explain its
purpose and structure.

Client side scripting:

● Client side script is a small program (or set of instructions) that is embedded
(or inserted) into a web page.
● It is processed within the client browser instead of the web server.
● The client side script downloads at the client end from the server along with
the HTML web page it is embedded in.
● The web browser interprets and executes the code and then displays the
results on the monitor.
● The Client Side Scripts are a part of the web page where a server sends the
files to the client.
● Once loaded, the scripts can be viewed by the web browser for debugging
purposes.

Client-side Uses

● Makes interactive web pages

● Make stuff work dynamically
● Interact with temporary storage
● Works as an interface between user and server
● Sends requests to the server
● Retrieval of data from Server
● Interact with local storage
● Provides remote access for client-server program
7. Explain 5 basic HTML Tags.

<audio> It is used to play audio file in HTML.

<svg> It is used to display shapes.

<time> It is used to define a date/time.

<video> It is used to play video file in HTML.

<dialog> It defines a window or a dialog box.

8. What do you understand by the attributes of tags? What are block level tags.

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"

Block Level Element Tags:-

A block-level element always starts on a new line, and the browsers automatically
add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the
left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

9. What are inline tags? Difference between block level tags and inline tags.

Inline Elements:
● Inline elements display in a line. They do not force the text after them to a new
line.
● An anchor (or link) is an example of an inline element. You can put several
links in a row, and they will display in a line.

Examples of inline elements:

● <a>
● <strong>, <em>, <b>, <i>, <q>, <mark>
● <span>

Inline Elements Block Elements

Inline elements occupy only sufficient Block Elements occupy the full width
width required. irrespective of their sufficiency.

Inline elements don’t start in a new line. Block elements always start in a line.

Inline elements allow other inline Block elements doesn’t allow other
elements to sit behind. elements to sit behind

Inline elements don’t have top and Block elements have top and bottom
bottom margin margin.
10. What are group level tags?

Grouping is a structural element that helps us to create different parts of the

website. We can change the color, width of divs, padding inside them and other
design elements with the help of grouping.
Grouping can be performed with the help of various tags such as <div>, <header>,
<footer>, and <section>.

HTML <div>:
It is a block-level tag that groups various HTML tags into a single
block. It is styled with CSS or can be manipulated with JavaScript.
HTML <header>:

This tag contains the tagline or we can say it contains the main
heading or the navigation links of our web page and is placed at the top of
our web page.

HTML <footer>:

This tag contains copyright information, contact information,

back-to-top link, and several other related documents and is placed at the
bottom of our web page.

HTML <section>:

This tag is used to define the section in the document.

11. Write the usage, attributes, and syntax for the following tags:

<p> It represents a paragraph in an HTML document.

<b> It is used to make a text bold.

<u> It is used to render enclosed text with an underline.

<i> It is used to represent a text in some different voice.

<tt> It is used to define teletype text.

<div> It defines a division or section within HTML document.

<span> It is used for styling and grouping inline.

<h1> to <h6> It defines headings for an HTML document from level 1 to level

6.

<hr> It is used to apply thematic breaks between paragraph-level elements.

<br> It is used to apply a single line break.

<font> It defines the font, size, color, and face of the content.

<marquee It is used to insert the scrolling text or an image either horizontally or

> vertically.

<img> It is used to insert an image within an HTML document.

 <a> It is termed as anchor tag and it creates a hyperlink or link.

<sub> It defines a text which displays as a subscript text.

<sup> It defines a text which represents as superscript text.

<dd> It is used to provide definition/description of a term in description list.

<dt> It is used to define a term in the description list.

<dl> It is sued to define a description list.

<ol> It defines an ordered list of items.

<ul> It defines an unordered list of items.

<li> It is used to represent items in the list.

<strong> It is used to define important text.

<em> It is used to emphasis the content applied within this element.

12. Explain <table> tag with all the sub-tags and attributes.
 ● The HTML table tag is used to display data in tabular form (row * column).
● There can be many columns in a row.
● We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
● Each table, table row is defined by <tr> tag,
table header is defined by <th>,
table data is defined by <td> tags.

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for

formatting.

<col> It is used with <colgroup> element to specify column properties

for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

Example:-
<!DOCTYPE>
<html>
<body>
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

Output:-

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

13. Difference between cell padding and cell spacing. Explain Colspan and
Rowspan.

Cellpadding Cellspacing

It specifies the space between the It specifies the space between adjacent
border of a table cell and its contents. cells.

It is created by using HTML <table> tag It is also created by using HTML

but the type attribute is set to <table> tag but the type attribute is set
cellpadding. to cellspacing.
 It is mainly meant for a single cell. Cellspacing can get subjected to more
than one cell.

The default cell padding value is 1 Whereas, the default cell spacing value
is 2

Cellpadding is widely used and Cellspacing is less effective than

considered to be an effective mean Cellpadding.

Cellpadding is an attribute Cellspacing is also an attribute.

colspan:-
The colspan attribute in HTML specifies the number of columns a cell should span.
It allows single table cell to span the width of more than one cell or column, which is
normally not possible in traditional web browsers.
Usage: It can be used with <td> and <th> element while creating an HTML Table.
Attribute Values: It contains a value i.e number Which specify the number of
columns that a cell should span.

● <td>: The colspan attribute when used with <td> tag determines the number
of standard cells it should span.
Syntax:-
<td colspan = "value">table content...</td>
The value specifies the number of columns that the cell fills. The value must be an
integer.

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>The td colspan attribute</h1>

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

</body>
</html>

Output:-

Month Savings

January $100

February $80

Sum: $180

rowspan:-
 The rowspan attribute in HTML specifies the number of rows a cell
should span. That is if a row spans two rows, it means it will take up the space of
two rows in that table. It allows the single table cell to span the height of more than
one cell or row. It provides the same functionality as “merge cell” in the spreadsheet
program like Excel.

Usage: It can be used with <td> and <th> element in an HTML Table.

Attribute Values: It contains a value i.e number Which specify the number of rows
that a table cell should span.

● <td>: The rowspan attribute when used with <td> tag determines the number
of standard cells it should span.

Syntax:-

<td rowspan = "value">table content...</td>

The value specifies the number of rows that the cell fills. The value must be a
integer.

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<h1>The td rowspan attribute</h1>

<table>
 <tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>
Output:-

Month Savings Savings for holiday!

January $100 $50

February $80

14. Write the code for the following table in HTML(as you have done in
practical)

????????? (Do it yourself!!!)

15. Which are the special characters in HTML and how are they specified in
HTML?

16. Explain <form> tag and the associated tags for input controls.

● 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.

● A form will take input from the site visitor and then will post it to a back-end

application such as CGI, ASP Script or PHP script etc. The back-end

application will perform required processing on the passed data based on

defined business logic inside the application.

● There are various form elements available like text fields, textarea fields,

drop-down menus, radio buttons, checkboxes, etc

Syntax:-

<form> Form Content... </form>

Associated tags for input controls:-

<input type="text"> defines a single-line text input field.

<input type="password"> defines a password field.

<input type="submit"> defines a button for submitting form data to a

form-handler.

<input type="reset">defines a reset button that will reset all form values to their
default values.
<input type="radio"> defines a radio button.

<input type="checkbox"> defines a checkbox.

<input type="button">defines a button.

17. Write the usage, attributes, and syntax for the following controls:

a. Text box:-

Usage:-

The <input type="text"> defines a single-line text field.

The default width of the text field is 20 characters.

Attributes:- type="text"

Syntax:- <input type="text">

b. Text area:-

Usage:-

The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like
comments or reviews.

A text area can hold an unlimited number of characters, and the text renders in a
fixed-width font (usually Courier).

The size of a text area is specified by the cols and rows attributes (or with CSS).

The name attribute is needed to reference the form data after the form is submitted
(if you omit the name attribute, no data from the text area will be submitted).

The id attribute is needed to associate the text area with a label.

Attributes:-

● cols:- Specifies the visible width of a text area

● rows:- Specifies the visible number of lines in a text area
● form:- Specifies which form the text area belongs to

Syntax:- <textarea>....</textarea>

c. Radio button:-

Usage:-

The <input type="radio"> defines a radio button.

Radio buttons are normally presented in radio groups (a collection of radio buttons
describing a set of related options). Only one radio button in a group can be
selected at the same time.

Attributes:- type="radio"

Syntax:-<input type="radio">

d. Checkbox:-

Usage:-

The <input type="checkbox"> defines a checkbox.

The checkbox is shown as a square box that is ticked (checked) when activated.

Checkboxes are used to let a user select one or more options of a limited number of
choices.

Attributes:-type="checkbox"
Syntax:-<input type="checkbox">

e. Dropdown:-

Usage:-A dropdown menu is a toggleable menu that allows the user to choose one
value from a predefined list.

Attributes:- data-toggle="dropdown"

Syntax:-

f. Scrolling List:-

Usage:-

Attributes:-

Syntax:-

g. Date:-

Usage:- The <input type="date"> defines a date picker.

The resulting value includes the year, month, and day.

Attributes:-type="date"

Syntax:-<input type="date">

h. Time:-

Usage:-The <input type="time"> defines a control for entering a time (no time
zone).

Attributes:-type="time"
Syntax:-<input type="time">

i. Url:-

Usage:-The <input type="tel"> defines a field for entering a telephone number.

Attributes:-type="tel"

Syntax:-<input type="tel">

j. Color:-

Usage:-The <input type="color"> defines a color picker.

The default value is #000000 (black). The value must be in seven-character

hexadecimal notation.

Attributes:-type="color"

Syntax:-<input type="color">

k. Spinner:-

Usage:-To create a spinner/loader, use the .spinner-border class

Attributes:-

Syntax:-

l. Slider:-

Usage:- A slider is a set of frames in a sequence that can be traversed respectively.

This article exhibits the approach to build a slideshow with the use of only HTML
and CSS.

Attributes:-

Syntax:-
m. Submit:-

Usage:-

The <input type="submit"> defines a submit button which submits all form
values to a form-handler.

The form-handler is typically a server page with a script for processing the input
data.

The form-handler is specified in the form's action attribute.

Attributes:-type="submit"

Syntax:-<input type="submit">

n. Reset:-

Usage:-The <input type="reset"> defines a reset button which resets all form
values to its initial values.

Attributes:-type="reset"

Syntax:-<input type="reset">

18. Explain autofocus and selected attributes.

Autofocus:-

The autofocus attribute in HTML is used to specify that the element should get
focused when the page loads. It is a boolean attribute.

Syntax:-

<elementName autofocus>
Supported Tags:-

Select:-

The HTML <select> autofocus Attribute is used to specify that the dropdown should
automatically get focus when the page loads. It is a type of boolean attribute.

Syntax:-

<select autofocus>

Button:-

The HTML | <button> autofocus Attribute is used to specifies that the button should
get automatically get focus or not when the page loads. It is a Boolean Attribute.

Syntax:-

<button type="button" autofocus>

Input:-

The HTML <input> autofocus Attribute is used to specify that the input field must
get automatically get focus when the page loads. It is a Boolean attribute.

Syntax:-

<input autofocus>

Textarea:-

The HTML <textarea> autofocus Attribute is used to specify that the textarea field
should get automatically focus when the page loads. It is a Boolean Attribute.

Syntax:-

<textarea autofocus>

19. Explain the “action” attributes of form with proper examples.

The HTML action Attribute is used to specify where the form data is to be sent to
the server after submission of the form. It can be used in the <form> element.

Syntax:-

<form action="URL">
Attribute Values:

URL: It is used to specify the URL of the document where the data to be sent after
the submission of the form.

The possible values of the URL are:

● absolute URL: It points to another website link. For Example: www.gfg.org

● relative URL: It is used to point to a file within a webpage. For Example:

www.geeksforgeeks.org

Example of action attribute :-

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Warren"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Buffett"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to
 the Billionarie Club!! "/action_page.php".</p>

</body>
</html>

Output:-

HTML Forms
First name:
Warren
Last name:
Buffett

If you click the "Submit" button, the form-data will be sent to the Billionarie Club!!
"/action_page.php".

20. Explain with example: <frameset>, <iframe>.

<frameset>:

The <frameset> tag in HTML is used to define the frameset. The <frameset>
element contains one or more frame elements. A frame element is a declaration of a
region of a document where content can be placed. Each element can hold a
separate document.

Syntax:-

<frameset cols = "pixels|%|*">

cols: The cols attribute defines the number of columns in a vertical frame, and their
size.

rows: The rows attribute is used to create horizontal frames in the browser. It’s a set
of values that define the no. of rows and their size inside the frameset tag.
border: This attribute of frameset tag defines the width of the border of each frame
in pixels. Zero value is used for no border.

<iframe>:

HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. 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.

The src attribute is used to specify the URL of the document that occupies the inline
frame.

Attributes of <iframe>:

src:

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
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.

Example:-

<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.google.co.in/" title="Success is Silent,
but Money is Loud!!">
</iframe>

</body>
</html>
20. Write the code for the following frameset division.

<!DOCTYPE html>
<html>
<head>
<title>frameset attribute</title>
</head>

<!-- frameset attribute starts here -->

<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = "attr1.png" />
<frame name = "main" src = "gradient3.png" />
<frame name = "bottom" src = "col_last.png" />
<noframes>
<body>The browser you are working does not
support frames.</body>
</noframes>
</frameset>
<!-- frameset attribute ends here -->
</html>

22. Explain purpose of meta tag in detail.

● The <meta> tag defines metadata about an HTML document.

● Metadata is data (information) about data. The <meta> tag goes inside the
<head> element, and typically contains information about character set, page
description, keywords and author of the document as well as how to display
content or reload a page.
● A <meta> tag will not be displayed on the page but is machine parsable.
● This can be useful for web designers who want to take control over the
viewport (the user's visible area of a web page) through their own site
prefixes or controls.

Attribute of meta:

charset:
Value: character_set

Description: Specifies the character encoding for the HTML document.

content:

Value: text

Description: Specifies the value associated with the http-equiv or name attribute.

name:

Value: application-name

Description: Specifies a name for the metadata

Unit-2 CSS_Javascript

23. What is the difference between inline, embedded and external style sheets?

There are three ways you can use to implement CSS into your HTML: internal,
external, and inline styles.

Internal CSS
 ● Internal or embedded CSS requires you to add <style> tag in the <head>
section of your HTML document.
● This CSS style is an effective method of styling a single page.
● However, using this style for multiple pages is time-consuming as you need to
put CSS rules on every page of your website.

Advantages of Internal CSS:

● You can use class and ID selectors in this style sheet.

● Since you’ll only add the code within the same HTML file, you don’t need to
upload multiple files.

Disadvantages of Internal CSS:

● Adding the code to the HTML document can increase the page’s size and
loading time.

External CSS

● With external CSS, you’ll link your web pages to an external .css file, which
can be created by any text editor in your device (e.g., Notepad++).
● This CSS type is a more efficient method, especially for styling a large
website.
● By editing one .css file, you can change your entire site at once.

Follow these steps to use external CSS:

● Create a new .css file with the text editor, and add the style rules. For
example:
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}

● In the <head> section of your HTML sheet, add a reference to your external
.css file right after <title> tag:

<link rel="stylesheet" type="text/css" href="style.css" />

● Don’t forget to change style.css with the name of your .css file.

Advantages of External CSS:

● Since the CSS code is in a separate document, your HTML files will have a
cleaner structure and are smaller in size.
● You can use the same .css file for multiple pages.

Disadvantages of External CSS:

● Your pages may not be rendered correctly until the external CSS is loaded.
● Uploading or linking to multiple CSS files can increase your site’s download
time.
Inline CSS

● Inline CSS is used to style a specific HTML element. For this CSS style, you’ll
only need to add the style attribute to each HTML tag, without using
selectors.
● This CSS type is not really recommended, as each HTML tag needs to be
styled individually. Managing your website may become too hard if you only
use inline CSS.
● However, inline CSS in HTML can be useful in some situations. For example,
in cases where you don’t have access to CSS files or need to apply styles for
a single element only.

Advantages of Inline CSS:

● You can easily and quickly insert CSS rules to an HTML page. That’s why this
method is useful for testing or previewing the changes, and performing
quick-fixes to your website.
● You don’t need to create and upload a separate document as in the external
style.

Disadvantages of Inline CSS:

● Adding CSS rules to every HTML element is time-consuming and makes your
HTML structure messy.
● Styling multiple elements can affect your page’s size and download time.

Example of Inline CSS:

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>

<p style="color:white;">Something usefull here.</p>
</body>
</html>

24. Write CSS code to set proper design of registration page that contain
following data fields (Student enroll no, student name, Student mobile no,
student email id, branch, semester).

25. What is Margin and padding? How it can be used in web page designing?

CSS Margins:-

The CSS margin properties are used to create space around elements, outside of
any defined borders.

With CSS, you have full control over the margins. There are properties for setting
the margin for each side of an element (top, right, bottom, and left).

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

● margin-top
● margin-right
● margin-bottom
● margin-left

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

● margin-top
● margin-right
● margin-bottom
● margin-left

All the margin properties can have the following values:

● auto - the browser calculates the margin

● length - specifies a margin in px, pt, cm, etc.
● % - specifies a margin in % of the width of the containing element
● inherit - specifies that the margin should be inherited from the parent element

Example of CSS Margin:-

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

CSS Padding:-

The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting
the padding for each side of an element (top, right, bottom, and left).

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

● padding-top
● padding-right
● padding-bottom
● padding-left

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

● padding-top
● padding-right
● padding-bottom
● padding-left

All the padding properties can have the following values:

● length - specifies a padding in px, pt, cm, etc.

● % - specifies a padding in % of the width of the containing element
● inherit - specifies that the padding should be inherited from the parent
element

Example of CSS Padding:-

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
 padding-left: 80px;
}

Uses of margin:-

1. Change an Element’s Position on the Page

CSS margins can move an element up or down on the page, as well as left or right.

2. Set the Distance Between Nearby Elements

Margins determine the amount of space between adjacent elements, or whitespace.

3. Overlap Elements

On the flip side, a negative margin value lets you overlap page elements. This can
come in handy when trying to achieve a broken grid effect.

Uses for Padding:-

1. Add Space Between Content and Its Border

This is the most common use of padding, and it’s useful for creating whitespace

inside your elements.

2. Change the Size of an Element

When you increase the padding value, the content will stay the same size, but you

will add more space around the content.

26. Write a program using HTML and CSS to change background color of a
<div> on mouse over even.

<!DOCTYPE html>
<html>
<head>
<style>
 div:hover {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Demo of the :hover selector</h1>

<p>The :hover selector style links on mouse-over:</p>

<div>WT Question Bank</div>

</body>
</html>

27. Explain any five selectors which start with ‘::’ and any five selectors which
start with ‘:’.

28. What is use of position property in css? Explain different value of position
property.

The CSS position property is used to set position for an element. it is also used to
place an element behind another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These
properties can be used only after position property is set first. A position element's
computed position property is relative, absolute, fixed or sticky.
 static: Default value. Elements render in order, as they appear in the
document flow

absolute: The element is positioned relative to its first positioned (not static)
ancestor element

fixed: The element is positioned relative to the browser window

relative: The element is positioned relative to its normal position, so

"left:20px" adds 20 pixels to the element's LEFT position

sticky: The element is positioned based on the user's scroll position

A sticky element toggles between relative and fixed, depending on
the scroll position. It is positioned relative until a given offset position
is met in the viewport - then it "sticks" in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from
version 6.1 with a -webkit- prefix.

initial: Sets this property to its default value.

inherit: Inherits this property from its parent element.

29. Explain different types of background properties.

background-color:-
The background-color property sets the background color of an
element.

The background of an element is the total size of the element, including padding
and border (but not the margin).
Tip: Use a background color and a text color that makes the text easy to read.

background-image:-
The background-image property sets one or more background
images for an element.

By default, a background-image is placed at the top-left corner of an element, and

repeated both vertically and horizontally.

Tip: The background of an element is the total size of the element, including
padding and border (but not the margin).

background-size:-
The background-size property specifies the size of the
background images.

There are four different syntaxes you can use with this property: the keyword syntax
("auto", "cover" and "contain"), the one-value syntax (sets the width of the image
(height becomes "auto"), the two-value syntax (first value: width of the image,
second value: height), and the multiple background syntax (separated with comma).

background-position:-
The background-position property sets the starting position of a
background image.

Tip: By default, a background-image is placed at the top-left corner of an element,

and repeated both vertically and horizontally.

background-clip:-
The background-clip property defines how far the background
(color or image) should extend within an element.
30. Explain the difference between visibility: hidden and display: none?
Both the visibility & display property is quite useful in CSS.
visibility: hidden:-

● The visibility: “hidden”; property is used to specify whether an element is

visible or not in a web document but the hidden elements take up space in
the web document.
● The visibility is a property in CSS that specifies the visibility behavior of an
element.
Visibility property: This property is used to specify whether an element is visible or
not in a web document but the hidden elements take up space in the web
document
display: none:-

● The display property in CSS defines how the components( such as div,
hyperlink, heading, etc) are going to be placed on the web page.
● The display: “none” property is used to specify whether an element exists or
not on the website.
Display property: The Display property in CSS defines how the components(div,
hyperlink, heading, etc) are going to be placed on the web page.
So, the difference between display: “none”; and visibility: “hidden”; right from the
name itself we can tell the difference as display: “none”; completely gets rids of the
tag, as it had never existed in the HTML page whereas visibility: “hidden”; just
makes the tag invisible, it will still on the HTML page occupying space it’s just
invisible.

31. Explain CSS Box model in detail with proper diagram.

The CSS box model is a container that contains multiple properties including
borders, margin, padding, and the content itself. It is used to create the design and
layout of web pages. It can be used as a toolkit for customizing the layout of
different elements. The web browser renders every element as a rectangular box
according to the CSS box model. Box-Model has multiple properties in CSS. Some
of them are given below:

● content: This property is used to displays the text, images, etc, that can
be sized using the width & height property.
● padding: This property is used to create space around the element, inside
any defined border.
● border: This property is used to cover the content & any padding, & also
allows to set the style, color, and width of the border.
● margin: This property is used to create space around the element ie.,
around the border area
● Content Area: This area consists of content like text, images, or other media
content. It is bounded by the content edge and its dimensions are given by
content-box width and height.
● Padding Area: It includes the element’s padding. This area is actually the
space around the content area and within the border-box. Its dimensions are
given by the width of the padding-box and the height of the padding-box.
● Border Area: It is the area between the box’s padding and margin. Its
dimensions are given by the width and height of the border.
● Margin Area: This area consists of space between border and margin. The
dimensions of the Margin area are the margin-box width and the margin-box
height. It is useful to separate the element from its neighbors.

For setting the width & height property of an element(for properly rendering the
content in the browser), we need to understand the working of the CSS Box model.

While setting the width and height properties of an element with CSS, we have only
set the width and height of the content area. We need to add padding, borders, and
margins in order to calculate the full size of an element.
Example:-

p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}

Diagram:-

32. How to create a hyperlink in HTML? Explain all pseudo-class of the

hyperlink in detail.

With HTML, easily add hyperlinks to any HTML page. Link team page, about page,

or even a test by creating it a hyperlink. You can also create a hyperlink for an

external website. To make a hyperlink in an HTML page, use the <a> and </a>

tags, which are the tags used to define the links.

The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it

ends. Whatever text gets added inside these tags, will work as a hyperlink. Add the

URL for the link in the <a href=” ”>. Just keep in mind that you should use the

<a>…</a> tags inside <body>…</body> tags.

Pseudo-class of the hyperlink:-

:link – selects unvisited links.

:visited – selects visited links.
:hover – the state that happens when the user places their mouse pointer on top of
a link.
:active – the state that happens when the user clicks on a link. This is the very brief
moment between clicking on the link and becoming focused, or the moment
between clicking and then going to another web page. Because this state normally
lasts for a short duration, you can see this state easier when you
click-and-mouse-down on a link without releasing the mouse button.
:focus – the state that occurs when the user focuses on the link. This state can be
seen when you tab to a link, or after you click on a link.

33. Difference between pseudo class and pseudo element.

pseudo-class
A pseudo-class always consists of a "colon" (:) followed by the name of the
pseudo-class and optionally by a value between parentheses.
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
● Style an element when a user mouses over it
● Style visited and unvisited links differently
● Style an element when it gets focus

The syntax of pseudo-classes:

selector:pseudo-class {
property: value;
}

pseudo-element
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
● Style the first letter, or line, of an element
● Insert content before, or after, the content of an element

The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}

34. Explain different types of text formatting properties.

1. TEXT COLOR

● Text-color property is used to set the color of the text.

● Text-color can be set by using the name “red”, hex value “#ff0000” or by its
RGB value“rgb(255, 0, 0).
Syntax:
body
{
color:color name;
}
2.TEXT ALIGNMENT
● Text alignment property is used to set the horizontal alignment of the text.
● The text can be set to left, right, centred and justified alignment.
 ● In justified alignment, the line is stretched such that left and right margins are
straight.
Syntax:

body
{
text-align:alignment type;
}

3.TEXT DECORATION

Text decoration is used to add or remove decorations from the text.

Text decoration can be underline, overline, line-through or none.
Syntax:

body
{
text-decoration:decoration type;
}

4.TEXT TRANSFORMATION:-
● Text transformation property is used to change the case of text, uppercase or
lowercase.
● Text transformation can be uppercase, lowercase, or capitalized.
● Capitalise is used to change the first letter of each word to uppercase.
Syntax:

body
{
text-transform:type;
}

35. Explain overflow,white-space, and word-wrap properties.

CSS Overflow:-
 ● The overflow property in CSS defines whether to clip the content or add
scrollbars when the content is too big to fit the specified area.
● This property would be useful to make sure what would happen to the
content if it overflows the height or width of an element’s box.

CSS White Space:-

The white-space property in CSS is used to control the text wrapping and
white-spacing ie., this property can be used to set about the handling of the
white-space inside the elements. There are several types of values in this property
to use.

Syntax:

white-space: normal| nowrap| pre| pre-line| pre-wrap|

break-spaces| initial| inherit;

CSS Word Wrap/Overflow Wrap:-

The overflow-wrap property in CSS allows you to specify that the browser can break
a line of text inside the targeted element onto multiple lines in an otherwise
unbreakable place. This helps to avoid an unusually long string of text causing
layout problems due to overflow.

.example {
overflow-wrap: break-word;
}
Overflow-wrap is useful when applied to elements that contain unmoderated
user-generated content (like comments sections). This can prevent long URLs and
other unbroken strings of text (e.g. vandalism) from breaking a web page’s layout.

36. Explain the pseudo classes associated with anchor tag.

● Pseudo-classes is a way to describe the state of the link or it gives effect to

the anchor tag <a>. A user can show a link whether it has been visited by
them previously or it is in a running state,
● We can also change the cursor sign when the mouse is over it.

<!DOCTYPE html>
<html>
 <head>
<style>
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */

a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a

link</a></b></p>

</body>
</html>

37. List and explain with example, the types of selectors for CSS properties.

Class Selector:-
● The class selector selects HTML elements with a specific class attribute.
● To select elements with a specific class, write a period (.) character, followed
by the class name.

Example:-
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

Universal Selector:-

● The universal selector (*) selects all HTML elements on the page.

<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id="para1">Me too!</p>
<p>And me!</p>

</body>
 </html>

Grouping Selectors:-
● The grouping selector selects all the HTML elements with the same style
definitions.
● It will be better to group the selectors, to minimize the code.
● To group selectors, separate each selector with a comma.

Example:-
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

38. Explain float,Transition,Animation Properties in detail.

float:-
● Float is a CSS property that positions the element to the left or right in
its parent container.
● It enables the text, images, or other inline elements to wrap around the
floating element.
● Elements other than the floating element also become part of the flow.
There is where clear property comes into action.
 ● It clears the area on either side of the floating element by specifying its
position.

Syntax:-
float: none | left | right | inherit;

CSS Float property can take any of the four values :

● right : The floating element is positioned on the right side of its parent
container.

img {
float: right;
}

● left : The floating element is present on the left side of its parent container.

img {
float: left;
}

● inherit : It inherits its floating value from the parent element.

img {
float: inherit;
}

● none : The element does not float and is displayed where it appears in the
text.

img {
float: none;
}

CSS transition property:-

transition:-
● CSS transitions allows you to change property values smoothly, over a given
duration.
To create a transition effect, you must specify two things:
● the CSS property you want to add an effect to
● the duration of the effect

transition:-
The transition property is a shorthand property for:
● transition-property
● transition-duration
● transition-timing-function
● Transition-delay

div {
width: 100px;
transition: width 2s;
}

div:hover {
width: 300px;
}

transition-delay:-

The transition-delay property specifies a delay (in seconds) for the transition effect.

div {
transition-delay: 1s;
}

transition-duration:-

The transition-duration property specifies how many seconds (s) or milliseconds

(ms) a transition effect takes to complete.

div {
transition-duration: 5s;
}

transition-property:-
The transition-property property specifies the name of the CSS property the
transition effect is for (the transition effect will start when the specified CSS property
changes).

div {
transition-property: width, height;
}

div:hover {
width: 300px;
height: 300px;
}

Animations:-

● An animation lets an element gradually change from one style to another.

● You can change as many CSS properties you want, as many times as you
want.
● To use CSS animation, you must first specify some keyframes for the
animation.
● Keyframes hold what styles the element will have at certain times.

CSS Animation properties:-

@keyframes:-
● When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
● To get an animation to work, you must bind the animation to an element.

animation-delay:-

The animation-delay property specifies a delay for the start of an animation.

div {
animation-delay: 2s;
}

animation-duration:-
The animation-duration property defines how long an animation should take to
complete one cycle.

div {
animation-duration: 3s;
}

animation-name:-

The animation-name property specifies a name for the @keyframes animation.

div {
animation-name: mymove;
}

39. Explain after and before pseudo elements.

::after:-
● The ::after creates a pseudo-element used to insert some content after the
selected HTML element.
● The content property is used to insert the desired content after the selected
HTML element.
● The inserted content is inline by default.

Syntax:-

selector::after {
property: value;
}

Code:-

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a Business!!</h1>
<p>The ::after pseudo-element inserts content after the content of
an element.</p>

<h1>Self Made Millionaire</h1>

</body>
</html>

Output:-

::before:-
● The ::before creates a pseudo-element used to insert some content before
the selected HTML element. The content property is used to insert the
desired content before the selected HTML element. The inserted content is
inline by default.
● The content added using the content property can be styled using other CSS
properties like background-color, color, font-weight, etc.
Syntax:-

selector::before {
property: value;
}

Code:-

<!DOCTYPE html>
 <html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>Fact:-</h1>
<p>The ::before pseudo-element inserts content before the content
of an element.</p>

<h1>Money Speaks Louder than the Success!!</h1>

</body>
</html>

Output:-

40. Explain first letter and first line pseudo elements.Explain hover pseudo
class.

::first-letter Selector:-

The ::first-letter selector CSS Pseudo-element is used to apply the style to the first
letter of the first line of a block-level element, the condition is it should not be
preceded by other content ( such as images or inline tables).

Syntax:
::first-letter {
// CSS Property
}

Code:-
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 250%;
color: green;
}
p:hover:first-letter {
color: red
}
</style>
</head>

<body style="text-align: center;">

<h1 style="color:green;">
CSS ::first-letter selector
</h1>
<p>Investments Makes Man Wealthy Not Rich</p>

</body>
</html>

Output:-
::first-line Selector:-

The ::first-line selector in CSS is used to apply style to the first line of a block-level
element. The length of the first line depends on many factors, including the width of
the element, the width of the document, font-size of the text, etc.
Syntax:

::first-line {
//CSS Property
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>
CSS ::first-line selector
</title>
<style>
p {
width: 25%;
}
p::first-line {
color: white;
background: green;
}
p:hover:first-line {
color: red;
background: blue;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
Business works for Me!!
</h1>
<h2>
CSS ::first-line selector
</h2>
<p>
Import Export Business
Investment Companies
 Food Industries
</p>
</body>
</html>

41. List out text related CSS Property and explain.

Text Color

The color property is used to set the color of the text. The color is specified by:
● a color name - like "red"
● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"

Code:-

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
<h1>Food Industries are Money Friendly!!</h1>
<p>This text is red.</p>
</body>
</html>

Output:-
Text Alignment:-

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

Code:-

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>(center)</h1>
<h2>(left)</h2>
<h3>(right)</h3>
<p>The three headings above are aligned center, left and
right.</p>
</body>
</html>

Output:-
Letter Spacing:-

The letter-spacing property is used to specify the space between the characters in a
text.

Code:-

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>

Output:-
Line Height:-

The line-height property is used to specify the space between lines:

Code:-
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<h1>Using line-height</h1>
<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to
120%.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>

Output:-

42. Explain different selectors and combinations.

Selectors and Combinators:-

● CSS combinators are explaining the relationship between two selectors.

● CSS selectors are the patterns used to select the elements for style purpose.
● A CSS selector can be a simple selector or a complex selector consisting of
more than one selector connected using combinators.

There are four types of combinators available in CSS which are discussed below:

● General Sibling selector (~)

● Adjacent Sibling selector (+)
● Child selector (>)
● Descendant selector (space)

General Sibling selector:

A general sibling selector is based on the element which comes after

the first selectors and shares the same parent as it. It can be used to select a
 group of elements that have common parent.

Adjacent Sibling selector:

“Adjacent sibling combinator” is used to select the element that is just
next to or adjacent to the specified tag. The combinator is similar to “parent
selector”, but it also finds out the children of the specified tag and selects
only one of them.

Child Selector:
The descendant selector is used to select the element that is
immediately child of the specified tag. This combinator takes the more strict
approach, and only selects the second selector if it has the first selector as
its parent.

Descendant selector:
The Selector combinator is used to select all the children elements of
sibling elements.*Note that this combinator is not exhaustive, meaning the
child element may have ancestors.

43. Explain Background Properties with example.

background-color:-

The background-color property specifies the background color of an element.

body {
background-color: lightblue;
}

background-image:-

The background-image property specifies an image to use as the background of an

element.

By default, the image is repeated so it covers the entire element.

body {
background-image: url("paper.gif");
}
background-attachment:-
The background-attachment property sets whether a background image scrolls with
the rest of the page, or is fixed.

Syntax:-

background-attachment:scroll|fixed|local|initial|inherit;

Example:-

body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
44. Explain CSS in a Form with help of an example.

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
 float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname"
placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname"
placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write
something.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Output:-

45. Explain CSS in a Table with help of an example.

<html>
<head>
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
 </table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

Output:-

46. List 5 CSS Properties applicable in a paragraph.

font-style:-
The font-style property defines the font style for a text. The property has
three values: normal, italic and oblique.

Syntax:-
font-style: normal | italic | oblique | initial | inherit;

font-family:-
 The font-family property allows creating a prioritized list of font family names
and/or generic family names for the selected element.

Syntax:-
font-family: family-name | generic-family | initial | inherit;

Font-size:-
The font-size property defines the font size of the text.

Syntax:-
font-size: medium | xx-small | x-small | small | large | x-large |
xx-large | smaller | larger | length | initial | inherit;

color:-

The color property describes the color of the text content and text
decorations. A background color can be combined with a text color to make the text
easy readable.

Syntax:-
color: color | initial | inherit;

background-color:-

The background-color property sets an element background color. The

background of an element is the total size of it which includes padding and border
(but not the margin).

Syntax:-
background-color: color | transparent | initial | inherit;

47. Show the precedence relation between Internal, Inline and External CSS.

Properties of CSS: Inline CSS has the highest priority, then comes
Internal/Embedded followed by External CSS which has the least priority. Multiple
style sheets can be defined on one page. If for an HTML tag, styles are defined in
multiple style sheets then the below order will be followed.
● As Inline has the highest priority, any styles that are defined in the internal
and external style sheets are overridden by Inline styles.
● Internal or Embedded stands second in the priority list and overrides the
styles in the external style sheet.
 ● External style sheets have the least priority. If there are no styles defined
either in inline or internal style sheet then external style sheet rules are
applied for the HTML tags.

48. What is JavaScript?

● JavaScript is the most popular web scripting language, used for both
client-side as well as server-side development.
● Supporting object-oriented programming abilities, the JavaScript code can
be inserted into HTML pages that can be understood and executed by web
browsers.

49. Enumerate the differences between Java and JavaScript?

Java JavaScript

This is OOP or Object-Oriented This is an object based scripting

programming language language

A stand-alone language Not stand-alone, incorporated into HTML

program for operation

Strongly typed language is used, Language utilised is loosely typed, so

and data type of variable is decided that the user does not have to worry
before declaring or using it about the data type before the
declaration

Code has to be compiled The code is all text

Slightly more complex Easier in comparison

Used to perform complex tasks Complex tasks cannot be executed

Large amount of memory is Memory consumption is lesser

required
 Programs are saved with “.java” Programs are saved with JavaScript, “.js”
extension extension

Stored in the / client host machine Stored in host or client machine as

under the “Byte” code “source” code

Compiled on the server before it is JavaScript is interpreted on the client

executed on the client side side

Is static and the code once written Dynamic and is a cross-platform

can be run on any computing language
platform

50. What are JavaScript Data Types?

There are a total of 7 basic data types supported by JavaScript. Each one of them is
briefed up as follows:

● Boolean — Represents true and false values

● Null — Represents empty, nothing, and unknown type of values
● Number — Represents both integer and floating point values
● Object — Used for storing collections of data or more complex entities
● String — Represents single-character, multi-character, and alphanumeric
values
● Symbol — Used for creating unique identifiers for objects
● Undefined — Represents value not assigned. If a variable is only declared
and not assigned in JS, then it represents the undefined data type.

51. What is the use of is NaN function?

● The isNaN() function is used to check whether a given value is an illegal

number or not.
● It returns true if value is a NaN else returns false. It is different from the
Number.isNaN() Method.

Syntax:
isNaN( value )
Parameter Values: This method accepts single parameter as mentioned above and
described below:

● value: It is a required value passed in the isNaN() function.

Return Value: It returns a Boolean value i.e. returns true if the value is NaN else returns
false.

52. What are undefined and undeclared variables?

Undefined: It occurs when a variable has been declared but has not been assigned
with any value. Undefined is not a keyword.
Undeclared: It occurs when we try to access any variable that is not initialized or
declared earlier using var or const keyword. If we use ‘typeof’ operator to get the
value of an undeclared variable, we will face the runtime error with return value as
“undefined”. The scope of the undeclared variables is always global.
For example:
Undefined:
var geek;
undefined
console.log(geek)
●
Undeclared:
//ReferenceError: myVariable is not defined
● console.log(myVariable)

53. What are global variables? How are these variable declared and what are
the problems associated with using them?

Global Variable:

● In contrast, global variables are variables that are defined outside of

functions.
● These variables have global scope, so they can be used by any function
without passing them to the function as parameters.
● Since global variables are defined outside there function so variables with
the same name can not be used in different functions.
● All the scripts and functions on a web page can access it.
How to Declare global variables:-

Global Variables are the variables that can be accessed from anywhere in the
program. These are the variables that are declared in the main body of the source
code and outside all the functions. These variables are available to every function to
access.
● Global variables are declared at the start of the block(top of the program)
● Var keyword is used to declare variables globally.
● Global variables can be accessed from any part of the program.

Problems associated using them:

● This is because global variables are easily overwritten by other scripts.

● Global Variables are not bad and not even a security concern, but it shouldn’t
overwrite values of another variable.
● On the usage of more global variables in our code, it may lead to a
maintenance issue.

54. What is a prompt box?

● A prompt box is often used if you want to input a value before entering a
page. When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
● The prompt() method returns the input value if the user clicks "OK".

55. What is 'this' keyword in JavaScript?

● “This” keyword refers to an object that is executing the current piece of code.
It references the object that is executing the current function.
● If the function being referenced is a regular function, “this” references the
global object.
● If the function that is being referenced is a method in an object, “this”
references the object itself.
● The JavaScript “this” keyword is one of the most widely used keywords. It
can seem complex at first, but once you start using “this” keyword,
everything will become clear.

56. Which symbol is used for comments in Javascript?

Single Line Comments:-

● Single line comments start with //.
 ● Any text between // and the end of the line will be ignored by JavaScript (will
not be executed).

Example:-
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

Multi-line Comments:-
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.

Example:-
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";

57. What is === operator in javascript? Explain in detail.

Strict equality (===):-

The strict equality operator (===) checks whether its two operands are equal,
returning a Boolean result. Unlike the equality operator, the strict equality operator
always considers operands of different types to be different.

Syntax:-

x === y

The strict equality operators (=== and !==) provide the IsStrictlyEqual semantic.
● If the operands are of different types, return false.
● If both operands are objects, return true only if they refer to the same object.
● If both operands are null or both operands are undefined, return true.
● If either operand is NaN, return false.
● Otherwise, compare the two operand's values:
○ Numbers must have the same numeric values. +0 and -0 are
considered to be the same value.
 ○ Strings must have the same characters in the same order.

58. Explain how can you submit a form using JavaScript?

The submit() method submits the form (same as clicking the Submit button).

<!DOCTYPE html>
<html>
<body>
<p>Enter some text in the fields below, then press the "Submit
form" button to submit the form.</p>
<form id="myForm" action="/action_page.txt">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>

Output:-

59. What are all the looping structures in JavaScript?

for loop:-
 ● for loop which provides a brief and systematic way of writing the loop
structure.
● Loops are handy, if you want to run the same code over and over again, each
time with a different value.

The for statement creates a loop with 3 optional expressions:

for (expression 1; expression 2; expression 3) {

// code block to be executed
}

● Expression 1 is executed (one time) before the execution of the code block.
● Expression 2 defines the condition for executing the code block.
● Expression 3 is executed (every time) after the code block has been
executed.

for-in:-

The JavaScript for in statement loops through the properties of an Object

Syntax

for (key in object) {

// code block to be executed
}

Example

const person = {fname:"John", lname:"Doe", age:25};

let text = "";

for (let x in person) {
text += person[x];
}

Example Explained
● The for in loop iterates over a person object
● Each iteration returns a key (x)
● The key is used to access the value of the key
● The value of the key is person[x]
The For Of Loop
● The JavaScript for of statement loops through the values of an iterable
object.
● It lets you loop over iterable data structures such as Arrays, Strings, Maps,
NodeLists, and more:
Syntax
for (variable of iterable) {
// code block to be executed
}
variable - For every iteration the value of the next property is assigned to the
variable. Variable can be declared with const, let, or var.
iterable - An object that has iterable properties.

Example

const cars = ["BMW", "Volvo", "Mini"];

let text = "";

for (let x of cars) {
text += x;
}

The While Loop

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

Syntax

while (condition) {
// code block to be executed
}

Example

In the following example, the code in the loop will run, over and over again, as
long as a variable (i) is less than 10:

while (i < 10) {

text += "The number is " + i;
i++;
}

If you forget to increase the variable used in the condition, the loop will never end.
This will crash your browser.

The Do While Loop

The do while loop is a variant of the while loop. This loop will execute the code
block once, before checking if the condition is true, then it will repeat the loop as
long as the condition is true.

Syntax

do {
// code block to be executed
}
while (condition);

Example
The example below uses a do while loop. The loop will always be executed at
least once, even if the condition is false, because the code block is executed
before the condition is tested:
Example

do {
text += "The number is " + i;
i++;
}
while (i < 10);

60. How can you convert the string of any base to integer in JavaScript?

● In JavaScript parseInt() function (or a method) is used to convert the passed

in string parameter or value to an integer value itself.
● This function returns an integer of base which is specified in second
argument of parseInt() function.
● parseInt() function returns Nan( not a number) when the string doesn’t
contain number.

Syntax:
parseInt(Value, radix)

● It accepts string as a value and converts it to specified radix system (any

desired numerical value passed by a user) and returns an integer
(corresponding to the passed in numerical radix value). Program to convert
string to integer:
● ParseInt() function converts number which is present in any base to base 10.
It parses string and converts until it faces a string literal and stops parsing.

Example:-
<script>
function convertStoI() {
var a = "100";
var b = parseInt(a);
document.write("Integer value is" + b);
var d = parseInt("3 11 43");
document.write("</br>");
document.write('Integer value is ' + d);
}
convertStoI();
</script>

Output:-

Integer value is100

Integer value is 3
 61. Explain the difference between "==" and "==="?

== ===

Compares two operands Compares two operands

returns true if operands have the same returns true only if operands are of
data type and same value, returns same data type and same value,
false if the values differ. otherwise returns false

In case both operands are of different In case both operands are of different
data types, it performs type data type, it doesn't perform type
conversion of one operand in order to conversion of the operands.
make the data types of the operands
the same.

Also known as loose equality Also known as strict equality

Follows abstract equality comparison Follows strict equality comparison

algorithm algorithm

62. What would be the result of 3+2+"7"?

Javascript throws an error.

Because the double quotes is not close.

The exception is raised.

Error: String literal is not closed properly using double quotes

if double quotes are close.

then it returns 3+2+"7"= 57
if double quotes are removed.
then 3+2+7=12

Since 3 and 2 are integers, they will be added numerically. And since 7 is a string,
its concatenation will be done. So the result would be 57.

63. What is an undefined value in JavaScript?

64. What are all the types of Pop up boxes available in JavaScript?

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.

Alert Box
● An alert box is often used if you want to make sure information comes
through to the user.
● When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");
The window.alert() method can be written without the window
prefix.
Example
alert("I am an alert box!");

Confirm Box
● A confirm box is often used if you want the user to verify or accept
something.
● When a confirm box pops up, the user will have to click either "OK" or
"Cancel" to proceed.
● If the user clicks "OK", the box returns true. If the user clicks "Cancel", the
box returns false.
Syntax
window.confirm("sometext");
The window.confirm() method can be written without the window
prefix.
Example
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
Prompt Box
● A prompt box is often used if you want the user to input a value before
entering a page.
● When a prompt box pops up, the user will have to click either "OK" or
"Cancel" to proceed after entering an input value.
● If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
Syntax
window.prompt("sometext","defaultText");
The window.prompt() method can be written without the window
prefix.
Example
let person = prompt("Please enter your name", "Harry Potter");
let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}

65. How can a page be forced to load another page in JavaScript?

Approach: We can use window.location property inside the script tag to forcefully
load another page in Javascript. It is a reference to a Location object that is it
represents the current location of the document. We can change the URL of a
window by accessing it.

Syntax:

<script>
window.location = <Path / URL>
</script>

Example:
<script>
window.location = "https://www.google.com/"
</script>

So in the above example, we see that by changing the window.location Object

inside Javascript we can change the URL of our window and thus successfully load
any page forcibly from our Javascript without any href tag. We will build a small
working sample to learn it practically.

66. What is the difference between an alert box and a confirmation box?

Alert box Confirmation box

Alert box is used if we want the Confirm box is used if we want the user
information comes through to the user. to verify or accept something.

You need to click “OK” to proceed We need to click either “OK” or

when an alert box pops up. “Cancel” to proceed when a
confirmation box pops up.

Its syntax is -: Its syntax is -:

window.alert(“sometext”); window.confirm(“sometext”);

It always return true we always need to It return true if we click “OK”

click on “OK” to proceed further.

The alert box takes the focus away from It returns false if we dont click on “OK”
the current window and forces the
browser to read the message.

67. What are escape characters?Explain its use.

Escape characters:-
Escape Characters are the symbol used to begin an escape command in order to
execute some operation. They are characters that can be interpreted in some
alternate way than what we intended to. Javascript uses ‘\‘ (backslash) in front as an
escape character.

Its Use:-

In JavaScript, we use escape characters, typically backslash (\ \) while working with

special characters, such as ampersands (&), apostrophes (‘), double quotes (“ “),
and single quotes (‘ ‘). Whatever enclosed within the escape characters gets
displayed by the JavaScript.

Six additional escape characters are also available in JavaScript:

● \b — Backspace
● \f — Form feed
● \n — New line
● \r — Carriage return
● \t — Horizontal tabulator
● \v — Vertical tabulator

These aren’t in anyway executed in the HTML or JS code. These were originally
designed for controlling fax machines, teletypes, and typewriters.

68. What are JavaScript Cookies?

● A cookie is simply data, usually small, sent from a website and stored on the
user’s computer by the web browser used to access the website.
● It is a reliable way for websites to remember stateful information as well as
record the browsing activity of the user.
● The most basic way of creating a cookie using JS is to assign a string value
to the document.cookie object.

The general syntax is:

document.cookie = "key1 = value1; key2 = value2; ... ; keyN=
valueN; expires = date";

Reading a Cookie:
 ● Reading a cookie using JS is as simple as creating the same. As the value of
the document.cookie object is the cookie, use this string whenever you wish
to access the cookie.
● The document.cookie string keeps a list of name = value pairs, where each
pair is separated by a semicolon.
● The name represents the name of a cookie and the value represents the
respective cookie’s string value. For breaking the string into key and value,
you can use the split() method.

Deleting a Cookie:

● For deleting a cookie using JavaScript, simply set the expiration date
(expires) to a time that’s already past.
● Some web browsers don’t let you delete a cookie unless you don’t specify
the path of the cookie. Hence, defining the cookie path is important to ensure
that the right cookie is deleted.

69. Explain what is pop()method in JavaScript?

The arr.pop() method is used to remove the last element of the array and also
returns the removed element. This function decreases the length of the array by 1.

Syntax:
arr.pop()

Parameters: This method does not accept any parameter.

Return value This method returns the removed element array. If the array is empty,
then this function returns undefined.

Below examples illustrate the JavaScript Array pop() method:

Example:
In this example the pop() method removes the last element from the array, which is
4 and returns it.

var arr = [34, 234, 567, 4];

var popped = arr.pop();
print(popped);
print(arr);
Output:

4
34,234,567

70. Mention what is the disadvantage of using innerHTML in JavaScript?

Disadvantages of innerHTML
Following are the disadvantages of using inner HTML −

Inner HTML is slow

When we use the inner HTML property in the code then it allows us to change the
content using JavaScript. It is very slow because as inner HTML already parses the
content so that’s why it takes time.

Event handlers attached to any DOM element are preserved

The event handlers are not automatically attached to the new elements created by
innerHTML. To change that, we have to track the event handlers and manually
attach them to a new element.

It means that first, we have to fetch the element property through innerHTML, and
then we have to attach them to a new element.

Some other disadvantages:

Replacement is done everywhere

The ‘+=’ operator is commonly used to append to an HTML tag. It will append the
newly added node to the end of the existing DOM (Document Object Model).
However, this causes re-parsing of the entire document, which can take time in
large documents.

Breaks the document

The innerHTML property does not provide much validation by default. This can
cause any HTML code to be used, which may or may not work or break the
JavaScript document.

Used for Cross-site Scripting

The text and images or elements in the webpage can used by hackers or malicious
users to change the text or data and show some different undesired or threatful
content by the other HTML element tag. This leads to change of sensitive and
confidential information.

71. Which keyword is used to print the text in the screen?

Solution:-

JavaScript can "display" data in different ways. One of the ways in the
document.write() method.

The example is as follows:

document.write("Welcome Slight Book") is used to print the text - Welcome

Slight Book on the screen.

72. What is the use of onblur function?

The HTML DOM onblur event occurs when an object loses focus. The onblur event
is the opposite of the onfocus event.
The onblur event is mostly used with form validation code (e.g. when the user
leaves a form field).

Syntax:

In HTML:
<element onblur="myScript">

In JavaScript:
object.onblur = function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("blur", myScript);

73. What is the use of Pop, push, shift and unshift method in JavaScript?
The arr.pop() method is used to remove the last element of the array and also
returns the removed element. This function decreases the length of the array by 1.

Syntax:
arr.pop()

Parameters: This method does not accept any parameter.

Return value This method returns the removed element array. If the array is empty,
then this function returns undefined.

Array push()
This method adds an element to the end of an array. When applied the arrays, the
length increases by 1 where which the index of the element is array.length - 1

Syntax:
array.push(value);

The value which is an argument passed to the method could a number, string,
object or even array.

Return Value
The return value is the new length of array.

Array shift()
This method, similar to pop() removes the first element of the array. When applied to
arrays, this results in a decrease in length by 1

Syntax
array.shift()
The method takes no argument.

Return Value
The return value is the element which was removed from the array. If the array is
empty, the return value would be undefined.

Array unshift()
This method which is similar to push() adds an element to the beginning of the array.
When applied, the array length increases by 1.

Syntax
array.unshift(value);
The method takes an argument of value which could be object, array, string, etc.

Return Value
The return value is the new length of the array after adding the element.

74. How are DOM utilized in JavaScript?

● The Document Object Model (DOM) is a programming interface for

HTML(HyperText Markup Language) and XML(Extensible markup language)
documents.
● It defines the logical structure of documents and the way a document is
accessed and manipulated.
● Note: It is called a Logical structure because DOM doesn’t specify any
relationship between objects.
● DOM is a way to represent the webpage in a structured hierarchical way so
that it will become easier for programmers and users to glide through the
document.
● With DOM, we can easily access and manipulate tags, IDs, classes,
Attributes, or Elements of HTML using commands or methods provided by
the Document object.
● Using DOM, the JavaScript gets access to HTML as well as CSS of the web
page and can also add behavior to the HTML elements.
● So basically Document Object Model is an API that represents and interacts
with HTML or XML documents.

75. How are JavaScript and ECMA Script related?

76.How are event handlers utilized in JavaScript?

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and
browser actions:
● Things that should be done every time a page loads
● Things that should be done when the page is closed
● Action that should be performed when a user clicks a button
● Content that should be verified when a user inputs data
● And more ...
Many different methods can be used to let JavaScript work with events:
● HTML event attributes can execute JavaScript code directly
● HTML event attributes can call JavaScript functions
● You can assign your own event handler functions to HTML elements
● You can prevent events from being sent or being handled

Common HTML Events:

77. What does the following statement declares?

var myArray = [[[]]];

It declares a three dimensional array.

Unit-3 Angular JS

78. What is AngularJS? Explain what are the key features of Angular JS ?

It is an open-source and front-end web development framework with great features

or support. It is a framework that is continually developing and expanding to include
better methods for creating web applications. It develops applications primarily
using the model view controller (MVC) concept and supports both data binding
features and dependency injection.

Since AngularJS is mainly based on HTML and JavaScript, there is no need to learn
another syntax or language. It transforms static HTML into dynamic HTML. It
extends HTML's capabilities by adding built-in attributes and components and
creating custom attributes using simple JavaScript.

Angular JS features:-

There are various features of Angular JS. Some of them are as follows:

● Time-saving: AngularJS allows us to work with modules that help us to reuse

them, saving time and code.
● Easy to work: It is easy to work with Angular JS because it uses JavaScript,
HTML, and CSS languages.
 ● Ready to use a template: AngularJS is mostly plain HTML, and it mostly uses
the plain HTML template, which it passes to the DOM and then to the
AngularJS compiler. It passes through the templates, and then they're ready
to use.

79. Explain what is scope & Services in AngularJS ?

The scope is the binding part between the HTML (view) and the JavaScript
(controller).

The scope is an object with the available properties and methods.

The scope is available for both the view and the controller.

How to Use the Scope?

When you make a controller in AngularJS, you pass the $scope object as an
argument:

When adding properties to the $scope object in the controller, the view (HTML) gets
access to these properties.

In the view, you do not use the prefix $scope, you just refer to a property name, like
{{carname}}.

Example:-

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular
.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>I am an {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
$scope.name = "Industrialist";});
</script>
</body>
</html>

Services:-

Angular services are objects that get instantiated just once during the lifetime of an
application. They contain methods that maintain data throughout the life of an
application, i.e., data is available all the time.

The main objective of a service is to organize and share business logic, models, or
data and functions with different components of an Angular application. They are
usually implemented through dependency injection.

Features:-

● Services in Angular are simply typescript classes with the @injectible

decorator. This decorator tells angular that the class is a service and can be
injected into components that need that service. They can also inject other
services as dependencies.
● As mentioned earlier, these services are used to share a single piece of code
across multiple components. These services are used to hold business logic.
● Services are used to interact with the backend. For example, if you wish to
make AJAX calls, you can have the methods to those calls in the service and
use it as a dependency in files.

80. Explain what is Angular Expression? Explain what is key difference

between angular expressions and JavaScript expressions?
AngularJS expressions can be written inside double braces: {{ expression }}.
AngularJS expressions can also be written inside a directive: ng-bind="expression".
AngularJS will resolve the expression, and return the result exactly where the
expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain
literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular
.min.js"></script>
<body>
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Output:-

My first expression: 10

Angularjs expression JavaScript expression

Angular expressions are evaluated JavaScript expressions are evaluated

against a scope one-timeobject. against the global window.

In Angular, expression evaluation is JavaScript expression tries to evaluate

forgiving to undefined and null. undefined properties and generates
ReferenceError or TypeError.

Control flow statements cannot be used Control flow statements can be used in
in angularjs JavaScript expressions
expressions,i.e,loop,conditional or
 exception

Angular Expressions do not allow The function declaration is allowed in

function declaration, not even inside the JavaScript expressions
ng-init directive.

In an Angular expression, Bitwise or You can use Bitwise, or void operators

void operators cannot be used. in a JavaScript expression.

Angular expressions can work with filter JavaScript expressions do not work
with filter

One-time binding is supported by JavaScript expressions do not allow

AngularJS. To create one time binding one-time binding.
use :: expression.

81. With options on page load how can you initialise a select box ?

You can initialize a select box with options on page load by using ng-init directive

<div ng-controller = " apps/dashboard/account " ng-switch On = "!

! accounts" ng-init = " loadData ( ) ">
82. Explain what are directives ? Mention some of the most commonly used
directives in AngularJS application ?

Directives are markers on the DOM element which tell AngularJS to attach a
specified behavior to that DOM element or even transform the DOM element with its
children. Simple AngularJS allows extending HTML with new attributes called
Directives. AngularJS has a set of built-in directives which offers functionality to the
applications. It also defines its own directives. A directive can be defined using
some functions which are: Element name, Attribute, Class, and Comment.

Directives are special attributes starting with ng- prefix. Following are the most
common directives:
● ng-app: This directive starts an AngularJS Application.
● ng-init: This directive initializes application data.
● ng-model: This directive defines the model that is variable to be used in
AngularJS.
● ng-repeat: This directive repeats html elements for each item in a collection.

83. Mention what are the advantages of using AngularJS ?

1 - Improved Design Architecture
2 - Promotes Code Reusability
3 - Better Plug & Play Components
4 - Faster application development
5 - Handles Dependencies
6 - Allows Parallel Development
7 - Allows Controls to Developers
8 - Helps Manage State

84. Explain what AngularJS routes do ? Explain what is data binding in

AngularJS ?

Routing in AngularJS is used when the user wants to navigate to different pages in
an application but still wants it to be a single page application. AngularJS routes
enable the user to create different URLs for different content in an application. The
ngRoute module helps in accessing different pages of an application without
reloading the entire application.
● $routeProvider is used to configure the routes. It helps to define what page to
display when a user clicks a link. It accepts either when() or otherwise()
method.
● The ngRoute must be added as a dependency in the application module:

Data Binding:-

Data binding is a very useful and powerful feature used in software development
technologies. It acts as a bridge between the view and business logic of the
application.
AngularJS follows Two-Way data binding model.

One-Way Data Binding

The one-way data binding is an approach where a value is taken from the data
model and inserted into an HTML element. There is no way to update model from
view. It is used in classical template systems. These systems bind data in only one
direction.
Two-Way Data Binding

Data-binding in Angular apps is the automatic synchronization of data between the

model and view components.
Data binding lets you treat the model as the single-source-of-truth in your
application. The view is a projection of the model at all times. If the model is
changed, the view reflects the change and vice versa.

85. What makes AngularJS better ? Explain what is string interpolation in

Angular.js ?

Registering Callbacks: There is no need to register callbacks . This makes your code
simple and easy to debug. Control HTML DOM programmatically: All the application
that are created using Angular never have to manipulate the DOM although it can be
done if it is required Transfer data to and from the UI: Angular.js helps to eliminate
almost all of the boiler plate like validating the form, displaying validation errors,
returning to an internal model and so on which occurs due to flow of marshalling
data No initilization code: With angular.js you can bootstrap your app easily using
services, which auto-injected into your application in Guice like dependency
injection style

String Interpolation:-
In angular.js the compiler during the compilation process matches text and
attributes using interpolate service to see if they contains embedded expressions.
As part of normal digest cycle these expressions are updated and registered as
watches.

86. Write a program to print HELLO WORLD in angular js.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script
src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
 angular.module("app",[]).controller("HelloWorldCtrl",
function($scope) {
$scope.message="Hello World"
} )
</script>

</body>
</html>
Output:-

Hello World

87. Explain Web feeds and Associate arrays in PHP

Web Feed:-

A Web feed is a means for content distributors to syndicate their content in real time
to users. A web feed does not just include blog posts from a website, but all kinds
of information from other websites. With the help of an aggregator you can view
multiple web feeds on one page.

The model is that the content provider publishes a feed link on their site, which end
users can register with an aggregator program (also called a news reader) running
on their own machines. When instructed, the aggregator asks all the servers in its
feed list if they have new content; if so, it makes a note or downloads it.

Web feeds are typically HTML (webpage content) or links to webpages and other
kinds of digital media. Often when websites provide web feeds to notify users of
content updates, they only include summaries in the web feed rather than the full
content itself. Web Feeds are operated by many news websites, weblogs, schools,
and podcasters

Associative Arrays:-

Associative arrays are used to store key value pairs. For example, to store the marks
of different subject of a student in an array, a numerically indexed array would not
be the best choice. Instead, we could use the respective subject’s names as the
keys in our associative array, and the value would be their respective marks gained.
<?php
/* First method to create an associate array. */
$student_one = array("Maths"=>95, "Physics"=>90,
"Chemistry"=>96, "English"=>93,
"Computer"=>98);

/* Second method to create an associate array. */

$student_two["Maths"] = 95;
$student_two["Physics"] = 90;
$student_two["Chemistry"] = 96;
$student_two["English"] = 93;
$student_two["Computer"] = 98;

/* Accessing the elements directly */

echo "Marks for student one is:\n";
echo "Maths:" . $student_two["Maths"], "\n";
echo "Physics:" . $student_two["Physics"], "\n";
echo "Chemistry:" . $student_two["Chemistry"], "\n";
echo "English:" . $student_one["English"], "\n";
echo "Computer:" . $student_one["Computer"], "\n";
?>

Output:-

88. Write a PHP program to make the sum of first 100 odd numbers.

<?php
$sum=0;

for($i=1;$i<=200;$i+=2)
{
$sum+=$i;
}

echo "the total sum of 100 odd numbers: $sum";

?>

89. What is an HTML form? How can you access the form data in php page?
Explain with suitable example.
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

When a form is submitted to a PHP script, the information from that form is
automatically made available to the script. There are few ways to access this
information, for example:
Example #1 A simple HTML form

<form action="foo.php" method="post">

Name: <input type="text" name="username" /><br />
Email: <input type="text" name="email" /><br />
<input type="submit" name="submit" value="Submit me!" />
</form>

There are only two ways to access data from your HTML forms. Currently available
methods are listed below:
Example #2 Accessing data from a simple POST HTML form

<?php
echo $_POST['username'];
echo $_REQUEST['username'];
?>

Using a GET form is similar except you'll use the appropriate GET predefined
variable instead. GET also applies to the QUERY_STRING (the information after the
'?' in a URL). So, for example, http://www.example.com/test.php?id=3 contains
GET data which is accessible with $_GET['id'].

90. Write a PHP program that receives the value of N using HTML form and
displays the first N Fibonacci numbers as HTML list.

<?php
function Fibonacci($num){
if ($num == 0)
return 0;
else if ($num == 1)
return 1;
 else
return (Fibonacci($num-1) + Fibonacci($num-2));
}
?>
<html>
<head><title>Fibonacci example</title></head>
<body><form action="" method="POST">
Enter Number:<input type="text" name="num"/><br/><br/>
<input type="submit" name="print" value="Print N Fibonacci
Numbers"/>
</form>
<?php
if(isset($_POST["print"]))
{
$num = $_POST["num"];
for ($counter = 0; $counter < $num; $counter++){
echo " ".Fibonacci($counter)." ";
}
}
?>
</body></html>

91. Explain the PHP arrays with example.

An array is a data structure that stores one or more similar type of values in a single
value. For example if you want to store 100 numbers then instead of defining 100
variables its easy to define an array of 100 length.

An array is a data structure that stores one or more similar type of values in a single
value. For example if you want to store 100 numbers then instead of defining 100
variables its easy to define an array of 100 length.
There are three different kind of arrays and each array value is accessed using an ID
c which is called array index.

● Numeric array − An array with a numeric index. Values are stored and
accessed in linear fashion.
These arrays can store numbers, strings and any object but their index will be
represented by numbers. By default array index starts from zero.

Examples:-
<html>
<body>

<?php
/* First method to create array. */
$numbers = array( 1, 2, 3, 4, 5);

foreach( $numbers as $value ) {

echo "Value is $value <br />";
}

/* Second method to create array. */

$numbers[0] = "one";
$numbers[1] = "two";
$numbers[2] = "three";
$numbers[3] = "four";
$numbers[4] = "five";

foreach( $numbers as $value ) {

echo "Value is $value <br />";
}
?>

</body>
</html>

Output:-
Value is 1
Value is 2
Value is 3
Value is 4
Value is 5
Value is one
Value is two
Value is three
Value is four
Value is five
 ● Associative array − An array with strings as index. This stores element
values in association with key values rather than in a strict linear index order.
The associative arrays are very similar to numeric arrays in term of functionality but
they are different in terms of their index. Associative array will have their index as
string so that you can establish a strong association between key and values.

Examples:-

<html>
<body>

<?php
/* First method to associate create array. */
$salaries = array("mohammad" => 2000, "qadir" => 1000,
"zara" => 500);

echo "Salary of mohammad is ". $salaries['mohammad'] .

"<br />";
echo "Salary of qadir is ". $salaries['qadir']. "<br
/>";
echo "Salary of zara is ". $salaries['zara']. "<br />";

/* Second method to create array. */

$salaries['mohammad'] = "high";
$salaries['qadir'] = "medium";
$salaries['zara'] = "low";

echo "Salary of mohammad is ". $salaries['mohammad'] .

"<br />";
echo "Salary of qadir is ". $salaries['qadir']. "<br
/>";
echo "Salary of zara is ". $salaries['zara']. "<br />";
?>

</body>
</html>

Output:-
Salary of mohammad is 2000
Salary of qadir is 1000
Salary of zara is 500
Salary of mohammad is high
Salary of qadir is medium
Salary of zara is low

● Multidimensional array − An array containing one or more arrays and values

are accessed using multiple indices
A multi-dimensional array each element in the main array can also be an array. And
each element in the sub-array can be an array, and so on. Values in the
multi-dimensional array are accessed using multiple index.

Examples:-

<html>
<body>

<?php
$marks = array(
"mohammad" => array (
"physics" => 35,
"maths" => 30,
"chemistry" => 39
),

"qadir" => array (

"physics" => 30,
"maths" => 32,
"chemistry" => 29
),

"zara" => array (

"physics" => 31,
"maths" => 22,
"chemistry" => 39
)
);

/* Accessing multi-dimensional array values */

echo "Marks for mohammad in physics : " ;
echo $marks['mohammad']['physics'] . "<br />";

echo "Marks for qadir in maths : ";

echo $marks['qadir']['maths'] . "<br />";
 echo "Marks for zara in chemistry : " ;
echo $marks['zara']['chemistry'] . "<br />";
?>

</body>
</html>
Output:-
Marks for mohammad in physics : 35
Marks for qadir in maths : 32
Marks for zara in chemistry : 39

92. What is a session? How do php manage the sessions? Give an example to
store and retrieve, your age as session variable.

Sessions are used within web applications. The use of sessions in PHP is to make
the data available across different pages of a website. The data or information like
name, address, etc., is carried from one page to another user session. This session
information is used for authentication purposes. Like the cookies are stored on the
clients’ browser, the session data is stored on the server in a temporary directory.
To begin a session we use session_start() function. And when the session starts, it
lasts for 24 minutes by default which is 1440 in seconds. A session is identified by
session identifiers or SID, which is a unique number to identify each user.

<?php
// example to start session
//beginning a session
// no arguments are passed to this function
session_start();
//initializing variables
$name = 'Neha';$age = 28;
//storing values in session
$_SESSION['name'] = $name;
$_SESSION['age'] = $age;
// printing session valuesprint_r($_SESSION);
//using the session id
echo '<br > The session_id is ';
echo session_id();
?>
Output:-
93. Explain various types of arrays in PHP with examples.

Same As Q.91

94. Create an HTML form with one textbox to get user’s name. Also write PHP
code to show length of entered name when, the HTML form is Submitted.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Text Input Field</title>
</head>
<body>
<form>
<label for="user-name">Username:</label>
<input type="text" name="username" id="user-name">
</form>
</body>
</html>
Output:-

<?php
// PHP program to count all
// characters in a string
$str = "MLA";

// Using strlen() function to

// get the length of string
$len = strlen($str);

// Printing the result

echo $len;
?>
Output:-
3

95. Give differences between following.

a. GET versus POST

HTTP GET HTTP POST

In GET method we can not send large In POST method large amount of data
amount of data rather limited data is can be sent because the request
sent because the request parameter is parameter is appended into the body.
appended into the URL.

GET request is comparatively better POST request is comparatively less

than Post so it is used more than the better than Get so it is used less than
Post request. the Get request.

GET request is comparatively less POST request is comparatively more

secure because the data is exposed in secure because the data is not exposed
the URL bar. in the URL bar.

Request made through GET method are Request made through POST method is
stored in Browser history. not stored in Browser history.

GET method request can be saved as POST method request can not be
bookmark in browser. saved as bookmark in browser.

Request made through GET method are Request made through POST method
stored in cache memory of Browser. are not stored in cache memory of
Browser.

Data passed through GET method can Data passed through POST method can
be easily stolen by attackers. not be easily stolen by attackers.

In GET method only ASCII characters In POST method all types of data is
are allowed. allowed.
 b. Cookie versus Session variable

Cookie Session

Cookies are client-side files that are Sessions are server-side files that store
stored on a local computer and contain user information.
user information.

Cookies expire after the user specified The session ends when the user closes
lifetime. the browser or logs out of the program.

It can only store a limited amount of It is able to store an unlimited amount

data. of information.

Cookies can only store up to a There is a maximum memory restriction

maximum of 4 KB of data in a browser. of 128 megabytes that a script may
consume at one time. However, we are
free to maintain as much data as we
like within a session.

It is not necessary for us to execute a Utilizing the session start()method is

function in order to get cookies going required before we can begin the
because they are stored on the local session.
computer.

Cookies are used to store information in The data is saved in an encrypted

a text file. format during sessions.

Cookies are stored on a limited amount A session can store an unlimited

of data. amount of data.

96. Create HTML form to enter one number. Write PHP code to display the
message about number is odd or even.

97. Explain and demonstrate with suitable example Session and Cookie using
PHP.

● A session is a global variable stored on the server.

● Each session is assigned a unique id which is used to retrieve stored values.
● Whenever a session is created, a cookie containing the unique session id is
stored on the user’s computer and returned with every request to the server.
 If the client browser does not support cookies, the unique php session id is
displayed in the URL
● Sessions have the capacity to store relatively large data compared to
cookies.
● The session values are automatically deleted when the browser is closed. If
you want to store the values permanently, then you should store them in the
database.
● Just like the $_COOKIE array variable, session variables are stored in the
$_SESSION array variable. Just like cookies, the session must be started
before any HTML tags.

Creating a Session

In order to create a session, you must first call the PHP session_start function and
then store your values in the $_SESSION array variable.
Let’s suppose we want to know the number of times that a page has been loaded,
we can use a session to do that.
The code below shows how to create and retrieve values from sessions
<?php

session_start(); //start the PHP_session function

if(isset($_SESSION['page_count']))
{
$_SESSION['page_count'] += 1;
}
else
{
$_SESSION['page_count'] = 1;
}
echo 'You are visitor number ' . $_SESSION['page_count'];

?>
Output:
You are visitor number 1

Destroying Session Variables

The session_destroy() function is used to destroy the whole Php session variables.
If you want to destroy only a session single item, you use the unset() function.
The code below illustrates how to use both methods.
<?php
session_destroy(); //destroy entire session
?>

<?php
unset($_SESSION['product']); //destroy product session item
?>

Cookie:-

A cookie is a small file with the maximum size of 4KB that the web server stores on
the client computer.
Once a cookie has been set, all page requests that follow return the cookie name
and value.
A cookie can only be read from the domain that it has been issued from. For
example, a cookie set using the domain www.guru99.com can not be read from the
domain career.guru99.com.
Most of the websites on the internet display elements from other domains such as
advertising. The domains serving these elements can also set their own cookies.
These are known as third party cookies.
A cookie created by a user can only be visible to them. Other users cannot see its
value.
Most web browsers have options for disabling cookies, third party cookies or both.
If this is the case then PHP responds by passing the cookie token in the URL.

Creating a cookie,

<?php
setcookie("user_name", "Guru99", time()+ 60,'/'); // expires
after 60 seconds
echo 'the cookie has been set for 60 seconds';
?>
Output:
the cookie has been set for 60 seconds

Delete a Cookie,
<?php

setcookie("user_name", "Guru99", time() - 360,'/');

?>
98. Write a Java Script to validate email address. Explain substr(), explode in
PHP.

<!DOCTYPE html>
<html>
<body>
<script>
var emailID;
function validateEmail(emailID) {
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
document.write("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
document.write(validateEmail("[email protected]"));
</script>
</body>
</html>

substr():-

PHP offers different kinds of inbuilt functions having distinctive functionalities. The
substr() is a built-in function in PHP and this function works with strings. It is utilized
to extricate a part of the string .

substr(string)
In this parameter, we pass the string that necessities to cut or adjust. This is an

obligatory parameter

substr(begin)
This is a mandatory parameter. This implies the position of the string from where

the part should be removed. This value should be an integer.

substr(length)
This parameter is discretionary and should be an integer. This means to the length

of the part of the string that needs to be cut from the original string.

99. What is an associate array in PHP? Explain built in associate arrays inPHP.

Associative Array:-Same as Q.91

102. Differentiate between Client Side Scripting and Server Side Scripting.

Client-side scripting languages

● The client-side environment used to run scripts is usually a browser.
● The processing takes place on the end users computer.
● The source code is transferred from the web server to the user’s computer
over the internet and run
● directly in the browser.
● The scripting language needs to be enabled on the client computer.
● Sometimes if a user is conscious of security risks they may switch the
scripting facility off.
● When this is the case a message usually pops up to alert the user when
script is attempting to run.
Server-side scripting languages
● The server-side environment that runs a scripting language is a web server.
● A user's request is fulfilled by running a script directly on the web server to
generate dynamic HTML
● pages.
● This HTML is then sent to the client browser.
● It is usually used to provide interactive web sites that interface to databases
or other data stores on
● the server.
● This is different from client-side scripting where scripts are run by the viewing
web browser, usually
● in JavaScript.
● The primary advantage to server-side scripting is the ability to highly
customize the response based
● on the user's requirements, access rights, or queries into data stores.