Code Monkey home page Code Monkey logo

int-u2l2-23-24-student-exercises's Introduction

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!

int-u2l2-23-24-student-exercises's People

Contributors

cn-curriculum avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.