Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Introduction to Web Development. Join the course to learn more.

Skip to 0 minutes and 3 seconds Now it’s time for you to have a go at changing the visual appearance of the content on your web page. Let’s have a look at lists. On this Raspberry Pi fan club web page, we have a paragraph that describes the specifications of the Raspberry Pi 4. This is quite hard to read. We better put it into some sort of list. There’s two sorts of lists that we can have. There’s an unordered list, which returns bullet points, and an ordered list, which returns numbers. So for this, we probably want bullet points. So we have to tell– put into the HTML that we’re going to put in an unordered list, ul.

Skip to 0 minutes and 51 seconds It gives us the end tag, which we can drag to the end of where our list is going to be. And then we need to say the list will start here. The first point of the list would be here. So we’ve got an li tag. It gives us the end of the li tag, which we can grab. And then we can drag it to the end of that point. So this is going to be our first point here. And get rid of that comma. And we can do another one for the next point of the list.

Skip to 1 minute and 33 seconds Here. Drag it to the end of that point. Get rid of that comma. And you can see on the right hand side, we’ve got two bullet points. You can also carry on and do– and add to that list. If you wanted to do the ordered list, all we have to do is change the ul tag into an ol tag.

Skip to 2 minutes and 2 seconds And you can see on the right hand side it changes to the numbers 1 and 2. We can also all alter the appearance of the text on our web page. So if we wanted to italicise this word fantastic, we can use the em tag.

Skip to 2 minutes and 22 seconds And we can just drag the end of the em tag to the end of fantastic. And you can see it italicised here on our preview. We can also embolden text by using the strong tag.

Skip to 2 minutes and 42 seconds So we can type in the strong tag, grab the end tag, and drag it to the end of the Raspberry Pi. And you see that in bold on the right hand side.

Skip to 2 minutes and 58 seconds Great. There’s also a place for a quote. So here’s a quote from Raspberry Pi website. But it just looks like the same as the rest of the page. It’s not– that doesn’t indicate it’s come from somewhere else. So we can use the block quote tag. So let’s find it on the HTML.

Skip to 3 minutes and 26 seconds Here it is. Now we can insert block quote tag. And that’s the actual word block quote. And that’s just going to cut the end tag out, make sure you get everything you need.

Skip to 3 minutes and 45 seconds There’s the end of that line.

Skip to 3 minutes and 51 seconds And paste it in. And you can see on the preview here it’s now indented. So it gives that appearance of being from somewhere else.

Skip to 4 minutes and 3 seconds There’s also a space here for an image. Here’s a Raspberry Pi 4, but we don’t have an image in it yet. So we need to get an image from somewhere. So I’ve searched for an image and found this Raspberry Pi 4. And we need to copy the URL. So we need to grab this, copy it. So now we need to paste that URL into the appropriate place on our web page. So here’s the Raspberry Pi 4. So just below that, we can paste the URL in. But what– it just gives us the URL at the moment. It doesn’t actually give us the image. So we need to use the img tag.

Skip to 4 minutes and 50 seconds So img. And we also– we need to tell it where the source has come from. So– and then equals.

Skip to 5 minutes and 4 seconds And then you need to put the source into quotes.

Skip to 5 minutes and 10 seconds And we need to finish that tag off. So now we can see we’ve got the Raspberry Pi image, but it is huge. So we need to make it a bit more of appropriate size for our web page. So we need to add in some attributes here of width and height. So let’s do width. Let’s say 200. And then we can have the height attribute, as well, which let’s say is 200 as well.

Skip to 5 minutes and 46 seconds Now we can see that we have the Raspberry Pi 4 at a really nice size for our webpage. Now it’s time for you to have a go. Try changing the appearance of your webpage by using these tags, and share a link to your trinket in the comment section. If you get stuck, be sure to ask questions and help each other out. I look forward to seeing what you create.

HTML structure and tags

In this step you will learn about the basic structure of a webpage and look at more tags to use for your Raspberry Pi Fan Club page.

Compare the basic HTML structure below to your Raspberry Pi Fan Club webpage:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Any information within the <head> tags is hidden and used by browsers and web crawlers; this is known as metadata. Also notice that some tags are nested inside other tags; in the example below, <title> is nested inside <head> and <head> is nested inside <html>. The image below shows how elements can exist inside other elements:

Diagram showing how nesting works. Each tag from the HTML above labels a rectangle, with some rectangles contained within others. The title rectangle is inside the head rectangle, which is itself within the html rectangle. The body rectangle is also inside the html rectangle, but below the head rectangle. It contains a p rectangle below a h1 rectangle. The p rectangle contains an em rectangle and a strong rectangle.

The table below describes the tags that have been used in the basic HTML structure above:

Tag Description
<!DOCTYPE> This is a declaration to show the document type; it helps the web browser to display the webpage correctly
<title> </title> This defines the title of the webpage, to be displayed on the tab of a web browser
<html> </html> This shows the start and end of the HTML file
<head> </head> This gives information about the file (metadata)
<body> </body> This defines the main body; everything within the body tags appears on the webpage
<h1> </h1> This defines a heading; <h1> to <h6> tags are used for different-sized headings, with <h1> the largest and <h6> the smallest
<p> </p> This defines a paragraph

Headings and lists

Headings are used to start a new section, to help the reader understand the purpose of that part of the webpage.

You use <h2> and <h3> headings to introduce different sections, such as the “Raspberry Pi 4“ header that sits inside the “Raspberry Pi Fan Page” section of your Raspberry Pi Fan Club webpage. Think of <h2> headings like the chapters of a book. Those individual sections might also use more specific headings (<h3> tags, then <h4> tags, and so on) to introduce subsections.

Change the heading tags on your Raspberry Pi Fan Club webpage to be more useful to the reader.

You can also use a list on your Raspberry Pi Fan Club webpage, to break a paragraph into key points. This can make the points stand out for the reader.

To create a list on your webpage, you have two options: an unordered list <ul>, which gives bullet points, or an ordered list <ol>, which gives numbered points. Each item in the list must be contained within <li> tags:

<ul>
  <li>Bullet point</li>
  <li>Bullet point</li>
</ul>  

Create a list on your Raspberry Pi Fan Club webpage. Add <em> tags to italicise and <strong> to embolden text on your page, to highlight the key points.

<em>This is italicised.</em>

Images and blockquotes

If you want to show the Raspberry Pi logo, or help the reader understand a point you are making on your page, you may want to include an image.

The <img> tag is used to define an image element on a webpage. It uses the src attribute to indicate the source of the image — where it is stored. The <img> tag used below is from the Raspberry Pi Fan Club webpage:

<img src="https://sandbox.trinket-shell.com/5550343ee6c144dc/raspberrypi.png">

In the HTML above, a Uniform Resource Locator (URL) is used to point to where the image is stored — in this case, on the Trinket website.

<blockquote> tags are used when you want to give a quote from another source; this is useful when you want to back up a point you are making. This will indent the text and make the reader aware that it is different to the rest of the text.

You have used a lot of new tags, so I’ve recapped them in this table:

Tag Description
<ul> </ul> Defines an unordered list, shown as a bulleted list
<ol> </ol> Defines an ordered list, shown as a numbered list
<li> </li> Defines a list point
<blockquote> </blockquote> Defines a section that is quoted from another source
<img> Defines an image; uses the src attribute within the tag to indicate the source of the image

Add an appropriate image to your Raspberry Pi Fan Club webpage by adding an <img> element, as shown in the example HTML above.

Here are the URLs for three images you can use to replace the URL in the example above:

  • https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi2.png
  • https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi3.png
  • https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi4.png

Use <blockquote> on your Raspberry Pi Fan Club webpage.

Share your webpage

  1. Save your Raspberry Pi Fan Club webpage.
  2. On your Trinket, click on “Share”.
  3. Click on “Link”.
  4. Copy the link.
  5. Paste the link in the comments below for your fellow learners.

An animated gif clicking on the share icon and highlighting the link to copy

Look at the other webpages that have been created and compare them to yours. Is there anything you can take from the other learners’ webpages that you can use to improve yours?

Share this video:

This video is from the free online course:

Introduction to Web Development

Raspberry Pi Foundation