Lesson 2Your profile webpage

Knox badge
  • To use several tags to create a webpage
  • How to produce content for my website
  • I will be able to create a webpage about me
  • I will be able to use the heading, paragraph, break and list tags in HTML

In the last lesson, you built a webpage using the basic structure of a webpage. 

  1. Write the code for the basic structure of a webpage. Put your code below and save the original file as profile.html.
  2. What is HTML made up of?

In this lesson, you will build your profile page using HTML. You are going to add a gallery of photos to the site as well.

Useful tags

In this lesson you are going to learn how to use the following tags:

  • Heading
  • Paragraphs
  • Breaks
  • Lists

Using these tags, you are going to build a basic profile webpage - much like your learning logs from S1.


There are 6 heading tags ranging from <h1> to <h6>, with <h1> being the largest and <h6> being the smallest. Headings are used at the top of the page and in sections of content. 

Typically, the <h1> tag should only be used once on a website. Many websites get this wrong, so it's important to note this now. You can see on this page there is a <h1> element at the very top.




Much like when you are writing a piece of text, paragraphs are used in webpages for long pieces of text to make it read more easily. 

Paragraphs in HTML add space between lines making it more obvious where one paragraph ends and another starts. For example, this is a paragraph of text using the <p> tag.

In HTML, creating a paragraph is as simple as using the <p> tag then writing the text needed in it and then closing it with </p>.

<p>My name is Mr Balfour</p>
<p>Welcome to my website</p>

My name is Mr Balfour

Welcome to my website


The <br> tag in HTML is a line break tag that is used to create a line break or a single line break within a text block. The break tag is an example of a self-closing or empty tag.

Line 1<br>Line 2
Line 1
Line 2


The <ul> and <ol> tags in HTML are used to create lists. Both lists use the <li> (list item) tag inside them to represent an item in the list.

The <ul> (unordered list) tag is used to create an unordered list, where the order of the list items is not important. The list items are typically represented as bullet points.

  <li>List item 1</li>
  <li>List item 2</li>
  • List item 1
  • List item 2

The <ol> (ordered list) tag is used to create an ordered list, where the order of the list items is important. The list items are typically represented as sequentially numbered or lettered items.

  <li>List item 1</li>
  <li>List item 2</li>
  1. List item 1
  2. List item 2

Look up the following and write the tags for each of them


Your profile

In this lesson, the main goal is to build your own profile page using HTML.

Use the file profile.html to build your profile. You need to do the following on this page:

  1. Change the title of the page to your name
  2. Add one <h1> tag at the top, also with your name
  3. Add a paragraph (or two) just introducing yourself and what this website is.

    For example, Hello there my name is Mr Balfour. This webpage is my personal profile that I am building using HTML. 

  4. Add an <h2> tag with the content 'My favourites'
  5. Add an <h3> that says 'Hobbies' and then an unordered list with up to 10 hobbies
  6. Find a quote online and using the tag you found earlier add the quote to the page.

Add your finished HTML in here

Once you have answered each of the questions, remember to save this worksheet by pressing the button at the bottom.

S2 Web Development Lessons
Provide Feedback

What did you think of this document?

-- DragonDocs version 0.9 --


Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

Added CSS styles to page
Added JavaScript code to the page

Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

Added the Accessibility features
Filters added

Purple filter added

Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

First trial of DragonDocs in teaching

Added the Task, Starter, Review your learning sections

Added the feedback feature
Added the Dark Mode toggle

Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

Once a section has been read or completed, the user can now hide that section

Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

Added the Save button and the ability to save 'results' or answers to a Word document

Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

Added the active class to active links in the bottom section

Added the image upload feature

Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

Added the new step_by_step_mode feature, allowing sections to be viewed individually

Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number