WorldWideWeb

The idea of hypertext preceded the World Wide Web by decades. But nearly all hypertext systems worked on local files. Tim Berners-Lee wanted to create a system that would work across networks so that people could link from a file on one machine to another file on another machine.

WorldWideWeb wasn’t just a programme for browsing files. It was a browser and editor. The introductory text reads:

HyperMedia Browser/Editor, An excercise in global information availability by Tim Berners-Lee

Today it’s hard to imagine that web browsers might also be used to create web pages. It turned out that people were quite happy to write HTML by hand—something that Tim Berners-Lee and colleagues never expected. They thought that some kind of user interface would be needed for making web pages and links. That’s what the WorldWideWeb browser provided. You could open a document in one window and “mark” it. Then, in a document in another window, you could create a link to the marked page.

You’ll notice as you use the WorldWideWeb browser that you need to double-click links to open them. That’s because a single click was used for editing.

Browsing

The user interface of the WorldWideWeb browser somewhat blurred the lines between documents on your own computer and documents out on the network. To “browse” directly to a document out on the network, you need to know its URL. But you can’t simply type that URL into an address bar; there is no address bar. Instead you have to follow a sequence of steps:

  1. From the “WorldWideWeb” menu, select “Document”.
  2. Now from the newly-opened “Document” menu, select “Open from full document reference”.
  3. Type the URL into the field marked “reference”.
  4. Press the “Open” button

Once you’ve got a web-based document (or web page, as we would say today) open in WorldWideWeb, you can navigate by double-clicking on links. Every link you double-click will open in a new window.

Linking

At its heart, WorldWideWeb is a word processor …but with links. And just as you can use a word processor purely for reading documents, the real fun comes when you write your own. Especially when you throw hyperlinks into the mix.

To create a document:

  1. From the “WorldWideWeb” menu, select “New File…”
  2. Type the name of the file you want to create e.g. example.html
  3. In the boilerplate document, click on the heading to edit. Same with the text.

Once you’ve got a document written, it’s time to turn from regular text into hypertext:

  1. From the “WorldWideWeb” menu, select “Links”
  2. To link to another document, you need to have that other document open in another window. Click on its title bar to focus it.
  3. With that document in focus, select “Mark all” from the “Links” menu.
  4. Now switch back to your example.html document and highlight the text you want to be a link.
  5. From the “Links” menu, select “Link to marked”.

You can even save your new document on to your hard drive. Click on “Save a copy offline” under the “Documents” menu.

Once you’ve downloaded the file to your computer, you can open it up with a text editor to see what the HTML would have looked like.

Editing

To edit any document, whether it’s one you created, or a page on the world wide web:

  1. Click on the text you want edit.
  2. Edit it.

That’s it.

If you want to keep a copy of the edited document, choose “Save a copy offline” from the “Documents” menu.

Components

Here is a collection of HTML-based components recreating the original NeXT interface. Feel free to grab, view-source, etc, to use for your own projects.

Color Palette

Form Elements

Inputs

Fieldsets

Buttons

In the case of buttons, there’s no standard for paddings. The button must
match the width/height of the parent, so all buttons of the same group are of the
same width/height.

Simple button

Image Buttons

Panels

Width and height properties must be defined locally.

Content goes here; it can be a webview, group of buttons, forms…

Content goes here; it can be a webview, group of buttons, forms…

WebView

Width and height properties must be defined locally.

Omnia sol temperat
Purus et subtilis


Novo mundo reserat


Faciem Aprilis


Ad amorem properat


Animus herilis


Et iocundis imperat


Deus puerilis


Et iocundis imperat


Deus puerilis

Ama me fideliter


Fidem meam nota


De corde totaliter


Et Ex mente tota


Ama me fideliter


Fidem meam nota


De corde totaliter


Et Ex mente tota

Rerum tanta novitas


In sollmenti vere


Et veris auctoritas


Iubet nos gaudere


Vices prebet solitas


Et in tuo vere


Fides est et probitas


Tuum retinere


Fides est et probitas


Tuum retinere

General UI Elements

Divisions

Open URL

Open using hypertext reference

Info Dialog

HyperMedia Browser/Editor

An excercise in global information availability

Version 1.0

Alpha only

by Tim Berners-Lee

Copyright 1990, 91
Distribution restricted: ask for terms.
TEST VERSION ONLY

HyperText:
Text which is not constrained to be linear.

HyperMedia:
Information which is not constrained linear… or to be text.

This is the first version of the NextStep WorldWideWeb application
like the libWWW Library.


It can pick up hypertext information from files in a number of formats, from local files, from remote files using NFS
or anonymous FTP, from hypertext servers by name or keyword search, and from internet news.


Hypertext files may be edited, and links made from hypertext files to other files or any other information.


For more help, use “Help” from the menu. If that doesn’t work, then your application has been incompletely installed.

If you have any comments or have bugs, please mail timbl@info.cern.ch quoting the version number
(above).

Style Editor