🎯 Session Overview
Welcome to Session 2! In our first session, we built the basic skeleton of a web page using <html>, <head>, and <body> tags.
Today, we are going to add the meat and muscles to that skeleton! By the end of this session, you will learn how to:
- Understand the anatomy of an HTML Element (like a digital Lego brick).
- Give your elements superpowers using HTML Attributes.
- Format your text beautifully using Headings and Paragraphs.
- Connect websites together using clickable Links.
- Make your page look awesome by inserting Images.
⏪ Quick Recap: Session 1
Let's do a fast memory check. What did we learn last time?
- The Internet connects computers globally, while the Web is the collection of websites living on it.
- Web browsers (like Chrome or Edge) read HTML code and turn it into the visual pages you see.
- Every HTML document is a sandwich: The
<html>wraps everything. The<head>holds invisible settings. The<body>holds everything you can actually see on screen.
Now, let's learn exactly how the tags inside the <body> work!
🧱 What is an HTML Element?
An HTML Element is a single piece of content on a web page. Think of elements as Lego bricks. You stack them together to build a house (a website!).
Most elements have three distinct parts:
- An Opening Tag: Tells the browser where the element begins.
- The Content: The actual text or stuff you want to show on the screen.
- A Closing Tag: Tells the browser where the element ends (notice the forward slash
/).
If you forget the closing tag, the browser gets confused, and your whole page might look like a giant, messy block of text!
⚙️ What is an HTML Attribute?
Sometimes, an opening tag needs a little extra instructions to do its job. We provide this extra info using an Attribute.
Imagine your HTML element is a person. The tag says "I am a person". The attribute says "I am wearing a blue shirt".
Attributes are always written inside the opening tag. They consist of an attribute name and an attribute value surrounded by quotation marks.
Common Attributes We Will Use Today:
- href: Tells a link exactly where to go (the destination URL).
- src: Tells an image where to find its picture file.
- alt: Provides backup text if an image fails to load.
- width: Changes how wide an image is.
- target: Tells a link to open in a new tab instead of the current one.
📝 Headings and Paragraphs
Every good article, game review, or blog needs titles and readable text. HTML gives us 6 levels of headings to organize our content, from <h1> (the biggest) down to <h6> (the smallest).
For your normal, everyday sentences, we use the paragraph element: <p>. Paragraphs automatically add space above and below the text so it isn't clustered together.
<h1>Minecraft Review</h1>
<h2>Why I love this game</h2>
<p>Minecraft is an amazing game where you can build anything you imagine using blocks. I like playing in survival mode with my friends.</p>Line 1: <h1> creates the main, largest title on the page. Only use one of these per page!
Line 2: <h2> creates a sub-title. It's slightly smaller. Good for dividing your page into sections!
Line 4: <p> creates a block of text. When you close it with </p>, the browser knows the paragraph is finished.
🔗 Adding Links
The "Web" is called a web because all the pages are connected together! We connect pages using the Anchor element, written as <a>.
But an anchor tag alone is useless. It needs to know where to take you when you click it. We tell it where to go using the href attribute (which stands for Hypertext REFerence).
<p>Want to learn more?</p>
<a href="https://www.google.com" target="_blank">Search on Google</a><a: Starts the anchor link element.
href="https://www.google.com": The required attribute telling the browser where to navigate.
target="_blank": An optional but useful attribute! It tells the browser to open the link in a brand new tab so the user doesn't lose your page.
>Search on Google: Closes the opening tag and provides the text the user will actually see and click on.
</a>: The closing tag that ends the link.
🖼️ Inserting Images
A website without pictures is pretty boring! To add an image, we use the <img> element.
Important Rule: The <img> tag is what we call an "empty element" or "self-closing tag". Because it doesn't wrap around any text, it does not have a closing tag!
The image tag relies entirely on attributes to work:
<h3>My Pet Dog</h3>
<!-- Adding an image of a dog -->
<img src="dog.jpg" alt="A happy golden retriever" width="400"><img: Opens the image tag.
src="dog.jpg": The "Source" attribute. This tells the browser the file name (or URL) of the picture to display.
alt="A happy golden retriever": "Alternative text". If the picture fails to load, this text shows up instead. It is also read aloud by screen readers for blind users. Always include this!
width="400": Forces the image to be exactly 400 pixels wide, preventing giant images from breaking your layout.
>: Closes the tag. Notice there is no </img> at the end!
🧩 Putting It All Together
Here is what a simple web page looks like when we combine Headings, Paragraphs, Links, and Images into the <body>!
🏋️ Practice Exercises
Open your code editor. Create a new file called practice2.html and try these challenges!
Exercise 1: Title and Story
Create a basic HTML structure. Inside the <body>, add a main heading (<h1>) that says "My Favorite Game". Below it, write a short paragraph describing why you love the game.
<h1>Your Title</h1> for the heading, and <p>Your description here.</p> for the paragraph!
Exercise 2: Picture Perfect
Find an image URL of your game online. (Right-click an image on Google -> "Copy Image Address"). Add the image right below your paragraph using the <img> tag.
<img src="paste_your_url_here" alt="Game cover" width="300">
Exercise 3: The Portal
Add a link at the very bottom of your page that takes the user to the official website or wiki of the game.
<a href="https://minecraft.net" target="_blank">Play Here</a>
🔥 Mini Challenge: The Ultimate Game Page
Let's make sure you can put all the pieces together from memory.
Delete everything inside the <body> of your practice file. Create a complete page from scratch containing:
- An
<h1>with the game name. - An
<h2>that says "Why I love it". - A
<p>describing the game. - An
<img>showing the game cover. - An
<a>link pointing to the game's official site.
<body>
<h1>Roblox</h1>
<h2>Why I love it</h2>
<p>I can play thousands of different games with my friends!</p>
<img src="roblox-logo.jpg" alt="Roblox Logo" width="300">
<a href="https://roblox.com">Play Now</a>
</body>🏠 Homework Assignment
Your mission before the next session:
Create a webpage about your Favorite Hobby (sports, drawing, coding, reading, etc.).
The page must include:
- One main heading (
<h1>). - At least two paragraphs (
<p>) explaining the hobby. - One image (
<img>) showing the hobby in action. - One link (
<a>) pointing to a YouTube video or website related to the hobby.
Save it as hobby.html and test it in your browser to make sure the link and image actually work!
📝 Session Summary
- HTML Elements are the building blocks of the web, usually made of an opening tag, content, and a closing tag.
- Attributes go inside the opening tag and give the element extra instructions (like
src,href,width). <h1>to<h6>are used for Headings to structure your content.<p>is used for blocks of readable Paragraphs.<a>is an Anchor used to create links, combined with thehrefattribute.<img>inserts Images using thesrcattribute. It is an empty element with NO closing tag.