Lesson 2.2: HTML Tags w/ Attributes

🎯 Objectives

• Create HTML elements with attributes to add links and images to their pages.

Table of Contents

1. Getting Started
2. Do Now
3. Anchor and Image Tags
4. Coding Practice
5. Exit Ticket & Closing

Getting Started

• Login to Google Classroom for today’s lesson.

Do Now

For today's activity, you will be editing a website about sloths which is missing some information. Open the index.html file and complete these tasks:

• Create an <h1> tag which says “Sloths!”
• Create a <p> tag which says “Sloths are the slowest animal in the world”

Anchor and Image Tags

Wow, you did great with those <h1> and <p> tags! Now, let's have some fun with other cool tags – <a href…> and <img src…> tags.

Did you say anchor?

Yes! The <a href…> tag is like a magic portal on a webpage. It's called an anchor tag, and it lets us hop around from one web page to another, or even different parts of the same page.

When you see a clickable word or picture on a webpage that takes you somewhere else when you click it, that's an anchor tag doing its thing!

But how does the anchor tag know where to take us? That's where attributes come in. Think of them like special instructions we give to our HTML elements.

For an anchor tag, we use an attribute called href that holds the web address (URL) of where we want to go. It looks something like this:

<a href="https://www.codenation.org">Code Nation!</a>

In this example, "Code Nation!" is what we'll see and click on the webpage, and "https://www.codenation.org" is where we'll go when we click it.

Picture Time with <img> tag

The <img> tag allows us to add an image to our website. But how does it know which image to show?

Just like the anchor tag uses the href attribute, the <img> tag uses an attribute called src (short for source). The src attribute holds the address of the image we want to show.

Unlike most tags, the <img> tag doesn't need a closing tag. It's what we call a self-closing tag.

Here's what it looks like:

<img src="https://www.example.com/image.jpg">

Coding Practice

Let's open up our coding environment and practice writing some anchor and image tags! As I write code, make sure you are writing along with me.

Exit Ticket & Closing

As we wrap up our session, remember to complete and submit the exit ticket and submit to Google Classroom.

---

Thank you for your participation and hard work in today's session! Keep practicing and let's continue diving deeper into the world of coding!