Park Mains High School Coding Club

By the end of this session, you will be able to:

• Understand and use a variety of tags to structure content
• Create paragraphs to hold text
• Edit your Week 1 page to include multiple sections
• Add lists to your website
• Feel confident adding content to your webpage

Recap from Week 1

Last week you created your first webpage! You learned about:

• Logging in to Neocities
• Basic HTML structure
• Changing the title, headings, and paragraphs

Today, we’re going to expand that page with more headings and paragraphs.

Step 1: Headings

Headings are like titles or chapter names. They range from <h1> (the biggest) to <h6> (the smallest).

Example:

What do I use headings for?

Headings are not just for making text bigger. They help browsers, search engines, and screen readers understand the structure of your page by organising information into sections and topics. This makes webpages easier for people to read and understand.

A webpage should usually have one main heading (<h1>) and smaller headings underneath it. For example, this webpage has:

• one <h1> heading at the top
• one <h2> heading below the navigation bar
• one <h3> heading for each section, and
• Sometimes <h4> is used for sub-points within sections, but only if needed.

Step 2: Paragraphs

Paragraphs hold the main text for your webpage. They are wrapped in <p> tags. You can have paragraph text outside of a <p> tag, but HTML tags don’t just change how things look. They also tell the browser what the content is.

For example:

• <h1> means "main heading"
• <p> means "paragraph"
• <ol> means "ordered list"

Example:

Step 3: Lists

When you have a lot of information on your page, it can be helpful to break it up using a list.

Lists can be ordered, like this:

1. this is item one
2. this is item two
3. this is item three

or unordered, like this:

• this is item one
• this is item two
  • some items can be nested like this
  • sub-item two
  • sub-item three
• this is item three

Lists are different to paragraphs because you need an opening and closing tag for the list, and also for each list item.

Create a list like this:

use <ul> tags for an unordered list, or <ol> for an ordered list.

Challenge

Copy this code into your webpage. Can you fix this broken list?

Step 4: Comments

Developers often leave comments on their work to explain to themselves and others what a line or block of code does. These comments are ignored by the computer and only visible inside the code.

HTML offers the ability to add comments as well. A HTML comment looks like this:

Browsers will ignore HTML comments and won't display them on the page.

IMPORTANT: Comments are still visible to users with CTRL+U or Inspect Element. Do not use them to store sensitive information.

Challenge

There is a hidden comment somewhere on this page. Use CTRL+U or Inspect Element to find it. What does it say?

Step 5: Why structure matters

Click here to view a version of this page with no structure.

What makes that page hard to read? It contains all of the same information as in this lesson, just with minimal HTML. Do you think it is easier or harder to follow?

Good developers write code which is easy to read and understand. Using headings, paragraphs, and lists not only helps your users, but helps you to maintain your webpage, by easily finding and changing information on it.

Step 6: Try it yourself

Create a profile page with:

• a main heading
• at least two sections
• ordered and unordered lists
• meaningful headings

Extension Challenge

Create a webpage about:

• a game
• a sport
• a movie, or
• a hobby

Your page must include:

1. multiple headings
2. paragraphs
3. ordered and unordered lists