A

Internship Report
On

SALESFORCE CRM
Submitted to
Rashtrasant Tukadoji Maharaj Nagpur University,Nagpur
In partial fulfillment of the requirement for the Degree of
Computer Science and Engineering
Academic Year 2021-22
Developed and Submitted By
Mr. Anuj S pund Under the

guidance of Mr.Rajiv Verma

Sir

Priyadarshini College of Engineering

Department of Computer Science and Engineering
Priyadarshini Campus, Near CRPF, Hingna Road,
Nagpur-440019

IT-NETWORKZ INFOSYSTEMS PVT.LTD 1|Page

 DECLARATION

I hereby declare that the internship entitled “Salesforce CRM ” submitted for the
fulfillment of IV semester B. E. (Computer Science and Engineering) degree is our
original work and the internship has not formed the basis for the award of any other
degree, diploma, fellowship or any other similar titles.

Signature

Mr. Anuj S Pund.

IT-NETWORKZ INFOSYSTEMS PVT.LTD 2|Page

 ACKNOWLEDGMENT

It is indeed a great pleasure and matter of immense satisfaction for me to express my

deep sense profound gratitude towards all the people who have helped, inspired me in my
internship work.

First we would like to express my gratitude to Dr. Leena H.Patil (Head of CSE) for
providing necessary guidance for selection of right technology to be learnt in internship. I
would like to extend my gratitude to Prof. Pratibha P. Waghale (Assistant Professor CSE) for
the effort taken by her right from the selection of the internship to its completion. She spent
her precious time whenever we were in need of guidance.

Moreover we would like to thank Mr. C.U. Chauhan (Assistant Professor CSE), who was
always there whenever needed any support and was a constant source of inspiration for
accomplishment of this internship.

Last but not least I would like to thank my internship mentor “Mr.Rajiv Verma Sir” for
providing all kinds technical support throughout this internship program

IT-NETWORKZ INFOSYSTEMS PVT.LTD 3|Page

 INDEX

Topics Page

Chapter 1: INTRODUCTION TO HTML 9

Chapter 2: INTRODUCTION TO CSS 18

Chapter 3: JAVASCRIPT (SCRIPTING LANGUAGE) 27

Chapter 4: SALESFORCE 39

Chapter 5: PROJECT 42

Chapter 6: REFERENCES 44

IT-NETWORKZ INFOSYSTEMS PVT.LTD 4|Page

 FORMAT 3. OBJECTIVES/ GUIDELINES/ AGREEMENT:
INTERNSHIP SYNOPSIS (THIS WILL BE PREPARED IN
CONSULTATION WITH FACULTY MENTOR)

An internship is a unique learning experience that integrates studies with practical

work. This agreement is written by the student in consultation with the faculty Mentor
and Industrial supervisor. It shall serve to clarify the educational purpose of the
internship and to ensure an understanding of the total learning experience among the

principal parties involved.

Part 1 Contact Information

Student

Name: M r . A n u j S P u n d . Student ID# Class Year: 2ND Year

Campus Address: Priyadarshini College Of Engineering, Nagpur

City, State: Nagpur, Maharashtra

Phone No.: 7385318765 Email: [email protected]

Industrial Supervisor
Name: Mr.Rajiv Verma Title:
Company/Organization: ITNetworkz
Internship Address: #F-5/A, 102/201, Akansha, RTPS Road, Laxmi
Nagar, Nagpur, India
City, State, Pin: Nagpur,Maharashtra – 440022
Phone: 91-712-6464622 Email: [email protected]

Faculty Mentor

Name: Chandrapal Chauhan Phone: 8308069816

Campus Address: Priyadarshini College Of Engineering, Nagpur

IT-NETWORKZ INFOSYSTEMS PVT.LTD 5|Page

Academic Credit Information

Internship Title: Salesforce-CRM Department: CSE

Course #: Credits:
Grading Option: Credit/Non-credit:
Beginning Date: 07/02/2022 Ending Date: 02/04/2022
Hours per Week: 10 - 12 hr Internship is paid/Unpaid: Unpaid

IT-NETWORKZ INFOSYSTEMS PVT.LTD 6|Page

 List of Tables

Table Page

1) 1.1:Adding Table To HTML 15

2) 1.2: Different Types Of Entities Used In HTML 17

3) 2.1 Table Color 26

4) 3.1: Difference Between Var & Let 28

5) 3.2: JS Assignment Operators 29

6) 3.3: Comparison Operators 31

7) 3.4: Logical Operators 32

8) 3.5: Bitwise Operators 32

9) 3.6 Other JS Operators 36

IT-NETWORKZ INFOSYSTEMS PVT.LTD 7|Page

 List of Figures
Figures Page
1.1: Architecture of 9
HTML 1.2: First Program 11
1.3 : HTML Heading Tag 11
1.4 : HTML Paragraph 12
1.5 : HTML Text Formatting 13
1.6: Adding Link To HTML 13
1.7: Adding Image To HTML 14
1.8: Adding List To HTML 16
1.9: Adding Iframe To HTML 17
2.1: Architecture Of CSS 19
2.2 : CSS Colors 21
2.3 : CSS Background Colors 22
2.4: CSS Background 22
Images 2.5: CSS Text Colors 24
2.6: CSS Text Background Colors 25
2.7: CSS Table Borders 25
3.1 : Assignment Operators 30
3.2 : Comparison Operator 31
3.3 : Logical Operators 32
3.4 : For Loop 36
3.5 : While Loop 37
3.6 : Do…While Loop 37
3.7 : Javascript Function 38
4.1: Home Page Of Salseforce 39

IT-NETWORKZ INFOSYSTEMS PVT.LTD 8|Page

 Chapter 1

INTRODUCTION TO HTML

What is HTML:
HTML (Hyper-Text Markup Language) is a markup language that defines the structure of your
content. HTML (Hyper-Text Markup Language) is one of the most important foundations on the
web. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of
the content to make it appear a certain way, or act a certain way. The enclosing tags can make a
word or image hyperlink to somewhere else, can italicize words, can make the font bigger or
smaller, and so on. HTML is the code that is used to structure a web page and its content. For
example, content could be structured within a set of paragraphs, a list of bulleted points, or using
images and data tables.

HTML Architecture:
The basic structure of an HTML page is laid out below. It contains the essential building-block
elements (i.e doctype declaration, HTML, head, title, and body elements) upon which all web
pages are created.

Fig 1.1 : Architecture Of HTML

<!DOCTYPEhtml>: This is the document type declaration (not technically a tag). It declares
a document as being an HTML document. The doctype declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements
within the head aren’t visible on the front-end of a webpage. HTML elements used inside
the <head> element include:
 <style>

IT-NETWORKZ INFOSYSTEMS PVT.LTD 9|Page

  <title>
 <script>
 <meta>
 <link>

<body>: The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file using .html or
.htm. Once saved as an HTML document, the file can be opened as a webpage in the browser.

Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (Macs). Basic text
editors are entirely sufficient for when you’re just getting started. As you progress, there are
many feature-rich text editors available which allow for greater function and flexibility.

Features of HTML:

• It is easy to learn and easy to use.

• It is platform-independent.
• Images, videos, and audio can be added to a web page.
•Multilanguage support
• Hypertext can be added to the text.
• It is a markup language

Advantages:

 HTML is used to build websites.

 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages:

 HTML can only create static web pages. For dynamic web pages, other languages have to
be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.

IT-NETWORKZ INFOSYSTEMS PVT.LTD 10 | P a g e

 HTML ELEMENTS

An HTML element is the collection of start and end tags with the content inserted in between
them.

Example 1: In this example <p> is a starting tag, </p> is an ending tag and it contains some
content between the tags, which form an element.
Solution 
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements</title></head>
<body>
<h2>Hello World!</h2>
</body> Fig 1.2 First Program
</html>
HTML Heading

An HTML heading tag is used to define the headings of a page. There are six levels of headings
defined by HTML. These 6 heading elements are H1, H2, H3, H4, H5, and H6; with H1 being the
highest level and H6 the least.
Syntax :- <h1>statements…</h1>
<h2> statements…</h2>
<h3> statements…</h3>
<h4> statements…</h4>
<h5> statements…</h5>
<h6> statements…</h6>

Example 1: This example illustrates the HTML heading tags.

Program:-
<!DOCTYPE html>
<html>
<head><title>Heading Tags</title></head> Output:-
<body>
<h1>ITNetworkz PVT. LTD.</h1>
<h2>ITNetworkz PVT. LTD.</</h2>
<h3>ITNetworkz PVT. LTD.</</h3>
<h4>ITNetworkz PVT. LTD.</</h4>
<h5>ITNetworkz PVT. LTD.</</h5>
<h6>ITNetworkz PVT. LTD.</</h6>
</body>
</html>

Fig 1.3 HTML Heading Tag

IT-NETWORKZ INFOSYSTEMS PVT.LTD 11 | P a g e

 HTML Paragraphs
The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So
anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as a
paragraph even if we don’t use the closing tag i.e, </p>, but this may raise unexpected results. So,
it is both a good convention, and we must use the closing tag.

Syntax :- <p> Content </p>

Example 1: In this example, we are using the <p> tag that is used for paragraphs in HTML.
Program:- Output:-
<!DOCTYPE html>
<html>
<body>
<p>Welcome To ITNetworkZ</p>
</body> Fig 1.4 HTML Paragraph
</html>

HTML Comments

The comment tag (<!– Comment –>) is used to insert comments in the HTML code. It is a good
practice of coding so that coder and the reader can get help to understand the code. It is helpful to
understand the complex code. The comment tag is useful during the debugging of codes.
 It is a simple piece of code that is wiped off (ignore) by web browsers i.e, not displayed
by the browser.
 It helps the coder and reader to understand the piece of code used for especially
in complex source code.
Syntax :- <!-- Comments here -->

Types of HTML Comments:

There are three types of comments in HTML which are:

 Single-line comment
 Multi-lines comment
 Using <comment> tag

IT-NETWORKZ INFOSYSTEMS PVT.LTD 12 | P a g e

 HTML Text Formatting

HTML facilitates the ability for formatting text just like we do in MS Word or any text editing
software. We will go through a few such options.

Example: In this example, we simply display text in HTML strong, small, and Highlight

formatting respectively.

Program:- <!DOCTYPE html> Output:-

<html>
<body>
<!--Text in Large-->
<large>Hello World!</large><br>
<!--Text in small-->
<small>Hello World!</small><br>
<!--Text in Itallic-->
<i>Hello World!</i><br>
<!--Text in Emphasize-->
<i>Hello World!</i><br>
<!--Text in Strong-->
<strong>Hello World!</strong><br>
<!--Text in Bold-->
<b>Hello World!</b><br>
<!--Text in Underline-->
<u>Hello World!</u><br>
<!--Text in Superscript--> Fig 1.5 HTML Text Formatting
<p>Hello ^World! </p>
<!--Text in Subscript-->
<p>Hello _World! </p>
</body>
</html>
HTML Links

HTML links are hyperlinks.You can click on a link and jump to another
document. Syntax:- <a href="url">link text</a>
Example:- Write a program to link a website.
Program:- Output:-
<!DOCTYPE html>

<html>

<body> Fig 1.6 Adding Link To HTML

<h3>Example Of Adding a link</h3>

<p>Click on the following link</p><a href =

"http://www.infosystems.com">IT- NetworkZ</a>

</body></html>

IT-NETWORKZ INFOSYSTEMS PVT.LTD 13 | P a g e

 HTML Images

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

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

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

Syntax:- <img src="url" alt="alternatetext" width="" height="">

Example 1: This simple example illustrates the use of the <img> tag in HTML that is used to
embed the image into the webpage.

Program:- Output:-

<!DOCTYPE html>
<html>
<head>
<title>Welcome To GFG</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p>This is the demo of <img> tag.</p>
<img src="D:\itnetwokrz image.png"
alt="company image" />
</body>
</html> Fig 1.7 Adding Image To HTML

HTML Tables

A table in HTML consists of table cells inside rows and columns. HTML tables allow web
developers to arrange data into rows and columns.
HTML Tables are presented by <table> and </table>.
Table Cells:- Each table cell is defined by a <td> and a </td> tag.
Table Rows:- Each table row starts with a <tr> and end with a </tr> tag.
Table Headers:- Sometimes you want your cells to be headers, in those cases use the <th> tag
instead of the <td> tag:

IT-NETWORKZ INFOSYSTEMS PVT.LTD 14 | P a g e

Example 1: In this example, we are creating a simple table in HTML using a table tag.
Program:-
<!DOCTYPE html>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro 15ommercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Output:-

Table 1.1 Adding Table To

Company Contract Country
HTML
Alfreds Futterkiste Maria Anders Germany
Centro Commercial Francisco Chang Mexico

HTML Lists

A list is a record of short pieces of related information or used to display the data or any
information in web pages in the ordered or unordered form. HTML lists allow web developers to
group a set of related items in lists.
Unordered HTML List:- An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag. The list items will be marked with bullets (small black circles) by default:

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items
will be marked with numbers by default:

IT-NETWORKZ INFOSYSTEMS PVT.LTD 15 | P a g e

Example:- The below example illustrates the use of the unordered & ordered list in HTML.

Program:-

<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title> Output:-
</head>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
<h3>HTML &lt;ol&gt; tag</h3>
<p>reversed attribute</p>

<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>

<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body></html> Fig:1.8 Adding List To HTML

HTML Iframes
The “<iframe> “tag defines a rectangular region within the document in which the browser can
display a separate document, including scrollbars and borders. An inline frame is used to embed
another document within the current HTML document.
Syntax: <iframe src="URL" title="description"></iframe>

Example: This example illustrates the use of an iframe tag which is used to display a webpage
inside the current web page.

Program:-
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the
iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe

Example"></iframe>

</body>
</html>

IT-NETWORKZ INFOSYSTEMS PVT.LTD 16 | P a g e

Output:-
Fig:1.9 Adding Iframe To HTML

HTML Entities
HTML provides some method to display reserved characters. Reserved characters are those
characters that are either reserved for HTML or those which are not present in the basic
keyboard. For instance, ‘<‘ is reserved in HTML language. Sometimes this character needs to
display on the web page which creates tags in code.
Syntax: &entity_name; or &#entity_number;

Some useful Symbols with their Entity name and Entity numbers are listed below:
Notation Symbols Entity name Entity Number
non-breaking space &nbsp;
< less than &lt; <
® registered trademark &reg; ®
© copyright &copy; ©
€ euro &euro; €
¥ yen &yen; ¥
£ pound &pound; £
¢ cent &cent; ¢
“ double quotation mark &quot; “
& ampersand &amp; &
> greater than &gt; >
∂ PARTIAL DIFFERENTIAL &part; ∂<
∃ THERE EXISTS &exist; ∃
∑ N-ARY SUMMATION &sum; ∑
Α Alpha &Alpha; Α
Β Beta &Beta; Β
Γ Gamma &Gamma; Γ
Δ delta &Delta; Δ
Ε Epsilon &Epsilon; Ε
Ζ Zeta &Zeta; Ζ
↓ DOWNWARDS ARROW &darr; ↓
→ RIGHTWARDS ARROW &rarr; →
↑ UPWARDS ARROW &uarr; ↑
Table 1.2 Different Types Of Entities Used In HTML

IT-NETWORKZ INFOSYSTEMS PVT.LTD 17 | P a g e

 Chapter 2
INTRODUCTION TO CSS

What is CSS?
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on screen, paper, or in
other media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 External stylesheets are stored in CSS files.
 CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
There are three types of CSS which are given below:

Types of CSS

Inline Internal External

1. External style sheet (Using HTML <link> Tag): External CSS contains separate CSS
file which contains only style property with the help of tag attributes (For example class,
id, heading, … etc). CSS property written in a separate file with .css extension and should
be linked to the HTML document using link tag. This means that for each element, style
can be set only once and that will be applied across web pages. The link tag is used to
link the external style sheet with the html webpage.

<link rel="stylesheet" href="style.css">

</style>

2. Internal style sheet (Using the <style> Element): This can be used when a single
HTML document must be styled uniquely. The CSS rule set should be within the HTML
file in the head section i.e the CSS is embedded within the HTML file.

<style>
element {
// CSS property
}
</style>

IT-NETWORKZ INFOSYSTEMS PVT.LTD 18 | P a g e

 3. Inline Style:- Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag
using style attribute. It is used to apply a unique style for a single element.

<h1 style="style property">ITNetworkz</h1>

CSS Architecture :-
Fig 2.1 Architecture Of CSS

Features Of CSS

 Opportunity in Web designing: If anyone wants to begin a career in web

designing professionally, it is essential to have knowledge of CSS and HTML.
 Website Design: With the use of CSS, we can control various styles, such as the text color,
the font style, the spacing among paragraphs, column size and layout, background color and
images, design of the layout, display variations for distinct screens and device sizes, and
many other effects as well.
 Web Control: CSS has controlling power on the documents of HTML, so it is easy to
learn. It is integrated with the HTML and the XHTML markup languages.
 Other Languages: Once we have knowledge of some basics of CSS and HTML, other
associated technologies like Angular, PHP, and JavaScript are become clearer to
understand.

CSS Syntax and Selectors

A CSS Syntax rule consists of a selector, property, and its value. The selector points to the
HTML element where CSS style is to be applied. The CSS property is separated by
semicolons. It is a combination of selector name followed by the property: value pair that is
defined for the specific selector.

Syntax: selector { Property: value; }

A CSS Selectors are used to selecting HTML elements based on their element name, id,
attributes, etc. It can select one or more elements simultaneously.

IT-NETWORKZ INFOSYSTEMS PVT.LTD 19 | P a g e

 CSS Selector can be divided into 5 categories:

The Simple Selector can be categorized in 3 ways:

The CSS element Selector
The element selector selects HTML elements based on the element name.

Syntax:

element_name {
// CSS Property
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Syntax:-
#id_name {
// CSS Property
}

The CSS 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.
Syntax:- .class_name {
// CSS Property}

CSS Universal(*) Selector

The * selector in CSS is used to select all the elements in an HTML document. It also selects all
elements which are inside under another element. It is also called the universal selector.
Syntax:- * {
// CSS property
}

IT-NETWORKZ INFOSYSTEMS PVT.LTD 20 | P a g e

The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
Syntax : - h1, h2, p {
text-align: center;
color: red;
}
CSS Comments:

The Comments in CSS, are the statements in your code that are ignored by the compiler and are
not executed. Comments are used to explain the code. They make the program more readable
and understandable. Comment can be single-line or multi-line. The /* */ comment syntax can be
used for both single and multiline comments.

Syntax:- /* content */

CSS Colors
CSS Color property is used to set the color of HTML elements. This property is used to set font
color, background color etc.
Color of an element can be defined in the following ways:

 Built-In Color
 RGB Format
 RGBA Format
 Hexadecimal Notation
 HSL
 HSLA

Example:

<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<!-- CSS Text Color -->
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.</p>
<!-- CSS Border Color -->
<p style="border:2px dotted Tomato;">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.</p>
</body>
</html>

Output:

Fig 2.2 CSS Colors

IT-NETWORKZ INFOSYSTEMS PVT.LTD 21 | P a g e

 CSS Backgrounds
The CSS background properties are used to add background effects for elements.
CSS background-color
The background-color property specifies the background color of an element.
Example:- <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
h1 {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>

Output:-
Fig 2.3 CSS Background Colors

CSS 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.
Example:- <!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
Output:-

Fig 2.4 CSS Background images

IT-NETWORKZ INFOSYSTEMS PVT.LTD 22 | P a g e

 CSS Margins
Margins are used to create space around elements, outside of any defined borders. 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).
Syntax:- selector {
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).

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

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:

IT-NETWORKZ INFOSYSTEMS PVT.LTD 23 | P a g e

 CSS Text

CSS has a lot of properties for formatting text.

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)
Example:- Output:-
<!DOCTYPE html>
<html>
<head>
<style>
body { color: blue;} Fig 2.5 CSS Text Colors
h1 { color: green;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue.
The default text color for a page is defined in the body
selector.</p>
<p>Another paragraph.</p>
</body>
</html>
Text Background Color
In this example, we define both the background-color property and the color property:
Example:- <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;

IT-NETWORKZ INFOSYSTEMS PVT.LTD 24 | P a g e

 }
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
</html>

Output:- Fig 2.6 CSS Text Background Colours

CSS Table Style

Table is a collection of rows and columns which are styled with CSS.
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td> elements:
Example : <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;}
</style>
</head>
<body>
<h2>Add a border to a table:</h2> Output:-
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td> Fig 2.7 CSS Table Borders
<td>Griffin</td>
</tr></table></body></html>

IT-NETWORKZ INFOSYSTEMS PVT.LTD 25 | P a g e

 Table Color
The example below specifies the background color and text color of <th> elements:
Example:- <!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;}
th, td {
text-align: left;
padding: 8px;}
th {
background-color: black;
color: white;}
tr:nth-child(even){background-color: gray}
</style>
</head>
<body>
<h2>Colored Table Header</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th> Output:-

</tr>
<tr>
First Last Savings
<td>Peter</td>
<td>Griffin</td> Name Name
<td>$100</td>
</tr> Peter Griffin $100
<tr>
<td>Lois</td> Lois Griffin $150
<td>Griffin</td> Joe Swanson $300
<td>$150</td>
</tr> Cleveland Brown $250
<tr>
<td>Joe</td> Table 2.1Table Color
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

IT-NETWORKZ INFOSYSTEMS PVT.LTD 26 | P a g e

 CHAPTER 3

JAVASCRIPT (SCRIPTING LANGUAGE)

What Is Javascript:-
JavaScript is the world most popular lightweight, interpreted compiled programming language.
It is also known as scripting language for web pages. It is well-known for the development of web
pages, many non-browser environments also use it. JavaScript can be used for Client-side
developments as well as Server-side developments.

Adding JavaScript can be added to your HTML file in two ways:

 Internal JS: We can add JavaScript directly to our HTML file by writing the code inside
the <script> tag. The <script> tag can either be placed inside the <head> or the <body>
tag according to the requirement.
 External JS: We can write JavaScript code in other file having an extension .js and
then link this file inside the <head> tag of the HTML file in which we want to add this
code.

Syntax:- <script>

// JavaScript Code
</script>

Features of JavaScript
 Object-Centered Script Language
 Client Side Technology
 Validation Of User’s Input.
 Light-Weighted Language
 Interpreted Language
 Case Sensitive
 Used as Front-End as well as Back-End Language too.
 Platform Independent.

IT-NETWORKZ INFOSYSTEMS PVT.LTD 27 | P a g e

 JavaScript Variables
A variable is a container (storage area) to hold data.
JavaScript Declare Variables
In JavaScript, we use either var or let keyword to declare variables. For example,
var x;
let y;
Here, x and y are variables.
JavaScript Constants
The const keyword was also introduced in the ES6(ES2015) version to create
constants. For example,
const x = 5;
JavaScript var Vs let
Both var and let are used to declare variables. However, there are some differences
between them.
var let
var is used in the older versions of let is the new way of
JavaScript declaring variables starting ES6
(ES2015).
var is function scoped (will be let is block scoped (will be discussed
discussed in later tutorials). in later tutorials).
For example, var x; For example, let y;

Table 3.1 Difference Between Var & Let

Note: It is recommended we use let instead of var. However, there are a few browsers
that do not support let.
Javascript Intialization of Variables:
We use the assignment operator = to assign a value to a variable.
let x;
x = 5;
Here, 5 is assigned to variable x.

Data Types In JS
1. String = “Hello”,’Hello’
2. Number = 10,3.114,-21,2e10
3. Boolean = True/False
4. Undefined = Let a;
5. Null = Let a = null;
6. Object = let student = { };

IT-NETWORKZ INFOSYSTEMS PVT.LTD 28 | P a g e

 Javascript Console.log()
All modern browsers have a web console for debugging. The console.log() method is used to
write messages to these consoles. For example,
let sum = 44;
console.log(sum); // 44
When you run the above code, 44 is printed on the console.

JavaScript Operator Types

Here is a list of different operators:
 Assignment Operators
 Arithmetic Operators
 Comparison Operators
 Logical Operators
 Bitwise Operators
 Other Operators

JavaScript Assignment Operators

Assignment operators are used to assign values to variables.
Here, the = operator is used to assign value 5 to variable x.
Here's a list of commonly used assignment operators:
Operator Name Example
= Assignment operator a = 7; // 7

+= Addition assignment a += 5; // a = a + 5

-= Subtraction Assignment a -= 2; // a = a - 2

*= Multiplication Assignment a *= 3; // a = a * 3

/= Division Assignment a /= 2; // a = a / 2

%= Remainder Assignment a %= 2; // a = a % 2

**= Exponentiation Assignment a **= 2; // a = a**2

Table 3.2 JS Assignment Operator

Note: The commonly used assignment operator is =. You will understand other assignment
operators such as +=, -=, *= etc. once we learn arithmetic operators.

IT-NETWORKZ INFOSYSTEMS PVT.LTD 29 | P a g e

Example 1: Arithmetic operators in JavaScript

let x = 5;
let y = 3;
// addition
console.log('x + y = ', x + y); // 8
// subtraction
console.log('x - y = ', x - y); // 2
// multiplication
console.log('x * y = ', x * y); // 15
// division
console.log('x / y = ', x / y); // 1.6666666666666667
// remainder
console.log('x % y = ', x % y); // 2
// increment
console.log('++x = ', ++x); // x is now 6
console.log('x++ = ', x++); // prints 6 and then increased to 7
console.log('x = ', x); // 7
// decrement
console.log('--x = ', --x); // x is now 6
console.log('x-- = ', x--); // prints 6 and then decreased to 5
console.log('x = ', x); // 5
//exponentiation
console.log('x ** y =', x ** y);

Fig 3.1 Assignment Operators

IT-NETWORKZ INFOSYSTEMS PVT.LTD 30 | P a g e

 JavaScript Comparison Operators

Comparison operators compare two values and return a boolean value, either true or false.

Here, the comparison operator > is used to compare whether a is greater than b.

Operator Description Example

== Equal to: returns true if the operands are equal x == y
!= Not equal to: returns true if the operands are x != y
not equal Table 3.3
=== Strict equal to: true if the operands are equal and x === Comparison Operators
of the same type y
!== Strict not equal to: true if the operands are equal x !==
but of different type or not equal at all y

> Greater than: true if left operand is greater than x > y

the right operand
>= Greater than or equal to: true if left operand x >= y
is greater than or equal to the right operand
< Less than: true if the left operand is less than the right x < y
operand
<= Less than or equal to: true if the left operand is x <= y
less than or equal to the right operand

Example 2: Comparison operators in JavaScript

// equal operator
console.log(2 == 2); // true
console.log(2 == '2'); // true

// not equal operator

console.log(3 != 2); // true
console.log('hello' != 'Hello'); // true

// strict equal operator

console.log(2 === 2); // true
console.log(2 === '2'); // false

// strict not equal operator

console.log(2 !== '2'); // true
console.log(2 !== 2); // false

Fig 3.2 Comparison Operator

IT-NETWORKZ INFOSYSTEMS PVT.LTD 31 | P a g e

 JavaScript Logical Operators
Logical operators perform logical operations and return a boolean value, either true or false
Operator Description Example
Logical AND: true if both the operands are true, else
&& x && y
returns false
Logical OR: true if either of the operands is true;
|| x || y
returns false if both are false Table 3.4
Logical NOT: true if the operand is false and vice- Logical Operators
! !x
versa.

Example 3: Logical Operators in JavaScript

// logical AND
console.log(true && true); // true
console.log(true && false); // false

// logical OR
console.log(true || false); // true

// logical NOT
console.log(!true); // false Fig 3.3 Logical Operators

JavaScript Bitwise Operators

Bitwise operators perform operations on binary representations of numbers.
Operator Description
& Bitwise AND Table 3.5 Bitwise Operators
| Bitwise OR
^ Bitwise XOR
~ Bitwise NOT
<< Left shift
>> Sign-propagating right shift
>>> Zero-fill right shift

Other JavaScript Operators

Here's a list of other operators available in JavaScript.
OPERATOR DESCRIPTION EXAMPLE
?: returns value based on the condition (5 > 3) ? 'success' :
'error'; // "success"
DELETE deletes an object's property, or an delete x
element of an array
TYPEOF returns a string indicating the data typeof 3; // "number"
type
VOID discards the expression's return value void(x)
IN returns true if the specified prop in object
property is in the object
INSTANCEOF returns true if the specified object object instanceof
is of of the specified object type object_type

Table 3.6 Other JavaScript Operators

IT-NETWORKZ INFOSYSTEMS PVT.LTD 32 | P a g e

 JavaScript Comments
JavaScript comments are hints that a programmer can add to make their code easier to read and
understand. They are completely ignored by JavaScript engines.

There are two ways to add comments to code:

 // - Single Line Comments

 /* */ -Multi-line Comments

Single Line Comments

In JavaScript, any line that starts with // is a single line comment. For example,
Syntax:- name = "Jack";
// printing name on the console
console.log("Hello " + name);
Here, // printing name on the console is a comment.
Multi-line Comments
In Javascript, any text between /* and */ is a multi-line comment. For example,

Syntax:-

/* The following program contains the source code for a game called
Baghchal.
Baghchal is a popular board game in Nepal where two players choose either
sheep or tiger. It is played on a 5x5 grid.
For the player controlling the tiger to win, they must capture all the
sheep. There are altogether 4 tigers on the board.
For the sheep to win, all tigers must be surrounded and cornered so that
they cannot move. The player controlling the sheep has 20 sheep at his
disposal.
*/
JavaScript Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:

 Use if to specify a block of code to be executed, if a specified condition is true

 Use else to specify a block of code to be executed, if the same condition is false
 Use else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed

The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax
if (condition) {
// block of code to be executed if the condition is true
}

IT-NETWORKZ INFOSYSTEMS PVT.LTD 33 | P a g e

Example
Make a "Good day" greeting if the hour is less than 18:00:

Program:- if (new Date().getHours()< 18) {

greeting = "Good day";}

Output:- Good day

The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.

Syntax:- if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Program:- const time = new
Date(.getHours()); Let hour;
if (hour < 18) { Output:- Good day
greeting = "Good day";
} else { greeting = "Good evening";}

The else if Statement

Use the else if statement to specify a new condition if the first condition is false.
Syntax:-

if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and
condition2 is true
} else {
// block of code to be execute

Example:-
const time = new Date(.getHours();
let greeting;
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
Output:- Good day

IT-NETWORKZ INFOSYSTEMS PVT.LTD 34 | P a g e

Switch Statement
Use the switch statement to select one of many code blocks to be executed.
Syntax:-
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default: // code block}

Example:-
<script>
let day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
document.write(Today is " + day);
</script>
Output:- Today is Sunday

IT-NETWORKZ INFOSYSTEMS PVT.LTD 35 | P a g e

 JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each time with a different
value.
Different Kinds of Loops
JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times

 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is true

The For Loop

The for loop has the following syntax:
Syntax:- for (statement 1; statement 2; statement 3) {
// code block to be executed}

Example:-
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:- Fig 3.4 For Loop

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
}

IT-NETWORKZ INFOSYSTEMS PVT.LTD 36 | P a g e

 Output:-
Example:- <!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
let text = "";
let i = 0;
while (i < 10) {
text += "<br>The number is " + i; Fig 3.5 While Loop
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

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:-
// program to display numbers
let i = 1;
const n = 5;

// do...while loop from 1 to 5

do {
console.log(i);
i++;
} while(i <= n);
Output:-

Fig 3.6 Do….While Loop

IT-NETWORKZ INFOSYSTEMS PVT.LTD 37 | P a g e

 JavaScript Function
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Syntax:-
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
 When an event occurs (when a user clicks a button).
 When it is invoked (called) from JavaScript code.
 Automatically (self invoked).

Function Return

When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the
invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":

Example:-

Fig 3.7 Javascript Function

IT-NETWORKZ INFOSYSTEMS PVT.LTD 38 | P a g e

 CHAPTER 4
SALSEFORCE

What is Salesforce?
Salesforce is the world’s #1 Customer Relationship Management (CRM) platform. We help your
marketing, sales, commerce, service and IT teams work as one from anywhere — so you can keep
your customers happy everywhere.

Salesforce - Environment
As Salesforce is a cloud based system it does not need any software installation on your part. All
you have to do is signup for a free trial and get started. The free trial account provides nearly all
features which you need to learn to understand the basics of Salesforce platform. Let us now
discuss the steps to get started with the Salesforce environment.
Step 1
Go to the link Salesforce and click on Free Trial.
It takes you to a window where you have to fill in some details about you and sign up.
Step 2
You will receive an activation mail for your account which also contains the details of your
account and the duration of the trial period. Click on the link in the email to verify your email ID
and activate the account.
Step 3
Again visit the link Salesforce and click on login. Give the login credentials which you just
created. You will be directed to your home page.

Fig 4.1 Home Page Of Salesforce

Salesforce Objects

IT-NETWORKZ INFOSYSTEMS PVT.LTD 39 | P a g e

The Salesforce Platform stores data in relational tables. The records in these tables contain data
for the structure of the platform itself as well as user created data. For example, the data about the
configuration and settings of an account are already in-built as a relational table. But you can also
create your own tables to store data specific to your business like the 'dispatch schedule' for a
week assuming you are a courier company.

These relational tables are roughly referred to as API Objects or only objects in Salesforce. There
are three kinds of Salesforce objects.

 Standard Objects − The objects already created for you by the Salesforce platform.
 Custom Objects − These are the objects created by you based on your business processes.
 External Objects − The objects which you create map to the data stored outside
your organization.

Standard Objects

These are the objects which already exist in the Salesforce platform to manage the configurations
and settings of the environment. Once you log in to the salesforce platform, you can see the
available objects.

Custom Objects

The organization’s data will always not fit into the existing standard objects. So we can extend
and customize many sales force objects to meet this need. For example, a courier company can
create a custom object to store the schedule and dispatch details for every week. So these objects
store the data that is unique to the business. The custom objects can also have custom fields along
with the standard fields available in Salesforce.

Custom Object features

Following are the features available on Custom Objects. The features help you perform the
following features −

 Build page layouts to control which fields users can view and edit when entering data
for the custom object record.
 Import custom object records.
 Create reports and dashboards to analyze custom object data.
 Create a custom tab for the custom object, to display the object’s data.
 Track tasks and events for custom object records.
 Import custom object records.

Create Custom Object:-

Got to Setup Build(Create)  Objects  New Custom Object Fill Label Name Data Type
Check The CheckBox If Required Field Is Applied Click On Next Till Save Button Appears 
Save it.

Salesforce - Master Detail Relationship

Unlike the relationships in relational database, the relationships in Salesforce are not through
Primary and Foreign Keys. The relationships are maintained by using the Relationship Fields. It is

IT-NETWORKZ INFOSYSTEMS PVT.LTD 40 | P a g e

a custom field which links one object record to another. Through the creation of relationships, we
can display the data of all the related records in the record's details page.

The Master Detail relationship is used when we want to control the display of detail records
based on the value in the master record. For example, in the courier company model a delivery
schedule is always linked to a delivery location. If we remove a delivery location from our
list, then all the related delivery schedules should also be eliminated. Such a dependency can
be achieved through Master-detail relationship between the sales force objects.

Features of Master-Detail Relationship

In this section, we will discuss the features of Master-detail Relationship. The features are listed
below −

 Deleting a Master Record, deletes all the detail records.

 A detail record cannot be created without a Master record.
 The permission on the detail record cannot be set. It inherits the permission from
the master record.
 The detail record also inherits the sharing rule from master records.
 Both the master and detail records are automatically included in the report record types.

Create Master Relationship:-

After Creation Of Custom Object  go to custom object  on right side arrow appears go
through it  click on view fields  go to create fields and relationship choose master
relationship  relate with the parent save it.

Salesforce - Lookup Relationship

A Lookup relationship involves finding value of a field based on the value in another field in
another object. It is mostly used in the case of commonly shared data between two objects.

Create Lookup Relationship:-

Do step same as master relationship but instead of Master Relationship choose Lookup
Relationship.

IT-NETWORKZ INFOSYSTEMS PVT.LTD 41 | P a g e

 CHAPTER 5

PROJECT

Name : - Passport Cloud

Project Scenario:-

Project Solution:-
Custom Object (Customer)

IT-NETWORKZ INFOSYSTEMS PVT.LTD 42 | P a g e

Custom Object (Address)

Custom Object (Passport)

Custom Object (Payment)

IT-NETWORKZ INFOSYSTEMS PVT.LTD 43 | P a g e

Custom Object (Customer Citizenship)

Custom Object (Citizenship)

CHAPTER 6
REFERENCES

1) https://www.w3schools.com/html/default.asp/

2) https://www.w3schools.com/css/default.asp

3) https://www.w3schools.com/js/default.asp

4) https://www.tutorialspoint.com/salesforce/index.htm

5) https://trailhead.salesforce.com/today

IT-NETWORKZ INFOSYSTEMS PVT.LTD 44 | P a g e

 Part IV: Agreement

This contract may be terminated or amended by student, faculty coordinator or

work supervisor at any time upon written notice, which is received and agreed to
by the other two parties.

Student: Mr. Anuj S Pund. Date:

Faculty Mentor: Prof. Chandrapal Date:

Chauhan

Industry Supervisor: Mr.Rajiv Verma Date

HOD: Dr. Leena Patil Date:

IT-NETWORKZ INFOSYSTEMS PVT.LTD 45 | P a g e