Welcome to Website Authoring: Creating a Web Page!

Hello IGCSE ICT learners!
This chapter is where you transition from using software to becoming a web creator. Understanding how web pages are built using HTML (HyperText Markup Language) and CSS (Cascading Stylesheets) is a vital practical skill for Paper 3.
Don't worry if you find the code a bit intimidating at first. We will break down the web page creation process into simple, easy-to-follow layers!

Key Goal: To confidently use HTML tags to structure content and CSS to apply presentation formatting, ensuring your web page is consistent and appropriate for its audience.

Layer 1: The Foundations of a Web Page Structure (21.1)

Think of a web page like building a house. You need separate plans for the structure, the interior design, and the smart home features. Websites follow a similar principle, using three development layers to separate concerns.

The Three Web Development Layers

It is important to understand why we separate these functions: it makes the website easier to manage, edit, and update consistently.

1. Content Layer (HTML)

Purpose: Used to enter the actual content and create the structure (skeleton) of the web page.
What it controls: Text, images, links, tables, lists, and headings.
Analogy: This is the textbook itself—the raw information and chapters.

2. Presentation Layer (CSS)

Purpose: Used to display and format elements within the web page.
What it controls: Colours, fonts, sizes, borders, spacing, and layout.
Analogy: This is the graphic design—the colours, font choices, and layout of the textbook pages.

3. Behaviour Layer (Scripting Languages)

Purpose: Used for a scripting language (like JavaScript) to control elements within a web page.
What it controls: Interactive features, animations, validating input forms.
Note: You are only required to know the purpose of this layer, not write the code.

Quick Review: The Three Layers

1. HTML = Structure (What is it?)
2. CSS = Look (How does it look?)
3. Scripting = Action (What does it do?)


Layer 2: Creating the Web Page Content using HTML (21.2)

HTML defines the basic structure, divided into two main parts: the Head and the Body.

The `` Section of a Web Page

The head section contains information about the page itself (metadata), which is usually not visible to the user in the main browser window.

  • Page Title: This is essential. It defines the title that appears in the browser tab or window frame.
  • Attaching External Stylesheets: This tells the HTML page where to find the corresponding CSS file to apply formatting. We use a relative file path here.
  • Metatags: These provide crucial information for browsers and search engines. Key metatags include:
    • charset: Defines the character encoding (usually UTF-8).
    • description & keywords: Helps search engines understand what the page is about.
    • author: States who created the page.
    • viewport: Tells the browser how to scale the page on different devices (like phones and tablets).
  • Default Target Window: Sets the default place where hyperlinks will open (e.g., in the same window).

The `` Section of a Web Page

This is where all the visible content goes!

Text and Structural Tags

HTML provides predefined tags for text elements to define their importance and structure:

  • Headings: `h1`, `h2`, `h3` (H1 is the most important, H3 is less important).
  • Paragraphs: `p`.
  • Lists: `li` (List item). These can be ordered lists (numbered) or unordered lists (bullet points).
  • `
    ` Tag: A very common tag used as a container or divider to group elements together, usually so styles or classes can be applied to the whole group at once.
Working with Images, Sound, and Video

Inserting multimedia objects makes a page engaging, but you must use appropriate attributes:

  • Images: You must set the correct size and aspect ratio. Always use alternate text (alt text).
    Did you know? Alt text is crucial for accessibility (screen readers for visually impaired users) and search engine optimization (SEO).
  • Video and Sound Clips: You need to specify whether display controls (play, pause, volume) should be visible or if the media should autoplay (start immediately). You may also need to adjust the size.
Tables for Structure and Data

Tables are essential for displaying data and, historically, were used to control the overall layout structure of the web page.

  • A table uses `` for the overall container, `` for a table row, `
    ` for a table header cell, and `` for table data cell.
  • Spanning Cells: You must be able to adjust cells to span more than one row (rowspan) or more than one column (colspan).
  • Sizing: You can set table and cell sizes using pixels (px) for fixed sizes or percentage (%) values for responsive sizes.
  • Styles can be applied directly to tables or cells.

    • Navigation: Hyperlinks and Bookmarks

    Hyperlinks are the connections that make the internet a "web."

    Creating Hyperlinks:

    Hyperlinks can be created from both text and images. They link to:

    1. Bookmarks on the same page: This involves linking to an anchor defined by an id attribute (e.g., <h3 id="top">).
    2. Other locally stored web pages: You must use a relative file path (e.g., <a href="about.htm">).
    3. A website using the URL: You use the full web address (e.g., <a href="http://www.example.com">).
    4. Send mail: Uses the mailto: attribute to open the user's email client.
    Opening in Specified Locations (Targets)

    You can control where the linked page opens using the target attribute:

    • The same window (`_self`): This is the default setting.
    • A new window (`_blank`): Opens the link in a new tab or window.
    • A window named as specified: Used for more complex frame-based layouts (though less common now).
    Relative vs. Absolute File Paths (CRITICAL CONCEPT)

    This is an area where students often make mistakes.

    Absolute Path: The full, fixed address, starting from the root of the server (e.g., C:/Documents/website/image.jpg).
    Relative Path: The path *relative* to the current page (e.g., images/logo.png).

    Why we use Relative Paths for local files: If you use an absolute path to link to your local files (images, CSS, other HTML pages), they will break when the entire website folder is uploaded to a live web server. Relative paths ensure the link structure stays intact regardless of where the folder is placed.

    Key Takeaway for HTML:
    Structure your content using appropriate tags (h1, p, table). Use metatags for defining the page. Always use relative paths for local links and images.

    Layer 3: Styling the Web Page using CSS (21.3)

    CSS (Cascading Stylesheets) manages the presentation layer. Its main benefit is ensuring consistency across the entire website. If you change a style in one CSS file, it updates every page linked to it.

    Types of Styles and Cascading

    Stylesheets are "cascading" because multiple styles can apply to one element, and a hierarchy decides which rule wins:

    • External Stylesheets: A separate .css file linked to the HTML. This applies styles consistently to *all* linked pages. (Highest priority for consistency).
    • Inline Style Attributes: Styles written directly into an HTML tag (e.g., <p style="color: blue;">). This overrides external styles for that specific element.

    The hierarchy is important: Inline styles typically override External styles.

    Styles, Classes, and Elements

    We need ways to target specific parts of the HTML structure to apply formatting.

    • Element/Tag Styling (Generic Styles): Styles applied directly to an HTML tag (e.g., styling all `h1` tags blue).
    • Classes: A custom name preceded by a dot (e.g., .special_text). You apply a class to multiple elements, regardless of their tag type (H1, P, DIV, etc.). Classes allow flexibility in design.
    • Styles vs. Classes: A style generally refers to formatting applied to a standard element (like `p` or `h2`), whereas a class is a reusable, custom grouping of styles you define (like defining a reusable border style).

    Key CSS Properties You Need to Control

    You must be able to create, modify, and apply styles and classes that control the following properties to ensure consistent presentation:

    1. Font Properties
    • Font Family: Selecting the typeface (e.g., Arial, Times New Roman). Serif (decorative edges) and Sans-serif (clean edges) types.
    • Size: Measured in pixels (px) or points (pt).
    • Colour: Setting the text colour.
    • Text Enhancement: Including bold, italic, and alignment (left, right, centre, fully justified).
    2. Spacing and Layout Properties
    • Paragraph Spacing: Setting space before and after a paragraph.
    • Line Spacing: Space between lines of text.
    • Indents: Setting indents for paragraphs or bulleted lists.
    • Background Properties: Setting a background colour or inserting a background image.
    3. Table-Specific Properties

    These styles affect the appearance of the table, tr (table row), th (table header), and td (table data) elements:

    • Size: Setting the width and height of the table/cells.
    • Alignment: Horizontal (left, right, centre) and Vertical (top, middle, bottom) cell alignment.
    • Padding: The space *inside* a cell, between the content and the border.
    • Borders: Controlling the border colour, thickness, and whether the borders are visible/invisible or collapsed (simplified single line border).
    4. Attaching and Saving CSS

    External stylesheets must be saved in the cascading stylesheet format (.css). You can also attach comments to the stylesheet file (using /* comment here */) to explain your code, which is helpful for maintenance.

    Corporate House Style (14.2)

    Remember, all the styling decisions you make (fonts, colours, layouts) should follow a Corporate House Style, which is a set of rules used by a company to ensure all its documents and digital content (including its website) look and feel consistent.

    Purpose: To maintain a professional image and reinforce the company’s brand identity across all media.

    Quick Review: CSS Checkpoints

    1. CSS handles presentation (how it looks).
    2. External styles ensure site-wide consistency.
    3. Know how to control font, background, and table borders/padding.
    4. Use relative paths when linking the CSS file to the HTML page.

    Share

    Link Copied to Clipboard!

    Ready to Ace Your Exams?

    Join thousands of Hong Kong students from primary school to exam preparation who've improved their grades with our AI-powered practice platform. Get unlimited questions, instant feedback, and personalized learning paths for every level.

    Start Practice Now