-A +A

 

Crit Assignment 3

How Shall We Do This?

  • Where can we put these things?
  • You should have an external storage device of some kind
    • Memory stick
    • CD Rom
    • Portable hard drive

Assignment 4: Build A Mask

Due Now

A Brief History of the Internet

Early History

  • 1945
  • Vannevar Bush (Science advisor to president roosevelt in WWII) proposes first concept of hypertext, called Memex.
  • 1950
  • The “Red Menace” and sputnik lead to the “Advanced Research Projects Agency” or ARPA in the Department of Defense.
  • 1965
  • Concept of a distributed network of connected computers developed. Key to the concept: If it’s distributed, you can’t kill it with an A-Bomb.
  • 1969
  • Department of Defense commissions ARPANET. The Internet is born.
  • 1970's
  • ARPANET and the NSF get a firm foothold in academia
  • Major internet applications created:
    • Telnet
    • Email
    • Chat
    • Ethernet
    • USENET
    • MUDs (Multi-User Dungeon, Domain or Dimension)
  • 1980's
  • TCP/IP (Transition Control Protocol/Internet Protocol)
  • DNS (Domain Name System)
  • The Well (Whole Earth ‘Lectronic Link)
  • 1988 First Internet worm http://snowplow.org/tom/worm/worm.html
  • 1990
  • World Wide Web WWW released by CERN

The Web Comes of Age

  • 1993
  • Mosaic, first GUI browser, takes the internet by storm. Developed for NCSA (National Center for Supercomputing Applications)
  • 1995
  • Netscape goes public
    • The beginning of the DotCom Bubble
  • 1996
  • 1st Flash player
  • Internet2 Project
  • 1998
  • Mozilla 1.0 first XHTML compliant browser
  • 2000
  • Web size passes 1 billion pages
  • 2001
  • The !@#$%&*! hits the fan
  • 2006

A more complete timeline here

Basic HTML 1

Web Servers & How They Work

  • The web server lives somewhere out there, and is connected to the Internet. So is your computer, or client.
  • The server has a domain name, like www.khazar.com
  • It also has an IP address, like 66.117.153.28
  • Computers can only talk to each other through the IP address, but a Domain Name Server (DNS) that lives on the web intervenes and directs the inquiry to the right server.

The Universal Resource Locator

http://www.khazar.com/academics/portal/ucsc/2008fall/art21/class06.php 
http

tells the browser to use HyperText Transfer Protocol when accessing the internet

://

tells the browser that what comes after it is the server location information

www.khazar.com

is the domain name. The location of the server that holds the domain’s web files is kept by a Domain Name Server (DNS). 

/academics/portal/ucsc/2008fall/art21/

is the path on www.khazar.com’s web server that holds the HTML file 

class06.php

is the name of the HTML file that has the web page your looking at right now

Alphabet Soup

  • HTML: HyperText Markup Language
  • XHTML: eXtensible HyperText Markup Language
  • FTP: File Transfer Protocol
  • SFTP: Secure File Transfer Protocol
  • XML: eXtensible Markup Language
  • But wait, there's more!
    • CGI, PHP, CSS, DHTML, POP3, SHTML, ASP, SMTP…

HTML & XHTML

What are HTML & XHTML?

  • Languages used to tell web browsers how to render a web page

It looks like this in the raw:

<html>
<body>
  <h1>Hello World!</h1>
</body>
</html>

And like this when a browser renders it:

Tags

Structural Tags

<html>
<body>
  <h1>Hello World!</h1>
</body>
</html>

What tags can control

  • Comments
    • <!- This is a comment -l>
  • The color, font face, weight, size and style of text
    • <h1>Hello World!</h1>

<font color="black" face="sans-serif" 
size="+1"><b><i>Hello World!</i></b></font>
  • Tables
    • <table width="100%" border="1">
  <tr>
    <td>
      <p>Hello</p>
    </td>
    <td>
      <p>World!</p>
    </td>
  </tr>
</table>
  • Divisions
    • <div>
  <h2>Hello World!</h2>
</div>
  • Lines
    • <hr />
  • Images
    • <img src="images/icon.gif" />
  • Links
    • <p>Class 6 is <a href="class06.php"> here</a></p>
  • Forms
    • <form name="form1" method="post" action="">
      <input type="text" name="textfield">
    </form>
  • Complex interactions
    • <a href="#"
      onMouseOut="doButton('Norm','home','home');"
      onMouseOver="doButton('Over',hello,hello)"
      onMouseUp="doButton('Norm',hello,hello)"
      onMouseDown="doButton('Down',hello,hello)">
      <img name="hello" src="images/home.gif"
       width="137" height="23" border="0"
       alt="">
    </a>

Assignment 5.1

Basic Page Layout

Set up a page for yourself

Follow these instructions

  • Use an ftp program like Fetch or Cyberduck
  • Set it up with SFTP (not FTP)
  • Upload your finished html file to "public_html" and name it "index.html"
  • Look for it at http://people.ucsc.edu/~your-email-name

Read and do the tutorial at HTML Dog

  • Use TextEdit on Mac, Notepad on Windows
  • Customize the final output to look like this: