Introduction to WWW and

Web Development
Week 02
ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

ITE1712: Web Design Web Development
Dr. Gayashan Amarasinghe, University of Moratuwa
Color Coding

• RED: - Very important points

• BLUE: - Need to be highlighted but not as important
• GREEN: - Used for terminology (terms)
• PURPLE: - Off topic but necessary

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Objectives



ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Objectives
 Explain the anatomy of a web application


ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Objectives
 Explain the anatomy of a web application
 Develop simple web pages using HTML and CSS

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol
 API

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol
 API
 UI/UX

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol
 API
 UI/UX
 Frameworks

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol
 API
 UI/UX
 Frameworks
 Full-stack
ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol
 API
 UI/UX
 Frameworks
 Full-stack
 Bugs ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application
 Related Terminology
 Browser
 Client - Server Architecture
 Protocol
 API
 UI/UX
 Frameworks
 Full-stack
 Bugs ITE1712: Web Design
 Wireframe
Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Anatomy of a Web Application

WEB CLIENT Request WEB SERVER

A program running on a A program running on a

computer that sends the computer that receives the
request and receives the request and sends the
response Response response ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Web Communication Protocols




ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Web Communication Protocols
 The HTTP Standard



ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Web Communication Protocols
 The HTTP Standard
 The request


ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Web Communication Protocols
 The HTTP Standard
 The request
 The response

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
What is a Web Server?



 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

 Web Development

What is a Web Server?
 Functionalities of a web server can be summarized as
follows:



 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

 Web Development

What is a Web Server?
 Functionalities of a web server can be summarized as
follows:
 Provides (serves) HTML pages (with an appropriate
MIME type header).



 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

 Web Development

What is a Web Server?
 Functionalities of a web server can be summarized as
follows:
 Provides (serves) HTML pages (with an appropriate
MIME type header).
 provides other types of documents (also with an
appropriate MIME type header)

 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

 Web Development

What is a Web Server?
 Functionalities of a web server can be summarized as
follows:
 Provides (serves) HTML pages (with an appropriate
MIME type header).
 provides other types of documents (also with an
appropriate MIME type header)
 May need to process information from the user.
 For instance, if the user submits information to the ITE1712: Web Design
site, the Web server must either process and store
that information or pass it on to another program Dr. Gayashan Amarasinghe

which can do so. Introduction to WWW and

 Web Development

What is a Web Server?
 Functionalities of a web server can be summarized as
follows:
 Provides (serves) HTML pages (with an appropriate
MIME type header).
 provides other types of documents (also with an
appropriate MIME type header)
 May need to process information from the user.
 For instance, if the user submits information to the ITE1712: Web Design
site, the Web server must either process and store
that information or pass it on to another program Dr. Gayashan Amarasinghe

which can do so. Introduction to WWW and

 Supplies dynamic data Web Development
 Such as in response to user supplied information
Reading Activity
 An elaborated version of the basics of web development
and the anatomy of a web application.
 Read Chapter 2 of the textbook:
https://wtf.tw/ref/robbins.pdf

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Creating a Web Page







 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Creating a Web Page
 Understanding Web Development






 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Creating a Web Page
 Understanding Web Development
 Creating a web page





 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Creating a Web Page
 Understanding Web Development
 Creating a web page
 Creating the structure
 Markup Languages
 HTML


 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Creating a Web Page
 Understanding Web Development
 Creating a web page
 Creating the structure
 Markup Languages
 HTML
 Styling
 CSS
 ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Creating a Web Page
 Understanding Web Development
 Creating a web page
 Creating the structure
 Markup Languages
 HTML
 Styling
 CSS
 Controlling the behavior ITE1712: Web Design
 JavaScript
Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Markup Languages




 ITE1712: Web Design

 Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Markup Languages

 A computer language that uses tags to define the

elements of a document.



 ITE1712: Web Design

 Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Markup Languages

 A computer language that uses tags to define the

elements of a document.
 Used for formatting/structuring text.


 ITE1712: Web Design

 Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Markup Languages

 A computer language that uses tags to define the

elements of a document.
 Used for formatting/structuring text.
 When the document is processed, the markup
language doesn’t appear to the end user.
 E.g.: HTML, XML, Markdown ITE1712: Web Design

 We will discuss about markup languages in a later Dr. Gayashan Amarasinghe

week. Introduction to WWW and

Web Development
Creating the structure
 HTML

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
Document Object Model
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world! ITE1712: Web Design

</body> Dr. Gayashan Amarasinghe

</html>
Introduction to WWW and
Web Development
Common HTML Tags
 <h1>, <h2>, ..., <h6>
 <ol>, <ul>
 <img>
 <a>
 <table>
 <form>
 ...

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Styling a Web Page
 CSS

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-size: 180px;
}
</style>
ITE1712: Web Design
<title>Hello!</title>
</head> Dr. Gayashan Amarasinghe
<body>
Introduction to WWW and
Hello, world! Web Development
</body>
</html>
Common CSS Properties
 color
 text-align
 width, height
 margin, padding
 font-family, font-size, font-weight
 border
 ... ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Controlling the behaviour of a web page
 JavaScript

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
Assignment 1:
Creating your First Web Page
 Develop a simple “About me” web page.

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development
References
 CS50’s Web Programming with Python and JavaScript
https://cs50.harvard.edu/web/2020/weeks/0/

ITE1712: Web Design

Dr. Gayashan Amarasinghe

Introduction to WWW and

Web Development