Divs and Attributes - Activity

Instructions:

Did you know that we can give HTML elements any attribute that we want? For instance, we can have a div element and give it an attribute of "name" which we can then pass in "George":

<div name="George"></div>

Note that "name" isn't a keyword or anything, we're just giving our HTML element an attribute of our choosing!

For this activity, your task is the create a series of nested HTML elements and give each element an attribute.

  1. Create a new HTML document in VScode and call it index.html. Be sure to add the usual HTML boilerplate code and at least one HTML tag to make sure the page loads correctly in the web browser.
  2. Create a new div element and give it the attribute of "name". Be sure to pass in your own name as the value of "name".
  3. Create a new div element within the "name" div and pass in the attribute "age" and give it a random numerical values.
  4. Create a new div element within the "name" div and pass in the attribute "height" and give it a random numerical values.
  5. Create a new image element within the "name" div and pass in a placeholder image that you've found online, a descriptive alt tag, and an additional attribute, "data", which should be equal to the following string: "profile-picture".

Challenge:

These challenges are meant to be difficult. Do not be discouraged if you aren't able to complete them. They are intended only to push you to learn as much as you can in this short course.

You may have noticed that we've created multiple div elements and we referred to each div by what attributes it contains. Attributes are a great way to give elements an identity. We'll touch more on this shortly as we learn about CSS styling. For now, your task is to use styling attributes!

Use the following document to help you with this challenge: https://www.tutorialspoint.com/html/html_attributes.htm (Links to an external site.)

  1. Create a series of h2 tags (three in total) and use the "align" attribute to make the tags align in different orientations.
  2. Using one of the h2 tags you created, apply a "style" attribute that contains a different font-family and color.