Know and understand the presentation layer is used to display and format elements within a web page

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: The Presentation Layer

ICT 0417 – Website Authoring

Objective

Know and understand that the presentation layer is used to display and format elements within a web page.

What is the Presentation Layer?

The presentation layer is the part of a web page that determines how content looks to the user. It is primarily controlled by:

  • HTML elements that define the structure of the page.

  • CSS (Cascading Style Sheets) rules that specify visual styling such as colours, fonts, spacing and layout.

  • Browser rendering engines that interpret HTML and CSS to produce the final visual output.

Key HTML Elements for Presentation

While HTML is a markup language, many tags have a direct impact on presentation. The table below summarises the most common presentation‑related tags.

TagPurposeTypical Use
<h1>–<h6>HeadingsDefine hierarchical titles; default font size decreases from h1 to h6.
<p>ParagraphBlocks of text; browsers add vertical spacing before and after.
<div>DivisionGeneric container used for grouping and applying CSS styles.
<span>Inline containerUsed to style a portion of text without breaking the flow.
<ul> / <ol> / <li>ListsUnordered (bulleted) or ordered (numbered) lists; list items are styled by default.
<table> / <tr> / <td> / <th>Tabular dataDisplays data in rows and columns; borders, spacing and alignment are controlled with CSS.
<a>HyperlinkClickable links; default colour and underline can be changed via CSS.

How CSS Controls Presentation

CSS provides the rules that tell the browser how to render each HTML element. The main concepts include:

  1. Selectors – identify which elements the rule applies to (e.g., p { … }).

  2. Properties – describe what aspect to change (e.g., color, font-size, margin).

  3. Values – the specific setting for a property (e.g., color: #336699;).

The CSS Box Model

Every element is represented as a rectangular box. Understanding the box model is essential for controlling layout.

\$\text{Total width} = \text{content width} + 2(\text{padding}) + 2(\text{border}) + 2(\text{margin})\$

Similarly for height:

\$\text{Total height} = \text{content height} + 2(\text{padding}) + 2(\text{border}) + 2(\text{margin})\$

Manipulating these four areas allows precise placement of elements on the page.

Practical Example: Styling a Simple Article

Below is a minimal HTML snippet with embedded CSS that demonstrates how the presentation layer works.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
h1 {
color: #2A5D9F;
margin-bottom: 10px;
}
.intro {
background-color: #F0F8FF;
padding: 15px;
border: 1px solid #B0C4DE;
}
p {
margin-top: 0;
}
</style>
</head>
<body>
<h1>The Presentation Layer</h1>
<div class="intro">
<p>This paragraph is inside a styled <code>div</code> that demonstrates background colour, padding and border.</p>
</div>
</body>
</html>

Common Presentation Issues and How to Fix Them

  • Text overlapping – Check padding and margin values; ensure sufficient line‑height.

  • Images not aligning with text – Use vertical-align or wrap images in a figure element with CSS.

  • Inconsistent fonts across browsers – Define a fallback stack (e.g., font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;).

  • Elements breaking out of their containers – Verify that width plus padding and border does not exceed the parent’s width, or use box-sizing: border-box;.

Assessment Checklist

When answering exam questions on the presentation layer, make sure you have covered:

  1. Definition of the presentation layer and its role.

  2. Key HTML tags that affect visual layout.

  3. How CSS selectors, properties and values work together.

  4. The components of the CSS box model and the related formula.

  5. Examples of common styling problems and appropriate solutions.

Suggested diagram: A layered diagram showing the relationship between HTML (structure), CSS (presentation), and the browser rendering engine (display).