Project Report

Industrial Training
M Code: 78336

DAV Institute of Engineering & Technology, Jalandhar

Department of Computer Science & Engineering

Submitted By:
Karan Gupta
Univ. Roll No. - 1904018
Anshul Pathania
Univ. Roll No. - 180365
Certificate
 Acknowledgement

This work is just not an individual contribution until its completion. We take this opportunity to
express deep gratitude towards my teacher for providing excellent guidance encouragement and
inspiration throughout the Training work. Without his invaluable guidance, this work would
never have been a successful one. We would like to express my deepest appreciation towards Dr.
Harpreet Bajaj, Head of the Department of Computer Science. At last, we must express our
sincere heartfelt gratitude to all the staff members of the Computer Science Department who
helped us directly or indirectly during this course of work.

Karan Gupta
Anshul Pathania
 ABSTRACT

This Bachelor’s thesis aimed to develop a Word Press mobile-first style website for the
customer. The main purpose of the development was to learn website designing principles and
create a responsive website for the mobile and desktop platforms. The development process
began defining the requirements of the website and creating the requirements document. Then
next step was learning how to design a website layout and to choose the color scheme for the
site. The website was constructed by WordPress and Bootstrap. The result of the website was as
desired. The website scaled all the different platforms, and all the required requirements were
fulfilled.
 Contents
1. Introduction
1.1 WEB DEVELOPMENT
2. WEB
2.1 HTTP
2.1.1 HTTP Request / Response
2.1.2 The HTTP Request Circle
2.2 HTML
2.2.1 HTML Elements
2.2.2 HTML Documents
2.3 CSS
2.3.1 CSS Syntax
2.3.2 External Style Sheet
2.3.3 Inline Style
2.4 Google fonts
3. Software Requirements Specification 13
3.1 Software
3.1.1 Browser
3.1.2 Text Editor
4. Project Planning 17
4.1 Flow of Project
4.1.1 HOME
4.1.2 ABOUT
4.1.3 PROJECT
4.1.4 EVENTS
4.1.5 BLOG
5. Conclusion and Future Scope
5.1 Conclusion
5.2 Future Scope
1. Introduction
1.1 WEB DEVELOPMENT

Web development refers in general to the tasks associated with developing websites for hosting
via intranet or internet. The web development process includes web design, web content
development, client-side/server-side scripting and network security configuration, among other
tasks.

In a broader sense, web development encompasses all the actions, updates, and operations
required to build, maintain and manage a website to ensure its performance, user experience, and
speed are optimal.

It might also, but not necessarily, include all those strategic actions needed to ensure its proper
ranking on search engine results. Usually, those tasks pertain to a different specialization, namely
search engine optimization (SEO)

Web development is also known as website development, while the professionals that maintain a
website are called web developers or (more commonly) web devs.

Web development is the coding or programming that enables website functionality, per the
owner's requirements. It mainly deals with the non-design aspect of building websites, which
includes coding and writing markup.

Web development ranges from creating plain text pages to complex web-based applications,
social network applications and electronic business applications.

The web development hierarchy is as follows:

 Client-side coding.
 Server-side coding.
 Database technology

1
2. WEB
2.1 HTTP

HTTP stands for Hyper Text Transfer Protocol. WWW is about communication between
web clients and servers Communication between client computers and web servers is done
by sending HTTP Requests and receiving HTTP Responses

2.1.1 HTTP Request / Response

Communication between clients and servers is done by requests and responses:

a. A client (a browser) sends an HTTP request to the web

b. An web server receives the request
c. The server runs an application to process the request
d. The server returns an HTTP response (output) to the browser
e. The client (the browser) receives the response

2.1.2 The HTTP Request Circle

A typical HTTP request / response circle:

a. The browser requests an HTML page. The server returns an HTML file.
b. The browser requests a style sheet. The server returns a CSS file.
c. The browser requests a JPG image. The server returns a JPG file.
d. The browser requests JavaScript code. The server returns a JS file
e. The browser requests data. The server returns data (in XML or JSON).

2.2 HTML

HTML stands for Hyper Text Markup Language HTML is the standard markup language for
Web pages HTML elements are the building blocks of HTML pages HTML elements are
represented by tags BASIC TERMS:

∗ Project structure:

<!Doctype>
<html>
<body>

2
 …….
…….
…….
…….
…….
</body>
</html>

2.2.1 HTML Elements

An HTML element is a start tag and an end tag with content in between:

Figure 2.1: Heading Tag

2.2.2 HTML Documents

The HTML document itself begins with html tag and ends with html tag followed by ’/’
forward slash. The visible part of the HTML document is between body tag.

Figure 2.2: Document Structure

3
 • <HTML> tag:

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tag.

When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

• HTML Headings

HTML headings are defined with h1 to h6 tags.

• HTML Paragraphs

HTML paragraphs are defined with p tags:

• HTML Links

HTML links are defined with a tags:

4
• HTML Images

HTML images are defined with img tags. The source file (src), alternative text (alt), width, and
height are provided as attributes:

• HTML Buttons

HTML buttons are defined with button tags:

• HTML Lists
HTML lists are defined with ul tag (unordered/bullet list) or ol tag (ordered/numbered list) tags,
followed by li tags (list items):

• HTML Tables
An HTML table is defined with a table tag. Table rows are defined with tr tags. Table headers
are defined with th tags. (bold and centered by default). Table cells (data) are defined with td
tags.

5
Various other tags and their functions

Tag name Description

<!-- --> This tag is used to apply comment

in an HTML document.

<!DOCTYPE> This tag is used to specify the

version of HTML

<a> It is termed as anchor tag and it

creates a hyperlink or link.

<abbr> It defines an abbreviation for a

phrase or longer word.

<acronym> It defines acronym for a

word. (Not supported in
HTML5)

<address> It defines the author's contact

information of the HTML article

6
<applet> It defines an embedded Java
applet. (Not supported in
HTML5)

<area> It defines the area of an image

map.

<article> It defines the self-contained

content.

<aside> It defines content aside from main

content. Mainly represented as
sidebar.

<audio> It is used to embed sound content

in HTML document.

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

<base> This tag defines the base URL for

all relative URL within the
document.

<basefont> This tag is used to set default font,

size and color for all elements of
document. (Not supported in
HTML5)

<bdi> This tag is used to provide

isolation for that part of text which
may be formatted in different
directions from its surrounding
text.

<bdo> It is used to override the current

text direction.

<big> This tag is used to make font size

one level larger than its
surrounding content. (Not
supported in HTML5)

7
<blockquote> It is used to define a content which
is taken from another source.

<body> It is used to define the body

section of an HTML document.

<br> It is used to apply single line

break.

<button> It is used to represent a clickable

button

<canvas> It is used to provide a graphics

space within a web document.

<caption> It is used to define a caption for a

table.

<center> It is used to align the content in

center. (Not supported in
HTML5)

<cite> It is used to define the title of the

work, book, website, etc.

<code> It is used to display a part of

programming code in an HTML
document.

<col> It defines a column within a table

which represent common
properties of columns and used
with the <colgroup> element.

<colgroup> It is used to define group of

columns in a table.

<data> It is used to link the content with

the machine-readable translation.

8
<datalist> It is used to provide a predefined
list for input option.

<dd> It is used to provide

definition/description of a term in
description list.

<del> It defines a text which has been

deleted from the document.

<details> It defines additional details which

user can either view or hide.

<dfn> It is used to indicate a term which

is defined within a
sentence/phrase.

<dialog> It defines a dialog box or other

interactive components.

<dir> It is used as container for directory

list of files. (Not supported in
HTML5)

<div> It defines a division or section

within HTML document.

<dl> It is sued to define a description

list.

<dt> It is used to define a term in

description list.

<em> It is used to emphasis the content

applied within this element.

<embed> It is used as embedded container

for external file/application/media,
etc.

9
<fieldset> It is used to group related
elements/labels within a web form.

<figcaption> It is used to add a caption or

explanation for the <figure>
element.

<figure> It is used to define the self-

contained content, and s mostly
refer as single unit.

<font> It defines the font, size, color, and

face for the content. (Not
supported in HTML5)

<footer> It defines the footer section of a

webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of

webpage which can contain
another HTML file. (Not
supported in HTML5)

<frameset> It defines group of Frames. (Not

supported in HTML5)

<h1> to <h6> It defines headings for an HTML

document from level 1 to level 6.

<head> It defines the head section of an

HTML document.

<header> It defines the header of a section or

webpage.

<hr> It is used to apply thematic break

between paragraph-level elements.

<html> It represents root of an HTML

document.

10
I

<i> It is used to represent a text in

some different voice.

<iframe> It defines an inline frame which

can embed other content.

<img> It is used to insert an image within

an HTML document.

<input> It defines an input field within an

HTML form.

<ins> It represent text that has been

inserted within an HTML
document.

<isindex> It is used to display search string

for current document. (Not
supported in HTML5)

<kbd> It is used to define keyboard input.

<label> It defines a text label for the input

field of form.

<legend> It defines a caption for content of

<fieldset>

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

<link> It represents a relationship

between current document and an
external resource.

<main> It represents the main content of an

HTML document.

11
<map> It defines an image map with
active areas.

<mark> It represents a highlighted text.

<marquee> It is used to insert the scrolling text

or an image either horizontally or
vertically. (Not supported in
HTML5)

<menu> It is used for creating a menu list

of commands.

<meta> It defines metadata of an HTML

document.

<meter> It defines scalar measurement with

known range or fractional value.

<nav> It represents section of page to

represent navigation links.

<noframes> It provides alternate content to

represent in browser which does
not support the <frame>
elements. (Not supported in
HTML5)

<noscript> It provides an alternative content if

a script type is not supported in
browser.

<object> It is used to embed an object in

HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a

drop-down list.

12
<option> It is used to define options or items
in a drop-down list.

<output> It is used as container element

which can show result of a
calculation.

<p> It represents a paragraph in an

HTML document.

<param> It defines parameter for an

<object> element

<picture> It defines more than one source

element and one image element.

<pre> It defines preformatted text in an

HTML document.

<progress> It defines the progress of a task

within HTML document.
Q
<q> It defines short inline quotation.

<rp> It defines an alternative content if

browser does not supports ruby
annotations.

<rt> It defines explanations and

pronunciations in ruby
annotations.

<ruby> It is used to represent ruby

annotations.

<s> It render text which is no longer

correct or relevant.

13
<samp> It is used to represent sample
output of a computer program.

<script> It is used to declare the JavaScript

within HTML document.

<section> It defines a generic section for a

document.

<select> It represents a control which

provides a menu of options.

<small> It is used to make text font one

size smaller than document?s base
font size.

<source>> It defines multiple media recourses

for different media element such
as <picture>, <video>, and
<audio> element.

<span> It is used for styling and grouping

inline.

<strike> It is used to render strike through

the text. (Not supported in
HTML5)

<strong> It is used to define important text.

<style> It is used to contain style

information for an HTML
document.

<sub> It defines a text which displays as

a subscript text.

<summary> It defines summary which can be

used with <details> tag.

<sup> It defines a text which represent as

superscript text.

<svg> It is used as container of SVG

14
 (Scalable Vector Graphics).

<table> It is used to present data in tabular

form or to create a table within
HTML document.

<tbody> It represents the body content of an

HTML table and used along with
<thead> and <tfoot>.

<td> It is used to define cells of an

HTML table which contains table
data

<template> It is used to contain the client side

content which will not display at
time of page load and may render
later using JavaScript.

<textarea> It is used to define multiple line

input, such as comment, feedback,
and review, etc.

<tfoot> It defines the footer content of an

HTML table.

<th> It defines the head cell of an

HTML table.

<thead> It defines the header of an HTML

table. It is used along with
<tbody> and <tfoot> tags.

<time> It is used to define data/time

within an HTML document.

<title> It defines the title or name of an

HTML document.

<tr> It defines the row cells in an

HTML table

15
 <track> It is used to define text tracks for
<audio> and <video> elements.

<tt> It is used to define teletype

text. (Not supported in HTML5)

<u> It is used to render enclosed text

with an underline.

<ul> It defines unordered list of items.

<var> It defines variable name used in

mathematical or programming
context.

<video> It is used to embed a video content

with an HTML document

<wbr> It defines a position within text

where break line is possible.

2.3 CSS

CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language used
for describing the presentation of a document written in a markup language like HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

2.3.1 CSS Syntax

A CSS rule consists of a selector and a declaration block:

16
The selector points to the HTML element to style (h1). The declaration block (in curly braces)
contains one or more declarations separated by semicolons. Each declaration includes a CSS
property name and a value, separated by a colon. In the following example all p tag elements will
be 32px wide, center-aligned, and with red.

Example:

2.3.2 External Style Sheet

The external style sheet is generally used when you want to make changes on multiple pages. It
is ideal for this condition because it facilitates you to change the look of the entire web site by
changing just one file. It uses the link tag on every pages and the link tag should be put inside the
head section.

Example:

Figure 2.3: .css file

The external style sheet may be written in any text editor but must be saved with a .css extension.
This file should not contain HTML elements.

17
Figure 2.4: .css file linked with .html file

2.3.3 Inline Style

We can apply CSS in a single element by inline CSS technique. The inline CSS is also a method
to insert style sheets in HTML document. This method mitigates some advantages of style sheets
so it is advised to use this method sparingly. If you want to use inline CSS, you should use the
style attribute to the relevant tag.

Figure 2.5: Inline Syntax .css file

Example:

Figure 2.6: Inline Style Sheet

18
2.4 Google fonts

Google Fonts is a Google API.

We can use Google Fonts in our Website design.

Figure 2.7: Google font using in .html file

When we use google fonts in designing webpage it will be viewed as:

19
3. Software Requirements Specification

3.1 Software

3.1.1 Browser

Firefox has always been known for its flexibility and support for extensions, but in recent years it
had started to lag behind the competition in terms of speed. Firefox Quantum, first released last
year, represented a total overhaul of the browser’s code base, with speeds now comparable with
Google Chrome. That’s not just on top-end computers, either – the new Firefox makes frugal use
of RAM, even with masses of tabs open.

 Mozilla Firefox

20
 Mozilla Firefox is a free and open-source web browser developed by The Mozilla
Foundation and its subsidiary, Mozilla Corporation. Firefox is available for Windows,
macOS, Linux, BSD, illumos and Solaris operating systems. Its sibling, Firefox for
Android, is also available.

 Google Chrome

Google Chrome is a cross-platform web browser developed by Google. It was first

released in 2008 for Microsoft Windows, and was later ported to Linux, macOS, iOS, and
Android. The browser is also the main component of Chrome OS, where it serves as the
platform for web apps.

 Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft. It was first released for
Windows 10 and Xbox One in 2015, then for Android and iOS in 2017. Edge includes
integration with Cortana and has extensions hosted on the Microsoft Store.

• Opera

21
 Opera is a web browser for Microsoft Windows, Android, macOS, and Linux operating
systems. Opera Ltd. is publicly listed on the NASDAQ stock exchange, with majority
ownership and control belonging to Chinese Businessman Yahui Zhou, creator of Beijing
Kunlun Tech which specializes in mobile games and cyber security specialist Qihoo 360.
Opera is a Chromium-based browser using the Blink layout engine. It differentiates itself
because of a distinct user interface and other features.

3.1.2 Text Editor

We admit there’s a whiff of nostalgia about this entry, given that Notepad++ was one of
the earliest text editors we used on Windows. But the app deserves its place on this list,
because it can still compete with the best of them. For no money whatsoever, you get a
capable (if sometimes workmanlike) editor with plenty of features, and you can also mess
about with the interface to make it better suit your requirements.

• Notepad ++

Image result for notepad++ informationnotepad-plus-plus.org Notepad++ is a text editor and

source code editor for use with Microsoft Windows. It supports tabbed editing, which allows
working with multiple open files in a single window. The project’s name comes from the C
increment operator.

• Atom

Atom is a free and open-source text and source code editor for macOS, Linux, and
Microsoft Windows with support for plug-ins written in Node.js, and embedded Git
Control, developed by GitHub. Atom is a desktop application built using web
technologies.

• Brackets

22
 Brackets are a source code editor with a primary focus on web development. Created by
Adobe Systems, it is free and open-source software licensed under the MIT License, and
is currently maintained on GitHub by Adobe and other open-sourced developers. It is
written in JavaScript, HTML and CSS.

• Sublime Text

Sublime Text is a proprietary cross-platform source code editor with a Python application
programming interface. It natively supports many programming languages and markup
languages, and functions can be added by users with plugins, typically community-built
and maintained under free-software licenses.

4. Project Planning

4.1 Flow of Project

4.1.1 HOME

Eventrum is an event management organization that helps you to do your event easily without
any stress. Eventrum helps you to manage your event and take responsibility for the event.

23
4.1.2 ABOUT

Event planning requires foresight, follow-through, and attention to detail. You need to see the
big picture as well as the tiniest of details. You need Vision. This is why we started Eventrum
Event Management. We wanted to create a company with the experience, skills, and knowledge
to help any event, no matter how large or how small, fulfills its ultimate potential. We can help
fledgling events get off the ground and existing events soar. We’re flexible, fast, responsive, and
reliable. And we always bring a fresh perspective. No matter what stage of the planning you’re
in, we’d welcome the opportunity to help you make your event the best it can be.

24
4.1.3 SERVICES

 Event Management
Event operations and logistics is where all the time spent planning the event comes together in
the execution of the event.

 Marketing
A comprehensive marketing and promotional plan is important to the success of any event.

 Consulting
We consult organizations on all aspects of their event to help take them to the next level.

 Equipment Rental
EM has an extensive inventory of race related equipment including mile markers, timing clocks,
traffic management equipment, crowd control fencing, custom start/finish line structures and
more.

25
4.1.4 Gallery

In our gallery you can check the various events we conducted in the past.

5. Conclusion and Future Scope

26
5.1 Conclusion

This chapter summarizes the main success of this research work and discusses an about future
research work to achieve the ultimate goal in the field of performance of web accessibility, web
security, load balancing and collective intelligence. An in depth literature survey was carried out
and the critical analysis of the same raised the following major shortcomings and challenges in
the web-centric query optimization techniques.

1. Network is congested due to heterogeneous data (i.e., text, images, videos etc), heavy weight
of web applications and repetition of queries. Due to these problems the access time of web
applications is very high, which reduces the overall performance of the web.

2. Web-centric queries are neither efficient nor secure.

3. Huge information is available on the servers but the load on servers is not still balanced. In
industry the developers distribute the huge information of servers by introducing more servers
which produce requirement of the collective intelligence. Further, to search the efficient and
relevant server is also a big challenge. The diagnostic thought to above challenges guides
towards the design of following efficient approach, model and frameworks:

• Portable Extended Cache Memory to Reduce Web Traffic (PECA)

In this approach, it is desired to conserve the heavy data at the client side. The experiments were
performed on few dummy web sites of different sizes while saving 96 heavy data at client side.
Difference in the access times of different web sites via traditional method and with the proposed
approach was compared. A major improvement in the access time was observed in contrast to
Department of Information Technology, DBATU University, Lonere. 20 Web Development that
by using traditional methods. Also, an attempt was made to reduce server load and network
traffic congestion and it actually resulted into reduction of response time and hence an improved
web performance could be observed.

• Secure Web Access Model for sensitive data (SWAM)

SWAM in the context of biometric recognition is being proposed. The proposed security model
SWAM provide an interface to the authorized user’s and reduce the threats regarding their
sensitive areas. Online web services will be more secure using the online SWAM.

• Collective Intelligence based Framework for Load Balancing of Web Servers

27
 Collective Intelligence based Framework for Load Balancing of Web Servers is being proposed.
The aim of this work is to find the overall best server with shortest path and hence online
balancing of web servers could be achieved with the help of collective intelligence based
framework for online load balancing. The proposed concept is an extension of, rather than a
replacement for, traditional exploration process.

5.2 Future Scope

28
The work covered in the thesis tries to solve various issues, which emerged as a result of
literature survey. Still there are many unopened questions left and are of interest were identified
and are mentioned below:

• Web Security

At Client Side In this research work we proposed PECA, but it still has shortcomings. For
example, when web document is required to be save in the portable extended memory it reduces
the security due to decentralization of data. During updates at client side malicious codes may
transfer to the client machine. So, a web security framework is required at the client side to make
PECA more secure and better performer. So in near future, PECA and SWAM may be merged.

• Server Side Load Balancing

Load balancing is a concept which is still under research. Everyday new frameworks, algorithms
and models are being developed and existing models are updated. There is a vast scope for future
enhancement. For example, the users are sending arbitrary data as a query on the web, and hence
web-centric queries can be optimized at server level to reduce server load to improve the server
Web Development performance. Further, implementation of our work is pending and hence an
improvement may be recommended in the same.

• Ant Based Technology for Collective Intelligence at Server Side

The developers are distributing server’s data to reduce the server’s load. This mechanism is
increasing the requirement of collective intelligence. In this research work, ant technology for
collective intelligence is used, but this is framework is based on client’s query. There are still
many unopened questions. For example, what and how much data is available in near servers?
Are these servers are reliable? What is the credibility of these servers? In particular the server
must have all the relevant information of their relative servers.

29