Browsers – Supported Web Browsers

Browsers, also known as web or internet browsers are the software application that is installed on your PC or Mac to access websites.

Everyone starts with the default browser pre-installed by your operating system provider, which is Internet Explorer from Windows and Safari from Apple.

However it is perfectly safe, and highly recommended, to install multiple browsers on your computer so you can see which one works best for you.

There are five main applications to choose from, all of which are free to download. It is recommended to always keep your browser version up-to-date.

All provide regular enhancements and security upgrades, some even support a strong developers’ community that produce plugins that are free to download and enhance your browser installation even further.

Firefox – The most popular browser amongst geeks and the one recommended by us. It also has a vast number of optional add-ons such as themes, protection, file handling, developers tools, and much more. Recommended version is 52+.
Chrome – The newest mainstream browser, it is provided by Google and has rapidly become the most popular web browser. Recommended version is 10+.
Internet Explorer – The browser pre-installed on all Windows machine since XP. Recommended version is IE11+.
Safari – The browser pre-installed on Apple devices. It has been ported to Windows but is no longer supported by Apple. Best only used on Apple devices. Recommended version is 9+.
Opera – Available on PC, Mac and Linux. Also widely used on mobile devices and even gaming consoles. Recommended version is 45+.

HTML – HyperText Markup Language

HyperText Markup Language is the underlying language that all websites are written in. Using a series of meta-tags, it defines the structure of the page and the layout of its content.

It is strongly recommended that anyone requesting a CMS (Content Management System) obtain a basic understanding of HTML to be able to include dynamic content such as links, images, and videos.

The following code is a very basic example of HTML. It shows the main sections that make up a page; they are html that encapsulates everything, then head that contains details that don’t appear on the page and body that contains the content that does appear on the page. In this example the pages has a title and a paragraph which both contain the words “Hello” on one line and “World” on the next. Note: tags with no content such as the line break (<br>) don’t need a closing tag, as they can’t contain further tags within them.


	<html>

	  <head>

	    <title>Hello</title>

	  </head>

	  <body>

	    <p>Hello<br>World!</p>

	  </body>

	</html>

Hello
World!

The concept does sound complex, but it’s very much like the structure of a book. They all contain a cover (the html tags), legal page containing author, contributor, printer, copyright page (the head section), and the story (the body section). The story is further broken down into chapters, pages, paragraphs, sentences, and words.

There are numerous books and websites that provide some very useful tutorials, here are some we recommend taking a look at:

CSS – Cascading Style Sheets

Cascading Style Sheets is an additional language that is used to produce standardised style settings across multiple pages of a website.

When just HTML is used custom style settings have to be repeated every time they are required, resulting in large cumbersome pieces of code. If for example you wanted to change the font used on the site you would need to change it in hundreds if not thousands of places.

Style settings are shared with object’s children, hence the term cascading. Style sheets can be included in a site in three different forms:

Referenced in the head section as a stand-alone file, this is the best way to share styles across multiple pages. Each browser will also contain a default set of style sheet values for certain tags such as headers and paragraphs.
Referenced in the head section with a style tag that will affect only tags in that page.
Within the body section and inside a tag, useful to add bespoke styling to a single element.

The following example shows how the default browser CSS has set different heading font sizes, rules in the head section set colours for the header and paragraph tags, finally the paragraph font has been directly changed to be in italic.


	<html>

	  <head>

	    <style type="text/css">

	      h1 { color: red; }

	      h2 { color: blue; }

	      p { color: green; }

	    </style>

	  </head>

	  <body>

	    <h1>This is heading 1</h1>

	    <h2>This is heading 2</h2>

	    <p style="font-style: italic;">

	      This is a paragraph.

	    </p>

	  </body>

	</html>

This is heading 1

This is heading 2

This is a paragraph.

There are numerous books and websites that provide some very useful tutorials, here are some we recommend taking a look at:

As the values cascade the colour settings for the paragraph set in the head section are also used with values set in the body tag.

JavaScript – Client Side Scripting

JavaScript is an additional language that is supported by all major browsers. It provides the web developer with a much more powerful command set that can be used on the browser before data is sent for processing to the server.

Due to its complex nature it is used sparingly and only when complex functions are required within a web page. More common these days are pre-built JavaScript library modules as they are easier to integrate into a site, have strong cross-browser support, and put fewer technical demands on the web developer. The most commonly used JavaScript library is jQuery.

JavaScript code can be embedded within HTML pages to handle complex user interface functions. These commonly include (but certainly are not limited to) the following:

Input checking on forms to ensure syntax and content is valid.
Screen resolutions can be incorporated into the page layout.
Limitations in the browser can be highlighted (if the user is using an out-of-date version).
Complex user-driven interfaces such as scrolling maps.
Features of the page can be changed after being loaded (fonts, colours, images, etc).
Event handlers are available to react to various actions such as clicking or moving a mouse over an object on the page.
Regular expressions such as string manipulation and calculations are available to process user inputted data before it is sent to the server.

There are numerous books and websites that provide some very useful tutorials, here are some we recommend taking a look at:

PHP – Hypertext Preprocessor

PHP is a powerful server side pre-processor that is widely used to generate HTML code and handle HTTP responses back to the server, usually in the shape of form updates.

One of the common uses of PHP is to interact with a database or flat-file data files, generate images, and manipulate data or calculate numbers before the output is displayed in the HTML page.

In the following example an HTML page contains some PHP to display the date and time when the page was generated. It takes this data from the web server and includes it in the web page.


	<html>

	  <head>

	    <title>Server Date</title>

	  </head>

	  <body>

	    <?php date("D M j G:i:s T Y");?>

	  </body>

	</html>

Wed Apr 24 3:39:38 UTC 2024

There are numerous books and websites that provide some very useful tutorials, here are some we recommend taking a look at:

MySQL – Relational Database

There are many methods for storing data on a web server, but the most common is MySQL. It is a relational database management system (RDBMS) that runs on the web server and stores data in a pre-defined tabular structure of tables, columns, and rows, similar to a spreadsheet.

A database can store data in many different forms; text, integers, decimal numbers, dates, times, and binary objects such as audio clips or images. Each element can be stored in the database at a number of different data sizes to optimise storage space allocation.

Simple transactions can be produced to extract data from a single table, or more complex cartesian joins can be used to extract data across multiple tables using their relational keys.

When extracting data specific columns can be specified to limit the amount of data being transferred to the client machine, this limits the risk of personal data being unnecessarily accessed.

There are numerous books and websites that provide some very useful tutorials, here are some we recommend taking a look at: