Science 105 Day 2

9:00 to 12:15 - How the Internet Works

12:15 to 1:15 - Lunch

1:15 to 4:15 - Make your own Web Page

Slides are at: http://laughton.com/obrien/sjsu/cse/workshop/lesson_internet.html

Download the lesson at: http://laughton.com/obrien/sjsu/cse/workshop/internet_html.zip

Science 105 Day 2

Slides are at: http://laughton.com/obrien/sjsu/cse/workshop/lesson_internet.html

Download the lesson at: http://laughton.com/obrien/sjsu/cse/workshop/internet_html.zip

• Take roll
• Introductions
• Place food order

How the Internet Works

adapted from a lecture by Cay Horstmann

What Is The Internet?

• The Internet
  • A network of connected computers
  • The communication paths connecting more than 3 billion computers.
• Originally developed by DARPA for sharing computer resources
  • stands for Defense Advanced Research Projects Agency
  • part of the Department of Defense

  • 

The Internet

• First used by the US government and large universities to share computer resources
• Became popular because of email
• Exploded with the advent of the Web

The Internet - IP Address

• Every computer on the Internet has a number
  • IP address (Internet Protocol address)
    • Google's IP address: 74.125.239.49
    • San Jose State's IP address 130.65.10.101
    • IP address of my domain (laughton.com:) 216.71.185.45
  • think of an IP address like a phone number
• The IP addresses indicates which computer a message is for
• Try entering the number 130.65.10.101 in the address bar of your browser

The Internet - Domain Name

• Numbers are hard for people to remember
• Many computers on the Internet also have a name called the domain name
  • www.google.com
  • www.sjsu.edu
  • ftp.laughton.com
• When you type www.google.com into your Web browser:
  • the request goes first to a Domain Name Server - DNS
  • it looks up the ip address of www.google.com (74.125.239.49)
  • sends it back to your computer
  • then the request is sent to that ip address

Domain Name Server in Action

*from http://computer.howstuffworks.com/

Domain Names

Common top level domain names

• COM -- commercial Web sites, though open to everyone
• NET -- network Web sites, though open to everyone
• ORG -- non-profit organization Web sites, though open to everyone
• EDU -- restricted to schools and educational organizations
• MIL -- restricted to the U.S. military
• GOV -- restricted to the U.S. government
• LY, UK, RU and other two-letter country codes

 

Difference between Internet and Web

• Many people used the words "Internet" and "Web" interchangeably
• But there is a difference
• The Internet is the pathway
• The Web is a system of interlinked hypertext documents
  • These documents can be accessed over the Internet pathways

Internet Analogy

• Think of the Internet as a highway system
• A highway system by itself is just a bunch of paths
• But many different types of vehicles can travel the highway system
  • cars, trucks, motorcycles, bicycles
• Similarly, the Internet is just a pathway
• Many different services ride the Internet
• The World Wide Web is just one type of service

Some Services That Ride the Internet

• World Wide Web (the most familiar)
• Email service (not web-based)
• FTP - File Transfer Protocol
• Fax over IP
• Voice over IP
• Instant Messaging
• games like World of WarCraft (WoW)

Client / Server Architecture

• The services on the Internet are based on communicate between a client and a server.
  • called client/server architecture

    

• A cent requests a service and a server provides the service.
• The client and the server communicate using a specific protocol
• Many protocols on the Internet

What is a "protocol"

• A set of rules by which two computers communicate
• Determines how data is transmitted in telecommunications and computer networking
• Email -
  • POP3 - receiving mail. Post Office Protocol
  • SMTP - sending mail, Simple Mail Transfer Protocol
• FTP
  • File Transfer Protocol
  • Requires an FTP client on user's computer
  • Look at FileZilla - an FTP client
• World Wide Web
  • uses HTTP - Hyper Text Transfer Protocol
  • Also HTTPS - Hyper Text Transfer Protocol Secure

Sending data on the Internet

• Packet Switching
  • The process by which stuff is sent from one computer to another
• A message is broken into small chunks and numbered by the sender
• The packets are sent on their way (according to the protocol)
• The packets are passed from node to node
• All packets usually take the same route to reach its destination
  • but if there is a problem, an alternate route is used
  • this keeps the Internet running even when there are local outages
• When all packets are received, the message is reassembled

Sending data on the Internet

• Packet switching is part of TCP/IP communications protocol
  • decentralized
  • increases network efficiency
  • makes a more robust network
    • A packet can be sent from one machine to another over many paths
    • This was particularly important to the Department of Defense at the inception of the Internet
• Activity - packet switching

Traceroute

• A diagnostic tool for showing the route and measuring the time taken to access a remote node (computer, router, etc)
• Shows each node the packet takes from client to server.
• traceroute to laughton.com from my house

  

Using traceroute

• Mac OSX
  • open Network Utilities.app
    • up through 10.8 in /Applications/Utilities/
    • from 10.9 in /System/Library/CoreServices/Applications/
      • easiest to search in Spotlight
  • click Traceroute tab
  • enter the domain name in the textbox
    • i.e. www.laughton.com
• Windows
  • open a command prompt
    • up through Windows : click Start -> All Programs-> Accessories -> Command Prompt
    • from Windows 8 on: from the Start screen type command prompt and press enter
  • type: tracert [domain name]
    • i.e. tracert www.laughton.com
    • notice the spelling

The World Wide Web

• System of interlinked hypertext documents
• Stored on computers all over the world called web servers
• Accessed through the Internet.
• Using a Web browser as the client, you request web pages from the Web server (server)
• The server returns the requested page to the client
• The page may contain text, images, videos, and other multimedia
• You can navigate between pages using hyperlinks.
• (from wikipedia.org)

The process

• You type www.google.com into your web browser (client)
  • Sends an HTTP request
• The request is routed to Google's web server (server)
  • A web server is software that can serve web pages
  • That means, it can get the requested page and return it to the computer that requested it.
• The web server finds the document requested and
  • sends it back in an HTTP response
• Then the connection is broken

HTTP Process

• Web client (better known as a "browser") communicates with a Web server
  • uses Hyper Text Transfer Protocol (HTTP)
• Client connects to web server (e.g. http://www.sjsu.edu/index.html)
  • Sends a HTTP Request: GET /index.html
• Web server locates the HTML page
  • sends the page back in an HTTP Response
• Client disconnects from web server

HTTP is a stateless protocol

• Treats each request as an independent transaction
• Unrelated to any previous request
• Communication consists of independent pairs of requests and responses.
• Neither side remembers anything about the last transaction

The Problem of Statelessness

• So how does Amazon.com remember you and greet you by name?
• How can it remember all the things you want to buy?
• Stateless protocol makes it hard to implement things like shopping cart
• You tell browser to visit a store page
• Browser connects, gets the page, disconnects, shows the page
• You click on "add to cart" link
• Browser connects again. Server says “Who are you?”
• How can server remember you?
• Cookies!

Cookies

• Little text file a server can ask the browser to store on your computer
• Can contain information about you and the current visit

Cookies

• You tell browser to visit store page
• Server says “Hello stranger, next time you connect, give me this number: 42385”
• Browser gets the page, disconnects, shows page
• You click on "add to cart" link
• Browser connects again and says “Hello server, the number is 42385. Give me this page.”
• Can also be used to remember your name, etc

Look at your cookies

• Chrome
  • Chrome>preferences> Advanced Settings (on Mac)
  • under Privacy, click Content Settings...
  • Click All cookies and site settings

For other browsers see https://kb.iu.edu/d/ajf

Google Search Engine

• How can it find all those pages so fast?
• Before you even search, Google has “crawled” the web (web crawler)
  • gets a page and looks for its links
  • ...and then gets pages referenced by each link...
  • ...and follows the links in those pages
  • and repeats the process over and over.
• It indexes all this information and stores in a massive database using a very large number of computers
• This database is continually being updated

 

Crawling the Web

Google Data Centers

Found around the world where

• power is cheap and abundant
• available work force
• developable land

 

 

Current Google Data Center Locations

• Americas
  • Berkeley County, South Carolina
  • Council Bluffs, Iowa
  • Douglas County, Georgia
  • Quilicura, Chile
  • Jackson County, Alabama
  • Mayes County, Oklahoma
  • Lenoir, North Carolina The
  • Dalles, Oregon
• Asia
  • Changhua County, Taiwan
  • Singapore
• Europe
  • Hamina, Finland
  • St Ghislain, Belgium
  • Dublin, Ireland
  • Eemshaven, Netherlands
• source: http://www.google.com/about/data centers/inside/locations/index.html
• *************************************************************************

Possible projects

• Create a model of a network
• Create a drawing of a network
• Write a short paper on
  • Domain name server
  • ARPANET
  • TCP/IP

Create your own Web Page

Web Pages

• A Web page contains all the information about how to display that page.
• It is a text file, usually with a .html extension
• The creator of the page uploads the file to his/her domain on a Web server.
  • I uploaded this page to my ISP (Internet Service Provider) which hosts laughton.com
• Pages are written using HTML
  • HyperText Markup Language
• Web browsers know how to render the HTML text into a webpage

HTML

• Hyper Text Markup Language
• The language of the web
• Look at this Web page: http://www.laughton.com/obrien/sjsu/cse/workshop/cats.html
• Right click and pick View Source, View Page, or View Page Source depending on your browser
• This is the text that is stored on my Web Server.
• After requesting the page, your browser displays it (renders it)

What is HTML?

Get a Web Host

• HTML is used to create Web pages
• A set of interconnected Web pages make a Web site
• To have a Web site, you need to have a Web host (a computer that can serve Web pages)
• So let's get a Web host

Get a Web Host

• Go to www.000webhost.com
• Click "Sign up" in the lower right
• Fill in the form using the recommended option
• Note your URL.
• You may need to scroll down to finish
• Check your email and click on the confirmation link in the email
• Write down your username and password
• You will get additional emails. Wait for the one that says your account is set up.
• Into the address bar of your web browser, enter the URL for your Website.
• You will see a temporary page (called a landing page.)
  • we will delete it later
• You can manage your site from http://members.000webhost.com/

Controlling with your site

• Go back to the members area: http://members.000webhost.com/
• if necessary, sign in again
• Click Go to CPanel
  • CPanel (Control Panel) lets you manage your site
• Scroll down and click File Manager
  • any problems?
• Click on public_html
  • This folder will hold the Web pages for your Website
  • right now, public_html contains default.php.

Why do you see a page when you enter your URL?

• You normally need to specify the name of the file you want the browser to retrieve
• If no file name is specified, the server has a list of file names it will search for
  • if it finds one, it will return it
• index.html is the most common.
• But any file can be in the list
  • 000webhost specifies default.php

Don't see your file extensions on Windows?

• What is a file extension?

  File names are made up of two parts: a name and a file extension. The file extension is a . (dot) followed by 2, 3, 4 letters. Examples are .docx, .txt, .html. The file extension tells the operating system what application to use to open the file. Microsoft, in its questionable wisdom, hides the file extensions by default. This can cause you a lot of grief when you need to know the extension.

• So let's fix the problem
  1. Open the Control Panel
     1. On Windows 7, classic the Start button. Type Control Panel in Search Programs and Files box
     2. On Windows 8, go to the Start Page. Click Search (the magnifying class on the right. Type Control Panel in the Search box
  2. in the search box on the right, type folder. Then select Folder Options
  3. Click the View tab
  4. In the bottom section, under Advanced Setting, uncheck the box that says "Hide extensions for know file types"
  5. Click OK
• Now you should be able to see the file extensions

 

Folders

• 000webhost is a Linux server
• On a Linux server, all Web pages go in public_html
• When a user types in a URL of your site, the Web server will look in the public_html
  • you can add folders inside public_html
• If someone types http://kobrien.webege.com/cats.html
  • the server looks for a file named cats.html in public_html folder
  • Note: the viewer never sees the name public_html
  • Server will not find the page: 404 Page not found error
• If someone types http://kobrien.webege.com/animals/cats.html
  • the server looks for a file named cats.html in the animals folder in public_html folder
  • Again - will not find it: 404 Page not found error
• Beware: Linux operating system is case sensitive.
  • Cats.html, cats.html, and CATS.html are all different files
  • file names in Windows and MacOS are not case sensitive
• Recommendation - always use lowercase for file names
  • so you do not have to remember which case you used.

Creating a mirror folder on your computer

• Create a new folder called public_html on your computer
• It can be anywhere convenient
  • Documents, Desktop
• This folder will contain exactly the same folder and files as on your 000webhost site
• Inside this folder, create a new folder called "images"
  • make it lower case
  • this is where you will put the images you want to display on your Website
  • You do not have to put images in a separate folder, but it helps keep your files organize
  • We will add an images folder to public_html on the server later

Getting an HTML Editor

• You can create a Web page using a plain text editor like Notepad
• But it is a lot of work and error-prone
• We will use a WYSIWYG html editor
  • WYSIWYG means "What You See Is What You Get"
  • The editor will mostly do what you want
• We will use a free program called SeaMonkey

• Download Seamonkey -an HTML editor + browser

  • http://www.seamonkey-project.org/ 
  • install

Making a page - Using SeaMonkey

• Open SeaMonkey
  • you will see a browser
• Click File > New > Composer Page
  • this is where you will create your page
• Save the file right now in your public_html folder
• Bad things will happen if you try to add a link or an image before the file is save
• When you save, it will ask you for a title.
  • This is what is displayed on the browser tab
  • I will use SeaMonkey Demo
• When you get the save dialog box, the default file name is the title.
  • let's change it
  • I will call mine demo.html

Closing and reopening file

• Close the HTML file
• Open SeaMonkey again if necessary
• Click File > New > Composer Page
• Click the Open icon in the main toolbar
• Navigate to demo.html in your public_html

Adding Headers and Paragraphs

• Type "Welcome to my Page"
• Put your cursor on the line
• In the upper left hand corner, click the drop down menu "Body Text"
• Select "Heading 1"
  • this is an h1 header
    
    

Adding Headers and Paragraphs

• On the next line, put your name
  • make it an h2 header by selecting "Heading 2" from "BodyText" menu
• On the next line, we will add a paragraph of text
  • Type "This is my very first web page"
  • It is probably already a paragraph
  • if not, put your cursor on the line and select "Paragraph" from "BodyText" menu

Viewing the HTML code

• You can look at the HTML that SeaMonkey created
• At the bottom, there are tabs that change how the page is viewed
• Select <HTML> Source
  

Viewing the HTML code

• Look at the structure of the source code
• Click "HTML Tags" tab
• Now click "Normal" tab again

Set Alignment of Text

>
• Select the h1 header "Welcom to my page
• In the tool bar, you can choose how that text is aligned
  
• Pick Align text centered

Change Text and Background Color

• Select the h1 header
• In the secondary toolbar, click the black square
  
• In the color picker dialog box, pick the text color you want
• If you click the white square, you can change the background color of the page

Change the Font

• Select your name (in the h2 header)
• Click the Format menu
• Put your coursor over the word Font
• A submenu appears letting you select a font
• Pick Comic Sans MS
  

Some Images

• Here are some images for us to play with
   
• Right click on the images and pick "Save image as"
• Navigate to your images folder in public_html on your computer
• Save the images there

 

Insert an Image

• Click on the Image icon in the main toolbar
• In the dialog box, navigate to public_html/images folder on your computer and choose an image
• Be sure that "URL is relative to page location" is check
  • If not, STOP! There is a problem and we need to solve it
  • The file chooser should not have "file:/// ..."
  
  
  

Insert an Image

• Enter a short description in "Alternate text"
  • This helps vision impaired people who use a screen reader
  • It will also display on the page if the image is not found.
• Click OK
  
• Look at the HTML source (remember how to do that?)
• Find the img tag.
  • look at the "src" attribute
  • it should say "images/..."
  • if it says something like "file:/// ... " then there is a problem
  
  

Make Lists

• Lists come in three kinds. We will talk about two
  • ordered
  • unordered
• Click on "Apply or remove numbered list"
  
• Type one item
• Press return or enter
• Type another item
• Continue until you are done
• Press return or enter again to remove the last number

Add a Table

• Tables are used to present tabular data
• Click "Table" icon in the main toolbar
• In the dialog box, specify the table parameters
  
• Click OK
• Fill in the data in the table

Second page

• We want to a link, but we need a second page to link to
• Click the New icon in the main toolbar
• Save as second.html
• Take a few minutes to add some content

Add internal links

• Select demo.html (not second.html)
• At the bottom, add the text "Go to second page"
• Select the text
• Click "Link" icon in main toolbar
• Navigate to public_html
• Choose "second.html"
  
• Be sure"URL is relative to page location" is checked
  • If not, STOP! There is a problem and we need to solve it
• Click OK

Adding external links

• We can also add a link to a location outside our Web site
• At the bottom of demo.html, type "search on Google"
• Select the text
• Click the Link icon on the main tool bar
• The easiest way to get the web address in the proper format is to
  • open to a new browser tab
  • enter google.com in the address bar
  • press enter
  • now copy the address from the address bar
  • return to demo.html and paste.
  • the URL will be in the proper format: http://...
• Click OK

Uploading to your server - deleting a file

• Go to to the members area of 000webhost: http://members.000webhost.com/
• Sign in
• Go to CPanel
• Click File Manager
• Log in to FTP if needed
• Open public_html folder if needed
• Check the box in front of default.php
• Click the Delete button
  
• DO NOT DELETE .htaccess file
• Click the green check mark to really delete
• Click blue arrow to return to file manager
  

Uploading to your server - making a folder

• Click the New Dir button
  • this will let you make a new directory
  • "directory" is Linux-speak for "folder"
• Enter "images" in the textbox (lowercase)
• Click the green check mark to make the folder
• Click blue arrow to return to file manager
• You should see an images folder

Uploading to your server - uploading files

• In SeaMonkey Composer, save both your files
• Back in CPanel: Be sure you are in your public_html folder
  • look in the text box in the upper left
• Click the Upload button near the New Dir button
• On the page that opens, click Choose file button
• Navigate to your public_html folder
• Select demo.html
• See the file name next to the button?
• Click the second Choose file button
• Select second.html
• Click the green check mark to upload the files
• Click blue arrow to return to file manager

Looking at what we have so far

• Open a new browser tab
• Type your URL in the address bar
• You will see a listing of the files on your website
  • If you do not get that, you may have deleted .htaccess or not deleted default.php
• That is not really what we want.
• Go back to the address bar.
• Following the URL, type /demo.html (including the leading /)
• Press enter
• You should see your page
• BUT: Oops - the image is broken. Why?

Uploading to your server - uploading images

• Go back to File Manager
• Click on the images folder
  • you will see the folder name in the textbox at the upper left
• Click the Upload button
• Click Choose File and pick your image
• Click the green check mark to upload the files
• Click blue arrow to return to file manager
• Go back to your web site
• Click refresh
• You should see your page complete with images

Testing the links

• On your demo.html page, click on the "go to second page" link
  • what happens?
• Click the browser's back button
• You should be back to demo.html
• Click on the "search with Google" link
  • What happens?
• Click the browser's back button
• Congratulations. You have a Web site.
• !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Assignment

• Create a two (three) page website on your server
• Choose a topic that interests you
• Include
  • two headers
  • two paragraphs
  • colored text
  • text in a different font
  • two images
  • one link to an external site
  • one link to another page on your site
  • one list
  • one table

Title

Title