Department of Computer science

and Engineering
Session (2023-2024)

A ETE REVIEW
REPORT ON
WEB DEVELOPMENT

Submitted To: - Submitted by:

-
Vikash Kumar
 ABSTRACT

The main purpose of the study is to understand the very basics of

web designing and knowing the components of a web page. It
deals with the basic study of HTML (Hyper Text markup
Language), CSS (Cascade Style Sheets), SQL and PHP. In the
latest trends Web Designing is the very rapidly developing field
in present market and has attracted many new developers. The
report covers DOM (Document Object Model) to use HTML and
embedding CSS style sheets to it. It also covers the usage of SQL
and PHP for event handling and making the website pages look
more attractive. In the future, Web Designing will be playing a
more vital role as Internet is being used for marketing, banking,
examining, almost everything.
 CONTENTS

CHAPTER 1 History and Development

1. What is World Wide Web.

2. Evolution of WWW.
3. About W3C.

CHAPTER 2 Introduction

1. What is Web Designing.

2. Basic Principle.
3. Document Object Model.

CHAPTER 3 Creating Web Pages

1. HTML
a. Structure and
Syntax. b.HTML
Tags.

2. CSS
a. Structure and Syntax.
b.CSS Usage and
Properties.

3. SQL
a. Uses.
b.Feature
s.
 4. PHP
a. Intro.
b. History of PHP.
c.Features.

Chapter 1

History and Development

1. What is World Wide Web?
1.1 WHAT IS WORLD WIDE WEB?
o The World Wide Web (also called WWW, or W3, or
simply the Web) is an Internet-based global information
system that makes available multimedia information form
over millions of computers around the world.
o The Web is the second most popular Internet service
next to e- mail, but it accesses a larger quantity and
greater variety of data than any other service in the
Internet.
o TheWWW is a network of interactive documents and the
software to access them.
o Itprovides more information than you could ever digest
in a lifetime, linked together in various ways, available for
you to browse whenever you want.

1.2 EVOLUTION OF WWW

o The concept of World Wide Web (WWW) was developed
by Tim Berners and Lee in Switzerland at the European
Particle Research Centre (CERN) in the year 1989.
o They gave three standards to make a web page possible.
o HTTP(Hypertext Transfer Protocol): It is the way for
computers
to talk to one another over the Internet.
o HTML (Hypertext Markup Language): This describes how
to format documents so they can be transferred over the
Web. It gives the proper look to the document.
o URL(Uniform Resource Locater): By this we can give a
unique address to the document on the Web.

o Themain idea of web was to work with documents only.

But now a days, WWW-World Wide Web is a group of
computers containing documents, figures, pictures,
videos, sounds in very large collection.
o Because of the ability of web to work with multimedia
and modern programming languages, it is very fast
developing part of Internet.
oIn the month of December, 1991, a public
demonstration was given in San Antonio, Texas (USA).
o In the year 1993, the first graphical interface software
package called Mosaic was released.
oThe Mosaic was discovered by Marc Andersen,
working with National Centre of Supercomputer
Applications (NCSA).
o In
the year 1994, CERN and MIT (Massachusetts Institute
of Technology) was collaborated and created an
organization for developing web, standardizing protocols,
and interoperability between sites called World Wide Web
Consortium (W3C).

1.3 ABOUT W3C

o W3C stands for World Wide Web Consortium. It was

created in December 1994.
o W3C is working to make the Web accessible to all
users (despite differences in culture, education, ability,
resources, and physical limitations).
o Since this organizations created, hundreds of
universities
and companies have joined the consortium. Some of
them are Microsoft, IBM, America Online, Apple, Adobe,
Macromedia, Sun Microsystems.
o The WWW is maintained by W3C.
o This organization is a group of people related to
Internet development and Web page designing. This
also includes specialists form the leading companies.
o W3C is the closest anyone gets to settings the
standards for and enforcing rules about World Wide
Web.
o Web is only few years old, but it is growing at an
astounding rate. Its popularity has increased
dramatically.
o It is becoming more and more popular because it is
so easy to use, colorful, and right in content.
o Basically it is the series of interconnected
documents stored on the computer sites or the Web
sites.
o You can visit stores to buy things, transfer movies,
pictures, games and other software to your computer,
much of it free. As you move through the Web you can
read the data on almost every imaginable topic.
o On the whole, World Wide Web is becoming a
pipeline telephone, communication,
entertainment, and news-the challenging existing
technologies.
Chapter 2
 INTRODUCTION

2.1 What is Web Designing

Web design is a broad term covering many different skills
and disciplines that are used in the production and
maintenance of websites. The different areas of web
design include; web graphic design, interface design,
authoring; including standardised code and proprietary
software, user experience design and search engine
optimization. Often many individuals will work in teams
covering different aspects of the design process, although
some designers will cover them all. The term web design
is normally used to describe the design process relating
to the front-end (client side) design of a website including
writing mark up, but this is a grey area as this is also
covered by web development. Web designers are
expected to have an awareness of usability and if their
role involves creating mark up then they are also
expected to be up to date with web accessibility
guidelines.

2.2 Basic Principles

o Visitor-centric, clear purpose
o Progressive disclosure
o Displays quickly
o Browser compatible
o Intuitive navigation
o Spelling, grammar, writing
o Secure (eCommerce)
o Attractive design, easy to read
o Cultural bias? (Regional? Domestic? International?)
o No technical problems (broken links, buggy scripts)
o Maintainable (separate content from style)
o Search Engine Accessible

2.3 Document Object Model

The Document Object Model (DOM) is a cross-platform
and language-independent convention for representing
and interacting with objects in HTML, XHTML and XML
documents. Objects in the DOM tree may be addressed
and manipulated by using methods on the objects. The
public interface of a DOM is specified in its application
programming interface (API). The history of the Document
Object Model is intertwined with the history of the
"browser wars" of the late 1990s between Netscape
Navigator and Microsoft Internet Explorer, as well as
with that of
JavaScript, the first scripting languages to be widely
implemented in the layout engines of web browsers. The
DOM model can be seen below for an HTML document.

CHAPTER 3

CREATING WEB PAGES

For creating Web Pages one need to know about

some tools and technologies to be used and they
are:-
 Markup Languages
o HTML, DHTML, XML, etc....
 Cascading Style Sheets (CSS)
 Scripting languages
o javascript, php, etc....
 Web creation and editing software
 o Notepad, FrontPage, WebPage Maker,
Flash, Dreamweaver, Adobe Photoshop,
etc..

As shown in the above figure the HTML, CSS,

and java scripts form the basis of a web Page.
So, here we try to understand briefly about
these technologies.

HTML
HTML is a markup language which means it consists of
markup tags which the browser understands. HTML is
Hyper Text Markup Language and is derived from SGML
which is Standard Generalized Markup Language. It is
case Insensitive and it does not need any compiler. It is
directly understood by the browser and it displays the
requested information by the user. HTML documents are
composed entirely of HTML elements that, in their
most general form have three components: a pair of tags,
a "start tag" and "end tag"; some attributes within the
start tag; and finally, any textual and graphical content
between the start and end tags, perhaps including other
nested elements. The HTML element is everything
between and including the start and end tags. Each tag is
enclosed in angle brackets.

Structure and syntax

The structure of HTML can be understood by the following
code
which is also the syntax for making HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title> The title of your html page </title>
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>

An HTML 4 document is composed of three parts:

1. A line containing HTML version information,
2. A declarative header section (delimited by the
HEAD element),
 3. A body, which contains the document's actual content.

HTML version information

A valid HTML document declares what version of HTML is

used in the document. The document type declaration
names the document type definition (DTD) in use for the
document.

The document head

The HEAD element contains information about the current
document, such as its title, keywords that may be useful
to search engines, and other data that is not considered
document content. User agents do not generally render
elements that appear in the HEAD as content. They may,
however, make information in the HEAD available to
users through other mechanisms. Head element also
contains information about the external style sheets and
javascripts used in the document.

The document body

The body of a document contains the document's
content. The content may be presented by a user agent
in a variety of ways. For example, for visual browsers, you
can think of the body as a canvas where the content
appears: text, images, colors, graphics, etc. For audio
user agents, the same content may be spoken. Since
style sheets are now the preferred way to specify a
document's presentation, the presentational attributes of
BODY have been deprecated.

HTML Tags
HTML consists of Tags which define the type and property
for the document text to be used. Some common HTML
Tags are: -
<A> </A> Anchor element to set Hyperlinks.
<B> </B> Content is shown as bold type
<TITLE> </TITLE> Title of document.
<BODY> </BODY> The body part of the HTML document.
<BR> Force line break within paragraph.
<CENTER> </CENTER> Content is centered on page (can
include paragraphs etc.).
<DIV> </DIV> A dummy element which contains block-
level elements. It is used with style sheets.
<EM> </EM> Emphasis: text usually displayed in italics
<FONT> </FONT> Used to define characteristics of font,
according to attributes e.g. SIZE, COLOR, FACE. SIZE sets
size, 1-7 e.g. SIZE="5". COLOR sets colour of text e.g.
<FONT COLOR="#FF0000"> makes text red. FACE e.g.
FACE="Times".
<HEAD> </HEAD> The head part of the HTML document.
<H1> </H1> <H2> </H2>...<H6> </H6> Headings
(levels 1-6, i.e., H3 is a subheading within a H2
subheading).
<I> </I> Italics.
<IMG> Image. Attributes: must have SRC and ALT. SRC
gives source file for image, e.g. SRC="picture.jpg". ALT
gives brief description e.g. ALT="Picture of UB"
<LI> </LI> List item. Used within an ordered (<OL>) or
unordered (<UL>) list <OL> </OL> Ordered list. Includes
<LI> List Items, which will be numbered automatically
<P> </P> Paragraph
<SPAN> </SPAN> A dummy element which contains
in-line content. It is used with style sheets.
<STRONG> </STRONG> Text is emphasised strongly -
usually appears in bold.
<SUB> </SUB> Subscript
<SUP> </SUP> Superscript
<TABLE> </TABLE> Table.
<TD> </TD> Table data cell.
<TH> </TH> Table header cell.

CSS

Cascading Style Sheets (CSS) is a style sheet language

used for describing the presentation semantics (the look
and formatting) of a document written in a markup
language. Its most common application is to style web
pages written in HTML and XHTML, but the language can
also be applied to any kind of XML document, including
plain XML.CSS is designed primarily to enable the
separation of document content (written in HTML or a
similar markup language) from document presentation,
including elements such as the layout, colors, and fonts.
This separation can improve content accessibility, provide
more flexibility and control in the specification of
presentation characteristics, enable multiple pages to
share formatting, and reduce complexity and repetition in
the structural content (such as by allowing for table less
web design). CSS can also allow the same markup page
to be presented in different styles for different rendering
methods, such as on-screen, in print, by voice (when read
out by a speech- based browser or screen reader) and on
Braille-based, tactile devices. It can also be used to
allow the web page to display
differently depending on the screen size or device on
which it is being viewed. While the author of a document
typically links that document to a CSS style sheet,
readers can use a different style sheet, perhaps one on
their own computer, to override the one the author has
specified.

Structure and syntax

CSS has a simple syntax and uses a number of English

keywords to specify the names of various style properties.
A style sheet consists of a list of rules. Each rule or rule-set
consists of one or more selectors, and a declaration block. A
declaration-block consists of a list of declarations in braces.
Each declaration itself consists of a property, a colon (:),
and a value. If there are multiple declarations in a block, a
semi-colon (;) must be inserted to separate each
declaration. Style sheet syntax is made up of three parts
and can be shown as below:

selector
{property:
value} selector
= element.class
Example:
#label:hover
{ border-
color:blue;
}
Here Label is the selector which is a id named label
having property of border color to be blue.

CSS Usage and Properties

In CSS, selectors are used to declare which part of the

markup a style applies to, a kind of match expression.
Selectors may apply to all elements of a specific type, to
elements specified by attribute, or to elements depending
on how they are placed relative to, or nested within,
others in the document tree. Selector can be specified by:

Id (#) :- Id is the uniquely defined named of the elements

in the HTML. Example
<div id=”wrapper”></div>
Class (.):- Class is the group of element that shares the
same name and theirproperties can be set at once.
Example <div class=”main”></div>
Html tags itself:- By writing the Html tag itself and
specifying the properties andassigning their values
against them. Exapmle H1 color:blue

CSS can be implemented with the HTML content in three

ways:-

Inline:- When the properties and its values are define

in the HTML documentitself.
Internal:- When the Style properties are defined in the
header using the style tags
External:- These are separate files with .css extension
which have the stylingcodes that can be linked in the
HTML document. The linking path is defined in the
header of the HTML document and the syntax for
linking the CSS file is <link href="path/to/file.css"
rel="stylesheet">
INTRODUCTION TO PHP
WHAT IS PHP?

PHP is an open source, interpreted and object-oriented

language
i.e. executed at server side. It is used to develop web
application (an application i.e. executed at server side and
generates dynamic page).

 PHP stands for HyperText Preprocessor.

 PHP is a server side scripting language.
 PHP is an interpreted language, i.e. there is no
need for complication.
 PHP is an object-oriented language.
 PHP is an open-source scripting language.
 PHP is simple and easy to learn language.

HISTORY OF PHP:

PHP was created by Rasmus Lerdoff in 1994. It was initially

developed for HTTP usage logging and server-side form
generation.

PHP 2 (1995) transformed the language into a server-

side embedded scripting language. Added database
support, file uploads, variables, arrays, recursive
functions, conditionals, iteration, regular experssions,
etc.

PHP 3 (1998) added support for ODBC data sources, multiple

platform support, email protocols (SNMP, IMAP), and new
parser written by Zeev Suraski and Andi Gutman’s.

PHP 4 (2000) become the important component of web

server for added efficiency. The parser was renamed the
Zend Engine. Many security feature were added.

PHP 5 (2004) adds Zend Engine 2 with object-oriented

programming, robust XML support using the libxml2 library.
SOAP extension for interoperability with Web services,
SQLite has been bundled with PHP.

Features of PHP:
There are many given features of PHP.
 Performance: Script written in PHP executes much
faster then those scripts written in other languages
such as JSP&ASP
 Open-Source Software: PHP source code is free
available on the web, you can developed all the
version of PHP according to your requirement without
paying any cost.
 Platform Independent: PHP are available for WINDOWS,
MAC, LINUX & UNIX operating system. A PHP
application developed in one OS can be easily
executed in other OS also.
 Compatibility: PHP is compatible with almost all local
servers used today like Apache, IIS etc.
 Embedded: PHP code can be easily embedded within
HTML tags and script.

A PHP code:
File: hello.php

<html>

<body>

<?php echo “<h2>hello by PHP</h2>”;?>

</body>
</html>
SQL
SQL is a relational database management system which
has more than 6 million installations. SQL stands for “My
Structured Query Language”. The program runs as a server
providing multi-user access to a number of database.

USES:
SQL is used in web applications and acts as a database
component of the LAMP software stack. Its popularity for
use with web applications is closely tied to the popularity
of PHP, which is often combined with SQL. Several high
traffic websites (including Flickr, Facebook, Wikipedia,
Google, Nokia and Youtube) use SQL for data storage and
logging of user data.

FEATURES:
 A broad subset of ANSI SQL 99, as well as extension

 Cross-platform support.

 Stored procedures.

 Triggers.

 Cursors.

 Strict mode.
 Updatable views.