Be able to create classes including background properties (colour, images), font properties, table, table row and table data properties (size, background colour, horizontal and vertical alignment, spacing, padding, borders: including collapsed, colou

21 Website Authoring

Learning Objectives

By the end of this lesson you will be able to:

  • Explain the three web‑development layers required by the Cambridge IGCSE ICT 0417 syllabus.

  • Write correct HTML5 markup for the content layer, including:

    • Document structure and required meta‑tags

    • Semantic structural tags

    • Media elements (images, audio, video) with appropriate attributes

    • Tables – creation, merging cells, sizing and CSS styling

    • Hyperlinks (internal, external, email) and bookmarks

    • Use of <div> for grouping and applying classes

  • Create and apply CSS classes that control:

    • Background colour and images

    • Font colour, size, style and family

    • Table, table‑row and table‑cell properties – size, background colour, horizontal & vertical alignment, spacing, padding, borders (collapsed, colour, thickness, visible/invisible)

  • Describe how CSS specificity, cascading order and inheritance affect the final presentation.

1. Web‑Development Layers (Syllabus Requirement 21.2)

LayerPurposeTypical Technologies
Content layerDefines the structure and meaning of the page.HTML5 elements, attributes, semantic tags, file paths.
Presentation layerControls visual appearance – colours, fonts, layout.CSS (external, internal, inline), classes, IDs.
Behaviour layerProvides interactivity (not assessed in IGCSE ICT 0417).JavaScript, DOM scripting (outside the scope of this lesson).

2. Content Layer – Essential HTML5

2.1 Document Structure & Required Meta‑tags

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Brief description of the page">
<meta name="keywords" content="keyword1, keyword2, keyword3">  <!-- optional for modern SEO -->
<meta name="author" content="Your Name">
<title>Page title</title>
<link rel="stylesheet" href="css/style.css">  <!-- external CSS – relative path -->
<!-- Optional for legacy IE browsers: -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
…content…
</body>
</html>

  • Doctype – forces HTML5 standards mode.

  • charset – usually UTF-8 to support all characters.

  • viewport – essential for responsive design on mobile devices.

  • description – used by search engines.

  • keywords – still part of the syllabus but optional for modern SEO.

  • author – identifies the page creator.

  • link – attaches an external stylesheet; the URL can be:

    • Relative – e.g. css/style.css (relative to the current folder).

    • Absolute – e.g. https://example.com/css/style.css.

2.2 Semantic Structural Tags

  • <header> – site or page header.

  • <nav> – navigation links.

  • <section> – thematic grouping of content.

  • <article> – self‑contained composition (e.g. blog post).

  • <aside> – tangential content such as sidebars.

  • <footer> – site or page footer.

2.3 Textual & Media Elements

  • Headings: <h1> … <h6>

  • Paragraphs: <p>

  • Inline emphasis: <strong>, <em>

  • Images (mandatory alt for accessibility):

    <img src="images/pic.jpg" alt="Descriptive text" width="300">

  • Audio:

    <audio controls>
    <source src="audio/song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>

  • Video (use controls and provide poster where appropriate):

    <video width="480" controls poster="images/poster.jpg">
    <source src="video/clip.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>

2.4 Hyperlinks & Bookmarks

  • Internal link (relative):

    <a href="page2.html">Next page</a>

  • External link (absolute):

    <a href="https://example.com">External site</a>

  • Email link:

    <a href="mailto:teacher@example.com">Email teacher</a>

  • Open in new tab/window:

    <a href="https://example.com" target="_blank">New tab</a>

  • Bookmark (target within the same page):

    <a id="section3"></a>
    <a href="#section3">Jump to Section 3</a>

2.5 Tables – Creation, Merging Cells & CSS Styling

Use HTML for structure only; style entirely with CSS (HTML attributes such as border, cellspacing and cellpadding are deprecated).

<table class="tbl‑styled">
<thead>
<tr class="header‑row">
<th colspan="2">Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Laptop</td>
<td>Model A</td>
<td>$800</td>
</tr>
<tr>
<td>Model B</td>
<td>$950</td>
</tr>
</tbody>
</table>

  • colspan="n" merges n columns.

  • rowspan="n" merges n rows.

  • Apply classes (e.g. .tbl‑styled, .header‑row) to control size, background, alignment, spacing, padding and borders.

2.6 Grouping Elements with <div>

The <div> element has no semantic meaning but is ideal for applying a class or ID to a block of content.

<div class="sidebar">
<h2>Quick Links</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

3. Presentation Layer – CSS Fundamentals

3.1 Linking CSS

  • External stylesheet – <link rel="stylesheet" href="css/style.css">

  • Internal stylesheet – placed inside <style> tags in the <head>

  • Inline style – style="color:#f00;" on an element (overrides external and internal rules)

3.2 Selectors, Specificity & Cascading

Selector typeSpecificity (a,b,c,d)Example
Inline style(1,0,0,0)style="…"
ID selector(0,1,0,0)#mainHeader
Class, attribute, pseudo‑class(0,0,1,0).highlight, [type="text"], :hover
Element selector(0,0,0,1)p, table

When two rules have the same specificity, the later one in the stylesheet wins. !important overrides normal specificity but should be used sparingly.

3.3 Inheritance

  • Inherited properties: color, font-family, font-size, line-height, text-align, etc.

  • Non‑inherited (box‑model) properties: margin, padding, border, background, width, height.

  • Force inheritance with the inherit keyword or by declaring the property explicitly on the child element.

3.4 Classes vs. IDs

  • Class – reusable; can be applied to many elements. Syntax: .myClass { … }

  • ID – unique per page; used when a single element needs a distinct style or for JavaScript targeting. Syntax: #myId { … }

  • In IGCSE exam answers, favour classes unless the question explicitly asks for an ID.

4. Background Properties

  • background-color – solid colour behind the element.

  • background-image – url('path/to/image.png').

  • background-repeat – repeat, repeat-x, repeat-y, no-repeat.

  • background-position – e.g. center, top left, 50% 50%.

  • background-size – cover, contain, or explicit dimensions (100px 50px).

  • background-attachment – scroll (default) or fixed.

5. Font Properties

  • color – text colour.

  • font-family – e.g. Arial, Helvetica, sans-serif.

  • font-size – px, em, rem, %.

  • font-weight – normal, bold, 100‑900.

  • font-style – normal, italic, oblique.

  • text-align – left, center, right, justify.

  • line-height – unitless multiplier (e.g. 1.5) or length value.

6. Table‑Related CSS Properties

6.1 Size & Spacing

  • width / height – set on table, tr, th, td.

  • border-spacing – distance between cells when border-collapse: separate.

  • padding – internal space inside a cell (replaces the old cellpadding attribute).

  • margin – space outside the table.

6.2 Alignment

  • text-align – horizontal alignment of cell content (left, center, right, justify).

  • vertical-align – top, middle, bottom, baseline.

6.3 Borders

  • border – shorthand (border:2px solid #333;).

  • border-collapse – collapse merges adjoining borders; separate keeps them distinct.

  • border-style – none, solid, dashed, dotted, etc.

  • border-color – any colour value.

  • border-width – thickness (e.g., 1px).

  • Invisible border: border:0; or border-style:none;.

6.4 CSS vs. Deprecated HTML Attributes

HTML attributeCSS equivalentNotes
cellpadding="10"td, th { padding:10px; }Controls internal cell space.
cellspacing="5"table { border-spacing:5px; }Works only with border-collapse:separate.
border="1"table, th, td { border:1px solid #000; }HTML attribute is deprecated; use CSS.

7. Example CSS Class Library (Ready for Exam Use)

/* ---------- 1. Background colours ---------- */
.bg-blue      { background-color: #cce5ff; }
.bg-grey      { background-color: #f2f2f2; }
/* ---------- 2. Background images ---------- */
.bg-pattern   {
background-image: url('images/pattern.png');
background-repeat: repeat;
background-position: center;
background-size: auto;
}
/* ---------- 3. Font styling ---------- */
.text-large-bold {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
}
/* ---------- 4. Table layout ---------- */
.table-collapsed {
border-collapse: collapse;
width: 100%;
}
/* ---------- 5. Table header row ---------- */
.header-row {
background-color: #333333;
color: #ffffff;
font-weight: bold;
border: 2px solid #000;
}
/* ---------- 6. Table data cell ---------- */
.td-center {
padding: 8px;
text-align: center;
vertical-align: middle;
border: 1px solid #999999;
}
/* ---------- 7. Alternate data cell ---------- */
.td-light {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
vertical-align: middle;
border: 1px solid #cccccc;
}
/* ---------- 8. Sidebar grouping ---------- */
.sidebar {
background-color: #e9ecef;
padding: 15px;
border: 1px solid #ced4da;
}

8. Summary Table of Key CSS Properties (Quick Revision)

ContextPropertyTypical ValuesResult
Any block‑level elementbackground-colorcolour name, #hex, rgb(), rgba()Solid background colour.
Any block‑level elementbackground-imageurl('path'), noneImage placed behind the element.
Any elementcolorcolour name, #hex, rgb()Text colour (inherited).
Textual elementsfont-familyArial, Helvetica, sans-serif, etc.Font face for the text.
Textual elementsfont-sizepx, em, rem, %Size of the text.
Table, th, tdborder1px solid #000Visible border around the element.
Tableborder-collapsecollapse | separateControls whether adjoining borders merge.
Tableborder-spacing0, 5px, 10pxSpace between cells (only when separate).
th, tdpadding5px, 10pxInternal space inside a cell.
th, tdtext-alignleft, center, right, justifyHorizontal alignment of cell content.
th, tdvertical-aligntop, middle, bottom, baselineVertical alignment of cell content.