Computer Science
Grade 6
20 min
Building Your First Webpage: A Superhero Profile!
Apply all learned concepts to create a simple webpage showcasing a superhero profile.
What you'll learn
- Identify the basic HTML tags (, , , , , ) and explain what each one does in creating a webpage.
- Apply the learned HTML tags to create a simple webpage structure with a title and a paragraph about their chosen superhero.
- Explain how to use different heading tags ( to ) to create a clear hierarchy of information on their webpage.
- Create a complete superhero profile webpage, including a title, a heading, and at least one paragraph describing their superhero's powers, using only the HTML tags learned in the lesson.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define HTML and its purpose as the language of webpages.
Identify and write basic HTML tags, including `<h1>`, `<p>`, and `<img>`.
Structure a simple webpage with a heading, a paragraph, and an image.
Explain the concept of opening and closing tags.
Use the `src` attribute to tell an `<img>` tag which picture to display.
Save a text file with an `.html` extension and open it in a web browser to see their creation.
Ever wanted to create a secret online headquarters for your own superhero? 🦸♂️ Let's build their official profile page for the whole world to see!
In this lesson, you'll learn the secret code that builds all the websites you visit every day. This code is called HTML, and we'll use it to create a cool web...
2
Key Concepts & Vocabulary
TermDefinitionExample
HTML (HyperText Markup Language)The special coding language used to create and structure webpages. It's like the skeleton that gives a website its shape.The file you create, `superhero.html`, will be written in HTML.
TagA command written inside angle brackets `< >` that tells the web browser what to do.`<h1>` is a tag that tells the browser to make the text a big heading.
ElementA complete piece of HTML content, which includes the opening tag, the content inside, and the closing tag.`<p>My superhero can fly!</p>` is a complete paragraph element.
Heading TagUsed to create titles and subtitles on a webpage. `<h1>` is the most important heading, and they go down to `<h6>`.`<h1>Captain Astro</h1>`
Paragraph TagUsed to...
3
Core Syntax & Patterns
The Tag Sandwich
<opening_tag>Content goes here</opening_tag>
Most HTML elements need an opening tag (like `<h1>`) and a matching closing tag (like `</h1>`). The closing tag always has a forward slash `/`. The content you want to show goes in the middle.
The Image Tag Rule
<img src="filename.extension">
The `<img>` tag is self-closing and doesn't need a closing tag. It MUST have a `src` (source) attribute that tells the browser the exact name of the image file you want to show.
The .html File Extension
Save your file as `your_filename.html`
To make your code work as a webpage, you must save the file with the `.html` extension. This tells the computer to open it with a web browser like Chrome or Safari.
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You're building a 'Gadgets' section for a hero's profile. For each gadget, you need to show its name, a picture, and a short description. Which combination of tags provides the best structure for ONE gadget?
A.<h1>Gadget Name</h1><p>Picture and Description</p>
B.<h3>Gadget Name</h3><img><p>Description</p>
C.<li>Gadget Name, Picture, Description</li>
D.<p>Gadget Name</p><p><img></p><p>Description</p>
Challenging
Your superhero's origin story has three parts: 'The Accident', 'Discovering Powers', and 'Becoming a Hero'. Which of these HTML snippets organizes this information most clearly and correctly?
A.<h2>Origin Story</h2><h3>The Accident</h3><p>...</p><h3>Discovering Powers</h3><p>...</p>
B.<h1>Origin Story</h1><p>The Accident...</p><p>Discovering Powers...</p>
C.<ul><li>Origin Story</li><li>The Accident</li><li>Discovering Powers</li></ul>
D.<p>Origin Story</p><p><b>The Accident</b>...</p><p><b>Discovering Powers</b>...</p>
Challenging
What is the likely visual result of this incorrect code on a superhero profile? `<h1>About <p>Captain Comet</p></h1>`
A.It will cause the entire page to go blank.
B.It will show 'About' as a heading and 'Captain Comet' as a normal paragraph below it.
C.The browser will try its best, likely showing all the text 'About Captain Comet' in the large heading style.
D.It will only show 'About' and ignore the <p> tag completely.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeMore from Web Development Basics
Computer Science for other grades
Frequently asked questions
What grade level is "Building Your First Webpage: A Superhero Profile!"?
Building Your First Webpage: A Superhero Profile! is a Grade 6 Computer Science lesson on ExcelOS.
What will I learn in Building Your First Webpage: A Superhero Profile!?
You'll be able to: Identify the basic HTML tags (, , , , , ) and explain what each one does in creating a webpage; Apply the learned HTML tags to create a simple webpage structure with a title and a paragraph about their chosen superhero; Explain….
Is "Building Your First Webpage: A Superhero Profile!" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with Building Your First Webpage: A Superhero Profile!?
This lesson includes 27 practice questions across multiple difficulty levels, each with instant feedback and explanations.