How the Web Works 1 5/28/2016
advertisement
How the Web Works
1
5/28/2016
Objectives
2
The Internet
Computer hardware and software
Components of web application
User interface design
Development
HTML5 (Hyper text markup language)
CSS (cascading style sheets)
JS (javascript)
Lets create a simple web page
All you need is an editor: lets pick notepad++
And a browser to view your web application: Lets pick Firefox
5/28/2016
The Internet
3
Here is the definition from Wikipedia:
The Internet is the global system of
interconnected computer networks that use the Internet
protocol suite (TCP/IP) to link billions of devices worldwide.
It is a network of networks that consists of millions of private,
public, academic, business, and government networks of local
to global scope, linked by a broad array of electronic, wireless,
and optical networking technologies.
The Internet carries an extensive range of information
resources and services, such as the interlinkedhypertext documents and applications of the World
Wide Web (WWW), electronic mail, telephony, and peer-topeernetworks for file sharing.
5/28/2016
The Web
4
The web (or world wide web) is an application that
runs on the Internet.
One of the ways information can be shared over the
Internet.
It allows documents (containing information) to be
linked via hypertext link
It commonly uses a protocol called Hyper Text
Transfer Protocol (HTTP: also the prefix for most
links)
More recently HTTPS: HTTP Secure for accessing
web pages that require authentication
5/28/2016
Web Servers
5
Web servers are computers that host or “store” the
web documents.
Each device connected to the Internet has an address
called the IP address.
Web server has an IP address that is usually codified
into a meaning sequence of words:
http://www.amazon.com
http://www.castor.cse.buffalo.edu has an IP address
of 128.205.36.29
5/28/2016
Web Browser
6
The information server up by a web server is
consumed/processed by a web browser.
Web browser is an application that runs on the
Internet.
Examples of web browser are: Internet Explorer,
Mozilla Firefox, Google Chrome
5/28/2016
Web Page addresses
7
Web page addresses are defined by Uniform
Resource Locator or (URL).
Lets look at a URL and understand its parts:
http://www.example.com/2012/samples/first.html
http
protocol
www.example.com
Domain & host name
2012/samples
Directory name
Document name
first.html
5/28/2016
How does the URL work?
8
It is somewhat like the address you write on surface
mail:
Country, state, city, street, house#
Postal service figures out these in a sequence and
finally the mail arrives at your home.
The same way computers called “routers” and
domain name servers interpret the URL and direct
the request appropriately to a server.
5/28/2016
Anatomy of a Web page: jan29.html
9
<!DOCTYPE html>
<html>
<head>
<title>Jen's Kitchen</title>
<link rel="stylesheet" href=“jan29.css" type="text/css" >
</head>
<body>
<h1><img src="foods.gif" alt="food illustration"> Jen&rsquo;s Kitchen</h1>
<p>If you love to read about <strong>cooking and eating</strong>, would like to find out
about
some of the best restaurants in the world, or just want a few choice recipes to add to your
collection, <em>this is the site for you!</em></p>
<p><img src="spoon.gif" alt="spoon illustration"> Your pal, Jen at Jen's Kitchen</p>
<hr>
<p><small>Copyright 2011, Jennifer Robbins</small></p>
</body>
</html>
5/28/2016
Style file: jan29.css
10
body { font: normal 1em Verdana; margin: 1em 10%;}
h1 { font: italic 3em Georgia; color: rgb(23, 109, 109); margin:
1em 0 1em;}
img { margin: 0 20px 0 0; }
h1 img { margin-bottom: -20px; }
small { color: #666666; }
5/28/2016
Images
11
We need two images to complete this web page.
Lets get these from the internet and complete the
project.
5/28/2016
Putting it all together
12
5/28/2016
