HTML basics for Canvas

next

HTML basics for Canvas

This short course will introduce to the essentials of HTML. You don't need to be a programmer - just enough to feel confident using templates in Canvas. To navigate this course, use the buttons at the top or follow the instructions ⬆️

Want to create something like this?

You can with just a basic knowledge of HTML and some great templates.

Let's get started

next

back

Over the next 30 minutes, you are going to learn to:

01

Recognise key HTML elements, tags, and attributes.

02

Edit existing HTML templates in Canvas to customise content.

Apply basic edits (e.g., headings, colours, emphasis, links) to make learning pages more engaging.

03

next

back

What is HTML?

Think of HTML as the 'instructions' that tell the browser how text, images, and layouts should appear.

💬

HTML stands for HyperText Markup Language. It structures content on the web, including Canvas pages. HTML consists of the components below. 👉 Select each one to learn what it does.

Attributes

Elements

next

back

HTML is like Lego blocks - pieces you stack together to build a structure.

🧩

The building blocks of HTML

Let's now explore some of the most commonly used elements within HTML. 👉 Select each one to learn what it does.

colours

styles

paragraphs

colours

styles

sections

headings

paragraphs

sections

headings

When using HTML is often easier to use the RGB or HEX values, rather than naming a colour. Important: in HTML code, colour must be spelt the American way 'color'. On the right you will find some great resources that you can use to get the code for various colours to use in HTML.

W3 Schools

HTML colour codes

The Canva colour wheel

Adobe colour wheel

You are likely familiar with headings. You may have used them in a word document for example. Headings in HTML are very similar. The HTML element for headings is ‘h’ along with a number. For example, <h1> </h1> The number indicates the size of the heading. 🍿 Learn more about headings in the video on the right.

The paragraph element is probably the most used HTML element. It's what tells the page that you are creating a paragraph. 🍿 Learn more about paragraphs in the video on the right.

Short for division, the <div> element acts as a container that divides a page into sections. It group elements in your HTML together. This enables you to apply custom styles to a group of HTML elements. 🍿Learn more about the <div> element in the video on the right.

We've already learnt about the style attribute and how you can use it to style an element. But there are other types of formatting that you can use in HTML, such as: <br> or <strong> = bold text <i> or <em> = italics text 🍿Learn more about the style elements in the video on the right.

next

back

From code to Canvas

The great thing about using HTML in Canvas, is that there are loads of pre-written code that you can use. At the end of this eLearning we will share some HTML templates that you can start using today. But first you need to know how to use them. 🖥️ In the video on the right, we will demonstrate the process for using template HTML in Canvas.

Are you ready to start using HTML in Canvas?

Before you get started using the HTML templates in Canvas, let's check in on what you've learnt. There will be 3 questions for you to answer.

Ready? Use the button below to get started 👇

Start the quiz

Remember:

• HTML is made of elements, tags, attributes, and values.
• You don't need to memorise everything - just recognise and edit the basics.
• Templates make set up easy and consistent.

💡

You're now ready to start practising!

✏️

I'd like you to now have a go at using the HTML templates in Canvas. The resources and instructions you need will be provided on the activity page.

Start the task

To format or add style to an element, we need to use attributes. Attributes must be added to the opening tag of an element and determine how the content in that element will appear. These are usually made up of two parts: a name and a value. The name is the thing you want to change or format, for example the colour of the text. The value is how you want to change or format the element.

To learn more about elements, please refer to the 2-minute video below 🍿

The value

<p style=color:red">This text is green</p>

The name

Output

To learn more about elements, please refer to the 2-minute video below 🍿

We compose HTML using elements. These elements are what structure a page and define it's content. The below element is a paragraph. Each HTML element consists of tags. These are the symbols either side: <p> </p>. Think of them as a container. The content is then in between these tags.

Closing tag

Opening tag

<p>This is an element</p>

Content