Park Mains High School Coding Club

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

• Create links to other webpages
• Add images to your webpage
• Understand some other useful tags like <br> and <hr>
• Add content to make your page more interesting

Recap from Week 2

Last week you added different types of headings to your webpage.
You also learned how to use <p> tags to create paragraphs, and how to make different types of list.

This week, we will make your pages more fun with images and links.

Step 1: Creating Links

Links take users from one page to another. To create a link, we use an anchor tag like this:

Clicking this link will take you to the Neocities homepage.

What's all the extra stuff inside the <a> tag?

These are called attributes, and they provide extra information about the content inside the tag.

Attributes always go inside the opening tag and change how the element behaves.

The tag creates the structure, the attributes create the behaviour

So how does the anchor tag work?

There are 4 parts to it:

<a

This opens the tag and declares it's an anchor

href="https://neocities.org">

This sets the destination of the link: the neocities.org homepage

Visit Neocities

This sets the text to be displayed instead of the link

</a>

Don't forget to close your anchor tag

The browser doesn't just turn text into a link; it wraps clickable text inside the anchor element.

Challenge

Try it yourself! Add a link to your Neocities page. Why not link it to the Wikipedia page for your favourite game or movie?

Step 2: Absolute and relative links

Websites are file systems, just like on your computer. They are split into folders and files. Some folders can contain other folders!

A link gives directions to find the file you want.

<a href="http://neocities.org"> is an absolute link. This link tells the browser to request the Neocities homepage, no matter what page is currently being viewed.

<a href="about.html"> is a relative link. It tells the browser to find the 'about.html' file in the same folder as the page currently being viewed.

<a href="images/pic.jpg"> is also a relative link. It tells the browser to access the pic.jpg file inside the images subfolder.

<a href="../index.html"> moves up one folder level to find the target.

Challenge

You are viewing the page with file path src/home/main/index.html. What is the path for the file with relative link <a href="../images/profile.jpg">?

Why this matters

Relative links are essential for internal site navigation. If you move an entire website folder, the links continue to work because they are not hardcoded to a specific web address.

Challenge

Create a second page on your dashboard called 'about.html'. Create a link to this page from your first page.

Can you create a link back to the first page from the second page?

Step 2: Adding Images

Images make your website come alive! They add a splash of colour and can split up content. To add an image, use the <img> tag like this:

The src attribute

Here we have two attributes. First, the source of the image, src. This is where the browser should go to find the image. This can be either an absolute reference, as in the example above, or a relative reference, like this:

When used in your page, it will look like this:

It is a good idea to store images you use in your site in your own file structure and use a relative link. Using an image from someone else's website can cause two problems:

1. You risk breaking copyright law
2. You have no control over that image. It can be removed or changed, which then affects your own webpage.

The alt attribute

Images on your page can be used to enhance or explain an idea or concept, or split up content.

But not everyone can see your image. This is why we include alt text with the alt attribute.

It is important to include alt text on every image. This helps:

• users who use a screen reader
• users trying to view broken images
• search engines

In other words, the alt attribute describes the image for people and systems that cannot see it.

Challenge

Try it yourself! Find some pictures or photos online and add it to your own webpage.

Try using both relative and absolute referencing. Can you place a photo into a different folder as your page and still access it?

Step 3: Void elements

Most tags, like <p>, <h1>, or even <html>, are container elements. This means that they have an opening and closing tag, and contain some kind of information. That can be text to display or other html tags.

Some tags, such as <img>, do not have a closing tag. This is known as a void element.

<br> and <hr> are two other commonly used void elements which you might come across.

• <br> inserts a line break (like pressing Enter)
• <hr> adds a horizontal line to separate sections

Challenge

View the source of your own webpage with CTRL+U. What void elements are you already using?

Hint: look at the <head> section

Now try it yourself! Add lines and line breaks to organise your webpage. Try adding bold and italic text too with <strong> and <em> tags. Note that these are not void elements.

Structure vs Presentation

We've seen how different tags affect the layout and appearance of your page.

However, HTML is mainly used to describe the meaning and structure of content, not its design.

For example, <h1> tells the browser that something is a main heading, and <p> tells the browser that something is a paragraph.

Browsers apply their own default styling to many HTML tags. This is why <strong> appears bold and <em> appears italic, even though HTML itself is not a styling language.

In Lesson 4, we will look at a styling language, CSS. CSS is used to control colours, fonts, spacing, layout, and the overall appearance of a webpage.

Step 4: Viewing page source

Have you ever seen a webpage and wondered "Hey! How did they do that?"

View HTML Source Code
Press CTRL+U in an HTML page, or right-click on the page and select "View Page Source". This will open a new tab containing the HTML source code of the page.

Inspect a HTML Element
Alternatively, right-click on an element (or a blank area), and choose "Inspect" to see what elements are made up of. In this window, you can also edit the HTML to see what it can look like with changes made. Just remember, any changes you make in this screen will not be saved. When you reload or leave the page, it will go back to the way it was.

💡 Websites you see are just HTML that the browser builds dynamically. Inspect lets you see the structure behind the page, not just what it looks like.

Most modern browsers have much more tools available than just 'Inspect'. What other debugging and developer tools can you find in your browser?

Challenge

Pick any part of this page and inspect an element on the screen. Change the HTML so that it says something silly instead.

Step 5: Try it yourself

Add a small “fun facts” section to your webpage. Add images, headings, and links to your friends' pages too!

Step 6: Debugging challenge

Challenge 1

Fix this broken link:

Challenge 2

What's wrong with this link?

Challenge 3

Why doesn't this image load?