Update README.md

README.md

@@ -1 +1,83 @@
-# int-u2l2-23-24-student-exercises
+# Leeson 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](#getting-started)
+2. [Do Now](#do-now)
+3. [Code Exploration](#code-exploration)
+4. [Anchor and Image Tags](#anchor-and-image-tags)
+5. [Coding Practice](#coding-practice)
+6. [Exit Ticket & Closing](#exit-ticket-closing)
+
+## Getting Started
+
+- Icebreaker: (LEAD VOL ADD HERE)
+- Set up a name tent.
+- 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 Popcode/Replit provided:
+
+- Create an `<h1>` tag which says “Sloths!”
+- Create a `<p>` tag which says “Sloths are the slowest animal in the world”
+
+## Code Exploration
+
+Let's explore some HTML tags you might not have been familiar with. Take a look at the tags that say `<a href…>` and `<img src…>`:
+
+- What do you think these tags are doing?
+- How do these tags look different from the `<p>` tags and `<h1>` tags?
+- For a little challenge: Based on what you see in the code, try to change the YouTube video OR the image.
+
+## 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. Cool, right?
+
+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: 
+
+```html
+<a href="https://www.example.com">Click me!</a>
+```
+
+In this example, "Click me!" is what we'll see and click on the webpage, and "https://www.example.com" is where we'll go when we click it.
+
+### Picture Time with `<img>` tag!
+
+Now, who doesn't love pictures, right? 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.
+
+Here's what it looks like:
+
+```html
+<img src="https://www.example.com/image.jpg">
+```
+
+Oh, and one more thing. Unlike most tags, the `<img>` tag doesn't need a closing tag. It's what we call a **self-closing tag**.
+
+Are you ready to try these tags out? Let's do this!
+
+## 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 submit your updated project 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!