- 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.
- Write the code for the basic structure of a webpage. Put your code below and save the original file as
profile.html
. - 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.
<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>
.
<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.
Line 1<br>Line 2
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.
<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.
<ol> <li>List item 1</li> <li>List item 2</li> </ol>
- List item 1
- 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:
- Change the title of the page to your name
- Add one
<h1>
tag at the top, also with your name - 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.
- Add an
<h2>
tag with the content 'My favourites' - Add an
<h3>
that says 'Hobbies' and then an unordered list with up to 10 hobbies - 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.