Building the web with HTML, CSS, and JavaScript.

Analysis

1. End-User Requirements

What the target audience expects.

  • Easy to navigate.
  • Clear text size.
  • Fast loading (compressed images).
2. Functional Requirements

What the site must technically do.

  • Play a video on the homepage.
  • Link to external resources.
  • Display a gallery of images.

Design & Law

Wireframes: Blueprints of the user interface. Shows layout without detailed content.
Low-Fidelity Prototype: Creating a paper version of the site based on the wireframe to test navigation.
Website Structure: Typically a hierarchical tree (Home → Topics → Detail Pages).
Copyright Act
  • Ask permission from the owner.
  • Pay a fee (royalty) if required.
  • Acknowledge the source.

Media Formats

Graphics
Fmt Use Type
JPEG Photos Lossy
PNG Transparent Lossless
GIF Animation Lossless
Audio
Fmt Features
WAV Raw, High Qual, Large.
MP3 Compressed, Small.
Factors
  • Resolution/Color Depth: High = Large File.
  • Sampling Rate: High Hz = Better Sound.
  • Compression: Reduces file size.

Structure & Text

<html>
  <head>
    <title>My Site</title>
  </head>
  <body>

    <!-- Headings (1-6) -->
    <h1>Main Title</h1>
    <h2>Sub-heading</h2>

    <!-- Paragraph -->
    <p>This is text.</p>

    <!-- Grouping -->
    <div>Box Content</div>

  </body>
</html>

Lists

HTML Lists
<!-- Ordered (1, 2, 3) -->
<ol>
  <li>First Item</li>
</ol>

<!-- Unordered (Bullets) -->
<ul>
  <li>Milk</li>
</ul>

Links & Addressing

Link Types
Internal Inside THIS website.
External Different website.
Addressing
Absolute: Full URL.
href="https://www.bbc.co.uk"
Relative: From here.
📂 Same: "page2.html"
⬇️ Down: "media/video.mp4"
⬆️ Up: "../index.html"

Media Code

Image
<img src="pic.jpg" alt="Dog" width="200">
Audio/Video
<audio controls>
  <source src="s.mp3" type="audio/mp3">
</audio>

Purpose & Setup

CSS controls Style (Colors, Fonts, Layout).

1. Internal (In Head)
<style>
  p { color: red; }
</style>
2. External (Best)
<link rel="stylesheet" href="style.css">

Selectors

Element
p { ... } /* All paragraphs */
Class (.)
.intro { ... } /* class="intro" */
ID (#)
#logo { ... } /* id="logo" */

Properties

body {
  background-color: lightblue;
  font-family: Arial;
}

h1 {
  color: navy;
  text-align: center;
}
Note: American spelling!
color, center.

Mouse Events

onmouseover (Hover) onmouseover="this.style.color='red'"
onmouseout (Leave) onmouseout="this.style.color='black'"

Testing

What to check:

  • Links: Do they work?
  • Media: Does it load?
  • Consistency: Same on Chrome/Edge?

Evaluation

Fitness for Purpose

Does the website meet the requirements?

"Fit for purpose because it displays the video gallery and allows audio downloads as requested."

Ex 1: Analysis & Design

Scenario: "Safari Zone"

A website for a local wildlife park.

Requirements
  • Display ticket prices.
  • Highlight "Animal of the Month".
  • Change text color on hover.
Header
Nav
Main

Ex 1: Code

HTML + CSS + JS

<style> .hi { background: gold; } </style>
<body>
  <div class="hi">
    <h1>Lion Month</h1>
    <img src="lion.jpg">
    <p onmouseover="this.style.color='red'"
       onmouseout="this.style.color='black'">
      Tickets Here
    </p>
  </div>
</body>

Ex 1: Review

Test Plan
Test Expected Result
Image Lion
Hover Red Text
Evaluation

"Fit for purpose as it highlights the Lion and includes interactive tickets."

Ex 2: Layouts

Scenario: Blog Review

Styling "Pros" vs "Cons" boxes.

<style>
  .pro { background: lime; }
  .con { background: pink; }
</style>
<div class="pro">Good Graphics</div>
<div class="con">Expensive</div>

Ex 3: Music

Scenario: Band Site

Compressed audio + External link.

<audio controls>
  <source src="song.mp3" type="audio/mp3">
</audio>
<a href="https://tickets.com">
  Buy Tickets
</a>

Ex 4: Interactive

Scenario: Gallery

Rollover image swap.

<img src="front.jpg"
  onmouseover="this.src='back.jpg'"
  onmouseout="this.src='front.jpg'">