HTML Practice Exercises

  LEARNING OBJECTIVE:

The objective of this exercise is to help you practice using HTML tags to code a basic web page.

TIP:  Mac users – read this if you get stuck:  http://webdesign.about.com/od/textedit/a/aa122006.htm

 

Exercise #1:

Start by creating a new .html file in notepad. 

Develop a basic web page using the HTML tags you learned in class. Try to make your page look different than the example HTML page that we developed during class.  Include each of the following elements in ANY order:

  • The correct html, head, and body tags
  • Insert the following phrase, without the quotes, as your title tag: “HTML Beginner Exercise by <insert your first and last name>.”  Example:  HTML Beginner Exercise by Theresa Clarke
  • One unordered list of items (must include at least four items)
  • One ordered list of items (must include at least four items)
  • bold word or phrase anywhere on the page
  • A centered word or phrase anywhere on the page
  • An italicized word or phrase anywhere on the page
  • A working e-mail address link (where someone can click the link and send you e-mail such as clarketb@jmu.edu)
  • At least three hypertext links to other sites on the Internet
    • For the three links, use appropriate words/phrases as anchors rather than the URL.  For example, write JMU or James Madison University as the anchor rather than http://www.jmu.edu as the anchor within the body of the page.)
  • A bit of colored text somewhere on the page using one or more of the colors on the browser-safe color palatte or HTML color names.
  • At least two horizontal lines (rules) anywhere in two different areas of the page
  • Two .jpg or .gif images images
    • For this exercise, you should select an image that is already existing on the web.  Once you find an image, you want to find the associated URL and point to it from your web page.  To point to an image on the web, right click the image, view the image information, copy and paste the image’s URL into notepad using the correct HTML tags.

 

Exercise #2:

  1. Look at the image of the web page below.  
  2. Using HTML coding, replicate the page exactly.  
  3. Save the file with your first initial and full last name and ex2 (correct example: tclarkeex2.html).  Your file name should have NO spaces.
  4. The hypertext links for James Madison University and clarketb@jmu.edu must be working links. 
  5. Don’t forget to include the title by putting the phrase “I Love HTML!!!” in your title tag.
  6. Tip:  There is one of each in the coding – H1, H2, and H3.  Do not use the font size and bold tags.
  7. The title tag should not be bold, even thought looks bold in the tab on the screenshot.

html_practice_exercise_2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Creative Commons License
HTML Practice Exercises by Theresa B. Clarke is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

3 Comments on "HTML Practice Exercises"


  1. I am teaching a high school computer science class. We are starting a unit on HTML. I would like to link to your exercises for use in class. Can you tell me if that is ok with you, and if it is, how to access the web page referred to in exercise 2.

    Reply

  2. Rick,

    You are welcome to provide a link to this exercise. In terms of the web page referred to in exercise 2, that is just a screen shot of a page created in HTML. It is not a live page. Let me know if you have any further questions.

    Theresa

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*