Basic HTML Exercises

  1. Create opening and closing tags for: <html>, <head>, <body>
  2. Create a H1 heading
  3. Create a H2 heading
  4. Create paragraph text
  5. Create a style tag in the head section and apply CSS styling to your document (internal CSS)

 

Body

The Body section of HTML

The visible part of the HTML document is between <body> and </body>

<body>

</body>

Head

The Head section of HTML

The metadata of a website is in the head element.

<head>

</head>

Links

How to create links in HTML:

<a href=”https://www.rmit.edu.au”>RMIT University</a>

How to style links with CSS

Internal CSS:

<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>

Colours

Colours can be expressed by name, hex code, RGB values and more.

<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>

Learn about colours on W3Schools

Click this link for example colours by name and hex code.

Fonts

<head>
<style>
h1 { color:#ff6347;    font-family: Roboto, Helvetica, sans-serif;    }
h3 { color:#FF8C00;    font-family: ‘Open Sans’, Helvetica, sans-serif;    }
p { color:DarkOrange;    }
</style>
</head>

Introduction to fonts on W3Schools

Defining the font-family

Test Your Skill

Try the tests below on W3 School to see how well you comprehend HTML and CSS.

HTML Headings

HTML Paragraphs

HTML Links