14.7. Exercises: HTML

If your teacher added you to a Trinket course, login to your account to access the starter code for each exercise.

Otherwise, use the links below to code in your own free account.

Note

The code editors embedded in the exercises all include a Remix button in the upper right corner which will save the code to your Trinket account. For the matching repl.it code, click these links:

1. Parts 1 - 3

2. Part 4

14.7.1. Part 1: Add a Few Elements

In the editor below, complete the index.html file for a simple webpage:

1. Add an h1 to the page that says “Why I Love Web Development”.

2. Add an ordered list to the page. It should include 3 items that describe why you are excited about web development.

3. Add a paragraph about the first web page you want to make (or have already made) with your web development superpowers!

4. Below your paragraph, add a link to an external website. Be sure the text displayed on the screen indicates where the link leads.

Note

The starter code contains other HTML inside of the head element that you do not need to modify. Just add code for this exercise, NOT delete!

Also, when clicking on your link to make sure it works, right-click to open it in a new tab!

14.7.2. Part 2: Organize the Elements

Next, add some semantic tags to organize and expand your HTML file. Use the same editor from Part 1.

1. Add <header> tags around the h1 element.

   <header>
      <h1>...</h1>
   </header>
   

2. Below the h1, add some follow-up text to expand the header element. This could include one or more subheadings or a short paragraph (<p></p>).

3. Below the header, add a section element that includes a pair of <article> tags.

   <section>
      <article>
   
      </article>
   </section>
   

4. Move the ol element from Part 1, Step 2 into the article. Add a sentence or two to introduce the list.

5. Add a second article element in the section. Move your paragraph from Part 1, Step 3 into this element. Also add a ul element that lists items you could include on your future webpage.

6. Create a new section element below the first. Add an h2 heading called “Favorite websites”, then include at least three links. (You can re-use the link from Part 1, Step 4).

   Tip

   If want to be fancy, you can place the links in a list.

   <ul>
      <li><a href="...">Link text</a></li>
   </ul>
   

7. Add a footer element that includes the name of your school, the name of your programming class, and the date. Place <small> tags around the text to reduce the size of the words.

8. (Optional) Look up the entity codes for some fun symbols, then scatter them around in your text.

14.7.3. Part 3: Add Attributes

Now add attributes to some of the tags to change the look of the text. Use the same editor from Part 1.

1. Use style="color:color_name" to change the text color of your headings to something other than black.

   • Does adding the style attribute to the <h1> tag have a different effect than adding it to the <header> tag?

2. Use the type attribute in the ordered list to change the bullets from numbers to lowercase letters.

3. Change the font for one of the paragraphs with style="font-family:Brush Script MT". Play around by trying other font names like Helvetica.

4. Use the style attribute to align the small text to the right edge of the screen.

14.7.4. Part 4: Other Semantic Tags

The editor below contains an image and some text, which you can use to practice other useful tags and attributes.

14.7.4.1. Image Attributes

Inside the <img> tag, add the width="value" or height="value" attribute to change the size of the image. value refers to a number of pixels. Start with a value of 150 and then experiment by moving up and down from there.

Note

If both width and height are used, the image resizes to their values. If only one or the other is added to the img tag, the image will scale to keep the same proportions as the original.

The src attribute references an image saved in the same folder as this HTML file. You cannot see the actual folder in the embedded editor, but clicking on the image icon in the toolbar shows that seven photos are available. Feel free to change the number in pet_1.jpg to change which picture gets displayed.

Warning

The src attribute also accepts the address for any image on the web. However, pulling images from other sites to display on your own may violate copyright laws.

Discuss with your teacher how to properly cite or request permission to use images that don’t belong to you.

14.7.4.2. Special Text Tags

1. In your math and science classes, you use superscripts or subscripts to correctly express chemical or mathematical formulas.

   Examples

   Subscripts: 2H₂ + O₂ → 2H₂O

   Superscript: ax² + bx + c = 0

   To make characters appear smaller and below the main line of text, wrap them with the <sub></sub> tags. For superscripts, use the <sup></sup> tags instead.

2. In the editor, add some subscripts and superscripts inside the first paragraph.

3. Next, replace the second set of <p> tags with <blockquote>. What happens? This tag is often used to set apart quotes taken from books, movies, plays, etc.

14.7.4.3. Details, Details

Sometimes, you want to display information on a webpage only when the user clicks in a specific spot. One way to accomplish this is by using the details element.

Paste this code into the editor:

<details>
   <p>Some text here...</p>
   <p>Some more text here...</p>
   <ul><em>List of items:</em>
      <li>One list item</li>
   </ul>
</details>

1. What does the details element do on the screen?

2. Change the first p element to <summary>. What happens?

3. Replace the generic text inside the details element with a description of how you might use it on a webpage.