Fatskills
Practice. Master. Repeat.
Study Guide: UK K12 GCSE/A-Level: Year 5 KS2 Computer Science - Creating a Website, HTML Basics
Source: https://www.fatskills.com/key-stage-2-ks2/chapter/uk-k12-gcse-a-level-year-5-ks2-computer-science-creating-a-website-html-basics

UK K12 GCSE/A-Level: Year 5 KS2 Computer Science - Creating a Website, HTML Basics

By Fatskills Exam Guides Team — the exam nerds behind 28,500+ quizzes and 2.1M practice questions across 500+ global exams.

⏱️ ~7 min read

Learning objectives

By the end of this topic, students will be able to:

  • Understand the basics of HTML and its role in creating websites
  • Write simple HTML code to create a basic webpage
  • Explain the structure of an HTML document
  • Identify and use basic HTML tags
  • Apply HTML skills to create a simple webpage

Core concepts

HTML (Hypertext Markup Language) is a set of instructions that tells a web browser how to display a webpage. It is used to create the structure and content of a webpage. HTML is made up of a series of elements, which are represented by tags. Tags are surrounded by angle brackets (< >) and are used to define the start and end of an element.

There are two types of tags: opening tags and closing tags. Opening tags are used to start an element, while closing tags are used to end an element. For example:

<p>This is a paragraph of text.</p>

In this example, <p> is the opening tag and </p> is the closing tag. The text between the opening and closing tags is the content of the paragraph element.

HTML documents are made up of a series of elements, which are nested inside each other. This is known as the Document Object Model (DOM). The DOM is a tree-like structure that shows the relationships between the different elements on a webpage.

Basic HTML Tags

Some common HTML tags include:

  • <p>: paragraph element
  • <h1>-<h6>: heading elements
  • <img>: image element
  • <a>: link element
  • <ul> and <li>: unordered list elements

HTML Structure

An HTML document typically consists of the following elements:

  • <html>: the root element of the document
  • <head>: contains metadata about the document, such as the title and character encoding
  • <body>: contains the content of the document

Worked examples

Example 1: Creating a Basic Webpage

Let's create a simple webpage with a heading and a paragraph of text.

<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

In this example, we have created a basic HTML document with a heading and a paragraph of text. The <html> element is the root element of the document, and the <head> element contains metadata about the document. The <body> element contains the content of the document.

Example 2: Creating a Link

Let's create a link to a website.

<a href="https://www.example.com">Visit example.com</a>

In this example, we have created a link element with the href attribute set to the URL of the website. The text "Visit example.com" is the content of the link element.

Common misconceptions

  • HTML is a programming language. (HTML is a markup language, not a programming language.)
  • HTML is used to create animations and interactive effects. (HTML is used to create the structure and content of a webpage, but not to create animations and interactive effects.)
  • HTML is only used for creating websites. (HTML is used for creating a wide range of documents, including webpages, emails, and XML documents.)

Exam tips

  • Make sure to use the correct HTML tags and attributes.
  • Pay attention to the structure of the HTML document, including the use of opening and closing tags.
  • Use the Document Object Model (DOM) to understand the relationships between the different elements on a webpage.
  • Practice creating simple HTML documents to get a feel for the language.

MCQs

MCQ 1 [F]

What is the purpose of the <html> element in an HTML document?

A) To contain metadata about the document B) To define the structure of the document C) To be the root element of the document D) To contain the content of the document

Correct answer: C) To be the root element of the document

Why the distractors fail: A) is incorrect because metadata is contained in the <head> element. B) is incorrect because the structure of the document is defined by the use of HTML tags. D) is incorrect because the content of the document is contained in the <body> element.

MCQ 2 [H]

What is the difference between an opening tag and a closing tag?

A) An opening tag is used to start an element, while a closing tag is used to end an element. B) An opening tag is used to end an element, while a closing tag is used to start an element. C) An opening tag is used to define the content of an element, while a closing tag is used to define the structure of an element. D) An opening tag is used to define the structure of an element, while a closing tag is used to define the content of an element.

Correct answer: A) An opening tag is used to start an element, while a closing tag is used to end an element.

Why the distractors fail: B) is incorrect because it reverses the function of the opening and closing tags. C) and D) are incorrect because they describe the function of the tag as a whole, rather than the difference between opening and closing tags.

MCQ 3 [F]

What is the purpose of the <p> element in an HTML document?

A) To define the structure of the document B) To contain metadata about the document C) To contain a paragraph of text D) To be the root element of the document

Correct answer: C) To contain a paragraph of text

Why the distractors fail: A) is incorrect because the structure of the document is defined by the use of HTML tags. B) is incorrect because metadata is contained in the <head> element. D) is incorrect because the root element of the document is the <html> element.

MCQ 4 [H]

What is the Document Object Model (DOM)?

A) A tree-like structure that shows the relationships between the different elements on a webpage B) A set of instructions that tells a web browser how to display a webpage C) A programming language used to create animations and interactive effects D) A markup language used to create the structure and content of a webpage

Correct answer: A) A tree-like structure that shows the relationships between the different elements on a webpage

Why the distractors fail: B) is incorrect because it describes the purpose of HTML, rather than the DOM. C) is incorrect because it describes the purpose of JavaScript, rather than the DOM. D) is incorrect because it describes the purpose of HTML, rather than the DOM.

MCQ 5 [F]

What is the purpose of the <a> element in an HTML document?

A) To define the structure of the document B) To contain metadata about the document C) To contain a link to another webpage D) To be the root element of the document

Correct answer: C) To contain a link to another webpage

Why the distractors fail: A) is incorrect because the structure of the document is defined by the use of HTML tags. B) is incorrect because metadata is contained in the <head> element. D) is incorrect because the root element of the document is the <html> element.

Short-answer questions

  1. Describe the purpose of the <html> element in an HTML document.

Answer: The <html> element is the root element of the document, and it defines the structure of the document.

  1. What is the difference between an opening tag and a closing tag?

Answer: An opening tag is used to start an element, while a closing tag is used to end an element.

  1. Describe the purpose of the <p> element in an HTML document.

Answer: The <p> element is used to contain a paragraph of text.

  1. What is the Document Object Model (DOM)?

Answer: The DOM is a tree-like structure that shows the relationships between the different elements on a webpage.

  1. Describe the purpose of the <a> element in an HTML document.

Answer: The <a> element is used to contain a link to another webpage.