Lesson 1 - Headings, paragraphs and bullets

Learning outcomes

ASPIRE: To be able to construct a web page using different types of lists

CHALLENGE: To be able to apply formatting tags to a web page

Task 1: Creating a basic web page using notepad

Your teacher should have just shown you how to make a basic web page using Notepad. Use the instructions and code snippets below to help you create your first webpage. Follow all instructions here very carefully!

Open Notepad from the Start Menu
Copy the following code into your text editor:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

3. That's it! Now we need to save your web page and open it in Google Chrome. Use the instructions in the next task.

Task 2: SAVING a basic web page using notepad

Click on File
Click Save As
Make a new folder somewhere sensible and call it 'Website 1'
Name your file index.html
Change the file type to All Files
Click Save

Well done. You should now have saved your first web page. Next, we need to open it in Google Chrome to see if it has worked.

Task 3: opening your basic web page using google chrome

Find your index.html file in Your Documents
Open Google Chrome from the Start Menu
Drag index.html to Google Chrome (see the video on the right)

Task 4: Experimenting with tags

So far, we have used only two different tags. Try out the tags listed below and see if you can work out what they do.

1. Open your index.html file in Notepad that you worked on earlier. Because we have already made this file, you can just click File then Save to save it

2. Try changing the text inside the title tags, then refresh your web page (F5) in Google Chrome - <title>Change this text!</title> - what does it do!?

Add new lines of code beneath your <body> tag to test them. Remember to keep refreshing Google Chrome when you change it!

<h1> What does this do? </h1>

<h2> What does this do? </h2>

<h3> What does this do? </h3>

<h4> What does this do? </h4>

<h5> What does this do? </h5>

<h6> What does this do? </h6>

<u> What does this do? </u>

<p> What does this do? <p>

<p> What does <b>this</b> do? </p>

When you have tried the code above, try editing it to say your name, or something different to what is already there. Practice makes perfect with HTML!

This time, try using the full code block below. It should display a bullet point list.

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

What happens if we use <ol> instead of <ul> ?

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Task 5 - Creating a shopping list

Using your new knowledge of HTML and some basic tags, create a web page called shopping.html that looks similar to the one below. You will need to use the previous instructions to help you.

You should include the following:

A suitable heading
Paragraph text
Bullet point list or a numbered list (you choose)

Extension:

Can you apply your knowledge of lists in HTML to create sub lists, like the example below.

Report abuse