All aboutweb

 The Web, is a system of interlinked hypertext
documents contained on the Internet. With a
web browser, one can view web pages that
may contain
 text, images, videos, and
other multimedia and navigate between them
using hyperlinks.

S.K.Ahsan 2

Introduction
History
HTML(Hyper Text Mark Up Language)

Medium Web Application

Content Management System(CMS)

Search Engines

Web Design
Development Tools

Conclusion
S.K.Ahsan 3

 The Web, is a system of
interlinked hypertext
documents contained
on the Internet.
 With a web browser, one
can view web pages that
may contain text, images,
videos, and other
multimedia and navigate
between them using
hyperlinks.

S.K.Ahsan 4

Web
1.0

Web
2.0 Web Web 5.0
Web
4.0
3.0

S.K.Ahsan 6

Web 3.0

Web 2.0 The web 3.0 will be
known as Semantic
Web 1.0 Dynamic user- It will be fully
generated content implemented in
Static pages instead pages. 2015.
of dynamic user- Multimedia of all Massively online
generated content. types can be gaming and fully
Online guestbook’s. presented over the functional virtual
HTML forms sent inter net world
via email. Cross platform
GIF buttons, issues are reduced
typically 88x31 Introduction to E-
Business.
pixels

S.K.Ahsan 7

What is web application? Why we need web application?

A web application is an application We need web application to
that is accessed via a web browser
create communication between
over a network such
as the Internet or an intranet. users and organizations to share
resources via internet.

S.K.Ahsan 8

Inventor of world wide web(www)

Tim Berners-Lee On 25 December
1990 with the help of Robert Cailliau
and a young student at CERN,
he implemented the first successful
communication between an HTTP
client and server via the Internet.

S.K.Ahsan 10

1 2 3
The Standard SGML descended from •The SGML Declaration
Generalized Markup IBM's Generalized •The instance itself,
Language (ISO Markup Language (GML) containing the top-most
8879:1986 SGML) is an that Charles Goldfarb, element and its contents.
ISO-standard technology Edward Mosher, and •The Prolog, containing a
for defining generalized Raymond Lorie DOCTYPE declaration
markup languages for developed in the 1960s. which is known as
documents. Document Type
Definition (DTD).

S.K.Ahsan 11

Server Network Client

Web Server The network
includes describes the Client is
hardware and various concerned with
software as connectivity the web browser
well as elements and its supported
programming utilized to technologies, such
elements and deliver the as HTML, CSS
built in Web sites to and Java Script.
technologies. the user.

S.K.Ahsan 12

 A webpage is a single HTML document.
 A website is a collection of related web
pages.
 Designing a good website requires more
than just putting together a few pages

S.K.Ahsan 13

 HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is
a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web
pages

S.K.Ahsan 15

SGML

HTML
DTD
&DOM

TYPES

16

HTML

Document Object Document Type
Model(DOM) Definition (DTD)
The DOM is a W3C The set of markup
specification that gives a declarations that define
common way for a document type for
programs to access a SGML-family markup
document as a set of languages (SGML,
objects. XML, HTML)

S.K.Ahsan 17

 XML is a markup language much like
HTML
 XML was designed to carry data, not to
display data
 XML tags are not predefined. You must
define your own tags
 XML is designed to be self-descriptive
 XML is a W3C Recommendation.

S.K.Ahsan 18

 WEB DESIGN is the process of planning and
creating a website.
 Text, images, digital media and interactive
elements are used by web designers to
produce the page seen on the web browser.
Web designers utilize markup
language, most notably HTML for structure
and CSS for presentation as well
as JavaScript to add interactivity to develop
pages that can be read by web browsers.

S.K.Ahsan 21

 The History of Web Designing has evolved over a
matter of one and a half decades as of now.
 After the initial hype over the website media and a
confused phase of both developers and clients, web
communication today has evolved as one of the
most diversified and successful medium of
advertisement and knowledge outsourcing.
 However, the history of web designing germinated
from CERN, a renowned physics institute, where
Tim Berners Lee was working. The credit of
development of the WWW goes to this man.

S.K.Ahsan 23

 It was because of the need to circulate Lee's
research papers among the concerned
people that he decided to work on HTML and
browser software.
 That was the year 1993 when Mosaic web
browser had become the platform for
sharing information among the scientists of
CERN.
 Web page development as we know it today
was still unknown and graphical image
representation did not happen.

S.K.Ahsan 24

 In 1994 the W3C decides upon the rules and
standards of web development language of
HTML. Thus HTML 2, 3, and 4 was developed.
 As a whole, the process of web design can
include conceptualization, planning, producing,
post-production, research, advertising.
 The site itself can be divided up into pages.
The site is navigated by using hyperlinks, which
are commonly blue and underlined but can be
made to look like anything the designer wishes.

S.K.Ahsan 25

 Process of developing.
 Need of web designing?

S.K.Ahsan 26

 HTML
 CSS  Php
 Java script  Mysql
 Jquerry  Java
 Ajax  Xml
 Asp

S.K.Ahsan 27

 CSS stands for Cascading Style Sheets
 Styles define how to display HTML
elements
 Styles were added to HTML 4.0 to solve a
problem
 External Style Sheets can save a lot of
work
 External Style Sheets are stored in CSS files

S.K.Ahsan 29

Style
Sheets

XSL(Extensible Style
Sheet Language)
XML CSS(Cascading Style
Applied on Sheets)
Unique Tags HTML
Describe the Style
Advance data Rules of web pages
storing Simple Syntax
Reusability
Advance design

S.K.Ahsan 30

CSS 3

CSS 2 Currently under
development
CSS 1 May 1998 Rounded Corner
Superset of CSS1 Text Shadow
December 1996
Flexible Layouts Border Image
Font properties
and it used Layer Using Any
Color of text and
designing (DIV Custom Font
backgrounds
based). Multiple
Text attributes
Introduction to Backgrounds
Alignment of text,
Selectors and
images through
Tables classes.

S.K.Ahsan 31

 JavaScript was designed to add interactivity to HTML
pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming
language
 JavaScript is usually embedded directly into HTML
pages
 JavaScript is an interpreted language (means that
scripts execute without preliminary compilation)
 Everyone can use JavaScript without purchasing a
license

S.K.Ahsan 33

Java script VBScript

JavaScript was created by VBScript was introduced in
Netscape in 1995. 1996 by Microsoft.
Simple multimedia effects like Expert behavior in forums
development for websites.
image rollovers or add
Cross web browser issues.
relatively sophisticated tools. Not preferred by
Java Script can be written Web developers.
directly in
HTML.

S.K.Ahsan 34

 jQuery is a library of JavaScript Functions.
 jQuery is a lightweight "write less, do more" JavaScript library.
 The jQuery library contains the following features:
 HTML element selections
 HTML element manipulation
 CSS manipulation
 HTML event functions
 JavaScript Effects and animations
 HTML DOM traversal and modification
 AJAX
 Utilities

S.K.Ahsan 35

 AJAX = Asynchronous JavaScript and XML.
 AJAX is a technique for creating fast and dynamic web
pages.
 AJAX allows web pages to be updated asynchronously
by exchanging small amounts of data with the server
behind the scenes. This means that it is possible to
update parts of a web page, without reloading the whole
page.
 Classic web pages, (which do not use AJAX) must
reload the entire page if the content should change.
 Examples of applications using AJAX: Google
Maps, Gmail, Youtube, and Facebook tabs

S.K.Ahsan 36

 ASP is a powerful tool for making dynamic and
interactive Web pages.
 ASP stands for Active Server Pages
 ASP is a Microsoft Technology
 ASP is a program that runs inside IIS
 IIS stands for Internet Information Services
 IIS comes as a free component with Windows 2000
 IIS is also a part of the Windows NT 4.0 Option Pack
 The Option Pack can be downloaded from Microsoft
 PWS is a smaller - but fully functional - version of IIS
 PWS can be found on your Windows 95/98 CD

S.K.Ahsan 38

 PHP stands for PHP: Hypertext Preprocessor
 PHP is a server-side scripting language, like
ASP
 PHP scripts are executed on the server
 PHP supports many databases (MySQL,
Informix, Oracle, Sybase, Solid, PostgreSQL,
Generic ODBC, etc.)
 PHP is an open source software
 PHP is free to download and use

S.K.Ahsan 39

PHP ASP.NET

Hypertext Preprocessor Developed The initial prototype was called
by Rasmus Lerdorf. "XSP“ but it became afterwards
This was written in C language Active Server Pages (ASP)
influenced by PERL 1994. technology.
Open Source Language. It is built on the Common
It is a CGI(Common Gateway Language Runtime (CLR).
Interface ) scripting Language. Abnormal Behavior with
HTML+CSS.

S.K.Ahsan 40

What is web browser?

A Web browser is a software An information resource is identified by
a Uniform Resource Identifier (URI)
application for retrieving, presenting,
and may be a web page, image, video, or
and traversing information resources on
other piece of content. a Uniform
the World Wide Web. Resource Locator (URL) is a subset of
the Uniform Resource Identifier
(URI).

S.K.Ahsan 42

Web Browser

First Browser was Mosaic
by NCSA(National Center
for Supercomputing
Applications).
oReleased on 22 April
1993.
oUnix 2.6 , Windows 3.0
Mac OS.
oCross-platform
oWritten in C

S.K.Ahsan 43

large number of
people to contribute
A Content Management System to and share stored
(CMS) is a collection of procedures data
used to manage work flow in a Improve
communication
collaborative environment. These Aid in easy storage
procedures can be manual or and retrieval of data
computer-based.  Reduce repetitive
duplicate input
Improve the ease of
report writing

S.K.Ahsan 45

CMS
Document
Management
Enterprise System Mobile
Web CMS
CMS CMS

ECMS WCMS DMS MCMS

S.K.Ahsan 46

 Test it in-house.

 Test it on a sample audience.

S.K.Ahsan 47

 Layout of web pages is very important
 Poor layout makes for -
 Difficult navigation
 Hard to locate information on page
 Visually unappealing

S.K.Ahsan 48

 Use tables to lay out your pages!
 Make the table borders invisible
 A 2x2 table works well

S.K.Ahsan Mr.Khan 49

logo Header

 Content
Menu

S.K.Ahsan 50

Graphics attract more user.

51

 Dates need to be correct
 Services need to be up-to-date
 Hours must be correct
 People’s names, email addresses &
phone numbers need to be correct
 Prices need to be correct
 Explore new technologies & encourage
innovation

S.K.Ahsan 52

 Well-organized
 Easy to navigate
 Attractive
 Useful
 Up-to-date

S.K.Ahsan 53

This document is “living” …in the past.

54

An example of a very unattractive site (best viewed online).

55

Avoid backgrounds that wash out your text.

56

 If you are unique, you’re already useful!
 If you are not unique, how do you differ
from similar Web sites?
 Is your content unique?
 Is your approach unique?
 Is your audience unique?
 Are you more up to date?
 Are you better organized?
 Are you more comprehensive?

S.K.Ahsan 57

 Hierarchical organization
 Image maps
 Tables
 Frames

S.K.Ahsan 58

 Menus in progressive order of most
general to more specific
 Pros
 always gives impression of organization
 Cons
 Not really necessary unless you have a
collection of something
 Makes user travel through a number of
levels to get to their information

S.K.Ahsan 59

Imagemaps can provide easy means of navigation.

60

 Standard text, images or links are
arranged in tabular format with or
without borders
 Pros
 Allows creator to place items on a page
 Looks neat
 Cons
 Can be tricky, but tables are amazingly
useful to the designer.

S.K.Ahsan 61

 Use in a site that rarely, if ever, goes out
to other links on the World Wide Web.
 Use a frame to hold a static banner at
the top or bottom.
 Use a frame to hold a navigation bar at
the top, side or bottom of your Web site.

S.K.Ahsan 62

Test text colors against background colors.

63

 Avoid having more than one spinning,
whirling, clicking, moving icon or graphic
on a page.
 Make hyperlinks intuitive so as to avoid
the click here text..

S.K.Ahsan 64

 For example…
 Provide white space for easy readability
 Limit font usage and typeface usage
 Limit text column width
 Balance graphics and text on a page
 Use complimentary colors with contrast
 Standardize on a heading font and text font
 Balance the page layout with top/bottom and
right/left margins

S.K.Ahsan 65

 Banner graphics
 Signature icons
 Links to local home pages

S.K.Ahsan 66

Search Engine How a Search Engine work ?
A web search engine is a tool designed Web search engines work by storing
to search for information on the World information about many web pages, which
Wide Web. The search results are they retrieve from the html itself.. The
contents of each page are then analyzed to
usually presented in a list of results and
are commonly called hits. determine how it should be
indexed.

S.K.Ahsan 68

1993 1998 2003 2009

S.K.Ahsan 69

Markup
Style sheet
languages languages

Database Web Design
Mangement Cycle

Client-side
scripting
Server-side
scripting

70

Adobe Dreamweaver
CS6

Visual Studio 2008/2010

Joomla

S.K.Ahsan 72

All aboutweb

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie All aboutweb

Ähnlich wie All aboutweb (20)

Mehr von International Islamic University

Mehr von International Islamic University (20)

All aboutweb