Discord
Me

Website authoring: HTML and the content layer Cambridge IGCSE Information & Communication Technology revision

Not started

Learn it

In plain words

A web page is built in three layers, each with its own language and its own job: what is there, what it looks like, and what it does. HTML is the first layer, and everything else hangs on it.

8 things to know

  1. The content layer holds the content and structure of a page, and is written in HTML. The presentation layer controls how the page looks, and is written in CSS. The behaviour layer makes the page respond to the user, and is written in a scripting language.
  2. An HTML page has a head section and a body section. The head holds information about the page: its title, shown in the browser tab; links to stylesheets; and metatags. The body holds the content shown in the browser.
  3. Metatags give the character set, a description of the page, keywords for search engines, the author, and the viewport, which makes the page display properly on all devices.
  4. Text tags: h1, h2 and h3 for headings, p for a paragraph, and li for each item of a list. An ordered list (ol) is numbered and an unordered list (ul) is bulleted.
  5. A table is built from table rows (tr), table header cells (th) and table data cells (td). Tables are used to structure where items appear on the page. A cell can span several columns or rows.
  6. An image needs its source file and alternative text, which is shown if the image cannot load and read out by screen readers. The div tag groups content so that styles can be applied to it.
  7. A hyperlink can lead to another page of the site, to another website, to an email address, or to a bookmark: a named place in a page, created with an id attribute. A link can open in the same window or a new one.
  8. A relative file path gives the location of a file from the current page, such as images/logo.png. An absolute file path gives the full location on one computer. Absolute paths must not be used for local files, because they will not work when the site is moved to a web server.

Worked example

A web page shows a logo when tested on the designer's computer, but not once it is uploaded. The image's path begins with C:\Users. Explain the problem and the fix.

  1. The page uses an absolute file path, which points to a folder on the designer's own computer.
  2. That folder does not exist on the web server, so the image cannot be found.
  3. Replace it with a relative file path, such as images/logo.png, and upload the image with the page.

Tips and tricks

  • Head: about the page. Body: on the page. The title tag is in the head, even though you see the title in the browser tab.
  • Content, presentation, behaviour: HTML, CSS, scripting. Learn the three pairs.
6 questions, about 2 minutes.

It lands in your notebook with its questions as flashcards.

Website authoring: HTML and the content layer: 6 questions and answers

These are the quiz’s questions. Do the quiz first, then come back here for the ones that got you.

  1. Which layer of a web page is created with HTML?
    • the content layer (the answer)
    • the presentation layer
    • the behaviour layer
    • the network layer

    HTML gives the page its content and structure.

  2. Which layer uses a scripting language?
    • the content layer
    • the presentation layer
    • the behaviour layer (the answer)
    • none of them

    It makes the page respond to the user.

  3. In which section of a web page is the page title placed?
    • the head (the answer)
    • the body
    • the footer
    • a table

    It appears in the browser's tab, not on the page.

  4. What is the purpose of alternative text on an image?
    • to make the image load faster
    • to describe the image if it cannot be seen or does not load (the answer)
    • to link the image to a stylesheet
    • to resize the image

    Screen readers read it aloud.

  5. Which tag creates a table data cell?
    • tr
    • th
    • td (the answer)
    • li

    tr is a row and th is a header cell.

  6. Why should an absolute file path not be used for a stylesheet stored with the web page?
    • It is too short.
    • It will not work when the site is moved to another computer or server. (the answer)
    • It makes the page slower.
    • Browsers cannot read it.

    The path points to a place that exists on one computer only.

Still stuck on this one?Ask in the Papermunch Discord, or help someone else who is. Discord is for ages 13 and up.Join the server

Things you can type

Or go straight to

Or browse a shelf