Introduction

In this project, you’ll learn how to create your own webpage to tell a story, joke or poem.

screenshot
screenshot

Step 1: Decide on a story

Before you get coding, you’ll need to decide on a story to tell.

Activity Checklist

  • Think about the story you want to tell. It could be:
    • A famous story;
    • A story you have made up;
    • Something that has happened to you or someone you know.
    It doesn’t even have to be a story. It could be a joke, a poem, or anything else you want!

Step 2: Editing your story

Let’s start by editing the HTML content and CSS style of the story webpage.

Activity Checklist

  • Open this trinket: jumpto.cc/web-story.

    The project should look like this:

    screenshot
    screenshot
  • You might remember from the ‘Happy Birthday’ project that webpage content goes in the <body> of the HTML document.

    Go to line 7 of the code, and you should see the webpage content, which is inside <body> and </body> tags.

    screenshot
    screenshot
  • Can you tell which tags are used to create the different parts of the webpage?

    screenshot
    screenshot
    • <h1> is a heading. You can use the numbers 1 to 6 to create headings of different sizes;
    • <div> is short for division, and is a way of grouping stuff together. In this webpage, you’ll use it to group together all the stuff for each part of your story;
    • <img> is an image;
    • <p> is a paragraph of text.

Challenge: Make some changes

Edit the HTML and the CSS code to customise your webpage.

screenshot
screenshot

You can alter the colours used in the webpage, and you can also use fonts like Arial, Comic Sans MS, Impact and Tahoma.

You can find more CSS colour names at jumpto.cc/colours.

If you need more help, you can use the ‘Happy Birthday’ project to help you.

Save Your Project

Step 3: Telling your story

Let’s add a second part to your story.

Activity Checklist

  • Go to line 15 of the code, and add in another set of <div> and </div> start and end tags. This will create a new box for the next part of your story.

    screenshot
    screenshot
  • Add a paragraph of text inside your new <div> tag.

    <p>More text here!</p>
    screenshot
    screenshot
  • Finally, you can add an image to your new box, by adding this code inside your <div> tag:

    <img src="">
    screenshot
    screenshot

    Notice that <img> tags are a bit different to other tags, as they don’t have an end tag.

  • For HTML images, you need to add the source of the image, inside the speech marks.

    Click the image icon to see the images available for your story.

    screenshot
    screenshot
  • Find the name of an image you want to add, for example buildings.png. You can then click index.html to get back to your code.

    screenshot
    screenshot
  • You can then add the name of the image between the speech marks in your <img> tag.

    <img src="buildings.png">
    screenshot
    screenshot

Step 4: Finding your own images

Let’s find an image from the web to add to your story.

Activity Checklist

  • Go to jumpto.cc/html-images and find an image that you want to include in your story.

  • Right-click the image, and click ‘Copy image URL’. The URL is the address of the image.

    screenshot
    screenshot
  • Paste the URL between the speech marks in your <img> tag. You should see your image appear!

    screenshot
    screenshot

Save Your Project

Step 5: Uploading images

If you have a Trinket account, you can also upload your own images to your webpage!

Activity Checklist

  • Click the image icon at the top of your trinket and then click ‘Add Image’.

    screenshot
    screenshot
  • Find your image on your computer, and drag it into your trinket.

    screenshot
    screenshot
  • You can then just add the name of your new image between the speech marks in your <img> tag, like this:

    <img src="buildings.png">

Save Your Project

Challenge: Keep going!

Use what you’ve learnt in this project to finish telling your story! Here’s an example:

screenshot
screenshot

Save Your Project