Web Engineering

History of the Web
The idea of hypertext (cross-linked and inter-linked documents) traces back to Vannevar Bush in
the 1940's online hypertext systems began to be developed in 1960's e.g., Andy van Dam's
FRESS, Doug Englebert's NLS in 1987, Apple introduced HyperCard
Internet: a physical network connecting millions of computers using
the same protocols for sharing/transmitting information (TCP/IP) in reality, the Internet is a
network of smaller networks
World Wide Web: a collection of interlinked multimedia documents that are stored on the
Internet and accessed using a common protocol (HTTP)
How html is evolving standard
HTML stands for “HyperText Markup Language” and is the standard language used to produce
web pages and applications.
HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia in 1993, Mosaic
added many new features (e.g., integrated images)
▪ HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late in 1994-96,
Netscape & IE added many new, divergent features
▪ HTML 3.2 (W3C, 1996): attempted to unify into a single standard but didn't address newer
technologies like Java applets & streaming video
▪ HTML 4.0 (W3C, 1997): current standard attempted to map out future directions for HTML,
not just react to vendors
▪ XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standards
what are Web development tools
Many high-level tools exist for creating Web pages e.g., Microsoft FrontPage, Netscape
Composer, Adobe PageMill,Macromedia DreamWeaver, HotDog, ... also, many applications
have "save to HTML" options (e.g., Word)
for most users who want to develop basic, static Web pages, these are fine
assembly language vs. high-level language analogy
what is role of table of html
The HTML table model allows authors to arrange data -- text, preformatted text, images, links,
forms, form fields, other tables, etc. -- into rows and columns of cells. Each table may have an
associated caption (see the CAPTION element) that provides a short description of the table's purpose.
client-side programming
It is the program that runs on the client machine (browser) and deals with the user
interface/display and any other processing that can happen on client machine like reading/writing
cookies. Refer JavaScript articles for example Client Side codes that run in browser.
The Programming languages for client-side programming are :
1) Javascript 2) VBScript 3) HTML 4) CSS 5) AJAX
Server-side programming
can store and execute program on Web server, link from Web page
▪ more complex, requires server privileges, but secure
CGI programming , programs can be written to conform to the Common Gateway Interface
when a Web page submits, data from the page is sent as input to the CGI program
CGI program executes on server, sends its results back to browser as a Web page
good if computation is large/complex or requires access to private data
Active Server Pages, Java Servlets, PHP, Server Side Includes
▪ vendor-specific alternatives to CGI
▪ provide many of the same capabilities but using HTML-like tags
Frames
frames provide the ability to split the screen into independent pages must define a
FRAMESET that specifies the layout of the pages actual pages to be displayed must be in
separate files
can divide vertically <frameset cols="50%,50%"> or, horizontally <frameset rows="30%,*,*">
<html> 
<head>
<title>Menu of Demos</title>
</head>
<body> Links to demo pages
<p> <a href="page01.html"
target="main">Demo 1</a><br/>
<a href="page06.html"
target ="main"> Demo 6</a><br/>
<a href="http://www.creighton.edu"
target="_top" >Creighton</a> </p>
</body> </html>
Content vs. presentation

most HTML tags define content type, independent of presentation exceptions?
style sheets associate presentation formats with HTML elements CSS1: developed in 1996
by W3C CSS2: released in 1998, but not fully supported by browsers
HTML style sheets are known as Cascading Style Sheets, since can be defined at three
different levels
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
Level of Html Page
<h1>–<h6>: The HTML Section Heading elements
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the
highest section level and <h6> is the lowest
Hypertext & HTML
HyperText Markup Language (HTML) is the language for specifying the static content of Web
pages
hypertext refers to the fact that Web pages are more than just text can contain multimedia,
provide links for jumping within & without
markup refers to the fact that it works by augmenting text with special symbols (tags) that
identify structure and
Inline style sheets
<html> 
<head>
<title>Inline Style Sheets</title>
</head>
<body> <p style="font-family:Arial,sans-serif;
text-align:right">This is a right-justified paragraph in a sans serif font
(preferably Arial), with some
<span style="color:green">green text</span>.
</p>
<p>And <a style="color:red; text-decoration:none;
font-size:larger;"
href="page01.html">here</a>
is a formatted link.
</p> </body> </html>
Pseudo-elements
<html> 
<head>
<title>Title for Page</title> <style type="text/css">
a {color : red;
text-decoration : none;
font-size : larger}
a:visited {color : black}
a:active {color : orange}
a:hover {color : blue}
p:first-letter {font-size : large;
color : white;
background-color : darkblue} </style>
</head>
<body> <p>Welcome to my Web page. I am so happy you are here.
</p>
<p>Be sure to visit
<a href="http://www.cnn.com">CNN</a>
for late-breaking news. </p>
</body> </html>
JavaScript: the first Web scripting language, developed by Netscape in 1995
syntactic similarities to Java/C++, but simpler & more flexible
(loose typing, dynamic variables, simple objects)
JScript: Microsoft version of JavaScript, introduced in 1996 same core language,

but some browser-specific differences fortunately, IE & Netscape can (mostly)
handle both JavaScript & JScript
JavaScript 1.5 & JScript 5.0 cores conform to ECMAScript standard
VBScript: client-side scripting version of Microsoft Visual Basic

Microsoft VBScript (Visual Basic Script) is a general-purpose, lightweight and active scripting
language developed by Microsoft that is modeled on Visual Basic. Nowadays,
Common scripting tasks

Adding dynamic features to Web pages validation of form data image
rollovers time-sensitive or random page elements handling cookies defining
programs with Web interfaces utilize buttons, text boxes, clickable images,
prompts, frames
limitations of client-side scripting
Since script code is embedded in the page, viewable to the world ▪ for security
reasons, scripts are limited in what they can do e.g., can't access the client's hard
drive
▪ since designed to run on any machine platform, scripts do not contain platform
specific commands
▪ script languages are not full-featured e.g., JavaScript objects are crude, not good
for large project development
Scripts vs. programs
A scripting language is a simple, interpreted programming language scripts are
embedded as plain text, interpreted by application
Static vs. dynamic pages
Most Web pages are static contents (text/links/images) are the same each time it
is accessed
e.g., online documents, most homepages
HyperText Markup Language (HTML) is used to specify text/image format
Lucky Pervaiz Ali

Web Engineering

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Engineering

Uploaded by

Copyright:

Available Formats

History of the Web

Content vs. presentation

CSS describes how HTML elements are to be displayed on screen, paper, or in

JScript: Microsoft version of JavaScript, introduced in 1996 same core language,

VBScript: client-side scripting version of Microsoft Visual Basic

Common scripting tasks

Lucky Pervaiz Ali

You might also like