Be able to create the presentation layer of a web page

21 Website Authoring – Presentation Layer

What is the Presentation Layer?

Think of a website like a house. The presentation layer is the front door, windows, paint and decorations that visitors see first. It’s all about how the content looks and feels, not what it does.

HTML – The Skeleton

HTML (HyperText Markup Language) gives the page its structure. It’s like the bones of the house: walls, rooms and doors. Example tags:

• <h1> – Main heading
• <p> – Paragraph text
• <img> – Image
• <ul> / <ol> – Lists
• <table> – Tabular data

CSS – The Style

CSS (Cascading Style Sheets) is like paint, wallpaper and furniture. It controls colours, fonts, spacing and layout.

Responsive Design

Responsive design ensures your site looks good on phones, tablets and desktops. Key techniques:

1. Use fluid grids – widths in percentages.
2. Apply media queries to change styles at breakpoints.
3. Make images responsive with max-width:100%.

Accessibility (a11y)

Accessibility is like a universal door that everyone can open. Tips:

• Use semantic HTML tags (e.g., <nav>, <header>).
• Provide alt text for images.
• Ensure sufficient colour contrast (WCAG AA).
• Use keyboard navigation (tabindex, focus styles).

Testing & Debugging

Check your design on different browsers and devices. Use:

• Browser DevTools – Inspect elements, console logs.
• Responsive mode – Simulate mobile screens.
• Accessibility audit tools (e.g., Lighthouse).

Practical Example: A Simple Card Component

Below is a quick example of a card layout using HTML and CSS. Copy the code into a new file and open it in a browser to see the result. 🎉