Muhmmad Asif/handout1 1|Page Web Design And development

Learning Objective:
 Web designing
 Web development
 Client side
 Server side
 HTML

History of Web Designing

 he History of Web Designing has evolved over a matter of one and a half decades as of now.
Website designing was previously a matter of debate as to whether it was he job of a
programmer or a designer. 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 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 o this man.

STAGE 1:

 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. So the initial stage of web page development
is synonymous to web browser development. 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. The web page could only support text based messages.
 In 1994 the W3C decides upon the rules and standards of web development language of HTML.
Thus HTML 2, 3, and 4 was developed.

STAGE 2:

The history of web designing goes through the second stage of development. It was then
basically a war of technological betterment with no proper objective in mind. Most companies
thought that maintaining a website was compulsory for profit making but there was no clear
explanation of the why of the phenomenon of web designing and development. The
improvement included features such as replacement of words with icons, buttons with bevelled
edges and much more.
 Muhmmad Asif/handout1 2|Page Web Design And development

STAGE 3:

Gradually web developers became more objective oriented and this set into action the third
generation evolution of web designing strategies. By then, it was well understood that the
audience had to be interacted with. It was necessary to club technology with utilitarian purpose
for persistence in the success of the web development. Websites were now a platform for
inquiry, information and sale.

Multi media features such as sound and animation, database, e-commerce, and 3D worlds were
the new features of websites.

STAGE 4:

The fourth generation websites made a little improvement with the addition of the unique web-
driven selling proposition such as online tutorials and course notes.

Web designing:
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.

Web development:

 Web development is a broad term for the work involved in developing a web site for the Internet
(World Wide Web) or an intranet (a private network). This can include web design, web content
development, client-side/server-side scripting, web server and network security configuration, and e-
commerce development.
 Among web professionals, "web development" usually refers to the main non-design aspects of building
web sites: writing markup and coding.
 Web development can range from developing the simplest static single page of plain text to the most
complex web-based internet applications, electronic businesses, or social network services.
 Muhmmad Asif/handout1 3|Page Web Design And development

 Client Side Scripting:

Client Side scripting are the programming language which runs on client computer. It will run by
the Web Browser. Any user in the world can view the full script by simple going to page source.
Some Client-Side scripting languages are:
JavaScript:

JavaScript Formally called ECMAScript, JavaScript is a prototype-based, object-oriented

scripting language that is dynamic, weakly typed and has first-class functions. It is also
considered a functional programming language like Scheme and OCaml because it has closures
and supports higher-order functions.
JavaScript is an implementation of the ECMAScript language standard and is primarily used in
the form of client-side JavaScript, implemented as part of a web browser in order to provide
enhanced user interfaces and dynamic websites. This enables programmatic access to
computational objects within a host environment.
Example Code:

function factorial(n) {
if (n == 0) {
return 1;
}
return n * factorial(n - 1);
}
Muhmmad Asif/handout1 4|Page Web Design And development

HTML/CSS:

HTML
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
Example Code:

My First Heading
My first paragraph.

My first paragraph. CSS Cascading Style Sheets (CSS) is a style sheet language used to describe
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, SVG and
XUL. Example Code:

body
{background-color:#d0e4fe;}
h1{color:orange;
text-align:center;}
p{font-family:"Times New Roman";
font-size:20px;}

HTML5 and CSS3 Latest HTML proposed standard combined with the latest proposed standard
for CSS natively supports much of the client-side functionality provided by other frameworks
such as Flash and Silverlight.
Muhmmad Asif/handout1 5|Page Web Design And development

Flash:

Flash Adobe Flash Player is an ubiquitous browser plugin ready for RIAs. Flex 2 is also
deployed to the Flash Player (version 9+).

Adobe Flash Player is the standard for delivering high-impact, rich Web content. Designs,
animation, and application user interfaces are deployed immediately across all browsers and
platforms, attracting and engaging users with a rich Web experience.
ActionScript 3.0
ActionScript 3.0 has a similar syntax to ActionScript 2.0 but a different set of APIs for creating
objects. Compare the script below to the previous ActionScript 2.0 version:
Example Code:

var greet:TextField = new TextField();

greet.text = "Hello World";
this.addChild(greet)

AJAX:

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.
Ajax Asynchronous JavaScript provides new methods of using JavaScript, and other languages
to improve the user experience.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
Muhmmad Asif/handout1 6|Page Web Design And development

Example Code:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

JQuery:

JQuery Cross-browser JavaScript library designed to simplify and speed up the client-side
scripting of HTML.
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

Example Code:

$(document).ready(function() {
$("p.neat").addClass("ohmy").show("slow");
});
Muhmmad Asif/handout1 7|Page Web Design And development

Microsoft Silverlight:

Microsoft Silverlight Microsoft’s browser plugin that enables animation, vector graphics and
high-definition video playback, programmed using XAML and .NET programming languages.

Windows? Check. Mac? Check. Linux? Check. Silverlight works on all major OS’s plus all
major browsers, including Firefox, Google Chrome, Safari, and yes, Internet Explorer.
Muhmmad Asif/handout1 8|Page Web Design And development

Real Studio :

Real Studio Web Edition is a rapid application development environment for the web. The
language is object oriented and is similar to both VB and Java. Applications are uniquely
compiled to binary code.

Real Studio is a programming environment developed and commercially marketed by Real

Software, Inc of Austin, Texas for Mac OS X, Microsoft Windows, 32-bit x86 Linux and the
web that uses an object-oriented dialect of the BASIC programming language known as
Realbasic.

The nature of client side coding allows you to alter the HTML on a local client and refresh the
pages with updated content (locally),they are not provide securities and core programming logic.
web designers must bear in mind the importance and relevance to security with their server side
scripts. If a server side script accepts content from a locally modified client side script, the web
development of that page is poorly sanitized with relation to security.
Muhmmad Asif/handout1 9|Page Web Design And development

Server Side Coding:

Server Side Scripting are the programming language which runs on Web Servers to generate
dynamic web pages. Nobody can view the programming code of server side scripting.

Some Server-side scripting languages are

PHP, ASP, JSP, Perl, Ruby.

PHP

PHP is a widely-used general-purpose scripting language that is especially suited for Web
development and can be embedded into HTML. If you are new to PHP and want to get some
idea of how it works, try the introductory tutorial. After that, check out the online manual, and
the example archive sites and some of the other resources available in thelinks section.

PHP was originally created by Rasmus Lerdorf in 1995. The main implementation of PHP is
now produced by The PHP Group and serves as the de facto standard for PHP as there is no
formal specification. PHP is free software released under the PHP License which is incompatible
with the GNU General Public License (GPL) due to restrictions on the usage of the term PHP.

Ever wondered how popular PHP is? see the Netcraft Survey.

Example Code:

function myFunction() {
return 'John Doe';
}
echo 'My name is ' . myFunction() . '!';
Muhmmad Asif/handout1 10 | P a g e Web Design And development

Ruby:

Ruby is a language of careful balance. Its creator, Yukihiro “matz” Matsumoto, blended parts of
his favorite languages (Perl, Smalltalk, Eiffel, Ada, and Lisp) to form a new language that
balanced functional programming with imperative programming.

He has often said that he is “trying to make Ruby natural, not simple,” in a way that mirrors life.

Building on this, he adds:

Ruby is simple in appearance, but is very complex inside, just like our human body.

Since its public release in 1995, Ruby has drawn devoted coders worldwide. In 2006, Ruby
achieved mass acceptance. With active user groups formed in the world’s major cities and Ruby-
related conferences filled to capacity.

e.g. Ruby on Rails

CGI:

CGI - The Common Gateway Interface (CGI) is a standard that defines how web
server software can delegate the generation of web pages to a stand-alone application or an
executable file. Such applications, known as CGI scripts, can be written in any programming
language, although scripting languages are often used.
Muhmmad Asif/handout1 11 | P a g e Web Design And development

Example Code:

print "Content-type: text/plain\n\n";

foreach $var (sort(keys(%ENV))) {
$val = $ENV{$var};
$val =~ s|\n|\\n|g;
$val =~ s|"|\\"|g;
print "${var}=\"${val}\"\n";
}

Perl:

Perl is a highly capable, feature-rich programming language with over 23 years of development.
Perl 5 runs on over 100 platforms from portables to mainframes and is suitable for both rapid
prototyping and large scale development projects.
Example Code:

my $x = "foo";
my $some_condition = 1;
if ($some_condition) {
my $y = "bar";
print $x; # prints "foo"
print $y; # prints "bar"
}
print $x; # prints "foo"
print $y; # prints nothing; $y has fallen out of scope
Muhmmad Asif/handout1 12 | P a g e Web Design And development

ColdFusion:

ColdFusion was created as a commercial product by the Allaire Corporation. As a commercial

product it has some features different from other Server Side Scripting Languages. The first
major difference is that ColdFusion scripts do not have to display their source code like every
other scripting language, it is possible to run encrypted versions of the scripts. This allows for
individuals to sell their own scripts without fear of piracy, however it has the side effect of
stemming the flow of free open source CF scripts for use by the learning webmaster. The second
major difference is that ColdFusion costs money. A server side scripting language works with an
interpreter. Depending on the extension of the filename to be served, .php .asp or .cfm, the server
will first send the file to an interpreter which is what dynamically generates your page. So to use
these languages you need to install them on your server. PHP is free, ASP is free, but CF costs
money, and that may be the reason why it is growing only slowly. However most NT hosting
packages do already include ColdFusion so for the person who does not own their own server
this pricing difference will not have much affect.
Example Code:

SELECT * FROM table

#field1# - #field2# - #field3#

Muhmmad Asif/handout1 13 | P a g e Web Design And development

Python:

Python is a programming language that lets you work more quickly and integrate your systems
more effectively. You can learn to use Python and see almost immediate gains in productivity
and lower maintenance costs.

Python runs on Windows, Linux/Unix, Mac OS X, and has been ported to the Java and .NET
virtual machines.

Python is free to use, even for commercial products, because of its OSI-approved open source
license.

Example Code:

name = raw_input('What is your name?\n')

print 'Hi, %s.' % (name)

ASP:

ASP-Active Server Pages (ASP), also known as Classic ASP or ASP Classic, was Microsoft’s
first server-side script-engine for dynamically-generated web pages. Initially released as an add-
on to Internet Information Services (IIS) via the Windows NT 4.0 Option Pack (ca 1998), it was
subsequently included as a free component of Windows Server (since the initial release of
Windows 2000 Server). ASP.NET has superseded ASP.

ASP 2.0 provided six built-in objects: Application, ASPError, Request, Response, Server, and
Session. Session, for example, represents a cookie-based session that maintains the state of
Muhmmad Asif/handout1 14 | P a g e Web Design And development

variables from page to page. The Active Scripting engine’s support of the Component Object
Model (COM) enables ASP websites to access functionality in compiled libraries such as DLLs.

Example Code:

NET:

.NET is an integral part of many applications running on Windows and provides common
functionality for those applications to run. This download is for people who need .NET to run an
application on their computer. For developers, the .NET Framework provides a comprehensive
and consistent programming model for building applications that have visually stunning user
experiences and seamless and secure communication. Example Code:

Websphere:

Websphere In computing, IBM WebSphere refers to a brand of software products in the genre
of enterprise software known as “application and integration middleware”. These software
products are used by end-users to create applications and integrate applications with other
applications. IBM WebSphere has been available to the general market for over a decade.
Muhmmad Asif/handout1 15 | P a g e Web Design And development

JSP:

JSP JavaServer Pages (JSP) is a Java technology that helps software developers serve
dynamically generated web pages based on HTML, XML, or other document types. Released in
1999 as Sun’s answer to ASP and PHP, JSP was designed to address the perception that the Java
programming environment didn’t provide developers with enough support for the Web.

Client-side vs. Server-side languages

Imagine you want your web site visitors to fill a form with their name and email address, and
you want to make sure they fill both fields before they click the “Submit” button. Since this
validation has to happen inside the client (before they send anything back to the server) a good
language to use would be JavaScript (Yes, client-side). Your JavaScript code will check if both
fields are properly filled; if they are, it will send the form back to the server, if they are not, it
will display an alert telling the user to fill both fields.

Now imagine you are building a web site whose contents will be dynamically created based on
additional information stored inside the server, just like a news web site, or an online store, or a
blog, or a forums system like the one we have here. Building each and every one of the pages
manually would be just too complicated since the information is constantly changing, so you
might want to use a server-side language to build a site that delivers web pages that have been
dynamically built, every time, based on the user’s requests.
 Muhmmad Asif/handout1 16 | P a g e Web Design And development

Protocols:
 www = world wide web.
 http = Hyper Text transfer protocol.
 ftp = File transfer protocol.
 Smtp = simple mail transfer protocol.
 Pop = post office protocol.
 Tcp/ip = transfer control protocol/internet protocol.
 url = universal resourse locater.
 Isp = internet service provider.

For web server we have to install…..

 Its = internet information server.

Domain:

I. .edu (for education affairs).

II. .gor (government site).
III. .net (for networking).
IV. .mil (for military).
V. .com (for commercial).
VI. .org (for organization).

Virtual Directory:
I. Virtual directory for web.
C:\\input\www.root\web1 ; web1=virtual directory

II. Active directory for web .