The anatomy of websites and code

Modern web browsers are amazingly powerful computer programs that can ‘understand’ a wide variety of inputs. Of the possible inputs, on this course we identify three kinds

  • HTML code
  • CSS style sheet code
  • programming code, e.g. JAVASCRIPT

Of these, HTML code is essential for a browser to display a web page. This includes the text that is displayed on web pages and tags to do particular things such as display an image or link to another page. The HTML code for a web page is stored in files which have the .HTML file extension.

The web page you saw in the last step in Figure 1.(a) has text of different sizes and colour. These are set by a style sheet, rather than directly by HTML code. The style sheet is usually an external file which tells the browser how text and other things should be rendered. Technically they are called cascading style sheets and they have the .CSS file extension. Usually cascading style sheets play no active part in the Google Analytics process of collecting and analysing usage data.

Embedding program code such as Javascript into web pages is essential for user interaction on many websites, but is beyond the scope of this short course.

The HTML code that generated this web page is shown below.

Figure 1. The code to create the webpage in Step 1.3 Figure 1(a)

A simple webpage divided into parts showing the HTML code that sets up the webpage, the HTML code that displays elements in the web page such as text and images, and the HTML code that complete the webpage

The portion of the HTML code highlighted in orange at the beginning informs the browser that this is a document of type HTML and the language to be used is English. The orange highlighted line at the end tells the browser that the file is complete. The first line, that begins with <!-- and ends with --> is a comment. It doesn’t do anything but gives information that makes the code easier to understand.

The section highlighted in blue does not display anything, but gives the browser information on how to process the page. The line <meta charset= “UTF-8”> establishes the default character set to be used, and Web Analytics gives the title of the web page. The next line links a style sheet file called WE1_Stylesheet.css to this web page. The style sheet determines the size and colour of the text.

The section highlighted in green generates the elements seen on the webpage. The first three lines beginning with <a> and ending with </a> display the image called WE1_DA.RE_logo.png and links it to the http://dare-project.eu website. The other lines of text in the green highlighted area display the text, links and images you saw in Step 1.6.

Google Analytics works by generating a few lines of tracking code that the website owner inserts into the part of the webpage highlighted in blue. This code does not display anything, but it allows Google Analytics to collect information behind the scenes, as you will see.

Share this article:

This article is from the free online course:

Introduction to Data Science with Google Analytics: Bridging Business and Technical Experts

UNESCO UNITWIN Complex Systems Digital Campus