CSSE 290 Web Programming

Lecture 1: Internet/WWW

Reading: Ch. 1

Attribution:Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

Course Intro/Setup 1

• In-class partner selection, sign the contract
• Students and assistants introduce yourselves
  • Name (include the name you'd like us to call you)
  • Hometown
  • (briefly) Your previous experience with web page creation
• Instructor introduction
  • Why I am doing this course (fill a gap, learn by teaching)
  • We will all learn from each other
  • If you are looking for advanced techniques ...

Course Intro/Setup 2

• Register your codeacademy.com account for this course (form is linked from Schedule page)
• The Piazza page for this course is piazza.com/rose-hulman/winter2015/csse290
• Use Piazza bug_reports folder to report erors in textbook or in my documents; earn extra points!
• Bookmark the course schedule page in your browser:
  https://www.rose-hulman.edu/class/csse/csse290-WebProgramming/201520/Schedule/Schedule.htm

Course Intro/Setup 3

• Grade components
  
• No final exam. We will have project presentations during the scheduled exam time.
• Do you have any questions about course procedures?
• Read the syllabus before the next class meeting
• Early this week: Do lots of textbook reading and Codecademy work
• Look at the announcements page (also linked from the schedule page)

Install Aptana Studio 3 Plugin for Eclipse

The update site to use within Eclipse is http://download.aptana.com/studio3/plugin/install.
Trying to access this URL directly in a web browser returns an Access Denied error.

1. From Eclipse's Help menu, select Install New Software... to open the Install New Software dialog.
2. Paste the URL for the update site into the Work With text box, and press the Enter (or Return) key.
3. In the populated table below, check the box next to the name of the plug-in, and then click the Next button.
4. Click the Next button to go to the license page.
5. Choose the option to accept the terms of the license agreement, and click the Finish button.
6. You may need to restart Eclipse to continue.

5-minute Break

We should have a break every class day, sometime near the middle of the two-class period

If you neeed help with Aptana installation, get help form an assistant or a fellow student.

1.1: The Internet

• 1.1: The Internet
• 1.2: The World Wide Web (WWW)

The Internet

• Wikipedia: http://en.wikipedia.org/wiki/Internet
• a connection of computer networks using the Internet Protocol (IP)
• layers of communication protocols: IP → TCP/UDP → HTTP/FTP/POP/SMTP/SSH...
• What's the difference between the Internet and the World Wide Web (WWW)?

Brief History of the Internet

• began as a US Department of Defense network called ARPANET (1960s-70s)
• initial services: electronic mail, file transfer
• opened to commercial interests and most universities in late 80s
• WWW created in 1989-91 by Tim Berners-Lee
• early web browsers released: Mosaic 1992, Netscape 1994, Internet Explorer 1995
• Amazon.com opens in 1995; Google January 1996
• Hamster Dance web page created in 1999

People and Organizations

• Internet Engineering Task Force (IETF): internet protocol standards
• Internet Corporation for Assigned Names and Numbers (ICANN):
  decides top-level domain names
• World Wide Web Consortium (W3C): web standards

Layered Network Architecture

The internet uses a layered hardware/software architecture (also called the "OSI model"):

• physical layer: devices such as ethernet, coaxial cables, fiber-optic lines, modems
• data link layer: basic hardware protocols (ethernet, wifi, DSL PPP)
• network / internet layer: basic software protocol (IP)
• transport layer: adds reliability to network layer (TCP, UDP)
• application layer: implements specific communication for each kind of program (HTTP, POP3/IMAP, SSH, FTP)

Internet Protocol (IP)

• a simple protocol for attempting to send data between two computers
• each device has a 32-bit IP address written as four 8-bit numbers (0-255)
  
• find out your internet IP address: whatismyip.com
• find out your local IP address:
  • in a terminal window, type: ipconfig (Windows) or ifconfig (Mac/Linux)
• Rose-Hulman IP addresses begin with 137.112

Transmission Control Protocol (TCP)

• adds multiplexing and guaranteed packet delivery on top of IP
• multiplexing: multiple programs using the same IP address
  • port: a number given to each program or service
  • port 80: web browser (port 443 for secure browsing)
  • port 25: email
  • port 22: ssh and sftp
  • port 3306: mySQL
  • additional common ports
• some programs (games, streaming media programs) use simpler UDP protocol instead of TCP

Web servers and Browsers

• web server: software that listens for web page
  requests and delivers the requested pages.
  • Apache
  • Microsoft (Internet Information Server (IIS))
  • Passenger for serving Ruby on Rails (and other) applications

Web Servers and Browsers

• web browser: gets and renders documents from servers. Popular browsers:

Domain Name System (DNS)

• a set of servers that map written names to IP addresses
  • Example: www.rose-hulman.edu → 137.112.18.53

Uniform Resource Locator (URL)

• an identifier for the location of a document on a web site
• a basic URL:

  http://www.aw-bc.com/info/regesstepp/index.html
  ~~~~   ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~
  protocol    host                path
  

• upon entering this URL into the browser, it would:
  • ask the DNS server for the IP address of www.aw-bc.com
  • connect to that IP address at port 80
  • ask the server to GET /info/regesstepp/index.html
  • display the resulting page on the screen

Advanced URLs

• anchor: jumps to a given section of a web page

  	
    http://en.wikipedia.org/wiki/HTML_element#Anchor
  

  • fetches HTML_element file, then jumps down to the part of the page labeled Anchor
• port: for web servers on ports other than the default 80

  	
    http://portquiz.net:8080/index.php
  
  

• query string: a set of parameters passed to a web program

  	
    http://www.google.com/search?q=miserable+failure&start=10
  

  • parameter q is set to "miserable+failure"
  • parameter start is set to 10

Hypertext Transport Protocol (HTTP)

• the set of commands understood by a web server and sent from a browser.
  Some HTTP commands (your browser sends these internally):
  • GET  filename : download
  • POST filename : send info back to the server
  • PUT  filename : upload (infrequently used)

Hypertext Transport Protocol (HTTP)

• simulate a browser with a terminal window:

  sliderule 12:50am > telnet wwwuser.csse.rose-hulman.edu 80
  Trying 137.112.40.39...
  Connected to wwwuser.csse.rose-hulman.edu.
  Escape character is '^]'.
  GET /index.html
  <HTML>
    <H2>
      <UL>
  	  <LI> <a href=/srproj>Sr Project Website</a> </LI>
  	  <LI> <a href=/phpmyadmin>phpmyadmin</a> </LI>
      </UL>
    </H2>
  </HTML>
  Connection closed by foreign host.
  sliderule 12:51am > 
  

• Note that the above is not a very good example of HTML code

HTTP error codes

• when something goes wrong, the web server returns a special "error code" number to the browser, possibly followed by an HTML document
• common error codes:

  Number	Meaning
  200	OK
  301-303	page has moved (permanently or temporarily)
  403	you are forbidden to access this page
  404	page not found
  500	internal server error
  complete list

Internet Media ("MIME") types

• sometimes when including resources in a page (style sheet, icon, multimedia object), we specify their type of data

  MIME type	file extension
  text/html	.html
  text/plain	.txt
  image/gif	.gif
  image/jpeg	.jpg
  video/quicktime	.mov
  application/octet-stream	.exe

• List of media types,
  Mime types listed by file extension

Some Web Languages / Technologies

• Hypertext Markup Language (HTML): used for writing web pages
• Cascading Style Sheets (CSS): stylistic info for web pages
• PHP: Hypertext Processor (PHP): dynamically create pages on a web server
• JavaScript¹: interactive and programmable web pages
• Asynchronous JavaScript and XML (Ajax): quickly access data for web applications
• eXtensible Markup Language (XML): metalanguage for organizing data
• JavaScript Object Notation (JSON): alternative to XML
• Structured Query Language (SQL): interaction with databases

¹Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by Self and Scheme programming languages.

Hypertext Markup Language (HTML)

• describes the content and structure of information on a web page
  • not the same as the presentation (appearance on screen)
• surrounds text content with opening and closing tags
• each tag's name is called an element
  • syntax: <element> content </element>
  • example: <p>This is a paragraph</p>
• most whitespace is insignificant in HTML (ignored or collapsed to a single space)
• we will use HTML5 syntax
  • although this course will not focus on newer HTML5 features

Structure of an HTML Page

<!DOCTYPE html>
<html>
	<head>
		information about the page
	</head>

	<body>
		page contents
	</body>
</html>

• the header describes the page, and the body contains the page's contents
• an HTML page is saved in a file whose name has extension .html (or sometimes .htm)
• DOCTYPE tag tells browser to interpret our page's code as HTML5, the latest/greatest version of the language

Page title: <title>

describes the title of the web page

<title>Chapter 2: HTML Basics</title>

• placed within the head of the page
• displayed in the web browser's title bar and when bookmarking the page

Paragraph: <p>

paragraphs of text (block)

<p>
Notice that the layout   of the
input text   makes     little diffference in a
paragraph.               The browser collapses multiple
spaces and treats line breaks as spaces.</p>

• placed within the body of the page
• more paragraph examples

Headings: <h1>, <h2>, ..., <h6>

headings to separate major areas of the page (block)

<h1>University of Whoville</h1>
<h2>Department of Computer Science</h2>
<h3>Sponsored by Big Rich West-coast Corporation</h3>
<h6>We teach good stuff here!</h6>

• More heading examples

Slides Not Shown in 2014-15 Class Session

• I did not show the next five slides in class.
• But I discussed them and included examples in the HTML code that we wrote.

Line Break: <br>

forces a line break in the middle of a block element (inline)

<p>Teddy said it was a hat, <br /> So I put it on.</p>
<p>Now Daddy's sayin', <br /> Where has
the toilet plunger gone?</p>

• Warning: Don't over-use br (guideline: >= 2 in a row is bad)

Nesting Tags

<p>
	HTML is <em>really,
	<strong>REALLY</em> lots of</strong> fun!
</p>

• Tags must be correctly nested
  • (a closing tag must match the most recently opened tag)
• The browser may render it as you intended anyway, but it is invalid HTML

Phrase Elements : <em>, <strong>

em : emphasized text (usually rendered in italic)
strong : strongly emphasized text (usually rendered in bold)

<p>
	HTML is <em>really</em>,
	<strong>REALLY</strong> fun!
</p>

• As usual, the tags must be properly nested for a valid page

Unordered list: <ul>, <li>

ul represents a bulleted list of items (block)
li represents a single item within the list (block)

<ul>
	<li>The Fellowship of the Ring</li>
	<li>The Two Towers</li>
	<li>The Return of the King</li>
</ul>

More about unordered lists

• a list can contain other lists:

<ul>
	<li>Simpsons:
		<ul>
			<li>Homer</li>
			<li>Marge</li>
		</ul>
	</li>
	<li>Family Guy:
		<ul>
			<li>Peter</li>
			<li>Lois</li>
		</ul>
	</li>
</ul>

Notice the proper nesting of tags (indentation makes it clearer)

Ordered list: <ol>

ol represents a numbered list of items (block)

<p>RIAA business model:</p>
<ol>
	<li>Sue customers</li>
	<li>???</li>
	<li>Profit!</li>
</ol>

Let's Make a Page!

• Use some of the above HTML features
• Include a hyperlink if we have time