Session 3

Today, you're going to use what you've learned about elements, attributes, and text to create a little bio for yourself that we'll put on our team website!

Your bio

Task 1: Choosing your image

First, you'll choose an image that you want to represent you on our site. You could find one you like on Google Images, draw something on paper, or take a picture with your phone. For the sake of safety and privacy, please don't use one that shows your entire face.

When you've got your image...

  1. Change the image of the shoe above to yours! (HINT: use the attribute.)
  2. It's a little small, isn't it? Look at the code for the image tag (it starts on line 36) and see if you can figure out how to change it so that it's a size you like.

Task 2: About you

Now that you've got an image to represent you, write a few sentences about yourself. Maybe you want to share where you go to school, what inspires you, what you wish more people know -- any message you want to send to the people who visit our site.

You can also use elements to format text. For example, you can make text bold, italic, and even insert links. Want to know how? Check the code that generates this text for a hint ;) Let us know if you need help.

Put your text inside the p element below this.

My name is John i am a 17 year old senior who attend Nazareth Prep. I like to play baseball and basketball. I am aso starting my own clothing line and want to learn how to create a website for it.

Task 3: A link you want to share

As part of your bio on our group site, you'll get to share a link that you think people should check out. You could link to your favorite sports team, a YouTube video you like, or whatever you want!

"https://www.nazarethprep.org/"

Once you've decided on your link, do the following:

  1. Change the link above so that it navigates there instead. HINT: This involves changing the href attribute of the a tag.
  2. Change the text "This link takes you somewhere awesome" to something that describes where it goes. For example, if you linked it to ESPN's website, maybe change it to something like "See today's scores on ESPN!"
  3. Bonus challenge: Change the code so that only part of the text contains the link. For example, if you linked your school's website, you might change it so that the text says "This is my school's" website, and only "This" contains the link. Need a hint? Look at the code that produces the text for this challenge ;)

  4. EXTRA AWESOME Bonus challenge: Right now, you may have noticed that this link opens in the same window as your page, navigating the user away from your site. Sometimes it can be nice to have a link open in a new tab or window so that the person clicking it doesn't leave your site when they follow it.

    This is going to be tough, but you can do it! The way this works is due to the target property of the a element. This page has information on it. Can you figure out how to change the code so that your link opens in a new tab or window?