08: My Top Ten

Learning Target

• Create a web page with proper HTML syntax

• Use tags to identify the purpose of text

Resources

Basic HTML Examples: https://www.w3schools.com/html/html_examples.asp

HTML Example with Meta Info: https://ryanstutorials.net/html-tutorial/html-template.php

Instructions

Step 1: 

Create a new file in Visual Studio Code. Save the file as "topten.html". 

NOTE: On the web, we avoid spaces and capitalization in file names when it isn't necessary.

Step 2:

Choose one of the following topics to create a Top Ten list:

• • The Top Ten Cafeteria Foods  
  • The Top Ten Restaurants in Lebanon 
  • The Top Ten Movies on Netflix 
  • The Top Ten Clothing Brands 
  • The Top Ten Birthday Presents

Add the following items to your page. Be sure they make sense for your content!

• • a title
  • a heading
  • a paragraph describing the purpose of your Top Ten list
  • An ordered list sorted in reverse

Note: A list can be sorted in reverse by adding the "reversed" attribute like this:

<ol reversed>
  
</ol>

Step 3:

Add items to your list. Each item should be added inside an <LI> tag.

<li>An item in your list</li>

Step 4:

Be sure to save your file frequently.

Use the W3C Web Validator to make sure your code will pass validation. This won't catch all errors, but it is a good step to take.

Possible Extensions:

• • Change the appearance of your page by altering a 2 or more of these:
  • Add 2 or more images to your page related to your list
  • Add links to more information about each item in your list
  • Background colors (background-color)
  • Text colors (color)
  • Fonts (font-family)
  • Font sizes (font-size)

Grading