WWW Technologies

The web is built to display pages of information, today that information must be vibrant and attractive to the consumer, it must also be valid for multiple device formats from wide desktop screens to small handheld devices. To achieve this new protocols have been introduced that evolve the existing standards to meet todays more stringent requirements. The original structures are still there (you will see HTTP and HTML below) but these have been enhanced with new parameter support for HTTP and a complimentary standard CSS for HTML.

Use the links below or simply scroll through the entire page:

HTTP HTML CSS Javascript Jquery PHP Cookies

HTTP - HyperText Transport Protocol

This is the http:// that prefixes every web request URL to a web server. The data in the requests and their responses are prefixed with an HTTP header that indicates many things e.g.:

HTTPS

HTTPS is used to describe a secure HTTP connection. Security is in two parts:

  1. Authentication: A security certificate is exchanged between server and client identifying that the site is who it purports to be. The client can check the validity of the certificate and the issuer. Many browsers now indicate successful authentication in the URL bar and provide a means to review the site certificate data exchanged.
  2. Encryption: All data on the connection is encrypted, keeping data safe from all but national bodies with large budgets and an interest in what you are doing.

HTML - HyperText MarkUp Language

MarkUp is the old copywriter's and printer's terminology for how a page should be displayed and that is still what HTML does. HTML immediately follows the HTTP header. HTML today restricts itself to describing the document as a whole and then identifying key elements/blocks of text, in this case additional markup is provided through CSS (see below).

HTML uses a tag language (keywords delineated by < and > symbols) to describe various elements of a web page. Most, but not all, tags are paired i.e. start with <...> and end with </...>. A very simple page could be written as follows:

<html>
<header>
<title>Web Page 1</title>
</header>
<body>
<h1>My first web page</h1>
<p>Hello World</p>
</body>
</html>

Where the header is everything between the <header> and the </header> tag. This might be the page title, CSS formatting instructions (inside <style> tags) or even a Javascript program (inside <script> tags) for execution on the client machine. Whereas the body element contains heading tags e.g. <h1>, <h2> etc., paragraph tags <p>, image tags <img> etc. as well as any text to be displayed.

BTW: if you don't believe this (it's too simple) open windows NotePad and copy in the above html. Save this as a file on your PC (any file name but ending .html). Now double click on that file name and your web browser will open to your new page

In a correctly formatted page, a <!DOCTYPE html> or some other declaration precedes the <html> tag. It tells the browser which level of html the page is written in and therefore which tags may appear in the document. The example shown is for HTML 5.

You can see the HTML used to markup a web page by right clicking on a page and selecting "view page source". Though you will not see this text if you do so, this text is added dynamically using a technique known as AJAX.

CSS - Cascading Style Sheets

The style sheet completes the markup for an html tag element. Lists of styles appear in style sheets which can be seperately accessed files, or inline with the current page, embedded in the header or body as delineated by html style tags. Items in a style sheet are referenced by the class attribute of any html tag, the id attribute of an html tag or implicitly via the tag name; of these, the class attribute may reference multiple styles. In addition the HTML tag can contain overriding style attributes. The final markup result is a cascade of all the available style references in seperate files, inline style tags or style overrides on an individual tag.

As an example of an inline style, try adding the following to the header section (say immediately after the title tag) of the html example above:

<style>
body {background-color:blue;color:white;}
</style>

As you will see, it was the html body tag that had set default colours for the page, our CSS instruction changes all that.

Javascript

When a page is delivered to a web client (the web browser) it is possible for small programs to run which can finalise any display options or even generate tables from supplied data. Javascript is the ubiquitous web browser based programming language for this task. Note: your browser prevents javascript from accessing files on your system, this prevents malware/viruses from being installed should you accidently visit a bad web site. Though no browser can help you if you override the basic security mechanisms.

One last example, add the following to your page, immediately after the style closing tag.

<script>
	alert("First I wrote a web page and now I'm programming");
</script>

Jquery

Jquery is a huge library of Javascript routines that simplifies the process of developing complex web sites.

PHP - PHP HyperText Preprocessor

PHP, like Javascript, is a programming language but one that runs on the web server. PHP allows a web site to dynamically merge external data (say from a database) into a pre-formatted page. You never see PHP code in the web browser as it has already run on the server and built the page that you now see.

We cannot add a simple php example to our file because we need a php server to process the php commands before the file is delivered to our web browser. This is not possible when our web browser is simply reading a file from our harddisk.

Cookies

Cookies are small files of data passed to the web server with each request the client browser makes. Functional cookies may hold web site options you have selected, shopping basket contents or help authenticate you to the web site which can then return personal information. Cookies can be read and updated by Javascript in the client browser but more importantly are available to PHP or other processors on the web server.

Third party, tracking, cookies monitor your browsing behaviour for use with targeted advertizing. The EU requires that any site placing tracking cookies on your device first obtains your permission to do so.

 

Web Servers
Next
Introduction
Contents