HTML Basics I (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
HTML basics I
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
What is HTML?
HTML (Hypertext Markup Language) is the language used to create the content of web pages
HTML uses elements written inside angle brackets, for example
<p>and</p>Most elements have an opening tag and a closing tag
Tags are used to structure content such as headings, paragraphs, images and links
Web browsers read HTML code and render it as a web page
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first web page.</p>
</body>
</html>
The basic structure of a web page
<html>
<html>is the root element of an HTML documentAll other elements are written inside the
<html>and</html>tags
<head>
The
<head>section contains information about the web page, not the main contentThis can include the page title and links to external files, such as CSS
<title>
The
<title>element sets the text shown on the browser tabIt is written inside the
<head>section
<head>
<title>Sports Results</title>
</head>
<body>
The
<body>section contains everything that will appear in the browser windowThis includes text, images, links, audio, video and lists
<body>
<h1>Sports Results</h1>
<p>Welcome to the results page.</p>
</body>
Headings and paragraphs
Headings <h1> to <h6>
<h1>is the main heading,<h2>is a subheading and so onHeadings help give the page a clear structure
<h1>Quiz Night</h1>
<h2>Round 1: General Knowledge</h2>
Paragraphs <p>
<p>is used to create blocks of text
<p>The quiz starts at 7 pm. Please arrive 10 minutes early.</p>
Divisions with <div>
<div>is used to group related content togetherHelps organise the layout of a page
Often used with CSS to style sections
<div>
<h2>Contact us</h2>
<p>Email: [email protected]</p>
</div>
Images with <img>
Images are added using the
<img>element<img>is an empty element (no closing tag)Uses
srcto give the file pathUses
alttext to describe the image for accessibility
<img src="logo.png" alt="School logo">
Hyperlinks with <a>
Hyperlinks let users move between pages or different sections of a page
Basic structure:
<a href="page.html">Link text</a>
The text between
<a>and</a>is what the user clicks
Types of hyperlink
Internal link (same website) - uses a relative file path
<a href="about.html">About us</a>
External link (different website) - uses a full URL
<a href="https://www.sqa.org.uk">SQA website</a>
Bookmark link (same page) - use
idto mark a location, then link to it with#id
<h2 id="rules">Competition rules</h2>
<a href="#rules">Go to rules</a>
Email link
<a href="mailto:[email protected]">Email us</a>
Relative and absolute file paths
When you link to images or pages, you need a file path
Relative file path
Gives the path from the current page to the target file
Changes depending on where the HTML file is stored
Used for files within the same website
<img src="images/banner.jpg" alt="Banner">
<a href="contact.html">Contact</a>
Absolute file path (URL)
Gives the full location, starting with
httporhttpsUsed for external websites
<a href="https://www.bbc.co.uk/bitesize">BBC Bitesize</a>
Examiner Tips and Tricks
For the exam, you must be able to:
Describe relative and absolute addressing
Choose the correct type for local pages vs external sites
Unlock more, it's free!
Did this page help you?
