Session 1- Introduction to
Web Engineering
Engr. Adnan Zafar
Learning Objectives
• Be able to understand the concepts, principles and methods of Web
Engineering
• Be familiar with current Web technologies
• Be familiar with HTML Basics
• Able to write a Basic HTML code
2
Web Engineering
• Web engineering actively promotes systematic, disciplined
and quantifiable approaches towards successful
development of high-quality, ubiquitously usable Web-
based systems and applications.
• Web engineering is multidisciplinary and encompasses
contributions from diverse areas: systems analysis and
design, software engineering, hypermedia/hypertext
engineering, requirements engineering, human-computer
interaction, user interface, information engineering,
information indexing and retrieval, testing, modeling and
simulation, project management, and graphic design and
presentation.
3
The Internet/ Protocols/
WWW
What is the Internet?
a network of networks – an inter-network, or Internet
What are Internet protocols?
the rules for transferring information between programs
HTTP - hypertext transfer protocol
FTP - file transfer protocol
SMTP – simple mail transfer protocol
What is the World Wide Web?
a set of HTML pages accessible using the HTTP protocol
4
How the WWW works
How does a Web Browser (Firefox) fit in this picture?
- your browser connects, using the HTTP protocol, to a web server
- the web server fetches an HTML web page and sends the HTML to
your browser
- your browser turns the HTML page into a nice-looking page on your
screen
5
The World Wide Web
• The World Wide Web, also called the WWW or simply the Web,
dates back only to 1989, when it was proposed by Tim
Berners-Lee.
• The World Wide Web is composed of several different components.
• HTML is only one of those components. The other components
include:
6
• WWW Server
WWW Servers are the information providers. They can run on just about any platform. Netscape, Spry,
Open Text, Basis, Explorer and other companies provide commercial servers at reasonable prices.
• WWW Browsers
Browsers are the information retrievers.
• HTTP
It is the Hyper Text Transfer Protocol. It defines how information is transferred between server and
browser.
• SGML
SGML is the Standard Generalized Markup Language. It is ISO Standard 8879:1986.
It provides rules for tagging data.HTML is an application of it.
• CGI
The Common Gateway Interface is programming for the Web.
• URLs
WWW browsers use a Uniform Resource Locator to identify the location of an object. Object can be a file, a
picture, a movie or just about anything.URL contain three pieces of information.
Protocol / machine name path name of the object http://www.hu.edu.pk/contactus.htm
7
URL(Uniform Resource Locator)
• URL contains three pieces of Information:
PROTOCOL/MACHINE NAME/PATH NAME OF THE OBJECT
http://www.yahoo.com/zubair.html
8
HTML Configuration
9
Basics of HTML
• HTML is set of instructions. HTML Stands for Hypertext
Markup Language. Each instruction for Example <TITLE>, is
called element.HTML is a programming language of sorts.
The instructions are not compiled by a traditional compiler
but rather by a WWW browser.
• Some element can have qualities called attributes.
• All elements are enclosed in <> brackets. Most elements
require start and end tag. The start tag for TITLE looks like
<TITLE> and end tag looks like </TITLE>.
10
Contd…
• The groups of elements are as follows:
• The HEAD elements
• The BODY elements
• Within the BODY section, elements are broken into groupings:
Character, Image, List, Figure, Table, Math, and Form elements.
11
The <HTML> elements
• The <HTML> element encloses the entire HTML document .The start
tag <HTML> should be the first thing in HTML file and </HTML>
should be the last one. Though it is optional but should be used.
• The <HEAD> Elements
• The <HEAD> element encloses the head section of the document. The
title is always in the Head section. It is also optional.
• The <TITLE> Elements
• This element denotes the title of the documents.
12
Contd…
• The <BODY> Element
• The BODY Elements encloses the body section of the
document. Most elements are found within the <BODY>
element.
• The <H1> Element
• The <H1> element is used to denote the first level headline
of an HTML document. There are six levels of headlines.
• All headlines must have end tags.
• The <B> Element
• The <B> element indicates that all characters between the
starting tag <B> and ending tags </B> are to be bold.
13
Contd…
• The <P> Elements
• The <P> Elements denotes the start of a new paragraph.
The browser adds a blank at the point of tag <P> in order
to separate two paragraphs.
• The <A> Element
• The <A> is used to add a hyperlink to the document. The
important attribute is HREF. The HREF attributes gives the
location of the document to go to when the link is
selected.
<a href="http://www.hotmail.com">This is a link</a>
14
