Hypertext

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 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 Traditional Text vs. Hypertext

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: <tag_name options>Text formatted by this tag</tag_name> • Example: <bold>The browser displays this sentence in bold</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!