WEB-DEVELOPMENT

Project Submitted for the partial fulfillment of the requirement for the award
of the degree of

Bachelor of Technology
in
ELECTRICAL ENGINEERING

Dr. A.P.J. Abdul Kalam Technical University, Lucknow

Submitted by
Yashendra Singh (1809120107)

Under the Guidance of:

Prof. Parveen Mandal
Department of Electrical Engineering

2020-21 (Odd-Sem)
Semester-V
JSS MAHAVIDYAPEETHA
JSS ACADEMY OF TECHNICAL EDUCATION, NOIDA
DEPARTMENT OF ELECTRICAL ENGINEERING
C-20/1, SECTOR – 62, NOIDA- 201301
DECLARATION

I hereby declare that this submission is my own work and that, to the best of my knowledge
and belief, it contains no material previously published or written by another person nor
material which to a substantial extent has been accepted for the award of any other degree or
diploma of the university or other institute of higher learning except where due
acknowledgement has been made in the text.

Signature of Student:

Student’s Name: Yashendra Singh

Roll No: 1809120107

Date: 18.03.2021
ACKNOWLEDGEMENT

I would like to express my gratitude to Parveen mandal Ma’am, my mentor for this project. I
would like to thank her for her constant support, enthusiastic encouragement and useful
critiques. She had provided me excellent guidance for a good learning experience. I would
also like to thank our Principal Mr. Gurulingappa M. Patil for providing me this
opportunity.
ABSTRACT

The report is about web development. Web development is the creation of dynamic web
applications. Examples of web applications are social networking sites like Facebook or e-
commerce sites like Amazon. There are two broad divisions of web development- front end

development (client side development) and back end development (server side development).
Front end development refers to constructing what a user sees when they load a web
application-the content, design and how you interact with it.This is done with three codes-
HTML, CSS and JavaScript. Back end development controls what goes on behind the scenes
of a web application. This report covers:

• Various tools required for making WebPages

• Features of various tools used
• Give an easy to use web design
• Parts of a website
• Future Scope of web development

`
TABLE OF CONTENTS

Page no.

Declaration 2

Certificate 3

Acknowledgement 4

Abstract 5

Introduction 7

What is a Website? 9

Parts of a Website 11

Tools and Technology Used 15

History and Features of the tools and technology 18

Future Scope 24

References 25
INTRODUCTION

Web development is the creation of dynamic web applications. Examples of web applications
are social networking sites like Facebook or e-commerce sites like Amazon. There are two
broad divisions of web development- front end development (client side development) and
back end development (server side development). The front end is the stuff you see on the
website in your browser, including the presentation of content and user interface elements
like the navigation bar. Front-end developers use HTML, CSS, JavaScript, and their relevant
frameworks to ensure that content is presented effectively and that users have an excellent
experience.The back end refers to the guts of the application, which live on the server. The
back end stores and serves program data to ensure that the front end has what it needs. This
process can become very complicated when a website has millions of users. Back-end
developers use programming languages like Java, Python, and Ruby to work with data. Back
end scripts are written in many different coding languages such as: PHP, ASP.NET, Java,
Node.js, and Python.
Fig 1.1 Difference between front-end and back-end
What is a Website??

A web site is a collection of related network web resources, such as web

pages, multimedia content, which are typically identified with a common domain name, and
published on at least one web server. Notable examples are wikipedia.org, google.com,
and amazon.com.Websites can be accessed via a public Internet Protocol (IP) network, such as
the Internet, or a private local area network(LAN), by a uniform resource locator (URL) that
identifies the site.Websites can have many functions and can be used in various fashions; a
website can be a personal website, a corporate website for a company, a government website,
an organization website, etc. Websites are typically dedicated to a particular topic or purpose,
ranging from entertainment and social networking to providing news and education. All
publicly accessible websites collectively constitute the World Wide Web, while private
websites, such as a company's website for its employees, are typically part of an intranet.

Web pages, which are the building blocks of websites, are documents, typically composed
in plain text interspersed with formatting instructions of Hypertext Markup Language
(HTML, XHTML). Web pages are accessed and transported with the Hypertext Transfer
Protocol (HTTP), which may optionally employ encryption (HTTP Secure, HTTPS) to
provide security and privacy for the user. The user's application, often a web browser, renders
the page content according to its HTML markup instructions onto a display terminal.
Hyperlinking between web pages conveys to the reader the site structure and guides the
navigation of the site, which often starts with a home page containing a directory of the
site web content.

Fig1.1 sample webpage

Fig1.2 Flow chart of website
Parts of a Web Site

 Website logo
The logo section of the website will commonly be the space for identifying the website
brand. While personal blogs and other non-brand-driven websites may only include the
name of the website here, this spot is the first point of call for establishing a brand on the
website. This image or text is often linked to the website main page, often known as
“home”.

  Header
The header is the top portion of the website, often containing the website logo as well as
the main menu. The header is often a permanent fixture of the website, where the main
content might scroll beneath it. The header contains information that is important to
website navigation.

  Menu
Menus, often placed at an easy-to-reach place on the website, provide a way to navigate
the website in an easy way. A main menu is often contained in the header, or on a
collapsible pane (especially in mobile views of websites), and allows navigation through
the pages of the website.

 Body
The body area of a website is the area of the website that contains the most content. There
are a number of different kinds of content. Specific pages will contain specific content.
The home page depicted contains examples of these types of content in ways that would
be displayed on a home page.
  Highlighted content
Highlighted content, often exclusively on the home page, guides visitors to parts of your
website that will convert into website goals. Website goals are the actions, interactions,
etc. on your website that fulfil the very purpose of your website. Booking a flight on a
travel agent’s website, or buying goods on an online store are examples of this.

 Call To Action(CTA)
CTAs are important for guiding visitors to your website to important information,
completing website goals, and navigating your website. CTAs can be obvious, such as
buttons, or more subtle, like linking within text, but all serve the same purpose: guiding
visitors to information that is relevant to them.

 Sidebar
While many modern websites with flat design elements frame the body content within the
full width of the website, sidebars are very common website elements that haven’t
disappeared entirely. Sidebars, like menus, often help with navigation. When large
amount of information, like multiple blog posts, or products need to be ordered, a sidebar
can help.

 Posts and feed content

A handy way to get visitors to your website engaging with the content on your website is
by offering a “feed” of content. This, like a slideshow of recommended products or, in
this case, the latest blog posts, serves to pique the visitor’s interest and guide them to
completing website goals (in the case of the dummy website, reading a blog post).
  Internal Links
Internal links are useful for creating an ideal flow through your website. In the example,
the link takes users to the blog page, where they can peruse the full list of blog posts and
find something that interests them and effectively completing a website goal.

  Forms
Forms are ideal ways of gathering information from your visitors. Contact forms are very
common, and work to get the name and a means of contacting visitors at the very least.

  Buttons
As CTAs, prompts to complete an interaction like a form, or simply as a link to another
part of your website (menus use this often) buttons are handy interactive parts of your
website that prompt engagement. Unique styling to these parts of the website can be
helpful in brand building, highlighting the CTA related, and guiding the visitor’s eye to a
particular piece of information.

 Social links

Social media links are a popular addition to most websites. While the example shows the
links in the footer, social media links can be displayed on any part of the website. If a
visitor likes your website, wants to get updates from your website via social media, or
simply prefers getting in contact via social media, these links will prompt further
engagement with your website.
 Fig1.3 Parts of a website

TOOLS AND TECHNOLOGY USED

Fig 1.4 HTML Fig 1.5 CSS

Fig 1.6 Bootstrap Fig 1.6 Javascript

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. Most of the extending
packages have free software licenses and are community-built and maintained. Atom is based
on Electron (formerly known as Atom Shell), a framework that enables cross-platform desktop
applications using Chromium and Node.js. It is written in CoffeeScript and Less .

Atom was released from beta, as version 1.0, on 25 June 2015. Its developers call it a
"hackable text editor for the 21st Century". It is fully customizable in HTML, CSS, and
JavaScript.

HTML :

Hypertext Markup Language (HTML) is the standard markup language for documents

designed to be displayed in a web browser. It can be assisted by technologies such
as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered page. HTML
provides a means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes and other items.
CSS:

Cascading Style Sheets (CSS) 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.

CSS is designed to enable the separation of presentation and content, including layout, colors,

and fonts. This separation can improve content accessibility, provide more flexibility and
control in the specification of presentation characteristics, enable multiple web pages to share
formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and
repetition in the structural content.

Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via
speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has
rules for alternate formatting if the content is accessed on a mobile device.

Bootstrap:

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-

end web development. It cont5ains CSS- and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation and other interface components.

Bootstrap is the third-most-starred project on GitHub, with more than 135,000 stars, behind
only freeCodeCamp (almost 305,000 stars) and marginally behind Vue.js framework.

Media Queries:

Media queries is a CSS3 module allowing content rendering to adapt to conditions such as

screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C
recommended standard in June 2012,[1] and is a cornerstone technology of responsive web
design (RWD).
 HISTORY AND FEATURES OF TECHNOLOGY

HTML

History of HTML:

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and

prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989,
Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee
specified HTML and wrote the browser and server software in late 1990. That year, Berners-
Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for
funding, but the project was not formally adopted by CERN. In his personal notes from 1990
he listed "some of the many areas in which hypertext is used" and put an encyclopedia first.

The first publicly available description of HTML was a document called "HTML Tags", first
mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements
comprising the initial, relatively simple design of HTML.

HTML is a very evolving markup language and has evolved with various versions
updating. Long before its revised standards and specifications are carried in, each version has
allowed its user to create web pages in the much easier and prettier way and make sites very
efficient.

• HTML 1.0 was released in 1993 with the intention of sharing information which can be
readable and accessible via web browsers. But not much of the developers were involved in
creating websites. So the language was also not growing.

• Then comes the HTML 2.0, published in 1995; which contains all the features of HTML 1.0
along with that few additional features; which remained as the standard markup language for
designing and creating websites until January 1997 and refined various core features of
HTML.
• Then comes the HTML 3.0, where Dave Raggett who introduced a fresh paper or draft on
HTML. It included improved new features of HTML, giving more powerful characteristics
for webmasters in designing web pages. But these powerful features of new HTML slowed
down the browser in applying further improvements.

• Then comes the HTML 4.01 which is widely used and was a successful version of HTML
before HTML 5.0, which is currently released and used worldwide. HTML 5 can be said for
as an extended version of HTML 4.01 which was published in the year 2012.

Features Of HTML:

• Multimedia Support in HTML: HTML5 supports both audio and video files to be

played in a browser.
• HMTL5 Input Element Types: The input types help in receiving the input in a
required format. In HTML5 some new input types have been added. A few of the
existing input types are password, file, etc.
• HTML5 Custom Data Attributes: HTML5 now allows you to add valid data
attributes, which helps in storing the data without affecting the web page UI.
• Editable Contents in HTML5: This is a nice feature, which allows the end users to
edit the HTML control's content. This kind of feature allows the developers to build
web pages that include sections like notes, HTML editor etc
• HTML5 Autofocus and Placeholder Attributes: The autofocus feature is achieved
by adding the autofocus attribute. This allows the control to have the focus
automatically on page load.
• Required Field and Range Validators in HTML5: Required field functionality is
achieved using the attribute named "required" on the input controls. This makes sure
that the form will not be posted until the value is entered for the input control.
CSS

History of CSS:

CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was
working with Tim Berners-Lee at CERN. Several other style sheet languages for the web were
proposed around the same time, and discussions on public mailing lists and inside World Wide
Web Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in
1996. In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and
is regarded as co-creator of CSS.

Style sheets have existed in one form or another since the beginnings of Standard Generalized
Markup Language (SGML) in the 1980s, and CSS was developed to provide style sheets for
the web. One requirement for a web style sheet language was for style sheets to come from
different sources on the web. Therefore, existing style sheet languages
like DSSSL and FOSI were not suitable. CSS, on the other hand, let a document's style be
influenced by multiple style sheets by way of "cascading" styles.

As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the
demands of web developers. This evolution gave the designer more control over site
appearance, at the cost of more complex HTML. Variations in web browser implementations,
such as ViolaWWW and WorldWideWeb, made consistent site appearance difficult, and users
had less control over how web content was displayed. The browser/editor developed by Tim
Berners-Lee had style sheets that were hard-coded into the program. The style sheets could
therefore not be linked to documents on the web. Robert Cailliau, also of CERN, wanted to
separate the structure from the presentation so that different style sheets could describe
different presentation for printing, screen-based presentations, and editors.
Features of CSS:

Separation of content from presentation

CSS facilitates publication of content in multiple presentation formats based on nominal
parameters. Nominal parameters include explicit user preferences, different web browsers, the
type of device being used to view the content (a desktop computer or mobile device), the
geographic location of the user and many other variables.

Accessibility
Without CSS, web designers must typically lay out their pages with techniques such as HTML
tables that hinder accessibility for vision-impaired users

Page reformatting
With a simple change of one line, a different style sheet can be used for the same page. This
has advantages for accessibility, as well as providing the ability to tailor a page or site to
different target devices. Furthermore, devices not able to understand the styling still display
the content.

BOOTSTRAP:

History of Bootstrap:

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob
Thornton at Twitter as a framework to encourage consistency across internal tools. Before
Bootstrap, various libraries were used for interface development, which led to inconsistencies
and a high maintenance burden.

After a few months of development by a small group, many developers at Twitter began to
contribute to the project as a part of Hack Week, a hackathon style week for the Twitter
development team. It was renamed from Twitter Blueprint to Bootstrap, and released as an
open source project on August 19, 2011. It has continued to be maintained by Mark Otto,
Jacob Thornton, and a small group of core developers, as well as a large community of
contributors.

On January 31,2012, Bootstrap 2 was announced. This release added the twelve column grid
layout and responsive design components, as well as changes to many of the existing
components. The Bootstrap 3 release was announced Bootstrap 4 was in development. The
first alpha version of Bootstrap 4 was deployed on August 19,2015.

Features of Bootstrap:

Easy to use

Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

Simple Integration

Bootstrap can be simply integrated along with distinct other platforms and frameworks, on
existing sites and new ones too and one more things you can also utilize particular elements
of Bootstrap along with your current CSS.

Base styling for most HTML elements

A website has many different elements such as headings, lists, tables, buttons, forms, etc.
The HTML elements for which styles are provided are; Typography Code, Tables, Forms,
Buttons, Images, Icons.
Good documentation

Not only does Bootstrap offer styling for almost every element a typical website or web
application requires, it also provides a great documentation with examples and demo that
only make it more easier for even someone new.

MEDIA QUERIES:

History Of Media Queries:

Media queries were first sketched in Håkon Wium Lie's initial CSS proposal in 1994, but
they did not become part of CSS1. The HTML4 Recommendation from 1997 shows an
example of how media queries could be added in the future. In 2000, W3C started work on
media queries and also on another scheme for supporting various devices: CC/PP.

Features of Media Queries:

Media queries can be used to check many things, such as:

• width and height of the viewport

• width and height of the device

• Orientation (is the tablet/phone in landscape or portrait mode?)

• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops,

laptops, tablets, and mobile phones (such as iPhone and Android phones).
FUTURE SCOPE

 Build simple, attractive websites for startups.

 Build UI’s for Web Applications.

 PSD to HTML/CSS conversions.

 Do Internships

 Do freelancing.

 Choose between front-end or server-side programming.

 Create simple to advanced web applications.

 Keep Learning and exploring.

REFERENCES

[1] Udemy- (www.udemy.com)

[2] Homepage-W3Schools – (www.w3schools.com/)

[3] Homepage-Codeply- (www.codeply.com)

[4] Youtube-(www.youtube.com)

[5] Homepage-Stack overflow-(www.stackoverflow.com)