Web Programming Tutorial

In this tutorial, I'll take you through the basics of web programming, using a useful real-world example: a video chat web application. A web application is software that runs in a web browser.

The app enables you to have a video conversation over the internet. Unlike Skype, it does this over the World Wide Web in a browser. Remember, there is a distinction between the World Wide Web (or Web) and the internet. The world wide web is the searchable, worldwide collection of web pages connected by hypertext links, whereas the internet is the worldwide network of computers.

The app uses a technology called WebRTC (Web Real-Time Communication), which is supported by the latest versions of several browsers, including Chrome, Firefox and Opera. WebRTC uses connections that are peer-to-peer; that is, from one personal device, such as a computer or smartphone, to another. Connections that are not peer-to-peer require a server, which is a computer that provides a service, such as returning a web page, to any client device that requests it, such as your PC.

Note: The app should work perfectly well for peers (participants in a video link) sharing the same computer network (in the same school, company or house), but may be blocked when trying to connect to a user on a different network that employs security measures such as NAT (network address translation) to hide the computers on the network from the outside world.

Using the WebRTC Demo

To try out the app, follow these steps:

  1. Press this link to the app to open it in your web browser. The app will work in the latest versions of Chrome, Firefox and Opera.
    When the page has opened, you will see at the top a dialog asking you if you are happy for the app to use your webcam and microphone.
  2. Press the appropriate button to permit the app to use your webcam and microphone.
    In the top-left corner a small image of you, as captured by your webcam, is displayed. In the bottom-right corner is a Contact Number link.
  3. If you want to test the app just on your own device, press the Contact Number link.
    The app will open in a new tab. After a few seconds, a large webcam image should appear. The two tabs in which the app are now open represent the two devices participating in the video conversation.
  4. Alternatively, if you want to have a video chat with someone:
    1. Display the pop-up menu for the Contact Number link by either:
      • right-clicking the link
      • (on a touchscreen) touching the link until the menu appears.
    2. Choose the Copy link option from the pop-up menu.
    3. Paste the copied link into an email and send it to the person you want to video chat with. When they click the link to open it in their browser, the video connection should be established.

If you have any questions or comments about the app or the following tutorial, please send an e-mail to support

Why write a web application?

Web apps operate within web browsers. The same web app can run in the browser of any device (PC, Mac, Tablet, Smartphone) using any operating system (Windows, Linux, OS X, Android, iOS), as long as the browser follows the same standards assumed by the app. As browsers have evolved, they have gradually adopted the recommendations of groups like the World Wide Web Consortium (W3C), meaning they are converging on a common set of standards. The browser is acting like a common operating system, so your web app should execute equally well no matter the device.

What skills do you need?

To write a web app, you need to be able to program or code in a few programming languages. Like all languages, these can be understood by both the writer/speaker and the reader/listener. In this case, you are the writer, or programmer, and the machine running the program is the reader.

Depending on the app, you may also need to know how to create and interact with a database, used to store data in an organized way rather like a spreadsheet.

The following languages are commonly used for web apps:

Databases are stored on, and PHP is run on, computer systems called servers, whereas HTML, CSS and JavaScript are executed by web browsers on phones or computers. (Actually, JavaScript can also be run on a server using server-side JavaScript, but we needn't concern ourselves with that now.)

Recreating the WebRTC Demo

To write HTML, CSS, JavaScript, and PHP you'll need a text editor, which is like a simple word processor. I use NotePad++, but there are many alternatives. When following the WebRTC app, it's best if you type in the program code yourself, but if you are in a hurry or can't be bothered, you can download the code via the links liberally peppered throughout the following pages.

Finally, to put your app on the web so that people around the world can use it, you'll need some web space. There are many free options available, such as biz.ht and biz.nf. Whichever hosting site you use, make sure it supports PHP code and MySQL databases if you want to create the WebRTC app yourself.

Building blocks of the WebRTC app

The app uses HTML5, CSS3, JavaScript, PHP and a MySQL database. The code for the app is spread across many different files. For example, the HTML is in a file called index.htm, which is normal for the main page of an app or website. This makes it the default page displayed if the url or web address is missing the page name; for example, www.silvawood.co.uk and www.silvawood.co.uk/index.htm display the same page.