 Estimates

 More than 140 million Web sites

 More than 30 billion individual Web pages
4
 Commercial business Web use increasing
THE CLIENT/SERVER SOFTWARE MODEL
▪ Clients and servers are host machines
▪ A client is the host machine that requests information
from the server
▪ The server is a resource that provides a service for
(many) clients
▪ The client/server interaction is the foundation for all
Internet communication

5
THE CLIENT/SERVER SOFTWARE MODEL

6
THE WORLD WIDE WEB
▪ The web is a collection of files stored at locations
throughout the world.
▪ These files are written using a special language known as
the Hypertext Markup Language (HTML).
▪ An HTML file will contain text which forms the information
content of the file, together with instructions which define
how the text is to be displayed.
▪ A file which is downloaded into a browser is known as a
web page.
▪ The computer that holds web pages is known as a web
server.

7
THE WORLD WIDE WEB
▪ The user of the World Wide Web employs a program
known as a browser.
▪ When the user wishes to read a file on the World Wide Web
they will inform the browser of its address on the web and
the browser will fetch the file.

▪ Web pages can contain a wide variety of media including

audio files, video files, graphics and even programs which
can execute while the browser is being viewed.

8
INTERNET PROTOCOLS
 Protocol: collection of network data rules
 Includes transmission rules
 Computers must use same protocol

9
TCP/IP
 Internet protocols
 Transmission Control Protocol (TCP)
 Controls message, file disassembly into packets before Internet
transmission
 Controls packet reassembly into original formats at destinations

 Internet Protocol (IP)

 Specifies addressing details for each packet
 Labels packet with origination and destination addresses

 TCP/IP refers to both protocols

10
MESSAGE TRANSMITTED USING TCP/IP

11
IP ADDRESSING
 IP address – uniquely identify every computer in a
network system

12
HOST MACHINES AND HOST NAMES
▪ Each computer on the Internet is a host machine.
▪ Each computer has a unique Internet Protocol (IP)
address, such as [Link]
▪ Some computers have a permanent IP address
▪ Some computers borrow an IP address while they are
connected to the Internet (Temporary)
▪ An IP address is not human‐friendly

13
HOST MACHINES AND HOST NAMES
▪ The IP address for most host machines are mapped to
a Domain Name Service (DNS) address in order to be
more people‐friendly
▪ The DNS address consists of a host name followed by
a domain name
▪ Example DNS Address: [Link]
▪ Host Name is: mail
▪ Domain Name is: [Link]

▪ While each machine has a unique IP address, it can

have multiple DNS addresses (called aliases)

14
DOMAIN NAMES
When you type in a DNS address, a domain name
server translates it into an IP address.

15
DOMAIN NAME SYSTEMS
▪ Domain names are unique identifiers of computer or
network addresses on the web
▪ Refer to an IP address

▪ Example:
▪ [Link]
▪ [Link]
▪ [Link]

16
DOMAIN NAME SYSTEMS

17
DOMAIN NAME SYSTEMS

18
URL
▪ Refers to a particular Web page or a particular file
residing on a Web site.

 <scheme>:<scheme‐dependent‐information>
 <scheme>:<scheme‐dependent‐information>

▪ Examples:
▪ http (Hyper Text Transfer Protocol)
▪ ftp (File Transfer Protocol)

19
SCHEME DEPENDENT INFORMATION
 <scheme>:<scheme‐dependent‐information>
▪ This information is detailed with each scheme
▪ Most schemes include the:
▪ Machine making the file available
▪ "Path"to that file
▪ Example:

20
URL EXAMPLE

21
PACKET-SWITCHED NETWORKS
 Packet-switched network
 Packets
 Small pieces labeled electronically (origin, sequence, destination
address)
 Travel along interconnected networks

 Can take different paths

 May arrive out of order

 Destination computer
 Collects packets
 Reassembles original file or e-mail message

22
MESSAGE TRANSMITTED USING TCP/IP

23
ROUTING PACKETS
 Routing computers
 Decide how best to forward each packet

 Routing algorithms
 Programs on router computers
 Determine best path for packet
 Routing algorithms applied to routing table information

24
Internet backbone
Internet routers handle packet traffic
Three billion packets per second
25
WEB CLIENTS AND WEB SERVERS
 Client/server architectures
 Client requests services from server
 Client computer
 Uses Web browser software (Web client software)
 Server computer
 More memory and larger, faster disk drives

26
VARIOUS MEANINGS OF “SERVER”
 Server
 Any computer providing files (programs) to other
computers
 Connected through network
 Use more capable hardware elements.

 Can handle number of users.

 Server software
 Run Web server software
 Makes files (programs) available to other computers
 Sometimes included with operating system

27
WEB CLIENT/SERVER COMMUNICATION
 Web browser requests files from Web server
 Transportation medium: the Internet
 Request formatted by browser using HTTP
 Request sent to server computer
 Server receives request
 Retrieves file containing requested Web page
 Formats using HTTP

 Sends back to client over the Internet

 Client Web browser

 Browser displays information if it is an HTML page
 Graphics can be slow to appear

28
CLIENT/SERVER ARCHITECTURE (TWO-
TIER)

29
SOFTWARE FOR WEB SERVERS
 Types of Web server software/programs
 Operating system software
 Web server software
 Other programs
 Internet utilities
 E-mail software

30
OPERATING SYSTEMS FOR WEB SERVERS
 Operating system tasks
 Running programs, allocating computer resources,
providing input and output services
• Microsoft Windows Server products

• UNIX-based products

• Linux (open-source operating system)

31
WEB SERVER SOFTWARE
 Software that listens for web page requests
 Commonly used Web server programs
 Apache HTTP Server,
 Microsoft Internet Information Server (IIS),
 Sun Java System Web Server (JSWS)

32
WEB BROWSERS
 A Web browser is the software necessary to view
information.
 The information in the Web is organized as hypertext,
graphics, video, and sound
 A Web page is a document on the Web that you view
through your Web browser

33
WEB BROWSERS (CONT.)
 Browsing : the act of reading Web pages and clicking
on hyperlinks
 Each Web page has a unique address (URL) that you
can use to jump directly to it.

 Examples:
• Chrome
• Firefox
• Opera
• Safari

34
 Chapter 0 Introduction
QUESTIONS
Lecture 02

HTML
 WHAT IS HTML?

 HTML stands for Hypertext Markup Language, and

it is the most widely used language to write Web

Chapter 0 Introduction
Pages.

 Hypertext refers to the way in which Web pages (HTML

documents) are linked together. Thus, the link available on
a webpage is called Hypertext.

 HTML is a Markup Language which means you use

HTML to simply "mark-up" a text document with tags that
tell a Web browser how to structure it to display.
2
HTML TAGS

 HTML tags are keywords (tag names) surrounded by

angle brackets.

Chapter 0 Introduction
<tagname>content</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 slash
before the tag name

3
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="shortcut icon" href="logo/[Link]"/>

Chapter 0 Introduction
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

<!-- this is comments -->

</body>
</html>
4
HTML TAGS

 DOCTYPE:
 defines the document type to be HTML

Chapter 0 Introduction
 The text between <html> and </html>:
 describes an HTML document

 The text between <head> and </head>:

 provides information about the document

 The text between <title> and </title>:

 provides a title for the document 5

 displayed in the web browser's title bar

HTML TAGS

 The text between <body> and </body>:

 describes the visible page content

Chapter 0 Introduction
 The text between <h1> and </h1>:
 describes a heading

 The text between <p> and </p>:

 describes a paragraph
 placed within the body of the page
6
 Chapter 0 Introduction
7
HTML PAGE STRUCTURE
ATTRIBUTES

 Tags can also have attributes, which are extra bits of

information.

Chapter 0 Introduction
 Attributes appear inside the opening tag and their
values sit inside quotation marks.

 They look something like

<tag attribute="value">XXXXXX</tag>

8
PAGE TITLE: <TITLE>

 Describes the title of the web page

 Placed within the head of the page

Chapter 0 Introduction
 Displayed in the web browser's title bar and when
bookmarking the page
<head>
<title>My first web page</title>
</head>
The head element (starts with <head> and ends with
</head>) appears before the body element (starting with
<body> and ending with </body>) and contains
information about the page.
9
<META XXXXXXXX /> (TAG)

 Metadata is data (information) about data.

 The <meta> tag provides metadata about the HTML

document.

 Metadata will not be displayed on the page, but will

be machine parsable.

 Meta elements are typically used to specify page

description, keywords, author of the document, last
modified, and other metadata.

 The metadata can be used by browsers (how to

display content or reload page), search engines
(keywords), or other web services.
EXAMPLE OF USING MEATA
 <head>
 <meta http-equiv="refresh" content="30" />
 <meta name="description" content=“Web Development Course“ />
 <meta name="keywords" content=“PTUK, CSE, Kadoorie“ />
 <meta name="author" content=“Yazeed Sleet“ />
 </head>
PARAGRAPH: <P>

 Paragraphs of text
 placed within the body of the page

Chapter 0 Introduction
<body>
<p>My first web page</p>
<p>Very Cool</p>
</body>

Web browsers don’t usually take any notice of what line your
code is on. It also doesn’t take any notice of spaces

12
HEADINGS: <H1>, <H2>, ..., <H6>

 Headings to separate major areas of the page

placed within the body of the page

Chapter 0 Introduction


<h1>Kadoorie University</h1>
<h2>Computer Engineering</h2>
<h3>Web Development</h3>

Web browsers don’t usually take any notice of what line your
code is on. It also doesn’t take any notice of spaces

13
LINKS: <A>

 Links, or "anchors", to other pages (inline)

 uses the href attribute to specify the destination URL

Chapter 0 Introduction
<a href = “[Link] Kadoorie </a>

14
IMAGES: <IMG>

 Inserts a graphical image into the page (inline)

 The src attribute tells browser where to find the image

Chapter 0 Introduction
 Also requires an alt attribute describing the image
 If placed inside an a anchor, the image will become a link
 The title attribute specifies an optional tooltip

<img src=“C:\Users\Public\Pictures\Sample
Pictures\[Link]” width=“120” height=“90”
alt=“Image” title=“My University”/>

15
NESTING TAGS

 Tags must be correctly nested

 A closing tag must match the most recently opened tag

Chapter 0 Introduction
 The browser may render it correctly anyway, but it is
invalid.

16
HORIZONTAL RULE: <HR>

 A horizontal line to visually separate sections of a page

 Should be immediately closed with />

Chapter 0 Introduction
<p>Kadoorie University</p>
<hr/>
<p>Computer Engineering</p>

17
LINE BREAK: <BR>

 Forces a line break in the middle of a block element.

 br should be immediately closed with />

Chapter 0 Introduction
<p>Kadoorie university is nice, <br/> and the
Computer Engineering is cool</p>

18
UNORDERED LIST: <UL>, <LI>

 ul represents a bulleted list of items

 li represents a single item within the list

Chapter 0 Introduction
<ul>
<li> Computer Eng </li>
<li> Mechanical Eng </li>
<li> Telecom. Eng </li>
</ul>

19
UNORDERED LIST: <UL>, <LI>
<ul>
<li> Computer Eng:
<ul>

Chapter 0 Introduction
<li> Web Development</li>
<li> Software Engineering</li>
</ul>
</li>
<li> Mechanical Eng:
<ul>
<li> Special Topics I</li>
<li> Special Topics II</li>
</ul>
</li>
<li> Telecom. Eng:
</li>
</ul>
20
ORDERED LIST: <OL>

 ol represents a numbered list of items

Chapter 0 Introduction
<ol>
<li> Computer Eng </li>
<li> Mechanical Eng </li>
<li> Telecom. Eng </li>
</ol>

21
HTML DESCRIPTION LISTS
 <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Chapter 0 Introduction
QUESTIONS
Lecture 03

HTML
HTML TEXT FORMATTING ELEMENTS

 HTML defines special elements, for defining text with a

special meaning.

Chapter 0 Introduction
 Formatting elements were designed to display special
types of text:
 Bold text
 Important text
 Italic text
 Emphasized text
 Marked text
 Small text
 Deleted text
 Inserted text
 Subscripts 2
 Superscripts
BOLD AND STRONG

 The HTML <b> element defines bold text, without

any extra importance.

Chapter 0 Introduction
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>

 The HTML <strong> element defines strong text,

with added semantic "strong" importance.
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>

3
ITALIC AND EMPHASIZED

 The HTML <i> element defines italic text, without

any extra importance.

Chapter 0 Introduction
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>

 The HTML <em> element defines emphasized text,

with added semantic importance.
<p>This text is normal.</p>
<p><em>This text is emphasized </em>.</p>

4
UNDERLINE AND PRE-FORMATTED

 The HTML <u> element defines underlined text.

<p><u>This text is underlined</u>.</p>

Chapter 0 Introduction
 The HTML <pre> element defines a block of pre-
formatted text, with structured spaces and lines.
 To display anything, with right spacing and line-
breaks, you must wrap the text in a <pre> element:
<pre>This text is
not formatted</pre>
5
SMALL AND MARKED

 The HTML <small> element defines small text:

<h2>HTML <small>Small</small>

Chapter 0 Introduction
Formatting</h2>

 The HTML <mark> element defines marked or

highlighted text:
<h2>HTML <mark>Marked</mark>
Formatting</h2>

6
DELETED AND INSERTED

 The HTML <del> element defines deleted (removed)

of text.

Chapter 0 Introduction
<p>My favorite color is <del>blue</del> red.</p>

 The HTML <ins> element defines inserted (added)

text.
<p>My favorite <ins>color</ins> is red.</p>

7
 AND SUPERSCRIPT
SUBSCRIPT

 The HTML <sub> element defines subscripted text.

<p>This is _subscripted text.</p>

Chapter 0 Introduction
 The HTML <sup> element defines superscripted
text.
<p>This is ^{superscripted} text.</p>

8
HTML STYLES

 Every HTML element has a default style

(background color is white, text color is black, text-size

Chapter 0 Introduction
is 12px ...)
 Changing the default style of an HTML element, can
be done with the style attribute

 The HTML Style Attribute:

style="property:value"

9
HTML STYLES

 <!DOCTYPE html>
<html>

Chapter 0 Introduction
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

10
HTML TEXT COLOR

 The color property defines the text color to be used for an

HTML element

Chapter 0 Introduction
 <!DOCTYPE html>
<html>

<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>

</html>
11
HTML TEXT FONTS

 The font-family property defines the font to be used for an

HTML element

Chapter 0 Introduction
 <!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>

</html>
12
HTML TEXT SIZE

 The font-size property defines the text size to be used for

an HTML element

Chapter 0 Introduction
 <!DOCTYPE html>
<html>

<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:26pt">This is a paragraph.</p>
</body>

</html>
13
HTML TEXT ALIGNMENT

 The text-align property defines the horizontal text

alignment for an HTML element

Chapter 0 Introduction
 <!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
14
HTML <Q> FOR SHORT QUOTATIONS

 Browsers usually insert quotation marks around the <q>

element.

Chapter 0 Introduction
 <!DOCTYPE html>
<html>
<body>
<p>WWF's goal is to: <q>Build a future where people live
in harmony with nature.</q></p>

</body>
</html>
15
HTML <ABBR> FOR ABBREVIATIONS

 The HTML <abbr> element defines an abbreviation or an

acronym.
Marking abbreviations can give useful information to browsers,

Chapter 0 Introduction

translation systems and search-engines.

 <!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p>

</body>
</html>
16
HTML COMMENT TAGS

 You can add comments to your HTML source by using

the following syntax:

Chapter 0 Introduction
<!-- Write your comments here -->

 Comments are not displayed by the browser, but they

can help document your HTML.

17
 Chapter 0 Introduction
QUESTIONS
 HTML Lists

• HTML can have:

– Unordered lists
• The first item
• The second item

Chapter 0 Introduction
– Ordered lists
1. The first item
2. The second item

– Description lists:
The first item
1
Description of item
 Unordered Lists

• An unordered list starts with the <ul> tag.

Each list item starts with the <li> tag.
• The list items will be marked with bullets

Chapter 0 Introduction
(small black circles).
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> 2
 The Style Attribute

• A style attribute can be added to

an unordered list, to define the style of the
marker:

Chapter 0 Introduction
Style Description
list-style-type:disc The list items will be marked with bullets
(default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

3
 The Style Attribute
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

Chapter 0 Introduction
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
4
</html>
 Ordered Lists

• An ordered list starts with the <ol> tag. Each

list item starts with the <li> tag.
• The list items will be marked with numbers.

Chapter 0 Introduction
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
5
 The Type Attribute

• A type attribute can be added to an ordered

list, to define the type of the marker:
Style Description

Chapter 0 Introduction
type="1" The list items will be numbered with numbers
(default)
type=“A" The list items will be numbered with uppercase
letters
type=“a" The list items will be numbered with lowercase
letters
type=“I" The list items will be numbered with uppercase
roman numbers
type=“i" The list items will be numbered with lowercase 6

roman numbers
 The Type Attribute
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

Chapter 0 Introduction
<ol type=“A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
7
</html>
 Description Lists

• A description list, is a list of terms, with a

description of each term.
• The <dl> tag defines a description list.

Chapter 0 Introduction
– The <dt> tag defines the term (name), and
the <dd> tag defines the data (description).
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> 8
 Nested HTML Lists

• List can be nested (lists inside lists).

<ul>
<li>Coffee</li>

Chapter 0 Introduction
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
9
</ul>
 Iframe - Remove the Border

• By default, an iframe has a black border

around it.
• To remove the border, add the style attribute

Chapter 0 Introduction
and use the CSS border property:
<iframe src=" [Link] "
style="border:none"></iframe>

 Change the size, style and color of the iframe's border:

<iframe src=" [Link] " style="border:5px
dotted red"></iframe> 10
Use iframe as a Target for a Link

• An iframe can be used as the target frame for

a link.
• The target attribute of the link must refer to

Chapter 0 Introduction
the name attribute of the iframe:
<iframe width="100%" height="300px"
src="[Link] name=" iframe_a
"></iframe>
<p><a href="[Link] target=" iframe_a
">[Link]</a></p>
11
 The HTML <meta> Element

• The <meta> element is used to specify

page description, keywords, author, and
other metadata.

Chapter 0 Introduction
• Meta data is used by browsers (how to
display content), by search engines
(keywords), and other web services.
• Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML,
12
XHTML, JavaScript">
 The HTML <meta> Element

• Define a description of your web page:

<meta name="description" content="Free Web tutorials on
HTML and CSS">

Chapter 0 Introduction
• Define the author of a page:
<meta name="author" content=“PTUK">

• Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">
13
HTML FORMS - THE <FORM> ELEMENT

 HTML forms are used to collect user input.

 The <form> element defines an HTML form.

Chapter 0 Introduction
<form>
.
form elements
.
</form>

1
THE ACTION ATTRIBUTE

 The action attribute defines the action to be

performed when the form is submitted.

Chapter 0 Introduction
 The common way to submit a form to a server, is by
using a submit button.
 Normally, the form is submitted to a web page on a
web server.
 If the action attribute is omitted, the action is set to
the current page.
 In the example above, a server-side script is specified
to handle the submitted form:
2
<form action="action_page.php">
THE METHOD ATTRIBUTE

 The method attribute specifies the HTTP method

(GET or POST) to be used when submitting the

Chapter 0 Introduction
forms:
<form action="action_page.php" method="GET">

 Or
<form action="action_page.php" method="POST">

3
WHEN TO USE GET?

 You can use GET (the default method):

 When you use GET, the form data will be visible in

Chapter 0 Introduction
the page address:
action_page.php?firstname=Mickey&lastname=Mouse

5
WHEN TO USE POST?

 You should use POST:

If the form includes sensitive information

Chapter 0 Introduction

(password).
 POST offers better security because the submitted
data is not visible in the page address