Challenge Yourself

Intro

If you want to, take a few moments to recap what we've done in class and to brush up on your skills.

The goal is to recreate this HTML

Don't worry! You don't have to copy the content I wrote

But I did put in some easter eggs, to get you to think about the semantics of HTML

For example, in the previous paragraph, there are two bolded sections, but I actually used different tags!

One is the <strong> tag and the other the <b> tag.

I encourage you to Google or visit the Mozilla Developer Network aka MDN to learn the difference.

Challenge

So far, I asked you to use different tags to markup headings (h1, h2), paragraph, strong, bold, and to link.

In order to be able to display a triangular right or left bracket (less than/greater than) you'll need to use a character entity because whenever HTML sees a less than/greater than input it thinks of it as code.

What's next?

  1. Add image using the <img> tag.

    This tag is a void tag so it doesn't need a closing tag.

    You will need to paste the URL of an image using the src="link" attribute.

    If you want it to open in a new window, you'll need a second attribute: target="_blank"

    This tag will open the link in a new tab. Like so: Click me!

  2. Also, let's add a photo!

    Like so

    Make sure to copy the photo's URL. Sometimes it's different than the URL showing in the browser.

Experiment

The goal of this challenge is to make you experiment and explore different HTML tags.

When you look at my HTML reference you'll see I used additional tags for organization and that I nested tags inside tags inside tags...

If you are able to:

You're well on your way to understanding the structure of HTML!