1. Hypertext Computer Science 01i Introduction to the Internet Neal Sample 6 February 2001

2. Hypertext “An approach to information management in which data is stored in a network of nodes connected by links.” - Smith & Weiss in 1968 Coined by Ted Nelson in 1968 Concept originally proposed by Vannevar Bush in 1945 as “MEMEX” or Memory Extension British Telecomm: patent number 4,873,662  issued to BT in the U.S. in 1989  expires in 2006

3. Traditional Text vs. Hypertext Traditional  Mostly linear  Great deal of structure  Generally fairly long chunks of text  Cross-referencing awkward Hypertext  Non linear  less structured  Often shorter pieces  Cross referencing easy

4. Implications of Hypertext Easy to get lost  Although a document may have structure, most look like mazes Easy to lose focus  The “off site links problem” for web sites Easy to lose context  Authors cannot assume the reader has read a certain part of the document before  Can refer back to a necessary part right in the text

5. HTML Overview HTML: a text file with “tags” describing the structure of the text Originally, HTML only described the structure of a page, not its look Different browsers may display the same page differently Easy to get things to look good. (Hard to get them to look perfect) You can see the HTML of any page you view

6. Graphical Editor or Source Code? Should you edit raw HTML in a text file or use a graphical editor like FrontPage?

7. Source Code Humans can write smaller, better HTML that graphical editors If something goes wrong, you understand the code better and can fix it You can do cooler things directly in the source code The graphical editors cannot even do some standard things

8. Graphical Editor Not everyone wants to be a programmer When was the last time you wrote a term- paper in Postscript or PCL? Easier to see what’s going on Don’t have to remember as much Certain errors are impossible to make Editors will only get better

9. My Opinion Mock up the page in a graphical editor Maintain it in raw HTML Do what is easiest for you This debate has raged in CS communities for years on very similar topics  assembly vs High Level Languages  GUIs vs command line interfaces

10. HTML Tags A typical tag looks like this: Text formatted by this tag  Example: The browser displays this sentence in bold When the browser displays the page, it formats the page according to tags No other formatting is done except wrapping lines

11. Setting up a Leland web-page - 1 Login to your Leland account Change to your home directory: cd ~ Create a directory called “WWW” mkdir WWW The world can see anything in this directory or any subdirectory. Be careful what you put here!

12. Setting up a Leland web-page - 2 Set the appropriate permissions fs setacl WWW system:anyuser read fs setacl. system:anyuser 1 Create an HTML file called “index.html”  This will be your homepage! Try it out. The URL is:  http://www.stanford.edu/~Your_Leland_Name You will be added to the Stanford list of home pages automatically

13. Picture Formats: GIF Graphic Interchange Format  Best for art with large areas of the same color such as icons and clip art  Bad for continuous tone pictures like a camera generates  Patented. Requires licensing… probably on its way out.

14. Picture Formats: JPEG and PNG JPEG: Joint Photographic Experts Group  Good for continuous tone pictures  Bad for clip and line art PNG: Portable Network Graphics  Designed as a replacement for GIF  Becoming more popular

15. Assignment 1: Review a small organizations web page  small newspapers, small cities, local company What is the point? What is the site’s structure? Does it look good? Is it credible? Paper or electronic submission is okay. Be brief! Make sure you include the URL!