GURU JAMBHESHWAR UNIVERSITY

OF SCIENCE AND TECHNOLOGY, HISAR

Presented
By-
RAHUL VERMA Presented ToB.Tech(CSE) Prof.
5thSemester

Training report
On
(Web development)

DEPARTMENT OF COMPUTER
SCIENCE & ENGINEERING

ACKNOWLEDGEMENT
I extend my sincere gratitude towards my mentor
(Charles russell severance professor at the University of
 Michigan School of Information.) for giving me his
invaluable knowledge and wonderful technical
guidance.

I express my thanks to Mr. Vinod Kumar

(professor)who gave me opportunity to present this
report.

RAHUL VERMA
(btech IT )
200010140050
 ABSTRACT

•In the 6 weeks summer training I had

studied about front end and Back end of
web development .I chose this training
because it helps to develop dynamic web
pages,and it is useful for my career in web
developing industry.
• Under the guidance of Charles Russell
severance.I learned various new technique of
designing web pages and building efficient
web sites.
•Through which I am able to design a fully
functional web site for my project work .

INTRODUCTION

WEB DEVELOPING
Web site is a collection of web pages , including
multimedia content, typically identified with a
common domain name,and published on atleast one
web server .
A web site may be accessible via a public Internet
protocol (IP),such as the internet or the private
local area network (LAN),by referring a uniform
resource locator (URL)that identifies the site.
A website can be of many types ,personal website,
business website .website are typically dedicated to
a particular topic or purpose.
All publically accessible website constitute to world
wide web .

SOFTWARE REQUIREMENT

•1 HTML
•2 CSS
•3 BOOTSTRAP
•4 Python
•5 Django Framework
•6 Jinja Template
•7 Xampp Control Panel
 •Project made
HTML
HTML (Hyper Text Mark-Up Language) is what is
known as a "mark-up language“ whose role is to
prepare written documents using formatting tags .
The tags indicate how the document is presented
and how it links to other documents.
The World Wide Web (WWW for short), or simply
the Web ,is the world wide network formed by all
the documents (called "webpages“ )which are
connected to one another by hyperlinks.
Web pages are usually organized around a main
page, which acts as a hub for browsing other pages
with hyperlinks.
This group of web pages joined by hyperlinks and
centered around a main page is called a website.

CSS
CSS (Cascading Style Sheets) is used to style and
layout web pages — for example, to alter the
font, color, size, and spacing of your content, split
it into multiple columns, or add animations and
other decorative features.
It allows one to adapt the presentation to
different types of devices, such as large screens,
small screens, or printers.
CSS is independent of HTML and can be used with
any XML-based markup language.

BOOTSTRAP
Bootstrap is a free and open-source CSS
framework directed at responsive, mobile-first
front-end web development.
It contains HTML, CSS and JavaScript-based
design templates for typography, forms, buttons,
navigation, and other interface components.
Bootstrap provides basic style definitions for all
HTML elements.
CSS classes are defined in Bootstrap to further
customize the appearance of website
Bootstrap also comes with several JavaScript
components such as dialog box ,progress bars,
navigation and drop down.

JS
JS (java script) is a programming language that is
one of the core technologies of the World Wide
Web, alongside HTML and CSS.
 It has application programming interfaces (APIs)
for working with text, dates, regular
expressions, standard data structures, and the
document object model (DOM).
JavaScript engines were originally used only in
web browsers, but are now core components of
some servers and a variety of applications .
Although Java and JavaScript are similar in
name, syntax, and respective standard libraries,
the two languages are distinct and differ greatly
in design.
What is Python?
Python is a popular programming language. It was created by Guido van Rossum,
and released in 1991.

It is used for:

● web development (server-side),

● software development,
● mathematics,
● system scripting.

What can Python do?

● Python can be used on a server to create web applications.
● Python can be used alongside software to create workflows.
● Python can connect to database systems. It can also read and modify files. ●
Python can be used to handle big data and perform complex mathematics.
● Python can be used for rapid prototyping, or for production-ready software
development.

Good to know
The most recent major version of Python is Python 3, which we shall be
● using in this tutorial. However, Python 2, although not being updated with
anything other than security updates, is still quite popular.
 ● In this tutorial Python will be written in a text editor. It is possible to write
Python in an Integrated Development Environment, such as Thonny, Pycharm,
Netbeans or Eclipse which are particularly useful when managing larger
collections of Python files.

Python Syntax compared to other programming languages

● Python was designed for readability, and has some similarities to the English
language with influence from mathematics.
● Python uses new lines to complete a command, as opposed to other
programming languages which often use semicolons or parentheses.
● Python relies on indentation, using whitespace, to define scope; such as the
scope of loops, functions and classes. Other programming languages often use
curly-brackets for this purpose.

Django Framework
Django is a high-level Python web framework that enables rapid development
of secure and maintainable websites. Built by experienced developers,
Django takes care of much of the hassle of web development, so you can
focus on writing your app without needing to reinvent the wheel. It is free and
open source, has a thriving and active community, great documentation, and
many options for free and paid-for support.

Django helps you write software that is:

Complete
Django follows the "Batteries included" philosophy and provides almost
everything developers might want to do "out of the box". Because everything
you need is part of the one "product", it all works seamlessly together, follows
consistent design principles, and has extensive and up-to-date
documentation.

Versatile
Django can be (and has been) used to build almost any type of website —
from content management systems and wikis, through to social networks
and news sites. It can work with any client-side framework, and can deliver
content in almost any format (including HTML, RSS feeds, JSON, and XML).
 Internally, while it provides choices for almost any functionality you might
want (e.g. several popular databases, templating engines, etc.), it can also be
extended to use other components if needed.

Portable
Django is written in Python, which runs on many platforms. That means that
you are not tied to any particular server platform, and can run your
applications on many flavors of Linux, Windows, and macOS. Furthermore,
Django is well-supported by many web hosting providers, who often provide
specific infrastructure and documentation for hosting Django sites.

WEBSITE
Website is a collection of web pages and related
content that is identified by a common domain
name and published on at least one web server.
Websites are typically dedicated to a particular
topic or purpose, such as news, education,
commerce, entertainment, or social networking.
Hyperlinking between web pages guides the
navigation of the site, which often starts with a
homepage.
Websites can be used in various fashions: a
personal website, a corporate website for a
company, a government website, an organization
website, etc.
Websites can be the work of an individual, a
business or other organization, and are typically
dedicated to a particular topic or purpose.
Front end and back end
For developing a fully functional website there
are two terminology,front end and back end
development.
Front end basically include the design and
overview of how a website should look like.
In front end HTML and CSS are used along with
bootstrap
Back end on the other hand is a bit more
complicated and deals with the data logs to be
saved and the functionality of the website.
For back end language like DBMS react,and php
are used for functionality of website.

Host and server

Web server or web host is a computer system
that provide web hosting.
First website is developed and tested for any
bugs and incorrection in our computer ,than it
is uploaded to the host.
Host computer have a special software
installed called as web server.
 *for testing the website locally we develop a
local environment which will behave as both
client and server
DNS domain name system
IP address used to uniquely identify the
computer over network

Application required
Apache will be used to setup a development
environment on computer.
For apace we need to install XAMPP server
which consist of apache mysql and php all in one
This app allow us to turn our personel computer
into a server for our own without actually going
onine.

Introduction to HTML
HTML ( hyper text markup language) A markup
language is human readable which means it
contains standard words rather than typical
programming syntax
Anything inside <> this is called html tags.

HTML basic code

<html>
 <head>
<title>report</title>
<body>
<h1>this is heading</h1>
<p>this is paragraph</p>
<hr/>this is used for adding horizontal line
<a
href=“http://www.google/image.com”>click
here</a>
<img src=“img.jpg”/>
</body>
</html>
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
This is a heading tag h1 is largest and size
decrease as follows

<p>
This is a paragraph tag,it defines the paragraph

<br/>
.
This is used for breaking line,it is a self closing
tag
<hr/>
Horizontal rule ,it is used to create a horizontal
line on a web page.

<a>
Link/anchor tag
This tag is used to link one page to
another ,either of same website or of different.
<div>
Division tag ,this tag is used to create division or
section on webpage
<span>
Span tag is used to style the content on a web
page
<b>,<strong>
Bold tag or strong tag is used to change the font
to bold style
<u>
Underline tag ,this tag is used to underline the
text
<img>
Image tag ,this tag is used to add image on a web
page.
<li>
 List item tag,this tag is used to create list on
webpage.

Types of list
List are of 3 types
1. Ordered list
Ordered list is a collection of related item
in some particular order <ol type=“1”>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ol> here li
is list item
Type describe the sequence or other form.

2. Unordered list
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
 Also list in list is called nested list
Ordered list in unordered list or vice versa can be
termed as nested list

3. description list <dl>

It is a collection of item with description of each
item.
 Tables

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup
> Specifies a group of one or more
columns in a table for formatting

<col> Specifies column properties for

each column within a <colgroup>
element

<thead> Groups the header content in a

table
<tbody> Groups the body content in a
table
<tfoot> Groups the footer content in a
table
 Basic table code
<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 comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Forms
<input type="text"> Displays a single-line
text input field
<input type="radio"> Displays a radio button
(for selecting one of
many choices)

<input Displays a checkbox

type="checkbox"> (for selecting zero or
more of many choices)

<input type="submit"> Displays a submit

button (for submitting
the form)

<input type="button"> Displays a clickable

button

Basic form code

INPUT
<form action="/action.page.php">
 <label for="name">First name:</label><br>
<input type="text" id="name" name="name" v
alue="John"><br>
<label for="name">Last name:</label><br>
<input type="text" id="name" name="name" v
alue="Doe"><br><br>
<input type="submit" value="Submit">
</form>

OUTPUT

css
CSS is the language we use to style an HTML
document.
CSS describes how HTML elements should be
displayed.
 HTML was NEVER intended to contain tags for
formatting a web page!
HTML was created to describe the content of a
web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes
were added to the HTML 3.2 specification, it
started a nightmare for web developers.
Development of large websites, where fonts
and color information were added to every
single page, became a long and expensive
process.
There are three ways of inserting a
style sheet:
1.External CSS
With an external style sheet, we can change
the look of an entire website by changing just
one file.
Each HTML page must include a reference to
the external style sheet file inside the <link>
element, inside the head section.
2.Internal CSS
An internal style sheet may be used if one
single HTML page has a unique style.
The internal style is defined inside the <style>
element, inside the head section
3. Inline CSS
An inline style may be used to apply a unique
style for a single element.

CSS selector
CSS selectors are used to "find" (or select) the
HTML elements you want to style.
We can divide CSS selectors into five
categories:
Simple selectors (select elements based on
name, id, class)
Combinator selectors (select elements based
on a specific relationship between them)
Pseudo-class selectors (select elements based
on a certain state)
Pseudo-elements selectors (select and style a
part of an element)
Attribute selectors (select elements based on
an attribute or attribute value)
 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:
Python Django code
 Project Details
» In this Project I made these project taking
inspiration from blog.These site is for students
who are in need for knowledge related to coding
these site contain articles about coding or blog
about coding.

» The website is consist of HTML, CSS,

BOOTSTRAP,PYTHON,DJANGO FRAMEWORK and
JINGA TEMPLATE code.

» The HTML, CSS and BOOTSTRAP part of the

code decides how the website looks, while the
DJANGO and JINGA TEMPLATE part decides how
it should functions or works.
Let’s Head to Homepage Of
website
About Me Section
#Contact Me Page
Admin Panel
 Login and signup

CONCLUSION
▪ We want to conclude that Web Designing and
Web Developing
services are must and should for all kinds of
business . Even small scale business will grow to
large extent after creating their business
website .
▪ The standard tools used for creating the
website will ensure that things such as navigation
, menus and layout conform to current practices
with which every web user is familiar with .
▪ There are many reasons building a
website requires that we obtain the
right tools and resources .
▪ 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 .