Introduction

In this project, you will create a showcase of your HTML projects and learn about links and embedding resources.

screenshot
screenshot

Save

Step 3: Embedding Projects

As well as linking to trinkets as webpages we can also embed them in a web page.

Activity Checklist

  • You might want to try working in Fullscreen mode so you have more space:
screenshot
screenshot

Press Esc to exit Fullscreen mode.

  • Run your trinket and click on the Happy Birthday link.

  • Click on the trinket menu and select embed. If you’re not in Fullscreen mode you may have to scroll. Use the scroll bar on the right or the down arrow on the keyboard.

screenshot
screenshot

Activity Checklist

  • Choose ‘Only show code or result (let users toggle between them)’ and copy the embed code for the trinket.
screenshot
screenshot
  • Trinket has created some HTML for you to include in your webpage. It uses an <iframe> tag which allows content to be embedded within a page.

  • Now paste that code under the link to the Happy Birthday trinket:

screenshot
screenshot
  • Run your trinket to test it and you should see your Happy Birthday project embedded in the webpage.
screenshot
screenshot
  • You may find that the bottom of your trinket isn’t displayed. You can fix that by changing the height value on the <iframe>.
screenshot
screenshot

Set the height to 400. If you made changes to the Happy Birthday project you might need to choose a different value.

screenshot
screenshot

Save Your Project

Challenge: Embed More Projects

Embed more of your projects into the Showcase. Remember that you can easily find their trinket pages by clicking on the links on your webpage.

Step 4: Create a Table of Contents

Let’s add a Table of Contents so we can easily get to each project.

Activity Checklist

  • As well as being able to link to other webpages, we can link to parts of a webpage if we give them an id.

Add an id to the <h2> heading for the Happy Birthday project:

screenshot
screenshot
  • Add ids to each of your projects and give them short names: story, wanted, recipe and letter.

  • You can link to an element with an id by putting a hash ‘#’ symbol in front of its name. For example, #birthday.

Create an ordered list of links to your projects. (Ordered lists are introduced in the Recipe project.)

screenshot
screenshot
  • Run your project and test it by clicking on the links to move to your projects.
screenshot
screenshot

Save Your Project

Step 5: Getting Back to the Top

Activity Checklist

  • It’s also useful to be able to navigate back to the top of the page. HTML has #top for this purpose.

  • Add a link to #top after each embedded project in your webpage:

screenshot
screenshot
screenshot
screenshot
  • Test your links by clicking on Top to get back to the top of the page.

Save Your Project

Challenge: Improve Your Showcase

Use the CSS you have learnt to make your page more interesting. Try changing the background color of the page or the font used for the headings.

You can also add some information about each project and what you liked about making it.

Challenge: Create a New Showcase

Trinkets aren’t the only thing you can embed in a webpage. You can embed videos, widgets (such as a weather widget) or Scratch projects.

Open the Embed Scratch Example trinket and Run it: https://trinket.io/html/9f7212b8fe

Go to the Scratch website and find a project that you like. It can be one of your own or one you’ve found.

If you are logged in you can click the ‘Embed’ button below the project to get the HTML embed code.

screenshot
screenshot

If you are not logged in then look for the Scratch project number in its web address.

screenshot
screenshot

Make a copy of the <iframe> code in the Scratch Embed example and change the project number to the one for the project you want to embed:

screenshot
screenshot

Save Your Project