The Three Layer Model of Web Design

A standard website is created using 3 languages: HTML, CSS and JavaScript. Each language forms a separate layer with a different purpose.

We start by producing the content in HTML. This is the base layer.
Then, we can focus on making the site look better, by adding a layer of presentation using CSS.
Lastly, we can use JavaScript to introduce an added layer of interactivity and dynamic behaviour.

To keep our web pages organised, it's a good practice to keep the 3 languages in separate files, with the HTML page linking to CSS and JavaScript files (Duckett, 2014, p.44).

three layer model

Content Layer <html>

This is where the content of the page lives. The HTML gives the page structure and adds semantics. Basically, the content of a website are the headings, texts, images, lists and also the links that users will use to navigate around the website. It is also where the metadata lives. Metadata is data about the HTML document, title, description of the website, keywords, author, character set, styles, scripts and other meta information.

Heading

Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

• Content of a Website with plain HTML

Presentation Layer {css}

The CSS (Cascading Style Sheets) enhances the HTML page with rules that state how the HTML content is presented (backgrounds, borders, box dimensions, colours, fonts, etc). Besides changing the appearance of HTML content, CSS helps us to fit our pages into different types of screens making our website responsive.

Link

Heading

Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• The same Website with CSS styles applied

Behavior Layer (javascript)

JavaScript is the programming language of HTML and the web. This is where we can change how the page behaves, adding interactivity. We can use JavaScript to select any element on the page and modify it. JS also reacts to events such as when a button is pressed or a link is clicked or even when information is added to a form. We will aim to keep as much of our JavaScript as possible in separate files. (Duckett, 2014, pp.4-5).

Link

Your account has been updated

Heading

Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Click on the Link to interact with the Website