What's new

The language of the web

By David, 19 April 2018 Activity

Image of an open laptop screen and keyboard.

Image: ©istock.com/scyther5

Have you ever wondered how a web page gets made? It involves using hypertext markup language, HTML. Read on to discover some of the secrets of HTML, then use it to make your own meme.

You will need

  • Windows computer

What to do

  1. Find and run the program ‘Notepad’. Notepad is a text editor, which means you can write words, but you can’t change the font or make the words bigger or smaller.
  2. Copy the following text and paste it into Notepad:

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    /* A container that holds the image and the text */
    .container {
    position: relative;
    text-align: center;
    color: yellow;
    font: 40px impact, arial, sans-serif
    }

    /* The text at the top */
    .top {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%, 0);
    }

    /* The text at the bottom */
    .bottom {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translate(-50%, 0);
    }

    </style>
    </head>

    <body>

    <div class="container">
    <img src="https://i0.wp.com/blog.doublehelix.csiro.au/wp-content/uploads/2017/05/patterns-hero.jpg?w=620&ssl=1" alt="Shell">
    <div class="top">Tell you what,</div>
    <div class="bottom">I’m having a shell of a time!</div>

    </div>
    </body>
    </html>

  3. Save the file, and when you’re saving, change the end of the file name to .html
    Screen dump from a computer showing a file name ending with .html
  4. Find your file and double click on it. It should open in your web browser
  5. That’s a pretty bad joke, right…Image of a shell with the text "Tell you what, I'm having a shell of a time".

 

Making memes

  1. Time to make some changes! First, a guide to HTML. There are two main sections to the document.
    • The first part is the style section, which is where a lot of the formatting is kept. It tells a browser which font to use, what colour the text will be and where the words will appear.
    • The second part is the body, where the actual words and pictures are contained.
  2. Here are some things to work out!
    • Find and change the captions to make a better joke
    • Make the words a different colour
    • Change the font size
    • Replace the picture
    Can you change everything to make your own hilarious meme joke?

 

What’s happening?

HTML is the language of the World Wide Web. Every page on the web, from Wikipedia to Cool Math Games includes HTML.

For each of the challenges set above, there are associated codes called tags that include the <> symbols. These tags give your web browser specific directions.

For example, the <style> tag tells your browser that the next bit of code is all about changing the visual layout of the document. Then, the </style> tag indicates that you’ve reached the end of style section. In general, most tags have a matching end tag, which is the same only with a slash in it.

Captions

If you’re looking to change captions, find and adjust the text between the <div class=”top”> and </div> tags, as well as the <div class=”bottom”> and </div> tags.

Word colour and font size

The word colour and font size are part of the page’s style. You’ll find them between the <style> and </style> tags.

To make the words a different colour, find ‘color: yellow’ in the style section then name a different colour instead of yellow. (Note that HTML uses American English spelling, so colour has no ‘u’.)

Adjust the font size by changing the number associated with it. For this example it’s ‘font: 40px’, so find and change the number 40 to another number such as ‘font: 20px’.

Replacing the picture

This one is a little trickier! To replace the image, find <img src=”https://i0.wp.com/blog.doublehelix.csiro.au/wp-content/uploads/2017/05/patterns-hero.jpg?w=620&ssl=1″ alt=”Shell”>.

You’ll need to put another image’s URL in, replacing the URL listed. If you’re on the web and want to find an image’s URL, right click the image and select ‘Copy image address’ in Chrome, ‘Copy shortcut’ in Internet Explorer, or ‘Copy Image Location’ in Firefox. You can then paste it over the URL in the code.

If you add a new image, you should also replace the word “Shell” where it says alt=”Shell”. The new description should match the new picture. For example if you have a photo of a blue flower it should read alt=”Blue flower”. This known as alternative text or ‘alt text’ and it’s used when an image can’t be displayed.

Add your own flair

If you want to learn more about HTML coding, there are lots of great sites (such as www.w3schools.com) that will help explain what different tags do and how to add links and pictures to your web pages. Just imagine what you can create!

 

If you’re after more science activities for kids, subscribe to Double Helix magazine!

Subscribe now! button

2 comments

  1. This can easily be done on non-Windows computers too – you just need any basic text editor (rather than Notepad). For instance, on Mac, you can use TextEdit (which comes with macOS).

    Also, there are many great sites with useful information on HTML and building websites, but w3schools is not one of them. It has a reputation for outdated and inaccurate information: it’s kind of infamous among professional web developers for that. I’d suggest Mozilla Developer Network (by the organisation that builds the Firefox browser) https://developer.mozilla.org/en-US/ or webplatform at https://webplatform.github.io as better quality options.

      Reply
  2. Hi Matt,
    Thanks for your feedback! We thought you’d be able to do it on a Mac, but we didn’t have one handy so we couldn’t test it, and we don’t like to publish things we haven’t tested…

    Thanks also for the feedback about w3schools. I use it as a reference, probably because it scores so highly on web searches. We’ll have a look around for other resources we can recommend.

      Reply

Leave a Reply

By posting a comment you are agreeing to the Double Helix commenting guidelines.