Be able to create the presentation layer of a web page

Resources | Subject Notes | Information Communication Technology ICT

21 Website Authoring: The Presentation Layer

The presentation layer is responsible for how the information on a website is displayed to the user. It deals with the visual aspects of a web page, including text formatting, colors, fonts, and layout. In the context of HTML, this is achieved through the use of various HTML elements.

Key HTML Elements for the Presentation Layer

  • Headings: Elements like <h1> to <h6> are used to define headings and subheadings, structuring the content.
  • Paragraphs: The <p> element is used to create paragraphs of text.
  • Lists:
    • Unordered lists are created using <ul>, with list items defined by <li>.
    • Ordered lists are created using <ol>, with list items defined by <li>.
  • Tables: The <table> element is used to create tables. element contains , , , defines the table header, defines the table body, defines a table row,
    , and elements.
    defines a table header cell, and defines a table data cell.

    Example HTML Structure

    Suggested diagram: A simple webpage structure demonstrating headings, paragraphs, and a table.

    <!DOCTYPE html> <html> <head> <title>Website Presentation Example</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a sample webpage demonstrating the presentation layer using HTML elements.</p> <h2>A List of Items</h2> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <h2>A Table Example</h2> <table> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>25</td> </tr> <tr> <td>Bob</td> <td>30</td> </tr> </tbody> </table> </body> </html>

    These elements provide the basic building blocks for structuring and presenting content on a web page. While HTML handles the structure and content, CSS is used to control the visual presentation of these elements.