Learning Objectives

• History of Internet

• Learn about the different components that make the

Internet work.

Introduction to Internet and
World Wide Web
SCCS 201 Web Programming
• Understand how standards, services, and protocols allow
different hardware and software to work together.
• Have a basic understanding of Internet architecture and
addressing.

• Understand how the World Wide Web, Web browsers,

and Web servers work.

Introduction Example uses of Internet

• The Internet had its origins in American
research and defense work of the 1970’s and • Communication
– Hotmail
1980’s. – Messenger
– Web board
• The Internet is a worldwide, publicly
• Knowledge resource
accessible series of interconnection computer – Wiki.org
networks that transmit the data using the – Cnn.com

standard Internet protocol(IP) • Business and service

– Amazon.com
• Internet is the medias that open for the – eBay.com

people to view/share the information and

services over the world.
3 4
 Terminology
• Network. A group of computers connected together.
• Server. A computer that provides services or resources,
e.g. web server, mail server.
• Client. A user computer that connects to obtain data and
services from servers.
Terminology (Cont.)
• Domain name. A name used to identify a computer on
the internet instead of an IP address, e.g.
www.google.com.
• Firewall. A hardware acts like a guard to examine data
going into/out of a network for security purpose.

• Router or gateway. A hardware connecting 2 or more • Domain Name server (DNS). A server that provides
networks that passes data packets from sources to the service to translate between IP addresses and friendly
destinations. domain names, e.g. 66.249.89.104 = www.google.com.

• IP address. A 4-parted numbers used to identify a • Web proxy. A server that provides content (web pages)
computer or machine on the Internet, e.g. 10.22.5.123. caching or blocking services to browser clients.
5 6

The “Cloud” Architecture of the Internet Map of the Internet

7 8
http://research.lumeta.com/ches/map/gallery/isp-ss.gif
 TCP/IP Protocols
Services and Ports
• The Internet uses a packet-switching architecture. This
divides information as chunks of data when it’s sent, and • TCP/IP defines a number of “channels”, called ports, that
provides a means for determining that all of the data arrived a service (server) uses for data transfer to/from clients.
correctly at the target from the source.
• All Internet services work on top of TCP/IP protocols and
• When you send data traffic across the Internet, a protocol have their own specific port numbers and specific
(a predefined interaction between two computers) called the protocols, e.g.
TCP/IP protocol is used. – HTTP 80
– FTP 21
– The Transmission Control Protocol (TCP) part breaks – Telnet 23
the data into small size chunks called packets
– SMTP 25
– The Internet Protocol (IP) part routes them to their
intended address. • The software portion in OS that handles TCP/IP protocols
is called TCP/IP stack.
9 10

IP Addressing Domain Name

• Domain name are hierarchical structures.
• IP addresses are assigned on the basis of the size
– .COM (commercial), .EDU (education), .GOV (government), .ORG
of the enterprise, and its purpose. These network (organization), .CA (Canada), among others
sizes are described as Class A, Class B, or Class C. . (root)

• The IPv4 specifies that Internet addresses are in the .org .com .edu .th .uk .jp
octet form ###.###.###.###; where each ### or .ac
.cnn .google
octet can run from 0 to 255 (28), e.g.
www www news .mahidol
– 64.236.16.116 (cnn)
www student
– 64.58.76.179 (yahoo)
– 216.33.156.119 (ebay) • There are domain name servers (DNS) run a database that
maps addresses to friendly names, and vice versa.
11 12
 Domain Name Server
• A server that provides service to translate between IP
addresses and friendly domain names
- e.g. www.google.com. = 66.249.89.104
13
What is the WWW?
• WWW stands for the World Wide Web, called the Web.
• Introduced in 1990 by Tim Berners-Lee
• WWW is a service designed to allow easier access to the
information on the Internet through the use of graphical user
interfaces.
• A user views Web pages that contain text, images, and
other multimedia and navigates between pages using
hyperlinks.
• WWW uses a standard communication protocol between
servers and clients called HTTP protocol.
• Frequently used (incorrectly) when referring to “The
Internet”.
14

Web Pages and Hypertext Links How Does the WWW Work?

• Web information is stored in documents called

Web pages. Usually they are written in HTML
format.
• Web pages are files stored on computers called
Web servers.
• Computers reading the Web pages are called Web
clients.
• Web clients display the pages with a program
called a Web browser.
• Most popular browsers are Internet Explorer and
Mozilla Firefox.
15 16
How Does the Browser Fetch the Pages? Uniform Resource Locators (URLs)

• A URL is a string used to identify a resource or

• A browser fetches a Web page from a server by
service on the Internet (not just web pages).
an HTTP request.
• A request contains a URL of the page. http://john:secret@www.example.com:8080/demo/index.html
• A URL looks like:
http://www.someone.com/page.html protocol password port
path
username domain name

17 18

Web Servers
• Web servers can be just a single computer or a group
of computers running web server software.
– Apache on Unix or Linux http://www.example.com/demo.html
– Internet Information Server
(IIS) on Windows

• Web servers response the

web pages to browsers
based on HTTP protocol.

Google’s web server cluster

19 20
How Does the Browser Display the Pages? HTML - The Language of the Web

• All Web pages contain instructions on how
content to be displayed, i.e. control the
appearance and layout of the pages.
• These instructions are called HTML markup
tags. The browser displays the page by reading
and process these instructions
• The HTML tag for displaying a sentence using
bold font is <b>, </b>
For example: <b>This text is bold.</b>
21
• HTML is the language of the Web, and every
Web developer should have a basic
understanding of it.
• HTML stands for Hyper Text Markup Language.
• An HTML file is a text file containing HTML
markup tags.
• An HTML file usually have an .htm or .html file
extension.
• An HTML file can be created using a simple text
editor like notepad or EditPlus.
22

Structure of the HTML Web Page Structure of the HTML Web Page
• <html> tag
Type in the following text and save it into the file as The start of an HTML document.
"mypage.htm“, then in a browser, use File/Open • </html> tag
mypage.htm The end of the HTML document.
• <head> and </head> tags
<html> The text between <header> and </header> tag is header
<head> information, it is not displayed in the browser window.
• <title> and </title> tags
<title>Title of page</title> The text between the <title> and </title> tags will be
</head> displayed in your browser's caption.
<body> • <body> and </body> tags
The text between the <body> and </body>tags will be
This is my first homepage. <b>This text is bold.</b> displayed in your browser. It is the content of the page.
</body> • <b> and </b> tags
</html> The text between the <b> and </b> tags will be displayed
in a bold font.
23 24

25
Web Programming
• Pure HTML is static but we need web pages that
– Dynamically change any content of a Web page, e.g. animation
– Respond to user queries or data submitted from HTML forms
– Access any data or databases and return the results to a browser
– Be customized to make it more useful for individual users
• So, web programming is a combination of the following two
or more components to meet the above requirements:
– HTML provides formatting and layout of text and graphics as well as
hypertext links between web pages
– CSS (Cascading Style Sheet) provides more powerful control of
style and formatting.
– Client-Side Scripts provide processing at browser, e.g. JavaScript,
ActiveX components, Java applets, Flash components, and so forth.
They provide dynamically changing web page content.
– Server-Side Scripts provide server processing, e.g. CGI, ASP, JSP
PHP, and others. They enables access to databases and other
information resources.
27
Note on HTML Editors
• You can easily edit HTML files using a
WYSIWYG (what you see is what you get)
editor such as:
– Macromedia Dreamweaver
– FrontPage
– Adobe GoLive
• But if you want to be a skillful Web
developer, you should use a plain text
editor to learn your HTML.
26
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• When styles are saved in external files, CSS
files, you can change the style and appearance
of all the HTML pages in your Web, just by
changing your CSS files.
• Internal and external style sheets will Cascade
into one
• With CSS, your HTML documents can be
displayed using different output styles:
http://www.w3schools.com/css/css_syntax.asp
http://www.w3schools.com/css/css_examples.asp
28
 An Example of CSS
<html>
What is JavaScript?
<head>
<style type="text/css">
• JavaScript is a scripting language which is a
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase} THIS IS SOME TEXT IN A PARAGRAPH
lightweight programming language
p.capitalize {text-transform: capitalize} • A JavaScript is lines of executable computer code
this is some text in a paragraph
</style>
</head> This Is Some Text In A Paragraph and usually embedded directly in HTML pages
• JavaScript is used in millions of Web pages to
<body>
<p class="uppercase">This is some text in a paragraph</p>
improve the design, validate forms, and much more.
<p class="lowercase">This is some text in a paragraph</p> • JavaScript was developed by Netscape and is the
<p class="capitalize">This is some text in a paragraph</p>
</body>
most popular scripting language on the internet.

</html> another example 29 30

Why JavaScript? Why JavaScript?

• JavaScript gives HTML designers a programming tool
HTML authors are normally not programmers, but
JavaScript is a scripting language with a very simple
syntax! Almost anyone can put small "snippets" of
code into their HTML pages.
• JavaScript can put dynamic text into an HTML page
JavaScript statement like this:
document.write("<h1>" + name + "</h1>")
can write a variable text into an HTML page.
31
• JavaScript can react to events
A JavaScript can be set to execute when
something happens, like when a page has
finished loading or when a user clicks on an
HTML element.
• JavaScript can read and write HTML elements
A JavaScript can read and change the content of
an HTML element.
• JavaScript can be used to validate data
A JavaScript can be used to validate form data
before it is submitted to a server, this will save
the server from extra processing.
32
How to Put JavaScript Into an HTML Page Example Explained
To insert a script in an HTML page, we use the <script> tag.
The HTML tag <script> is used to insert JavaScript into Use the type attribute to define the scripting language
an HTML page:
<script type="text/javascript">
<html> <body>
<script type="text/javascript"> Then, the JavaScript starts.
document.write("Hello World!")
The JavaScript command for writing some output to a page is
</script> document.write
</body> </html>
document.write("Hello World!")
The code above will produce this output on an HTML page:
Next, the <script> tag has to be closed
Hello World!
</script>
33 34

Server Side Scripting XML - Extensible Markup Language

• Server-side scripting is a web server technology
• XML is not a replacement for HTML.
that run directly on the web server based on the
user request in order to generate the dynamic • XML is used to describe and transport data, while
HTML page HTML is used to display data.
• With server-side scripting, It is enable you to build • XML and a number of different XML standards
the website that interact with the databases or are rapidly becoming the most common tools for
other data sources and return the results to a data transmission, data storing, and data
browser manipulation.
• To be able to deliver more dynamic web site
content, you should teach yourself server-side
scripting such as ASP, ASP.NET, PHP, JSP,
Servlet, etc.
35 36
 An Example of XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited with XML Spy v2006 (http://www.altova.com) -->
<CATALOG>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
37
</CD>
</CATALOG>