Project #1 - About Me

Congratulations for getting this far!

So far Aria has learnt a lot and hopefully you have too. We have covered the basics of what HTML files and HTML tags are and then looked at some key HTML elements like the heading elements, the, paragraph element and the image element. Then on top of that we have looked at using attributes to give our HTML elements unique identifiers or classes.

This has been great and all but I think I want to start making my website now.

That sounds like a great idea.

Let’s start with the most important page of all.

The Homepage, the first page people will come to, is always an excellent place to start.

I don’t care about that right now.

The most important page is obviously the ‘About Me’ page.

Who would have guessed that Aria believes the most important thing is herself? Well, she is a cat after all.

The first question you need to answer before you start writing the code for your page is: What do I want on my page?

Well everyone needs to know about me, so I’ll just put a title and a big picture.

That’s a start but it doesn’t really explain about you does it?

How about an introduction telling people who I am?

Perfect.

Don’t you mean Purrfect?

What else do you want to add?

I don’t want it to be really long and boring.

Then why not add a short list of fun facts?

That’s a good idea, for you.

What do you mean for me?

And maybe to finish, one of favourite quotes about cats.

So Aria has a plan for her page. It will start with a title and a picture, then include a list of fun facts about her as a cat and then finish with a favourite quote of hers. Now she has a plan she can begin writing the code for her page and the first step is to create the HTML file where her code will be saved.

Step 1 - Making the HTML File

Using which every web development software she likes, Aria has to create a new, blank HTML file and save it with a suitable name. Seeing as this is the ‘About Me’ page and remembering that you cannot have spaces in the file names, instead they must be hyphens, about-me.html seems like a good choice.

Remember that all HTML files end with the .html suffix to tell computers what they are.

Try out your own filename in the box below:

Step 2 - Adding the Head and the Body

The essential parts of Aria’s code are the head tag and the body tag which she needs to add into her empty file. For now both will be empty but we will be adding code inside the body tag.

Here is Aria’s code so far:

        <head>
        </head>
        <body>
        
        
        </body>
      

Notice how Aria has left some space in between the opening and closing tags of her body element for the other code she knows will go in there.

Step 3 - Adding a Title

Naturally, Aria is very keen on adding a big title, so of the six headings she will want to use the biggest and most bold text which of course is done using the h1 tag. As the text will be so large, we don’t want a lot of it so let’s make the title short.

Here is Aria came up with:

        <h1>About Me - Aria!</h1>
      

About Me - Aria!

Remember that this code goes in between the body tags so Aria’s code so far looks like this.

        <head>
        </head>
        <body>
          <h1>About Me - Aria!</h1>
        
        </body>
      

Try a few on your headings in the box below:

        
      

All About Aria

Step 4 - Adding an Introduction

The next part of Aria’s plan was to add a short introduction onto her web page so it is good place for a paragraph element or two to add some text. As we want this text to sit below the title, the code for each paragraph element must be after the code for the title.

        <head>
        </head>
        <body>
          <h1>About Me - Aria!</h1>
          <p>My name is Aria and I am several years old and a female tabby cat. This is my first website as I am being taught by owner/housemate. Despite rumours, I can confirm that I only ever poo in my litter tray and would never leave any in the middle of the living room floor.</p>
        </body>
      

About Me - Aria!

My name is Aria and I am several years old and a female tabby cat. This is my first website as I am being taught by owner/housemate. Despite rumours, I can confirm that I only ever poo in my litter tray and would never leave any in the middle of the living room floor.

As Aria didn’t want her introduction to be too long, she has contained it in a single paragraph element but if she wanted to add more she could always add another paragraph element underneath by adding another p tag.

Before writing your own introductory paragraph, practice using the box below.

        
      

I'm Aria and there's some important things you need to know about me.

Step 5 - Adding a Picture

The moment Aria has been waiting for has arrived, she finally gets to add a picture of herself to her website.

To add an image we use the img tag remembering that the img tag only has the opening part of the tag and that it must specify where the picture is on the computer using the src attribute.

        <img src='imgs/selfie.jpg' >
      

In Aria’s code she is referring to a picture called selfie.png which is saved in a folder called ‘imgs’. Her ‘imgs’ folder must be saved in the same place as about-me.html for this to work.

Step 6 - Adding a List

Next Aria wanted to add a list of fun facts about herself onto her page.

She has quite rightly identified that as the list is a collection of facts with no particular order she can use the unordered list element to add bullet points to her facts.

Aria has put together a list of four facts and so her code looks likes this:

        <ul>
          <li>My favourite food is dinner.</li>
          <li>I love to climb the tree in my front garden.</li>
          <li>Personally, I believe 4 naps a day is the right amount.</li>
          <li>I have never deliberately pooped on the living room floor.</li>
        </ul>
      

The list will be displayed under her selfie and so the code for the list is written directly below her image tag. Together the photo and the list look like this:

  • My favourite food is dinner.
  • I love to climb the tree in my front garden.
  • Personally, I believe 4 naps a day is the right amount.
  • I have never deliberately pooped on the living room floor.

Practice making your own lists

        
        
        
        
        
      

My Favourite Lists

  • Ordered Lists
  • Unordered Lists

Step 7 - Adding More Text

The final part to Aria’s first About Me page is one of her favourite quotes. I was surprised to see that the quote wasn’t something from our lessons and even more surprised to see that her favourite quote wasn’t something she had said.

As she has done with previous text, Aria has correctly used the p tag to add the quote to her page and she has chosen to add a second paragraph element to include the name of the person who said her favourite quote.

Her code looks like this:

        <p>In ancient times cats were worshiped as gods; they have not forgotten this.</p>
        <p> - Sir Terry Pratchett</p>
      

In ancient times cats were worshiped as gods; they have not forgotten this.

- Sir Terry Pratchett

Step 8 - Seeing the Finished Product

You’ve finished your first webpage! How do you feel?

Tired. That was hard work.

I assumed because you did it must be easy.

I’ll try not to be offended by that.

I mean I thought it would be easy or for people who aren’t so good at thinking.

Trying really hard not to be offended now.

In order to see the webpage, all Aria needs to do is save her ‘about-me.html’ file, find it on her computer and open it with a browser, which in most cases just means double clicking on it. However, it’s always good to do one last check of your code to check if there are any mistakes.

Here is Aria’s finished code:

        <head>
        </head>
        <body>
          <h1>About Me - Aria!</h1>
          <p>My name is Aria and I am several years old and a female tabby cat. This is my first website as I am being taught by owner/housemate. Despite rumours, I can confirm that I only ever poo in my litter tray and would never leave any in the middle of the living room floor.</p>
          <img src="imgs/selfie.png” >
          <ul>
            <li>My favourite food is dinner.</li>
            <li>I love to climb the tree in my front garden.</li>
            <li>Personally, I believe 4 naps a day is the right amount.</li>
            <li>I’ve never deliberately pooped on the living room floor.</li>
          </ul>
          <p>In ancient times cats were worshiped as gods; they have not forgotten this.</p>
          <p> - Sir Terry Pratchett</p>
        </body>
      

Is there anything you think you should check?

I don’t know, you’re the teacher, you tell me!

Well, let’s think about what you know.

I know that the bed is the softest part of house and that the side of the sofa has lots of scratches on it.

Great. I meant, what do you know about HTML?

Well I know you need to use HTML tags for each element.

Good, that’s something you can check: Have you used the correct HTML tags?

And that each tag has an opening and a closing part.

Excellent! Remember, we have seen an exception.

Of course, the ‘img’ tag only has an opening tag!

Brilliant!

I am brilliant! Maybe I don’t need a teacher. I’m a natural.

A natural disaster.

What was that?

Nothing. Anything else to check?

What about order?

HTML elements appear in order, so I should check each tag is written in the order I want it to be shown.

Perfect. Those are three smart checks you can easily make on your code.

Well done.

Thank you.

And also, I have great hearing, I know what you said.

I mean if you want to see a disaster you should see the side of the sofa.

Here are three checks you can make on your code before you save it and open it with your browser.

  • Have you used the correct HTML tags for each element?

  • Where appropriate, has each element got an opening and a closing tag?

  • Is the code written in the order you want the elements displayed?

Checking for errors in your code is good practice and should be done regularly. The more often you check your code the easier it will be to spot mistakes.

Looking for errors and fixing any issues is known as debugging. It’s a historic term which comes from when computers used to be much larger and code was written using holes punched into tape. Insects would destroy the tape, either by eating it or tearing through it, and so the code was ruined and would not work as intended. So debugging is removing bugs from your code to ensure it works exactly as you want it to.

Aria's code has been added to her very own website!

You can click the link below to see what Aria's finished code looks like.

Aria's About Me (Basic)

Later we will revisit this code and add give elements classes or an id so we can add styling. So for now, this code is saved on her basic about me page.

Try using this code as a basis for your own about me webpage.