WEB

APPLICATION
DEVELOPEMEN
T
I-Year I-sem
R2023
 UNIT 1-Introduction to Web Design

History of the Web - Introducing HTML Document structure -

Web Browsers - Getting Started in Web Design - How the Web
Works - Web site design principles - application and development
tools - Overview of HTTP – Using Cookies- Exploring the web
technologies – About IIS – Administer Webserver remotely -
Creating Web sites
 History of Web and Internet
• The World Wide Web is a system of interlinked hypertext
documents accessed via the Internet. Web is a huge collection of
pages of information linked to each other around the globe.
History of WWW:

• WWW was created by Sir Tim Berners Lee in 1989 at CERN in Geneva.
• In 1990 , the first text only browsers were set up and CERN scientists
could access hypertext files and other information at CERN.
• HTML was based on a subset of the standard generalized markup
language (SGML). To transfer HTML documents to remote sites a new
protocol was devised called HTTP (Hyper Text Transfer Protocol).
• In the fall of 1991, conferences around the world started
hearing about the promise but sparks still were not
flying.
• In 1993, there were only about 50 websites worldwide.
•A browser that allowed users to take advantage of the
web’s graphical capabilities was developed at the
National center for Super Computing application (NCSA) .
• NCSA called the browser Mosaic.
Web Browser
 Definition

What is a Web Browser?

In simple Words a web browser is

a program used to Interpret and
view HTML documents.
OR
A web browser is a software
application for retrieving,
presenting, and traversing
information resources on the
 History
How all this started?

 The first web browser was invented in 1990 by Sir Tim Berners-Lee. It was called
WorldWideWeb (no spaces) and was later renamed Nexus.

 In 1993, browser software was further innovated by Marc Andreessen with the release of
Mosaic (later Netscape)

 Microsoft responded with its Internet Explorer in 1995, also heavily influenced by Mosaic,
initiating the industry's first browser war.

 Opera debuted in 1996.

 January 1998 was also the month that Netscape started the open source Mozilla project.

 Google's Chrome, the most recent major entrant to the browser market, first released
in September 2008.
 How Browser
Work?
 The browser main functionality is to present the web resource you
choose, by requesting it from the server and displaying it on the
browser window.
 The resource is usually an HTML document, but may also be a PDF,
image,
or other type.
 The location of the resource is specified by the user using a URI
(Uniform resource Identifier).
 As You Write URL and hit GO button browser program sends a
request (Could I have the web page please?) to a web server program
running on the remote computer.
 How Browser Cont
d.

Work?

 If server was able to locate the web page, it sends the HTML file to
the web browser.
 The browser picks up all the information coming in from the server
and does its best to display the web page.
 A typical web page not only has text but also images and these are
separate
files that need to be transferred from the server to the browser.
 The browser-server communication goes on till all the files
have been transferred to the browser.
 After that Browser-server connection is disconnected and Web
 Add-
Ons?

 Add-ons, also known as ActiveX controls, browser extensions

can improve your experience on a website by providing
multimedia or interactive content, such as animations.
 They help our browser program to communicate with some
special type of Internet Files like Adobe shockwave player is
needed to watch videos online.
History And Some
Information Of
Popular Browsers?
 WorldWideWeb

1st Browser
made

1 Created by Sir Tim

Berners- Lee.

2 First version came in 1990.

To remove confusion It
3
was later renamed as
Nexus.
Templates
Your own sub
headline

Templates Templates

This is an example text. Go ahead tThis is an example text. Go ahead

1 and replace it with your own text. 2 and replace it with your own text.
This is an example text. Go ahead tThis is an example text. Go ahead
and replace it with your own text. and replace it with your own text.
This is an example text. Go ahead This is an example text. Go ahead
and and
replace it with your own text. replace it with your own text.

Your own Your

footer Logo
 Mosaic

What after
WorldWideWeb(Nexus)

Browser software was

1
further innovated by
Marc Andreessen.

2 First version came in 1993.

In 1994, he made his

3
company Netscape and
changed mosaic into
Netscape Navigator.
 Internet Explorer

First Browser War

started…

Microsoft licensed Mosaic

1
from Spyglass as the basis
of Internet Explorer 1.0.

2 First version came in 1995.

3 And thus it all

started...
 Opera

A new Entry in Browser’s

war

Development of Opera web

1
browser began in 1994 when
it was started as a research
project at Telenor.

In 1995, the project

2
branched out into a
separate company named
Opera Software ASA.

First publicly available

3
version released in 1996.
 Mozilla

Mozilla is
formed…

1
Netscape starts the open
source
Mozilla project.

It was produced to
2 build a competitive
open source browser.

3 First release was in

2004.
 Safari

Steve Jobs enters in Browser

market

Until 1997, Apple Macintosh

1
computers were shipped with
the Netscape Navigator.

Later for Mac OS Internet

2
Explorer is used as default
browser.

On January 7, 2003, at San

3
Francisco, Steve Jobs
announced Safari.
 Chrome

Browser war
Intensifies

1 A free Web Browser

developed
by Google.

It uses the same Engine

2
which is used by Apple’s
Safari i.e. Web Kit

It was first released as a

3
beta version for Microsoft
Windows on September 2,
2008.
Some
Statistics
Who is #1…

Your own Your

footer Logo
HTML
 History of HTML

1991 HTML first published

1995 HTML 2.0

After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards

than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.

Though HTML5 was published officially in 2012, it

2012 HTML5
has been in development since 2004.
 HTML is the standard markup language for
creating Web pages.

What is HTML?
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the content
•HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
 What is HTML5?

HTML5 is the newest version of HTML, only recently gaining partial support by the
makers of web browsers.

It incorporates all features from earlier versions of HTML, including the stricter
XHTML.

It adds a diverse set of new tools for the web developer to use.

It is still a work in progress. No browsers have full HTML5 support

 A Simple HTML
Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document

•The <html> element is the root element of an HTML page

•The <head> element contains meta information about the HTML page

•The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)

•The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.

•The <h1> element defines a large heading

•The <p> element defines a paragraph

HTML elements(Tags)
Tag Name Purpose

<i> to write the content in italic format

<u> to set the content underline

<a> to link one page to another page
<ol>, <ul>, <li> to list the content(ordered / unordered)
<br> to break the line
<img> to add image element in html document

<link> to link the content from external source

<hr> to display the horizontal line in html document

to specify the page description. For example: last
<meta>
modifier, authors, … etc.
<form>,<input>,
to create html form for ser
<select>,<option>
<html>
<head>
<title> Font </title>
<body>
<p>
<font face="Arial" color="red"><br>
Html is used to create a web page
</font>
<font face="Times New Roman" color="blue"><br>
Html is used to create a web page
</font>
<font face="Verdana" color="green"><br>
Html is used to create a web page
</font>
</p>
</body>
</html>
Note: Some HTML elements have no content (like the <br> element).

These elements are called empty elements. Empty elements do not

have an end tag!
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:
HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

HTML Links
HTML links are defined with the <a> tag:
HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:
<html>
<body>
<h1> unordered list</h1>
<ul>
<li> CSE</li>
<li> ECE</li>
<li> EEE</li>
</ul>
<h1> ordered list</h1>
<ol>
<li> CSE</li>
<li> ECE</li>
<li> EEE</li>
</ol>
</body>
</html>
CSS-CASCADING STYLE SHEET
CSS is the language we use to style a Web page.

What is CSS?
•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

Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
WHY CSS?
•CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
•Easy Maintenance: To make a global change simply change the style,
and all elements in all the webpages will be updated automatically.
•Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
•Superior styles to HTML: CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
•Offline Browsing: CSS can store web applications locally with the help
<!DOCTYPE html>
<html>
<head>
<style>
body { <body>
background-color: lightblue;
}
<h1>My First CSS Example</h1>
h1 { <p>This is a paragraph.</p>
color: white;
text-align: center; </body>
}
</html>
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
OUTPUT
<!DOCTYPE html>
<html>
<head> <body>
<style>
h1 { <h1>CSS background-color example!</h1>
background-color: green; <div>
} This is a text inside a div element.
<p>This paragraph has its own background
div { color.</p>
background-color: lightblue; We are still in the div element.
} </div>
p{ </body>
background-color: yellow; </html>
}
</style>
</head>
Using CSS
CSS can be added to HTML documents in 3 ways:
•Inline - by using the style attribute inside HTML elements
•Internal - by using a <style> element in the <head> section
•External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to
red:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
 Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page)
to blue,and the text color of ALL the <p> elements to red.

In addition,the page will be displayed with a "powderblue" background color:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css"
>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
The external style sheet can be written in any text
editor. The file must not contain any HTML code, and
must be saved with a .css extension.
Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You
will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
HTML Table -
Colspan
<!DOCTYPE html> <table style="width:100%">
<html> <tr>
<head> <th
<style> colspan="2">Name</th>
table, th, td { <th>Age</th>
border: 1px solid black; </tr>
border-collapse: collapse; <tr>
} <td>Jill</td>
</style> <td>Smith</td>
</head> <td>43</td>
<body> </tr>
<tr>
<h2>Cell that spans two <td>Eve</td>
columns</h2> <td>Jackson</td>
<p>To make a cell span more <td>57</td>
than one column, use the </tr>
colspan attribute.</p> </table>
Cell that spans two columns
To make a cell span more than one column, use the colspan
attribute.

Name Age

Jill Smith 43

Eve Jackson 57
HTML Table -
Rowspan
<!DOCTYPE html> table style="width:100%">
<html> <tr>
<head> <th>Name</th>
<style> <td>Jill</td>
table, th, td { </tr>
border: 1px solid black; <tr>
border-collapse: collapse; <th
} rowspan="2">Phone</th>
</style> <td>555-1234</td>
</head> </tr>
<body> <tr>
<td>555-8745</td>
<h2>Cell that spans two rows</h2> </tr>
<p>To make a cell span more than </table>
one row, use the rowspan </body>
attribute.</p> </html>
Cell that spans two rows
To make a cell span more than one row, use the rowspan attribute.

Name Jill

555-1234
Phone
555-8745
FRAMES

<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset
cols="25%,50%,25%">
<frame src="list.html" >
<frame
src="onlinebus.html">
<frame src="font.html">
</frameset>