ankit pdf
ankit pdf
ankit pdf
Among web professionals, "web development" usually refers to the main non-
design aspects of building web sites: writing markup and coding. Web
development may use content management systems (CMS) to make content
changes easier and available with basic technical skills.
Web development can range from developing a simple single static page
of plain text to complex web-based internet applications (web apps), electronic
businesses, and social network services. A more comprehensive list of tasks to
which web development commonly refers, may include web engineering, web
design, web content development, client liaison, client-side/server-side
DEFINATION: Web development is the work involved in developing a web site for the
Internet (World Wide Web) or an intranet (a private network).
1
The Goals of Web Development:
One of the greatest advances in technological tools has been the use of the
Internet, due to its rapid reception, its transfer speeds and the effectiveness
of resources, since access to its different applications is almost immediate,
information of any content can be found
, in any class and of any kind, it is important to set clear goals and
objectives, in the creation of websites defining the service and use that will
be given to the information, having a clear vision of the type of audience that
will host these pages and will be potential users of them.
Currently the development and creation of websites is imposed on the world
as a technological tool to unite the regions, create businesses, support
companies, be displayed in the market and infinity of applications according
to the perspectives of people and their scope, finding on the internet, a vital
source of job creation, efficient and intelligent businesses and great help in
achieving objectives and approaches.
Web development in recent decades has been transforming and driving the
evolution of the Internet, every day greater progress on this issue, directly
involving the ingenuity of the developer on the subject.
2
In order for websites to be dynamic and efficient, very specific and relevant
aspects must be taken into account for the proper use of this technology,
both the technical part and the use of external resources, it is not the same to
see a website in the city where data transfer resources are high to visualize it
in rural environments where resources are limited or nonexistent, this is one
of the great risks that are faced, which can lead to losing interest in it
because it is not accessible , so the planning is vital for the good
performance of the same in environments of different characteristics being
just one of the problems that can affect the creation of a website.
The implementation of new updates, allow developers to be proactive in the
solution and implementation of new designs more effective and competitive,
leading by new directions in search of a final product according to the needs
of each new user, where the marketing of These pages require web designers
innovation in creation. You should have ideas that awaken in the users an
interest when exploring these proposals.
The stages of development of current websites and their programming
languages are very complex because of their extensive and varied code.
Therefore, it is necessary to know tools that are currently available to
dynamically develop web pages.
For the initiation of website design it is very important to have knowledge
bases in the use of the programming language, both in HTML and other
tools such as PHP, JAVA- SCRIPT, Dreamweaver, among others. They are
a very interesting tool that induces joint work in the wonderful world of web
page design, with the appropriation and correct handling of the tools, you
can get to operate innovative and creative designs when marketing and
offering the products made.
3
WEB DEVELOPMENT OVERVIEW
There are two broad divisions of web development –
(1) Front-end development (also called client-side development)
(2) Back-end development (also called 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.
CSS – By itself, HTML is quite plain. HTML does provide some basic
style options, but to build a good frontend, developers must have experience
with CSS. CSS provides the paint, templates, glitter, buttons, tassel, lights,
and many other things that can be used to improve the presentation of a web
page. CSS is so commonly used that languages have
JavaScript – If you could only learn one language in your lifetime, you’d
be well- advised to choose JavaScript. Though it’s not exclusively a
frontend language, that’s where it’s most commonly used. JavaScript is a
language that is run on a client machine,
i.e. a user’s computer. This means that JavaScript can be used to program
fast, intuitive .
4
Here’s an example. Say you log into your Facebook account, and you are
greeted with the latest updates in your News Feed. They’re not going to be
the same updates that you saw yesterday.
How did the page change? Did a Facebook employee manually edit the
page to update your news feed? Of course not. A script on the Facebook
back-end would have received the updates and re-generated the front-end
Back-end scripts are written in many different coding languages and frameworks, such
as…
PHP
Ruby on Rails
ASP.NET
Perl
Java
Node.js
Python
5
work will be done on the backend. Backend code is run on the server, as
opposed to the client. This means that backend developers not only need to
understand programming languages and databases, but they must have an
understanding of server architecture as well. If an application is slow, crashes
often, or constantly throws errors at users, it’s likely because of backend
problems.
Backend development is not all ones and zeros though. Much like frontend
development, backend development has a human aspect to it as well. Since
most of the code for an
6
INTRODUCTION TO HTML
Basics of HTML
Syntax:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
Syntax Explained:
7
Paragraphs Tag: The <p> tag defines a paragraph. Browsers automatically
add some space (margin) before and after each <p> element. The margins
can be modified with CSS (with the margin properties).
Line Breaks: The <br> tag inserts a single line break. The <br> tag is an
empty tag which means that it has no end tag.
Headings: Headings are defined with the <h1> to <h6> tags.<h1> defines
the most important heading. <h6> defines the least important heading.
Strong and Emphasized text: The <em> tag is a phrase tag. It renders as
emphasized text. The <strong> tag defines important text.
Html Formatting Tag: HTML uses tags like <b> and <i> for
formatting output, like bold and italic text respectively.
HTML Lists
Unordered HTML Lists: 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).
Ordered HTML Lists: An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag. The list items will be marked with numbers.
HTML Images: In HTML, images are defined with the <img> tag. The
<img> tag is empty, it contains attributes only,
8
HTML Links: HTML links are hyperlinks. A hyperlink is an element, a
text, or an image that you can click on, and jump to another document.
HTML Tables: Tables are defined with the <table> tag. Tables are divided
into table rows with the <tr> tag. Table rows are divided into table data
with the <td> tag. A table row can also be divided into table headings with
the <th> tag.
HTML Forms:
HTML forms are used to pass data to a server. An HTML form can contain
input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select lists, textarea, fieldset, legend, and
label elements. The <form> tag is used to create an HTML form:
<form>
input elements
</form>
The Input Element: The most important form element is the <input> element.
The
<input> element is used to select user information. An <input> element can
vary in many ways, depending on the type attribute. An <input> element can
be of type text field, checkbox, password, radio button, submit button, and
more. The most common input types are described below:
<input type="text"> defines a one-line input field that a user can enter text into:
Example:
<form>
9
Output:
Example:
<form>
Password: <input type="password" name="pwd">
</form>
Output:
Example:
<form>
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female
</form>
Output:
10
Checkboxes Buttons: <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
Example:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br/>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Output:
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example:
11
Output:
HTML Links
Example:
Output:
12
CASCADING STYLE SHEETS
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 andvariations in display for different devices and screen sizes.
<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.
13
Inline CSS
I have not mentioned them until now because in a way they defeat the
purpose of using CSS in the first place. Inline styles are defined right in the
(X)HTML file alongside the element you want to style.
See example below.
<html>
<head>
</head>
<body>
<p style=”color:blue”>hello</p>
<h1 style=”font-family:arial”>Baby</h1>
</body>
</html>
Internal Css
First we will explore the internal method. This way you are simply placing
the CSS code within the <head></head> tags of each (X)HTML file you
want to style with the CSS.
The format for this is shown in the example below.
<html>
<head>
<style
> h1{
Color:blue;
Font-family:Times new Roman;}
</style>
</head>
<body>
<h1>HTML stands for Hyper Text markup language</h1>
</body>
</html>
14
the .css file extension. You can link to the file externally by placing one of
the following links in the head section of every (X)HTML file you want to
style with the CSS file.
By using an external style sheet, all of your (X)HTML files link to one CSS
file in order to style the pages. This means, that if you need to alter the design
of all your pages, you only need to edit one .css file to make global changes
to your entire website. Here are a few reasons this is better.
(1) Easier Maintenance
(2) Reduced File Size
(3) Reduced Bandwidth
(4) Improved Flexibility
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
15
p{
color: red;
text-align: center;
}
Output:
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
Note: The universal selector (*) selects all HTML elements on the page.
Example The CSS rule below will affect every HTML element on the page:
*{
text-align:
center; color:
blue;
}
16
JAVASCRIPT
JavaScript was released by Netscape and Sun Microsystems in 1995.
However, JavaScript is not the same thing as Java.
Why JavaScript ?
Web pages are not the only place where JavaScript is used. Many desktop
and server programs use JavaScript. Node.js is the best known. Some
databases, like MongoDB and CouchDB, also use JavaScript as their
programming language.
Uses of JavaScript
• Use it to add multimedia elements
With JavaScript you can show, hide, change, resize images, and create image
rollovers. You can create scrolling text across the status bar.
• Create pages dynamically
Based on the user's choices, the date, or other external data, JavaScript can
produce pages that are customized to the user.
• Interact with the user
It can do some processing of forms and can validate user input.
17
Writing JavaScript
JavaScript code is typically embedded in the HTML, to be interpreted
and run by the client's browser. Here are some tips to remember when
writing JavaScript commands.
• JavaScript code is case sensitive
• White space between words and tabs are ignored
• Line breaks are ignored except within a statement
• JavaScript statements end with a semi colon (;)
document.getElementById("demo").style.fontSize = "35px";
document.getElementById("demo").style.display = "none";
18
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
JavaScript in <head>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"Paragraph After.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">Paragraph Before</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Output:
19
External javascript
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different
web pages. JavaScript files have the file extension .js. To use an external
script, put the name of the script file in the src (source) attribute of a <script>
tag:
Example
<script src="myScript.js"></script>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is
located. External scripts cannot contain <script> tags.
To add several script files to one page - use several script tags:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
External References
External scripts can be referenced with a full URL or with a path relative to
the current web page. This example uses a full URL to link to a script:
Example
<script src="https://www.w3schools.com/js/myScript1.js"></script>
20
PHP (HyperText Pre-Processor):
What is PHP?
PHP files can contain text, HTML, CSS, JavaScript, and PHP code
PHP code are executed on the server, and the result is returned to the
browser as plain HTML
PHP files have extension ".php"
21
With PHP you are not limited to output HTML. You can output images, PDF
files, and even flash movies. You can also output any text, such as XHTML
and XML.
Why PHP?
PHP 7 is much faster than the previous popular stable release (PHP 5.6)
PHP 7 has improved Error Handling
PHP 7 supports stricter Type Declarations for function arguments
PHP 7 supports new operators (like the spaceship operator: <=> )
22
A PHP script is executed on the server, and the plain HTML result is sent
back to the browser.
A PHP script can be placed anywhere in the document. A PHP script starts
with <?php and ends with ?>:
<?php
// PHP code goes here
?>
The default file extension for PHP files is ".php". A PHP file normally
contains HTML tags, and some PHP scripting code. Below, we have an
example of a simple PHP file, with a PHP script that uses a built-in PHP
function "echo" to output the text "Hello World!" on a web page:
Example
<!DOCTYPE html>
<html>
<body>
<?php
echo "Hello World!";
?>
</body>
</html>
23
PHP Case Sensitivity
In PHP, NO keywords (e.g. if, else, while, echo, etc.), classes, functions, and
user-defined functions are case-sensitive. In the example below, all three
echo statements below are equal and legal:
Example
<!DOCTYPE html>
<html>
<body>
<?php
ECHO "Hello
World!<br>"; echo
"Hello World!<br>";
EcHo "Hello
World!<br>";
?>
</body>
</html>
Look at the example below; only the first statement will display the value
of the $color variable! This is because $color, $COLOR, and $coLOR are
treated as three different variables:
Example
<!DOCTYPE html>
<html>
<body>
<?php>
</body>
</html>
24
Project Discussion and Snapshot
Today Online Examination System has become a fast growing examination
method because of its speed and accuracy. It is also needed less manpower
to execute the examination. Almost all organizations now-a-days, are
conducting their objective exams by online examination system, it saves
students time in examinations. Organizations can also easily check the
performance of the student that they give in an examination. As a result of
this, organizations are releasing results in less time. It also helps the
environment by saving paper.
According to today’s requirement, online examination project in php is
very useful to learn it.
25
The user will automatically get the updated version by logging
using the user ID and Password provided at the time of registration.
No need of reprinting, appearance, vigilance and the job is done.
Project objective:
Online examination system is a non removable examination pattern of
today’s life. We need more time saving and more accurate examination
system as the number of applicants is increasing day by day. For all IT
students and professionals, it is very important to have some basic
understanding about the online examination system.
TECHNOLOGIES USED:
1. Tools to Be Used
Database design:- MySQL
Website design:- Bootstrap with Custom Designing using CSS3, Wordpress
Coding(logic):- PHP and JavaScript
Server:- XAMPP
Platform:- Windows
Application:-Notepad++
26
2. Requirements and setting up system for PHP development
What we need to know:
Designing part of the website is done with the help of Bootstrap 4.0
and CSS3 and for the database designing we use My SQL
What we need to have (System Requirements):
To run Website we need a browser and to code we need application
like Notepad++,atom, etc.
SOFTWARE REQUIREMENTS
1. Software Requirements
Initially we need to have a development machine that is running any of
the following operating systems:
Windows XP, Vista, Windows 7, 8
Development environment (Notepad++).
XAMPP server.
2) Registration Page
28
3) LogIn page for an Adminstrator
4) Dashboard for creating the test with Test_name and Description about the test
29
5) Creating Multiple Choice Questions
30
7) Result Page after giving the online test
31
CONCLUSION
From this summer training and the project, we are able to experience a technology
which is Web Development. We are confident enough to tack the real-life problems
These days, every business realizes the need for having a website and are putting in
efforts to design and develop the best site for taking their products or services
online. This is where we can see a great deal of scope for web development and
design
With the tremendous progress in the launch of websites, people who can
create exemplary designs and platforms for their online presence is what
businesses are searching for. Web developers and designers are bringing in all
the best of their technical expertise and skills to develop and unique design
Most web developers and designers are familiar with the latest tools, techniques,
technologies, and frameworks that will help them get beautiful sites up in a short
32
REFERENCES
1. Kamal Acharya. School management system project report. Authorea. August 01, 2024. DOI:
https://doi.org/10.22541/au.172254873.34023165/v1
2. Kamal Acharya. A CASE STUDY OF CINEMA MANAGEMENT SYSTEM
PROJECT. Authorea. August 01, 2024. DOI:
https://doi.org/10.22541/au.172254873.30191075/v1
3. Kamal Acharya. A CASE STUDY ON ONLINE TICKET BOOKING SYSTEM
PROJECT. Authorea. August 01, 2024. DOI:
https://doi.org/10.22541/au.172254872.26972790/v1
4. Kamal Acharya. Web chatting application project report management system. Authorea. August
01, 2024. DOI: https://doi.org/10.22541/au.172254871.18588592/v1
5. Kamal Acharya. RETAIL STORE MANAGEMENT SYSTEM PROJECT
REPORT. Authorea. August 01, 2024. DOI: https://doi.org/10.22541/au.172254871.14590154/v1
6. Kamal Acharya. SUPERMARKET MANAGEMENT SYSTEM PROJECT
REPORT. Authorea. August 01, 2024. DOI: https://doi.org/10.22541/au.172252491.19145062/v1
7. Kamal Acharya. SOCIAL MEDIA MANAGEMENT SYSTEM PROJECT
REPORT. Authorea. August 01, 2024. DOI: https://doi.org/10.22541/au.172252491.11210579/v1
8. Kamal Acharya. Online music portal management system project report. Authorea. August 01,
2024. DOI: https://doi.org/10.22541/au.172252488.89734698/v1
9. Kamal Acharya. COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT. Authorea. July
31, 2024. DOI: https://doi.org/10.22541/au.172245277.70798942/v1
10. Kamal Acharya. AUTOMOBILE MANAGEMENT SYSTEM PROJECT REPORT. Authorea. July
31, 2024. DOI: https://doi.org/10.22541/au.172245276.67982593/v1
11. Kamal Acharya. Ludo management system project report. Authorea. July 31, 2024. DOI:
https://doi.org/10.22541/au.172243999.98091616/v1
12. Kamal Acharya. Literature online quiz system project report. Authorea. July 31, 2024 DOI:
https://doi.org/10.22541/au.172243825.53562953/v1
13. Kamal Acharya. Avoid waste management system project. Authorea. July 29, 2024. DOI:
https://doi.org/10.22541/au.172228528.85022205/v1
14. Kamal Acharya. CHAT APPLICATION THROUGH CLIENT SERVER MANAGEMENT SYSTEM
PROJECT. Authorea. July 29, 2024. DOI: https://doi.org/10.22541/au.172228527.74316529/v1
15. Acharya, Kamal, Online Job Portal Management System (May 5, 2024). Available at
SSRN: https://ssrn.com/abstract=4817534 or http://dx.doi.org/10.2139/ssrn.4817534
33
S Table of Contents Pages
N
0 0
View publication stats