HTML Basics II (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
HTML basics II
HTML basics part 1 covers:
What is HMTL
Basic structure of a web page
Headings and paragraphs
Divisions tag
Image tag
Hyperlinks
Relative and absolute file paths
HTML basics part 2 covers:
Lists in HTML
Audio
Video
Full example
Lists in HTML
Lists are used to show information in a clear, structured way
Unordered list <ul>
Bullet point list
Each item is in an
<li>element
<ul>
<li>Starter</li>
<li>Main course</li>
<li>Dessert</li>
</ul>
Ordered list <ol>
Numbered list
Each item is in an
<li>element
<ol>
<li>Register for the event</li>
<li>Check your email</li>
<li>Attend the workshop</li>
</ol>
Audio with <audio>
You can embed sound files such as music or sound effects.
Basic example:
<audio controls>
<source src="theme.mp3" type="audio/mpeg">
</audio>
Key points:
controlsshows the play and pause buttons<source>gives the file and its type
Video with <video>
You can embed video clips
Basic example:
<video controls width="400">
<source src="trailer.mp4" type="video/mp4">
</video>
Key points:
controlsshows play, pause etcwidthcan be used to set the size
Example
<html>
<head>
<title>School Sports Day</title>
</head>
<body>
<h1>School Sports Day</h1>
<p>The School Sports Day will be held on Friday.</p>
<h2>Events</h2>
<ul>
<li>100m sprint</li>
<li>Long jump</li>
<li>Relay race</li>
</ul>
<h2>Location</h2>
<p>The event will take place on the school field.</p>
<img src="field.jpg" alt="School sports field">
<h2>More information</h2>
<a href="rules.html">View full rules</a><br>
<a href="https://www.metoffice.gov.uk">Check the weather</a>
<h2>Highlights from last year</h2>
<video controls width="320">
<source src="sportsday2024.mp4" type="video/mp4">
</video>
</body>
</html>
This example covers:
<html>,<head>,<title>,<body>Headings and paragraphs
<ul>and<li><img>Internal and external hyperlinks
<video>
Worked Example
A student is building the homepage.html file for a new website.
Write the minimum HTML markup required to implement the following two pieces of content within the <body> of the page:
A top-level heading displaying the text: "Welcome to our Wildlife Sanctuary"
An image file named
map.jpg, located in a sub-folder calledmedia/relative to the current file
[2]
Answer
<h1>Welcome to our Wildlife Sanctuary</h1>
Correctly implementing a heading element (e.g.,
<h1>) containing the required text content [1 mark]
<img src="media/map.jpg" />
Correctly implementing the image tag (
<img src="...">) using the required file name and the correct relative path (media/map.jpg) [1 mark]
Unlock more, it's free!
Did this page help you?
