1. Introduction to Computing and the Web

Learning Objectives

By the end of the session you should:

• be able to name the basic components of a computer
• understand that computers work with numbers for everything
• be able to describe the basic operations of a computer
• be able to explain how a computer is different to a large calculator
• appreciate the 'computing hierarchy' of hardware, operating system, applications, scripts
• be able to name the key computing components used in the delivery of the web
• be able to create a web page on a remote server

Topics

Elements of a computer

At the heart of a digital computer is the central processing unit (CPU) which performs the logical and arithmetical operations on streams of numbers as controlled by a “program” which is itself a stream of numbers. The CPU has privileged access to the computer memory which can be thought of a large number of pigeonholes in which numbers can be stored and later retrieved. The CPU can also send and receive numbers from a set of input-output ports. These act as gateways from the CPU to other devices, such as keyboards, displays, printers, disks, analogue I/O devices, or network connections to other computers. Collectively these external devices are called peripherals. The CPU can select a peripheral and control its operation by sending appropriate number streams to the port to which it is connected.

Working with numbers

The CPU can only manipulate numbers, so all pieces of information that we want the computer to manipulate must be stored as numbers. Such information includes: numerical values, keyboard or display characters, pixel colours, sounds, the addresses of memory locations, the addresses of ports, the addresses of networked computers, and the possible set of operations that the CPU can perform. All these must be stored as numbers.

The philosophy of numbers for anything and everything is the basis of the power of the computer. When the CPU does a calculation and generates a numerical answer, that number need not be just the size of something, but it can be a character, a memory address, a colour or even the next operation of the CPU. It is like a calculator doing a calculation and coming up with a result that meant the calculator should next perform the square root calculation; i.e. producing a result that was an operation, not just a value. Computers have programs, called compilers, which produce numerical results which are nothing less than other programs.

Machine code

The essential operations of a CPU are actually very limited. A CPU can

1. Load from memory. Given a memory address, retrieve the number stored at that address.
2. Store to memory. Given a memory address and a number, store the number at that address.
3. Load from port. Given a port address, get a number from the port.
4. Store to port. Given a port address and a number, send the number to the port.
5. Arithmetic. Given one or more numbers, perform some basic arithmetic, such as add, subtract, multiply, divide and other logical operations such as less-than, equals or greater than. Result is another number.
6. Test. Given a number, change the status of the CPU according to properties of the number, e.g. equal to zero, less than zero
7. Conditional jump. Depending on the status of the CPU jump to a different point in a list of operations stored in the memory. For example, if the last test operation returned 'equal to zero', then start executing the instructions at memory location 1000, otherwise start executing the instructions at memory location 2000.

All programs are just a sequence of such instructions.

Software hierarchy

The lowest level description of a computer program is just the sequence of numbers which encode the basic CPU operations. This level is called machine code. Machine code is specific to a given CPU manufacturer and often specific to a given model type (for example the latest Intel CPUs have some codes not used by earlier x86 CPUs). Machine code is very difficult for a human to read or write, so the lowest level of programming done by humans is in a language in which each basic operation is given a mnemonic code called assembly language. Humans can write programs using assembly language which can be converted into machine code using a program called an assembler. Assembly language, like machine code is often specific to a particular CPU manufacturer or model.

The development of high-level languages meant that humans could program using a formalism that was closer to their conceptual models of the data being manipulated: characters, real numbers, lists, tables or database records. Such languages are easier for humans to learn and to use, and furthermore they tend to be available across different computers; with each manufacturer supplying a conversion program between the high-level language and the assembly language for their CPU. Examples of high-level languages are Fortran, Pascal, Basic, C, C++, Java and MATLAB.

Modern computer systems need to deal with complex tasks involving multiple programs interacting simultaneously, which need to share access to memory, files on disk, or to peripherals. To cope with these demands, manufacturers supply operating systems (e.g. Windows, MacOS, Linux), which are themselves programs which help the user operate the computer and run other application programs. Often individual application programs need to work together to achieve an objective: for example a word processing application might call on a drawing package or on a spreadsheet program to do some specific processing within a document. This idea of combining programs is called scripting, where the specifications for which programs are to be executed and how they should interact is specified in a script.

Computing and the Web

The web is made of clients and servers. Clients are the applications that run on user machines to access web services - for example a web browser. Servers are applications that run on service provider machines to provide information and services to clients - for example a web site.

Clients and servers communicate over network connections. Networks can be public, such as the internet; or they can be private, such as an institution-specific network - sometimes called an intranet. A network connection is just a means for two computers to send streams of numbers to each other. Each computer is allocated a network address, which is just a number, and information sent by one computer is routed through the network so that it arrives at the specified network address. Within a computer, applications are allocated different sub-addresses called ports. A web server can usually be found on port 80. For efficiency, information is typically encoded into packets of numbers, with each packet being assigned a destination address and port.

To ensure that applications can understand one another, the information packets describing a request for information from a client or the packets returning the answer from a server are formatted according to some international standard protocols. Some examples of protocols are Internet Protocol (IP) - which sets the standards for how machines are addressed and how packets are routed from one computer to another; Hyper-text transfer protocol (HTTP) - which sets standards for how web clients request information from web servers; and File-transfer protocol (FTP) - which sets standards for how files may be transferred.

To retrieve a web page, your web browser must first make a request of a Domain Name System (DNS) server to convert the web page address (its Uniform Resource Locator, or URL) into a numerical IP address. Then it must use HTTP to request the page from the web server at port 80 on that address. If successful, the server will return the document requested (as a stream of numbers collected into packets).

To ensure the information sent from the server displays in the client browser in the way the author intended, the information must be "marked-up" to indicate how the information is structured (headings, paragraphs, tables, figures, etc). The standard for this is Hypertext Markup Language (HTML). A document marked up with HTML consists of plain text interspersed with specially formatted codes describing the document structure and appearance.

An author of a web page may not only interested in how the information is structured, but also be interested in how it is formatted and styled - what fonts, colours, margins, layout, etc. The standard for these stylistic aspects is called Cascading Style Sheets (CSS). A web page will typically consist of an HTML marked up document together with one or more style sheets that define its appearance.

The operation of the browser and the server can be made dynamic through scripting. Server-side scripting means that the contents of a retrieved web page might depend on options sent from the client, for example to display only books containing a given word in their title. Client-side scripting allows for the web browser to manipulate the information provided by the server or by the user, for example a web server might download a page that can perform a t-test, but the data entry and statistical calculation could be performed client side.

There are many languages for server-side scripting, but the most common are Active Server Pages (ASP) and Personal Hypertext Processing language (PHP). Server-side scripting is most useful when it acts as a gateway to a database - retrieving and formatting information on demand, or even updating database information from data supplied from a client.

For client-side scripting, the main language is called JavaScript. JavaScript is a modern, powerful, object-oriented programming language that is supported by all main web browsers. JavaScript programs can be embedded within web pages and can allow interactivity between the user and web page on the client side. JavsScript programs have been used to create entire client-side games, or complete applications for manipulating numerical and graphical data.



Together, HTML, CSS and JavaScript are the basis for the majority of web applications, whether they run on desktops, laptops, tablets or smartphones. Learning how to use them is the single most important programming skill required today.

Reading

• How Computers Work. Los Alamos Science article.
• The Personal Computer. Wikipedia.
• Introduction to web technologies (lecture slides)

Video Tutorials

UCL subscribes to some excellent introductory video tutorials for web programming. Recommended:

• Lynda video tutorials at UCL

Exercises

Today we will create three versions of a simple web page: on a local machine, on the UCL homepages and on the PALS server. From this you will learn about the tools needed to create and publish web pages. More details about the programs can be found on the Web Editing and Debugging page.

1. Create a web page on local machine

   1. Create a folder on the desktop.
   2. Start the Brackets editor and select the new folder as the current workspace.
   3. Create a new file.
   4. Use the editor to type in this HTML code (Substitute your name for "Fred Bloggs"!).

      <html>
      <head>
      <title>The Home Page of Fred Bloggs</title>
      </head>
      <body>
      
      <h1>Fred Bloggs’s Home Page</h1>
      
      <p>Hello world!</p>
      
      </body>
      </html>
      

   5. Save the file with the name "index.html" in your folder.
   6. Select "Live Preview" - the Chrome browser should start and you should see your page.
   7. As you type in the brackets editor, the browser display should follow your changes.

2. Create a web page on the PALS server

   1. You will be given a username and password for your web space on the PALS server.
   2. Follow the instructions in Web Editing and Debugging to start the eXtplorer file manager to access your personal web space on the PALS server.
   3. Select the File New button on the toolbar and create a file called index.html in your home folder.
   4. Double click on "index.html" in the file manager window to open an editor on the file.
   5. Use the editor to type in the same HTML code as above and Save.
   6. Open a new tab in the browser and go to the URL of the public name of your home folder (e.g. http://www.phon.ucl.ac.uk/courses/spsci/webprog/users/mark).
   7. Your web page should be displayed. You can switch back to the editor tab and make changes to the file, then refresh the display tab to see the results. Remember to Save your changes before displaying the page again.

3. Explore ways to enhance your page

   1. Find a simple tutorial on writing web pages to add some other elements to your page, for example:
      • http://www.goodellgroup.com/tutorial/toc.html
      • http://www.wikihow.com/Create-a-Simple-Web-Page-With-HTML
      • http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
      • http://www.yourhtmlsource.com/myfirstsite/basicformatting.html

Homework

1. Watch at least some of the video course on HTML available at Lynda.
• Go to https://www.ucl.ac.uk/lynda and log on with your UCL password.
• In the navigation bar choose Library | Web | Web Development. Then in the left menu choose HTML, and look for the video "HTML Essential Training".
• Watch as much as you can, but at least the first two chapters: "The importance of HTML" and "Basic HTML syntax".
2. Install the Brackets editor and Chrome browser on your own computer.
3. Repeat the exercise we did in class using your computer.

Word count: . Last modified: 13:02 05-Oct-2017.