Be able to insert appropriate objects into a web page including text, images, sound clips, video (display controls, remove controls, autoplay), to adjust image or video size, aspect ratio and apply alternate text

21 Website Authoring

Learning Objective

Be able to insert appropriate objects into a web page including text, images, sound clips, video (display controls, remove controls, autoplay), to adjust image or video size, aspect ratio and apply alternate text.

1. Inserting Text

Text is added directly within HTML elements such as <p>, <h1>–<h6>, <li>, etc. No special attributes are required.

2. Inserting Images

Images are embedded with the <img> element. Key attributes:

• src – URL of the image file.
• alt – Alternative text for accessibility and when the image cannot be displayed.
• width and height – Pixel dimensions; preserve aspect ratio by specifying only one dimension or by using matching values.

Example:

<img src="photo.jpg" alt="Student using a laptop" width="300">

3. Inserting Audio

Audio is added with the <audio> element. Important attributes:

• src – URL of the audio file (or use a nested <source> element).
• controls – Displays playback controls.
• autoplay – Starts playback automatically when the page loads.
• loop – Repeats the audio continuously.
• muted – Starts the audio muted (useful with autoplay to avoid unexpected sound).

Example with controls:

<audio src="lecture.mp3" controls>Your browser does not support the audio element.</audio>

4. Inserting \cdot ideo

Video is embedded using the <video> element. Core attributes:

• src or nested <source> – URL of the video file.
• controls – Shows play, pause, volume, etc.
• autoplay – Begins playback automatically.
• loop – Replays the video when it ends.
• muted – Starts the video without sound.
• width and height – Define display size in pixels.
• poster – Image shown before playback starts.

Examples:

1. Video with visible controls:

   <video src="demo.mp4" width="640" height="360" controls>Your browser does not support the video tag.</video>

2. Video without controls (for use with custom JavaScript or as background):

   <video src="background.mp4" width="800" height="450" autoplay muted loop>Your browser does not support the video tag.</video>

3. Video that autoplays with controls:

   <video src="intro.mp4" width="720" height="405" controls autoplay>Your browser does not support the video tag.</video>

5. Adjusting Size and Maintaining Aspect Ratio

The aspect ratio of an image or video is the relationship between its width and height:

\$\text{Aspect Ratio} = \frac{\text{width}}{\text{height}}\$

To keep the original aspect ratio while resizing, specify only one dimension (width *or* height). The browser will calculate the other dimension automatically.

If both dimensions are set, the media may be stretched or squashed unless CSS is used (outside the scope of this note).

6. Providing Alternate Text

Alternate text (alt) is essential for:

• Screen‑reader users.
• Search engine optimisation (SEO).
• Situations where the image cannot be loaded.

Guidelines for good alt text:

1. Describe the content and purpose of the image.
2. Keep it concise (usually under 125 characters).
3. Avoid phrases like “image of” or “picture of”.

7. Summary Table of Common Tags and Attributes

8. Practical Checklist for the Exam

• Insert text using appropriate heading and paragraph tags.
• Use <img> with a meaningful alt attribute.
• Set either width *or* height to resize images without distortion.
• Embed audio with controls unless the question specifies otherwise.
• For video, decide whether controls, autoplay, or mute are required and add the attributes accordingly.
• Remember to close all tags and to place fallback text for media elements.