Web Design

and
Development
 World Wide Web
World Wide Web (WWW
or W3), collection of
globally distributed text
and multimedia
documents and files
 How web works

1. A user enters a URL into a

browser (for example,
http://www.google.com/index.
html). This request is passed to
a domain name server.
2. The domain name server
returns an IP address for the
server that hosts the Web site
(for example, 212.64.250.250).
3. The browser requests the page
from the web server using the
IP address specified by the
domain name server.
4. The web server returns the
page
5. The browser displays the web
page on user’s PC
 Important Concepts
The Browser
Software running on your PC like
1. Internet Explorer
2. Netscape
3. Firefox
 Renders (displays) the pages
on screen
 Executes embedded scripts
 Automatically invokes
additional software as needed
.
 Important Concepts
Web Server
 A computer program that is responsible for
accepting HTTP requests Web browsers, and sending
responses which usually are Web pages such as
HTML documents and linked objects (images, etc.).
Web Page
 A Web page is a text document embedded with
HTML tags that define how the text is rendered on
screen. Web pages can be created with any text
editor or word processor. They are also created in
HTML authoring programs (like FrontPage,
DreamWeaver) that provide a graphical interface for
designing the layout
 Important Concepts
Caching
Browsers save all web
resources (images etc) on the
local hard drive
An HTTP request will be sent
by the browser that asks for
the data only if it has been
updated since the last
download
If it has not, the cached
version will be reused in the
rendering step.
 Important Concepts
Static web page
The contents of the page never
change, regardless of user or
request
Dynamic web page
Content (text, images, form
fields, etc.) on a web page can
change, in response to different
contexts or conditions.
1. Client Side
2. Server Side
 Important Concepts
Client-side
The Client-side dynamic
content is generated on the
client's computer.
The web server retrieves the
page and sends it as is.
The web browser then
processes the code embedded
in the page (normally
JavaScript) and displays the
page to the user.
 Important Concepts
Server-side
1. The browser sends an HTTP request.
2. The server retrieves the requested
script or program.
3. The server executes the script or
program which typically outputs an
HTML web page. The program
usually obtains input from the query
string or standard input which may
have been obtained from a
submitted web form.
4. The server sends the HTML output
to the client's browser
5. PHP, Perl, ASP or ASP.NET, JSP
 Imaging for the web

Image file size and quality

JPEG (Joint Photographic Experts Group)
 lossy format
 relatively small file sizes
 JPEG is designed for compressing either full-colour
(24 bit) or grey-scale digital images of "natural"
(real-world) scenes.
GIF Graphics Interchange Format
 lossless
 compresses at a ratio of between 3:1 and 5:1
 8 bit format - 256 colors
 Small file size with limited colors
 The GIF format supports animation and is still widely
used to provide image animation effects
 Imaging for the web
PNG (Portable Network
Graphics)
 lossless

 supports true color (16

million colors)
BMP (bit mapped)
 large file size - no
compression
 not suitable for web pages
 Comparison
 JPEG is good for storing full-color or grey-
scale images of "realistic" scenes; that
means scanned photographs and similar
material.

 Not good for images with very sharp edges:

a row of pure-black pixels adjacent to a row
of pure-white pixels

 GIF images with only a few distinct colors,

such as line drawings and simple cartoons.

 PNG excels when the image has large areas

of uniform color. The lossless PNG format is
best suited for editing pictures.
 Quality Web Design

Contents
Think Before You Write
1. Highlight the benefits of the
product.
2. Explain how it differs from
other products.
3. Persuade customers to buy
it.
 Quality Web Design

 Make Your Content

Informative
 Features And Benefits
 Proofread And Spell Check
 Never Post Your First Draft
 Accessibility
 ALT text descriptions
 Avoid text images
 Graphs and charts
 Page Layout With Tables
 Table summaries and captions
 Color And Design Choices
 Color combinations
 Font size and family
 Avoid blinking animation
 Accessibility
 Valid HTML Code
 Remove browser-specific
code
 Accessible Form Design