Rashielea 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, use the <a> tag like this:

Clicking this link will take you to the Neocities homepage.

Within the speech marks (href=""), you tell the browser which page to link to.
Inside the <a> tags, you tell the browser what text to display.
When the browser reads the code, it displays it like this:

Visit Neocities

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?

Bonus

If you link to another page on your own website, just use the file name. Like this:

Adding target="_blank" makes the link open in a new tab.

Challenge

Create a second page on your dashboard. 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! To add an image, use the <img> tag like this:

💡 Tip: Adding alt text is important! It tells people what the image is if it doesn’t load.

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

Challenge:

Try it yourself! Find a picture or photo online and add it to your own webpage.

Bonus

You can resize your images if they are too big. Just add the style attribute to your image. We will learn more about attributes in a later lesson. For now, just change your image tag to:

Step 3: Other Useful Tags

• <br> inserts a line break (like pressing Enter)
• <hr> adds a horizontal line to separate sections
• <strong> makes text bold
• <em> emphasises text (using italics)

Example:

Challenge:

Try it yourself! Add lines and line breaks to organise your webpage. Try adding bold and emphasized text too.

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

Challenge:

Pick any part of this page and inspect an element on the screen. Change the HTML so that it says something very 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!