A SUMMER INTERNSHIP

REPORT

Submitted by

PARMAR DEV VINODBHAI

226480307057

In partial fulfillment for the award of

the degree of

DIPLOMA

in

information technology

Sigma University,Vadodara

Gujarat Technological university,

Ahmedabad

[August ,2024]
Page | 1
COMPLETION LETTER

Page | 2
 Sigma University

Bakrol Ajwa road, Vadodara, Gujarat

CERTIFICATE

This is to certify that the In-Plant Training report submitted along with training

entitled Web Development has been carried out by Parmar Dev under my

guidance in partial fulfillment for the Diploma in Computer Engineering, 5th

Semester of Gujarat Technological University, Ahmadabad during the academic

year 2024-25.

Zinal Prajapati Shreyas Patel

Internal Guide Head of Department
Computer Dept. Computer Dept.

Page | 3
 DECLARATION

I hereby declare that the In-Plant Training report submitted along with training

entitled Web Development submitted in partial fulfillment for the Diploma

Engineering in Computer to Gujarat Technological University, Ahmedabad, is a

bonafide record of original In- Web Development work carried out by me at

Sigma University, Vadodara under the supervision of Prof. Shreyas Patel and

that no part of this report has been directly copied from any students, reports or

taken from any other source, without providing due reference.

Name of the Student Sign of Student

PARMAR DEV VINODBHAI

Page | 4
 ACKNOWLEDGEMENT

We would never have been able to finish our project without the guidance of our
guides, help from friends. Non-technical staff and support from our family. We are
grateful and would like to express our sincere gratitude to our guide, Zinal Prajapati
from Computer Department for her ideas and suggestions, invaluable guidance,
continuous encouragement, his tolerance of our naive mistakes and constant support.

We would like to acknowledge all his comments and suggestions, which was
crucial for the successful completion of this this he has also been abundantly
helpful and has assisted us in numerous ways.

We also appreciate to Shreyas Patel for his valuable advice and inputs which helped
us to deal with The laws and work towards the solution efficiently. We feel highly
privileged to give our sincere gratitude and indebtedness to , Sigma University

Page | 5
Contents
1 Introduction of Domain . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

1.3 To Save The Time And Resourcces . . . . . . . . . . . . . . . . . . . 8

1.4 To Reduce The Number Of Workers . . . . . . . . . . . . . . . . . . 8

1.5 To Reduce The Space Being Used . . . . . . . . . . . . . . . . . . . . 9

1.6 To Reduce Work Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

1.7 To make it easy to search any record

2 Tools And Technology Used . . . . . . . . . . . . . . . . . . . . . . 10
2.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.1 Inline CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.2 Internal CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.3 External CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.4 CSS Hover Effect. . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2.5 Scope Of The Projec . . . . . . . . . . . . . . . . . . . . . . . . . 16

3 Introduction of JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . 17
3.1 Introduction of JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.1 Concept of JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1.2 Features of JS. . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.1.3 Applications of JS. . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2 Link JS File in HTML . . . . . . . . . . . . . . . . . . . . . . . . 19
3.3 Flow Control in JS . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3.1 If – Else Statement. . . . . . . . . . . . . . . . . . . . . . 21
3.3.2 Write a JS program to used a If – Else Statement . . . . . . . . 22
3.4 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.4.1 Let Variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.4.2 Var Variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3.4.3 Const Variable. . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
4. Programs of JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.1 Write a simple JS Program to change the image . . . . . . . . . . . . . . . 29
4.2 Write a Program to used the background properties using CSS. . . . . . . 31

5 Conclusion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Page | 6
 Chapter – 1

Introduction of Domain

Page | 7
 1.1 INTRODUCTION

 The first popular Web browser with a Graphical User Interface, Mosaic, was
released in 1993. Accessible to non-technical people, it played a prominent
role in the rapid growth of the early World Wide Web. The lead developers
of Mosaic then founded the Netscape corporation, which released a more
polished browser, Netscape Navigator, in 1994. This quickly became the
most-used.

 The goal was a "language for the masses", "to help nonprogrammers create
[15]
dynamic, interactive Web Sites ". Netscape management soon decided
that the best option was for Eich to devise a new language, with syntax
similar to Java and less like Scheme or other extant Scripting language.
Although the new language and its Interpreter implementation were
called LiveScript when first shipped as part of a Navigator Beta in
September 1995, the name was changed to JavaScript for the official
release in December.

1.2 OBJECTIVES

 The objective of the web development is to handle the entire activity of

a website. The software keeps track of all the information about the
entire website. The system contains database where all the information
will be stored safely.

1.3 To Save The And Resources
 The website system will take less time in entering the data,
processing it and getting its output. Fewer resources will be used as

no large registers, files, pens; correctors will be needed or used.


To Reduce the number of workers
 After the system will be computerized only a single computer operator
will be needed to operate the system while now more than one workers
work in the system.

Page | 8
1.5 To reduce the space being used

 Every data will be stored in the computer memory whereas now it

is stored in registers and files which then stored in bookshelves or
cupboards and they need a large space.

1.6 To reduce the work load

 As the new system will be computerized, the database will be

automatically updated at the time of entry. Everything will be
done automatically just by clicking few buttons. There will be
no need to maintain any files or registers.

1.7 To make it easy to search any record

 It will be much easier to find particular record rather than opening

such huge files and finding a single record from them.

1.8 To make the system user friendly


 The system will be much more easy to use and the operator will feel no
difficulty.

Page | 9
 Chapter 2

TOOLS AND TECHNOLOGY USED

Page | 10
2.1 HTML
 HTML stands for Hyper Text Mark-up Language. It is used to design
web pages using mark-up language. HTML is the combination of
Hypertext and Mark-up language. Hypertext defines the link between
the web pages. Mark-up language is used to define the text document
within tag which defines the structure of web pages. HTML5 is the
fifth and current version of HTML. It has improved the mark-up
available for documents and has introduced application programming
interfaces (API) and Document Object Model (DOM).

 Below example illustrate the HTML content:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading of my page.</h1>
<p>Hello, My Name Is OWT!</p>
</body>
</html>

 Output :

Page | 11
 2.1 CSS

Cascading Style Sheets, fondly referred to as CSS, is a simply

designed language intended to simplify the process of making web pages
presentable. CSS allows you to apply styles to web pages. With CSS,
you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background
images or background colors are to be used, different displays for
different devices and screen sizes, and much more!

More importantly, CSS enables you to do this independent of

the HTML that makes up each web page.

There are three types of CSS which are given below:

• Inline - by using the style attribute inside HTML elements
• Internal - by using a section
External - by using a element to link to an external CSS file

2.2.1 INLINE CSS

 An inline CSS is used to apply a unique style to a single
HTML element.

 An inline CSS uses the style attribute of an HTML element.

 The following example sets the text color of the < h1> element
to blue, and the text color of the <p> element to red:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Blue Ball</h1>
<p style="color:red;">Red Apple.</p>
</body>
</html>

Output :

Page | 12
 2.2.2 INTERNAL CSS

 An internal CSS is used to define a style for a single HTML

page.

 An internal CSS is defined in the <head> section of an

HTML page, within a <style> element.

 The following example sets the text color of all the

<h1> elements (on that page) to blue , and the text color
of the all <p> elements to brown . In Addition , the
page will be displayed with a ―Pink‖ background color :

<!DOCTYPE html>
<html>
<head> <style>
body
{background-
color: pink;}
h1 {color:
blue;} p
{color: brown;}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>It's a type of CSS.</p>
</body>
</html>
Output :

Page | 13
 2.2.3 EXTERNAL CSS

 An External style sheet is used to define the style for many HTML pages.

 The external style sheet can be written in any text editor. The
file must not contain any HTML code, and must be saved with
a .css extension.
• Here is what the "styles.css" file looks like:

sbody {
background-color: powderblue;
} h1 {
color:
blue; } p {
color: red;
}
To use an external style sheet, add a link to it in the <head> section of each
HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output :

Page | 14
 2.2.2 CSS Hover Effect

Select and style a <p>, <h1> and <a> element when you mouse over it:

<!DOCTYPE html>
<html>
<head>
<style>
p:hover, h1:hover, a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<h2 id="firstname">My name is Kuldeep</h2>
<p id="hometown">I live in Surat</p>
<p>My <b>best</b> friend is Hetal Rathod</p>
</div>
<h2>Links:</h2>
<p>Here are my favorite websites:</p>
<a href="https://www.google.com">Google</a>
<a href="http://www.disney.com" target="_blank">Disney</a>
<a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
<p><b>Note:</b> Mouse over paragraphs, headers, and
links to see what is getting a style.</p>
</body>
</html>

Output :

Page | 15
2.2.5 SCOPE OF THE PROJECT

 In desktop base website creating system is easy to understand.

Since I accept Internship it seems to me I am beginner and
primary level to learn web development, so it is easy and
interested to learn and create. Further this project is related of
student and I am introducing to its
 circumstances so it service technology is under of the
understand mine. Its technology is so interested and charming
and easy to build a project by fully PHP, HTML, CSS,
MYSQL. Front-End Web Developer
 A front-end web developer is responsible for designing and
developing the user interface of a website or web application.
They work with technologies such as HTML, CSS,
JavaScript, and jQuery to create a visually appealing and
user-friendly interface. Front-end developers must have
knowledge of responsive design, cross-browser
 compatibility, and accessibility. They should be able to
collaborate with UI/UX designers and back-end developers to
create a seamless user experience.

 Back-End Web Developer

 A back-end web developer is responsible for designing, developing,

and maintaining the server side of a website or web application. They
work with technologies such as PHP, Python, Ruby on Rails, and
SQL to create and manage databases, APIs, and server-side logic.
Back-end developers should have knowledge of server
administration, security, and scalability. They should be able to
collaborate with front-end developers and designers to create a
functional and user-friendly website or application.

Page | 16
 Chapter 3

INTRODUCTION OF JAVA SCRIPT

Page | 17
 2.1 Introduction of JAVA SCRIPT

 JavaScript is a single-threaded, synchronous programming and scripting

language widely used in web development. It plays a crucial role in both
front- end and back-end development, enabling dynamic and interactive user
experiences. Unlike compiled languages, JavaScript is interpreted through
web browsers, making it highly accessible and versatile. It is a loosely typed
(or weakly typed) language, meaning variable types are determined at
runtime.

 JavaScript’s history began in 1993 with the creation of the first popular web
browser, Mosaic. In 1994, Netscape, founded by Marc Andreessen, sought to make
the web more interactive by adding a programming language to web pages.
Brendan Eich was hired to develop this language, initially planning to use Scheme.
However, after Netscape merged with Sun Microsystems, they decided to
incorporate Java into their browser to compete with Microsoft. To avoid confusion
between the new scripting language and Java, Netscape named the scripting
language ―LiveScript,‖ later changing it to ―JavaScript‖ in December 1995. The
first version was called ―Mocha‖ by Marc Andreessen but was renamed to
―JavaScript‖ due to trademark and other reasons.

3.1.1 Concept of Java script

 avaScript is Everywhere. Millions of web pages are built on
JavaScript and it’s not going anywhere at least for now. On one
side HTML and CSS give styling to the web pages but on the
other side, it’s the magic of JavaScript that makes your web page
alive. Today this language is not just limited to your web
browser. You can also use it for server-side applications. Isn’t it
cool to use a single language for both client-side and server-side
applications? A single language fulfills both of the purposes and
this is the main reason TONs of job postings are there for
JavaScript developers in the tech industry.

Page | 18
  These are the 7 concepts:

 Scope
 IIFE
 Hoisting
 Clousers
 Callbacks
 Promises
 Asyncs & Await

3.1.2 Features Of JAVA

 JavaScript is one of the most popular programming languages which

includes numerous features when it comes to web development. It's
amongst the top programming languages as per Github and as per
StackOverflow's Developer survey. So you must learn JavaScript and
you should know the features of JavaScript properly to understand what
it is capable of.

3.1.3 Application of JS

 JavaScript is a versatile programming language extensively used in web

development. It empowers interactive features like form validation,
dynamic content updates, and user interface enhancements. Furthermore,
it’s employed in server-side scripting, mobile app development, game
development, and even desktop application development through
frameworks like Electron.

3.2 Link JS File in HTML

o How to Link JavaScript File in HTML ?

o JavaScript can be added to 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
Page | 19
 be placed inside the <head> or the <body> tag according to the
requirement.

• EXTERNAL JS: We can write JavaScript code in another files 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>
Example :

<!DOCTYPE html>
<html lang="en">

<head>
<title>
Basic Example to
Describe JavaScript
</title>
</head>

<body>
<script>
console.log("Welc
ome to My
homieee"); </script>
</body>

</html>

Output :

The Output will display on Console. Welcome to My homieee.

Page | 20
 3.3 Control Flow in JS

• Control flow

o Control Flow is the order in which the JavaScript interpreter executes

statements. If a script doesn't include statements that alter its flow, it's
executed from beginning to end, one line at a time. Control Structure
are used to determine whether or not a set of statements are executed
based on a defined set of criteria, execute a set of statements
repeatedly, or interrupt a sequence of statements.

o Conditional statements

Conditional statements determine whether code should be executed based on one

or more conditions. A conditional statement executes the code it contains if the
associated condition (or set of conditions) evaluates to true. Otherwise, the code is
skipped

3.3.1 If – else Statemen

 An if statement evaluates a condition inside the

matched parentheses that follow. If the condition

inside the parentheses evaluates to true, the

statement or block Statement that follows the

matched parentheses is executed:

Page | 21
 3.3.2 Write a JS Program to used if-else Statement

if ( true ) console.log( "True." );

> "True."

if ( true ) {
const
myString =
"True.";
console.log(
myString );
}
> "True."
If the condition inside the parentheses
evaluates to false, the statement that follows
it is ignored:
if ( false ) console.log( "True." );
An else keyword immediately following an if
statement and its conditionally-executed
statement specifies the statement to be executed
if the if condition evaluates to false:
if ( false )
console.log(
"True." )'' else
console.log(
"False" );
> "False."

• Input :

let score = 45;

// check if
score is fifty or
greater if
(score >= 50) {
console.log("You passed the examination.");
}
Page | 22
 else {
console.log("You failed the examination.");
}

o Output
You failed the examination.

3.4 Variables

 A variable is a container for a value, like a number we

might use in a sum, or a string that we might use as
part of a sentence.

 JavaScript is a dynamically typed language so the type of

variables is decided at runtime. Therefore there is no need
to explicitly define the type of a variable. We can declare
variables in JavaScript in three ways:

 JavaScript var Keyword

 Javascript const Keyword
 Javascript let Keyword

 Syntax :

//Declaration using
var var geek = "Hello
Geek"

// Declaration
using let let $ =
"Welcome"

// Declaration using const

const _example = "Gfg"

Page | 23
 3.4.1 Let Variables

 The let keyword was introduced in the ES6 or ES2015 version of

JavaScript. It’s usually recommended to use let when you’re
working with JavaScript.

 The let keyword in JavaScript is used to make variables that are

scoped to the block they’re declared in. Once you’ve used let to
define a variable, you cannot declare it again within the same block.
It’s important to declare let variables before using them.

Syntax :

let variable_name = value;

Example :

let a = "Hello learners" let b = "joining";

let c = "
12"; let d
= b + c;

console.log
(a);
console.log
(b);
console.log
(c);
console.log
(d);

Page | 24
Output :

Hello
learners
joining
12
joining 12

3.4.2 Var Variables

 The var statement declares function-scoped or globally-

scoped variables, optionally initializing each to a value.

 The scope of a variable declared with var is one of the

following curly- brace-enclosed syntaxes that most closely
contains the var statement.

 In a script, a variable declared using var is added as a non-

configurable property of the global object. This means its property
descriptor cannot be changed and it cannot be deleted using delete.
JavaScript has automatic memory management, and it would make
no sense to be able to use the delete operator on a global variable.

Syntax :
var name1;
var name1 = value1;
var name1 = value1,
name2 = value2; var
name1, name2 =
value2;
var name1 = value1, name2, /* …, */ nameN = valueN;

Page | 25
Example :

var a = "Hello Dear";

var b =
10; var c
= 12; var
d = b+ c;

console.lo
g(a);
console.lo
g(b;
console.lo
g(c);
console.lo
g(d);

Output :
Hello
Dear
10
12
22

3.4.3 Const Variables

 The const declaration declares block-scoped local

variables. The value of a constant can't be changed
through reassignment using
 the Assignment Operator, but if a constant is an
object, its properties can be added, updated, or
removed.
 The const declaration creates an immutable reference toavalue.
It does not mean the value it holds is immutable — just that
the variable identifier cannot be reassigned. For instance, in
the case where the content is an object, this means the object's
contents (e.g., its properties) can be altered. You should
understand const declarations as "create a variable whose
Page | 26
 identity remains constant", not "whose value remains constant"
— or, "create immutable bindings ", not "immutable values".

 The const declaration is very similar to let.

Syntax :

const name1 = value1;

const name1 = value1, name2 = value2;
const name1 = value1, name2 = value2, /* …, */ nameN = valueN;

Example :

const a = "Hello learners"

console.log(a);

const b = 400;
console.log(b);

const c = "12";
console.log(c);
c = "new"
console.log(c)

Output :

Page | 27
 Chapter 4

Programs Of JS

Page | 28
4.1 Write a simple JS program to change the image.

Input :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>date 5 practice</title>
<style>
*{
margin: auto;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
.container{
background-color: rgb(199, 33, 228);
width: 250px;
height: 250px;
padding: 20px;
}
.container img{
width: 100%;
height: 100%;
}

Page | 29
 img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<button onclick="aaistha()">LOG IN</button>
<button onclick="aaisth()">but</button> <div
id="maincontainer" class="container">
<img id="fimg" src="img/kanha.jpg"
alt=""> </div>

<script>
function aaistha(){
document.getElementById("fimg").src="img/radha.jpg";
}

function aaisth(){
document.getElementById("fimg").src="img/kanha.jpg";
}
</script>
</body>
</html>

Output :

Page | 30
4.2 Write a JS program to give the two inputs from the user and perform
thearithmetic operation.

Input :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="enter a number" id="namejpg">
<input type="text" placeholder="enter a number" id="namejpeg">
<label for="hie" id="namelbl">Arithmatic operation
demo</label> <button onclick="mode()">+</button>
<button onclick="mode1()">-</button>
<button onclick="mode2()">*</button>
<button onclick="mode3()">/</button>
<script>
function mode(){
document.getElementById("namelbl").innerText=(parseInt(doc
ument.getElementById("namejpg").value)+parseInt(document.getElem
entById("namejpeg").value));
}
function mode1(){
document.getElementById("namelbl").innerText=(parseInt(doc
ument.getElementById("namejpg").value)-
parseInt(document.getElementById("namejpeg").value));
}
function mode2(){
document.getElementById("namelbl").innerText=(parseInt(doc
ument.getElementById("namejpg").value)*parseInt(document.getElem
entById("namejpeg").value));

Page | 31
 }
function mode3(){
document.getElementById("namelbl").innerText=(parseInt(doc
ument.getElementById("namejpg").value)/parseInt(document.getEleme
ntById("namejpeg").value));
}
</script>
</body>
</html>

Output :

Page | 32
Chapter 5
Conclusion

Page | 33
  Conclusion

 In conclusion I can say that this internship was a great

experience. Thanks for this internship, I acquired deeper
knowledge concerning my technical skills, but I also personally
benefited.
 Currently HTML is a common part of web applications, and it is
one of the most popular language for web designing used by
professionals worldwide. If we surf internet, we can see millions of
websites designed with HTML and CSS. I learned to live in a
different environment from the one I am used to. Indeed. I grew
more independent in work and also in everyday life. I realized that I
could do more things than I thought, like learning new things by
myself. There are huge opportunities available for the students who
want to work in this field. Many private and public organizations
hire web designer for their online work and website development.
With the rapid advent of online industry. the demand of web
development professionals is increasing. and this has created a huge
job opportunity for the aspirants in the upcoming days.

 Also, an experienced person in this field can also work as a

freelancer, there are many online companies which provide
online projects to the individuals.

Page | 34