Learning Objectives

• History of Internet

• Learn about the different components that make the

Internet work.

Introduction to Internet and • Understand how standards, services, and protocols allow
different hardware and software to work together.
World Wide Web
• Have a basic understanding of Internet architecture and
SCCS 201 Web Programming 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 Terminology (Cont.)
• Network. A group of computers connected together. • Domain name. A name used to identify a computer on
the internet instead of an IP address, e.g.
• Server. A computer that provides services or resources, www.google.com.
e.g. web server, mail server.
• Firewall. A hardware acts like a guard to examine data
• Client. A user computer that connects to obtain data and going into/out of a network for security purpose.
services from servers.

• 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 What is the WWW?
• WWW stands for the World Wide Web, called the Web.
• A server that provides service to translate between IP • Introduced in 1990 by Tim Berners-Lee
addresses and friendly domain names • WWW is a service designed to allow easier access to the
information on the Internet through the use of graphical user
- e.g. www.google.com. = 66.249.89.104 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”.
13 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:[email protected]: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 • HTML is the language of the Web, and every
content to be displayed, i.e. control the Web developer should have a basic
appearance and layout of the pages. understanding of it.
• These instructions are called HTML markup • HTML stands for Hyper Text Markup Language.
tags. The browser displays the page by reading • An HTML file is a text file containing HTML
and process these instructions markup tags.
• The HTML tag for displaying a sentence using • An HTML file usually have an .htm or .html file
bold font is <b>, </b> extension.
For example: <b>This text is bold.</b> • An HTML file can be created using a simple text
editor like notepad or EditPlus.
21 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
 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.
25 26

Web Programming What is CSS?

• Pure HTML is static but we need web pages that • CSS stands for Cascading Style Sheets
– Dynamically change any content of a Web page, e.g. animation
– Respond to user queries or data submitted from HTML forms • Styles define how to display HTML elements
– Access any data or databases and return the results to a browser • When styles are saved in external files, CSS
– Be customized to make it more useful for individual users files, you can change the style and appearance
• So, web programming is a combination of the following two of all the HTML pages in your Web, just by
or more components to meet the above requirements:
– HTML provides formatting and layout of text and graphics as well as
changing your CSS files.
hypertext links between web pages • Internal and external style sheets will Cascade
– CSS (Cascading Style Sheet) provides more powerful control of
style and formatting. into one
– Client-Side Scripts provide processing at browser, e.g. JavaScript, • With CSS, your HTML documents can be
ActiveX components, Java applets, Flash components, and so forth.
They provide dynamically changing web page content. displayed using different output styles:
– Server-Side Scripts provide server processing, e.g. CGI, ASP, JSP http://www.w3schools.com/css/css_syntax.asp
PHP, and others. They enables access to databases and other
information resources. http://www.w3schools.com/css/css_examples.asp
27 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 can react to events
• JavaScript gives HTML designers a programming tool A JavaScript can be set to execute when
HTML authors are normally not programmers, but something happens, like when a page has
JavaScript is a scripting language with a very simple finished loading or when a user clicks on an
syntax! Almost anyone can put small "snippets" of HTML element.
code into their HTML pages. • JavaScript can read and write HTML elements
• JavaScript can put dynamic text into an HTML page A JavaScript can read and change the content of
an HTML element.
JavaScript statement like this:
• JavaScript can be used to validate data
document.write("<h1>" + name + "</h1>")
A JavaScript can be used to validate form data
can write a variable text into an HTML page. before it is submitted to a server, this will save
the server from extra processing.
31 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>