Filters

Other

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.

Headings

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.

HTML
<h3>HTML</h3>

HTML

Paragraphs

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>.

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

My name is Mr Balfour

Welcome to my website

Breaks

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.

HTML
Line 1<br>Line 2
Line 1
Line 2

Lists

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.

HTML
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
  • 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.

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

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

Blockquote
Bold
Italic
Footer

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 --

20.08.2017

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

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

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

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

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

31.09.2021
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

02.02.2022
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

06.02.2022
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

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

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

-- DragonDocs version 2.0 (Kilimanjaro) --

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

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

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

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

11.02.2024
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

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

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

23.02.2024
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