Head office, Rana Pratap Bagh, Delhi011 2721 1512+91 97116 99511

Science project idea

HTML personal home page with a photo, list and links

A web page is a text file with tags that tell the browser what each part is. This project builds a first page using headings, paragraphs, an image, a list and links.

Make it yourself8 numbered steps, the materials and the science, all free.Go to the stepsGet a ready-made kitReady-made models, kits and spare parts in the store under Robotics and Coding.Browse Robotics and CodingAsk on WhatsAppAsk the head office whether a model or kit for this idea is available.Send a message

What it shows

A web page is a text file with tags that tell the browser what each part is. This project builds a first page using headings, paragraphs, an image, a list and links.

The science

HTML stands for HyperText Markup Language. Tags such as h1 and p are written in angle brackets and mark what each piece of text is. The browser reads the file and draws the page. Links use the a tag with an href, which is the address the link goes to, and images use img with a src and an alt text for those who cannot see the picture.

Materials

Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.

  • A computer, laptop or phone with a browser (free)
  • Notepad (Windows) or any free text editor, such as VS Code
  • A web browser (free)
  • An image of a drawing or scenery that you made, saved as me.jpg in the same folder
  • A notebook and a pencil

Safety

For this project: Do not put your address, phone number or school name on a page that will be shown to others.

Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.

All the safety rules

Step by step

8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.

  1. Make a folder called mysite and in Notepad type the page structure: <!DOCTYPE html>, <html lang="en">, <head>, <title>My Home Page</title>, </head>, <body> and </body></html>. Save it as index.html with Save as type set to All Files.

  2. Inside body add <h1>Hello, I am Asha</h1> using your own first name, then <p>I am in class 7 and I love drawing.</p>.

  3. Add the picture with <img src="me.jpg" alt="My drawing of a mango tree" width="300">.

  4. Add <h2>My hobbies</h2> and a list: <ul><li>Drawing</li><li>Cricket</li><li>Reading</li></ul>.

  5. Add <h2>Favourite sites</h2> and a link <a href="https://www.scratch.mit.edu">Scratch</a> so that clicking it opens that site.

  6. Save the file and open it by double clicking; the browser shows your page.

  7. Make a second file about.html and link to it from the first page with <a href="about.html">About me</a>, and add a link back.

  8. Change a word, save and press F5 in the browser to see changes.

What you should see

The browser shows a page with a heading, a paragraph, a picture, a bulleted list and links that work, and clicking the About link opens the second page.

Viva questions

A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.

1What does HTML stand for?

HyperText Markup Language.

2What is a tag?

A word in angle brackets that tells the browser what a part of the page is.

3Why use alt text on images?

For people who cannot see the image and when the image does not load.

4What does href hold?

The address that a link goes to.

Free ebook: Viva Questions for Science Projects

Take it further

Add a third page with a table of your favourite books and link all three pages together.

Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.

Free ebooks for this project

WhatsApp us