Web Engineering

Lecture 1

1
 Course Contents
• HTML (to define the content of web pages)
• CSS (to specify the layout of web pages)
• Bootstrap (to develop responsive web pages)
• JavaScript (to program the behavior of web pages)
• PHP (Use for database)

2
 Recommended Text Books:

• Beginning HTML with CSS and XHTML by

David Schultz and Craig Cook
• PHP and MySQL by example by Ellie Quigley
with Marko Gargenta
• Web Engineering by Gerti Kappel, Birgit Proll,
Siegfried Reich, Werner Retschitzegger
• HTML5: Up and Running by Mark Pilgrim 2010
• W3Schools Online Web Tutorials
http://www.w3schools.com
3
 Editor
• Sublime Text Editor
• Notepad ++
• Notepad

4
 Web Server
– Install a web server on your own PC and then
install PHP & MYSQL
– WAMP: Window, Apache, MYSQL, PHP
– XAMPP: All OS, Apache, MYSQL, PHP, Perl
Note: Install the web server start as services &
then type localhost in your browser to check
whether it is running or not
– LAMP: used for Linux Machines users

5
 Web Application?
A software application that runs on web servers and is accessed through web browsers over the internet. Unlike
traditional desktop applications, web applications do not require installation on a user's device and can be used on
various platforms and devices with an internet connection. These applications can perform a wide range of tasks,
from simple data entry forms to complex, interactive systems.
• A web application consists of both front-end and back-end components. The front-end, also known as the
client-side, is the part of the application that users interact with through their web browsers. It typically
includes the user interface (UI) elements, such as web pages, forms, buttons, and other interactive elements.
• The back-end, or server-side, is responsible for processing requests, managing data, and performing the core
functionality of the application. It communicates with the front-end, often using APIs (Application
Programming Interfaces), to retrieve or send data and perform various operations.
Example: Online Email Service
1. User Interface (Front-end):
• When you open your web browser and go to Gmail's website, you interact with the front-end of the web
application.
• The Gmail interface includes elements like the login page, inbox, email composition forms, buttons, and
folders.
2. Functionality (Back-end):
• On the back-end, Gmail's servers are responsible for handling user authentication, storing and retrieving
emails, sending emails, and managing user accounts.
• When you log in, the back-end verifies your credentials, retrieves your emails from the server, and
displays them in your inbox.
• When you compose and send an email, the back-end processes your message, stores it, and delivers it to
the recipient. 6
 Web platforms
Web platforms, are the environments that provide tools, libraries, and services for building and deploying web applications
and websites. These platforms simplify the development process by offering pre-built components, design templates, and
infrastructure, allowing developers to focus on creating features and functionality rather than starting from scratch.
1. Content Management Systems (CMS):
1. Examples: WordPress, Joomla, Drupal
2. CMS platforms are widely used for building and managing websites. They provide a user-friendly interface for
content creation and editing, making it easy for non-technical users to maintain a website.
2. E-commerce Platforms:
1. Examples: Shopify, WooCommerce, Magento
2. E-commerce platforms are tailored for creating online stores. They include features like product catalogs, shopping
carts, payment processing, and inventory management.
3. Web Development Frameworks:
1. Examples: Ruby on Rails, Django, Express.js
2. Web development frameworks are libraries and tools for building web applications from the ground up. They offer
greater flexibility and customization but require more technical expertise.
4. Front-end Development Tools:
1. Examples: React, Angular,
2. Front-end frameworks and libraries help build interactive and responsive user interfaces. They focus on client-side
development and can be integrated with various back-end technologies.
5. Mobile App Development Platforms:
1. Examples: React Native, Flutter
2. These platforms enable developers to create mobile applications using web development skills, often with a single
7
codebase that works on multiple platforms.
 Web Communication Protocol
1. HTTP, which stands for Hypertext Transfer Protocol, is a fundamental communication
protocol used for web applications and websites. It defines how data is formatted and
transmitted between a web server and a web client, typically a web browser.
• HTTP operates on a client-server model. When you open a web page or use a web application, your web
browser (the client) sends HTTP requests to a web server, which hosts the web application.
• The web server processes these requests and sends back HTTP responses containing the requested data, such
as HTML files, images, JavaScript, or JSON data.

2. HTTP methods used in web applications include:

• GET: Retrieve data from the server (e.g., fetching a web page).
• POST: Send data to the server (e.g., submitting a form).
• DELETE: Remove a resource from the server.
• PATCH: Partially update a resource.
• OPTIONS: Retrieve information about the communication options for a resource.
8
 Web Communication Protocol
World Wide Web Consortium (W3C)
• The World Wide Web Consortium (W3C) is an international
community and standards organization that develops and
maintains the technical standards and guidelines for the World
Wide Web (WWW). Founded in 1994 by Tim Berners-Lee, the
inventor of the World Wide Web, and based at the Massachusetts
Institute of Technology (MIT) in the United States, W3C plays a
pivotal role in ensuring the interoperability, accessibility, and
continued growth of the web.
W3C's mission:
• To lead the World Wide Web to its full potential by developing
protocols and guidelines that ensure long-term growth for the
Web.
9
 What are Web Pages
• A web page is a document which can display
text, graphics, audio, video and other
elements through a web browser.
• Web pages are documents stored on web
servers.
• Web pages contain instructions on how to
display content. The most common
instructions are in hypertext markup language
(HTML).
10
 HTML – Hypertext Markup Language

• HTML stands for Hypertext Markup Language

• HTML describes the structure of Web pages using
markup
• HTML elements are the building blocks of HTML
pages
• HTML elements are represented by tags
• Different versions exists, HTML v. 1.0 published in 1991,
then 2 , 3, 4, 4.01 and 5 versions. Version 4.01 is used more
than other versions.
• Defines large number of tags to denote different semantics.
E.g. <H1>tag can be used to mark a level-1 heading.
11
 HTML – Hypertext Markup Language
Components of HTML
• HTML document composed in two components
– Tags and
– Attributes
• Both are work togather to identify different document
parts and tell the browser how to display them. E.g. A
Tag specify a chunk of information be displayed as a
paragraph or something else. Whereas attributes are
optional part of tags specify information or more
thoroughly explains about a particular tag e.g. Color,
aligenment, width and height etc.
12
 HTML Tags
• HTML tags are element names surrounded by
angle brackets:
• <tagname>content goes here...</tagname>

•HTML tags normally come in pairs like <p> and </p>

•The first tag in a pair is the start tag, the second tag is the end
tag
•The end tag is written like the start tag, but with a forward
slash inserted before the tag name

13
 HTML – Hypertext Markup Language
(cont.)
<html>
<head>
<title>First Web Page</title>
Head Tag
</head>
<body> HTML Tag

<h1>Heading</h1>
<p>Paragraph</p> Body Tag
</body>
</html>

-Save it with HTML extension e.g. First.html

14
 HTML – Hypertext Markup Language
(cont.)

 The <!DOCTYPE html> declaration defines this document to be

HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the
document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

15
 HTML Headings

• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading. <h6> defines the least important heading:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html> 16
 HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>First paragraph.</p>
<p>This is second paragraph.</p>
</body>
</html>

17
 HTML Links
• HTML links are defined with the <a> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML link is given below:</p>

<a href="https://www.sahiwal.comsats.edu.pk/">CUI Sahiwal</a>

</body>
18
</html>
 HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided
as attributes:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src=“ciit.jpg" alt="W3Schools.com" width="104px" height="142px">

</body> 19
 HTML Buttons
• HTML buttons are defined with the <button> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body> 20
Lab Task

21