topic: Your first HTML page

Here is a great tutorial all about HTML. Do all the sections up to the end of HTML Paragraphs.

W3Schools - HTML Tutorial

While you are doing the tutorial, make sure that you make use of the Try it yourself button. If you want to learn to code then it’s important to play with the code.

Check your understanding before moving forward

Understanding is critical for coders. Before you move forward, it’s important that you understand a few things. Can you answer the following questions for yourself?

  • What is the purpose of HTML?
  • What is an HTML element?
  • What is an attribute?
  • What is the difference between <h1> and <h2>? What do these represent?
  • How do you make a paragraph? What happens if you put 2 paragraphs underneath each other? (You can write some code yourself to check your own answer)
  • Where must the document type declaration be?
  • What is a tag?
  • What is the difference between an opening tag and a closing tag?
  • How do you make use of opening and closing tags?

If you are unsure of anything then go back to the tutorial, or spend some time on Google.

You can also experiment a bit by writing HTML code and seeing what it does. Experimentation is one of the best ways to master code!

Your mission

Your mission is to make a website of your very own. It will just be one page for now.

It’s essential that you follow the instructions exactly, in the next step you will be deploying your website to the web. It will need to do exactly the right thing!

1. Create a new HTML file called index.html

It is important to name the file exactly right! We’ll be putting it on the Internet in the next step.

If you want to you can just edit the html file we made in the last step. So long as the file name is correct then we are good.

Please note that index.html is NOT the same as Index.html. Capital letters matter a lot in code. Please be extra careful about naming your files with the right case!

2. Let’s add some content

You’ll be adding a bunch of content to your html file. Please make sure that you are meeting all the requirements below:

2.1 Add a <head> element

You might not know what a head tag does just yet. You can learn about it here.

Write some HTML code that meets the following requirements:

  • Your page must make use of a <head> element
  • There must be one <title> element inside the head. Experiment a bit and make sure you know what the title does. You can give your page whatever title text you want. Eg: <title>First website</title>.
  • There must be one <meta> element that sets the charset to UTF-8. It should look like this <meta charset="UTF-8">.

2.2 The <body>

Write some HTML code that meets the following requirements:

  • it needs to have ONLY ONE <h1> heading
  • it needs to have ONE OR MORE <h2> headings
  • It needs to have ONE OR MORE paragraphs
  • There should be no text that is sitting outside of a heading or paragraph element.

2.3 Clean and valid code

Please make sure that your code is clean and valid. Here are a few things to look out for:

  • The document type declaration must be correct. The document type declaration is the very first line in your html file
  • You should be making use of valid tags - pay attention to case (all tags are lowercase)
  • Any tag you open should get closed
  • Your index.html file should meet ALL of the requirements described
  • You should be able to open your index.html file in a browser and it should behave sensibly
  • Make use of an online HTML validator to check your own work. Here is a recommended HTML validator, and here is a video showing you how to use the validator.

Check yourself!

In the next step, we’ll be getting your website online. So at this point, it’s VERY IMPORTANT that your code is up to scratch. If you missed any steps and host a website that doesn’t meet the requirements then you’ll need to come back here and fix everything.

Here are some things to check:

  • Is your HTML file named correctly?
  • If you use an online html validator then are there any errors? There should be no errors, your HTML should be perfectly valid
  • Did you put a title element inside the head?
  • Did you put a meta element inside the head? And did you set the charset correctly?
  • Is there a body element? It should be outside the head
  • Is there ONE h1 element inside the body?
  • Is there at least one h2 element inside the body?
  • Is there any text that is sitting outside of a heading or paragraph element? There should not be.
RAW CONTENT URL